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

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";
@@ -77,6 +78,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 +92,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, 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.4",
   "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/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

package/src/components/AutoSuggestion/AutoSuggestionList.tsx

@@ -13,8 +13,9 @@ import {
     Tooltip,
 } from "./../../";
 import { ISuggestionWithReplacementInfo } from "./AutoSuggestion";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export interface IDropdownProps {
+export interface IDropdownProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
     // The options of the drop down
     options: Array<ISuggestionWithReplacementInfo>;
     // Called when an item has been selected from the drop down
@@ -78,6 +79,7 @@ export const AutoSuggestionList = ({
     left,
     currentlyFocusedIndex,
     itemToHighlight,
+    ...otherDivProps
 }: IDropdownProps) => {
     const [hoveredItem, setHoveredItem] = React.useState<
         ISuggestionWithReplacementInfo | undefined
@@ -132,7 +134,8 @@ export const AutoSuggestionList = ({
     if (!loadingOrHasSuggestions || !isOpen) return null;
     return (
         <div
-            className="ecc-auto-suggestion-box__dropdown"
+            {...otherDivProps}
+            className={`${eccgui}-autosuggestion__dropdown`}
             style={{ left }}
             ref={dropdownRef}
         >

package/src/components/AutoSuggestion/SingleLineCodeEditor.tsx

@@ -4,6 +4,7 @@ import React from "react";
 import { Controlled as ControlledEditor } from "react-codemirror2";
 import { Classes as BlueprintClassNames } from "@blueprintjs/core";
 import {Editor as CodeMirrorEditor} from "codemirror";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface IEditorProps {
   // Is called with the editor instance that allows access via the CodeMirror API
@@ -11,7 +12,7 @@ export interface IEditorProps {
   // Called whenever the editor content changes
   onChange: (value: string) => any
   // Called when the cursor position changes
-  onCursorChange: (pos: any, coords: any) => any
+  onCursorChange: (pos: any, coords: any, scrollinfo: any) => any
   // The editor theme, e.g. "sparql"
   mode?: string
   // The initial value of the editor
@@ -49,7 +50,7 @@ const SingleLineCodeEditor = ({
                                   showScrollBar = true
                               }: IEditorProps) => {
     return (
-        <div className={"ecc-input-editor " + BlueprintClassNames.INPUT}>
+        <div className={`${eccgui}-singlelinecodeeditor ${BlueprintClassNames.INPUT}`}>
             <ControlledEditor
         editorDidMount={(editor) => {
           editor.on("beforeChange", (_, change) => {
@@ -82,7 +83,11 @@ const SingleLineCodeEditor = ({
           }
         }}
         onCursor={(editor, data) => {
-          onCursorChange(data, editor.cursorCoords(true, "div"));
+          onCursorChange(
+              data,
+              editor.cursorCoords(true, "local"),
+              editor.getScrollInfo()
+          );
         }}
         onBeforeChange={(_editor, _data, value) => {
           const trimmedValue = value.replace(/\n/g, "");

package/src/components/AutoSuggestion/tests/AutoSuggestionList.test.tsx

@@ -71,7 +71,7 @@ describe("Dropdown list", () => {
            left: 10
        }
        const {container} = render(<AutoSuggestionList {...props} />)
-       const parentDiv:HTMLElement = container.querySelector(".ecc-auto-suggestion-box__dropdown")!!
+       const parentDiv:HTMLElement = container.querySelector(`.${eccgui}-autosuggestion__dropdown`)!!
        const leftOffset = Number(parentDiv.style.left.replace(/px$/,""));
        expect(leftOffset).toBe(props.left)
     })

package/src/components/AutoSuggestion/tests/SingleLineCodeEditor.test.tsx

@@ -5,6 +5,7 @@ import SingleLineEditor, {
     IEditorProps,
 } from "../SingleLineCodeEditor";
 import CodeMirror from "codemirror";
+import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
 
 describe("SingleLineCodeEditor", () => {
     let props: IEditorProps,
@@ -26,7 +27,7 @@ describe("SingleLineCodeEditor", () => {
 
     it("should render properly", () => {
         const { container } = render(<SingleLineEditor {...props} />);
-        expect(container.querySelector(".ecc-input-editor")).not.toBeNull();
+        expect(container.querySelector(`.${eccgui}-singlelinecodeeditor`)).not.toBeNull();
     });
 
     it("should set the editorInstance immediately it's mounted", () => {

package/src/components/AutocompleteField/AutoCompleteField.tsx

@@ -223,7 +223,7 @@ export function AutoCompleteField<T extends any, UPDATE_VALUE extends any>(props
     );
 
     useEffect(() => {
-        if (!disabled && hasFocus) {
+        if (!disabled && !otherProps.inputProps?.readOnly && hasFocus) {
             setListLoading(true);
             const timeout: number = window.setTimeout(async () => {
                 fetchQueryResults(query);
@@ -351,7 +351,7 @@ export function AutoCompleteField<T extends any, UPDATE_VALUE extends any>(props
         return <Notification danger={true} message={requestError} />
     }
     // Optional clear button to reset the selected value
-    const clearButton = reset &&
+    const clearButton = !disabled && reset &&
         selectedItem != null &&
         reset.resettableValue(selectedItem) ? (
             <IconButton
@@ -370,7 +370,9 @@ export function AutoCompleteField<T extends any, UPDATE_VALUE extends any>(props
         onBlur: handleOnFocusOut,
         onFocus: handleOnFocusIn,
         ...otherProps.inputProps,
+        title: (selectedItem !== undefined && (!!otherProps.inputProps?.readOnly || disabled)) ? itemValueString(selectedItem) : otherProps.inputProps?.title,
     };
+    const preventOverlayOnReadonly = !!otherProps.inputProps?.readOnly ? { isOpen: false } : {}
     const updatedContextOverlayProps: Partial<Omit<ContextOverlayProps, "content" | "children">> = {
         minimal: true,
         placement: "bottom-start",
@@ -378,6 +380,7 @@ export function AutoCompleteField<T extends any, UPDATE_VALUE extends any>(props
         rootBoundary: "viewport",
         onClosed: onPopoverClose,
         ...otherProps.contextOverlayProps,
+        ...preventOverlayOnReadonly,
     }
     if(selectedItem !== undefined) {
         // Makes sure that even when an empty string is selected, the placeholder won't be shown.

package/src/components/AutocompleteField/stories/AutoCompleteField.stories.tsx

@@ -20,6 +20,7 @@ export const Default = Template.bind({});
 export const AdaptQueryAfterSelection = Template.bind({})
 export const AllowReset = Template.bind({})
 export const AllowCustomValues = Template.bind({})
+export const ReadOnlyState = Template.bind({})
 
 // Renders string values as string
 const defaultRenderer = (item: string) => item
@@ -37,7 +38,7 @@ const defaultArgs: IAutoCompleteFieldProps<string, string> = {
         console.log(`Entry '${elem}' selected!`)
     },
     itemValueSelector: defaultRenderer,
-    noResultText: "No result"
+    noResultText: "No result",
 }
 
 // Changes the search query for the selected item, e.g. when the rendered item text should be different from the query finding this item.
@@ -67,9 +68,19 @@ const allowCustomValues: IAutoCompleteFieldProps<string, string> = {
     }
 }
 
+// Changes the search query for the selected item, e.g. when the rendered item text should be different from the query finding this item.
+const readOnlyState: IAutoCompleteFieldProps<string, string> = {
+    ...defaultArgs,
+    initialValue: "search item B",
+    inputProps: {
+        readOnly: true
+    }
+}
+
 Default.args = defaultArgs;
-AdaptQueryAfterSelection.args = adaptQueryAfterSelection
-AllowReset.args = resetSelection
-AllowCustomValues.args = allowCustomValues
+AdaptQueryAfterSelection.args = adaptQueryAfterSelection;
+AllowReset.args = resetSelection;
+AllowCustomValues.args = allowCustomValues;
+ReadOnlyState.args = readOnlyState;
 
 export default AutoCompleteFieldStory