@eccenca/gui-elements 24.2.0-rc.1 → 24.2.0

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

@@ -1,4 +1,5 @@
 import React from "react";
+import { IntentTypes } from "../../common/Intent";
 export interface FieldSetProps extends Omit<React.FieldsetHTMLAttributes<HTMLFieldSetElement>, "title"> {
     /**
      * Displays the fieldset inside a box.
@@ -7,20 +8,28 @@ export interface FieldSetProps extends Omit<React.FieldsetHTMLAttributes<HTMLFie
     boxed?: boolean;
     /**
      * The fieldsetsection is displayed with primary color scheme.
+     * @deprecated (v25) use `intent="primary"` instead.
      */
     hasStatePrimary?: boolean;
     /**
      * The fieldset section is displayed with success (some type of green) color scheme.
+     * @deprecated (v25) use `intent="success"` instead.
      */
     hasStateSuccess?: boolean;
     /**
      * The fieldset section is displayed with warning (some type of orange) color scheme.
+     * @deprecated (v25) use `intent="warning"` instead.
      */
     hasStateWarning?: boolean;
     /**
      * The fieldsetsection is displayed with danger (some type of red) color scheme.
+     * @deprecated (v25) use `intent="danger"` instead.
      */
     hasStateDanger?: boolean;
+    /**
+     * Intent state of the field item.
+     */
+    intent?: IntentTypes;
     /**
      * Optional helper text. If given then it is displayed after the title.
      */
@@ -39,5 +48,5 @@ export interface FieldSetProps extends Omit<React.FieldsetHTMLAttributes<HTMLFie
 /**
  * Displays a group of input elements.
  */
-export declare const FieldSet: ({ boxed, children, className, hasStatePrimary, hasStateSuccess, hasStateWarning, hasStateDanger, helperText, messageText, title, ...otherProps }: FieldSetProps) => React.JSX.Element;
+export declare const FieldSet: ({ boxed, children, className, hasStatePrimary, hasStateSuccess, hasStateWarning, hasStateDanger, intent, helperText, messageText, title, ...otherProps }: FieldSetProps) => React.JSX.Element;
 export default FieldSet;

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

@@ -120,6 +120,7 @@ declare const canonicalIcons: {
     "operation-filteredit": icons.CarbonIconType;
     "operation-filterremove": icons.CarbonIconType;
     "operation-filter": icons.CarbonIconType;
+    "operation-focus": icons.CarbonIconType;
     "operation-format-codeblock": icons.CarbonIconType;
     "operation-format-text-code": icons.CarbonIconType;
     "operation-format-text-bold": icons.CarbonIconType;

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { HTMLInputProps as BlueprintHTMLInputProps } from "@blueprintjs/core";
+import { HTMLInputProps as BlueprintHTMLInputProps, Intent as BlueprintIntent } from "@blueprintjs/core";
 import { MultiSelect as BlueprintMultiSelect, MultiSelectProps as BlueprintMultiSelectProps } from "@blueprintjs/select";
 import { TestableComponent } from "../interfaces";
 import { ContextOverlayProps } from "./../../index";
@@ -64,20 +64,28 @@ interface MultiSelectCommonProps<T> extends TestableComponent, Pick<BlueprintMul
      * Items that were newly created and not taken from the list will be post-fixed with this string.
      */
     newItemPostfix?: string;
+    /**
+     * Intent state of the multi select.
+     */
+    intent?: BlueprintIntent;
     /**
      * The input element is displayed with primary color scheme.
+     * @deprecated (v25) use `intent="primary"` instead.
      */
     hasStatePrimary?: boolean;
     /**
      * The input element is displayed with success (some type of green) color scheme.
+     * @deprecated (v25) use `intent="success"` instead.
      */
     hasStateSuccess?: boolean;
     /**
-     * The input element is displayed with success (some type of orange) color scheme.
+     * The input element is displayed with warning (some type of orange) color scheme.
+     * @deprecated (v25) use `intent="warning"` instead.
      */
     hasStateWarning?: boolean;
     /**
-     * The input element is displayed with success (some type of red) color scheme.
+     * The input element is displayed with danger (some type of red) color scheme.
+     * @deprecated (v25) use `intent="danger"` instead.
      */
     hasStateDanger?: boolean;
     /**
@@ -128,7 +136,7 @@ export type MultiSelectProps<T> = MultiSelectCommonProps<T> & ({
  * This component will be re-implemented as `Select` like element allowing multiple selections (or a `Select` option).
  * New name for this component is `MultiSuggestField`.
  */
-declare function MultiSelect<T>({ items, selectedItems: externalSelectedItems, prePopulateWithItems, itemId, itemLabel, onSelection, contextOverlayProps, tagInputProps, inputProps, runOnQueryChange, fullWidth, noResultText, newItemCreationText, newItemPostfix, hasStatePrimary, hasStateDanger, hasStateSuccess, hasStateWarning, disabled, createNewItemFromQuery, requestDelay, clearQueryOnSelection, className, "data-test-id": dataTestId, "data-testid": dataTestid, wrapperProps, searchPredicate, limitHeightOpened, ...otherMultiSelectProps }: MultiSelectProps<T>): React.JSX.Element;
+declare function MultiSelect<T>({ items, selectedItems: externalSelectedItems, prePopulateWithItems, itemId, itemLabel, onSelection, contextOverlayProps, tagInputProps, inputProps, runOnQueryChange, fullWidth, noResultText, newItemCreationText, newItemPostfix, hasStatePrimary, hasStateDanger, hasStateSuccess, hasStateWarning, disabled, createNewItemFromQuery, requestDelay, clearQueryOnSelection, className, "data-test-id": dataTestId, "data-testid": dataTestid, wrapperProps, searchPredicate, limitHeightOpened, intent, ...otherMultiSelectProps }: MultiSelectProps<T>): React.JSX.Element;
 declare namespace MultiSelect {
     var ofType: typeof BlueprintMultiSelect.ofType;
 }

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

@@ -1,5 +1,6 @@
 import React from "react";
 import { ToastProps as BlueprintToastProps } from "@blueprintjs/core";
+import { IntentTypes } from "../../common/Intent";
 import { TestableComponent } from "../interfaces";
 import { IconProps } from "./../Icon/Icon";
 import { TestIconProps } from "./../Icon/TestIcon";
@@ -12,23 +13,31 @@ export interface NotificationProps extends TestableComponent, Omit<BlueprintToas
      * Notification message that can be used as alternative to children elements.
      */
     message?: JSX.Element | string;
+    /**
+     * Intent state of the notification.
+     */
+    intent?: Extract<IntentTypes, "neutral" | "success" | "warning" | "danger" | "info">;
     /**
      * Notification has a neutral color scheme.
+     * @deprecated (v25) use `intent="neutral"` instead.
      */
     neutral?: boolean;
     /**
      * Notification is a success info.
      * This defines the colorization and the icon symbol.
+     * @deprecated (v25) use `intent="success"` instead.
      */
     success?: boolean;
     /**
      * Notification is a warning alert.
      * This defines the colorization and the icon symbol.
+     * @deprecated (v25) use `intent="warning"` instead.
      */
     warning?: boolean;
     /**
      * Notification is a danger alert.
      * This defines the colorization and the icon symbol.
+     * @deprecated (v25) use `intent="danger"` instead.
      */
     danger?: boolean;
     /**
@@ -52,5 +61,5 @@ export interface NotificationProps extends TestableComponent, Omit<BlueprintToas
  * Displays a notification message, optionally combined with depiction and further action buttons.
  * By default it uses colorization of an blueish info alert.
  */
-export declare const Notification: ({ actions, children, className, message, success, warning, danger, neutral, flexWidth, icon, timeout, wrapperProps, "data-test-id": dataTestId, "data-testid": dataTestid, ...otherProps }: NotificationProps) => React.JSX.Element;
+export declare const Notification: ({ actions, children, className, message, success, warning, danger, neutral, flexWidth, icon, timeout, wrapperProps, "data-test-id": dataTestId, "data-testid": dataTestid, intent, ...otherProps }: NotificationProps) => React.JSX.Element;
 export default Notification;

package/dist/types/components/OverviewItem/OverviewItemActions.d.ts

@@ -4,10 +4,22 @@ export interface OverviewItemActionsProps extends React.HTMLAttributes<HTMLDivEl
      * Display it only when the parent `OverviewItem` is hovered or focused.
      */
     hiddenInteractions?: boolean;
+    /**
+     * Delay the rendering of the children by a time in milliseconds.
+     * Could be used to prevent browser freezes for the initial `OverviewItem` rendering.
+     * In general, it is better to fix the cause, i.e. action elements that are expensive to initialize/render should be
+     * optimized or replaced etc. This workaround only prevents the browser from getting blocked completely and does NOT
+     * solve the actual performance issue.
+     */
+    delayDisplayChildren?: number;
+    /**
+     * Display element while the rendering of the actual children is delayed.
+     */
+    delaySkeleton?: JSX.Element;
 }
 /**
  * Contains an arbitrary number of elements for user-interactions.
  * It does not make sense to include more than 1 or 2 of these elements within `OverviewItem`.
  */
-export declare const OverviewItemActions: ({ children, className, hiddenInteractions, ...restProps }: OverviewItemActionsProps) => React.JSX.Element;
+export declare const OverviewItemActions: ({ children, className, hiddenInteractions, delayDisplayChildren, delaySkeleton, ...restProps }: OverviewItemActionsProps) => React.JSX.Element;
 export default OverviewItemActions;

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

@@ -3,13 +3,18 @@ import { OverlayProps as BlueprintOverlayProps, SpinnerProps as BlueprintSpinner
 type SpinnerPosition = "local" | "inline" | "global";
 type SpinnerSize = "tiny" | "small" | "medium" | "large" | "xlarge" | "inherit";
 type SpinnerStroke = "thin" | "medium" | "bold";
-type Intent = "inherit" | "primary" | "success" | "warning" | "danger";
+type Intent = "inherit" | "primary" | "success" | "warning" | "danger" | "none";
 /** A spinner that is either displayed globally or locally. */
-export interface SpinnerProps extends Omit<BlueprintSpinnerProps, "size"> {
+export interface SpinnerProps extends Omit<BlueprintSpinnerProps, "size" | "intent"> {
     /**
      * intent value or a valid css color definition
+     * @deprecated (v25) it will allow in the future only a color value string and that for other states the intent property needs to be used
      */
     color?: Intent | string;
+    /**
+     * Intent state of the field item.
+     */
+    intent?: Intent;
     /**
      * Additional CSS class names.
      */
@@ -53,5 +58,5 @@ export interface SpinnerProps extends Omit<BlueprintSpinnerProps, "size"> {
      */
     description?: string;
 }
-export declare const Spinner: ({ className, color, position, size, stroke, showLocalBackdrop, delay, overlayProps, description, ...otherProps }: SpinnerProps) => React.JSX.Element | null;
+export declare const Spinner: ({ className, color, intent, position, size, stroke, showLocalBackdrop, delay, overlayProps, description, ...otherProps }: SpinnerProps) => React.JSX.Element | null;
 export default Spinner;

package/dist/types/components/Table/TableContainer.d.ts

@@ -2,11 +2,11 @@ import React from "react";
 import { DataTableHeader as CarbonDataTableHeader, DataTableProps as CarbonDataTableProps, DataTableRow as CarbonDataTableRow } from "@carbon/react";
 import { TableContainerProps as CarbonTableContainerProps } from "@carbon/react/es/components/DataTable/TableContainer";
 import { TableRowHeightSize } from "./Table";
-interface TableDataContainerProps extends Omit<CarbonDataTableProps<Array<Omit<CarbonDataTableRow<Array<CarbonDataTableHeader>>, "cells">>, Array<CarbonDataTableHeader>>, "size" | "overflowMenuOnHover" | "stickyHeader" | "useStaticWidth">, React.TableHTMLAttributes<HTMLTableElement> {
+export interface TableDataContainerProps extends Omit<CarbonDataTableProps<Array<Omit<CarbonDataTableRow<Array<CarbonDataTableHeader>>, "cells">>, Array<CarbonDataTableHeader>>, "size" | "overflowMenuOnHover" | "stickyHeader" | "useStaticWidth">, React.TableHTMLAttributes<HTMLTableElement> {
     children(signature: any): JSX.Element;
     size?: TableRowHeightSize;
 }
-interface TableSimpleContainerProps extends Omit<CarbonTableContainerProps, "description" | "stickyHeader" | "title" | "useStaticWidth">, React.HTMLAttributes<HTMLDivElement> {
+export interface TableSimpleContainerProps extends Omit<CarbonTableContainerProps, "description" | "stickyHeader" | "title" | "useStaticWidth">, React.HTMLAttributes<HTMLDivElement> {
     children?: JSX.Element;
 }
 export type TableContainerProps = TableDataContainerProps | TableSimpleContainerProps;

package/dist/types/components/Table/TableExpandRow.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { TableExpandRow as CarbonTableExpandRow } from "@carbon/react";
 type CarbonTableExpandRowProps = React.ComponentProps<typeof CarbonTableExpandRow>;
-export interface TableExpandRowProps extends Omit<CarbonTableExpandRowProps, "ref" | "ariaLabel" | "expandIconDescription" | "aria-label">, React.HTMLAttributes<HTMLTableRowElement> {
+export interface TableExpandRowProps extends Omit<CarbonTableExpandRowProps, "children" | "ref" | "ariaLabel" | "expandIconDescription" | "aria-label">, React.HTMLAttributes<HTMLTableRowElement> {
     /**
      * This text is displayed as tooltip for the button that toggles the expanded/collapsed state.
      */

package/dist/types/components/Table/index.d.ts

@@ -5,3 +5,4 @@ export * from "./TableExpandRow";
 export * from "./TableExpandHeader";
 export * from "./TableCell";
 export { TableHead, TableBody, TableExpandedRow, TableHeader } from "@carbon/react";
+export type { TableHeadProps, TableBodyProps, TableExpandedRowProps, TableHeaderProps, DataTableRenderProps } from "@carbon/react";

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

@@ -25,6 +25,14 @@ export interface TooltipProps extends Omit<BlueprintTooltipProps, "position"> {
      * Set properties for the Markdown parser
      */
     markdownProps?: Omit<MarkdownProps, "children">;
+    /**
+     * Use the overlay target as placeholder before the real `<Tooltip /` is rendered on first hover or focus event.
+     * This can boost performance massive but it is currently experimental.
+     * Placeholders are never used when `disabled`, `defaultIsOpen` or `isOpen` is set to `true`, or if `renderTarget` is set.
+     * If the tooltip `content` is only a string then a placeholder is automatically used, too.
+     * You can prevent it in any case by setting it to `false`.
+     */
+    usePlaceholder?: boolean;
 }
-export declare const Tooltip: ({ children, content, className, size, addIndicator, markdownEnabler, markdownProps, ...otherProps }: TooltipProps) => React.JSX.Element;
+export declare const Tooltip: ({ children, content, className, size, addIndicator, markdownEnabler, markdownProps, usePlaceholder, hoverOpenDelay, ...otherTooltipProps }: TooltipProps) => React.JSX.Element | null;
 export default Tooltip;

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-rc.1",
+    "version": "24.2.0",
     "license": "Apache-2.0",
     "homepage": "https://github.com/eccenca/gui-elements",
     "bugs": "https://github.com/eccenca/gui-elements/issues",
@@ -94,12 +94,14 @@
         "react-flow-renderer": "9.7.4",
         "react-flow-renderer-lts": "npm:react-flow-renderer@^10.3.17",
         "react-inlinesvg": "^3.0.3",
-        "react-markdown": "^8.0.7",
+        "react-markdown": "^10.1.0",
+        "react-markdown-deprecated": "npm:react-markdown@^8.0.7",
         "react-syntax-highlighter": "^15.6.1",
-        "rehype-raw": "^6.1.1",
-        "remark-definition-list": "^1.2.0",
-        "remark-gfm": "^3.0.1",
-        "remark-parse": "^10.0.2",
+        "rehype-external-links": "^3.0.0",
+        "rehype-raw": "^7.0.0",
+        "remark-definition-list": "^2.0.0",
+        "remark-gfm": "^4.0.1",
+        "remark-parse": "^11.0.0",
         "reset-css": "^5.0.2",
         "unified": "^11.0.5",
         "wicg-inert": "^3.1.3",
@@ -176,7 +178,8 @@
     },
     "resolutions": {
         "**/@types/react": "^17.0.85",
-        "node-sass-package-importer/**/postcss": "^8.4.49"
+        "node-sass-package-importer/**/postcss": "^8.4.49",
+        "hast-util-from-parse5": "8.0.0"
     },
     "husky": {
         "hooks": {

package/src/cmem/markdown/Markdown.tsx

@@ -1,15 +1,21 @@
 import React from "react";
 import ReactMarkdown from "react-markdown";
-import { PluggableList } from "react-markdown/lib/react-markdown";
+/**
+ * Recreate the old type to provide support until next major
+ */
+import { PluggableList as PluggableListDeprecated } from "react-markdown-deprecated/lib/react-markdown";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 // @ts-ignore: No declaration file for module (TODO: should be @ts-expect-error but GUI elements is used inside project with `noImplicitAny=false`)
 import remarkTypograf from "@mavrin/remark-typograf";
+import rehypeExternalLinks from "rehype-external-links";
 import rehypeRaw from "rehype-raw";
 import { remarkDefinitionList } from "remark-definition-list";
 import remarkGfm from "remark-gfm";
+import { PluggableList as PluggableListUnified } from "unified";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { HtmlContentBlock, HtmlContentBlockProps, TestableComponent } from "../../index";
+type PluggableList = PluggableListUnified | PluggableListDeprecated;
 
 export interface MarkdownProps extends TestableComponent {
     children: string;
@@ -35,6 +41,7 @@ export interface MarkdownProps extends TestableComponent {
     /**
      * Additional reHype plugins to execute.
      * @see https://github.com/remarkjs/react-markdown#architecture
+     * @deprecated (v25) this property won't support `PluggableList` from "react-markdown/lib/react-markdown" with the next major version, only the one from `unified` will be supported then.
      */
     reHypePlugins?: PluggableList;
     /**
@@ -54,9 +61,9 @@ const configDefault = {
         @see https://github.com/remarkjs/react-markdown#api
     */
     // @see https://github.com/remarkjs/remark/blob/main/doc/plugins.md#list-of-plugins
-    remarkPlugins: [remarkGfm, remarkTypograf, remarkDefinitionList] as PluggableList,
+    remarkPlugins: [remarkGfm, remarkTypograf, remarkDefinitionList] as PluggableListUnified,
     // @see https://github.com/rehypejs/rehype/blob/main/doc/plugins.md#list-of-plugins
-    rehypePlugins: [] as PluggableList,
+    rehypePlugins: [] as PluggableListUnified,
     allowedElements: [
         // default markdown
         "a",
@@ -110,6 +117,13 @@ export const Markdown = ({
     htmlContentBlockProps,
     ...otherProps
 }: MarkdownProps) => {
+    const configHtmlExternalLinks = {
+        rel: ["nofollow"],
+        target: linkTargetName,
+    };
+
+    configDefault.rehypePlugins = configDefault.rehypePlugins.concat([[rehypeExternalLinks, configHtmlExternalLinks]]);
+
     const configHtml = allowHtml
         ? {
               rehypePlugins: [...configDefault.rehypePlugins].concat([rehypeRaw]),
@@ -132,14 +146,10 @@ export const Markdown = ({
         ...configDefault,
         ...configHtml,
         ...configTextOnly,
-        linkTarget: linkTargetName
-            ? (href: string, _children: any, _title: string) => {
-                  const linkTarget = href.charAt(0) !== "#" ? linkTargetName : "";
-                  return linkTarget as React.HTMLAttributeAnchorTarget;
-              }
-            : undefined,
         components: {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             code(props: any) {
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
                 const { children, className, node, inline, ...rest } = props;
                 const match = /language-(\w+)/.exec(className || "");
                 return match ? (
@@ -159,14 +169,15 @@ export const Markdown = ({
                 );
             },
         },
+        allowedElements,
     };
-    allowedElements && (reactMarkdownProperties.allowedElements = allowedElements);
-    reHypePlugins &&
-        reHypePlugins.forEach(
-            (plugin) => (reactMarkdownProperties.rehypePlugins = [...reactMarkdownProperties.rehypePlugins, plugin])
+
+    if (reHypePlugins) {
+        reactMarkdownProperties.rehypePlugins = reactMarkdownProperties.rehypePlugins.concat(
+            reHypePlugins as PluggableListUnified
         );
+    }
 
-    // @ts-ignore because against the lib spec it does not allow a function for linkTarget.
     const markdownDisplay = <ReactMarkdown {...reactMarkdownProperties} />;
     return inheritBlock && !(otherProps["data-test-id"] || htmlContentBlockProps) ? (
         markdownDisplay

package/src/cmem/markdown/highlightSearchWords.test.ts

@@ -9,7 +9,12 @@ describe("Highlight search words reHype plugin", () => {
         const highlightSearchWordsPlugin = markdownUtils.highlightSearchWordsPluginFactory(searchQuery);
         const highlightSearchWordTransformer = highlightSearchWordsPlugin();
         const textNode = (text: string): Text => ({ type: "text", value: text });
-        const markNode = (text: string): Element => ({ type: "element", tagName: "mark", children: [textNode(text)] });
+        const markNode = (text: string): Element => ({
+            type: "element",
+            tagName: "mark",
+            properties: {},
+            children: [textNode(text)],
+        });
         const result = highlightSearchWordTransformer(
             {
                 type: "root",
@@ -17,12 +22,13 @@ describe("Highlight search words reHype plugin", () => {
                     {
                         type: "element",
                         tagName: "p",
+                        properties: {},
                         children: [textNode("Text with abc query words xyz.")],
                     },
                 ],
             },
             new VFile(),
-            // eslint-disable-next-line @typescript-eslint/no-empty-function
+
             () => {}
         );
         const rootChildren = (result as Root).children;

package/src/cmem/markdown/highlightSearchWords.ts

@@ -25,7 +25,12 @@ const highlightSearchWordsPluginFactory = (searchQuery: string | undefined) => {
         let matchArray = multiWordRegex.exec(text);
         while (matchArray !== null) {
             result.push(createTextNode(text.slice(offset, matchArray.index)));
-            result.push({ type: "element", tagName: "mark", children: [createTextNode(matchArray[0])] });
+            result.push({
+                type: "element",
+                tagName: "mark",
+                properties: {},
+                children: [createTextNode(matchArray[0])],
+            });
             offset = multiWordRegex.lastIndex;
             matchArray = multiWordRegex.exec(text);
         }

package/src/common/Intent/index.ts

@@ -1,16 +1,16 @@
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { Intent as BlueprintIntent } from "@blueprintjs/core";
 
-export type IntentTypes = "none" | "neutral" | "primary" | "accent" | "info" | "success" | "warning" | "danger";
+export type IntentBlueprint = BlueprintIntent;
+export const DefinitionsBlueprint = BlueprintIntent;
+
+export type IntentTypes = IntentBlueprint | "neutral" | "accent" | "info";
 
 export const Definitions: { [key: string]: IntentTypes } = {
-    PRIMARY: "primary",
+    ...DefinitionsBlueprint,
     ACCENT: "accent",
     NEUTRAL: "neutral",
-    NONE: "none",
-    SUCCESS: "success",
     INFO: "info",
-    WARNING: "warning",
-    DANGER: "danger",
 };
 
 export const intentClassName = (intent: IntentTypes) => {

package/src/components/AutoSuggestion/AutoSuggestion.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import React, { useEffect, useMemo, useState } from "react";
 import { Classes as BlueprintClassNames } from "@blueprintjs/core";
 import { EditorView, Rect } from "@codemirror/view";
@@ -207,7 +208,7 @@ const AutoSuggestion = ({
     const suggestionRequestData = React.useRef<RequestMetaData>({ requestId: undefined });
     const [pathValidationPending, setPathValidationPending] = React.useState(false);
     const validationRequestData = React.useRef<RequestMetaData>({ requestId: undefined });
-    const [, setErrorMarkers] = React.useState<any[]>([]);
+    const errorMarkers = React.useRef<any[]>([])
     const [validationResponse, setValidationResponse] = useState<CodeAutocompleteFieldValidationResult | undefined>(
         undefined
     );
@@ -219,8 +220,8 @@ const AutoSuggestion = ({
         CodeAutocompleteFieldSuggestionWithReplacementInfo | undefined
     >(undefined);
     const [cm, setCM] = React.useState<EditorView>();
-    const currentCm = React.useRef<EditorView>()
-    currentCm.current = cm
+    const currentCm = React.useRef<EditorView>();
+    currentCm.current = cm;
     const isFocused = React.useRef(false);
     const autoSuggestionDivRef = React.useRef<HTMLDivElement>(null);
     /** Mutable editor state, since this needs to be current in scope of the SingleLineEditorComponent. */
@@ -242,16 +243,16 @@ const AutoSuggestion = ({
                 changes: { from: 0, to: currentCm.current.state?.doc.length, insert: initialValue },
             });
             // Validate initial value change
-            checkValuePathValidity(initialValue)
+            checkValuePathValidity(initialValue);
         }
     }, [initialValue, reInitOnInitialValueChange]);
 
     React.useEffect(() => {
-        if(currentCm.current) {
+        if (currentCm.current) {
             // Validate initial value
-            checkValuePathValidity(initialValue)
+            checkValuePathValidity(initialValue);
         }
-    }, [currentCm.current!!])
+    }, [!!currentCm.current]);
 
     const setCurrentIndex = (newIndex: number) => {
         editorState.index = newIndex;
@@ -263,10 +264,9 @@ const AutoSuggestion = ({
         editorState.cm = cm;
     }, [cm, editorState]);
 
-    const dispatch = // eslint-disable-next-line @typescript-eslint/no-empty-function
-        (
-            typeof editorState?.cm?.dispatch === "function" ? editorState?.cm?.dispatch : () => {}
-        ) as EditorView["dispatch"];
+    const dispatch = (
+        typeof editorState?.cm?.dispatch === "function" ? editorState?.cm?.dispatch : () => {}
+    ) as EditorView["dispatch"];
 
     React.useEffect(() => {
         editorState.dropdownShown = shouldShowDropdown;
@@ -288,8 +288,9 @@ const AutoSuggestion = ({
                 return () => removeMarkFromText({ view: cm, from, to });
             }
         } else {
-            //remove redundant markers
-            cm && removeMarkFromText({ view: cm, from: 0, to: cm.state?.doc.length });
+            if (cm) {
+                removeMarkFromText({ view: cm, from: 0, to: cm.state?.doc.length });
+            }
         }
         return;
     }, [highlightedElement, selectedTextRanges, cm]);
@@ -298,32 +299,32 @@ const AutoSuggestion = ({
     React.useEffect(() => {
         const parseError = validationResponse?.parseError;
         if (cm) {
+            const clearCurrentErrorMarker = () => {
+                if(errorMarkers.current.length) {
+                    const [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);
-                const { from, to } = markText({
+                clearCurrentErrorMarker()
+                const {from, to} = markText({
                     view: cm,
                     from: fromOffset,
                     to: toOffset,
                     className: `${eccgui}-autosuggestion__text--highlighted-error`,
                     title: message,
                 });
-
-                setErrorMarkers((previousMarkers) => {
-                    previousMarkers.forEach((m) => removeMarkFromText({ view: cm, from: m.from, to: m.to }));
-                    return [from, to];
-                });
+                errorMarkers.current = [from, to]
             } else {
-                // Valid, clear all error markers
-                setErrorMarkers((previous) => {
-                    previous.forEach((m) => removeMarkFromText({ view: cm, from: m.from, to: m.to }));
-                    return [];
-                });
+                clearCurrentErrorMarker()
             }
         }
 
         const isValid = validationResponse?.valid === undefined || validationResponse.valid;
-        onInputChecked && onInputChecked(isValid);
+        onInputChecked?.(isValid);
     }, [validationResponse?.valid, validationResponse?.parseError, cm, onInputChecked]);
 
     /** generate suggestions and also populate the replacement indexes dict */
@@ -390,6 +391,7 @@ const AutoSuggestion = ({
             try {
                 const result: CodeAutocompleteFieldValidationResult | undefined = await checkInput(inputString);
                 setValidationResponse(result);
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
             } catch (e) {
                 setValidationResponse(undefined);
                 // TODO: Error handling
@@ -425,6 +427,7 @@ const AutoSuggestion = ({
                         setSuggestionResponse(result);
                     }
                 }
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
             } catch (e) {
                 setSuggestionResponse(undefined);
                 // TODO: Error handling
@@ -445,12 +448,14 @@ const AutoSuggestion = ({
         [asyncHandleEditorInputChange, autoCompletionRequestDelay]
     );
 
-    const handleChange = (val: string) => {
-        value.current = val;
-        checkValuePathValidity.cancel();
-        checkValuePathValidity(value.current);
-        onChange(val);
-    };
+    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) => {
         //cursor here is offset from line 1, autosuggestion works with cursor per-line.
@@ -534,8 +539,13 @@ const AutoSuggestion = ({
     };
 
     const handleInputFocus = (focusState: boolean) => {
-        onFocusChange && onFocusChange(focusState);
-        focusState ? setShouldShowDropdown(true) : closeDropDown();
+        onFocusChange?.(focusState);
+        if (focusState) {
+            setShouldShowDropdown(true);
+        } else {
+            closeDropDown();
+        }
+
         if (!isFocused.current && focusState) {
             // Just got focus
             // Clear suggestions and repeat suggestion request, something else might have changed while this component was not focused