@eccenca/gui-elements 25.1.0 → 25.2.0-featuredarkthemesupportcmem7503.0

package/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": "25.1.0",
+    "version": "25.2.0-featuredarkthemesupportcmem7503.0",
     "license": "Apache-2.0",
     "homepage": "https://github.com/eccenca/gui-elements",
     "bugs": "https://github.com/eccenca/gui-elements/issues",
@@ -68,37 +68,37 @@
         "autolint:all": "yarn autolint:scripts && yarn autolint:styles && yarn autolint:prettier"
     },
     "dependencies": {
-        "@blueprintjs/colors": "^5.1.11",
-        "@blueprintjs/core": "^5.19.1",
-        "@blueprintjs/select": "^5.3.21",
-        "@carbon/icons": "^11.70.0",
-        "@carbon/react": "^1.96.0",
+        "@blueprintjs/colors": "^5.1.16",
+        "@blueprintjs/core": "6.8.1",
+        "@blueprintjs/select": "6.1.1",
+        "@carbon/icons": "^11.80.0",
+        "@carbon/react": "^1.107.1",
         "@codemirror/lang-html": "^6.4.11",
-        "@codemirror/lang-javascript": "^6.2.4",
+        "@codemirror/lang-javascript": "^6.2.5",
         "@codemirror/lang-json": "^6.0.2",
         "@codemirror/lang-markdown": "^6.5.0",
         "@codemirror/lang-sql": "^6.10.0",
         "@codemirror/lang-xml": "^6.1.0",
-        "@codemirror/lang-yaml": "^6.1.2",
+        "@codemirror/lang-yaml": "^6.1.3",
         "@codemirror/legacy-modes": "^6.5.2",
         "@mavrin/remark-typograf": "^2.2.0",
         "@xyflow/react": "^12.9.3",
         "classnames": "^2.5.1",
         "codemirror": "^6.0.2",
-        "color": "^4.2.3",
+        "color": "^5.0.3",
         "compute-scroll-into-view": "^3.1.1",
         "he": "^1.2.0",
         "jshint": "^2.13.6",
         "lodash": "^4.18.1",
         "n3": "^1.26.0",
         "re-resizable": "^6.10.3",
-        "react": "^16.13.1",
-        "react-dom": "^16.14.0",
+        "react": "^18.2.0",
+        "react-dom": "^18.3.1",
         "react-flow-renderer": "9.7.4",
-        "react-inlinesvg": "^3.0.3",
-        "react-is": "^16.13.1",
+        "react-inlinesvg": "^4.4.1",
+        "react-is": "^18.3.1",
         "react-markdown": "^10.1.0",
-        "react-syntax-highlighter": "^15.6.6",
+        "react-syntax-highlighter": "^16.1.1",
         "rehype-external-links": "^3.0.0",
         "rehype-raw": "^7.0.0",
         "remark-definition-list": "^2.0.0",
@@ -106,88 +106,85 @@
         "remark-parse": "^11.0.0",
         "reset-css": "^5.0.2",
         "unified": "^11.0.5",
-        "wicg-inert": "^3.1.3",
-        "xml-formatter": "^3.6.7"
+        "wicg-inert": "^3.1.3"
     },
     "devDependencies": {
-        "@babel/core": "^7.28.5",
-        "@babel/plugin-transform-class-properties": "^7.27.1",
-        "@babel/plugin-transform-private-methods": "^7.27.1",
-        "@babel/plugin-transform-private-property-in-object": "^7.27.1",
-        "@babel/preset-env": "^7.28.5",
+        "@babel/core": "^7.29.0",
+        "@babel/plugin-transform-class-properties": "^7.28.6",
+        "@babel/plugin-transform-private-methods": "^7.28.6",
+        "@babel/plugin-transform-private-property-in-object": "^7.28.6",
+        "@babel/preset-env": "^7.29.5",
         "@babel/preset-flow": "^7.27.1",
         "@babel/preset-react": "^7.28.5",
         "@babel/preset-typescript": "^7.28.5",
-        "@eslint/compat": "^1.4.1",
-        "@eslint/eslintrc": "^3.3.1",
-        "@eslint/js": "^9.39.1",
-        "@storybook/addon-actions": "^8.6.14",
-        "@storybook/addon-essentials": "^8.6.14",
-        "@storybook/addon-jest": "^8.6.14",
-        "@storybook/addon-links": "^8.6.14",
-        "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
-        "@storybook/cli": "^8.6.14",
+        "@eslint/compat": "^2.1.0",
+        "@eslint/eslintrc": "^3.3.5",
+        "@eslint/js": "^10.0.1",
+        "@storybook/addon-a11y": "^10.4.0",
+        "@storybook/addon-docs": "^10.4.0",
+        "@storybook/addon-links": "^10.4.0",
+        "@storybook/addon-webpack5-compiler-babel": "^4.0.1",
+        "@storybook/cli": "^10.4.0",
         "@storybook/preset-scss": "^1.0.3",
-        "@storybook/react": "^8.6.14",
-        "@storybook/react-webpack5": "^8.6.14",
-        "@storybook/test": "^8.6.14",
+        "@storybook/react": "^10.4.0",
+        "@storybook/react-webpack5": "^10.4.0",
+        "@testing-library/dom": "^10.4.1",
         "@testing-library/jest-dom": "^6.9.1",
-        "@testing-library/react": "^12.1.5",
-        "@types/color": "^3.0.6",
+        "@testing-library/react": "^16.3.2",
         "@types/he": "^1.2.3",
         "@types/jest": "^30.0.0",
         "@types/jshint": "^2.12.4",
-        "@types/lodash": "^4.17.21",
+        "@types/lodash": "^4.17.24",
         "@types/n3": "^1.26.1",
+        "@types/react-dom": "^18.3.7",
         "@types/react-is": "^19.2.0",
         "@types/react-syntax-highlighter": "^15.5.13",
-        "@typescript-eslint/eslint-plugin": "^8.47.0",
-        "@typescript-eslint/parser": "^8.47.0",
-        "babel-jest": "^30.2.0",
-        "chromatic": "^13.3.4",
-        "eslint": "^9.39.1",
+        "@typescript-eslint/eslint-plugin": "^8.59.3",
+        "@typescript-eslint/parser": "^8.59.3",
+        "babel-jest": "^30.4.1",
+        "chromatic": "^16.10.1",
+        "eslint": "^10.3.0",
         "eslint-plugin-react": "^7.37.5",
-        "eslint-plugin-react-hooks": "^7.0.1",
-        "eslint-plugin-simple-import-sort": "^12.1.1",
-        "husky": "4",
+        "eslint-plugin-react-hooks": "^7.1.1",
+        "eslint-plugin-simple-import-sort": "^13.0.0",
+        "husky": "^4.3.8",
         "identity-obj-proxy": "^3.0.0",
-        "jest": "^30.2.0",
-        "jest-environment-jsdom": "^30.2.0",
+        "jest": "^30.4.2",
+        "jest-environment-jsdom": "^30.4.1",
+        "jest-fixed-jsdom": "^0.0.11",
         "jest-pnp-resolver": "^1.2.3",
         "lint-staged": "^15.5.2",
         "node-sass-package-importer": "^5.3.3",
         "path": "^0.12.7",
-        "prettier": "^2.8.8",
+        "prettier": "^3.8.3",
         "react-app-polyfill": "^3.0.0",
         "react-lorem-ipsum": "^1.4.9",
-        "regenerator-runtime": "^0.13.9",
+        "regenerator-runtime": "^0.14.1",
         "rimraf": "^6.1.3",
-        "sass": "1.62.1",
-        "sass-loader": "10.3.1",
-        "storybook": "^8.6.14",
-        "stylelint": "^17.6.0",
+        "sass": "^1.99.0",
+        "sass-loader": "^16.0.8",
+        "storybook": "^10.4.0",
+        "stylelint": "^17.11.0",
         "stylelint-config-recess-order": "^7.7.0",
         "stylelint-config-standard-scss": "^17.0.0",
         "stylelint-order": "^8.1.1",
         "ts-node": "^10.9.2",
         "tsc-esm-fix": "^3.1.2",
-        "typescript": "5.5.3",
+        "typescript": "^5.9.3",
         "url-loader": "^4.1.1",
-        "yargs": "^17.7.2"
+        "yargs": "^18.0.0"
     },
     "peerDependencies": {
-        "@blueprintjs/core": ">=5",
-        "react": ">=16"
+        "@blueprintjs/core": ">=6",
+        "react": ">=18"
     },
     "resolutions": {
-        "**/@types/react": "^17.0.90",
-        "node-sass-package-importer/**/postcss": "^8.5.6",
-        "string-width": "^4.2.3",
-        "wrap-ansi": "^7.0.0",
+        "**/@blueprintjs/core": "6.8.1",
+        "node-sass-package-importer/**/postcss": "^8.5.10",
         "hast-util-from-parse5": "8.0.0",
-        "**/picomatch": "^2.3.2",
+        "**/lodash": "^4.18.1",
         "**/minimatch": "^3.1.4",
-        "**/lodash": "^4.18.0"
+        "**/serialize-javascript": "^7.0.5"
     },
     "husky": {
         "hooks": {
@@ -228,7 +225,7 @@
         "testMatch": [
             "<rootDir>/src/**/*(*.)@(spec|test).{js,jsx,ts,tsx}"
         ],
-        "testEnvironment": "jest-environment-jsdom",
+        "testEnvironment": "jest-fixed-jsdom",
         "transform": {
             "^.+\\.(js|jsx|ts|tsx)$": "babel-jest"
         },

package/scripts/compile-sass.ts

@@ -3,12 +3,14 @@ import * as sass from "sass";
 import yargs from "yargs";
 
 import sassRenderSyncConfig from "./sassConfig";
+import { silenceDeprecations } from "./sassDeprecationConfig"
 
 const args = yargs(process.argv.slice(2)).argv as any;
 
 const styles = sass.renderSync({
     importer: tildeImporter(),
     ...sassRenderSyncConfig,
+    silenceDeprecations: silenceDeprecations as sass.DeprecationOrId[],
     file: "src/index.scss",
     includePaths: ["node_modules"], // Carbon does not use tilde import syntax
 });

package/scripts/sassConfig.js

@@ -6,8 +6,8 @@ const functions = {
     },
 };
 const sassRenderSyncConfig = {
-    quietDeps: true,
     functions,
+    quietDeps: true,
 };
 
 module.exports = sassRenderSyncConfig;

package/scripts/sassDeprecationConfig.js

@@ -0,0 +1,3 @@
+module.exports = {
+    silenceDeprecations: ["import", "legacy-js-api"],
+}

package/src/cmem/ActivityControl/ActivityControlWidget.stories.tsx

@@ -4,14 +4,9 @@ import { OverlaysProvider } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
 
 import { helpersArgTypes } from "../../../.storybook/helpers";
-import {
-    ActivityControlWidget,
-    ActivityControlWidgetAction,
-    IconButton,
-    SimpleDialog,
-    Tag,
-    TagList,
-} from "../../../index";
+import { IconButton, SimpleDialog, Tag, TagList } from "../../components";
+
+import { ActivityControlWidget, ActivityControlWidgetAction } from "./ActivityControlWidget";
 
 export default {
     title: "Cmem/ActivityControlWidget",
@@ -102,7 +97,7 @@ export const WidgetWithAdditionalActions: StoryFn<typeof ActivityControlWidget>
                 <IconButton name="application-explore" onClick={() => setIsOpen(true)} />,
             ],
         }),
