@eccenca/gui-elements 23.0.0-rc.3 → 23.0.0-rc.5

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 /** Valid icon names. */
-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-comment" | "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" | "operation-commit" | "operation-sharelink" | "data-sourcepath" | "data-targetpath" | "list-sort" | "list-sortasc" | "list-sortdesc" | "state-info" | "state-success" | "state-warning" | "state-danger" | "state-unchecked" | "state-checked" | "state-checkedsimple" | "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 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-upload" | "item-question" | "item-comment" | "item-copy" | "item-save" | "item-start" | "item-stop" | "item-reload" | "item-reset" | "item-shuffle" | "item-draggable" | "item-settings" | "operation-search" | "operation-clear" | "operation-undo" | "operation-redo" | "operation-logout" | "operation-filter" | "operation-filteredit" | "operation-comparison" | "operation-transform" | "operation-aggregation" | "operation-commit" | "operation-sharelink" | "data-sourcepath" | "data-targetpath" | "list-sort" | "list-sortasc" | "list-sortdesc" | "state-info" | "state-success" | "state-warning" | "state-danger" | "state-unchecked" | "state-checked" | "state-checkedsimple" | "state-partlychecked" | "state-declined" | "state-confirmed" | "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" | "artefact-commit" | "activity-error-report" | "select-caret" | "linked-item" | "operation-auto-graph-layout" | "unlinked-item" | "write-protected" | "settings" | "favorite-empty" | "favorite-filled" | "undefined" | "Undefined";
 export interface IconSized {
     small: (props: any) => JSX.Element | null;
     normal: (props: any) => JSX.Element | null;

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

@@ -0,0 +1,28 @@
+import React from "react";
+import "wicg-inert";
+import { SpinnerProps } from "./../Spinner/Spinner";
+export interface InteractionGateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "inert"> {
+    /**
+     * Prevent interaction with sub elements and narrow them in their visibility.
+     */
+    inert?: boolean;
+    /**
+     * Displays a spinner centered over the sub element.
+     */
+    showSpinner?: boolean;
+    /**
+     * Configure the included `<Spinner />` element.
+     */
+    spinnerProps?: SpinnerProps;
+    /**
+     * Do not use own wrapper element to set the position of the spinner element, if used.
+     * Use the positioning of the parent container.
+     */
+    useParentPositioning?: boolean;
+}
+/**
+ * Wrap content that need to be blocked from user interactions
+ * It also has options to display a spinner as overlay.
+ */
+declare function InteractionGate({ children, className, inert, showSpinner, spinnerProps, useParentPositioning, ...otherProps }: InteractionGateProps): JSX.Element;
+export default InteractionGate;

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

@@ -45,7 +45,7 @@ export interface NotificationProps extends Omit<BlueprintToastProps, "message" |
     /**
      * Icon used as depiction that is displayed with the notification.
      */
-    iconName?: ValidIconName;
+    iconName?: ValidIconName | null;
 }
 /**
  * Displays a notification message, optionally combined with depiction and further action buttons.

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

@@ -1,5 +1,24 @@
 /// <reference types="react" />
-declare function Pagination({ className, hidePageSizeConfiguration, hideInfoText, hidePageSelect, hideNavigationArrows, ...otherProps }: any): JSX.Element;
+import { PaginationProps as CarbonPaginationProps } from "carbon-components-react";
+interface PaginationProps extends CarbonPaginationProps {
+    /**
+     Hide the select option to set how many items per page are displayed.
+     */
+    hidePageSizeConfiguration?: boolean;
+    /**
+     Hide info about the item numbers that are currently displayed.
+     */
+    hideInfoText?: boolean;
+    /**
+     Hide select box to switch between pages.
+     */
+    hidePageSelect?: boolean;
+    /**
+     Hide buttons to switch beteen nex/prev pages.
+     */
+    hideNavigationArrows?: boolean;
+}
+declare function Pagination({ className, hidePageSizeConfiguration, hideInfoText, hidePageSelect, hideNavigationArrows, ...otherProps }: PaginationProps): JSX.Element;
 interface IPaginationDetails {
     total: number;
     current: number;
@@ -9,9 +28,7 @@ interface IPaginationDetails {
 interface IPaginationOptions {
     initialPageSize?: number;
     pageSizes?: number[];
-    presentation?: {
-        hideInfoText?: boolean;
-    };
+    presentation?: Omit<PaginationProps, "onChange" | "totalItems" | "pageSizes" | "page" | "pageSize">;
 }
 export declare const usePagination: ({ pageSizes, presentation, initialPageSize, }: IPaginationOptions) => readonly [IPaginationDetails, JSX.Element, (total: number) => void];
 export default Pagination;

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

@@ -13,7 +13,13 @@ export interface SpinnerProps extends Partial<BlueprintOverlayProps & Omit<Bluep
     size?: SpinnerSize;
     stroke?: SpinnerStroke;
     delay?: number;
+    /**
+     * Includes a backdrop behind the spinner that narrows visibility of the area behind the spinner.
+     * This option only works with "local" spinners, for "inline" spinners there is no backdrop, "global" spinners always have backdrops.
+     * The backdrop and the spinner are located over the nearest parent element that is styled by `position: relative` or soe equivalent CSS rule.
+     */
+    showLocalBackdrop?: boolean;
 }
 declare function Spinner({ className, color, description, // currently unsupported (FIXME)
-position, size, stroke, delay, ...otherProps }: SpinnerProps): JSX.Element | null;
+position, size, stroke, showLocalBackdrop, delay, ...otherProps }: SpinnerProps): JSX.Element | null;
 export default Spinner;

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

