@eccenca/gui-elements 22.0.1 → 22.1.0

package/dist/types/cmem/ActivityControl/ActivityControlWidget.d.ts

@@ -1,17 +1,63 @@
-/// <reference types="react" />
+import React from "react";
 import { TestableComponent } from "../../components/interfaces";
 import { ProgressBarProps } from "../../components/ProgressBar/ProgressBar";
 import { SpinnerProps } from "../../components/Spinner/Spinner";
+import { ValidIconName } from "../../components/Icon/canonicalIconNames";
+import { IconProps } from "../../components/Icon/Icon";
 export interface IActivityControlProps extends TestableComponent {
+    /**
+     * The label to be shown
+     */
     label?: string | JSX.Element;
+    /**
+     * Element that wraps around the label.
+     * Default: `<OverflowText inline={true} />`
+     */
+    labelWrapper?: JSX.Element;
+    /**
+     * To add tags in addition to the widget status description
+     */
+    tags?: JSX.Element;
+    /**
+     * The progress bar parameters if it should be show by a progres bar
+     */
     progressBar?: ProgressBarProps;
+    /**
+     * The spinner parameters if it should be show by a spinner
+     */
     progressSpinner?: SpinnerProps;
+    /**
+     * Status message
+     */
     statusMessage?: string;
+    /**
+     * The action buttons
+     */
     activityActions?: IActivityAction[];
+    /**
+     * Context menu items
+     */
     activityContextMenu?: IActivityContextMenu;
+    /**
+     * show small version of the widget
+     */
     small?: boolean;
+    /**
+     * display widget inside rectangle
+     */
     border?: boolean;
+    /**
+     * display a bit whitespace around widget, even without border
+     */
+    hasSpacing?: boolean;
+    /**
+     * only use necessary width, not always the available 100% of parent element
+     */
     canShrink?: boolean;
+    /**
+     * if this is set the spinner is replaced when the progress has finished from 0 - 1
+     */
+    progressSpinnerFinishedIcon?: React.ReactElement<IconProps>;
 }
 interface IActivityContextMenu extends TestableComponent {
     tooltip?: string;
@@ -20,7 +66,7 @@ interface IActivityContextMenu extends TestableComponent {
 export interface IActivityAction extends TestableComponent {
     action: () => any;
     tooltip?: string;
-    icon: string;
+    icon: ValidIconName;
     disabled?: boolean;
     hasStateWarning?: boolean;
 }

package/dist/types/cmem/ActivityControl/SilkActivityControl.d.ts

@@ -1,9 +1,14 @@
 /// <reference types="react" />
 import { TestableComponent } from "../../components/interfaces";
-import { IActivityStatus } from "./ActivityControlTypes";
+import { ConcreteActivityStatus, IActivityStatus } from "./ActivityControlTypes";
+import { Intent } from "@blueprintjs/core/src/common/intent";
 import { TimeUnits } from "../DateTimeDisplay/ElapsedDateTimeDisplay";
 interface SilkActivityControlProps extends TestableComponent {
-    label: string;
+    label: string | JSX.Element;
+    /**
+     * To add tags in addition to the widget status description
+     */
+    tags?: JSX.Element;
     initialStatus?: IActivityStatus;
     registerForUpdates: (callback: (status: IActivityStatus) => any) => any;
     unregisterFromUpdates: () => any;
@@ -23,12 +28,16 @@ interface SilkActivityControlProps extends TestableComponent {
         translate: (unit: TimeUnits) => string;
     };
     layoutConfig?: IActivityControlLayoutProps;
+    /** Configures when the status message should be hidden, e.g. because it is uninteresting. */
+    hideMessageOnStatus?: (concreteStatus: ConcreteActivityStatus | undefined) => boolean;
 }
 export interface IActivityControlLayoutProps {
     small?: boolean;
     border?: boolean;
+    hasSpacing?: boolean;
     canShrink?: boolean;
     visualization?: "none" | "progressbar" | "spinner";
+    labelWrapper?: JSX.Element;
 }
 interface IErrorReportAction {
     title?: string;
@@ -58,5 +67,11 @@ interface IStacktrace {
 export declare type ActivityControlTranslationKeys = "startActivity" | "stopActivity" | "reloadActivity" | "showErrorReport";
 export declare type ActivityAction = "start" | "cancel" | "restart";
 /** Silk activity control. */
-export declare function SilkActivityControl({ label, initialStatus, registerForUpdates, executeActivityAction, showReloadAction, showStartAction, viewValueAction, showStopAction, failureReportAction, unregisterFromUpdates, translate, elapsedTimeOfLastStart, layoutConfig, ...props }: SilkActivityControlProps): JSX.Element;
+export declare function SilkActivityControl(props: SilkActivityControlProps): JSX.Element;
+export declare function useSilkActivityControl({ label, initialStatus, registerForUpdates, executeActivityAction, showReloadAction, showStartAction, viewValueAction, showStopAction, failureReportAction, unregisterFromUpdates, translate, elapsedTimeOfLastStart, tags, layoutConfig, hideMessageOnStatus, ...props }: SilkActivityControlProps): {
+    readonly elapsedDateTime: JSX.Element;
+    readonly intent: Intent;
+    readonly widget: JSX.Element;
+};
+export declare const calcIntent: (activityStatus: IActivityStatus) => Intent;
 export {};

package/dist/types/cmem/ActivityControl/index.d.ts

@@ -0,0 +1,3 @@
+export { ActivityControlWidget } from "./ActivityControlWidget";
+export { ActivityExecutionErrorReportModal } from "./ActivityExecutionErrorReportModal";
+export { SilkActivityControl, useSilkActivityControl } from "./SilkActivityControl";

package/dist/types/cmem/ContentBlobToggler/index.d.ts

@@ -0,0 +1,2 @@
+export { ContentBlobToggler } from "./ContentBlobToggler";
+export { StringPreviewContentBlobToggler } from "./StringPreviewContentBlobToggler";

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

@@ -1,10 +1,10 @@
-import { ActivityControlWidget } from "./ActivityControl/ActivityControlWidget";
-import { ActivityExecutionErrorReportModal } from "./ActivityControl/ActivityExecutionErrorReportModal";
-import { ActivityAction, SilkActivityControl, IActivityControlLayoutProps } from "./ActivityControl/SilkActivityControl";
+import { ActivityAction, IActivityControlLayoutProps } from "./ActivityControl/SilkActivityControl";
 import { IActivityStatus } from "./ActivityControl/ActivityControlTypes";
-import { ContentBlobToggler } from "./ContentBlobToggler/ContentBlobToggler";
-import { ElapsedDateTimeDisplay, TimeUnits } from "./DateTimeDisplay/ElapsedDateTimeDisplay";
-import { Markdown } from "./markdown/Markdown";
-import { StringPreviewContentBlobToggler, firstNonEmptyLine } from "./ContentBlobToggler/StringPreviewContentBlobToggler";
-export { ActivityControlWidget, ActivityExecutionErrorReportModal, ContentBlobToggler, Markdown, StringPreviewContentBlobToggler, SilkActivityControl, ElapsedDateTimeDisplay, firstNonEmptyLine, };
+import { TimeUnits } from "./DateTimeDisplay/ElapsedDateTimeDisplay";
+export { ActivityControlWidget, ActivityExecutionErrorReportModal, SilkActivityControl, useSilkActivityControl, } from "./ActivityControl";
+export { ContentBlobToggler, StringPreviewContentBlobToggler } from "./ContentBlobToggler";
+export { firstNonEmptyLine } from "./ContentBlobToggler/StringPreviewContentBlobToggler";
+export { ElapsedDateTimeDisplay } from "./DateTimeDisplay/ElapsedDateTimeDisplay";
+export { Markdown } from "./markdown/Markdown";
+export { ReactFlow } from "./react-flow/ReactFlow/ReactFlow";
 export type { IActivityStatus, ActivityAction, IActivityControlLayoutProps, TimeUnits, };

package/dist/types/cmem/react-flow/ReactFlow/ReactFlow.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { ReactFlowProps as ReactFlowOriginalProps } from "react-flow-renderer";
+interface ReactFlowProps extends ReactFlowOriginalProps {
+    /**
+     * Load `ReactFlow` component with pre-configured values for `nodeTypes` and `edgeTypes`
+     */
+    configuration?: "unspecified" | "graph" | "workflow" | "linking";
+}
+/**
+ * `ReactFlow` container extension that includes pre-configured nodes and edges for
+ * Corporate Memory tools.
+ */
+export declare const ReactFlow: React.ForwardRefExoticComponent<ReactFlowProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/types/cmem/react-flow/configuration/graph.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import colors from "./_colors-graph.module.scss";
+declare const edgeTypes: {
+    default: import("react").MemoExoticComponent<(edge: import("./../../../extensions/react-flow/edges/EdgeDefault").EdgeDefaultProps) => JSX.Element>;
+    implicit: import("react").MemoExoticComponent<(edge: import("./../../../extensions/react-flow/edges/EdgeDefault").EdgeDefaultProps) => JSX.Element>;
+    import: import("react").MemoExoticComponent<(edge: import("./../../../extensions/react-flow/edges/EdgeDefault").EdgeDefaultProps) => JSX.Element>;
+    subclass: import("react").MemoExoticComponent<(edge: import("./../../../extensions/react-flow/edges/EdgeDefault").EdgeDefaultProps) => JSX.Element>;
+    subproperty: import("react").MemoExoticComponent<(edge: import("./../../../extensions/react-flow/edges/EdgeDefault").EdgeDefaultProps) => JSX.Element>;
+    rdftype: import("react").MemoExoticComponent<(edge: import("./../../../extensions/react-flow/edges/EdgeDefault").EdgeDefaultProps) => JSX.Element>;
+    success: import("react").MemoExoticComponent<(edge: import("./../../../extensions/react-flow/edges/EdgeDefault").EdgeDefaultProps) => JSX.Element>;
+    warning: import("react").MemoExoticComponent<(edge: import("./../../../extensions/react-flow/edges/EdgeDefault").EdgeDefaultProps) => JSX.Element>;
+    danger: import("react").MemoExoticComponent<(edge: import("./../../../extensions/react-flow/edges/EdgeDefault").EdgeDefaultProps) => JSX.Element>;
+};
+declare const nodeTypes: {
+    default: import("react").MemoExoticComponent<(node: import("./../../../extensions/react-flow/nodes/NodeDefault").NodeProps<any, any>) => JSX.Element>;
+    graph: import("react").MemoExoticComponent<(node: import("./../../../extensions/react-flow/nodes/NodeDefault").NodeProps<any, any>) => JSX.Element>;
+    class: import("react").MemoExoticComponent<(node: import("./../../../extensions/react-flow/nodes/NodeDefault").NodeProps<any, any>) => JSX.Element>;
+    instance: import("react").MemoExoticComponent<(node: import("./../../../extensions/react-flow/nodes/NodeDefault").NodeProps<any, any>) => JSX.Element>;
+    property: import("react").MemoExoticComponent<(node: import("./../../../extensions/react-flow/nodes/NodeDefault").NodeProps<any, any>) => JSX.Element>;
+};
+export { edgeTypes, nodeTypes, colors, };

package/dist/types/cmem/react-flow/configuration/linking.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import colors from "./_colors-linking.module.scss";
+declare const edgeTypes: {
+    default: import("react").MemoExoticComponent<(edge: import("./../../../extensions/react-flow/edges/EdgeStep").EdgeStepProps) => JSX.Element>;
+    value: import("react").MemoExoticComponent<(edge: import("./../../../extensions/react-flow/edges/EdgeStep").EdgeStepProps) => JSX.Element>;
+    score: import("react").MemoExoticComponent<(edge: import("./../../../extensions/react-flow/edges/EdgeStep").EdgeStepProps) => JSX.Element>;
+    success: import("react").MemoExoticComponent<(edge: import("./../../../extensions/react-flow/edges/EdgeStep").EdgeStepProps) => JSX.Element>;
+    warning: import("react").MemoExoticComponent<(edge: import("./../../../extensions/react-flow/edges/EdgeStep").EdgeStepProps) => JSX.Element>;
+    danger: import("react").MemoExoticComponent<(edge: import("./../../../extensions/react-flow/edges/EdgeStep").EdgeStepProps) => JSX.Element>;
+};
+declare const nodeTypes: {
+    default: import("react").MemoExoticComponent<(node: import("./../../../extensions/react-flow/nodes/NodeDefault").NodeProps<any, any>) => JSX.Element>;
+    sourcepath: import("react").MemoExoticComponent<(node: import("./../../../extensions/react-flow/nodes/NodeDefault").NodeProps<any, any>) => JSX.Element>;
+    targetpath: import("react").MemoExoticComponent<(node: import("./../../../extensions/react-flow/nodes/NodeDefault").NodeProps<any, any>) => JSX.Element>;
+    transformation: import("react").MemoExoticComponent<(node: import("./../../../extensions/react-flow/nodes/NodeDefault").NodeProps<any, any>) => JSX.Element>;
+    comparator: import("react").MemoExoticComponent<(node: import("./../../../extensions/react-flow/nodes/NodeDefault").NodeProps<any, any>) => JSX.Element>;
+    aggregator: import("react").MemoExoticComponent<(node: import("./../../../extensions/react-flow/nodes/NodeDefault").NodeProps<any, any>) => JSX.Element>;
+};
+export { edgeTypes, nodeTypes, colors, };

package/dist/types/cmem/react-flow/configuration/unspecified.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const edgeTypes: {
+    default: import("react").MemoExoticComponent<(edge: import("./../../../extensions/react-flow/edges/EdgeDefault").EdgeDefaultProps) => JSX.Element>;
+    straight: import("react").MemoExoticComponent<(edge: import("./../../../extensions/react-flow/edges/EdgeDefault").EdgeDefaultProps) => JSX.Element>;
+    step: import("react").MemoExoticComponent<(edge: import("./../../../extensions/react-flow/edges/EdgeStep").EdgeStepProps) => JSX.Element>;
+};
+export declare const nodeTypes: {
+    default: import("react").MemoExoticComponent<(node: import("./../../../extensions/react-flow/nodes/NodeDefault").NodeProps<any, any>) => JSX.Element>;
+};

package/dist/types/cmem/react-flow/configuration/workflow.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import colors from "./_colors-workflow.module.scss";
+declare const edgeTypes: {
+    default: import("react").MemoExoticComponent<(edge: import("./../../../extensions/react-flow/edges/EdgeStep").EdgeStepProps) => JSX.Element>;
+    success: import("react").MemoExoticComponent<(edge: import("./../../../extensions/react-flow/edges/EdgeStep").EdgeStepProps) => JSX.Element>;
+    warning: import("react").MemoExoticComponent<(edge: import("./../../../extensions/react-flow/edges/EdgeStep").EdgeStepProps) => JSX.Element>;
+    danger: import("react").MemoExoticComponent<(edge: import("./../../../extensions/react-flow/edges/EdgeStep").EdgeStepProps) => JSX.Element>;
+};
+declare const nodeTypes: {
+    default: import("react").MemoExoticComponent<(node: import("./../../../extensions/react-flow/nodes/NodeDefault").NodeProps<any, any>) => JSX.Element>;
+    dataset: import("react").MemoExoticComponent<(node: import("./../../../extensions/react-flow/nodes/NodeDefault").NodeProps<any, any>) => JSX.Element>;
+    linking: import("react").MemoExoticComponent<(node: import("./../../../extensions/react-flow/nodes/NodeDefault").NodeProps<any, any>) => JSX.Element>;
+    transform: import("react").MemoExoticComponent<(node: import("./../../../extensions/react-flow/nodes/NodeDefault").NodeProps<any, any>) => JSX.Element>;
+    task: import("react").MemoExoticComponent<(node: import("./../../../extensions/react-flow/nodes/NodeDefault").NodeProps<any, any>) => JSX.Element>;
+    workflow: import("react").MemoExoticComponent<(node: import("./../../../extensions/react-flow/nodes/NodeDefault").NodeProps<any, any>) => JSX.Element>;
+};
+export { edgeTypes, nodeTypes, colors, };

package/dist/types/common/utils/stringUtils.d.ts

@@ -0,0 +1,2 @@
+/** Removes leading and trailing spaces. In addition converts multiple subsequent spaces to a single space. */
+export declare const removeExtraSpaces: (text: string) => string;

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

@@ -0,0 +1,67 @@
+/// <reference types="react" />
+export declare enum OVERWRITTEN_KEYS {
+    ArrowUp = "ArrowUp",
+    ArrowDown = "ArrowDown",
+    Enter = "Enter",
+    Tab = "Tab"
+}
+export declare type OverwrittenKeyTypes = typeof OVERWRITTEN_KEYS[keyof typeof OVERWRITTEN_KEYS];
+/** A single suggestion. */
+export interface ISuggestionBase {
+    value: string;
+    label?: string;
+    description?: string;
+}
+/** Same as ISuggestionBase, but with the query that was used to fetch this suggestion. */
+export interface ISuggestionWithReplacementInfo extends ISuggestionBase {
+    query: string;
+    from: number;
+    length: number;
+}
+/** The suggestions for a specific substring of the given input string. */
+export interface IReplacementResult {
+    replacementInterval: {
+        from: number;
+        length: number;
+    };
+    extractedQuery: string;
+    replacements: ISuggestionBase[];
+}
+export interface IPartialAutoCompleteResult {
+    inputString: string;
+    cursorPosition: number;
+    replacementResults: IReplacementResult[];
+}
+/** Validation result */
+export interface IValidationResult {
+    valid: boolean;
+    parseError?: {
+        message: string;
+        start: number;
+        end: number;
+    };
+}
+export interface IProps {
+    label?: string;
+    initialValue: string;
+    onChange: (currentValue: string) => any;
+    fetchSuggestions: (inputString: string, cursorPosition: number) => (IPartialAutoCompleteResult | undefined) | Promise<IPartialAutoCompleteResult | undefined>;
+    checkInput?: (inputString: string) => IValidationResult | Promise<IValidationResult | undefined>;
+    onInputChecked?: (validInput: boolean) => any;
+    validationErrorText?: string;
+    clearIconText?: string;
+    onFocusChange?: (hasFocus: boolean) => any;
+    id?: string;
+    useTabForCompletions?: boolean;
+    /** An additional element that is put to the left side of the input field */
+    leftElement?: JSX.Element | null;
+    rightElement?: JSX.Element | null;
+    /** Placeholder tobe shown when no text has been entered, yet. */
+    placeholder?: string;
+    /** If the horizontal scrollbars should be shown. */
+    showScrollBar?: boolean;
+}
+/** Input component that allows partial, fine-grained auto-completion, i.e. of sub-strings of the input string.
+ * This is comparable to a one line code editor. */
+declare const AutoSuggestion: ({ label, initialValue, onChange, fetchSuggestions, checkInput, validationErrorText, clearIconText, onFocusChange, id, onInputChecked, leftElement, rightElement, useTabForCompletions, placeholder, showScrollBar }: IProps) => JSX.Element;
+export default AutoSuggestion;

package/dist/types/components/AutoSuggestion/AutoSuggestionList.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { ISuggestionWithReplacementInfo } from "./AutoSuggestion";
+export interface IDropdownProps {
+    options: Array<ISuggestionWithReplacementInfo>;
+    onItemSelectionChange: (item: ISuggestionWithReplacementInfo) => any;
+    isOpen: boolean;
+    loading?: boolean;
+    left?: number;
+    currentlyFocusedIndex: number;
+    itemToHighlight: (item: ISuggestionWithReplacementInfo | undefined) => any;
+}
+/** A drop-down-like list that can be used in combination with other components to show and select items. */
+export declare const AutoSuggestionList: ({ isOpen, options, loading, onItemSelectionChange, left, currentlyFocusedIndex, itemToHighlight, }: IDropdownProps) => JSX.Element | null;

package/dist/types/components/AutoSuggestion/SingleLineCodeEditor.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+import "codemirror/addon/display/placeholder.js";
+import "codemirror/mode/sparql/sparql.js";
+import { Editor as CodeMirrorEditor } from "codemirror";
+export interface IEditorProps {
+    setEditorInstance: (editor: CodeMirrorEditor) => any;
+    onChange: (value: string) => any;
+    onCursorChange: (pos: any, coords: any) => any;
+    mode?: string;
+    initialValue: string;
+    onFocusChange: (focused: boolean) => any;
+    onKeyDown: (event: KeyboardEvent) => any;
+    onSelection: (ranges: IRange[]) => any;
+    enableTab?: boolean;
+    /** Placeholder tobe shown when no text has been entered, yet. */
+    placeholder?: string;
+    showScrollBar?: boolean;
+}
+export interface IRange {
+    from: number;
+    to: number;
+}
+/** A single-line code editor. */
+declare const SingleLineCodeEditor: ({ setEditorInstance, onChange, onCursorChange, mode, initialValue, onFocusChange, onKeyDown, onSelection, enableTab, placeholder, showScrollBar }: IEditorProps) => JSX.Element;
+export default SingleLineCodeEditor;

package/dist/types/components/AutocompleteField/AutoCompleteField.d.ts

@@ -11,10 +11,9 @@ export interface IRenderModifiers {
 /**
  * Parameters for the auto-complete field parameterized by T and U.
  * @param T is the input data structure/type of the items that can be selected.
- * @param U is the output data structure/type that is output on changes of the selected item, i.e. it may get converted first
- *          before onChange is called.
+ * @param UPDATE_VALUE The value type that will be pushed into the onChange callback.
  */
-export interface IAutoCompleteFieldProps<T extends any, U extends any> {
+export interface IAutoCompleteFieldProps<T extends any, UPDATE_VALUE extends any> {
     /**
      * Fired when text is typed into the input field. Returns a list of items of type T.
      */
@@ -24,7 +23,7 @@ export interface IAutoCompleteFieldProps<T extends any, U extends any> {
      * @param value The value that has been converted with itemValueSelector.
      * @param e     The event
      */
-    onChange?(value: U, e?: React.SyntheticEvent<HTMLElement>): any;
+    onChange?(value: UPDATE_VALUE, e?: React.SyntheticEvent<HTMLElement>): any;
     /**
      * The initial value for the auto-complete input field
      */
@@ -47,7 +46,9 @@ export interface IAutoCompleteFieldProps<T extends any, U extends any> {
      * Selects the part from the auto-completion item that is called with the onChange callback.
      * @param item The selected item that should be converted to the value that onChange is called with.
      */
-    itemValueSelector(item: T): U;
+    itemValueSelector(item: T): UPDATE_VALUE;
+    /** The string representation of the actual value, i.e. without meta data etc. This will be used to compare if values are equal. */
+    itemValueString(item: T): string;
     /** The text that should be displayed when no search result has been found and no custom entry can be created. */
     noResultText: string;
     /**
@@ -68,7 +69,7 @@ export interface IAutoCompleteFieldProps<T extends any, U extends any> {
          *  shown if true is returned. */
         resettableValue(value: T): boolean;
         /** The value onChange is called with when a reset action is triggered. */
-        resetValue: U;
+        resetValue: UPDATE_VALUE;
         /** The reset button text that is shown on hovering over the reset icon. */
         resetButtonText: string;
     };
@@ -100,7 +101,7 @@ export interface IElementWidth {
     maxWidth: string;
 }
 /** Auto-complete input widget. */
-export declare function AutoCompleteField<T extends any, U extends any>(props: IAutoCompleteFieldProps<T, U>): JSX.Element;
+export declare function AutoCompleteField<T extends any, UPDATE_VALUE extends any>(props: IAutoCompleteFieldProps<T, UPDATE_VALUE>): JSX.Element;
 export declare namespace AutoCompleteField {
     var defaultProps: {
         autoFocus: boolean;

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

@@ -1,6 +1,7 @@
 import React from "react";
 import { ButtonProps as BlueprintButtonProps, AnchorButtonProps as BlueprintAnchorButtonProps } from "@blueprintjs/core";
 import { TooltipProps } from "./../Tooltip/Tooltip";
+import { ValidIconName } from "../Icon/canonicalIconNames";
 export declare type AnchorOrButtonProps = Omit<BlueprintButtonProps, "elementRef" | "icon" | "rightIcon"> | Omit<BlueprintAnchorButtonProps, "elementRef" | "icon" | "rightIcon">;
 export interface ButtonProps extends React.HTMLAttributes<HTMLElement> {
     /**
@@ -46,8 +47,8 @@ export interface ButtonProps extends React.HTMLAttributes<HTMLElement> {
     * If an URL is set then the button is included as HTML anchor element instead of a button form element.
     */
     href?: string;
-    icon?: string | JSX.Element;
-    rightIcon?: string | JSX.Element;
+    icon?: ValidIconName | JSX.Element;
+    rightIcon?: ValidIconName | JSX.Element;
     target?: string;
 }
 /**

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

@@ -2,22 +2,27 @@
 import { CardProps as BlueprintCardProps } from "@blueprintjs/core";
 export interface CardProps extends BlueprintCardProps {
     /**
-     * When set to `true` card is included as simple HTML `div` element.
+     * `<Card />` element is included in DOM as simple `div` element.
      * By default it is a HTML `section`.
      */
     isOnlyLayout?: boolean;
     /**
-     * When set to true, will take the full height of container
+     * Take the full height of container to display the card.
      */
     fullHeight?: boolean;
     /**
-     * when set to true will invert the background color and slightly darken
+     * Background color is slightly altered to differ card display from other cards.
      */
     elevated?: boolean;
+    /**
+     * When card (or its children) get focus the card is scrolled into the viewport.
+     * Property value defined which part of the card is always scrolled in, this may important when the card is larger than the viewport.
+     */
+    scrollinOnFocus?: "start" | "center" | "end";
 }
 /**
  * Element to separate content sections from each other.
  * Cards can include other cards but should not.
  */
-declare function Card({ children, className, elevation, isOnlyLayout, fullHeight, elevated, interactive, ...otherProps }: CardProps): JSX.Element;
+declare function Card({ children, className, elevation, isOnlyLayout, fullHeight, elevated, scrollinOnFocus, interactive, ...otherProps }: CardProps): JSX.Element;
 export default Card;

package/dist/types/components/ContextOverlay/ContextMenu.d.ts

@@ -1,3 +1,8 @@
 /// <reference types="react" />
-declare function ContextMenu({ children, className, togglerElement, togglerText, togglerLarge, tooltipAsTitle, ...restProps }: any): JSX.Element;
+import { ValidIconName } from "../Icon/canonicalIconNames";
+interface ContextMenuProps {
+    togglerElement?: ValidIconName | JSX.Element;
+    [key: string]: any;
+}
+declare function ContextMenu({ children, className, togglerElement, togglerText, togglerLarge, tooltipAsTitle, ...restProps }: ContextMenuProps): JSX.Element;
 export default ContextMenu;

package/dist/types/components/Dialog/Modal.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
-import { OverlayProps } from "@blueprintjs/core";
-import { IOverlayState } from '@blueprintjs/core';
+import { OverlayProps, IOverlayState } from "@blueprintjs/core";
 export interface ModalProps extends OverlayProps, IOverlayState {
     children: React.ReactNode | React.ReactNode[];
     /**
@@ -15,11 +14,13 @@ export interface ModalProps extends OverlayProps, IOverlayState {
      * Prevents that a backdrop area is displayed behind the modal elements.
      */
     preventBackdrop?: boolean;
+    /** Optional props for the wrapper div element inside the modal overlay. */
+    wrapperDivProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
 }
 /**
  * Displays contents on top of other elements, used to create dialogs.
  * This element can be used to create own modal elements and edge cases for modal dialogs.
  * For most situations the usage of `SimpleDialog` and `AlertDialog` should be sufficent.
  */
-declare function Modal({ children, className, overlayClassName, size, canOutsideClickClose, canEscapeKeyClose, preventBackdrop, ...otherProps }: ModalProps): JSX.Element;
+declare function Modal({ children, className, overlayClassName, size, canOutsideClickClose, canEscapeKeyClose, preventBackdrop, wrapperDivProps, ...otherProps }: ModalProps): JSX.Element;
 export default Modal;

package/dist/types/components/Dialog/SimpleDialog.d.ts

@@ -32,6 +32,8 @@ export interface SimpleDialogProps extends ModalProps, TestableComponent {
      * Define purpose of the dialog, e.g. if it is a warning.
      */
     intent?: IntentTypes;
+    /** Optional props for the wrapper div element inside the modal. */
+    wrapperDivProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
 }
 /**
  * Simplifies the dialog display by providing a direct `Card` template for the `Modal` element.

package/dist/types/components/Form/FieldItemRow.d.ts

@@ -1,3 +1,4 @@
 /// <reference types="react" />
+/** Allows to layout field items horizontally. */
 declare function FieldItemRow({ children, className, ...otherProps }: any): JSX.Element;
 export default FieldItemRow;

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

@@ -3,7 +3,7 @@ import { IconProps as CarbonIconProps } from "carbon-components-react";
 import { IntentTypes } from "../../common/Intent";
 import { TooltipProps } from "./../Tooltip/Tooltip";
 import { ValidIconName } from "./canonicalIconNames";
-interface IconProps extends Omit<CarbonIconProps, "icon" | "description" | "name"> {
+export interface IconProps extends Omit<CarbonIconProps, "icon" | "description" | "name"> {
     className?: string;
     name: ValidIconName | string[];
     description?: string;
@@ -15,6 +15,6 @@ interface IconProps extends Omit<CarbonIconProps, "icon" | "description" | "name
     intent?: IntentTypes;
 }
 /** Returns the first icon name that exists or the fallback icon name. */
-export declare const findExistingIconName: (iconNames: string[], fallbackIconName?: string) => string;
+export declare const findExistingIconName: (iconNames: string[], fallbackIconName?: ValidIconName) => ValidIconName;
 declare function Icon({ className, name, large, small, tooltipText, tooltipOpenDelay, tooltipProperties, intent, ...restProps }: IconProps): JSX.Element;
 export default Icon;

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

@@ -2,7 +2,7 @@
 import { ButtonProps, AnchorOrButtonProps } from "../Button/Button";
 import { ValidIconName } from "./canonicalIconNames";
 interface IconButtonProps extends ButtonProps {
-    name: ValidIconName;
+    name: ValidIconName | string[];
     className?: string;
     text?: string;
     tooltipOpenDelay?: number;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 /** Valid icon names. */
-export declare type ValidIconName = string | "application-dataintegration" | "application-homepage" | "application-useraccount" | "application-warning" | "application-mapping" | "application-explore" | "application-vocabularies" | "application-queries" | "application-legacygui" | "application-activities" | "module-timetracker" | "module-accesscontrol" | "module-annotation" | "module-dashboard" | "module-search" | "module-visualization" | "module-reports" | "module-thesauri" | "module-linkedrules" | "module-integrations" | "module-gdprsearch" | "toggler-showmore" | "toggler-showless" | "toggler-moveright" | "toggler-moveleft" | "toggler-maximize" | "toggler-minimize" | "toggler-tree" | "navigation-back" | "navigation-forth" | "navigation-close" | "navigation-jump" | "navigation-last" | "navigation-previous" | "navigation-next" | "navigation-first" | "item-moremenu" | "item-vertmenu" | "item-viewdetails" | "item-clone" | "item-edit" | "item-evaluation" | "item-execution" | "item-info" | "item-remove" | "item-add-artefact" | "item-launch" | "item-download" | "item-question" | "item-copy" | "item-save" | "item-start" | "item-stop" | "item-reload" | "item-shuffle" | "item-draggable" | "operation-search" | "operation-clear" | "operation-undo" | "operation-redo" | "operation-logout" | "operation-filter" | "operation-filteredit" | "list-sort" | "list-sortasc" | "list-sortdesc" | "state-info" | "state-success" | "state-warning" | "state-danger" | "state-unchecked" | "state-checked" | "state-partlychecked" | "artefact-project" | "artefact-workflow" | "artefact-dataset" | "artefact-dataset-csv" | "artefact-dataset-multicsv" | "artefact-dataset-sparkview" | "artefact-dataset-sqlendpoint" | "artefact-dataset-jdbc" | "artefact-dataset-xml" | "artefact-dataset-json" | "artefact-dataset-excel" | "artefact-dataset-file" | "artefact-dataset-eccencadataplatform" | "artefact-dataset-sparqlendpoint" | "artefact-dataset-neo4j" | "artefact-transform" | "artefact-linking" | "artefact-task" | "artefact-customtask" | "artefact-file" | "artefact-embedded" | "artefact-remote" | "artefact-deprecated" | "artefact-uncategorized" | "artefact-rawdata" | "artefact-report" | "activity-error-report" | "select-caret" | "linked-item" | "operation-auto-graph-layout" | "unlinked-item" | "undefined" | "Undefined";
+export declare type ValidIconName = "application-dataintegration" | "application-homepage" | "application-useraccount" | "application-warning" | "application-mapping" | "application-explore" | "application-vocabularies" | "application-queries" | "application-legacygui" | "application-activities" | "module-timetracker" | "module-accesscontrol" | "module-annotation" | "module-dashboard" | "module-search" | "module-visualization" | "module-reports" | "module-thesauri" | "module-linkedrules" | "module-integrations" | "module-gdprsearch" | "toggler-showmore" | "toggler-showless" | "toggler-moveright" | "toggler-moveleft" | "toggler-maximize" | "toggler-minimize" | "toggler-tree" | "navigation-back" | "navigation-forth" | "navigation-close" | "navigation-jump" | "navigation-last" | "navigation-previous" | "navigation-next" | "navigation-first" | "item-moremenu" | "item-vertmenu" | "item-viewdetails" | "item-clone" | "item-edit" | "item-evaluation" | "item-execution" | "item-info" | "item-remove" | "item-add-artefact" | "item-launch" | "item-download" | "item-question" | "item-copy" | "item-save" | "item-start" | "item-stop" | "item-reload" | "item-shuffle" | "item-draggable" | "operation-search" | "operation-clear" | "operation-undo" | "operation-redo" | "operation-logout" | "operation-filter" | "operation-filteredit" | "operation-comparison" | "operation-transform" | "operation-aggregation" | "data-sourcepath" | "data-targetpath" | "list-sort" | "list-sortasc" | "list-sortdesc" | "state-info" | "state-success" | "state-warning" | "state-danger" | "state-unchecked" | "state-checked" | "state-partlychecked" | "artefact-project" | "artefact-workflow" | "artefact-dataset" | "artefact-dataset-csv" | "artefact-dataset-multicsv" | "artefact-dataset-sparkview" | "artefact-dataset-sqlendpoint" | "artefact-dataset-jdbc" | "artefact-dataset-xml" | "artefact-dataset-json" | "artefact-dataset-excel" | "artefact-dataset-file" | "artefact-dataset-eccencadataplatform" | "artefact-dataset-sparqlendpoint" | "artefact-dataset-neo4j" | "artefact-transform" | "artefact-linking" | "artefact-task" | "artefact-customtask" | "artefact-file" | "artefact-embedded" | "artefact-remote" | "artefact-deprecated" | "artefact-uncategorized" | "artefact-rawdata" | "artefact-report" | "activity-error-report" | "select-caret" | "linked-item" | "operation-auto-graph-layout" | "unlinked-item" | "write-protected" | "undefined" | "Undefined";
 export interface IconSized {
     small: (props: any) => JSX.Element | null;
     normal: (props: any) => JSX.Element | null;