@eccenca/gui-elements 23.0.0 → 23.1.0-easynav.1

package/dist/types/components/TextField/TextArea.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { TextAreaProps as BlueprintTextAreaProps } from "@blueprintjs/core";
-interface TextAreaProps extends Partial<BlueprintTextAreaProps> {
+import { InvisibleCharacterWarningProps } from "./useTextValidation";
+export interface TextAreaProps extends Partial<BlueprintTextAreaProps> {
     /**
      * when set to true the input takes a blue border color
      */
@@ -17,6 +18,10 @@ interface TextAreaProps extends Partial<BlueprintTextAreaProps> {
      * when set to true the input takes a red border color
      */
     hasStateDanger?: boolean;
+    /**
+     * If set, allows to be informed of invisible, hard to spot characters in the string value.
+     */
+    invisibleCharacterWarning?: InvisibleCharacterWarningProps;
 }
-declare function TextArea({ className, hasStatePrimary, hasStateSuccess, hasStateWarning, hasStateDanger, rows, ...otherProps }: TextAreaProps): JSX.Element;
+declare function TextArea({ className, hasStatePrimary, hasStateSuccess, hasStateWarning, hasStateDanger, rows, invisibleCharacterWarning, ...otherProps }: TextAreaProps): JSX.Element;
 export default TextArea;

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

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { MaybeElement, HTMLInputProps, InputGroupProps } from "@blueprintjs/core";
 import { ValidIconName } from "../Icon/canonicalIconNames";
+import { InvisibleCharacterWarningProps } from "./useTextValidation";
 export interface TextFieldProps extends Partial<Omit<InputGroupProps, "intent" | "leftIcon"> & HTMLInputProps> {
     /**
     * The input element is displayed with primary color scheme.
@@ -26,9 +27,13 @@ export interface TextFieldProps extends Partial<Omit<InputGroupProps, "intent" |
      * Left aligned icon, can be a canonical icon name or an `Icon` element.
      */
     leftIcon?: ValidIconName | MaybeElement;
+    /**
+     * If set, allows to be informed of invisible, hard to spot characters in the string value.
+     */
+    invisibleCharacterWarning?: InvisibleCharacterWarningProps;
 }
 /**
   * Text input field.
   */
-declare function TextField({ className, hasStatePrimary, hasStateSuccess, hasStateWarning, hasStateDanger, fullWidth, leftIcon, ...otherProps }: TextFieldProps): JSX.Element;
+declare function TextField({ className, hasStatePrimary, hasStateSuccess, hasStateWarning, hasStateDanger, fullWidth, leftIcon, invisibleCharacterWarning, ...otherProps }: TextFieldProps): JSX.Element;
 export default TextField;

package/dist/types/components/TextField/useTextValidation.d.ts

@@ -0,0 +1,28 @@
+import React, { ChangeEventHandler } from "react";
+export interface InvisibleCharacterWarningProps {
+    /**
+     * If set, the function is called after every value change what invisible characters have been detected.
+     */
+    callback: (detectedCodePoints: Set<number>) => any;
+    /**
+     * The delay in milliseconds after which an input string should be checked. Only the most recent value will be checked.
+     * A higher value will reduce the probability that the typing stalls.
+     *
+     * Default: 500
+     */
+    callbackDelay?: number;
+}
+interface Props<T = Element> {
+    /** Forwarded TextField props */
+    value?: string | ReadonlyArray<string> | number | undefined;
+    readOnly?: boolean | undefined;
+    disabled?: boolean | undefined;
+    onChange?: ChangeEventHandler<T>;
+    /**
+     * If set, allows to be informed of invisible, hard to spot characters in the string value.
+     */
+    invisibleCharacterWarning?: InvisibleCharacterWarningProps;
+}
+/** Validates the string value for invisible characters. */
+export declare const useTextValidation: <T>({ value, onChange, invisibleCharacterWarning }: Props<T>) => React.ChangeEventHandler<T> | undefined;
+export {};

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

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { Tree as BlueprintTree, TreeProps as BlueprintTreeProps, TreeNode as BlueprintTreeNode, TreeNodeInfo as BlueprintTreeNodeInfo } from "@blueprintjs/core";
 import { IconProps } from "./../Icon/Icon";
+import { TestIconProps } from "./../Icon/TestIcon";
 export interface TreeNodeInfo<T = {}> extends Omit<BlueprintTreeNodeInfo<T>, "childNodes" | "icon"> {
     /**
      * Child tree nodes of this node.
@@ -9,7 +10,7 @@ export interface TreeNodeInfo<T = {}> extends Omit<BlueprintTreeNodeInfo<T>, "ch
     /**
      * `<Icon />` element to render next to the node's label.
      */
-    icon?: React.ReactElement<IconProps>;
+    icon?: React.ReactElement<IconProps> | React.ReactElement<TestIconProps>;
 }
 export interface TreeNodeProps<T = {}> extends TreeNodeInfo<T> {
     children?: React.ReactNode;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-interface IHighlighterProps {
+export interface HighlighterProps {
     label?: string;
     searchValue?: string;
 }
@@ -8,7 +8,7 @@ interface IHighlighterProps {
  * @param label       The string to highlight.
  * @param searchValue The mutli-word search query from which single words should be highlighted in the label.
  */
-declare function Highlighter({ label, searchValue }: IHighlighterProps): JSX.Element;
+declare function Highlighter({ label, searchValue }: HighlighterProps): JSX.Element;
 /** Extracts search words separated by white space. */
 export declare function extractSearchWords(textQuery: string, toLowerCase?: boolean): string[];
 /** Returns true if all search words are included in the given text */

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-interface IProps {
+export interface OverflowTextProps {
     ellipsis?: "reverse" | "none";
     inline?: boolean;
     passDown?: boolean;
@@ -8,5 +8,5 @@ interface IProps {
     [key: string]: any;
 }
 /** Prevents text from overflowing. */
-declare function OverflowText({ className, children, ellipsis, inline, passDown, useHtmlElement, ...otherProps }: IProps): JSX.Element;
+declare function OverflowText({ className, children, ellipsis, inline, passDown, useHtmlElement, ...otherProps }: OverflowTextProps): JSX.Element;
 export default OverflowText;

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

@@ -1,5 +1,46 @@
-/// <reference types="react" />
-declare function WhiteSpaceContainer({ className, children, marginTop, // tiny, small, regular, large, xlarge
-marginRight, marginBottom, marginLeft, paddingTop, // tiny, small, regular, large, xlarge
-paddingRight, paddingBottom, paddingLeft, ...otherProps }: any): JSX.Element;
+import React from "react";
+declare type WhiteSpaceSizes = "tiny" | "small" | "regular" | "large" | "xlarge";
+export interface WhiteSpaceContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Insert line breaks within an otherwise unbreakable string to prevent text from overflowing the container.
+     */
+    linebreakForced?: boolean;
+    /**
+     * Size of top margin around the container.
+     */
+    marginTop?: WhiteSpaceSizes;
+    /**
+     * Size of right margin around the container.
+     */
+    marginRight?: WhiteSpaceSizes;
+    /**
+     * Size of bottom margin around the container.
+     */
+    marginBottom?: WhiteSpaceSizes;
+    /**
+     * Size of left margin around the container.
+     */
+    marginLeft?: WhiteSpaceSizes;
+    /**
+     * Size of top padding inside the container.
+     */
+    paddingTop?: WhiteSpaceSizes;
+    /**
+     * Size of right padding inside the container.
+     */
+    paddingRight?: WhiteSpaceSizes;
+    /**
+     * Size of bottom padding inside the container.
+     */
+    paddingBottom?: WhiteSpaceSizes;
+    /**
+     * Size of left padding inside the container.
+     */
+    paddingLeft?: WhiteSpaceSizes;
+}
+/**
+ * Simple container to add whitespace inside and around of it without adding style attributes directly.
+ * This way the added whitespace keeps visually connected to the other whitespaces used in the application.
+ */
+declare function WhiteSpaceContainer({ className, children, marginTop, marginRight, marginBottom, marginLeft, paddingTop, paddingRight, paddingBottom, paddingLeft, linebreakForced, ...otherDivProps }: WhiteSpaceContainerProps): JSX.Element;
 export default WhiteSpaceContainer;

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

@@ -0,0 +1,12 @@
+import Highlighter, { HighlighterProps } from "./Highlighter";
+import { extractSearchWords, matchesAllWords, createMultiWordRegex } from "./Highlighter";
+import HtmlContentBlock, { HtmlContentBlockProps } from "./HtmlContentBlock";
+import OverflowText, { OverflowTextProps } from "./OverflowText";
+import WhiteSpaceContainer, { WhiteSpaceContainerProps } from "./WhiteSpaceContainer";
+export type { HighlighterProps, HtmlContentBlockProps, OverflowTextProps, WhiteSpaceContainerProps };
+export { Highlighter, HtmlContentBlock, OverflowText, WhiteSpaceContainer, };
+export declare const HighlighterFunctions: {
+    extractSearchWords: typeof extractSearchWords;
+    matchesAllWords: typeof matchesAllWords;
+    createMultiWordRegex: typeof createMultiWordRegex;
+};

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

@@ -0,0 +1,5 @@
+export * from "./Badge/Badge";
+export * from "./Depiction/Depiction";
+export * from "./Icon";
+export * from "./Tree/Tree";
+export * from "./Typography";

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

@@ -0,0 +1,32 @@
+import React from "react";
+import { DepictionProps } from "../../../index";
+import { ValidIconName } from "../../../components/Icon/canonicalIconNames";
+import { IntentTypes } from "../../../common/Intent";
+export interface EdgeLabelProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Depiction element displayed left from the label.
+     */
+    depiction?: ValidIconName | React.ReactElement<DepictionProps>;
+    /**
+     * Label of the edge.
+     * Cannot overflow the parent container.
+     */
+    text: string | JSX.Element;
+    /**
+     * One or multiple other elements displayed right from label.
+     */
+    actions?: JSX.Element | JSX.Element[];
+    /**
+     * The element is increased in its size.
+     */
+    large?: boolean;
+    /**
+     * Stretches the label component to the full available width.
+     */
+    fullWidth?: boolean;
+    /**
+     * Add a info state to the label, visualized by color.
+     */
+    intent?: IntentTypes;
+}
+export declare const EdgeLabel: React.MemoExoticComponent<({ depiction, text, actions, large, fullWidth, intent, ...otherDivProps }: EdgeLabelProps) => JSX.Element>;

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

@@ -1,9 +1,17 @@
 import React from 'react';
-import { HandleProps as ReactFlowHandleProps } from "react-flow-renderer";
+import { HandleProps as ReactFlowHandleLegacyProps } from "react-flow-renderer";
+import { HandleProps as ReactFlowHandleNextProps } from "react-flow-renderer-lts";
 import { HandleContentProps } from "./HandleContent";
-export interface HandleProps extends ReactFlowHandleProps {
+import { ReacFlowVersionSupportProps } from "../versionsupport";
+interface HandleExtensionProps extends ReacFlowVersionSupportProps {
     data?: HandleContentProps;
     tooltip?: string;
     children?: JSX.Element | string;
+    onClick?: () => void;
 }
-export declare const HandleDefault: React.MemoExoticComponent<({ data, tooltip, children, ...handleProps }: HandleProps) => JSX.Element>;
+export interface HandleProps extends HandleExtensionProps, ReactFlowHandleLegacyProps {
+}
+export interface HandleNextProps extends HandleExtensionProps, ReactFlowHandleNextProps {
+}
+export declare const HandleDefault: React.MemoExoticComponent<({ flowVersion, data, tooltip, children, ...handleProps }: HandleProps | HandleNextProps) => JSX.Element>;
+export {};

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

@@ -7,6 +7,7 @@ export { EdgeDefault } from "./edges/EdgeDefault";
 export { EdgeStep } from "./edges/EdgeStep";
 export { EdgeTools } from "./edges/EdgeTools";
 export { edgeTypes } from "./edges/edgeTypes";
+export * from "./edges/EdgeLabel";
 export { MarkerArrowClosedInverse } from "./markers/MarkerArrowClosedInverse";
 export { ReactFlowMarkers } from "./markers/ReactFlowMarkers";
 export { MiniMap } from "./minimap/MiniMap";

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

@@ -1,13 +1,18 @@
 import React from "react";
 import { Position } from "react-flow-renderer";
 import { ValidIconName } from "../../../components/Icon/canonicalIconNames";
-import { HandleProps } from "./../handles/HandleDefault";
+import { DepictionProps } from "../../../components/Depiction/Depiction";
+import { ReacFlowVersionSupportProps } from "../versionsupport";
+import { HandleProps, HandleNextProps } from "./../handles/HandleDefault";
 import { NodeProps } from "./NodeDefault";
 import { NodeContentExtensionProps } from "./NodeContentExtension";
 export declare type HighlightingState = "success" | "warning" | "danger" | "match" | "altmatch";
 export interface IHandleProps extends HandleProps {
     category?: "configuration";
 }
+interface NodeContentHandleNextProps extends HandleNextProps {
+    category?: "configuration";
+}
 export declare type NodeDimensions = {
     width: number;
     height: number;
@@ -19,13 +24,22 @@ interface NodeContentData<CONTENT_PROPS = any> {
      */
     iconName?: ValidIconName;
     /**
-     * Valid and accessible URL or `data-uri` for an image that should be displayed before the node label.
+     * Depiction element that should be displayed before the node label.
+     * As alternative a valid and accessible URL or `data-uri` for an image can be set, then the Depiction element is created automatically.
      */
-    depiction?: string;
+    depiction?: string | React.ReactElement<DepictionProps>;
+    /**
+     * Any element that should be displayed as depiction before the node label.
+     */
+    leftElement?: JSX.Element;
     /**
      * Label that is displayed in the node header.
      */
-    label: string;
+    label: string | JSX.Element;
+    /**
+     * Element that is displayed as subline under the label in the header.
+     */
+    labelSubline?: JSX.Element;
     /**
      * Content element, displayed in the node body.
      */
@@ -39,7 +53,7 @@ interface NodeContentData<CONTENT_PROPS = any> {
      */
     footerContent?: React.ReactNode;
 }
-export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends NodeContentData, React.HTMLAttributes<HTMLDivElement> {
+export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends NodeContentData, ReacFlowVersionSupportProps, 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.
@@ -50,6 +64,16 @@ export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends N
      * If not set to `none` then the node is only displayed in normal size when it is selected.
      */
     minimalShape?: "none" | "circular" | "rectangular";
+    /**
+     * Stretches the node to the full available width.
+     */
+    fullWidth?: boolean;
+    /**
+     * Increase the hight of the node header.
+     * Use this for example if you need more space for a label subline.
+     * Also the depiction is displayed larger.
+     */
+    increadeHeader?: boolean;
     /**
      * Set the type of used highlights to mark the node.
      */
@@ -76,7 +100,7 @@ export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends N
      * Array of property definition objects for `Handle` components that need to be created for the node.
      * @see https://reactflow.dev/docs/api/handle/
      */
-    handles?: IHandleProps[];
+    handles?: IHandleProps[] | NodeContentHandleNextProps[];
     /**
      * Set the minimal number of handles on left or right side of the node to activate the recalculation of the minimal height of the node.
      */
@@ -139,5 +163,5 @@ export declare const gethighlightedStateClasses: (state: any, baseClassName: 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 function NodeContent<CONTENT_PROPS = any>({ iconName, depiction, typeLabel, label, showExecutionButtons, executionButtons, menuButtons, content, contentExtension, footerContent, size, minimalShape, highlightedState, handles, adaptHeightForHandleMinCount, adaptSizeIncrement, getMinimalTooltipData, style, showUnconnectableHandles, animated, onNodeResize, nodeDimensions, targetPosition, sourcePosition, isConnectable, selected, letPassWheelEvents, businessData, ...otherProps }: NodeContentProps<any>): JSX.Element;
+export declare function NodeContent<CONTENT_PROPS = any>({ flowVersion, iconName, depiction, leftElement, typeLabel, label, labelSubline, increadeHeader, fullWidth, showExecutionButtons, executionButtons, menuButtons, content, contentExtension, footerContent, size, minimalShape, highlightedState, handles, adaptHeightForHandleMinCount, adaptSizeIncrement, getMinimalTooltipData, style, showUnconnectableHandles, animated, onNodeResize, nodeDimensions, targetPosition, sourcePosition, isConnectable, selected, letPassWheelEvents, businessData, ...otherProps }: NodeContentProps<any>): JSX.Element;
 export {};

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

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

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

@@ -0,0 +1,7 @@
+export interface ReacFlowVersionSupportProps {
+    /**
+     * Spevifies the context of the react flow renderer version that is used for the component.
+     */
+    flowVersion?: "legacy" | "next" | "none";
+}
+export declare const useReactFlowVersion: () => "none" | "legacy" | "next";

package/dist/types/index.d.ts

@@ -12,10 +12,6 @@ import ApplicationToolbarPanel from "./components/Application/ApplicationToolbar
 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";
-import Highlighter from "./components/Typography/Highlighter";
 import Grid from "./components/Grid/Grid";
 import GridRow from "./components/Grid/GridRow";
 import GridColumn from "./components/Grid/GridColumn";
@@ -24,7 +20,6 @@ import WorkspaceContent from "./components/Workspace/WorkspaceContent";
 import WorkspaceMain from "./components/Workspace/WorkspaceMain";
 import WorkspaceSide from "./components/Workspace/WorkspaceSide";
 import WorkspaceHeader from "./components/Workspace/WorkspaceHeader";
-import Icon from "./components/Icon/Icon";
 import IconButton from "./components/Icon/IconButton";
 import Label from "./components/Label/Label";
 import Button from "./components/Button/Button";
@@ -81,22 +76,22 @@ import Link from "./components/Link/Link";
 import Spinner from "./components/Spinner/Spinner";
 import InteractionGate from "./components/InteractionGate/InteractionGate";
 import { PropertyName, PropertyValue, PropertyValuePair, PropertyValueList } from "./components/PropertyValuePair";
-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";
+import * as TypographyClassNames from "./components/Typography/classnames";
 declare const HelperClasses: {
     Typography: typeof TypographyClassNames;
     Intent: {
-        [x: string]: string;
+        [key: string]: string;
     };
 };
 declare const Utilities: {
     openInNewTab: (event: import("react").MouseEvent<HTMLElement, MouseEvent>, handler?: ((e: import("react").MouseEvent<HTMLElement, MouseEvent>) => void) | undefined, url?: string | undefined) => void;
     decideContrastColorValue: ({ testColor, lightColor, darkColor }: import("./common/utils/colorDecideContrastvalue").decideContrastColorValueProps) => string;
 };
-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, TabPanel, TextField, TextArea, SearchField, Switch, NumericInput, FieldItem, FieldItemRow, FieldSet, BreadcrumbList, BreadcrumbItem, Modal, SimpleDialog, AlertDialog, Card, CardHeader, CardTitle, CardOptions, CardContent, CardActions, CardActionsAux, HoverToggler, Spacing, Divider, Tooltip, Section, SectionHeader, TitlePage, TitleMainsection, TitleSubsection, Accordion, AccordionItem, Toolbar, ToolbarSection, Tag, TagList, Pagination, Notification, Link, Spinner, InteractionGate, PropertyName, PropertyValue, PropertyValuePair, PropertyValueList, Toast, HelperClasses, Select, MultiSelect, AutoCompleteField, ProgressBar, Iframe, IframeModal, Utilities, LegacyReplacements, };
-export * from "./components/Tree/Tree";
-export * from "./cmem";
-export * from "./extensions";
+export { ApplicationContainer, ApplicationHeader, ApplicationContent, ApplicationSidebarNavigation, ApplicationSidebarToggler, ApplicationTitle, ApplicationToolbar, ApplicationToolbarSection, ApplicationToolbarAction, ApplicationToolbarPanel, AutoSuggestion, AutoSuggestionList, SingleLineCodeEditor, 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, IconButton, Label, Button, Checkbox, RadioButton, Tabs, Tab, TabTitle, TabPanel, TextField, TextArea, SearchField, Switch, NumericInput, FieldItem, FieldItemRow, FieldSet, BreadcrumbList, BreadcrumbItem, Modal, SimpleDialog, AlertDialog, Card, CardHeader, CardTitle, CardOptions, CardContent, CardActions, CardActionsAux, HoverToggler, Spacing, Divider, Tooltip, Section, SectionHeader, TitlePage, TitleMainsection, TitleSubsection, Accordion, AccordionItem, Toolbar, ToolbarSection, Tag, TagList, Pagination, Notification, Link, Spinner, InteractionGate, PropertyName, PropertyValue, PropertyValuePair, PropertyValueList, Toast, HelperClasses, Select, MultiSelect, AutoCompleteField, ProgressBar, Iframe, IframeModal, Utilities, LegacyReplacements, };
+export * from "./components";
 export * from "./components/interfaces";
+export * from "./extensions";
+export * from "./cmem";

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.0.0",
+  "version": "23.1.0-easynav.1",
   "license": "Apache-2.0",
   "homepage": "https://github.com/eccenca/gui-elements",
   "bugs": "https://github.com/eccenca/gui-elements/issues",
@@ -53,7 +53,7 @@
     "build:all": "yarn build:clean && yarn build:esm && yarn build:cjs",
     "compile": "tsc --build tsconfig.json",
     "compile-scss": "ts-node -O \"{ \\\"esModuleInterop\\\": true, \\\"module\\\": \\\"commonjs\\\"}\" ./scripts/compile-sass.ts",
-    "storybook": "start-storybook -p 6006",
+    "storybook": "start-storybook -p 6006 --no-open",
     "build-storybook": "build-storybook",
     "test": "jest",
     "test:ci": "jest --ci --reporters='default'",
@@ -66,12 +66,11 @@
     "@blueprintjs/core": "^4.9.0",
     "@blueprintjs/popover2": "^1.6.0",
     "@blueprintjs/select": "^4.6.0",
-    "@carbon/icons": "10.44.0",
-    "@carbon/icons-react": "10.44.0",
+    "@carbon/icons": "^11.11.0",
+    "@carbon/icons-react": "^11.11.0",
+    "@carbon/styles": "^1.17.0",
     "@mavrin/remark-typograf": "^2.2.0",
-    "carbon-components": "10.44.0",
-    "carbon-components-react": "7.44.1",
-    "carbon-icons": "7.0.7",
+    "carbon-components-react": "^8.17.0",
     "codemirror": "^5.61.0",
     "color": "3.2.1",
     "lodash": "^4.17.21",
@@ -81,6 +80,8 @@
     "react-codemirror2": "^7.2.1",
     "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.1",
     "react-markdown": "^7.0.1",
     "rehype-raw": "^6.1.0",
     "remark-definition-list": "^1.1.0",
@@ -107,7 +108,7 @@
     "@storybook/react": "^6.5.10",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
-    "@types/carbon-components-react": "7.49.0",
+    "@types/carbon-components-react": "^7.55.2",
     "@types/codemirror": "^5.60.5",
     "@types/color": "^3.0.2",
     "@types/jest": "^24.9.1",
@@ -132,24 +133,21 @@
     "sass-loader": "^10.3.1",
     "ts-node": "^10.9.1",
     "tsc-esm-fix": "^2.13.0",
-    "typescript": "4.4.4"
+    "typescript": "4.4.4",
+    "yargs": "^17.6.2"
   },
   "peerDependencies": {
+    "@types/carbon-components-react": ">=7",
     "react": ">=16",
     "react-dom": ">=16"
   },
   "resolutions": {
-    "**/@carbon/icons": "10.44.0",
-    "**/@carbon/icons-react": "10.44.0",
-    "**/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.52",
     "**/node-gyp": "^7.0.0",
     "**/glob-parent": "^5.1.2",
     "**/trim": "^0.0.3",
     "**/trim-newlines": "^3.0.1",
-    "**/minimist": "^1.2.6",
+    "**/minimist": "^1.2.7",
     "**/postcss": "^7.0.36"
   },
   "eslintConfig": {

package/scripts/compile-sass.ts

@@ -1,9 +1,17 @@
 import * as sass from "sass";
 import tildeImporter from "node-sass-package-importer";
+import yargs from "yargs";
 import sassRenderSyncConfig from "./sassConfig";
 
-sass.renderSync({
+const args = yargs(process.argv.slice(2)).argv;
+
+const styles = sass.renderSync({
     importer: tildeImporter(),
     ...sassRenderSyncConfig,
     file: "src/index.scss",
+    includePaths: ["node_modules"], // Carbon does not use tilde import syntax
 });
+
+if (args.outputCss) {
+    console.log(styles.css.toString());
+}

package/src/_shame.scss

@@ -14,7 +14,7 @@ html {
 .#{$prefix}--assistive-text,
 .#{$prefix}--visually-hidden {
     /*
-        TODO: move to better place, originally from ~carbon-components/scss/globals/scss/css--helpers
+        TODO: move to better place, originally from ~@carbon/styles/scss/css--helpers
         but we cannot use it directly because of other included rules there.
     */
     position: absolute;

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

@@ -1,10 +1,9 @@
 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";
+
+import { Tag, TagList, ActivityControlWidget } from "../../../index";
+import { helpersArgTypes } from "../../../.storybook/helpers";
 
 export default {
     title: "Cmem/ActivityControlWidget",
@@ -28,6 +27,9 @@ export default {
                 type: { summary: "boolean" },
             },
         },
+        progressSpinnerFinishedIcon: {
+            ...helpersArgTypes.exampleIcon,
+        },
     },
 } as ComponentMeta<typeof ActivityControlWidget>;
 

package/src/cmem/ActivityControl/ActivityControlWidget.tsx

@@ -20,6 +20,7 @@ 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 IActivityControlProps extends TestableComponent {
     /**
@@ -74,7 +75,7 @@ export interface IActivityControlProps extends TestableComponent {
     /**
      * if this is set the spinner is replaced when the progress has finished from 0 - 1
      */
-    progressSpinnerFinishedIcon?: React.ReactElement<IconProps>;
+    progressSpinnerFinishedIcon?: React.ReactElement<IconProps> | React.ReactElement<TestIconProps>;
 }
 
 interface IActivityContextMenu extends TestableComponent {
@@ -124,7 +125,7 @@ export function ActivityControlWidget(props: IActivityControlProps) {
             {(progressSpinner || progressSpinnerFinishedIcon) && (
                 <OverviewItemDepiction keepColors>
                     {progressSpinnerFinishedIcon ? (
-                        React.cloneElement(progressSpinnerFinishedIcon, { small, large: !small })
+                        React.cloneElement(progressSpinnerFinishedIcon as JSX.Element, { small, large: !small })
                     ) : (
                         <Spinner
                             position="inline"