diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4a8292317..d2d0c5c43 100644
--- a/CHANGELOG.md
+++ b/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
+- ``
+ - re-check hover state after swapping the placeholder before triggering the event bubbling
+
+## Changed
+
+- ``
+ - 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
- ``
diff --git a/package.json b/package.json
index 7bd9a28de..afaac9666 100644
--- a/package.json
+++ b/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",
diff --git a/src/common/index.ts b/src/common/index.ts
index ed25944ee..39f8af464 100644
--- a/src/common/index.ts
+++ b/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,
diff --git a/src/components/Icon/IconButton.tsx b/src/components/Icon/IconButton.tsx
index 9be4ca9f2..2325ac13f 100644
--- a/src/components/Icon/IconButton.tsx
+++ b/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,
diff --git a/src/components/Icon/canonicalIconNames.tsx b/src/components/Icon/canonicalIconNames.tsx
index c48d85a02..afee3ae07 100644
--- a/src/components/Icon/canonicalIconNames.tsx
+++ b/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,
diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
index c2f9629c3..b470e96ed 100644
--- a/src/components/Tooltip/Tooltip.tsx
+++ b/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;
}
}
diff --git a/src/extensions/react-flow/_react-flow_v12.scss b/src/extensions/react-flow/_react-flow_v12.scss
index 1100851b7..9f3dd31e0 100644
--- a/src/extensions/react-flow/_react-flow_v12.scss
+++ b/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;
}