@eccenca/gui-elements 23.0.0 → 23.1.0-rc.2

package/dist/types/components/Icon/TestIcon.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { BaseIconProps } from "./BaseIcon";
+import { CarbonIconType } from "./canonicalIconNames";
+export interface TestIconProps extends Omit<BaseIconProps, "iconComponent"> {
+    /**
+     * Carbon icon that is used instead of the via `name` defined canonical named icon.
+     */
+    tryout: CarbonIconType;
+}
+/**
+ * This component is primarily provided to test icons in a third application without defining them via a canonical name before.
+ *
+ * Example usage:
+ * ```
+ * import { LogoReact } from "@carbon/icons-react";
+ * const testIcon = <TestIcon tryout={LogoReact} />
+ * ```
+ */
+declare function TestIcon({ className, tryout, ...otherBaseIconProps }: TestIconProps): JSX.Element;
+export default TestIcon;

package/dist/types/components/Icon/canonicalIconNames.d.ts

@@ -1,10 +1,12 @@
 /// <reference types="react" />
+import { IconProps as CarbonIconProps } from "carbon-components-react";
 /** Valid icon names. */
-export declare type ValidIconName = "application-activities" | "application-dataintegration" | "application-explore" | "application-homepage" | "application-legacygui" | "application-mapping" | "application-queries" | "application-useraccount" | "application-vocabularies" | "application-warning" | "artefact-commit" | "artefact-customtask" | "artefact-dataset" | "artefact-dataset-csv" | "artefact-dataset-eccencadataplatform" | "artefact-dataset-excel" | "artefact-dataset-file" | "artefact-dataset-jdbc" | "artefact-dataset-json" | "artefact-dataset-multicsv" | "artefact-dataset-neo4j" | "artefact-dataset-sparkview" | "artefact-dataset-sparqlendpoint" | "artefact-dataset-sqlendpoint" | "artefact-dataset-xml" | "artefact-deprecated" | "artefact-embedded" | "artefact-errorlog" | "artefact-file" | "artefact-linking" | "artefact-project" | "artefact-rawdata" | "artefact-remote" | "artefact-report" | "artefact-task" | "artefact-transform" | "artefact-uncategorized" | "artefact-workflow" | "data-sourcepath" | "data-targetpath" | "item-add-artefact" | "item-clone" | "item-comment" | "item-copy" | "item-download" | "item-draggable" | "item-edit" | "item-evaluation" | "item-execution" | "item-info" | "item-launch" | "item-moremenu" | "item-question" | "item-reload" | "item-remove" | "item-reset" | "item-save" | "item-settings" | "item-shuffle" | "item-start" | "item-stop" | "item-upload" | "item-vertmenu" | "item-viewdetails" | "list-sort" | "list-sortasc" | "list-sortdesc" | "module-accesscontrol" | "module-annotation" | "module-dashboard" | "module-gdprsearch" | "module-integrations" | "module-linkedrules" | "module-reports" | "module-search" | "module-thesauri" | "module-timetracker" | "module-visualization" | "navigation-back" | "navigation-close" | "navigation-first" | "navigation-forth" | "navigation-jump" | "navigation-last" | "navigation-next" | "navigation-previous" | "operation-aggregation" | "operation-autolayout" | "operation-clear" | "operation-commit" | "operation-comparison" | "operation-filter" | "operation-filteredit" | "operation-link" | "operation-logout" | "operation-redo" | "operation-search" | "operation-sharelink" | "operation-transform" | "operation-undo" | "operation-unlink" | "state-checked" | "state-checkedsimple" | "state-confirmed" | "state-danger" | "state-declined" | "state-info" | "state-partlychecked" | "state-protected" | "state-success" | "state-unchecked" | "state-warning" | "toggler-caret" | "toggler-maximize" | "toggler-minimize" | "toggler-moveleft" | "toggler-moveright" | "toggler-showless" | "toggler-showmore" | "toggler-star-empty" | "toggler-star-filled" | "toggler-tree" | "undefined" | "Undefined";
-export interface IconSized {
-    small: (props: any) => JSX.Element | null;
-    normal: (props: any) => JSX.Element | null;
-    large: (props: any) => JSX.Element | null;
-}
-declare const canonicalIconNames: Record<ValidIconName, IconSized>;
+export declare type ValidIconName = "application-activities" | "application-dataintegration" | "application-explore" | "application-homepage" | "application-legacygui" | "application-mapping" | "application-queries" | "application-useraccount" | "application-vocabularies" | "application-warning" | "artefact-commit" | "artefact-customtask" | "artefact-dataset" | "artefact-dataset-csv" | "artefact-dataset-eccencadataplatform" | "artefact-dataset-excel" | "artefact-dataset-file" | "artefact-dataset-jdbc" | "artefact-dataset-json" | "artefact-dataset-multicsv" | "artefact-dataset-neo4j" | "artefact-dataset-sparkview" | "artefact-dataset-sparqlendpoint" | "artefact-dataset-sqlendpoint" | "artefact-dataset-xml" | "artefact-deprecated" | "artefact-embedded" | "artefact-errorlog" | "artefact-file" | "artefact-linking" | "artefact-project" | "artefact-rawdata" | "artefact-remote" | "artefact-report" | "artefact-task" | "artefact-transform" | "artefact-uncategorized" | "artefact-workflow" | "data-sourcepath" | "data-targetpath" | "item-add-artefact" | "item-clone" | "item-comment" | "item-copy" | "item-download" | "item-draggable" | "item-edit" | "item-evaluation" | "item-execution" | "item-info" | "item-launch" | "item-moremenu" | "item-question" | "item-reload" | "item-remove" | "item-reset" | "item-save" | "item-settings" | "item-shuffle" | "item-start" | "item-stop" | "item-upload" | "item-vertmenu" | "item-viewdetails" | "list-sort" | "list-sortasc" | "list-sortdesc" | "module-accesscontrol" | "module-annotation" | "module-dashboard" | "module-gdprsearch" | "module-integrations" | "module-linkedrules" | "module-reports" | "module-search" | "module-thesauri" | "module-timetracker" | "module-visualization" | "navigation-back" | "navigation-close" | "navigation-first" | "navigation-forth" | "navigation-jump" | "navigation-last" | "navigation-next" | "navigation-previous" | "operation-aggregation" | "operation-autolayout" | "operation-clear" | "operation-commit" | "operation-comparison" | "operation-filter" | "operation-filteredit" | "operation-link" | "operation-logout" | "operation-redo" | "operation-search" | "operation-sharelink" | "operation-transform" | "operation-undo" | "operation-unlink" | "state-checked" | "state-checkedsimple" | "state-confirmed" | "state-danger" | "state-declined" | "state-info" | "state-partlychecked" | "state-protected" | "state-success" | "state-unchecked" | "state-warning" | "toggler-caret" | "toggler-maximize" | "toggler-minimize" | "toggler-moveleft" | "toggler-moveright" | "toggler-showless" | "toggler-showmore" | "toggler-star-empty" | "toggler-star-filled" | "toggler-tree" | "undefined";
+export declare type CarbonIconType = React.ComponentType<CarbonIconProps>;
+/**
+ * @deprecated
+ * use CarbonIconType instead
+ */
+export declare type IconSized = CarbonIconType;
+declare const canonicalIconNames: Record<ValidIconName, CarbonIconType>;
 export default canonicalIconNames;

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

