@eccenca/gui-elements 22.0.1 → 22.1.0

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

@@ -1,6 +1,16 @@
-/// <reference types="react" />
-declare function HtmlContentBlock({ className, children, small, large, // currently unsupported
-muted, // currently unsupported
-disabled, // currently unsupported
-...otherProps }: any): JSX.Element;
+import React from "react";
+export interface HtmlContentBlockProps extends React.HTMLAttributes<HTMLDivElement> {
+    className?: string;
+    small?: boolean;
+    /** currently not supported */
+    large?: boolean;
+    /** currently not supported */
+    muted?: boolean;
+    /** currently not supported */
+    disabled?: boolean;
+    linebreakForced?: boolean;
+    linebreakPrevented?: boolean;
+    noScrollbarsOnChildren?: boolean;
+}
+declare function HtmlContentBlock({ className, children, small, large, muted, disabled, linebreakForced, linebreakPrevented, noScrollbarsOnChildren, ...otherProps }: HtmlContentBlockProps): JSX.Element;
 export default HtmlContentBlock;

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

@@ -1,6 +1,7 @@
 export declare const NOOVERFLOW: string;
 export declare const FORCELINEBREAK: string;
 export declare const PREVENTLINEBREAK: string;
+export declare const NOSCROLLBARSONCHILDREN: string;
 export declare const LARGE: string;
 export declare const SMALL: string;
 export declare const MUTED: string;

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

@@ -0,0 +1,18 @@
+/**
+ * Copied from `react-flow` because we need to change there routing.
+ * We use the 10.2.0cversion minus commit 87d518f8b5540a91a3f9c163a2315c2de47abc31
+ * @see https://github.com/wbkd/react-flow/commit/87d518f8b5540a91a3f9c163a2315c2de47abc31
+ */
+import { Position } from "react-flow-renderer";
+export interface GetSmoothStepPathParams {
+    sourceX: number;
+    sourceY: number;
+    sourcePosition?: Position;
+    targetX: number;
+    targetY: number;
+    targetPosition?: Position;
+    borderRadius?: number;
+    centerX?: number;
+    centerY?: number;
+}
+export declare function getSmoothStepPath({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition, borderRadius, centerX, centerY, }: GetSmoothStepPathParams): string;

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

@@ -1,4 +1,4 @@
 import { EdgeDefaultProps } from "./EdgeDefault";
 import { EdgeStepProps } from "./EdgeStep";
-export declare const drawEdgeStraight: ({ sourceX, sourceY, targetX, targetY, }: EdgeDefaultProps) => string;
+export declare const drawEdgeStraight: ({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition, }: EdgeDefaultProps) => string;
 export declare const drawEdgeStep: ({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition, data, }: EdgeStepProps) => string;

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

@@ -3,11 +3,12 @@ import { Position } from "react-flow-renderer";
 import { ValidIconName } from "../../../components/Icon/canonicalIconNames";
 import { HandleProps } from "./../handles/HandleDefault";
 import { NodeProps } from "./NodeDefault";
-declare type HighlightingState = "success" | "warning" | "danger" | "match" | "altmatch";
+import { NodeContentExtensionProps } from "./NodeContentExtension";
+export declare type HighlightingState = "success" | "warning" | "danger" | "match" | "altmatch";
 export interface IHandleProps extends HandleProps {
     category?: "configuration";
 }