@@ -1,4 +1,8 @@
 import React from 'react';
-declare function Switch({ className, ...otherProps }: any): JSX.Element;
+import { SwitchProps } from "@blueprintjs/core";
+interface Props extends Omit<SwitchProps, "onChange"> {
+    onChange?: (value: boolean) => any;
+}
+declare function Switch({ onChange, ...otherProps }: Props): JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof Switch>;
 export default _default;

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

@@ -0,0 +1,21 @@
+import React from "react";
+export interface TabPanelProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Addicional CSS class name.
+     */
+    className?: string;
+    /**
+     * `id` of the tab element that is connected to this panel content.
+     */
+    labelledBy?: string;
+    /**
+     * Tab panel is not displayed.
+     */
+    hidden?: boolean;
+}
+/**
+ * Element to display the content related to a tab.
+ * This could be used if `<Tabs />` is used in uncontrolled mode.
+ */
+declare function TabPanel({ children, className, labelledBy, hidden, ...otherDivProps }: TabPanelProps): JSX.Element;
+export default TabPanel;

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

@@ -1,5 +1,6 @@
 import React from "react";
 import { Tooltip2Props as BlueprintTooltipProps } from "@blueprintjs/popover2";
+import { MarkdownParserProps } from "./../../cmem/markdown/Markdown";
 export interface TooltipProps extends Omit<BlueprintTooltipProps, "position"> {
     /**
      * Add dotted underline as visual indication to the target that a tooltip is attached.
@@ -14,6 +15,16 @@ export interface TooltipProps extends Omit<BlueprintTooltipProps, "position"> {
      * The tolltip will be attached to this element when it is hovered.
      */
     children: React.ReactNode | React.ReactNode[];
+    /**
+     * A regular expression that when it matches against the tooltip text, enables the tooltip to be rendered as Markdown.
+     * This only works if the tooltip content is a string.
+     * Set to `false` to turn off Markdown rendering completely.
+     */
+    markdownEnabler?: false | string;
+    /**
+     * Set properties for the Markdown parser
+     */
+    markdownProps?: Omit<MarkdownParserProps, "children">;
 }
-declare function Tooltip({ children, content, className, size, addIndicator, ...otherProps }: TooltipProps): JSX.Element;
+declare function Tooltip({ children, content, className, size, addIndicator, markdownEnabler, markdownProps, ...otherProps }: TooltipProps): JSX.Element;
 export default Tooltip;

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