@@ -0,0 +1,4 @@
+import Icon, { IconProps } from "./Icon";
+import TestIcon, { TestIconProps } from "./TestIcon";
+export { Icon, TestIcon };
+export type { IconProps, TestIconProps };

package/dist/types/components/Menu/MenuItem.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
 import { MenuItemProps as BlueprintMenuItemProps } from "@blueprintjs/core";
+import { TestIconProps } from "./../Icon/TestIcon";
 import { ValidIconName } from "../Icon/canonicalIconNames";
 export interface MenuItemProps extends Omit<BlueprintMenuItemProps, "icon" | "children">, Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "onClick" | "target" | "children"> {
-    icon?: ValidIconName | string[];
+    icon?: ValidIconName | string[] | React.ReactElement<TestIconProps>;
     children?: React.ReactNode;
 }
 /**

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

@@ -82,8 +82,10 @@ interface IProps<T> extends Pick<BlueprintMultiSelectProps<T>, "items" | "placeh
      * Disables the input element
      */
     disabled?: boolean;
+    /** Delay in ms how long the request for the given query should be delayed. */
+    requestDelay?: number;
 }
-declare function MultiSelect<T>({ items, prePopulateWithItems, itemId, itemLabel, onSelection, contextOverlayProps, tagInputProps, inputProps, runOnQueryChange, fullWidth, noResultText, newItemCreationText, newItemPostfix, hasStatePrimary, hasStateDanger, hasStateSuccess, hasStateWarning, disabled, createNewItemFromQuery, ...otherProps }: IProps<T>): JSX.Element;
+declare function MultiSelect<T>({ items, prePopulateWithItems, itemId, itemLabel, onSelection, contextOverlayProps, tagInputProps, inputProps, runOnQueryChange, fullWidth, noResultText, newItemCreationText, newItemPostfix, hasStatePrimary, hasStateDanger, hasStateSuccess, hasStateWarning, disabled, createNewItemFromQuery, requestDelay, ...otherProps }: IProps<T>): JSX.Element;
 declare namespace MultiSelect {
     var ofType: typeof BlueprintMultiSelect.ofType;
 }

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

@@ -1,5 +1,7 @@
 import React from "react";
 import { ToastProps as BlueprintToastProps } from "@blueprintjs/core";