-interface NodeContentData {
+interface NodeContentData<CONTENT_PROPS = any> {
     /**
      * Name of icon that should be displayed before the node label.
      * Must be a name from our list of canonical icon names.
@@ -24,13 +25,13 @@ interface NodeContentData {
     /**
      * Content element, displayed in the node body.
      */
-    content?: React.ReactNode;
+    content?: React.ReactNode | ((adjustedContentProps: Partial<CONTENT_PROPS>) => React.ReactNode);
     /**
      * Content extension, displayed at the bottom side of a node.
      */
-    contentExtension?: React.ReactNode;
+    contentExtension?: React.ReactElement<NodeContentExtensionProps>;
 }
-export interface NodeContentProps<T> extends NodeContentData, React.HTMLAttributes<HTMLDivElement> {
+export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends NodeContentData, React.HTMLAttributes<HTMLDivElement> {
     /**
      * Size of the node.
      * If `minimalShape` is not set to `none`then the configured size definition is only used for the selected node state.
@@ -57,7 +58,7 @@ export interface NodeContentProps<T> extends NodeContentData, React.HTMLAttribut
     /**
      * Set of defined buttons and icons that can be displayed.
      */
-    executionButtons?: () => React.ReactNode;
+    executionButtons?: (adjustedContentProps: Partial<NODE_CONTENT_PROPS>, setAdjustedContentProps: React.Dispatch<React.SetStateAction<Partial<NODE_CONTENT_PROPS>>>) => React.ReactElement<NODE_CONTENT_PROPS>;
     /**
      * Can be used for permanent action button or context menu.
      * It is displayed at the node header right to the label.
@@ -80,7 +81,7 @@ export interface NodeContentProps<T> extends NodeContentData, React.HTMLAttribut
      * Callback function to provide content for the tooltip on a node with a defined `minimalShape`.
      * If you do not want a tooltip in this state you need to provide a callback that returns an empty value.
      */
-    getMinimalTooltipData?: (node: NodeProps<T>) => NodeContentData;
+    getMinimalTooltipData?: (node: NodeProps<NODE_DATA>) => NodeContentData;
     /**
      * Set if a handle is displayed even if it does not allow a connection to an edge.
      */
@@ -90,7 +91,7 @@ export interface NodeContentProps<T> extends NodeContentData, React.HTMLAttribut
      */
     animated?: boolean;
     /** Additional data stored in the node. */
-    businessData?: T;
+    businessData?: NODE_DATA;
     /**
      * This property is only forwarded from the `NodeDefault` element.
      * If set then it will be always overwritten internally.
@@ -111,11 +112,16 @@ export interface NodeContentProps<T> extends NodeContentData, React.HTMLAttribut
      * If set then it will be always overwritten internally.
      */
     selected?: boolean;
+    /**
+     * Allow react flow wheel events, e.g. for zooming using the mouse wheel over a node.
+     * If this is allowed scrolling inside a node is not possible.
+     */
+    letPassWheelEvents?: boolean;
 }
 export declare const gethighlightedStateClasses: (state: any, baseClassName: any) => any;
 /**
  * The `NodeContent` element manages the main view of how a node is displaying which content.
  * This element cannot be used directly, all properties must be routed through the `data` property of an `elements` property item inside the `ReactFlow` container.
  */
-export declare const NodeContent: ({ iconName, depiction, typeLabel, label, showExecutionButtons, executionButtons, menuButtons, content, contentExtension, size, minimalShape, highlightedState, handles, adaptHeightForHandleMinCount, adaptSizeIncrement, getMinimalTooltipData, style, showUnconnectableHandles, animated, targetPosition, sourcePosition, isConnectable, selected, businessData, ...otherProps }: NodeContentProps<any>) => JSX.Element;
+export declare function NodeContent<CONTENT_PROPS = any>({ iconName, depiction, typeLabel, label, showExecutionButtons, executionButtons, menuButtons, content, contentExtension, size, minimalShape, highlightedState, handles, adaptHeightForHandleMinCount, adaptSizeIncrement, getMinimalTooltipData, style, showUnconnectableHandles, animated, targetPosition, sourcePosition, isConnectable, selected, letPassWheelEvents, businessData, ...otherProps }: NodeContentProps<any>): JSX.Element;
 export {};

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

@@ -1,5 +1,9 @@
 import React from "react";
 export interface NodeContentExtensionProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * When enabled the element is displayed in a way that it does not count into the node size calculation.
+     */
+    slideOutOfNode?: boolean;
     /**
      * Element is displayed in expanded state.
      * If it has no `onToggle` handler property set then it is always expanded.
@@ -27,4 +31,4 @@ export interface NodeContentExtensionProps extends React.HTMLAttributes<HTMLDivE
 /**
  * Displays an content area that can be attached to `NodeContent` elements.
  */
-export declare const NodeContentExtension: ({ children, isExpanded, onToggle, actionButtons, tooltipExpand, tooltipReduce, ...otherProps }: NodeContentExtensionProps) => JSX.Element;
+export declare const NodeContentExtension: ({ children, slideOutOfNode, isExpanded, onToggle, actionButtons, tooltipExpand, tooltipReduce, ...otherProps }: NodeContentExtensionProps) => JSX.Element;

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

@@ -1,12 +1,12 @@
 import React from "react";
 import { NodeProps as ReactFlowNodeProps } from "react-flow-renderer";
 import { NodeContentProps } from "./NodeContent";
-export interface NodeProps<T> extends ReactFlowNodeProps {
+export interface NodeProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends ReactFlowNodeProps {
     /**
      * Contains all properties for our implementation of the React-Flow node.
      * For details pls see the `NodeContent` element documentation.
      */
-    data: NodeContentProps<T>;
+    data: NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS>;
 }
 /**
  * The `NodeDefault` element manages the display of React-Flow nodes.

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

@@ -1,9 +1,16 @@
 import React from "react";
 import { IPopoverProps as IBlueprintPopoverProps } from "@blueprintjs/core";
+import { ValidIconName } from "../../../components/Icon/canonicalIconNames";
 export interface NodeToolsProps extends IBlueprintPopoverProps {
     children: string | JSX.Element;
-    togglerElement?: string | JSX.Element;
+    togglerElement?: ValidIconName | JSX.Element;
     togglerText?: string;
     menuButtonDataTestId?: string;
+    /** If defined this function will be called with the menu API object to be used externally. */
+    menuFunctionsCallback?: (menuFunctions: NodeToolsMenuFunctions) => any;
 }
-export declare const NodeTools: React.MemoExoticComponent<({ children, togglerElement, togglerText, menuButtonDataTestId, ...otherOverlayProps }: NodeToolsProps) => JSX.Element>;
+export interface NodeToolsMenuFunctions {
+    /** Closes the menu if its open. */
+    closeMenu: () => void;
+}
+export declare const NodeTools: React.MemoExoticComponent<({ children, togglerElement, togglerText, menuButtonDataTestId, menuFunctionsCallback, ...otherOverlayProps }: NodeToolsProps) => JSX.Element>;

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

@@ -1,13 +1,13 @@
 /// <reference types="react" />
 export declare const nodeTypes: {
-    default: import("react").MemoExoticComponent<(node: import("./NodeDefault").NodeProps<any>) => JSX.Element>;
-    graphNode: import("react").MemoExoticComponent<(node: import("./NodeDefault").NodeProps<any>) => JSX.Element>;
-    classNode: import("react").MemoExoticComponent<(node: import("./NodeDefault").NodeProps<any>) => JSX.Element>;
-    instanceNode: import("react").MemoExoticComponent<(node: import("./NodeDefault").NodeProps<any>) => JSX.Element>;
-    propertyNode: import("react").MemoExoticComponent<(node: import("./NodeDefault").NodeProps<any>) => JSX.Element>;
-    datasetNode: import("react").MemoExoticComponent<(node: import("./NodeDefault").NodeProps<any>) => JSX.Element>;
-    linkingNode: import("react").MemoExoticComponent<(node: import("./NodeDefault").NodeProps<any>) => JSX.Element>;
-    transformNode: import("react").MemoExoticComponent<(node: import("./NodeDefault").NodeProps<any>) => JSX.Element>;
-    taskNode: import("react").MemoExoticComponent<(node: import("./NodeDefault").NodeProps<any>) => JSX.Element>;
-    workflowNode: import("react").MemoExoticComponent<(node: import("./NodeDefault").NodeProps<any>) => JSX.Element>;
+    default: import("react").MemoExoticComponent<(node: import("./NodeDefault").NodeProps<any, any>) => JSX.Element>;
+    graphNode: import("react").MemoExoticComponent<(node: import("./NodeDefault").NodeProps<any, any>) => JSX.Element>;
+    classNode: import("react").MemoExoticComponent<(node: import("./NodeDefault").NodeProps<any, any>) => JSX.Element>;
+    instanceNode: import("react").MemoExoticComponent<(node: import("./NodeDefault").NodeProps<any, any>) => JSX.Element>;
+    propertyNode: import("react").MemoExoticComponent<(node: import("./NodeDefault").NodeProps<any, any>) => JSX.Element>;
+    datasetNode: import("react").MemoExoticComponent<(node: import("./NodeDefault").NodeProps<any, any>) => JSX.Element>;
+    linkingNode: import("react").MemoExoticComponent<(node: import("./NodeDefault").NodeProps<any, any>) => JSX.Element>;
+    transformNode: import("react").MemoExoticComponent<(node: import("./NodeDefault").NodeProps<any, any>) => JSX.Element>;
+    taskNode: import("react").MemoExoticComponent<(node: import("./NodeDefault").NodeProps<any, any>) => JSX.Element>;
+    workflowNode: import("react").MemoExoticComponent<(node: import("./NodeDefault").NodeProps<any, any>) => JSX.Element>;
 };

package/dist/types/index.d.ts

@@ -9,6 +9,9 @@ import ApplicationToolbar from "./components/Application/ApplicationToolbar";
 import ApplicationToolbarSection from "./components/Application/ApplicationToolbarSection";
 import ApplicationToolbarAction from "./components/Application/ApplicationToolbarAction";
 import ApplicationToolbarPanel from "./components/Application/ApplicationToolbarPanel";
+import AutoSuggestion from "./components/AutoSuggestion/AutoSuggestion";
+import { AutoSuggestionList } from "./components/AutoSuggestion/AutoSuggestionList";
+import SingleLineCodeEditor from "./components/AutoSuggestion/SingleLineCodeEditor";
 import HtmlContentBlock from "./components/Typography/HtmlContentBlock";
 import OverflowText from "./components/Typography/OverflowText";
 import WhiteSpaceContainer from "./components/Typography/WhiteSpaceContainer";
@@ -27,6 +30,8 @@ import Button from "./components/Button/Button";
 import Checkbox from "./components/Checkbox/Checkbox";
 import RadioButton from "./components/RadioButton/RadioButton";
 import Tabs from "./components/Tabs/Tabs";
+import Tab from "./components/Tabs/Tab";
+import TabTitle from "./components/Tabs/TabTitle";
 import TextField from "./components/TextField/TextField";
 import TextArea from "./components/TextField/TextArea";
 import SearchField from "./components/TextField/SearchField";
@@ -47,6 +52,7 @@ import TagList from "./components/Tag/TagList";
 import Notification from "./components/Notification/Notification";
 import Toast from "./components/Notification/Toast";
 import { Select } from "@blueprintjs/select";
+import MultiSelect from "./components/MultiSelect/MultiSelect";
 import { Iframe } from "./components/Iframe/Iframe";
 import { IframeModal } from "./components/Iframe/IframeModal";
 import { OverviewItem, OverviewItemActions, OverviewItemDepiction, OverviewItemDescription, OverviewItemLine, OverviewItemList } from "./components/OverviewItem";
@@ -75,6 +81,7 @@ import { PropertyName, PropertyValue, PropertyValuePair, PropertyValueList } fro
 import * as TypographyClassNames from "./components/Typography/classnames";
 import { ProgressBar } from "./components/ProgressBar/ProgressBar";
 import List from "./components/List/List";
+import * as LegacyReplacements from "./legacy-replacements";
 declare const HelperClasses: {
     Typography: typeof TypographyClassNames;
     Intent: {
@@ -84,9 +91,7 @@ declare const HelperClasses: {
 declare const Utilities: {
     openInNewTab: (event: import("react").MouseEvent<HTMLElement, MouseEvent>, handler?: ((e: import("react").MouseEvent<HTMLElement, MouseEvent>) => void) | undefined, url?: string | undefined) => void;
 };
-export { ApplicationContainer, ApplicationHeader, ApplicationContent, ApplicationSidebarNavigation, ApplicationSidebarToggler, ApplicationTitle, ApplicationToolbar, ApplicationToolbarSection, ApplicationToolbarAction, ApplicationToolbarPanel, HtmlContentBlock, OverflowText, WhiteSpaceContainer, Highlighter, Grid, GridRow, GridColumn, List, WorkspaceContent, WorkspaceMain, WorkspaceSide, WorkspaceHeader, Menu, MenuItem, MenuDivider, ContextOverlay, ContextMenu, OverviewItem, OverviewItemDepiction, OverviewItemDescription, OverviewItemLine, OverviewItemActions, OverviewItemList, TableContainer, Table, TableHead, TableRow, TableBody, TableCell, TableHeader, Icon, IconButton, Label, Button, Checkbox, RadioButton, Tabs, TextField, TextArea, SearchField, Switch, // TODO: scss styles
-NumericInput, // TODO: scss styles
-FieldItem, FieldItemRow, FieldSet, BreadcrumbList, BreadcrumbItem, Modal, SimpleDialog, AlertDialog, Card, CardHeader, CardTitle, CardOptions, CardContent, CardActions, CardActionsAux, Spacing, Divider, Tooltip, Section, SectionHeader, TitlePage, TitleMainsection, TitleSubsection, Accordion, AccordionItem, Toolbar, ToolbarSection, Tag, TagList, Pagination, Notification, Link, Spinner, PropertyName, PropertyValue, PropertyValuePair, PropertyValueList, Toast, HelperClasses, Select, // TODO: include as own element
-AutoCompleteField, ProgressBar, Iframe, IframeModal, Utilities };
+export { ApplicationContainer, ApplicationHeader, ApplicationContent, ApplicationSidebarNavigation, ApplicationSidebarToggler, ApplicationTitle, ApplicationToolbar, ApplicationToolbarSection, ApplicationToolbarAction, ApplicationToolbarPanel, AutoSuggestion, AutoSuggestionList, SingleLineCodeEditor, HtmlContentBlock, OverflowText, WhiteSpaceContainer, Highlighter, Grid, GridRow, GridColumn, List, WorkspaceContent, WorkspaceMain, WorkspaceSide, WorkspaceHeader, Menu, MenuItem, MenuDivider, ContextOverlay, ContextMenu, OverviewItem, OverviewItemDepiction, OverviewItemDescription, OverviewItemLine, OverviewItemActions, OverviewItemList, TableContainer, Table, TableHead, TableRow, TableBody, TableCell, TableHeader, Icon, IconButton, Label, Button, Checkbox, RadioButton, Tabs, Tab, TabTitle, TextField, TextArea, SearchField, Switch, NumericInput, FieldItem, FieldItemRow, FieldSet, BreadcrumbList, BreadcrumbItem, Modal, SimpleDialog, AlertDialog, Card, CardHeader, CardTitle, CardOptions, CardContent, CardActions, CardActionsAux, Spacing, Divider, Tooltip, Section, SectionHeader, TitlePage, TitleMainsection, TitleSubsection, Accordion, AccordionItem, Toolbar, ToolbarSection, Tag, TagList, Pagination, Notification, Link, Spinner, PropertyName, PropertyValue, PropertyValuePair, PropertyValueList, Toast, HelperClasses, Select, // FIXME: CMEM-3742: include as own element
+MultiSelect, AutoCompleteField, ProgressBar, Iframe, IframeModal, Utilities, LegacyReplacements, };
 export * from "./cmem";
 export * from "./extensions/react-flow";

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function AffirmativeButtonReplacement({ children, ...otherProps }: any): JSX.Element;

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const iconMappings: {
+    [key: string]: any;
+};
+export declare function ButtonReplacement({ children, className, fabSize, iconName, tooltip, progress, disabled, affirmative, dismissive, disruptive, raised, colored, ...otherProps }: any): JSX.Element;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function DismissiveButtonReplacement({ children, ...otherProps }: any): JSX.Element;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function DisruptiveButtonReplacement({ children, ...otherProps }: any): JSX.Element;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function CheckboxReplacement({ children, checked, className, disabled, label, onChange, ...otherProps }: any): JSX.Element;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function RadioButtonReplacement({ children, label, ...otherProps }: any): JSX.Element;

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { TabsProps as BlueprintTabsProps } from "@blueprintjs/core";
+interface TabsProps extends Omit<BlueprintTabsProps, "vertical" | "onChange" | "large" | "id" | "renderActiveTabPanelOnly"> {
+    activeTab: string;
+    tabs: DeprecatedTabProps[];
+    onTabClick?: ({ props }: any) => void;
+    prefixTabNames: string;
+    allowScrollbars?: boolean;
+    /**
+    * If controlled usage is enable then a `onTabClick` handler is ncessary to control tab panel content and `activeTab` updates.
+    */
+    controlled?: boolean;
+}
+export interface DeprecatedTabProps {
+    tabId: string;
+    tabTitle: React.ReactNode;
+    tabContent?: JSX.Element;
+    dontShrink?: boolean;
+    className?: string;
+}
+export declare function TabsReplacement({ activeTab, tabs, onTabClick, controlled, prefixTabNames, className, allowScrollbars, ...restProps }: TabsProps): JSX.Element;
+export {};

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function TextFieldReplacement({ className, disabled, error, inputClassName, label, multiline, onChange, onClearValue, required, stretch, value, ...otherProps }: any): JSX.Element;

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

@@ -0,0 +1,10 @@
+export { ButtonReplacement as Button } from "./Button/Button";
+export { AffirmativeButtonReplacement as AffirmativeButton } from "./Button/AffirmativeButton";
+export { DismissiveButtonReplacement as DismissiveButton } from "./Button/DismissiveButton";
+export { DisruptiveButtonReplacement as DisruptiveButton } from "./Button/DisruptiveButton";
+export { ButtonReplacement as ProgressButton } from "./Button/Button";
+export { CheckboxReplacement as Checkbox } from "./Checkbox/Checkbox";
+export { RadioButtonReplacement as Radio } from "./Radio/RadioButton";
+export { TabsReplacement as Tabs } from "./Tabs/Tabs";
+export { TextFieldReplacement as TextField } from "./TextField/TextField";
+export type { DeprecatedTabProps } from "./Tabs/Tabs";

package/package.json

@@ -1,15 +1,17 @@
 {
   "name": "@eccenca/gui-elements",
   "description": "GUI elements based on other libraries, usable in React application, written in Typescript.",
-  "version": "22.0.1",
+  "version": "22.1.0",
   "license": "Apache-2.0",
   "homepage": "https://github.com/eccenca/gui-elements",
+  "bugs": "https://github.com/eccenca/gui-elements/issues",
   "keywords": [
     "GUI",
     "React",
-    "Blueprint JS",
-    "Carbon Components",
-    "Typescript"
+    "Blueprint",
+    "Carbon Design System",
+    "Typescript",
+    "SCSS"
   ],
   "maintainers": [
     {
@@ -18,22 +20,23 @@
       "web": "https://eccence.com/"
     }
   ],
-  "repository": [
-    {
-      "type": "git",
-      "url": "git://github.com/eccenca/gui-elements.git"
-    }
-  ],
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/eccenca/gui-elements.git"
+  },
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
+  "engines": {
+    "node": ">=14.x"
+  },
   "style": "src/index.scss",
   "main": "dist/cjs/index.js",
-  "module": "dist/es5/index.js",
+  "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/es5/index.js",
+      "import": "./dist/esm/index.js",
       "require": "./dist/cjs/index.js"
     }
   },
@@ -42,10 +45,10 @@
     "src"
   ],
   "scripts": {
-    "build:clean": "rm -rf dist/",
-    "build:es5": "tsc --build .typescript/tsbuild-es5.json && ./scripts/fix-es5-dist",
-    "build:cjs": "tsc --build .typescript/tsbuild-cjs.json && ./scripts/fix-cjs-dist",
-    "build:all": "yarn build:clean && yarn build:es5 && yarn build:cjs",
+    "build:clean": "rimraf dist/",
+    "build:esm": "tsc --project .typescript/tsbuild-esm.json && ./scripts/fix-esm-dist",
+    "build:cjs": "tsc --project .typescript/tsbuild-cjs.json && ./scripts/fix-cjs-dist",
+    "build:all": "yarn build:clean && yarn build:esm && yarn build:cjs",
     "compile": "tsc --build tsconfig.json",
     "compile-scss": "node-sass src/index.scss --importer=node_modules/node-sass-tilde-importer",
     "storybook": "start-storybook -p 6006",
@@ -53,7 +56,8 @@
     "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",
+    "check:package": "pjv --warnings --recommendations"
   },
   "dependencies": {
     "@blueprintjs/core": "3.49.1",
@@ -64,12 +68,14 @@
     "carbon-components": "10.44.0",
     "carbon-components-react": "7.44.1",
     "carbon-icons": "7.0.7",
-    "codemirror": "^5.52.2",
+    "codemirror": "^5.61.0",
     "color": "3.2.1",
+    "lodash": "^4.17.21",
     "micromark": "^3.0.10",
     "react": "^16.13.1",
+    "react-codemirror2": "^7.2.1",
     "react-dom": "^16.13.1",
-    "react-flow-renderer": "^9.6.1",
+    "react-flow-renderer": "9.7.4",
     "react-markdown": "^7.0.1",
     "rehype-raw": "^6.1.0",
     "remark-definition-list": "^1.1.0",
@@ -95,27 +101,33 @@
     "@storybook/react": "^6.4.9",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
-    "@types/carbon-components-react": "^7.49.0",
-    "@types/carbon__icons-react": "^10.31.2",
+    "@types/carbon-components-react": "7.49.0",
+    "@types/codemirror": "^5.60.5",
     "@types/color": "^3.0.2",
     "@types/jest": "^24.9.1",
+    "@types/lodash": "^4.14.182",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "babel-jest": "^27.5.1",
     "chromatic": "^6.5.1",
+    "copyfiles": "^2.4.1",
     "css-loader": "3.4.2",
     "eslint": "^7.32.0",
     "eslint-config-react-app": "^6.0.0",
+    "identity-obj-proxy": "^3.0.0",
     "jest": "^26.6.3",
     "jest-environment-jsdom-fourteen": "1.0.1",
     "jest-pnp-resolver": "^1.2.1",
-    "node-sass": "4.12.0",
+    "node-sass": "4.14.1",
     "node-sass-tilde-importer": "^1.0.2",
+    "package-json-validator": "^0.6.3",
     "react-app-polyfill": "^1.0.6",
     "react-lorem-ipsum": "^1.4.9",
     "regenerator-runtime": "^0.13.9",
+    "rimraf": "^3.0.2",
     "sass-loader": "8.0.2",
     "style-loader": "0.23.1",
+    "tsc-esm-fix": "^2.13.0",
     "typescript": "4.4.4",
     "webpack": "^4.46.0"
   },
@@ -127,7 +139,11 @@
     "**/carbon-components": "10.44.0",
     "**/carbon-components-react": "7.44.1",
     "**/carbon-icons": "7.0.7",
-    "**/@types/react": "^17.0.0"
+    "**/@types/react": "^17.0.0",
+    "**/node-gyp": "^7.0.0",
+    "**/glob-parent": "^5.1.2",
+    "**/trim": "^0.0.3",
+    "**/trim-newlines": "^3.0.1"
   },
   "eslintConfig": {
     "extends": [
@@ -171,6 +187,9 @@
       "web.jsx",
       "jsx",
       "node"
-    ]
+    ],
+    "moduleNameMapper": {
+      "\\.(css|scss)$": "identity-obj-proxy"
+    }
   }
 }