@@ -0,0 +1,43 @@
+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";
+export interface TreeNodeInfo<T = {}> extends Omit<BlueprintTreeNodeInfo<T>, "childNodes" | "icon"> {
+    /**
+     * Child tree nodes of this node.
+     */
+    childNodes?: Array<TreeNodeInfo<T>>;
+    /**
+     * `<Icon />` element to render next to the node's label.
+     */
+    icon?: React.ReactElement<IconProps>;
+}
+export interface TreeNodeProps<T = {}> extends TreeNodeInfo<T> {
+    children?: React.ReactNode;
+    contentRef?: (node: TreeNode<T>, element: HTMLDivElement | null) => void;
+    depth: number;
+    key?: string | number;
+    onClick?: (node: TreeNode<T>, e: React.MouseEvent<HTMLDivElement>) => void;
+    onCollapse?: (node: TreeNode<T>, e: React.MouseEvent<HTMLSpanElement>) => void;
+    onContextMenu?: (node: TreeNode<T>, e: React.MouseEvent<HTMLDivElement>) => void;
+    onDoubleClick?: (node: TreeNode<T>, e: React.MouseEvent<HTMLDivElement>) => void;
+    onExpand?: (node: TreeNode<T>, e: React.MouseEvent<HTMLSpanElement>) => void;
+    onMouseEnter?: (node: TreeNode<T>, e: React.MouseEvent<HTMLDivElement>) => void;
+    onMouseLeave?: (node: TreeNode<T>, e: React.MouseEvent<HTMLDivElement>) => void;
+    path: number[];
+}
+export declare class TreeNode<T = {}> extends BlueprintTreeNode<TreeNodeProps<T>> {
+}
+export declare class TreeNodeShadow<T = {}> extends React.Component<TreeNodeProps<T>> {
+}
+export interface TreeProps<T = {}> extends Omit<BlueprintTreeProps<T>, "contents"> {
+    /**
+     * Tree contents.
+     */
+    contents: ReadonlyArray<TreeNodeInfo<T>>;
+}
+/**
+ * Tree component to display a tree structure.
+ * Have a look to the underlaying [BlueprintJS Tree](https://blueprintjs.com/docs/#core/components/tree) component for examples how to use handlers.
+ * Use only our `<Icon />` elements in the tree nodes!
+ */
+export declare const Tree: typeof BlueprintTree;

package/dist/types/index.d.ts

@@ -19,6 +19,7 @@ import Highlighter from "./components/Typography/Highlighter";
 import Grid from "./components/Grid/Grid";
 import GridRow from "./components/Grid/GridRow";
 import GridColumn from "./components/Grid/GridColumn";
+import { HoverToggler } from "./components/HoverToggler/HoverToggler";
 import WorkspaceContent from "./components/Workspace/WorkspaceContent";
 import WorkspaceMain from "./components/Workspace/WorkspaceMain";
 import WorkspaceSide from "./components/Workspace/WorkspaceSide";
@@ -32,6 +33,7 @@ import RadioButton from "./components/RadioButton/RadioButton";
 import Tabs from "./components/Tabs/Tabs";
 import Tab from "./components/Tabs/Tab";
 import TabTitle from "./components/Tabs/TabTitle";
+import TabPanel from "./components/Tabs/TabPanel";
 import TextField from "./components/TextField/TextField";
 import TextArea from "./components/TextField/TextArea";
 import SearchField from "./components/TextField/SearchField";
@@ -77,6 +79,7 @@ import Accordion from "./components/Accordion/Accordion";
 import AccordionItem from "./components/Accordion/AccordionItem";
 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";