+import { IconProps } from "./../Icon/Icon";
+import { TestIconProps } from "./../Icon/TestIcon";
 import { ValidIconName } from "./../Icon/canonicalIconNames";
 export interface NotificationProps extends Omit<BlueprintToastProps, "message" | "action" | "icon" | "intent">, React.HTMLAttributes<HTMLDivElement> {
     /**
@@ -30,19 +32,25 @@ export interface NotificationProps extends Omit<BlueprintToastProps, "message" |
      */
     danger?: boolean;
     /**
+     * @deprecated
      * Notification uses the the given space more flexible.
-     * Depracation notice: Property name will removed in futire versions.
+     * Deprecation notice: Property name will removed in future versions.
      * Please use `flexWidth`.
-     * @depracted
      */
     fullWidth?: boolean;
     /**
      * Notification uses the the given space more flexible.
-     * Default notifcation is displayed in min and max limits.
+     * Default notification is displayed in min and max limits.
      * Those limits are removed by setting this property to `true`.
      */
     flexWidth?: boolean;
     /**
+     * Icon displayed with the notification.
+     * Set it to false if you need to prevent automatically set icon regarding the notification type.
+     */
+    icon?: false | React.ReactElement<IconProps> | React.ReactElement<TestIconProps>;
+    /**
+     * @deprecated
      * Icon used as depiction that is displayed with the notification.
      */
     iconName?: ValidIconName | null;
@@ -52,5 +60,6 @@ export interface NotificationProps extends Omit<BlueprintToastProps, "message" |
  * By default it uses colorization of an blueish info alert.
  */
 declare function Notification({ actions, children, className, message, success, warning, danger, neutral, fullWidth, // deprecated
-flexWidth, iconName, timeout, ...otherProps }: NotificationProps): JSX.Element;
+flexWidth, iconName, // deprecated
+icon, timeout, ...otherProps }: NotificationProps): JSX.Element;
 export default Notification;

package/dist/types/components/Tabs/Tab.d.ts

@@ -40,6 +40,7 @@ export declare const transformTabProperties: ({ title, dontShrink, className, ba
     hidden?: boolean | undefined;
     id: import("@blueprintjs/core").TabId;
     lang?: string | undefined;
+    nonce?: string | undefined;
     placeholder?: string | undefined;
     slot?: string | undefined;
     spellCheck?: (boolean | "true" | "false") | undefined;
@@ -300,6 +301,7 @@ export declare const transformTabProperties: ({ title, dontShrink, className, ba
     hidden?: boolean | undefined;
     id: import("@blueprintjs/core").TabId;
     lang?: string | undefined;
+    nonce?: string | undefined;
     placeholder?: string | undefined;
     slot?: string | undefined;
     spellCheck?: (boolean | "true" | "false") | undefined;

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

@@ -1,7 +1,11 @@
-/// <reference types="react" />
+import React from 'react';
 import { TagProps as BlueprintTagProps } from "@blueprintjs/core";
 import Color from "color";
-interface TagProps extends Omit<BlueprintTagProps, "active" | "fill" | "large" | "multiline" | "intent" | "rightIcon"> {
+import { IconProps } from "../Icon/Icon";
+import { TestIconProps } from "../Icon/TestIcon";
+import { ValidIconName } from "../Icon/canonicalIconNames";
+import { IntentTypes } from "../../common/Intent";
+export interface TagProps extends Omit<BlueprintTagProps, "active" | "fill" | "icon" | "intent" | "large" | "multiline" | "rightIcon"> {
     /**
      * Sets the background color of a tag, depends on the `Color` object provided by the
      * [npm color module](https://www.npmjs.com/package/color) v3. You can use it with
@@ -23,9 +27,18 @@ interface TagProps extends Omit<BlueprintTagProps, "active" | "fill" | "large" |
      */
     large?: boolean;
     /**
+     * Meaning of the tag.
+     */
+    intent?: IntentTypes;
+    /**
+     * Icon displayed left from the tag label.
+     */
+    icon?: ValidIconName | React.ReactElement<IconProps> | React.ReactElement<TestIconProps>;
+    /**
+     * @deprecated
      * **deprecated**, use `minimal=false` plus `emphasis="stronger"`
      */
     emphasized?: never;
 }
-declare function Tag({ children, className, emphasis, minimal, small, large, backgroundColor, ...otherProps }: TagProps): JSX.Element;
+declare function Tag({ children, className, intent, icon, emphasis, minimal, small, large, backgroundColor, ...otherProps }: TagProps): JSX.Element;
 export default Tag;

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/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-rc.2",
   "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,7 @@
     "react-codemirror2": "^7.2.1",
     "react-dom": "^16.13.1",
     "react-flow-renderer": "9.7.4",
+    "react-inlinesvg": "^3.0.1",
     "react-markdown": "^7.0.1",
     "rehype-raw": "^6.1.0",
     "remark-definition-list": "^1.1.0",
@@ -107,7 +107,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 +132,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"