-        []
+        [],
     );
 
     return (

package/src/cmem/ActivityControl/ActivityControlWidget.tsx

@@ -1,12 +1,5 @@
 import React from "react";
 
-import {ValidIconName} from "../../components/Icon/canonicalIconNames";
-import {IconProps} from "../../components/Icon/Icon";
-import {TestIconProps} from "../../components/Icon/TestIcon";
-import {TestableComponent} from "../../components/interfaces";
-import {ProgressBarProps} from "../../components/ProgressBar/ProgressBar";
-import {SpinnerProps} from "../../components/Spinner/Spinner";
-import {CLASSPREFIX as eccgui} from "../../configuration/constants";
 import {
     Card,
     ContextMenu,
@@ -24,22 +17,29 @@ import {
     ProgressBar,
     Spinner,
     Tooltip,
-} from "../../index";
+} from "../../components";
+import { ValidIconName } from "../../components/Icon/canonicalIconNames";
+import { IconProps } from "../../components/Icon/Icon";
+import { TestIconProps } from "../../components/Icon/TestIcon";
+import { TestableComponent } from "../../components/interfaces";
+import { ProgressBarProps } from "../../components/ProgressBar/ProgressBar";
+import { SpinnerProps } from "../../components/Spinner/Spinner";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface ActivityControlWidgetProps extends TestableComponent {
     /**
      * The label to be shown
      */
-    label?: string | JSX.Element;
+    label?: string | React.JSX.Element;
     /**
      * Element that wraps around the label.
      * Default: `<OverflowText inline={true} />`
      */
-    labelWrapper?: JSX.Element;
+    labelWrapper?: React.JSX.Element;
     /**
      * To add tags in addition to the widget status description
      */
-    tags?: JSX.Element;
+    tags?: React.JSX.Element;
     /**
      * The progress bar parameters if it should be show by a progres bar
      */
@@ -83,7 +83,7 @@ export interface ActivityControlWidgetProps extends TestableComponent {
     /**
      * execution timer messages for waiting and running times.
      */
-    timerExecutionMsg?: JSX.Element | null;
+    timerExecutionMsg?: React.JSX.Element | null;
     /**
      * additional actions that can serve as a complex component, positioned between the default actions and the context menu
      */
@@ -109,15 +109,15 @@ export interface ActivityControlWidgetAction extends TestableComponent {
     // Warning state
     hasStateWarning?: boolean;
     // Active state
-    active?: boolean
+    active?: boolean;
     /** A notification that is shown in an overlay pointing at the activity action button. */
     notification?: {
-        message: string
-        onClose: () => void
-        intent?: NotificationProps["intent"]
+        message: string;
+        onClose: () => void;
+        intent?: NotificationProps["intent"];
         // Timeout in ms before notification is closed. Default: none
-        timeout?: number
-    }
+        timeout?: number;
+    };
 }
 
 interface IActivityMenuAction extends ActivityControlWidgetAction {
@@ -159,7 +159,7 @@ export function ActivityControlWidget(props: ActivityControlWidgetProps) {
                     keepColors
                 >
                     {progressSpinnerFinishedIcon ? (
-                        React.cloneElement(progressSpinnerFinishedIcon as JSX.Element, { small, large: !small })
+                        React.cloneElement(progressSpinnerFinishedIcon as React.JSX.Element, { small, large: !small })
                     ) : (
                         <Spinner
                             position="inline"
@@ -222,11 +222,7 @@ export function ActivityControlWidget(props: ActivityControlWidgetProps) {
                 data-test-id={dataTestIdLegacy ? `${dataTestIdLegacy}-actions` : undefined}
             >
                 {activityActions &&
-                    activityActions.map((action, idx) => <ActivityActionButton
-                            key={idx}
-                            action={action}
-                        />
-                    )}
+                    activityActions.map((action, idx) => <ActivityActionButton key={idx} action={action} />)}
                 {additionalActions}
                 {activityContextMenu && activityContextMenu.menuItems.length > 0 && (
                     <ContextMenu
@@ -261,10 +257,10 @@ export function ActivityControlWidget(props: ActivityControlWidgetProps) {
 }
 
 interface ActivityActionButtonProps {
-    action: ActivityControlWidgetAction
+    action: ActivityControlWidgetAction;
 }
 
-const ActivityActionButton = ({action}: ActivityActionButtonProps) => {
+const ActivityActionButton = ({ action }: ActivityActionButtonProps) => {
     const actionButtonRef = React.useRef(null);
     const ActionButton = () => (
         <IconButton
@@ -277,16 +273,16 @@ const ActivityActionButton = ({action}: ActivityActionButtonProps) => {
             intent={action.hasStateWarning ? "warning" : undefined}
             tooltipProps={{
                 hoverOpenDelay: 200,
-                placement: "bottom"
+                placement: "bottom",
             }}
             active={action.active}
         />
-    )
-    return action.notification ?
+    );
+    return action.notification ? (
         <>
-                                <span ref={actionButtonRef}>
-                                    <ActionButton/>
-                                </span>
+            <span ref={actionButtonRef}>
+                <ActionButton />
+            </span>
             {actionButtonRef.current && (
                 <DecoupledOverlay targetSelectorOrElement={actionButtonRef.current} paddingSize={"small"}>
                     <Notification
@@ -297,6 +293,8 @@ const ActivityActionButton = ({action}: ActivityActionButtonProps) => {
                     />
                 </DecoupledOverlay>
             )}
-        </> :
-        <ActionButton/>
-}
+        </>
+    ) : (
+        <ActionButton />
+    );
+};

package/src/cmem/ActivityControl/ActivityExecutionErrorReportModal.tsx

@@ -1,6 +1,9 @@
 import React, { useState } from "react";
 
-import { Button, HtmlContentBlock, IconButton, SimpleDialog } from "../../index";
+import Button from "../../components/Button/Button";
+import SimpleDialog from "../../components/Dialog/SimpleDialog";
+import IconButton from "../../components/Icon/IconButton";
+import HtmlContentBlock from "../../components/Typography/HtmlContentBlock";
 
 interface ActivityExecutionErrorReportModalProps {
     // Title of the modal
@@ -8,7 +11,7 @@ interface ActivityExecutionErrorReportModalProps {
     // Called when the close button is clicked
     onDiscard: () => any;
     // The error report
-    report: JSX.Element;
+    report: React.JSX.Element;
     // Value of the download button
     downloadButtonValue: string;
     // Value of the close button

package/src/cmem/ActivityControl/SilkActivityControl.tsx

@@ -15,11 +15,11 @@ const progressBreakpointAnimation = 99;
 
 export interface SilkActivityControlProps extends TestableComponent {
     // The label of this activity
-    label: string | JSX.Element;
+    label: string | React.JSX.Element;
     /**
      * To add tags in addition to the widget status description
      */
-    tags?: JSX.Element;
+    tags?: React.JSX.Element;
     // Initial state
     initialStatus?: SilkActivityStatusProps;
     // Register a function in order to receive callbacks
@@ -80,7 +80,7 @@ export interface SilkActivityControlLayoutProps {
     // what type of progrss display should be uses, horizontal progress bar, circular spinner, or none of that
     visualization?: "none" | "progressbar" | "spinner";
     // wrapper around label
-    labelWrapper?: JSX.Element;
+    labelWrapper?: React.JSX.Element;
 }
 
 const defaultLayout: SilkActivityControlLayoutProps = {
@@ -94,7 +94,7 @@ interface IErrorReportAction {
     // The title of the error report modal
     title?: string;
     // The element that will be rendered in the modal, either as Markdown or object
-    renderReport: (report: string | SilkActivityExecutionReportProps) => JSX.Element;
+    renderReport: (report: string | SilkActivityExecutionReportProps) => React.JSX.Element;
     // What version of the report should be handed to the renderReport function, if false SilkActivityExecutionReportProps, if true the Markdown string
     renderMarkdown: boolean;
     // The function to fetch the error report. It returns undefined if something went wrong.
@@ -177,28 +177,24 @@ export function useSilkActivityControl({
     const [errorReport, setErrorReport] = useState<string | SilkActivityExecutionReportProps | undefined>(undefined);
 
     // Register update function
-    useEffect(
-        () => {
-            const updateActivityStatus = (status: SilkActivityStatusProps | undefined) => {
-                if (status?.concreteStatus !== "Waiting") {
-                    setShowStartPrioritized(false);
-                } else if (executePrioritized) {
-                    // Show start prioritized button only-if the activity is still in Waiting status after 2s
-                    setTimeout(() => {
-                        if (currentStatus.current?.concreteStatus === "Waiting") {
-                            setShowStartPrioritized(true);
-                        }
-                    }, 2000);
-                }
-                currentStatus.current = status;
-                setActivityStatus(status);
-            };
-            registerForUpdates(updateActivityStatus);
-            return unregisterFromUpdates;
-        },
-         
-        []
-    );
+    useEffect(() => {
+        const updateActivityStatus = (status: SilkActivityStatusProps | undefined) => {
+            if (status?.concreteStatus !== "Waiting") {
+                setShowStartPrioritized(false);
+            } else if (executePrioritized) {
+                // Show start prioritized button only-if the activity is still in Waiting status after 2s
+                setTimeout(() => {
+                    if (currentStatus.current?.concreteStatus === "Waiting") {
+                        setShowStartPrioritized(true);
+                    }
+                }, 2000);
+            }
+            currentStatus.current = status;
+            setActivityStatus(status);
+        };
+        registerForUpdates(updateActivityStatus);
+        return unregisterFromUpdates;
+    }, []);
 
     // Create activity actions
     const actions: ActivityControlWidgetProps["activityActions"] = [];
@@ -300,8 +296,8 @@ export function useSilkActivityControl({
                     (activityStatus.statusName === "Running"
                         ? activityStatus?.startTime
                         : activityStatus.statusName === "Waiting"
-                        ? activityStatus.queueTime
-                        : activityStatus?.startTime)!
+                          ? activityStatus.queueTime
+                          : activityStatus?.startTime)!
                 }
                 translateUnits={translateUnits}
             />
@@ -325,8 +321,8 @@ export function useSilkActivityControl({
                     waitingProgress || (runningProgress && indeterminateProgress)
                         ? undefined
                         : activityStatus && activityStatus.progress > 0
-                        ? activityStatus.progress / 100
-                        : 0,
+                          ? activityStatus.progress / 100
+                          : 0,
                 intent,
             },
         };
@@ -338,8 +334,8 @@ export function useSilkActivityControl({
                     waitingProgress || (runningProgress && indeterminateProgress)
                         ? undefined
                         : activityStatus && activityStatus.progress > 0
-                        ? activityStatus.progress / 100
-                        : 0,
+                          ? activityStatus.progress / 100
+                          : 0,
                 intent,
             },
         };

package/src/cmem/ActivityControl/tests/ActivityControlWidget.test.tsx

@@ -31,7 +31,7 @@ describe("ActivityControlWidget", () => {
                 data-testid="basic-widget"
                 activityActions={actions}
                 statusMessage="Status message"
-            />
+            />,
         );
 
         const button1 = screen.getByTestId("action-1");

package/src/cmem/ConfidenceValue/ConfidenceValue.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import Color from "color";
+import Color, { ColorLike } from "color";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
@@ -27,7 +27,7 @@ export interface ConfidenceValueProps extends Omit<React.HTMLAttributes<HTMLSpan
      * Color of the confidence bar.
      * By default it is colorized red for values below the `centerValue`, otherwise green.
      */
-    barColor?: Color | string;
+    barColor?: ColorLike;
     /**
      * The value is displayed by a bar.
      * This confidence bar can be start from the left or right side, or from the center of the element.
@@ -71,14 +71,15 @@ export function ConfidenceValue({
         value === centerValue
             ? 0
             : value < centerValue
-            ? value / (minValue - centerValue)
-            : value / (maxValue - centerValue);
+              ? value / (minValue - centerValue)
+              : value / (maxValue - centerValue);
 
     let color = Color("#000000");
     if (barColor) {
         try {
             color = Color(barColor);
-        } catch (ex) {
+        } catch {
+            // eslint-disable-next-line no-console
             console.warn("Received invalid color for confidence bar: " + barColor);
         }
     }