Merge tag 'v24.1.0' into develop

tag final release v24.1.0

Author: haschek

.storybook/helpers.js

@@ -5,6 +5,7 @@ import { Icon, TestIcon } from "../src/";
 import { Definitions as IntentDefinitions } from "../src/common/Intent";
 
 import canonicalIcons from "./../src/components/Icon/canonicalIconNames";
+
 // argTypes helpers
 
 const allIcons = new Map([
@@ -20,17 +21,19 @@ export const helpersArgTypes = {
         mapping: {
             "Not set": undefined,
             Handler: () => {
+                // eslint-disable-next-line no-undef
                 alert("clicked");
             },
         },
     },
     exampleIcon: {
         control: "select",
-        options: ["Not set", "Test icon", ...Object.keys(canonicalIcons)],
+        options: ["Not set", "Test icon", ...Object.keys(canonicalIcons), "Icon with tooltip"],
         mapping: {
             "Not set": undefined,
             "Test icon": <TestIcon tryout={LogoReact} className="testclass-icon" />,
             ...Object.fromEntries(allIcons),
+            "Icon with tooltip": <Icon name={"item-info"} intent="info" tooltipText="Example tooltip" />,
         },
     },
     exampleIntent: {

CHANGELOG.md

@@ -6,39 +6,41 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 ## [Unreleased]
 
+## [24.1.0] - 2025-04-16
+
 ### Added
 
+-   `<CardActions />`
+    -   `noWrap` property to display them without wrapping its children on multiple lines
 -   `<ContentGroup />` component
     -   Manage display of a grouped content section.
     -   Add info, actions and context annotations by using its properties.
     -   Can be nested into each other.
 -   `<CodeEditor />`
     -   implemented support for linting which is enabled via `useLinting` prop
-    -   `turtle` and `javascript` are currently supported languages for linting
+        -   `turtle` and `javascript` are currently supported languages for linting
+    -   `useToolbar` property to display toolbar if the `mode` is supported
+        -   currently `markdown` mode is integrated, including support for headlines `<h1-6>`, `<blockquote>`, `<code>` block and inline, `<b>` bold, `<i>`, italic, `<del>` strike through, `<ul>`, `<ol>` and checkbox lists, `<a>` links and `<img>` images
     -   editor is focused on load if `autoFocus` prop is set to `true`
     -   implemented support for `disabled` state in code editor
     -   implemented support for `intent` states in code editor
 -   `<Label />`
     -   `additionalElements` property to display elements at the end of the label
     -   `inline` property to display the label component as inline block
--   `<NodeContent />`
-    -   `resizeDirections` to specifiy the axis that can be used to resize the node
-    -   `resizeMaxDimensions` to add maximum values for resizing height/width
--   `<CardActions />`
-    -   `noWrap` property to display them without wrapping its children on multiple lines
--   `<SimpleDialog />`
-    -   `actionsProps` property to forward `CardActions` properties, e.g. `noWrap`
 -   `<MenutItem />`
     -   `tooltip` property to dislay tooltip on menu item label
 -   `<NodeContent />`
     -   `resizeDirections` to specifiy the axis that can be used to resize the node
     -   `resizeMaxDimensions` to add maximum values for resizing height/width
--   `<CodeEditor />`
-    -   `useToolbar` property to display toolbar if the `mode` is supported
-        -   currently `markdown` mode is integrated, including support for headlines `<h1-6>`, `<blockquote>`, `<code>` block and inline, `<b>` bold, `<i>`, italic, `<del>` strike through, `<ul>`, `<ol>` and checkbox lists, `<a>` links and `<img>` images
+-   `<OverviewItem />`
+    -   `hasCardWrapper` property to use a `Card` component as wrapper around it, simplifies the process to put it in a box, use `cardProps` to forward basic properties to that `Card` wrapper
+-   `<SimpleDialog />`
+    -   `actionsProps` property to forward `CardActions` properties, e.g. `noWrap`
 -   New icons:
-    -   `item-magic-edit`: icon for "magic" edit suggestions
-    -   `artefact-task-concatenatetofile`: icon for "Concatenate to file" operator
+    -   `artefact-task-concatenatetofile`
+    -   `artefact-task-pivot`
+    -   `artefact-task-unpivot`
+    -   `item-magic-edit`
     -   `operation-format-text-code`
     -   `operation-format-text-bold`
     -   `operation-format-text-italic`
@@ -51,20 +53,41 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 -   `<CodeAutocompleteField />`:
     -   Code editor resets to initial value on every code editor instance re-init
+-   `<CodeEditor />`
+    -   re-render the component if the `wrapLines` property is changed after the component's render
+    -   only fire `onChange` event when the document has actually changed
+-   `<OverviewItem />`
+    -   whitespace after `Depiction` element when the `OverviewItem` ist used with `densityHigh` and `hasSpacing`
 -   `<OverviewItemActions />`
     -   `hiddenInteractions` stay visible if they contain focused elements or opened overlays (e.g. context menus)
 -   `<TagList />`
     -   do not create empty list items
+-   `<SearchField />`
+    -   allow to use `onClearanceHandler` and `rightElement` together
+    -   fix display of `Icon` with `tooltipText` as direct child in `rightElement`
 
 ### Changed
 
+-   `<ActivityControlWidget />`
+    -   display running time after label if there is an status info to prevent a third line
 -   `<ReactFlow />`
     -   property color for `graph` configuration was adjusted
+-   `<SearchField />`
+    -   internally forced to be managed controlled to keep `onClearanceHandler` independent from outer `value` property
 -   `<Switch />`
     -   use always `<Label/>` component for `label` value
 -   `<StickyNoteNode />`
     -   Refactored data structure position and dimension (breaking change)
 
+### Deprecated
+
+-   `<CodeEditor />`
+    -   fallback of static test id is removed, need then always to be set if necessary
+-   `<OverflowText />`
+    -   component won't accept properties of any name in future, only data attributes for test IDs and basic HTML element properties
+-   `<OverviewItemList />`
+    -   `densityHigh` property will be removed, use it directly on `OverviewItem` children
+
 ## [24.0.1] - 2025-02-06
 
 ### Changed

babel.config.json

@@ -1,8 +1,8 @@
 {
     "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript", "@babel/preset-flow"],
     "plugins": [
-        ["@babel/plugin-proposal-private-methods", { "loose": true }],
-        ["@babel/plugin-proposal-private-property-in-object", { "loose": true }],
-        ["@babel/plugin-proposal-class-properties", { "loose": true }]
+        ["@babel/plugin-transform-private-methods", { "loose": true }],
+        ["@babel/plugin-transform-private-property-in-object", { "loose": true }],
+        ["@babel/plugin-transform-class-properties", { "loose": true }]
     ]
 }

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.0.1",
+    "version": "24.1.0",
     "license": "Apache-2.0",
     "homepage": "https://github.com/eccenca/gui-elements",
     "bugs": "https://github.com/eccenca/gui-elements/issues",
@@ -106,27 +106,27 @@
         "xml-formatter": "^3.6.3"
     },
     "devDependencies": {
-        "@babel/core": "^7.26.0",
-        "@babel/plugin-proposal-class-properties": "^7.18.6",
-        "@babel/plugin-proposal-private-methods": "^7.18.6",
-        "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-        "@babel/preset-env": "^7.26.0",
+        "@babel/core": "^7.26.10",
+        "@babel/plugin-transform-class-properties": "^7.25.9",
+        "@babel/plugin-transform-private-methods": "^7.25.9",
+        "@babel/plugin-transform-private-property-in-object": "^7.25.9",
+        "@babel/preset-env": "^7.26.9",
         "@babel/preset-flow": "^7.25.9",
         "@babel/preset-react": "^7.26.3",
-        "@babel/preset-typescript": "^7.26.0",
+        "@babel/preset-typescript": "^7.27.0",
         "@eslint/compat": "^1.2.4",
         "@eslint/eslintrc": "^3.2.0",
         "@eslint/js": "^9.17.0",
-        "@storybook/addon-actions": "^8.4.7",
-        "@storybook/addon-essentials": "^8.4.7",
-        "@storybook/addon-jest": "^8.4.7",
-        "@storybook/addon-links": "^8.4.7",
-        "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-        "@storybook/cli": "^8.4.7",
+        "@storybook/addon-actions": "^8.6.9",
+        "@storybook/addon-essentials": "^8.6.9",
+        "@storybook/addon-jest": "^8.6.9",
+        "@storybook/addon-links": "^8.6.9",
+        "@storybook/addon-webpack5-compiler-babel": "^3.0.5",
+        "@storybook/cli": "^8.6.9",
         "@storybook/preset-scss": "^1.0.3",
-        "@storybook/react": "^8.4.7",
-        "@storybook/react-webpack5": "^8.4.7",
-        "@storybook/test": "^8.4.7",
+        "@storybook/react": "^8.6.9",
+        "@storybook/react-webpack5": "^8.6.9",
+        "@storybook/test": "^8.6.9",
         "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/react": "^12.1.2",
         "@types/codemirror": "^5.60.15",
@@ -139,7 +139,7 @@
         "@typescript-eslint/eslint-plugin": "^8.18.1",
         "@typescript-eslint/parser": "^8.18.1",
         "babel-jest": "^29.7.0",
-        "chromatic": "^11.20.2",
+        "chromatic": "^11.27.0",
         "eslint": "^9.17.0",
         "eslint-plugin-react": "^7.37.2",
         "eslint-plugin-react-hooks": "^5.1.0",
@@ -159,7 +159,7 @@
         "rimraf": "^5.0.10",
         "sass": "1.62.1",
         "sass-loader": "10.3.1",
-        "storybook": "^8.4.7",
+        "storybook": "^8.6.9",
         "stylelint": "^15.11.0",
         "stylelint-config-recess-order": "^4.6.0",
         "stylelint-config-standard-scss": "^9.0.0",
@@ -178,7 +178,9 @@
         "**/@types/react": "^17.0.83",
         "node-sass-package-importer/**/postcss": "^8.4.49",
         "**/cross-spawn": "^7.0.5 ",
-        "**/micromatch": "^4.0.8"
+        "**/micromatch": "^4.0.8",
+        "**/@babel/runtime": "^7.26.10",
+        "**/@babel/helpers": "^7.26.10"
     },
     "husky": {
         "hooks": {

src/cmem/ActivityControl/ActivityControlWidget.tsx

@@ -92,7 +92,7 @@ interface IActivityContextMenu extends TestableComponent {
 
 export interface ActivityControlWidgetAction extends TestableComponent {
     // The action that should be triggered
-    action: () => any;
+    action: () => void;
     // The tooltip that should be shown over the action icon
     tooltip?: string;
     // The icon of the action button
@@ -147,6 +147,7 @@ export function ActivityControlWidget(props: ActivityControlWidgetProps) {
                 {props.label && (
                     <OverviewItemLine small={small}>
                         {React.cloneElement(labelWrapper, {}, props.label)}
+                        {timerExecutionMsg && (props.statusMessage || tags) && <>&nbsp;({timerExecutionMsg})</>}
                     </OverviewItemLine>
                 )}
                 {(props.statusMessage || tags) && (
@@ -170,7 +171,9 @@ export function ActivityControlWidget(props: ActivityControlWidgetProps) {
                         )}
                     </OverviewItemLine>
                 )}
-                {timerExecutionMsg && <OverviewItemLine small>{timerExecutionMsg}</OverviewItemLine>}
+                {timerExecutionMsg && !(props.statusMessage || tags) && (
+                    <OverviewItemLine small>{timerExecutionMsg}</OverviewItemLine>
+                )}
             </OverviewItemDescription>
             <OverviewItemActions>
                 {activityActions &&

src/components/AutoSuggestion/AutoSuggestion.tsx

@@ -241,9 +241,18 @@ const AutoSuggestion = ({
             dispatch({
                 changes: { from: 0, to: currentCm.current.state?.doc.length, insert: initialValue },
             });
+            // Validate initial value change
+            checkValuePathValidity(initialValue)
         }
     }, [initialValue, reInitOnInitialValueChange]);
 
+    React.useEffect(() => {
+        if(currentCm.current) {
+            // Validate initial value
+            checkValuePathValidity(initialValue)
+        }
+    }, [currentCm.current!!])
+
     const setCurrentIndex = (newIndex: number) => {
         editorState.index = newIndex;
         setFocusedIndex(newIndex);

src/components/CodeAutocompleteField/CodeAutocompleteField.stories.tsx

@@ -15,9 +15,10 @@ export default {
     },
 } as Meta<typeof CodeAutocompleteField>;
 
+let forcedUpdateKey = 0; // @see https://github.com/storybookjs/storybook/issues/13375#issuecomment-1291011856
 const Template: StoryFn<typeof CodeAutocompleteField> = (args) => (
     <OverlaysProvider>
-        <CodeAutocompleteField {...args} />
+        <CodeAutocompleteField {...args} key={++forcedUpdateKey} />
     </OverlaysProvider>
 );
 
@@ -63,7 +64,7 @@ const defaultProps: CodeAutocompleteFieldProps = {
     },
     placeholder:
         "The word before the cursor will be auto-completed. At the beginning or after a space, all results are shown.",
-    onChange(): any {
+    onChange(): void {
         // Do nothing
     },
 };

src/components/ContextOverlay/ContextOverlay.stories.tsx

@@ -4,31 +4,40 @@ import { PopoverInteractionKind, PopperModifierOverrides } from "@blueprintjs/co
 import { PopperPlacements } from "@blueprintjs/core";
 import { OverlaysProvider } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
+import { fn } from "@storybook/test";
 
 import { Button, ContextOverlay, HtmlContentBlock } from "../../index";
 
+const interactionKindOptions = { UNDEFINED: undefined, ...PopoverInteractionKind };
+const rootBoundaryOptions = { UNDEFINED: undefined, VIEWPORT: "viewport", DOCUMENT: "document" };
+const positioningStrategyOptions = { UNDEFINED: undefined, ABSOLUTE: "absolute", FIXED: "fixed" };
+
 export default {
     title: "Components/ContextOverlay",
     component: ContextOverlay,
     argTypes: {
         interactionKind: {
-            options: { UNDEFINED: undefined, ...PopoverInteractionKind },
+            options: Object.keys(interactionKindOptions),
+            mapping: interactionKindOptions,
         },
         placement: {
             options: PopperPlacements,
         },
         rootBoundary: {
-            options: { UNDEFINED: undefined, VIEWPORT: "viewport", DOCUMENT: "document" },
+            options: Object.keys(rootBoundaryOptions),
+            mapping: rootBoundaryOptions,
         },
         positioningStrategy: {
-            options: { UNDEFINED: undefined, ABSOLUTE: "absolute", FIXED: "fixed" },
+            options: Object.keys(positioningStrategyOptions),
+            mapping: positioningStrategyOptions,
         },
     },
 } as Meta<typeof ContextOverlay>;
 
+let forcedUpdateKey = 0;
 const Template: StoryFn<typeof ContextOverlay> = (args) => (
     <OverlaysProvider>
-        <ContextOverlay {...args} />
+        <ContextOverlay {...args} key={++forcedUpdateKey} />
     </OverlaysProvider>
 );
 
@@ -55,4 +64,6 @@ Default.args = {
     } as PopperModifierOverrides,
     rootBoundary: "viewport",
     hasBackdrop: false,
+    onOpening: fn(),
+    onInteraction: fn(),
 };

src/components/Depiction/depiction.scss

@@ -72,6 +72,13 @@ $eccgui-size-depiction-border-radius: $pt-border-radius !default;
     .#{$eccgui}-overviewitem__list--highdensity > li > .#{$eccgui}-overviewitem__item & {
         height: $button-height;
     }
+    .#{$eccgui}-overviewitem__item--highdensity.#{$eccgui}-overviewitem__item--hasspacing > .#{$eccgui}-depiction &,
+    .#{$eccgui}-overviewitem__list--highdensity
+        > li
+        > .#{$eccgui}-overviewitem__item.#{$eccgui}-overviewitem__item--hasspacing
+        & {
+        height: calc(#{$button-height} - #{$eccgui-size-typo-base * 0.5});
+    }
 }
 
 .#{$eccgui}-depiction__image--disabled {

src/components/Dialog/stories/AlertDialog.stories.tsx

@@ -1,14 +1,16 @@
 import React from "react";
 import { OverlaysProvider } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
+import { fn } from "@storybook/test";
 
 import { AlertDialog } from "./../../../../index";
-import { Default as SimpleDialogExample } from "./SimpleDialog.stories";
+import simpleDialogStory, { Default as SimpleDialogExample } from "./SimpleDialog.stories";
 
 export default {
     title: "Components/Dialog/AlertDialog",
     component: AlertDialog,
     argTypes: {
+        ...simpleDialogStory.argTypes,
         headerOptions: { table: { disable: true } },
         children: { table: { disable: true } },
         actions: { table: { disable: true } },
@@ -42,4 +44,6 @@ Default.args = {
     success: false,
     warning: true,
     danger: false,
+    onOpening: fn(),
+    onClosing: fn(),
 };