From 2e8ca4388f50d17d41e1465b613069fc1de2ff31 Mon Sep 17 00:00:00 2001 From: Mariia Kovsharova Date: Tue, 19 Aug 2025 12:21:35 +0200 Subject: [PATCH 01/16] Added missed styles from the original package --- src/extensions/react-flow/_react-flow_v12.scss | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) 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; } From 69904a28221868cb5f429e870f5fe555c32d40c5 Mon Sep 17 00:00:00 2001 From: Mariia Kovsharova Date: Tue, 19 Aug 2025 12:33:32 +0200 Subject: [PATCH 02/16] Added a changelog entry --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 46e3b86a7..87e352f35 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -28,6 +28,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p - `` - First auto-completion item not marked as active when drop down first shown. - Read-only mode does not work correctly. It is still possible to change the value via pressing Enter (in multiline mode) or clicking the clear button. +- React flow v12: + - added missed styles from the library to ensure proper functionality ### Changed From faf784073c62087bc5441f68ad41b39635a57feb Mon Sep 17 00:00:00 2001 From: haschek Date: Wed, 20 Aug 2025 11:55:02 +0000 Subject: [PATCH 03/16] Prepare release v24.3.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 1a73b18be..f574f40d9 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.3.0", + "version": "24.3.1", "license": "Apache-2.0", "homepage": "https://github.com/eccenca/gui-elements", "bugs": "https://github.com/eccenca/gui-elements/issues", From 7414441ac6d5376aa627671271d6ca6bbd509d2c Mon Sep 17 00:00:00 2001 From: Mariia Kovsharova Date: Tue, 19 Aug 2025 12:21:35 +0200 Subject: [PATCH 04/16] Added missed styles from the original package --- src/extensions/react-flow/_react-flow_v12.scss | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) 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; } From 2ffb3ccaab246147bf4598d66f68ff3f70d96b2a Mon Sep 17 00:00:00 2001 From: Mariia Kovsharova Date: Tue, 19 Aug 2025 12:33:32 +0200 Subject: [PATCH 05/16] Added a changelog entry --- CHANGELOG.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4b54bebc4..ac6252d32 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,11 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p ## [Unreleased] +### Fixed + +- React flow v12: + - added missed styles from the library to ensure proper functionality + ## [24.3.0] - 2025-06-05 ### Added From d30f208720f4709732d634d9c1d5a88cc47623df Mon Sep 17 00:00:00 2001 From: Michael Haschke Date: Wed, 20 Aug 2025 14:57:44 +0200 Subject: [PATCH 06/16] update changelog --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ac6252d32..eade62691 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,7 +9,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p ### Fixed - React flow v12: - - added missed styles from the library to ensure proper functionality + - add missing styles from react flow library to ensure proper functionality of new connection lines ## [24.3.0] - 2025-06-05 From 7efc32912536c188c4070307e828ad7395005c50 Mon Sep 17 00:00:00 2001 From: haschek Date: Thu, 21 Aug 2025 11:43:31 +0000 Subject: [PATCH 07/16] Update changelog section to 24.3.1 --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index eade62691..aae461cde 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p ## [Unreleased] +## [24.3.1] - 2025-08-21 + ### Fixed - React flow v12: From 48f369a36fdd5acf3bf539d5dc800edeca4ae0e3 Mon Sep 17 00:00:00 2001 From: Michael Haschke Date: Thu, 21 Aug 2025 14:29:40 +0200 Subject: [PATCH 08/16] Update changelog, remove fix info from wrong section --- CHANGELOG.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2ed6b2df5..1b04782af 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -40,8 +40,6 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p - `` - First auto-completion item not marked as active when drop down first shown. - Read-only mode does not work correctly. It is still possible to change the value via pressing Enter (in multiline mode) or clicking the clear button. -- React flow v12: - - added missed styles from the library to ensure proper functionality ### Changed From 377ac057ef4cace2dd78ff4c2274c77e75c09688 Mon Sep 17 00:00:00 2001 From: Michael Haschke Date: Thu, 21 Aug 2025 15:28:59 +0200 Subject: [PATCH 09/16] increase delay to prevent swaps for quick and not intended mouse hovers --- src/components/Icon/IconButton.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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, From 512adfd763fe0af8be948872d682ef7dcd425536 Mon Sep 17 00:00:00 2001 From: Michael Haschke Date: Thu, 21 Aug 2025 15:31:52 +0200 Subject: [PATCH 10/16] add check if the hover state is still given before triggering the event --- src/components/Tooltip/Tooltip.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx index c2f9629c3..05b70dcd1 100644 --- a/src/components/Tooltip/Tooltip.tsx +++ b/src/components/Tooltip/Tooltip.tsx @@ -134,7 +134,10 @@ 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 })) + ); break; } } From 62ed3bb0863d6321625405fb2bf5ff943067ff0e Mon Sep 17 00:00:00 2001 From: Michael Haschke Date: Thu, 21 Aug 2025 15:39:48 +0200 Subject: [PATCH 11/16] update changelog --- CHANGELOG.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1b04782af..b2ef5367a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,13 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p - 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 ## [24.3.1] - 2025-08-21 From 44aa3c1a18aa3ddddb57dd097fd0f8b2712d2f1d Mon Sep 17 00:00:00 2001 From: Michael Haschke Date: Thu, 21 Aug 2025 15:48:40 +0200 Subject: [PATCH 12/16] prevent infinite event triggers --- src/components/Tooltip/Tooltip.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx index 05b70dcd1..b470e96ed 100644 --- a/src/components/Tooltip/Tooltip.tsx +++ b/src/components/Tooltip/Tooltip.tsx @@ -135,8 +135,13 @@ export const Tooltip = ({ break; case "afterhover": // 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 })) + (target as HTMLElement).addEventListener( + "mouseover", + () => (target as HTMLElement).dispatchEvent(new MouseEvent("mouseover", { bubbles: true })), + { + capture: true, + once: true, + } ); break; } From 9acbe0b7fd7bcada8ca1a6e3b4813fd445607c11 Mon Sep 17 00:00:00 2001 From: haschek Date: Mon, 25 Aug 2025 07:14:16 +0000 Subject: [PATCH 13/16] Prepare release v24.4.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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", From dd0bec9b5f6402797724daf8b6107266a42f534b Mon Sep 17 00:00:00 2001 From: Michael Haschke Date: Mon, 25 Aug 2025 10:00:04 +0200 Subject: [PATCH 14/16] export base intent types via library root --- CHANGELOG.md | 2 ++ src/common/index.ts | 1 + 2 files changed, 3 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index b2ef5367a..d9f337a34 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -17,6 +17,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p - `` - 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"]` ## [24.3.1] - 2025-08-21 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, From 9d30bfd5acb4114a2cea4801da5186e82d32ea2f Mon Sep 17 00:00:00 2001 From: Michael Haschke Date: Mon, 25 Aug 2025 11:28:46 +0200 Subject: [PATCH 15/16] add color palette icons --- CHANGELOG.md | 4 ++++ src/components/Icon/canonicalIconNames.tsx | 2 ++ 2 files changed, 6 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index d9f337a34..d2d0c5c43 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -20,6 +20,10 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p - `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 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, From ab58289027e3c73b1c2098fc291e761d2a3bb0db Mon Sep 17 00:00:00 2001 From: haschek Date: Mon, 25 Aug 2025 10:58:02 +0000 Subject: [PATCH 16/16] Update changelog section to 24.4.1 --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index d2d0c5c43..16a219613 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p ## [Unreleased] +## [24.4.1] - 2025-08-25 + ### Fixed - React flow v12: