@eccenca/gui-elements 24.2.0 → 24.4.0

package/dist/types/extensions/codemirror/tests/codemirrorTestHelper.d.ts

@@ -5,11 +5,13 @@
  *              'EditorView is not a constructor'
  * This errors do not exist during compilation only during testing.
  */
-import { Extension } from "@codemirror/state";
+import { Extension, Compartment } from "@codemirror/state";
 /** placeholder extension, current error '_view.placeholder is not a function' */
 export declare const adaptedPlaceholder: (text?: string) => Extension;
 /** current error '_view.Editor is not a constructor' */
 export declare const AdaptedEditorView: any;
+/** Creates a new compartment or a mock of a compartment. */
+export declare const compartment: () => Compartment;
 /** extension adding event handlers, current error '(view, domEventHandlers) is not a function'  */
 export declare const AdaptedEditorViewDomEventHandlers: any;
 export declare const adaptedSyntaxHighlighting: (style: any) => any;

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

@@ -0,0 +1,38 @@
+import React from "react";
+import { Edge, EdgeProps } from "@xyflow/react";
+import { IntentTypes } from "../../../common/Intent";
+import { NodeHighlightColor } from "../nodes/sharedTypes";
+export type EdgeDefaultV12DataProps = Record<string, unknown> & {
+    /**
+     * Overwrites the default style how the edge stroke is displayed.
+     */
+    strokeType?: "solid" | "dashed" | "dotted" | "double" | "doubledashed";
+    /**
+     * Feedback state of the node.
+     */
+    intent?: IntentTypes;
+    /**
+     * Set the color of used highlights to mark the edge.
+     */
+    highlightColor?: NodeHighlightColor | [NodeHighlightColor, NodeHighlightColor];
+    /**
+     * Size of the "glow" effect when the edge is hovered.
+     */
+    pathGlowWidth?: number;
+    inversePath?: boolean;
+    /**
+     * Callback handler that returns a React element used as edge title.
+     */
+    renderLabel?: (edgeCenter: [number, number, number, number]) => React.ReactNode;
+    /**
+     * Properties are forwarded to the internally used SVG `g` element.
+     * Data attributes for test ids coud be included here.
+     */
+    edgeSvgProps?: React.SVGProps<SVGGElement>;
+};
+/**
+ * This element cannot be used directly, it must be connected via a `edgeTypes` definition.
+ * @see https://reactflow.dev/docs/api/nodes/
+ * @deprecated (v26) will be removed when `EdgeDefault` supports v12 directly
+ */
+export declare const EdgeDefaultV12: React.MemoExoticComponent<({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, label, labelStyle, labelShowBg, labelBgStyle, labelBgPadding, labelBgBorderRadius, data, ...edgeOriginalProperties }: EdgeProps<Edge<EdgeDefaultV12DataProps>>) => React.JSX.Element>;

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

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const EdgeDefs: React.MemoExoticComponent<() => React.JSX.Element>;

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

@@ -1,6 +1,7 @@
 import React from "react";
 import { HandleProps as ReactFlowHandleLegacyProps } from "react-flow-renderer";
 import { HandleProps as ReactFlowHandleNextProps } from "react-flow-renderer-lts";
+import { HandleProps as ReactFlowHandleV12Props } from "@xyflow/react";
 import { IntentTypes } from "../../../common/Intent";
 import { ReacFlowVersionSupportProps } from "../versionsupport";
 import { HandleContentProps } from "./HandleContent";
@@ -28,6 +29,8 @@ export interface HandleProps extends HandleExtensionProps, ReactFlowHandleLegacy
 }
 export interface HandleNextProps extends HandleExtensionProps, ReactFlowHandleNextProps {
 }
-export type HandleDefaultProps = HandleProps | HandleNextProps;
+export interface HandleV12Props extends HandleExtensionProps, ReactFlowHandleV12Props {
+}
+export type HandleDefaultProps = HandleProps | HandleNextProps | HandleV12Props;
 export declare const HandleDefault: React.MemoExoticComponent<({ flowVersion, data, tooltip, children, category, intent, ...handleProps }: HandleDefaultProps) => React.JSX.Element>;
 export {};

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

