@eccenca/gui-elements 24.0.0-rc.1 → 24.0.0-rc.3

package/src/components/AutoSuggestion/ExtendedCodeEditor.tsx

@@ -1,12 +1,12 @@
 import React from "react";
-import { UnControlled as UnControlledEditor } from "react-codemirror2";
 import { Classes as BlueprintClassNames } from "@blueprintjs/core";
-import { Editor as CodeMirrorEditor, EditorChange } from "codemirror";
-
-import "codemirror/addon/display/placeholder.js";
-import "codemirror/mode/sparql/sparql.js";
+import { EditorState } from "@codemirror/state";
+import { EditorView, lineNumbers, Rect } from "@codemirror/view";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { CodeEditor } from "../../extensions/codemirror/CodeMirror";
+//hooks
+import { SupportedCodeEditorModes } from "../../extensions/codemirror/hooks/useCodemirrorModeExtension.hooks";
 
 export interface IRange {
     from: number;
@@ -15,26 +15,26 @@ export interface IRange {
 
 export interface ExtendedCodeEditorProps {
     // Is called with the editor instance that allows access via the CodeMirror API
-    setEditorInstance: (editor: CodeMirrorEditor) => any;
+    setCM: (editor: EditorView | undefined) => any;
     // Called whenever the editor content changes
     onChange: (value: string) => any;
     // Called when the cursor position changes
-    onCursorChange: (pos: any, coords: any, scrollinfo: any) => any;
+    onCursorChange: (pos: number, coords: Rect, scrollinfo: HTMLElement, cm: EditorView) => any;
     // The editor theme, e.g. "sparql"
-    mode?: string;
+    mode?: SupportedCodeEditorModes;
     // The initial value of the editor
     initialValue: string;
     // Called when the focus status changes
     onFocusChange: (focused: boolean) => any;
     // Called when the user presses a key
-    onKeyDown: (event: KeyboardEvent) => any;
+    onKeyDown: (event: KeyboardEvent) => boolean;
     // function invoked when any click occurs
-    onMouseDown?: (editor: CodeMirrorEditor) => any;
+    onMouseDown?: (view: EditorView) => void;
     // Called when the user selects text
     onSelection: (ranges: IRange[]) => any;
     // If the <Tab> key is enabled as normal input, i.e. it won't have the behavior of changing to the next input element, expected in a web app.
     enableTab?: boolean;
-    /** Placeholder tobe shown when no text has been entered, yet. */
+    /** Placeholder to be shown when no text has been entered, yet. */
     placeholder?: string;
     //show scrollbar
     showScrollBar?: boolean;
@@ -44,87 +44,51 @@ export interface ExtendedCodeEditorProps {
 
 export type IEditorProps = ExtendedCodeEditorProps;
 
-/** A single-line code editor. */
+/** Supports single-line and multiline editing. */
 export const ExtendedCodeEditor = ({
-    setEditorInstance,
-    onChange,
-    onCursorChange,
-    mode,
+    multiline = false,
     initialValue = "",
-    onFocusChange,
     onKeyDown,
-    onSelection,
     enableTab = false,
-    placeholder,
-    showScrollBar = true,
-    multiline = false,
+    mode,
+    setCM,
+    onFocusChange,
     onMouseDown,
+    onChange,
+    placeholder,
+    onCursorChange,
+    onSelection,
 }: ExtendedCodeEditorProps) => {
     const initialContent = React.useRef(multiline ? initialValue : initialValue.replace(/[\r\n]/g, " "));
-
-    const extendedEditorProps = {
-        editorDidMount: (editor: any) => {
-            editor.on("beforeChange", (_: any, change: any) => {
-                // Prevent the user from entering new-line characters, since this is supposed to be a one-line editor.
-                if (change.update && typeof change.update === "function" && change.text.length > 1) {
-                    change.update(change.from, change.to, [change.text.join("")]);
-                }
-                return true;
-            });
-            setEditorInstance(editor);
-        },
-        onBeforeChange: (_editor: CodeMirrorEditor, data: EditorChange, _: string, next: () => any) => {
-            // Reduce multiple lines to a single line
-            if (data.text.length > 1) {
-                _editor.setValue(data.text.join(""));
-            }
-            next();
-        },
-    };
-
-    const extraEditorProps = multiline
-        ? {
-              editorDidMount: (editor: any) => {
-                  setEditorInstance(editor);
-              },
-          }
-        : extendedEditorProps;
+    const multilineExtensions = multiline
+        ? [lineNumbers(), EditorView.lineWrapping]
+        : [
+              EditorState?.transactionFilter.of((tr) => (tr.newDoc.lines > 1 ? [] : tr)), //prevent multiline,
+          ];
 
     return (
-        <div className={`${eccgui}-${multiline ? "codeeditor" : `singlelinecodeeditor ${BlueprintClassNames.INPUT}`}`}>
-            <UnControlledEditor
-                value={initialContent.current}
-                onFocus={() => onFocusChange(true)}
-                onBlur={() => onFocusChange(false)}
-                options={{
-                    mode: mode,
-                    lineNumbers: multiline,
-                    lineWrapping: multiline,
-                    theme: "xq-light",
-                    extraKeys: enableTab ? undefined : { Tab: false },
-                    placeholder,
-                    scrollbarStyle: showScrollBar ? "native" : "null",
-                }}
-                onSelection={(_editor, data) => {
-                    if (Array.isArray(data?.ranges)) {
-                        onSelection(
-                            data.ranges
-                                .map((r: any) => ({ from: r.from().ch, to: r.to().ch }))
-                                .filter((r: any) => r.from !== r.to)
-                        );
-                    }
-                }}
-                onCursor={(editor, data) => {
-                    onCursorChange(data, editor.cursorCoords(true, "local"), editor.getScrollInfo());
-                }}
-                onChange={(_editor, _data, value) => {
-                    onChange(value);
-                }}
-                onMouseDown={(editor) => onMouseDown && onMouseDown(editor)}
-                onKeyDown={(_, event) => onKeyDown(event)}
-                {...extraEditorProps}
-            />
-        </div>
+        <CodeEditor
+            defaultValue={initialContent.current}
+            setEditorView={setCM}
+            onSelection={onSelection}
+            onMouseDown={onMouseDown}
+            onChange={onChange}
+            placeholder={placeholder}
+            onCursorChange={onCursorChange}
+            onFocusChange={onFocusChange}
+            onKeyDown={onKeyDown}
+            shouldHaveMinimalSetup={false}
+            preventLineNumbers={!multiline}
+            mode={mode}
+            name=""
+            enableTab={enableTab}
+            additionalExtensions={[...multilineExtensions]}
+            outerDivAttributes={{
+                className: `${eccgui}-${
+                    multiline ? "codeeditor" : `singlelinecodeeditor ${BlueprintClassNames.INPUT}`
+                }`,
+            }}
+        />
     );
 };
 

package/src/components/AutoSuggestion/extensions/markText.ts

@@ -0,0 +1,63 @@
+import { StateEffect, StateField } from "@codemirror/state";
+import { Decoration, EditorView } from "@codemirror/view";
+
+const addMarks = StateEffect?.define(),
+    filterMarks = StateEffect?.define();
+
+// This value must be added to the set of extensions to enable this
+export const markField = StateField?.define({
+    // Start with an empty set of decorations
+    create() {
+        return Decoration.none;
+    },
+    // This is called whenever the editor updates—it computes the new set
+    update(value: any, tr) {
+        // Move the decorations to account for document changes
+        value = value.map(tr.changes);
+        // If this transaction adds or removes decorations, apply those changes
+        for (const effect of tr.effects) {
+            if (effect.is(addMarks)) value = value.update({ add: effect.value, sort: true });
+            else if (effect.is(filterMarks)) value = value.update({ filter: effect.value });
+        }
+        return value;
+    },
+    // Indicate that this field provides a set of decorations
+    provide: (f) => EditorView.decorations.from(f),
+});
+
+type marksConfig = {
+    view: EditorView;
+    from: number;
+    to: number;
+    className?: string;
+    title?: string;
+};
+
+export const markText = (config: marksConfig) => {
+    const docLength = config.view.state.doc.length;
+    if (!docLength) return { from: 0, to: 0 };
+    const strikeMark = Decoration.mark({
+        class: config.className,
+        attributes: {
+            title: config.title ?? "",
+        },
+    });
+    const stopRange = Math.min(config.to, docLength);
+    config.view.dispatch({
+        effects: addMarks.of([strikeMark.range(config.from, stopRange)] as any),
+    });
+
+    return { from: config.from, to: stopRange };
+};
+
+export const removeMarkFromText = (config: marksConfig) => {
+    const dispatch = (
+        typeof config.view.dispatch === "function" ? config.view?.dispatch : () => {}
+    ) as EditorView["dispatch"];
+
+    dispatch({
+        effects: filterMarks?.of(
+            ((from: number, to: number) => to <= config.from || from >= config.to) as unknown as null
+        ),
+    });
+};

package/src/components/AutoSuggestion/index.ts

@@ -1,7 +1,7 @@
-import { AutoSuggestion, AutoSuggestionProps } from "./AutoSuggestion";
+import { AutoSuggestionProps } from "./AutoSuggestion";
 import { AutoSuggestionList, AutoSuggestionListProps } from "./AutoSuggestionList";
 import { ExtendedCodeEditor, ExtendedCodeEditorProps } from "./ExtendedCodeEditor";
 
-export { AutoSuggestion, AutoSuggestionList, ExtendedCodeEditor };
+export { AutoSuggestionList, ExtendedCodeEditor };
 
 export type { AutoSuggestionProps, AutoSuggestionListProps, ExtendedCodeEditorProps };

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { render } from "@testing-library/react";
-import CodeMirror from "codemirror";
+import { EditorView } from "@codemirror/view";
 
 import "@testing-library/jest-dom";
 
@@ -9,7 +9,7 @@ import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
 
 describe("SingleLineCodeEditor", () => {
     let props: ExtendedCodeEditorProps,
-        codeMirrorEditorInstance: CodeMirror.Editor = null as any;
+        cm: EditorView | null = null;
 
     beforeAll(() => {
         document.createRange = () => {
@@ -28,15 +28,15 @@ describe("SingleLineCodeEditor", () => {
 
     beforeEach(() => {
         props = {
-            setEditorInstance: jest.fn((editor) => {
-                codeMirrorEditorInstance = editor;
+            setCM: jest.fn((editor) => {
+                cm = editor as EditorView;
             }),
             onChange: jest.fn((value) => {}),
             onCursorChange: jest.fn((pos, coords) => {}),
             mode: undefined,
             initialValue: "",
             onFocusChange: jest.fn((focused) => {}),
-            onKeyDown: jest.fn((event) => {}),
+            onKeyDown: jest.fn((event) => true),
             onSelection: jest.fn((ranges) => {}),
         };
     });
@@ -48,8 +48,8 @@ describe("SingleLineCodeEditor", () => {
 
     it("should set the editorInstance immediately it's mounted", () => {
         render(<ExtendedCodeEditor {...props} />);
-        expect(props.setEditorInstance).toHaveBeenCalledTimes(1);
-        expect(codeMirrorEditorInstance).not.toBeNull();
+        expect(props.setCM).toHaveBeenCalled();
+        expect(cm).not.toBeNull();
     });
 
     it("should set the default value on the editor input", () => {
@@ -58,18 +58,20 @@ describe("SingleLineCodeEditor", () => {
             initialValue: "This is the initial input",
         };
         const { getByText } = render(<ExtendedCodeEditor {...props} />);
-        expect(codeMirrorEditorInstance.getValue()).toBe(props.initialValue);
+        expect(cm?.state.doc.toString()).toBe(props.initialValue);
         expect(getByText(props.initialValue)).toBeTruthy();
     });
 
     it("should not allow user to create new lines", () => {
         render(<ExtendedCodeEditor {...props} />);
-        codeMirrorEditorInstance.getDoc().setValue("I'm entering a new line \n character");
-        expect(codeMirrorEditorInstance.lineCount()).toBe(1);
+        cm?.dispatch({
+            changes: { from: 0, to: cm.state.doc.length, insert: "I'm entering a new line \n character" },
+        });
+        expect(cm?.state.doc.lines).toBe(1);
     });
 
     it("should convert multiple lines to a single line", () => {
         render(<ExtendedCodeEditor {...{ ...props, initialValue: "1\n2\n3" }} />);
-        expect(codeMirrorEditorInstance.lineCount()).toBe(1);
+        expect(cm?.state.doc.lines).toBe(1);
     });
 });

package/src/components/AutocompleteField/AutoCompleteField.tsx

@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from "react";
 import {
     HTMLInputProps as BlueprintHTMLInputProps,
-    InputGroupProps2 as BlueprintInputGroupProps,
+    InputGroupProps as BlueprintInputGroupProps,
 } from "@blueprintjs/core";
-import { Suggest2 as BlueprintSuggest } from "@blueprintjs/select";
+import { Suggest as BlueprintSuggest } from "@blueprintjs/select";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import {
@@ -17,20 +17,13 @@ import {
     Spinner,
 } from "../../index";
 
-import { IElementWidth as IElementWidthOrig, IRenderModifiers as IRenderModifiersOrig } from "./interfaces";
-
-// @deprecated import from `src/components/AutocompleteField/interfaces`
-export type IElementWidth = IElementWidthOrig;
-// @deprecated import from `src/components/AutocompleteField/interfaces`
-export type IRenderModifiers = IRenderModifiersOrig;
+import { SuggestFieldItemRendererModifierProps } from "./interfaces";
 
 type SearchFunction<T> = (value: string) => T[];
 type AsyncSearchFunction<T> = (value: string) => Promise<T[]>;
 
 /**
- * Parameters for the auto-complete field parameterized by T and U.
- * @param T is the input data structure/type of the items that can be selected.
- * @param UPDATE_VALUE The value type that will be pushed into the onChange callback.
+ * @deprecated (v25) replaced by SuggestFieldProps
  */
 export interface AutoCompleteFieldProps<T, UPDATE_VALUE> {
     /**
@@ -64,7 +57,12 @@ export interface AutoCompleteFieldProps<T, UPDATE_VALUE> {
      * @param handleClick The function that needs to be called when the rendered item gets clicked. Else a selection
      *                    via mouse is not possible. This only needs to be used when returning a JSX.Element.
      */
-    itemRenderer(item: T, query: string, modifiers: IRenderModifiers, handleClick: () => any): string | JSX.Element;
+    itemRenderer(
+        item: T,
+        query: string,
+        modifiers: SuggestFieldItemRendererModifierProps,
+        handleClick: () => any
+    ): string | JSX.Element;
 
     /** Renders the string that should be displayed in the input field after the item has been selected.
      */
@@ -120,7 +118,7 @@ export interface AutoCompleteFieldProps<T, UPDATE_VALUE> {
         /** Renders how the option to newly create an item should look like in the selection list. */
         itemRenderer: (
             query: string,
-            modifiers: IRenderModifiers,
+            modifiers: SuggestFieldItemRendererModifierProps,
             handleClick: React.MouseEventHandler<HTMLElement>
         ) => JSX.Element | undefined;
 
@@ -160,6 +158,9 @@ export interface AutoCompleteFieldProps<T, UPDATE_VALUE> {
     loadMoreResults?: () => Promise<T[] | undefined>;
 }
 
+/**
+ * @deprecated (v25) replaced by SuggestFieldProps
+ */
 export type IAutoCompleteFieldProps<T, UPDATE_VALUE> = AutoCompleteFieldProps<T, UPDATE_VALUE>;
 
 AutoCompleteField.defaultProps = {
@@ -172,12 +173,9 @@ AutoCompleteField.defaultProps = {
 };
 
 /**
- * **Element is deprecated.**
- * Use `SuggestField` as replacement.
- *
- * @deprecated
+ * @deprecated (support already removed) use `SuggestField` as replacement.
  */
-export function AutoCompleteField<T, UPDATE_VALUE>(props: AutoCompleteFieldProps<T, UPDATE_VALUE>) {
+function AutoCompleteField<T, UPDATE_VALUE>(props: AutoCompleteFieldProps<T, UPDATE_VALUE>) {
     const {
         className,
         reset,
@@ -332,7 +330,7 @@ export function AutoCompleteField<T, UPDATE_VALUE>(props: AutoCompleteFieldProps
         if (!modifiers.matchesPredicate) {
             return null;
         }
-        const relevantModifiers: IRenderModifiers = {
+        const relevantModifiers: SuggestFieldItemRendererModifierProps = {
             active: modifiers.active,
             disabled: modifiers.disabled,
             highlightingEnabled: highlightingEnabled,

package/src/components/AutocompleteField/index.ts

@@ -1,5 +1,6 @@
 import { createNewItemRendererFactory } from "./autoCompleteFieldUtils";
 export * from "./AutoCompleteField";
+export * from "./interfaces";
 export const autoCompleteFieldUtils = {
     createNewItemRendererFactory,
 };

package/src/components/AutocompleteField/interfaces.ts

@@ -1,4 +1,4 @@
-export interface IRenderModifiers {
+export interface SuggestFieldItemRendererModifierProps {
     active: boolean;
     disabled?: boolean;
     // The width styles that should be given to the rendered option items
@@ -6,7 +6,10 @@ export interface IRenderModifiers {
     highlightingEnabled: boolean;
 }
 
-/** Style object to be used in menu option items. */
+/** @deprecated (v25) use `SuggestFieldItemRendererModifierProps` */
+export type IRenderModifiers = SuggestFieldItemRendererModifierProps;
+
+/** @deprecated (v25) use `SuggestFieldItemRendererModifierProps["styleWidth"]` */
 export interface IElementWidth {
     minWidth: string;
     maxWidth: string;

package/src/components/Breadcrumb/BreadcrumbList.tsx

@@ -31,11 +31,6 @@ export interface BreadcrumbListProps
         Is only used if the breadcrumb item have not defined an own `onClick` handler.
     */
     onItemClick?(itemUrl: string | undefined, event: object): boolean | void;
-    /**
-        native attributes for the unordered HTML list (ul)
-        @deprecated will be removed because the BlueprintJS `Breadcrumbs` component does not support native `ul` attributes. Use `wrapperProps` as alternate way to add native attributes to a container `div` element.
-    */
-    htmlUlProps?: React.HTMLAttributes<HTMLUListElement>;
     /**
      * If set then a `div` element is used as wrapper.
      * It uses the attributes given via this property.
@@ -64,7 +59,6 @@ export const BreadcrumbList = ({
     className = "",
     // itemDivider = "/",
     onItemClick,
-    htmlUlProps,
     ignoreOverflow = false,
     latenOverflow = false,
     wrapperProps,
@@ -109,7 +103,6 @@ export const BreadcrumbList = ({
     const breadcrumbs = (
         <BlueprintBreadcrumbList
             {...otherBlueprintBreadcrumbsProps}
-            {...htmlUlProps}
             className={
                 `${eccgui}-breadcrumb__list` +
                 (latenOverflow ? ` ${eccgui}-breadcrumb__list--latenoverflow` : "") +

package/src/components/Button/Button.tsx

@@ -14,11 +14,6 @@ import Icon from "../Icon/Icon";
 import Badge, { BadgeProps } from "./../Badge/Badge";
 import Tooltip, { TooltipProps } from "./../Tooltip/Tooltip";
 
-/** @deprecated will be removed, there is no replacement */
-export type AnchorOrButtonProps =
-    | Omit<BlueprintButtonProps, "elementRef" | "icon" | "rightIcon">
-    | Omit<BlueprintAnchorButtonProps, "elementRef" | "icon" | "rightIcon">;
-
 interface AdditionalButtonProps {
     /**
      * Always use this when the button triggers an affirmative action, e.g. confirm a process.

package/src/components/Card/CardHeader.tsx

@@ -9,17 +9,9 @@ import CardTitle from "./CardTitle";
 
 export interface CardHeaderProps extends Omit<OverviewItemProps, "densityHigh" | "hasSpacing"> {
     children: JSX.Element | (JSX.Element | undefined | null)[] | null | undefined;
-    /**
-     * @deprecated use `whitespaceAmount` option of `<Card />`
-     */
-    densityHigh?: OverviewItemProps["densityHigh"];
-    /**
-     * @deprecated use `whitespaceAmount` option of `<Card />`
-     */
-    hasSpacing?: OverviewItemProps["hasSpacing"];
 }
 
-export const CardHeader = ({ children, className = "", densityHigh = true, ...otherProps }: CardHeaderProps) => {
+export const CardHeader = ({ children, className = "", ...otherProps }: CardHeaderProps) => {
     const actions: any[] = [];
     const description: any[] = [];
 
@@ -39,7 +31,7 @@ export const CardHeader = ({ children, className = "", densityHigh = true, ...ot
 
     return (
         <header>
-            <OverviewItem {...otherProps} className={`${eccgui}-card__header ` + className} densityHigh={densityHigh}>
+            <OverviewItem {...otherProps} className={`${eccgui}-card__header ` + className} densityHigh={true}>
                 {description.length > 0 && <OverviewItemDescription>{description}</OverviewItemDescription>}
                 {actions}
             </OverviewItem>

package/src/components/CodeAutocompleteField/CodeAutocompleteField.stories.tsx

@@ -1,9 +1,10 @@
 import React from "react";
+import { OverlaysProvider } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
 import { fn } from "@storybook/test";
 
 import { CodeAutocompleteField, CodeAutocompleteFieldProps } from "../../../index";
-import { IPartialAutoCompleteResult } from "../AutoSuggestion/AutoSuggestion";
+import { CodeAutocompleteFieldPartialAutoCompleteResult } from "../AutoSuggestion/AutoSuggestion";
 
 export default {
     title: "Forms/CodeAutocompleteField",
@@ -15,7 +16,9 @@ export default {
 } as Meta<typeof CodeAutocompleteField>;
 
 const Template: StoryFn<typeof CodeAutocompleteField> = (args) => (
-    <CodeAutocompleteField {...args}></CodeAutocompleteField>
+    <OverlaysProvider>
+        <CodeAutocompleteField {...args} />
+    </OverlaysProvider>
 );
 
 const resultList = ["find me", "item", "auto-completion result"];
@@ -25,7 +28,10 @@ const defaultProps: CodeAutocompleteFieldProps = {
     fetchSuggestions(
         inputString: string,
         cursorPosition: number
-    ): IPartialAutoCompleteResult | undefined | Promise<IPartialAutoCompleteResult | undefined> {
+    ):
+        | CodeAutocompleteFieldPartialAutoCompleteResult
+        | undefined
+        | Promise<CodeAutocompleteFieldPartialAutoCompleteResult | undefined> {
         const stringBeforeCursor = inputString.substring(0, cursorPosition);
         const lastSpaceIdx = stringBeforeCursor.lastIndexOf(" ");
         const searchWordStart = lastSpaceIdx >= 0 ? lastSpaceIdx + 1 : 0;

package/src/components/CodeAutocompleteField/CodeAutocompleteField.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-import { AutoSuggestion, AutoSuggestionProps } from "../AutoSuggestion/AutoSuggestion";
+import AutoSuggestion, { AutoSuggestionProps } from "../AutoSuggestion/AutoSuggestion";
 
 export type CodeAutocompleteFieldProps = AutoSuggestionProps;
 
@@ -12,7 +12,7 @@ export type CodeAutocompleteFieldProps = AutoSuggestionProps;
  * Example usage: input of a path string offering auto-completion for each single part of the path.
  */
 export function CodeAutocompleteField({ className, ...otherProps }: CodeAutocompleteFieldProps) {
-    // Currently this works only as an alias element for `MultiSelect`.
+    // Currently this works only as an alias element for `AutoSuggestion`.
     return (
         <AutoSuggestion
             className={`${eccgui}-codeautocompletefield` + (className ? ` ${className}` : "")}

package/src/components/Dialog/AlertDialog.tsx

@@ -19,9 +19,6 @@ export interface AlertDialogProps extends Omit<SimpleDialogProps, "intent"> {
     danger?: boolean;
 }
 
-// @deprecated
-export type IAlertDialogProps = AlertDialogProps;
-
 /**
  * Special element to display alert notification in modal dialogs.
  * Inherits all properties from `SimpleDialog`, except `intent`.

package/src/components/Dialog/Modal.tsx

@@ -5,7 +5,7 @@ import {
     Overlay2Props as BlueprintOverlayProps,
 } from "@blueprintjs/core";
 
-import { Utilities } from "../../common";
+import { utils } from "../../common";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { TestableComponent } from "../interfaces";
 
@@ -100,12 +100,12 @@ export const Modal = ({
         }
         if (usePortal && forceTopPosition) {
             const parentalPortal = modalElement.closest(`.${BlueprintClassNames.PORTAL}`) as HTMLElement;
-            const highestTopIndex = (Utilities.getGlobalVar("highestModalTopIndex") as unknown as number) ?? 0;
+            const highestTopIndex = (utils.getGlobalVar("highestModalTopIndex") as unknown as number) ?? 0;
             if (parentalPortal) {
                 const portalTopIndex = parseInt(getComputedStyle(parentalPortal).zIndex ?? 0, 10);
                 const newTopIndex = Math.max(portalTopIndex, highestTopIndex) + 1;
                 parentalPortal.style.zIndex = `${newTopIndex}`;
-                Utilities.setGlobalVar("highestModalTopIndex", newTopIndex);
+                utils.setGlobalVar("highestModalTopIndex", newTopIndex);
             }
         }
     };