Merge pull request #328 from eccenca/feature/includeDevelopToNext-CMEM-6873

Include develop to next (CMEM-6873)

Author: haschek

CHANGELOG.md

@@ -42,6 +42,33 @@ This is a major release, and it might be not compatible with your current usage
 -   `<EdgeDefs />`
     -   use `<ReactFlowMarkers />` or build it on single `<ReactFlowMarker />`
 
+## [24.4.1] - 2025-08-25
+
+### 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

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;
                 }
             }
@@ -191,7 +199,10 @@ export const Tooltip = ({
             targetProps={
                 {
                     ...otherTooltipProps.targetProps,
-                    "data-postplaceholder": (eventMemory.current && searchId.current) ? `id${eventMemory.current}${searchId.current}` : undefined,
+                    "data-postplaceholder":
+                        eventMemory.current && searchId.current
+                            ? `id${eventMemory.current}${searchId.current}`
+                            : undefined,
                 } as React.HTMLProps<HTMLElement>
             }
         >