@@ -10,8 +10,11 @@ export * from "./edges/EdgeDefault";
 export * from "./edges/EdgeStep";
 export * from "./edges/EdgeTools";
 export * from "./edges/EdgeLabel";
+export * from "./edges/EdgeDefs";
+export * from "./edges/EdgeDefaultV12";
 export * from "./markers/ReactFlowMarkers";
 export * from "./minimap/MiniMap";
 export * from "./minimap/utils";
+export * from "./versionsupport";
 export { nodeTypes } from "./nodes/nodeTypes";
 export { edgeTypes } from "./edges/edgeTypes";

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

@@ -1,16 +1,17 @@
 import React from "react";
 import { Position } from "react-flow-renderer";
 import { IntentTypes } from "../../../common/Intent";
-import { DepictionProps } from "../../../components/Depiction/Depiction";
+import { DepictionProps } from "../../../components";
 import { ValidIconName } from "../../../components/Icon/canonicalIconNames";
+import { HandleNextProps, HandleProps, HandleV12Props } from "../handles/HandleDefault";
 import { ReacFlowVersionSupportProps } from "../versionsupport";
-import { HandleNextProps, HandleProps } from "./../handles/HandleDefault";
 import { NodeContentExtensionProps } from "./NodeContentExtension";
 import { NodeDefaultProps } from "./NodeDefault";
 import { NodeHighlightColor } from "./sharedTypes";
 type NodeContentHandleLegacyProps = HandleProps;
 type NodeContentHandleNextProps = HandleNextProps;
