Merge pull request #324 from eccenca/release/v24.4.1

Release v24.4.1 into main branch

Author: haschek

CHANGELOG.md

@@ -6,6 +6,33 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 ## [Unreleased]
 
+### Fixed
+
+-   React flow v12:
+    -   add missing styles from react flow library to ensure proper functionality of new connection lines
+-   `<Tooltip />`
+    -   re-check hover state after swapping the placeholder before triggering the event bubbling
+
+## Changed
+
+-   `<IconButton/>`
+    -   increase the default delay before swapping the tooltip placeholder of the icon, reducing unwanted swaps because of mouseovers that were not intended
+-   `IntentBaseTypes` now available via root export
+    -   some `intent` properties support less or more intent types, in case you need to test supported types before, then you can use it directly from the component interface, e.g. `TextFieldProps["intent"]`
+
+### Added
+
+-   `application-colors` and `data-color` icons, both represented by the Carbon `ColorPalette` icon
+
+## [24.3.1] - 2025-08-21
+
+### Fixed
+
+-   React flow v12:
+    -   add missing styles from react flow library to ensure proper functionality of new connection lines
+
+## [24.4.0] - 2025-08-07
+
 ### Added
 
 -   `<ExtendedCodeEditor />`

package.json

@@ -1,7 +1,7 @@
 {
     "name": "@eccenca/gui-elements",
     "description": "GUI elements based on other libraries, usable in React application, written in Typescript.",
-    "version": "24.4.0",
+    "version": "24.4.1",
     "license": "Apache-2.0",
     "homepage": "https://github.com/eccenca/gui-elements",
     "bugs": "https://github.com/eccenca/gui-elements/issues",

src/common/index.ts

@@ -4,6 +4,7 @@ import getColorConfiguration from "./utils/getColorConfiguration";
 import { getScrollParent } from "./utils/getScrollParent";
 import { getGlobalVar, setGlobalVar } from "./utils/globalVars";
 import { openInNewTab } from "./utils/openInNewTab";
+export type { IntentTypes as IntentBaseTypes } from "./Intent";
 
 export const utils = {
     openInNewTab,

src/components/Icon/IconButton.tsx

@@ -50,7 +50,7 @@ export const IconButton = ({
     const defaultIconTooltipProps = {
         hoverOpenDelay: 1000,
         openOnTargetFocus: restProps.disabled || (restProps.tabIndex ?? 0) < 0 ? false : undefined,
-        swapPlaceholderDelay: 1,
+        swapPlaceholderDelay: 10,
     };
     const iconProps = {
         small: restProps.small,

src/components/Icon/canonicalIconNames.tsx

@@ -8,6 +8,7 @@ const canonicalIcons = {
     "application-homepage": icons.Workspace,
     "application-legacygui": icons.ResetAlt,
     "application-mapping": icons.ModelBuilder,
+    "application-colors": icons.ColorPalette,
     "application-queries": icons.DataView,
     "application-useraccount": icons.UserAvatar,
     "application-vocabularies": icons.Catalog,
@@ -50,6 +51,7 @@ const canonicalIcons = {
     "artefact-workflow": icons.ModelBuilder,
 
     "data-boolean": icons.Boolean,
+    "data-color": icons.ColorPalette,
     "data-sourcepath": icons.Data_2,
     "data-targetpath": icons.Data_1,
     "data-string": icons.StringText,

src/components/Tooltip/Tooltip.tsx

@@ -134,7 +134,15 @@ export const Tooltip = ({
                         (target as HTMLElement).focus();
                         break;
                     case "afterhover":
-                        (target as HTMLElement).dispatchEvent(new MouseEvent("mouseover", { bubbles: true }));
+                        // re-check if the cursor is still over the element after swapping the placeholder before triggering the event to bubble up
+                        (target as HTMLElement).addEventListener(
+                            "mouseover",
+                            () => (target as HTMLElement).dispatchEvent(new MouseEvent("mouseover", { bubbles: true })),
+                            {
+                                capture: true,
+                                once: true,
+                            }
+                        );
                         break;
                 }
             }

src/extensions/react-flow/_react-flow_v12.scss

@@ -1,5 +1,12 @@
-.react-flow .react-flow__edges svg {
+// needed styles from "@xyflow/react/dist/style.css" to ensure proper functionality
+svg.react-flow__connectionline {
+    position: absolute;
+    z-index: 1001;
     overflow: visible;
+}
+
+.react-flow .react-flow__edges svg {
     position: absolute;
+    overflow: visible;
     pointer-events: none;
 }