@eccenca/gui-elements 25.2.0-rc.0 → 26.0.0-rc.0

package/dist/types/extensions/react-flow/edges/EdgeLabel.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { IntentTypes } from "../../../common/Intent";
+import { DepictionProps } from "../../../components/Depiction/Depiction";
 import { ValidIconName } from "../../../components/Icon/canonicalIconNames";
-import { DepictionProps } from "../../../index";
 export interface EdgeLabelProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Depiction element displayed left from the label.
@@ -11,11 +11,11 @@ export interface EdgeLabelProps extends React.HTMLAttributes<HTMLDivElement> {
      * Label of the edge.
      * Cannot overflow the parent container.
      */
-    text: string | JSX.Element;
+    text: string | React.JSX.Element;
     /**
      * One or multiple other elements displayed right from label.
      */
-    actions?: JSX.Element | JSX.Element[];
+    actions?: React.JSX.Element | React.JSX.Element[];
     /**
      * The element is increased in its size.
      */

package/dist/types/extensions/react-flow/edges/EdgeStep.d.ts

@@ -9,13 +9,13 @@ interface EdgeStepDataV12Props extends EdgeDefaultV12DataProps {
     stepCornerRadius?: number;
 }
 /**
- * @deprecated (v26) v9 support is removed after v25
+ * @deprecated (v27) v9 support is removed after v26
  */
 export interface EdgeStepV9Props extends EdgeDefaultV9Props {
     data?: EdgeStepDataV9Props;
 }
 /**
- * @deprecated (v26) v9 support is removed after v25
+ * @deprecated (v27) v9 support is removed after v26
  */
 export interface EdgeStepV12Props extends Omit<EdgeDefaultV12Props, "data">, EdgeProps<Edge<EdgeStepDataV12Props>> {
 }

package/dist/types/extensions/react-flow/edges/EdgeTools.d.ts

@@ -6,7 +6,7 @@ interface PosOffset {
 }
 export interface EdgeToolsProps extends Omit<ContextOverlayProps, "children"> {
     posOffset: PosOffset;
-    children: string | JSX.Element | JSX.Element[];
+    children: string | React.JSX.Element | React.JSX.Element[];
 }
 export declare const EdgeTools: React.MemoExoticComponent<({ posOffset, children, ...otherProps }: EdgeToolsProps) => React.JSX.Element>;
 export {};

package/dist/types/extensions/react-flow/handles/HandleContent.d.ts

@@ -1,10 +1,10 @@
 import React from "react";
-import { TooltipProps } from "../../../index";
+import { TooltipProps } from "../../../components/Tooltip/Tooltip";
 export interface HandleContentProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "className"> {
     /**
      * Tooltip displayed as overlay on hover.
      */
-    extendedTooltip?: JSX.Element | string;
+    extendedTooltip?: React.JSX.Element | string;
     /**
      * Configure the tooltip and overwrite automatically set options.
      */

package/dist/types/extensions/react-flow/handles/HandleDefault.d.ts

@@ -25,12 +25,12 @@ interface HandleExtensionProps extends ReacFlowVersionSupportProps, Omit<React.H
     children?: HandleContentProps["children"];
 }
 /**
- * @deprecated (v26) use only `HandleDefaultProps`
+ * @deprecated (v27) use only `HandleDefaultProps`
  */
 export interface HandleV9Props extends HandleExtensionProps, ReactFlowHandleV9Props {
 }
 /**
- * @deprecated (v26) use only `HandleDefaultProps`
+ * @deprecated (v27) use only `HandleDefaultProps`
  */
 export interface HandleV12Props extends HandleExtensionProps, ReactFlowHandleV12Props {
 }

package/dist/types/extensions/react-flow/handles/HandleTools.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
-import { TestableComponent } from "../../../index";
+import { TestableComponent } from "../../../components";
 import { ContextOverlayProps } from "./../../../components/ContextOverlay/ContextOverlay";
 export interface HandleToolsProps extends Omit<ContextOverlayProps, "children" | "content" | "popoverClassName">, TestableComponent {
-    children: string | JSX.Element | JSX.Element[];
+    children: string | React.JSX.Element | React.JSX.Element[];
 }
 export declare const HandleTools: ({ children, ...otherContextOverlayProps }: HandleToolsProps) => React.JSX.Element;

package/dist/types/extensions/react-flow/index.d.ts

@@ -9,16 +9,13 @@ export * from "./handles/HandleTools";
 export * from "./edges/EdgeBezier";
 export * from "./edges/EdgeDefault";
 export * from "./edges/EdgeDefaultV12";
-export * from "./edges/EdgeDefs";
 export * from "./edges/EdgeStep";
 export * from "./edges/EdgeStraight";
 export * from "./edges/EdgeNew";
 export * from "./edges/EdgeTools";
 export * from "./edges/EdgeLabel";
-export * from "./edges/EdgeDefs";
-export * from "./edges/EdgeDefaultV12";
+export type { EdgeDefaultV12DataProps, EdgeDefaultV12Props } from "./edges/EdgeDefaultV12";
 export * from "./markers/ReactFlowMarkers";
 export * from "./minimap/MiniMap";
-export * from "./minimap/MiniMapV12";
 export * from "./minimap/utils";
 export * from "./versionsupport";

package/dist/types/extensions/react-flow/markers/MarkerArrowClosedInverse.d.ts

@@ -1,5 +1,5 @@
 import { FC } from "react";
 /**
- * @deprecated (v26) only necessary for react flow v9, support will be removed
+ * @deprecated (v27) only necessary for react flow v9, support will be removed
  */
 export declare const MarkerArrowClosedInverse: FC;

package/dist/types/extensions/react-flow/minimap/MiniMap.d.ts

@@ -13,7 +13,10 @@ export interface MiniMapBasicProps {
      */
     wrapperProps?: Omit<React.HTMLAttributes<HTMLDivElement>, "onMouseDown" | "onMouseUp" | "onMouseMove" | "onMouseLeave">;
 }
-export interface MiniMapV9Props extends MiniMapBasicProps, ReactFlowMiniMapV9Props {
+/**
+ * @deprecated (v27) will be removed when React Flow v9 can be removed
+ */
+interface MiniMapV9Props extends MiniMapBasicProps, ReactFlowMiniMapV9Props {
     /**
      * React-Flow instance
      */
@@ -22,9 +25,4 @@ export interface MiniMapV9Props extends MiniMapBasicProps, ReactFlowMiniMapV9Pro
 export type MiniMapProps = (ReacFlowVersionSupportProps & MiniMapV9Props) | (ReacFlowVersionSupportProps & MiniMapV12Props);
 /** An improved mini-map for react-flow that supports navigation via the mini-map. */
 export declare const MiniMap: React.MemoExoticComponent<({ flowVersion, ...otherProps }: MiniMapProps) => React.JSX.Element>;
-/**
- * Mini-map support for for React Flow v9.
- * @deprecated (v26) will be removed, use when `MiniMap` directly
- */
-export declare const MiniMapV9: React.MemoExoticComponent<({ flowInstance, enableNavigation, maskColor, nodeClassName, nodeColor, nodeStrokeColor, wrapperProps, ...minimapProps }: MiniMapV9Props) => React.JSX.Element>;
 export default MiniMap;

package/dist/types/extensions/react-flow/minimap/MiniMapV12.d.ts

@@ -1,10 +1,13 @@
 import React from "react";
 import { MiniMapProps as ReactFlowMiniMapProps } from "@xyflow/react";
 import { MiniMapBasicProps } from "./MiniMap";
+/**
+ * @deprecated (v27) will be removed when React Flow v9 can be removed
+ */
 export interface MiniMapV12Props extends MiniMapBasicProps, Omit<ReactFlowMiniMapProps, "maskColor"> {
 }
 /**
- * Mini-map support for for React Flow v12.
- * @deprecated (v26) will be removed when `MiniMap` supports v12 directly
+ * Mini-map support for React Flow v12.
+ * @deprecated (v27) will be removed when React Flow v9 can be removed
  */
 export declare const MiniMapV12: React.MemoExoticComponent<({ enableNavigation, nodeClassName, nodeColor, nodeStrokeColor, wrapperProps, ...minimapProps }: MiniMapV12Props) => React.JSX.Element>;

package/dist/types/extensions/react-flow/nodes/NodeContent.d.ts

@@ -4,14 +4,10 @@ import { IntentTypes } from "../../../common/Intent";
 import { DepictionProps } from "../../../components";
 import { ValidIconName } from "../../../components/Icon/canonicalIconNames";
 import { ReacFlowVersionSupportProps } from "../versionsupport";
-import { HandleDefaultProps } from "./../handles/HandleDefault";
+import { HandleDefaultProps } from "../handles/HandleDefault";
 import { NodeContentExtensionProps } from "./NodeContentExtension";
 import { NodeDefaultProps } from "./NodeDefault";
 import { NodeHighlightColor } from "./sharedTypes";
-/**
- * @deprecated (v26) use `HandleDefaultProps`
- */
-export type NodeContentHandleProps = HandleDefaultProps;
 export type NodeDimensions = {
     width?: number;
     height?: number;
@@ -56,15 +52,15 @@ interface NodeContentData<CONTENT_PROPS = any> {
     /**
      * Any element that should be displayed as depiction before the node label.
      */
-    leftElement?: JSX.Element;
+    leftElement?: React.JSX.Element;
     /**
      * Label that is displayed in the node header.
      */
-    label: string | JSX.Element;
+    label: string | React.JSX.Element;
     /**
      * Element that is displayed as subline under the label in the header.
      */
-    labelSubline?: JSX.Element;
+    labelSubline?: React.JSX.Element;
     /**
      * Content element, displayed in the node body.
      */
@@ -163,7 +159,6 @@ export interface NodeContentProps<CONTENT_PROPS = any> extends NodeContentData,
     introductionTime?: number | IntroductionTime;
     /**
      * Additional data stored in the node.
-     * @deprecated (v26) is not used anymore.
      */
     businessData?: never;
     /**

package/dist/types/extensions/react-flow/nodes/NodeTools.d.ts

@@ -6,8 +6,8 @@ export interface NodeToolsMenuFunctions {
     closeMenu: () => void;
 }
 export interface NodeToolsProps extends Omit<ContextOverlayProps, "children"> {
-    children: string | JSX.Element;
-    togglerElement?: ValidIconName | JSX.Element;
+    children: string | React.JSX.Element;
+    togglerElement?: ValidIconName | React.JSX.Element;
     togglerText?: string;
     menuButtonDataTestId?: string;
     /** If defined this function will be called with the menu API object to be used externally. */

package/dist/types/extensions/react-flow/nodes/sharedTypes.d.ts

@@ -1,2 +1,2 @@
-import Color from "color";
-export type NodeHighlightColor = "default" | "alternate" | Color | string;
+import { ColorLike } from "color";
+export type NodeHighlightColor = "default" | "alternate" | ColorLike;

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.2.0-rc.0",
+    "version": "26.0.0-rc.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,91 +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.18",
-        "@storybook/addon-jest": "^8.6.14",
-        "@storybook/addon-links": "^8.6.14",
-        "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
-        "@storybook/cli": "^8.6.18",
+        "@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.18",
-        "@storybook/react-webpack5": "^8.6.18",
-        "@storybook/test": "^8.6.18",
+        "@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.18",
-        "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.3",
-        "**/tar": "^7.5.11",
-        "**/immutable": "^4.3.8"
+        "**/serialize-javascript": "^7.0.5"
     },
     "husky": {
         "hooks": {
@@ -231,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 />
+    );
+};