@@ -90,9 +93,10 @@ declare const HelperClasses: {
 };
 declare const Utilities: {
     openInNewTab: (event: import("react").MouseEvent<HTMLElement, MouseEvent>, handler?: ((e: import("react").MouseEvent<HTMLElement, MouseEvent>) => void) | undefined, url?: string | undefined) => void;
+    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, TextField, TextArea, SearchField, Switch, NumericInput, FieldItem, FieldItemRow, FieldSet, BreadcrumbList, BreadcrumbItem, Modal, SimpleDialog, AlertDialog, Card, CardHeader, CardTitle, CardOptions, CardContent, CardActions, CardActionsAux, Spacing, Divider, Tooltip, Section, SectionHeader, TitlePage, TitleMainsection, TitleSubsection, Accordion, AccordionItem, Toolbar, ToolbarSection, Tag, TagList, Pagination, Notification, Link, Spinner, PropertyName, PropertyValue, PropertyValuePair, PropertyValueList, Toast, HelperClasses, Select, // FIXME: CMEM-3742: include as own element
-MultiSelect, AutoCompleteField, ProgressBar, Iframe, IframeModal, Utilities, LegacyReplacements };
+export { 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 * from "./components/interfaces";

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-rc.3",
+  "version": "23.0.0-rc.5",
   "license": "Apache-2.0",
   "homepage": "https://github.com/eccenca/gui-elements",
   "bugs": "https://github.com/eccenca/gui-elements/issues",
@@ -87,7 +87,8 @@
     "remark-gfm": "^3.0.0",
     "remark-parse": "^10.0.0",
     "reset-css": "^5.0.1",
-    "unified": "^10.1.1"
+    "unified": "^10.1.1",
+    "wicg-inert": "^3.1.2"
   },
   "devDependencies": {
     "@babel/core": "7.9.0",

package/src/cmem/ActivityControl/ActivityControlTypes.ts

@@ -3,8 +3,10 @@ export interface IActivityStatus {
     project?: string;
     // Optional task ID
     task?: string;
-    // The activity name
+    // The activity ID
     activity: string;
+    // Human-readable activity label
+    activityLabel: string
     // If the activity is currently running
     isRunning: boolean;
     // If the activity has failed

package/src/cmem/ActivityControl/ActivityControlWidget.tsx

@@ -177,7 +177,8 @@ export function ActivityControlWidget(props: IActivityControlProps) {
                                 disabled={action.disabled}
                                 hasStateWarning={action.hasStateWarning}
                                 tooltipProps={{
-                                    hoverOpenDelay: 200
+                                    hoverOpenDelay: 200,
+                                    placement: "bottom"
                                 }}
                             />
                         );

package/src/cmem/markdown/Markdown.tsx

@@ -8,7 +8,7 @@ import React from "react";
 import { HtmlContentBlock } from "../../index";
 import { PluggableList } from "react-markdown/lib/react-markdown";
 
-interface MarkdownParserProps {
+export interface MarkdownParserProps {
     children: string;
     // allow HTML as partial content, otherwise escape HTML tags (pls use with caution)
     allowHtml?: boolean;

package/src/common/utils/colorDecideContrastvalue.ts

@@ -0,0 +1,28 @@
+import Color from "color";
+
+export type colorValue = Color | string;
+
+export interface decideContrastColorValueProps {
+    // The color that is used to test if it need a light or dark color as contrast value.
+    testColor: colorValue;
+    // the light color that can be used on a dark color
+    lightColor?: colorValue;
+    // the dark color that can be used on a light color
+    darkColor?: colorValue;
+}
+
+const decideContrastColorValue = ({
+    testColor,
+    lightColor = "#fff",
+    darkColor = "#000"
+}: decideContrastColorValueProps): string => {
+    let contrastColor = "";
+    try {
+        contrastColor = Color(testColor).isLight() ? Color(darkColor).rgb().toString() : Color(lightColor).rgb().toString();
+    } catch(ex) {
+        console.warn("Received invalid colors", {testColor, lightColor, darkColor});
+    }
+    return contrastColor;
+}
+
+export default decideContrastColorValue;

package/src/common/utils/getColorConfiguration.ts

@@ -4,17 +4,22 @@ import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 // Configurations can be found in `src/cmem/react-flow/configuration/_colors-*.scss`
 type colorconfigs = "react-flow-graph" | "react-flow-linking" | "react-flow-workflow" | "stickynotes";
 
+const colorConfigurationMemo = new Map<colorconfigs, any>()
+
 /**
  * Read and returns color values provided by CSS custom properties.
  * They are defined for special CSS classes.
  * Currently color configurations for the react flow editors are supported.
  **/
 const getColorConfiguration = (configId: colorconfigs) => {
-    return new CssCustomProperties({
-        selectorText: `.${eccgui}-configuration--colors__${configId}`,
-        removeDashPrefix: true,
-        returnObject: true,
-    }).customProperties();
+    if(!colorConfigurationMemo.has(configId)) {
+        colorConfigurationMemo.set(configId, new CssCustomProperties({
+            selectorText: `.${eccgui}-configuration--colors__${configId}`,
+            removeDashPrefix: true,
+            returnObject: true,
+        }).customProperties())
+    }
+    return colorConfigurationMemo.get(configId)!!;
 };
 
 export default getColorConfiguration;

package/src/components/AutoSuggestion/AutoSuggestion.scss

@@ -1,6 +1,4 @@
-//@import "~@eccenca/gui-elements/src/configuration.default";
-
-.ecc-auto-suggestion-box {
+.#{$eccgui}-autosuggestion {
     position: relative;
 
     &__dropdown {
@@ -8,7 +6,7 @@
         // TODO: Replace by variable
         background-color: #fff;
         position: absolute;
-        top: $eccgui-size-textfield-height-regular;
+        top: 0;
         z-index:2;
         display: flex;
         flex-flow: column wrap;
@@ -28,7 +26,7 @@
     }
 }
 
-.ecc-input-editor {
+.#{$eccgui}-singlelinecodeeditor {
     position: relative;
 
     .CodeMirror {
@@ -59,12 +57,20 @@
         line-height: calc(#{$eccgui-size-textfield-height-regular} - 4px - 6px);
     }
 
-    pre.CodeMirror-line {
-        font-family: $eccgui-font-family-monospace;
-        font-size: 0.9em;
+    pre.CodeMirror-line,
+    pre.CodeMirror-placeholder,
+    pre.CodeMirror-line-like {
+        font-family: $eccgui-font-family-default;
+        font-size: $eccgui-size-typo-base;
         padding: 3px 0;
         height: calc(#{$eccgui-size-textfield-height-regular} - 4px - 6px);
+        line-height: calc(#{$eccgui-size-textfield-height-regular} - 4px - 6px);
         box-sizing: content-box;
+        color: $input-color;
+    }
+
+    pre.CodeMirror-placeholder {
+        color: $input-placeholder-color;
     }
 
     .CodeMirror-cursor {
@@ -87,13 +93,13 @@
     }
 }
 
-.ecc-text-highlighting {
+.#{$eccgui}-autosuggestion__text--highlighted {
     display: inline-block;
     background-color: $eccgui-color-warning-background;
     color:$eccgui-color-warning-text;
 }
 
-.ecc-text-error-highlighting {
+.#{$eccgui}-autosuggestion__text--highlighted-error {
     background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJDw4cOCW1/KIAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAHElEQVQI12NggIL/DAz/GdA5/xkY/qPKMDAwAADLZwf5rvm+LQAAAABJRU5ErkJggg==");
     background-position: left bottom;
     background-repeat: repeat-x;

package/src/components/AutoSuggestion/AutoSuggestion.tsx

@@ -1,7 +1,8 @@
 import React, {useEffect, useMemo, useState} from "react";
 import CodeMirror from "codemirror";
-import {FieldItem, IconButton, Spinner, Toolbar, ToolbarSection} from "./../../";
+import {FieldItem, IconButton, Spinner, Toolbar, ToolbarSection, ContextOverlay} from "./../../";
 import {Classes as BlueprintClassNames} from "@blueprintjs/core";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 //custom components
 import SingleLineCodeEditor, {IRange} from "./SingleLineCodeEditor";
@@ -102,6 +103,12 @@ export interface IProps {
     placeholder?: string
     /** If the horizontal scrollbars should be shown. */
     showScrollBar?: boolean
+    /** Delay in ms before an auto-completion request should be send after nothing is typed in anymore.
+     * This should prevent the UI to send too many requests to the backend. */
+    autoCompletionRequestDelay?: number
+    /** Delay in ms before a validation request should be send after nothing is typed in anymore.
+     * This should prevent the UI to send too many requests to the backend. */
+    validationRequestDelay?: number
 }
 
 /** Input component that allows partial, fine-grained auto-completion, i.e. of sub-strings of the input string.
@@ -121,11 +128,13 @@ const AutoSuggestion = ({
                             rightElement,
                             useTabForCompletions = false,
                             placeholder,
-                            showScrollBar = true
+                            showScrollBar = true,
+                            autoCompletionRequestDelay = 1000,
+                            validationRequestDelay = 200
                         }: IProps) => {
     const [value, setValue] = React.useState(initialValue);
     const [cursorPosition, setCursorPosition] = React.useState(0);
-    const [coords, setCoords] = React.useState({left: 0});
+    const [horizontalShift, setHorizontalShift] = React.useState<number>(0);
     const [shouldShowDropdown, setShouldShowDropdown] = React.useState(false);
     const [suggestions, setSuggestions] = React.useState<ISuggestionWithReplacementInfo[]>([]);
     const [suggestionsPending, setSuggestionsPending] = React.useState(false);
@@ -177,7 +186,7 @@ const AutoSuggestion = ({
                 const marker = editorInstance.markText(
                     {line: 0, ch: from},
                     {line: 0, ch: to},
-                    {className: "ecc-text-highlighting"}
+                    {className: `${eccgui}-autosuggestion__text--highlighted`}
                 );
                 return () => marker.clear()
             }
@@ -194,7 +203,7 @@ const AutoSuggestion = ({
             const marker = editorInstance.markText(
                 { line: 0, ch: start },
                 { line: 0, ch: end },
-                { className: "ecc-text-error-highlighting", title: message }
+                { className: `${eccgui}-autosuggestion__text--highlighted-error`, title: message }
             );
             setErrorMarkers((previousMarkers) => {
                 previousMarkers.forEach(marker => marker.clear())
@@ -252,8 +261,8 @@ const AutoSuggestion = ({
     }, [checkInput])
 
     const checkValuePathValidity = useMemo(
-        () => debounce((inputString: string) => asyncCheckInput(inputString), 1000),
-        [asyncCheckInput]
+        () => debounce((inputString: string) => asyncCheckInput(inputString), validationRequestDelay),
+        [asyncCheckInput, validationRequestDelay]
     )
 
     const asyncHandleEditorInputChange = useMemo(() => async (inputString: string, cursorPosition: number) => {
@@ -270,8 +279,8 @@ const AutoSuggestion = ({
     }, [fetchSuggestions])
 
     const handleEditorInputChange = useMemo(() =>
-        debounce((inputString: string, cursorPosition: number) => asyncHandleEditorInputChange(inputString, cursorPosition), 1000),
-        [asyncHandleEditorInputChange]
+        debounce((inputString: string, cursorPosition: number) => asyncHandleEditorInputChange(inputString, cursorPosition), autoCompletionRequestDelay),
+        [asyncHandleEditorInputChange, autoCompletionRequestDelay]
     )
 
     React.useEffect(() => {
@@ -294,9 +303,9 @@ const AutoSuggestion = ({
         onChange(val)
     };
 
-    const handleCursorChange = (pos: any, coords: any) => {
+    const handleCursorChange = (pos: any, coords: any, scrollinfo: any) => {
         setCursorPosition(pos.ch);
-        setCoords(() => coords);
+        setHorizontalShift(Math.min(coords.left, Math.max(coords.left - scrollinfo.left, 0)));
     };
 
     const handleInputEditorKeyPress = (event: KeyboardEvent) => {
@@ -382,48 +391,68 @@ const AutoSuggestion = ({
     }, [])
 
     const hasError = !!value && !pathIsValid && !pathValidationPending;
-    const autoSuggestionInput = <div id={id} className="ecc-auto-suggestion-box">
-        <div className={`ecc-auto-suggestion-box__editor-box ${BlueprintClassNames.INPUT_GROUP} ${BlueprintClassNames.FILL} ${hasError ? BlueprintClassNames.INTENT_DANGER : ""}`}>
-            <SingleLineCodeEditor
-                mode="null"
-                setEditorInstance={setEditorInstance}
-                onChange={handleChange}
-                onCursorChange={handleCursorChange}
-                initialValue={value}
-                onFocusChange={handleInputFocus}
-                onKeyDown={handleInputEditorKeyPress}
-                enableTab={useTabForCompletions}
-                placeholder={placeholder}
-                onSelection={setSelectedTextRanges}
-                showScrollBar={showScrollBar}
-            />
-            {!!value && (
-                <span className={BlueprintClassNames.INPUT_ACTION}>
-                            <IconButton
-                                data-test-id={"value-path-clear-btn"}
-                                name="operation-clear"
-                                text={clearIconText}
-                                onClick={handleInputEditorClear}
-                            />
-                        </span>
-            )}
+    const autoSuggestionInput = (
+        <div id={id} className={`${eccgui}-autosuggestion`}>
+            <div className={`${eccgui}-autosuggestion__inputfield ${BlueprintClassNames.INPUT_GROUP} ${BlueprintClassNames.FILL} ${hasError ? BlueprintClassNames.INTENT_DANGER : ""}`}>
+                <ContextOverlay
+                    minimal
+                    fill
+                    isOpen={shouldShowDropdown}
+                    placement="bottom-start"
+                    openOnTargetFocus={false}
+                    autoFocus={false}
+                    content={(
+                        <AutoSuggestionList
+                            id={id+"__dropdown"}
+                            left={horizontalShift}
+                            loading={suggestionsPending}
+                            options={suggestions}
+                            isOpen={!suggestionsPending && shouldShowDropdown}
+                            onItemSelectionChange={handleDropdownChange}
+                            currentlyFocusedIndex={focusedIndex}
+                            itemToHighlight={handleItemHighlighting}
+                        />
+                    )}
+                >
+                    <SingleLineCodeEditor
+                        mode="null"
+                        setEditorInstance={setEditorInstance}
+                        onChange={handleChange}
+                        onCursorChange={handleCursorChange}
+                        initialValue={value}
+                        onFocusChange={handleInputFocus}
+                        onKeyDown={handleInputEditorKeyPress}
+                        enableTab={useTabForCompletions}
+                        placeholder={placeholder}
+                        onSelection={setSelectedTextRanges}
+                        showScrollBar={showScrollBar}
+                    />
+                </ContextOverlay>
+                {!!value && (
+                    <span className={BlueprintClassNames.INPUT_ACTION}>
+                        <IconButton
+                            data-test-id={"value-path-clear-btn"}
+                            name="operation-clear"
+                            text={clearIconText}
+                            onClick={handleInputEditorClear}
+                        />
+                    </span>
+                )}
+            </div>
         </div>
-        {shouldShowDropdown ? <AutoSuggestionList
-            left={coords.left}
-            loading={suggestionsPending}
-            options={suggestions}
-            isOpen={!suggestionsPending && shouldShowDropdown}
-            onItemSelectionChange={handleDropdownChange}
-            currentlyFocusedIndex={focusedIndex}
-            itemToHighlight={handleItemHighlighting}
-        /> : null}
-    </div>
-
-    const withRightElement = rightElement || leftElement ? <Toolbar noWrap={true}>
-        {leftElement && <ToolbarSection>{leftElement}</ToolbarSection>}
-        <ToolbarSection canGrow={true}>{autoSuggestionInput}</ToolbarSection>
-        {rightElement && <ToolbarSection>{rightElement}</ToolbarSection>}
-    </Toolbar> : autoSuggestionInput
+    );
+
+    const withRightElement = rightElement || leftElement ? (
+        <Toolbar noWrap>
+            {leftElement && <ToolbarSection>{leftElement}</ToolbarSection>}
+            <ToolbarSection canGrow canShrink>
+                <div style={{minWidth: "100%", maxWidth: "100%"}}>
+                    {autoSuggestionInput}
+                </div>
+            </ToolbarSection>
+            {rightElement && <ToolbarSection>{rightElement}</ToolbarSection>}
+        </Toolbar>
+    ) : autoSuggestionInput
 
     return label ? (
         <FieldItem