@eccenca/gui-elements 23.4.2-rc.0 → 23.6.0-rc.0

package/dist/types/components/Tree/Tree.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Tree as BlueprintTree, TreeProps as BlueprintTreeProps, TreeNode as BlueprintTreeNode, TreeNodeInfo as BlueprintTreeNodeInfo } from "@blueprintjs/core";
+import { Tree as BlueprintTree, TreeNode as BlueprintTreeNode, TreeNodeInfo as BlueprintTreeNodeInfo, TreeProps as BlueprintTreeProps } from "@blueprintjs/core";
 import { IconProps } from "./../Icon/Icon";
 import { TestIconProps } from "./../Icon/TestIcon";
 export interface TreeNodeInfo<T = {}> extends Omit<BlueprintTreeNodeInfo<T>, "childNodes" | "icon"> {

package/dist/types/components/Typography/index.d.ts

@@ -1,4 +1,4 @@
-import { extractSearchWords, matchesAllWords, createMultiWordRegex } from "./Highlighter";
+import { createMultiWordRegex, extractSearchWords, matchesAllWords } from "./Highlighter";
 export declare const HighlighterFunctions: {
     extractSearchWords: typeof extractSearchWords;
     matchesAllWords: typeof matchesAllWords;

package/dist/types/components/Workspace/WorkspaceContent.d.ts

@@ -1,6 +1,5 @@
 import React from "react";
 import { GridProps } from "./../Grid/Grid";
-export interface WorkspaceContentProps extends GridProps {
-}
+export declare type WorkspaceContentProps = GridProps;
 export declare const WorkspaceContent: ({ children, className, ...restProps }: WorkspaceContentProps) => React.JSX.Element;
 export default WorkspaceContent;

package/dist/types/components/Workspace/WorkspaceMain.d.ts

@@ -1,6 +1,5 @@
 import React from "react";
 import { GridColumnProps } from "./../Grid/GridColumn";
-export interface WorkspaceMainProps extends GridColumnProps {
-}
+export declare type WorkspaceMainProps = GridColumnProps;
 export declare const WorkspaceMain: ({ children, className, ...restProps }: GridColumnProps) => React.JSX.Element;
 export default WorkspaceMain;

package/dist/types/components/Workspace/WorkspaceSide.d.ts

@@ -1,6 +1,5 @@
 import React from "react";
 import { GridColumnProps } from "./../Grid/GridColumn";
-export interface WorkspaceSideProps extends GridColumnProps {
-}
+export declare type WorkspaceSideProps = GridColumnProps;
 export declare const WorkspaceSide: ({ children, className, ...restProps }: GridColumnProps) => React.JSX.Element;
 export default WorkspaceSide;

package/dist/types/components/interfaces.d.ts

@@ -1,7 +1,8 @@
 export interface TestableComponent {
     /**
      * Can be set to use it as selector in test environments.
+     * It is also possible to use `data-testid`.
      */
     "data-test-id"?: string;
+    "data-testid"?: string;
 }
-export type { ContextOverlayProps } from "./ContextOverlay/ContextOverlay";

package/dist/types/extensions/codemirror/CodeMirror.d.ts

@@ -45,9 +45,22 @@ export interface CodeEditorProps {
     /** Long lines are wrapped and displayed on multiple lines */
     wrapLines?: boolean;
     outerDivAttributes?: Partial<TextareaHTMLAttributes<HTMLDivElement>>;
+    /**
+     * Size in spaces that is used for a tabulator key.
+     */
+    tabIntentSize?: number;
+    /**
+     * Set the char type that is used for the tabulator key.
+     * If set to `space` the a number of `tabIntentSize` spaces is used instead of a tab.
+     */
+    tabIntentStyle?: "tab" | "space";
+    /**
+     * For some modes an indent style with `space` can be forced, even if `tabIntentStyle="tab"` is set.
+     */
+    tabForceSpaceForModes?: SupportedCodeEditorModes[];
 }
 /**
  * Includes a code editor, currently we use CodeMirror library as base.
  */
-export declare const CodeEditor: ({ onChange, name, id, mode, preventLineNumbers, defaultValue, readOnly, height, wrapLines, outerDivAttributes, }: CodeEditorProps) => React.JSX.Element;
+export declare const CodeEditor: ({ onChange, name, id, mode, preventLineNumbers, defaultValue, readOnly, height, wrapLines, outerDivAttributes, tabIntentSize, tabIntentStyle, tabForceSpaceForModes, }: CodeEditorProps) => React.JSX.Element;
 export {};

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 import { EdgeProps as ReactFlowEdgeProps } from "react-flow-renderer/dist/types";
 import { IntentTypes } from "../../../common/Intent";
 import { NodeHighlightColor } from "./../nodes/sharedTypes";
@@ -41,7 +41,7 @@ export interface EdgeDefaultProps extends ReactFlowEdgeProps {
 }
 export declare const EdgeDefault: React.MemoExoticComponent<(edge: EdgeDefaultProps) => React.JSX.Element>;
 export declare const edgeDefaultUtils: {
-    createEdgeDefaultClassName: ({ strokeType, intent, highlightColor, }: EdgeDefaultDataProps, baseClass?: string) => string;
+    createEdgeDefaultClassName: ({ strokeType, intent, highlightColor }: EdgeDefaultDataProps, baseClass?: string) => string;
     drawEdgeStep: ({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition, data, }: import("./EdgeStep").EdgeStepProps) => string;
     drawEdgeStraight: ({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition, }: EdgeDefaultProps) => string;
 };

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

@@ -1,5 +1,5 @@
-import React from 'react';
-import { EdgeDefaultProps, EdgeDefaultDataProps } from "./EdgeDefault";
+import React from "react";
+import { EdgeDefaultDataProps, EdgeDefaultProps } from "./EdgeDefault";
 interface EdgeStepDataProps extends EdgeDefaultDataProps {
     stepCornerRadius?: number;
 }

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 import { ContextOverlayProps } from "./../../../components/ContextOverlay/ContextOverlay";
 interface PosOffset {
     left: number;

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { NodeProps as ReactFlowNodeProps } from "react-flow-renderer";
-import { NodeContentProps } from "./NodeContent";
 import { ReacFlowVersionSupportProps } from "../versionsupport";
+import { NodeContentProps } from "./NodeContent";
 export interface NodeDefaultProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends ReacFlowVersionSupportProps, ReactFlowNodeProps {
     /**
      * Contains all properties for our implementation of the React-Flow node.

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

@@ -1,6 +1,6 @@
 import React from "react";
-import { ContextOverlayProps } from "./../../../components/ContextOverlay/ContextOverlay";
 import { ValidIconName } from "../../../components/Icon/canonicalIconNames";
+import { ContextOverlayProps } from "./../../../components/ContextOverlay/ContextOverlay";
 export interface NodeToolsMenuFunctions {
     /** Closes the menu if its open. */
     closeMenu: () => void;

package/dist/types/index.d.ts

@@ -1,19 +1,22 @@
+import { Classes as BlueprintClasses } from "@blueprintjs/core";
 import * as Skeleton from "./components/Skeleton/classnames";
 import * as TypographyClassNames from "./components/Typography/classnames";
 import * as LegacyReplacements from "./legacy-replacements";
 declare const ClassNames: {
-    Skeleton: typeof Skeleton;
-    Typography: typeof TypographyClassNames;
+    Blueprint: typeof BlueprintClasses;
     Intent: {
         [key: string]: string;
     };
-};
-declare const HelperClasses: {
     Skeleton: typeof Skeleton;
     Typography: typeof TypographyClassNames;
+};
+declare const HelperClasses: {
+    Blueprint: typeof BlueprintClasses;
     Intent: {
         [key: string]: string;
     };
+    Skeleton: typeof Skeleton;
+    Typography: typeof TypographyClassNames;
 };
 export * from "./configuration/constants";
 export * from "./common";

package/dist/types/legacy-replacements/Button/AffirmativeButton.d.ts

@@ -1,2 +1,2 @@
-import React from 'react';
+import React from "react";
 export declare function AffirmativeButtonReplacement({ children, ...otherProps }: any): React.JSX.Element;

package/dist/types/legacy-replacements/Button/Button.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 export declare const iconMappings: {
     [key: string]: any;
 };

package/dist/types/legacy-replacements/Button/DismissiveButton.d.ts

@@ -1,2 +1,2 @@
-import React from 'react';
+import React from "react";
 export declare function DismissiveButtonReplacement({ children, ...otherProps }: any): React.JSX.Element;

package/dist/types/legacy-replacements/Button/DisruptiveButton.d.ts

@@ -1,2 +1,2 @@
-import React from 'react';
+import React from "react";
 export declare function DisruptiveButtonReplacement({ children, ...otherProps }: any): React.JSX.Element;

package/dist/types/legacy-replacements/Checkbox/Checkbox.d.ts

@@ -1,2 +1,2 @@
-import React from 'react';
+import React from "react";
 export declare function CheckboxReplacement({ children, checked, className, disabled, label, onChange, ...otherProps }: any): React.JSX.Element;

package/dist/types/legacy-replacements/Radio/RadioButton.d.ts

@@ -1,2 +1,2 @@
-import React from 'react';
+import React from "react";
 export declare function RadioButtonReplacement({ children, label, ...otherProps }: any): React.JSX.Element;

package/dist/types/legacy-replacements/Tabs/Tabs.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 import { TabsProps as BlueprintTabsProps } from "@blueprintjs/core";
 interface TabsProps extends Omit<BlueprintTabsProps, "vertical" | "onChange" | "large" | "id" | "animate"> {
     activeTab: string;
@@ -7,8 +7,8 @@ interface TabsProps extends Omit<BlueprintTabsProps, "vertical" | "onChange" | "
     prefixTabNames: string;
     allowScrollbars?: boolean;
     /**
-    * If controlled usage is enable then a `onTabClick` handler is ncessary to control tab panel content and `activeTab` updates.
-    */
+     * If controlled usage is enable then a `onTabClick` handler is ncessary to control tab panel content and `activeTab` updates.
+     */
     controlled?: boolean;
 }
 export interface DeprecatedTabProps {

package/dist/types/legacy-replacements/TextField/TextField.d.ts

@@ -1,2 +1,2 @@
-import React from 'react';
+import React from "react";
 export declare function TextFieldReplacement({ className, disabled, error, inputClassName, label, multiline, onChange, onClearValue, required, stretch, value, ...otherProps }: any): React.JSX.Element;

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": "23.4.2-rc.0",
+    "version": "23.6.0-rc.0",
     "license": "Apache-2.0",
     "homepage": "https://github.com/eccenca/gui-elements",
     "bugs": "https://github.com/eccenca/gui-elements/issues",
@@ -58,67 +58,69 @@
         "test": "jest",
         "test:ci": "jest --ci --reporters='default'",
         "test:coverage": "jest --collectCoverage",
-        "test:generate-output": "jest --json --outputFile=.jest-test-results.json"
+        "test:generate-output": "jest --json --outputFile=.jest-test-results.json",
+        "autolint:scripts": "eslint --fix .storybook/ blueprint/ scripts/ src/ index.ts || exit 0",
+        "autolint:styles": "stylelint \"{.storybook,src}/**/*.{css,scss}\" --fix || exit 0",
+        "autolint:prettier": "prettier \"{.github,.storybook,.typescript,blueprint,scripts,src}/**/*\" .* *.json *.md *.ts --write --ignore-unknown",
+        "autolint:all": "yarn autolint:scripts && yarn autolint:styles && yarn autolint:prettier"
     },
     "dependencies": {
-        "@blueprintjs/colors": "^4.1.22",
-        "@blueprintjs/core": "^4.18.0",
-        "@blueprintjs/popover2": "^1.14.1",
-        "@blueprintjs/select": "^4.9.14",
+        "@blueprintjs/colors": "^5.1.0",
+        "@blueprintjs/core": "^5.9.1",
+        "@blueprintjs/select": "^5.1.1",
         "@carbon/icons": "^11.19.0",
         "@carbon/icons-react": "11.19.0",
         "@carbon/styles": "1.32.0",
         "@mavrin/remark-typograf": "^2.2.0",
         "carbon-components-react": "^8.28.0",
-        "codemirror": "^5.65.13",
-        "color": "3.2.1",
+        "codemirror": "^5.65.16",
+        "color": "^4.2.3",
         "lodash": "^4.17.21",
-        "micromark": "^3.0.10",
         "re-resizable": "6.9.9",
         "react": "^16.13.1",
-        "react-codemirror2": "^7.2.1",
+        "react-codemirror2": "^7.3.0",
         "react-dom": "^16.13.1",
         "react-flow-renderer": "9.7.4",
         "react-flow-renderer-lts": "npm:react-flow-renderer@^10.3.17",
-        "react-inlinesvg": "^3.0.2",
+        "react-inlinesvg": "^3.0.3",
         "react-markdown": "^8.0.7",
-        "rehype-raw": "^6.1.0",
-        "remark-definition-list": "^1.1.0",
-        "remark-gfm": "^3.0.0",
-        "remark-parse": "^10.0.0",
-        "reset-css": "^5.0.1",
-        "unified": "^10.1.1",
+        "rehype-raw": "^6.1.1",
+        "remark-definition-list": "^1.2.0",
+        "remark-gfm": "^3.0.1",
+        "remark-parse": "^10.0.2",
+        "reset-css": "^5.0.2",
+        "unified": "^11.0.4",
         "wicg-inert": "^3.1.2"
     },
     "devDependencies": {
-        "@babel/core": "^7.21.8",
+        "@babel/core": "^7.23.9",
         "@babel/plugin-proposal-class-properties": "^7.16.7",
         "@babel/plugin-proposal-private-methods": "^7.16.11",
-        "@babel/plugin-proposal-private-property-in-object": "^7.16.7",
-        "@babel/preset-env": "^7.21.5",
-        "@babel/preset-flow": "^7.16.5",
-        "@babel/preset-react": "^7.16.7",
-        "@babel/preset-typescript": "^7.21.5",
-        "@storybook/addon-actions": "^7.0.9",
-        "@storybook/addon-essentials": "^7.0.9",
-        "@storybook/addon-jest": "^7.0.9",
-        "@storybook/addon-links": "^7.0.9",
-        "@storybook/cli": "^7.0.9",
+        "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+        "@babel/preset-env": "^7.23.9",
+        "@babel/preset-flow": "^7.23.3",
+        "@babel/preset-react": "^7.23.3",
+        "@babel/preset-typescript": "^7.23.3",
+        "@storybook/addon-actions": "^7.6.17",
+        "@storybook/addon-essentials": "^7.6.17",
+        "@storybook/addon-jest": "^7.6.17",
+        "@storybook/addon-links": "^7.6.17",
+        "@storybook/cli": "^7.6.17",
         "@storybook/preset-scss": "^1.0.3",
-        "@storybook/react": "^7.0.9",
-        "@storybook/react-webpack5": "^7.0.9",
-        "@testing-library/jest-dom": "^6.1.3",
+        "@storybook/react": "^7.6.17",
+        "@storybook/react-webpack5": "^7.6.17",
+        "@testing-library/jest-dom": "^6.4.2",
         "@testing-library/react": "^12.1.2",
-        "@types/carbon-components-react": "^7.55.2",
-        "@types/codemirror": "^5.60.5",
-        "@types/color": "^3.0.2",
-        "@types/jest": "^29.5.4",
-        "@types/lodash": "^4.14.194",
+        "@types/carbon-components-react": "^7.55.10",
+        "@types/codemirror": "^5.60.15",
+        "@types/color": "^3.0.6",
+        "@types/jest": "^29.5.12",
+        "@types/lodash": "^4.14.202",
         "@typescript-eslint/eslint-plugin": "^5.62.0",
         "@typescript-eslint/parser": "^5.62.0",
         "babel-jest": "^29.7.0",
-        "chromatic": "^6.17.4",
-        "eslint": "^8.49.0",
+        "chromatic": "^10.9.6",
+        "eslint": "^8.56.0",
         "eslint-plugin-react": "^7.33.2",
         "eslint-plugin-react-hooks": "^4.6.0",
         "eslint-plugin-simple-import-sort": "^10.0.0",
@@ -128,21 +130,21 @@
         "jest-environment-jsdom": "^29.7.0",
         "jest-pnp-resolver": "^1.2.3",
         "lint-staged": "^13.3.0",
-        "node-sass-package-importer": "^5.3.2",
+        "node-sass-package-importer": "^5.3.3",
         "prettier": "^2.8.8",
         "react-app-polyfill": "^3.0.0",
         "react-lorem-ipsum": "^1.4.9",
         "regenerator-runtime": "^0.13.9",
-        "rimraf": "^5.0.1",
-        "sass": "^1.62.1",
-        "sass-loader": "^13.2.2",
-        "storybook": "^7.0.9",
-        "stylelint": "^15.7.0",
-        "stylelint-config-recess-order": "^4.2.0",
+        "rimraf": "^5.0.5",
+        "sass": "1.62.1",
+        "sass-loader": "10.3.1",
+        "storybook": "^7.6.17",
+        "stylelint": "^15.11.0",
+        "stylelint-config-recess-order": "^4.6.0",
         "stylelint-config-standard-scss": "^9.0.0",
-        "ts-node": "^10.9.1",
-        "tsc-esm-fix": "^2.20.15",
-        "typescript": "4.4.4",
+        "ts-node": "^10.9.2",
+        "tsc-esm-fix": "^2.20.25",
+        "typescript": "4.5.2",
         "url-loader": "^4.1.1",
         "yargs": "^17.7.2"
     },
@@ -154,11 +156,11 @@
         "react-dom": ">=16"
     },
     "resolutions": {
-        "**/@babel/traverse": "^7.23.2",
-        "**/@types/react": "^17.0.59",
-        "**/postcss": "^8.4.31",
-        "**/parse5": "^6.0.1",
-        "**/@carbon/icons-react": "11.19.0"
+        "**/@types/react": "^17.0.75",
+        "**/@carbon/icons-react": "11.19.0",
+        "**/jackspeak": "2.1.1",
+        "node-sass-package-importer/**/postcss": "^8.4.31",
+        "**/word-wrap": "^1.2.4"
     },
     "husky": {
         "hooks": {
@@ -166,11 +168,11 @@
         }
     },
     "lint-staged": {
-        "*.(js|json|md)": [
+        "*.(json|md)": [
             "prettier --write",
             "git add"
         ],
-        "*.(ts|tsx)": [
+        "*.(js|ts|tsx)": [
             "eslint --fix",
             "prettier --write",
             "git add"

package/scripts/compile-sass.ts

@@ -1,6 +1,7 @@
-import * as sass from "sass";
 import tildeImporter from "node-sass-package-importer";
+import * as sass from "sass";
 import yargs from "yargs";
+
 import sassRenderSyncConfig from "./sassConfig";
 
 const args = yargs(process.argv.slice(2)).argv as any;

package/scripts/sassConfig.js

@@ -1,8 +1,8 @@
 const sass = require("sass");
 
 const functions = {
-    'svg-icon($path, $selectors: null)': function(_path, _selectors) {
-        return new sass.SassString("unset", {quotes: false});
+    "svg-icon($path, $selectors: null)": function (_path, _selectors) {
+        return new sass.SassString("unset", { quotes: false });
     },
 };
 const sassRenderSyncConfig = {

package/src/_shame.scss

@@ -14,35 +14,35 @@
     margin: -1px;
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
-    border: 0;
-    visibility: inherit;
     white-space: nowrap;
+    visibility: inherit;
+    border: 0;
 }
 
 .uppy-DragDrop-container {
+    color: inherit;
+    background-color: $data-table-zebra-color;
     // TODO: create own file upload elements
 
     border-width: 1px;
+
     //border-style: dotted;
     border-radius: 3px;
 
-    color: inherit;
-    background-color: $data-table-zebra-color;
-
     .uppy-DragDrop-inner {
-        line-height: inherit;
         padding: 1rem;
+        line-height: inherit;
     }
 
     .uppy-DragDrop-arrow {
-        height: 2rem;
         width: 2rem;
+        height: 2rem;
         margin-bottom: 0.5rem;
     }
 
     .uppy-DragDrop-label {
-        font-size: inherit;
         margin-bottom: 0.5rem;
+        font-size: inherit;
     }
 }
 
@@ -51,8 +51,8 @@
 */
 
 * {
-scrollbar-width: thin;
-scrollbar-color: #bbb transparent;
+    scrollbar-width: thin;
+    scrollbar-color: #bbb transparent;
 
     &::-webkit-scrollbar {
         width: 0.25rem;
@@ -60,10 +60,9 @@ scrollbar-color: #bbb transparent;
         background-color: #fefefe;
     }
 
-    &::-webkit-scrollbar-thumb
-    {
-        border-radius: 0.125rem;
+    &::-webkit-scrollbar-thumb {
         background-color: #bbb;
+        border-radius: 0.125rem;
     }
 }
 

package/src/cmem/ActivityControl/ActivityControlTypes.ts

@@ -7,7 +7,7 @@ export interface IActivityStatus {
     // The activity ID
     activity: string;
     // Human-readable activity label
-    activityLabel: string
+    activityLabel: string;
     // If the activity is currently running
     isRunning: boolean;
     // If the activity has failed
@@ -34,5 +34,12 @@ export interface IActivityStatus {
 export type SilkActivityStatusProps = IActivityStatus;
 
 // @deprecated use `SilkActivityStatusConcrete`
-export type ConcreteActivityStatus = "Cancelled" | "Failed" | "Successful" | "Not executed" | "Running" | "Waiting" | "Canceling"
+export type ConcreteActivityStatus =
+    | "Cancelled"
+    | "Failed"
+    | "Successful"
+    | "Not executed"
+    | "Running"
+    | "Waiting"
+    | "Canceling";
 export type SilkActivityStatusConcrete = ConcreteActivityStatus;

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

@@ -1,9 +1,9 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
 import { loremIpsum } from "react-lorem-ipsum";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
 
-import { Tag, TagList, ActivityControlWidget } from "../../../index";
 import { helpersArgTypes } from "../../../.storybook/helpers";
+import { ActivityControlWidget, Tag, TagList } from "../../../index";
 
 export default {
     title: "Cmem/ActivityControlWidget",

package/src/cmem/ActivityControl/ActivityControlWidget.tsx

@@ -1,4 +1,12 @@
 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,
@@ -14,13 +22,6 @@ import {
     Spinner,
     Tooltip,
 } from "../../index";
-import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-import { TestableComponent } from "../../components/interfaces";
-import { ProgressBarProps } from "../../components/ProgressBar/ProgressBar";
-import { SpinnerProps } from "../../components/Spinner/Spinner";
-import { ValidIconName } from "../../components/Icon/canonicalIconNames";
-import { IconProps } from "../../components/Icon/Icon";
-import { TestIconProps } from "../../components/Icon/TestIcon";
 
 export interface ActivityControlWidgetProps extends TestableComponent {
     /**
@@ -79,7 +80,7 @@ export interface ActivityControlWidgetProps extends TestableComponent {
     /**
      * execution timer messages for waiting and running times.
      */
-    timerExecutionMsg?: JSX.Element | null
+    timerExecutionMsg?: JSX.Element | null;
 }
 
 // @deprecated use `ActivityControlWidgetProps`
@@ -98,7 +99,7 @@ export interface ActivityControlWidgetAction extends TestableComponent {
     // The tooltip that should be shown over the action icon
     tooltip?: string;
     // The icon of the action button
-    icon: ValidIconName | React.ReactElement<TestIconProps>
+    icon: ValidIconName | React.ReactElement<TestIconProps>;
     // Action is currently disabled (but shown)
     disabled?: boolean;
     // Warning state
@@ -151,12 +152,12 @@ export function ActivityControlWidget(props: ActivityControlWidgetProps) {
             <OverviewItemDescription>
                 {props.label && (
                     <OverviewItemLine small={small}>
-                        { React.cloneElement(labelWrapper, {}, props.label) }
+                        {React.cloneElement(labelWrapper, {}, props.label)}
                     </OverviewItemLine>
                 )}
                 {(props.statusMessage || tags) && (
                     <OverviewItemLine small>
-                        { tags }
+                        {tags}
                         {props.statusMessage && (
                             <OverflowText passDown>
                                 {props.statusMessage.length > 50 ? (
@@ -175,7 +176,7 @@ export function ActivityControlWidget(props: ActivityControlWidgetProps) {
                         )}
                     </OverviewItemLine>
                 )}
-             {timerExecutionMsg && <OverviewItemLine small>{timerExecutionMsg}</OverviewItemLine>}
+                {timerExecutionMsg && <OverviewItemLine small>{timerExecutionMsg}</OverviewItemLine>}
             </OverviewItemDescription>
             <OverviewItemActions>
                 {activityActions &&
@@ -191,7 +192,7 @@ export function ActivityControlWidget(props: ActivityControlWidgetProps) {
                                 hasStateWarning={action.hasStateWarning}
                                 tooltipProps={{
                                     hoverOpenDelay: 200,
-                                    placement: "bottom"
+                                    placement: "bottom",
                                 }}
                             />
                         );
@@ -205,7 +206,11 @@ export function ActivityControlWidget(props: ActivityControlWidgetProps) {
                             return (
                                 <MenuItem
                                     icon={menuAction.icon}
-                                    key={typeof menuAction.icon === "string" ? menuAction.icon : menuAction["data-test-id"] ?? idx}
+                                    key={
+                                        typeof menuAction.icon === "string"
+                                            ? menuAction.icon
+                                            : menuAction["data-test-id"] ?? idx
+                                    }
                                     onClick={menuAction.action}
                                     text={menuAction.tooltip}
                                 />