-export type NodeContentHandleProps = NodeContentHandleLegacyProps | NodeContentHandleNextProps;
+type NodeContentHandleV12Props = HandleV12Props;
+export type NodeContentHandleProps = NodeContentHandleLegacyProps | NodeContentHandleNextProps | NodeContentHandleV12Props;
 export type NodeDimensions = {
     width?: number;
     height?: number;
@@ -134,7 +135,7 @@ export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends N
      * Array of property definition objects for `Handle` components that need to be created for the node.
      * @see https://reactflow.dev/docs/api/handle/
      */
-    handles?: NodeContentHandleLegacyProps[] | NodeContentHandleNextProps[];
+    handles?: NodeContentHandleProps[];
     /**
      * Set the minimal number of handles on left or right side of the node to activate the recalculation of the minimal height of the node.
      */

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

@@ -1,7 +1,8 @@
 export interface ReacFlowVersionSupportProps {
     /**
      * Spevifies the context of the react flow renderer version that is used for the component.
+     * @deprecated (v25) `legacy` and `next` will be removed/replaced by `v##` values in future versions
      */
-    flowVersion?: "legacy" | "next" | "none";
+    flowVersion?: "v12" | "legacy" | "next" | "none";
 }
-export declare const useReactFlowVersion: () => "none" | "next" | "legacy";
+export declare const useReactFlowVersion: () => "none" | "next" | "legacy" | "v12";

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": "24.2.0",
+    "version": "24.4.0",
     "license": "Apache-2.0",
     "homepage": "https://github.com/eccenca/gui-elements",
     "bugs": "https://github.com/eccenca/gui-elements/issues",
@@ -81,6 +81,7 @@
         "@codemirror/lang-yaml": "^6.1.2",
         "@codemirror/legacy-modes": "^6.5.0",
         "@mavrin/remark-typograf": "^2.2.0",
+        "@xyflow/react": "^12.6.0",
         "classnames": "^2.5.1",
         "codemirror": "^6.0.1",
         "color": "^4.2.3",
@@ -148,8 +149,8 @@
         "eslint-plugin-simple-import-sort": "^12.1.1",
         "husky": "4",
         "identity-obj-proxy": "^3.0.0",
-        "jest": "^29.7.0",
-        "jest-environment-jsdom": "^29.7.0",
+        "jest": "^30.0.5",
+        "jest-environment-jsdom": "^30.0.5",
         "jest-pnp-resolver": "^1.2.3",
         "lint-staged": "^15.5.1",
         "node-sass-package-importer": "^5.3.3",
@@ -179,6 +180,8 @@
     "resolutions": {
         "**/@types/react": "^17.0.85",
         "node-sass-package-importer/**/postcss": "^8.4.49",
+        "string-width": "^4.2.3",
+        "wrap-ansi": "^7.0.0",
         "hast-util-from-parse5": "8.0.0"
     },
     "husky": {

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

@@ -1,9 +1,17 @@
-import React from "react";
+import React, { useMemo, useState } from "react";
 import { loremIpsum } from "react-lorem-ipsum";
+import { OverlaysProvider } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
 
 import { helpersArgTypes } from "../../../.storybook/helpers";
-import { ActivityControlWidget, Tag, TagList } from "../../../index";
+import {
+    ActivityControlWidget,
+    ActivityControlWidgetAction,
+    IconButton,
+    SimpleDialog,
+    Tag,
+    TagList,
+} from "../../../index";
 
 export default {
     title: "Cmem/ActivityControlWidget",
@@ -19,7 +27,7 @@ const Template: StoryFn<typeof ActivityControlWidget> = (args) => <ActivityContr
 
 export const FullExample = Template.bind({});
 
-const actions = [
+const actions: ActivityControlWidgetAction[] = [
     {
         "data-test-id": "activity-reload-activity",
         icon: "item-reload",
@@ -30,6 +38,7 @@ const actions = [
     {
         "data-test-id": "activity-start-activity",
         icon: "item-start",
+        // eslint-disable-next-line no-console
         action: () => console.log("start"),
         tooltip: "Start Activity",
         disabled: false,
@@ -37,6 +46,7 @@ const actions = [
     {
         "data-test-id": "activity-stop-activity",
         icon: "item-stop",
+        // eslint-disable-next-line no-console
         action: () => console.log("cancel"),
         tooltip: "Stop Activity",
         disabled: false,
@@ -57,8 +67,8 @@ const commonWidgetArgs = {
     progressSpinner: {
         intent: "none",
         value: 0.5,
-    },
-};
+    } as const,
+} as const;
 
 FullExample.args = {
     ...commonWidgetArgs,
@@ -80,3 +90,33 @@ WidgetWithTags.args = {
     ...commonWidgetArgs,
     tags: widgetTags,
 };
+
+export const WidgetWithAdditionalActions: StoryFn<typeof ActivityControlWidget> = (args) => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    const params = useMemo(
+        () => ({
+            ...commonWidgetArgs,
+            ...args,
+            additionalActions: args.additionalActions ?? [
+                <IconButton name="application-explore" onClick={() => setIsOpen(true)} />,
+            ],
+        }),
+        []
+    );
+
+    return (
+        <OverlaysProvider>
+            <ActivityControlWidget {...params} />
+            <SimpleDialog
+                title="Additional actions dialog"
+                isOpen={isOpen}
+                onClose={() => setIsOpen(false)}
+                canOutsideClickClose
+                canEscapeKeyClose
+            >
+                Modal content
+            </SimpleDialog>
+        </OverlaysProvider>
+    );
+};

package/src/cmem/ActivityControl/ActivityControlWidget.tsx

@@ -81,6 +81,10 @@ export interface ActivityControlWidgetProps extends TestableComponent {
      * execution timer messages for waiting and running times.
      */
     timerExecutionMsg?: JSX.Element | null;
+    /**
+     * additional actions that can serve as a complex component, positioned between the default actions and the context menu
+     */
+    additionalActions?: React.ReactElement<unknown>[];
 }
 
 interface IActivityContextMenu extends TestableComponent {
@@ -110,11 +114,13 @@ interface IActivityMenuAction extends ActivityControlWidgetAction {
 /** Shows the status of activities and supports actions on these activities. */
 export function ActivityControlWidget(props: ActivityControlWidgetProps) {
     const {
-        "data-test-id": dataTestId,
+        "data-test-id": dataTestIdLegacy,
+        "data-testid": dataTestId,
         progressBar,
         progressSpinner,
         activityActions,
         activityContextMenu,
+        additionalActions,
         small,
         border,
         hasSpacing,
@@ -126,10 +132,19 @@ export function ActivityControlWidget(props: ActivityControlWidgetProps) {
     } = props;
     const spinnerClassNames = (progressSpinner?.className ?? "") + ` ${eccgui}-spinner--permanent`;
     const widget = (
-        <OverviewItem data-test-id={dataTestId} hasSpacing={border || hasSpacing} densityHigh={small}>
+        <OverviewItem
+            data-test-id={dataTestIdLegacy}
+            data-testid={dataTestId}
+            hasSpacing={border || hasSpacing}
+            densityHigh={small}
+        >
             {progressBar && <ProgressBar {...progressBar} />}
             {(progressSpinner || progressSpinnerFinishedIcon) && (
-                <OverviewItemDepiction keepColors>
+                <OverviewItemDepiction
+                    data-testid={dataTestId ? `${dataTestId}-progress-spinner` : undefined}
+                    data-test-id={dataTestIdLegacy ? `${dataTestIdLegacy}-progress-spinner` : undefined}
+                    keepColors
+                >
                     {progressSpinnerFinishedIcon ? (
                         React.cloneElement(progressSpinnerFinishedIcon as JSX.Element, { small, large: !small })
                     ) : (
@@ -145,13 +160,21 @@ export function ActivityControlWidget(props: ActivityControlWidgetProps) {
             )}
             <OverviewItemDescription>
                 {props.label && (
-                    <OverviewItemLine small={small}>
+                    <OverviewItemLine
+                        data-testid={dataTestId ? `${dataTestId}-label` : undefined}
+                        data-test-id={dataTestIdLegacy ? `${dataTestIdLegacy}-label` : undefined}
+                        small={small}
+                    >
                         {React.cloneElement(labelWrapper, {}, props.label)}
                         {timerExecutionMsg && (props.statusMessage || tags) && <>&nbsp;({timerExecutionMsg})</>}
                     </OverviewItemLine>
                 )}
                 {(props.statusMessage || tags) && (
-                    <OverviewItemLine small>
+                    <OverviewItemLine
+                        data-testid={dataTestId ? `${dataTestId}-status-message` : undefined}
+                        data-test-id={dataTestIdLegacy ? `${dataTestIdLegacy}-status-message` : undefined}
+                        small
+                    >
                         {tags}
                         {props.statusMessage && (
                             <OverflowText passDown>
@@ -172,21 +195,35 @@ export function ActivityControlWidget(props: ActivityControlWidgetProps) {
                     </OverviewItemLine>
                 )}
                 {timerExecutionMsg && !(props.statusMessage || tags) && (
-                    <OverviewItemLine small>{timerExecutionMsg}</OverviewItemLine>
+                    <OverviewItemLine
+                        data-testid={dataTestId ? `${dataTestId}-status-message` : undefined}
+                        data-test-id={dataTestIdLegacy ? `${dataTestIdLegacy}-status-message` : undefined}
+                        small
+                    >
+                        {timerExecutionMsg}
+                    </OverviewItemLine>
                 )}
             </OverviewItemDescription>
-            <OverviewItemActions>
+            <OverviewItemActions
+                data-testid={dataTestId ? `${dataTestId}-actions` : undefined}
+                data-test-id={dataTestIdLegacy ? `${dataTestIdLegacy}-actions` : undefined}
+            >
                 {activityActions &&
                     activityActions.map((action, idx) => {
                         return (
                             <IconButton
-                                key={typeof action.icon === "string" ? action.icon : action["data-test-id"] ?? idx}
+                                key={
+                                    typeof action.icon === "string"
+                                        ? action.icon
+                                        : action["data-test-id"] ?? action["data-testid"] ?? idx
+                                }
                                 data-test-id={action["data-test-id"]}
+                                data-testid={action["data-testid"]}
                                 name={action.icon}
                                 text={action.tooltip}
                                 onClick={action.action}
                                 disabled={action.disabled}
-                                hasStateWarning={action.hasStateWarning}
+                                intent={action.hasStateWarning ? "warning" : undefined}
                                 tooltipProps={{
                                     hoverOpenDelay: 200,
                                     placement: "bottom",
@@ -194,6 +231,7 @@ export function ActivityControlWidget(props: ActivityControlWidgetProps) {
                             />
                         );
                     })}
+                {additionalActions}
                 {activityContextMenu && activityContextMenu.menuItems.length > 0 && (
                     <ContextMenu
                         data-test-id={activityContextMenu["data-test-id"]}

package/src/cmem/ActivityControl/tests/ActivityControlWidget.test.tsx

@@ -0,0 +1,99 @@
+import React from "react";
+import { fireEvent, render, screen } from "@testing-library/react";
+
+import "@testing-library/jest-dom";
+
+import { IconButton, Tag, TagList } from "../../../index";
+import { ActivityControlWidget, ActivityControlWidgetAction } from "../ActivityControlWidget";
+
+describe("ActivityControlWidget", () => {
+    it("Renders basic widget with actions and handles clicks", () => {
+        const mockAction1 = jest.fn();
+        const mockAction2 = jest.fn();
+        const actions: ActivityControlWidgetAction[] = [
+            {
+                "data-testid": "action-1",
+                icon: "item-reload",
+                action: mockAction1,
+                tooltip: "Action 1",
+            },
+            {
+                "data-testid": "action-2",
+                icon: "item-start",
+                action: mockAction2,
+                tooltip: "Action 2",
+            },
+        ];
+
+        render(
+            <ActivityControlWidget
+                label="Basic widget"
+                data-testid="basic-widget"
+                activityActions={actions}
+                statusMessage="Status message"
+            />
+        );
+
+        const button1 = screen.getByTestId("action-1");
+        const button2 = screen.getByTestId("action-2");
+
+        const label = screen.getByTestId("basic-widget-label");
+        const statusMessage = screen.getByTestId("basic-widget-status-message");
+        const actionsContainer = screen.getByTestId("basic-widget-actions");
+
+        expect(label).toBeInTheDocument();
+        expect(statusMessage).toBeInTheDocument();
+        expect(actionsContainer).toBeInTheDocument();
+
+        expect(label).toHaveTextContent("Basic widget");
+        expect(statusMessage).toHaveTextContent("Status message");
+
+        expect(button1).toBeInTheDocument();
+        expect(button2).toBeInTheDocument();
+
+        fireEvent.click(button1);
+        expect(mockAction1).toHaveBeenCalledTimes(1);
+
+        fireEvent.click(button2);
+        expect(mockAction2).toHaveBeenCalledTimes(1);
+    });
+
+    it("Renders widget with tags", () => {
+        const tags = (
+            <TagList>
+                <Tag>Tag one</Tag>
+                <Tag>Other tag</Tag>
+            </TagList>
+        );
+        render(<ActivityControlWidget label="Widget with tags" tags={tags} data-testid="widget-with-tags" />);
+
+        const label = screen.getByTestId("widget-with-tags-label");
+        const statusMessage = screen.getByTestId("widget-with-tags-status-message");
+
+        expect(label).toBeInTheDocument();
+        expect(statusMessage).toBeInTheDocument();
+
+        expect(label).toHaveTextContent("Widget with tags");
+        expect(statusMessage).toHaveTextContent("Tag one");
+        expect(statusMessage).toHaveTextContent("Other tag");
+    });
+
+    it("Renders widget with additional actions and handles click", () => {
+        const mockAction = jest.fn();
+        const additionalActions = [
+            <IconButton
+                key="add-btn"
+                name="application-explore"
+                onClick={mockAction}
+                data-testid="additional-action"
+            />,
+        ];
+        render(<ActivityControlWidget additionalActions={additionalActions} />);
+
+        const customButton = screen.getByTestId("additional-action");
+        expect(customButton).toBeInTheDocument();
+
+        fireEvent.click(customButton);
+        expect(mockAction).toHaveBeenCalledTimes(1);
+    });
+});

package/src/components/AutoSuggestion/AutoSuggestion.tsx

@@ -166,6 +166,12 @@ export interface AutoSuggestionProps {
     /** If this is enabled the value of the editor is replaced with the initialValue if it changes.
      * FIXME: This property is a workaround for some "controlled" usages of the component via the initialValue property. */
     reInitOnInitialValueChange?: boolean;
+    /** Optional height of the component */
+    height?: number | string;
+    /** Set read-only mode. Default: false */
+    readOnly?: boolean;
+    /** Properties that should be added to the outer div container. */
+    outerDivAttributes?: Omit<React.HTMLAttributes<HTMLDivElement>, "id" | "data-test-id">;
 }
 
 // Meta data regarding a request
@@ -198,6 +204,9 @@ const AutoSuggestion = ({
     mode,
     multiline = false,
     reInitOnInitialValueChange = false,
+    height,
+    readOnly,
+    outerDivAttributes
 }: AutoSuggestionProps) => {
     const value = React.useRef<string>(initialValue);
     const cursorPosition = React.useRef(0);
@@ -208,7 +217,7 @@ const AutoSuggestion = ({
     const suggestionRequestData = React.useRef<RequestMetaData>({ requestId: undefined });
     const [pathValidationPending, setPathValidationPending] = React.useState(false);
     const validationRequestData = React.useRef<RequestMetaData>({ requestId: undefined });
-    const errorMarkers = React.useRef<any[]>([])
+    const errorMarkers = React.useRef<any[]>([]);
     const [validationResponse, setValidationResponse] = useState<CodeAutocompleteFieldValidationResult | undefined>(
         undefined
     );
@@ -300,26 +309,26 @@ const AutoSuggestion = ({
         const parseError = validationResponse?.parseError;
         if (cm) {
             const clearCurrentErrorMarker = () => {
-                if(errorMarkers.current.length) {
+                if (errorMarkers.current.length) {
                     const [from, to] = errorMarkers.current;
-                    removeMarkFromText({ view: cm, from, to })
-                    errorMarkers.current = []
+                    removeMarkFromText({ view: cm, from, to });
+                    errorMarkers.current = [];
                 }
-            }
+            };
             if (parseError) {
                 const { message, start, end } = parseError;
                 const { toOffset, fromOffset } = getOffsetRange(cm, start, end);
-                clearCurrentErrorMarker()
-                const {from, to} = markText({
+                clearCurrentErrorMarker();
+                const { from, to } = markText({
                     view: cm,
                     from: fromOffset,
                     to: toOffset,
                     className: `${eccgui}-autosuggestion__text--highlighted-error`,
                     title: message,
                 });
-                errorMarkers.current = [from, to]
+                errorMarkers.current = [from, to];
             } else {
-                clearCurrentErrorMarker()
+                clearCurrentErrorMarker();
             }
         }
 
@@ -354,7 +363,7 @@ const AutoSuggestion = ({
             editorState.suggestions = [];
             setSuggestions([]);
         }
-        editorState.index = 0;
+        setCurrentIndex(0);
     }, [suggestionResponse, editorState]);
 
     const getOffsetRange = (cm: EditorView, from: number, to: number) => {
@@ -368,7 +377,7 @@ const AutoSuggestion = ({
         return { fromOffset, toOffset };
     };
 
-    const inputactionsDisplayed = React.useCallback((node) => {
+    const inputActionsDisplayed = React.useCallback((node) => {
         if (!node) return;
         const width = node.offsetWidth;
         const slCodeEditor = node.parentElement.getElementsByClassName(`${eccgui}-singlelinecodeeditor`);
@@ -448,13 +457,13 @@ const AutoSuggestion = ({
         [asyncHandleEditorInputChange, autoCompletionRequestDelay]
     );
 
-    const handleChange = React.useMemo( () => {
+    const handleChange = React.useMemo(() => {
         return (val: string) => {
             value.current = val;
             checkValuePathValidity.cancel();
             checkValuePathValidity(value.current);
             onChange(val);
-        }
+        };
     }, [onChange, checkValuePathValidity]);
 
     const handleCursorChange = (cursor: number, coords: Rect, scrollinfo: HTMLElement, view: EditorView) => {
@@ -482,8 +491,7 @@ const AutoSuggestion = ({
         }, 1);
     };
 
-    //todo check out typings for event type
-    const handleInputEditorKeyPress = (event: any) => {
+    const handleInputEditorKeyPress = (event: KeyboardEvent) => {
         const overWrittenKeys: Array<string> = Object.values(OVERWRITTEN_KEYS);
         if (overWrittenKeys.includes(event.key) && (useTabForCompletions || event.key !== OVERWRITTEN_KEYS.Tab)) {
             //don't prevent when enter should create new line (multiline config) and dropdown isn't shown
@@ -619,6 +627,7 @@ const AutoSuggestion = ({
                     break;
                 default:
                 //do nothing
+                    closeDropDown();
             }
         }
     };
@@ -653,6 +662,8 @@ const AutoSuggestion = ({
                 showScrollBar={showScrollBar}
                 multiline={multiline}
                 onMouseDown={handleInputMouseDown}
+                height={height}
+                readOnly={readOnly}
             />
         );
     }, [
@@ -665,6 +676,7 @@ const AutoSuggestion = ({
         showScrollBar,
         multiline,
         handleInputMouseDown,
+        readOnly
     ]);
 
     const hasError = !!value.current && !pathIsValid && !pathValidationPending;
@@ -673,6 +685,7 @@ const AutoSuggestion = ({
             id={id}
             ref={autoSuggestionDivRef}
             className={`${eccgui}-autosuggestion` + (className ? ` ${className}` : "")}
+            {...outerDivAttributes}
         >
             <div
                 className={` ${eccgui}-autosuggestion__inputfield ${BlueprintClassNames.INPUT_GROUP} ${
@@ -703,11 +716,12 @@ const AutoSuggestion = ({
                     {codeEditor}
                 </ContextOverlay>
                 {!!value.current && (
-                    <span className={BlueprintClassNames.INPUT_ACTION} ref={inputactionsDisplayed}>
+                    <span className={BlueprintClassNames.INPUT_ACTION} ref={inputActionsDisplayed}>
                         <IconButton
                             data-test-id={"value-path-clear-btn"}
                             name="operation-clear"
                             text={clearIconText}
+                            disabled={readOnly}
                             onClick={handleInputEditorClear}
                         />
                     </span>

package/src/components/AutoSuggestion/ExtendedCodeEditor.tsx

@@ -61,6 +61,10 @@ export interface ExtendedCodeEditorProps {
         | "additionalExtensions"
         | "outerDivAttributes"
     >;
+    /** Optional height of the component */
+    height?: number | string;
+    /** Set read-only mode. Default: false */
+    readOnly?: boolean;
 }
 
 export type IEditorProps = ExtendedCodeEditorProps;
@@ -80,6 +84,8 @@ export const ExtendedCodeEditor = ({
     onCursorChange,
     onSelection,
     codeEditorProps,
+    height, 
+    readOnly
 }: ExtendedCodeEditorProps) => {
     const initialContent = React.useRef(multiline ? initialValue : initialValue.replace(/[\r\n]/g, " "));
     const multilineExtensions = multiline
@@ -102,6 +108,8 @@ export const ExtendedCodeEditor = ({
             shouldHaveMinimalSetup={false}
             preventLineNumbers={!multiline}
             mode={mode}
+            height={height}
+            readOnly={readOnly}
             name=""
             enableTab={enableTab}
             additionalExtensions={[...multilineExtensions]}