package/src/cmem/ActivityControl/ActivityControlTypes.ts

@@ -18,7 +18,7 @@ export interface IActivityStatus {
     // If the activity has been cancelled
     cancelled: boolean;
     // The concrete status ID
-    concreteStatus: "Cancelled" | "Failed" | "Successful" | "Not executed" | "Running" | "Waiting" | "Canceling";
+    concreteStatus: ConcreteActivityStatus;
     // If there was an error, this contains the exception message
     exceptionMessage?: string | null;
     // The runtime in ms
@@ -26,3 +26,5 @@ export interface IActivityStatus {
     // The start time as date time, e.g. "2021-09-07T09:34:53.153Z"
     startTime?: string;
 }
+
+export type ConcreteActivityStatus = "Cancelled" | "Failed" | "Successful" | "Not executed" | "Running" | "Waiting" | "Canceling"

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

@@ -0,0 +1,98 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import { ActivityControlWidget } from "./ActivityControlWidget";
+import { loremIpsum } from "react-lorem-ipsum";
+import Tag from "../../components/Tag/Tag";
+import TagList from "../../components/Tag/TagList";
+
+export default {
+    title: "Cmem/ActivityControlWidget",
+    component: ActivityControlWidget,
+    argTypes: {
+        border: {
+            table: {
+                defaultValue: { summary: false },
+                type: { summary: "boolean" },
+            },
+        },
+        small: {
+            table: {
+                defaultValue: { summary: false },
+                type: { summary: "boolean" },
+            },
+        },
+        canShrink: {
+            table: {
+                defaultValue: { summary: false },
+                type: { summary: "boolean" },
+            },
+        },
+    },
+} as ComponentMeta<typeof ActivityControlWidget>;
+
+const Template: ComponentStory<typeof ActivityControlWidget> = (args) => <ActivityControlWidget {...args} />;
+
+export const FullExample = Template.bind({});
+
+const actions = [
+    {
+        "data-test-id": "activity-reload-activity",
+        icon: "item-reload",
+        action: () => {},
+        tooltip: "Reload Activity",
+        disabled: false,
+    },
+    {
+        "data-test-id": "activity-start-activity",
+        icon: "item-start",
+        action: () => console.log("start"),
+        tooltip: "Start Activity",
+        disabled: false,
+    },
+    {
+        "data-test-id": "activity-stop-activity",
+        icon: "item-stop",
+        action: () => console.log("cancel"),
+        tooltip: "Stop Activity",
+        disabled: false,
+    },
+    {
+        "data-test-id": "activity-view-data",
+        icon: "artefact-rawdata",
+        action: () => {},
+        tooltip: "preview report",
+    },
+];
+
+const commonWidgetArgs = {
+    label: loremIpsum({ p: 1, avgSentencesPerParagraph: 1, avgWordsPerSentence: 4, random: false }),
+    border: true,
+    activityActions: actions,
+    statusMessage: loremIpsum({ p: 1, startWithLoremIpsum: false, random: false }),
+    progressSpinner: {
+        intent: "none",
+        value: 0.5,
+    },
+};
+
+FullExample.args = {
+    ...commonWidgetArgs,
+};
+
+const TemplateWithTags: ComponentStory<typeof ActivityControlWidget> = (args) => <ActivityControlWidget {...args} />;
+
+export const WidgetWithTags = TemplateWithTags.bind({});
+
+const widgetTags = (
+    <TagList>
+        <Tag small>Tag one</Tag>
+        <Tag small>Other tag</Tag>
+        <Tag small>Third keyword</Tag>
+    </TagList>
+);
+
+WidgetWithTags.args = {
+    ...commonWidgetArgs,
+    tags: widgetTags,
+};