@eccenca/gui-elements 25.1.0-rc.4 → 25.2.0-featureupgradeblueprintjsv6cmem7139.0

package/src/common/utils/colorHash.ts

@@ -1,11 +1,11 @@
-import Color from "color";
+import Color, { ColorInstance } from "color";
 
 import { CLASSPREFIX as eccgui, COLORMINDISTANCE } from "../../configuration/constants";
 
 import { colorCalculateDistance } from "./colorCalculateDistance";
 import CssCustomProperties from "./CssCustomProperties";
 
-type ColorOrFalse = Color | false;
+type ColorOrFalse = ColorInstance | false;
 export type ColorWeight = 100 | 300 | 500 | 700 | 900;
 export type PaletteGroup = "identity" | "semantic" | "layout" | "extra";
 
@@ -20,10 +20,10 @@ export interface getEnabledColorsProps {
     // includeMixedColors?: boolean;
 }
 
-const getEnabledColorsFromPaletteCache = new Map<string, Color[]>();
+const getEnabledColorsFromPaletteCache = new Map<string, ColorInstance[]>();
 const getEnabledColorPropertiesFromPaletteCache = new Map<string, [string, string][]>();
 
-export function getEnabledColorsFromPalette(props: getEnabledColorsProps): Color[] {
+export function getEnabledColorsFromPalette(props: getEnabledColorsProps): ColorInstance[] {
     const configId = JSON.stringify({
         includePaletteGroup: props.includePaletteGroup,
         includeColorWeight: props.includeColorWeight,
@@ -39,7 +39,7 @@ export function getEnabledColorsFromPalette(props: getEnabledColorsProps): Color
         configId,
         colorPropertiesFromPalette.map((color) => {
             return Color(color[1]);
-        })
+        }),
     );
 
     return getEnabledColorsFromPaletteCache.get(configId)!;
@@ -108,7 +108,7 @@ function getColorcode(text: string): ColorOrFalse {
 
 interface textToColorOptions {
     /** Stack of colors that are allowed to be returned. */
-    enabledColors: Color[] | "all" | getEnabledColorsProps;
+    enabledColors: ColorInstance[] | "all" | getEnabledColorsProps;
     /** Return input text if it represents a valid color string, e.g. `#000` or `black`. */
     returnValidColorsDirectly: boolean;
 }
@@ -138,7 +138,7 @@ export function textToColorHash({
     }
 
     if (!color) {
-        color = getColorcode(stringToHexColorHash(text)) as Color;
+        color = getColorcode(stringToHexColorHash(text)) as ColorInstance;
     }
 
     if (options.enabledColors === "all" && color) {
@@ -146,13 +146,9 @@ export function textToColorHash({
         return color.hex().toString();
     }
 
-    let enabledColors = [] as Color[];
-
-    if (Array.isArray(options.enabledColors)) {
-        enabledColors = options.enabledColors;
-    } else {
-        enabledColors = getEnabledColorsFromPalette(options.enabledColors as getEnabledColorsProps);
-    }
+    const enabledColors = Array.isArray(options.enabledColors)
+        ? options.enabledColors
+        : getEnabledColorsFromPalette(options.enabledColors as getEnabledColorsProps);
 
     if (enabledColors.length === 0) {
         // eslint-disable-next-line no-console
@@ -160,7 +156,7 @@ export function textToColorHash({
         return false;
     }
 
-    return nearestColorNeighbour(color, enabledColors as Color[])
+    return nearestColorNeighbour(color, enabledColors as ColorInstance[])
         .hex()
         .toString();
 }
@@ -190,7 +186,7 @@ function stringToHexColorHash(inputString: string): string {
     return integerToHexColor(integerHash);
 }
 
-function nearestColorNeighbour(color: Color, enabledColors: Color[]): Color {
+function nearestColorNeighbour(color: ColorInstance, enabledColors: ColorInstance[]): ColorInstance {
     const nearestNeighbour = enabledColors.reduce(
         (nearestColor, enabledColorsItem) => {
             const distance = colorCalculateDistance({
@@ -207,7 +203,7 @@ function nearestColorNeighbour(color: Color, enabledColors: Color[]): Color {
         {
             distance: Number.POSITIVE_INFINITY,
             color: enabledColors[0],
-        }
+        },
     );
     return nearestNeighbour.color;
 }

package/src/common/utils/getColorConfiguration.ts

@@ -57,8 +57,8 @@ const getColorConfiguration = (configId: colorconfigs): Record<string, string> =
                     } catch {
                         return [setting[0], undefined];
                     }
-                })
-            ) as Record<string, string>
+                }),
+            ) as Record<string, string>,
         );
     }
     return colorConfigurationMemo.get(configId)!;

package/src/common/utils/openInNewTab.ts

@@ -3,7 +3,7 @@
 export const openInNewTab = (
     event: React.MouseEvent<HTMLAnchorElement>,
     handler?: (e: React.MouseEvent<HTMLAnchorElement>) => void,
-    url?: string
+    url?: string,
 ) => {
     //if ctrl key or cmd key bypass click handler and delegation open in the background new tab
     if (url && (event.ctrlKey || event.metaKey)) {

package/src/common/utils/reduceToText.tsx

@@ -11,7 +11,7 @@ export interface ReduceToTextFuncType {
          *  Component or text to reduce HTML markup content to plain text.
          */
         input: React.ReactNode | React.ReactNode[] | string,
-        options?: Pick<TextReducerProps, "maxNodes" | "maxLength" | "decodeHtmlEntities" | "decodeHtmlEntitiesOptions">
+        options?: Pick<TextReducerProps, "maxNodes" | "maxLength" | "decodeHtmlEntities" | "decodeHtmlEntitiesOptions">,
     ): string;
 }
 

package/src/components/Accordion/AccordionItem.tsx

@@ -9,7 +9,8 @@ type sizeOptions = "none" | "small" | "medium" | "large";
 // workaround to get type/interface
 type CarbonAccordionItemProps = React.ComponentProps<typeof CarbonAccordionItem>;
 export interface AccordionItemProps
-    extends Omit<CarbonAccordionItemProps, "title" | "iconDescription" | "renderExpando">,
+    extends
+        Omit<CarbonAccordionItemProps, "title" | "iconDescription" | "renderExpando">,
         Omit<React.LiHTMLAttributes<HTMLLIElement>, "title"> {
     /**
      * additional user class name
@@ -18,7 +19,7 @@ export interface AccordionItemProps
     /**
      * header of accordion item
      */
-    label: string | JSX.Element;
+    label: string | React.JSX.Element;
     /**
      * use full available width for content
      */

package/src/components/Accordion/Stories/AccordionItem.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { LoremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { Accordion, AccordionItem, HtmlContentBlock } from "../../../../index";
+import { Accordion, AccordionItem, HtmlContentBlock } from "../../../components";
 
 export default {
     title: "Components/Accordion/AccordionItem",

package/src/components/Application/ApplicationSidebarNavigation.tsx

@@ -4,8 +4,12 @@ import { SideNav as CarbonSideNav, SideNavProps as CarbonSideNavProps } from "@c
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface ApplicationSidebarNavigationProps
-    extends Omit<CarbonSideNavProps, "ref" | "defaultExpanded" | "isPersistent" | "isFixedNav" | "isChildOfHeader">,
-        React.HTMLAttributes<HTMLElement> {}
+    extends
+        Omit<CarbonSideNavProps, "ref" | "defaultExpanded" | "isPersistent" | "isFixedNav" | "isChildOfHeader">,
+        React.HTMLAttributes<HTMLElement> {
+    children: React.ReactNode;
+    className?: string;
+}
 
 export const ApplicationSidebarNavigation = ({
     children,

package/src/components/Application/ApplicationTitle.tsx

@@ -60,7 +60,15 @@ export const ApplicationTitle = ({
             <span className={`${eccgui}-application__title--content`}>
                 {!!depiction && (
                     <>
-                        <span className={`${eccgui}-application__title--depiction`}>{depiction}</span>
+                        <span className={`${eccgui}-application__title--depiction`}>
+                            {React.isValidElement(depiction) ? (
+                                depiction
+                            ) : depiction instanceof HTMLElement ? (
+                                <>{depiction.outerHTML}</>
+                            ) : (
+                                depiction
+                            )}
+                        </span>
                     </>
                 )}
                 {!!prefix && (

package/src/components/Application/ApplicationToolbarAction.tsx

@@ -7,7 +7,8 @@ import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 // workaround to get type/interface
 type CarbonHeaderGlobalActionProps = React.ComponentProps<typeof CarbonHeaderGlobalAction>;
 export interface ApplicationToolbarActionProps
-    extends CarbonHeaderGlobalActionProps,
+    extends
+        CarbonHeaderGlobalActionProps,
         Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children" | "onClick"> {}
 
 export const ApplicationToolbarAction = ({

package/src/components/Application/_header.scss

@@ -52,19 +52,22 @@ $shell-header-icon-03: $eccgui-color-applicationheader-text !default;
 /// Item link
 $shell-header-link: $blue-60 !default;
 
+/// Height
+$shell-header-height: mini-units(8) !default;
+
 // load library sub component
 @import "~@carbon/react/scss/components/ui-shell/header/index";
 
 // tweak original layout
 
 .#{$prefix}--header {
-    height: mini-units(8);
+    height: $shell-header-height;
 }
 
 .#{$prefix}--header__action,
 .#{$prefix}--header__action.#{$prefix}--btn--icon-only {
-    width: mini-units(8);
-    height: mini-units(8);
+    width: $shell-header-height;
+    height: $shell-header-height;
     padding-block-start: 0;
     background-color: transparent;
 
@@ -128,7 +131,7 @@ span.#{$prefix}--header__name {
 }
 
 .#{$prefix}--header__menu .#{$prefix}--header__menu-item {
-    height: mini-units(8);
+    height: $shell-header-height;
 }
 
 // tweak original colors (as long as config does not work properly)
@@ -267,15 +270,15 @@ a.#{$prefix}--header__menu-item:focus > svg {
     // adjust position of all other modal dialogs
 
     .#{$ns}-dialog-container {
-        top: mini-units(8);
-        left: mini-units(8);
-        width: calc(100% - #{mini-units(8)});
-        min-height: calc(100% - #{mini-units(8)});
+        top: $shell-header-height;
+        left: $shell-header-height;
+        width: calc(100% - #{$shell-header-height});
+        min-height: calc(100% - #{$shell-header-height});
     }
 
     .#{$eccgui}-dialog__wrapper {
-        max-width: calc(100vw - #{mini-units(8)} - #{2 * $eccgui-size-block-whitespace});
-        max-height: calc(100vh - #{mini-units(8)} - #{2 * $eccgui-size-block-whitespace});
+        max-width: calc(100vw - #{$shell-header-height} - #{2 * $eccgui-size-block-whitespace});
+        max-height: calc(100vh - #{$shell-header-height} - #{2 * $eccgui-size-block-whitespace});
         margin: 0;
     }
 }

package/src/components/Application/stories/ColorPalettes.stories.tsx

@@ -1,6 +1,7 @@
 import React from "react";
-import { render } from "react-dom";
+import { createRoot } from "react-dom/client";
 import { loremIpsum } from "react-lorem-ipsum";
+import { Classes as BlueprintClasses } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
 import Color from "color";
 
@@ -183,7 +184,9 @@ const ColorPaletteConfigurator = ({
 
     React.useEffect(() => {
         if (refConfigurator.current) {
-            const panelConfig = document.getElementById("bp5-tab-panel_colorconfig_editor");
+            const panelConfig = document.getElementById(
+                `${BlueprintClasses.getClassNamespace()}-tab-panel_colorconfig_editor`,
+            );
             if (panelConfig) {
                 const warnings = Array.from(panelConfig.getElementsByClassName("eccgui-badge"))
                     .map((warning: Element) => {
@@ -194,10 +197,11 @@ const ColorPaletteConfigurator = ({
                     }, 0 as number);
                 const warningsTarget = document.getElementById("sumWarnings");
                 if (warningsTarget) {
+                    const warningsRoot = createRoot(warningsTarget);
                     if (warnings > 0) {
-                        render(<Badge intent={"warning"}>{warnings}</Badge>, warningsTarget);
+                        warningsRoot.render(<Badge intent={"warning"}>{warnings}</Badge>);
                     } else {
-                        render(<></>, warningsTarget);
+                        warningsRoot.render(<></>);
                     }
                 }
             }
@@ -238,7 +242,7 @@ const ColorPaletteConfigurator = ({
     const fixColorByLuminosity = (
         color: Color,
         colorTest: Color,
-        testFn: (color1: Color, color2: Color) => boolean
+        testFn: (color1: Color, color2: Color) => boolean,
     ) => {
         let fixedColor = color as Color;
         let check = testFn(fixedColor, colorTest);
@@ -306,7 +310,7 @@ const ColorPaletteConfigurator = ({
                                                         // eslint-disable-next-line no-console
                                                         console.log(`${c1.hex()} -> ${distance}`);
                                                         return distance < minimalDistance;
-                                                    }
+                                                    },
                                                 );
                                                 setPaletteData({ ...colors });
                                             }}
@@ -332,12 +336,12 @@ const ColorPaletteConfigurator = ({
                                                         // eslint-disable-next-line no-console
                                                         console.log(`${c1.hex()} -> ${distance}`);
                                                         return distance < minimalDistance;
-                                                    }
+                                                    },
                                                 );
                                                 setPaletteData({ ...colors });
                                             }}
                                         />
-                                    </MenuItem>
+                                    </MenuItem>,
                                 );
                             }
                         }
@@ -391,7 +395,7 @@ const ColorPaletteConfigurator = ({
                                                                 // eslint-disable-next-line no-console
                                                                 console.log(`${c1.hex()} -> ${contrast}`);
                                                                 return contrast < minimalContrast;
-                                                            }
+                                                            },
                                                         );
                                                         setPaletteData({ ...colors });
                                                     }}
@@ -415,12 +419,12 @@ const ColorPaletteConfigurator = ({
                                                                 // eslint-disable-next-line no-console
                                                                 console.log(`${c1.hex()} -> ${contrast}`);
                                                                 return contrast < minimalContrast;
-                                                            }
+                                                            },
                                                         );
                                                         setPaletteData({ ...colors });
                                                     }}
                                                 />
-                                            </MenuItem>
+                                            </MenuItem>,
                                         );
                                     }
                                 }
@@ -457,7 +461,7 @@ const ColorPaletteConfigurator = ({
         paletteData: object = {},
         label: string,
         id: string[],
-        updateFn: (color: string) => void
+        updateFn: (color: string) => void,
     ) => {
         if (!paletteData[id[0]] || !paletteData[id[0]][id[1]] || !paletteData[id[0]][id[1]][id[2]]) {
             return <></>;
@@ -579,7 +583,7 @@ const ColorPaletteConfigurator = ({
                                                         (newcolor) => {
                                                             paletteData[group][tint][weight] = Color(newcolor).rgb();
                                                             setPaletteData({ ...paletteData });
-                                                        }
+                                                        },
                                                     );
                                                 })}
                                             </FieldItemRow>
@@ -590,7 +594,7 @@ const ColorPaletteConfigurator = ({
                                                 text="Auto-span tint value from 100 to 900"
                                                 onClick={() => {
                                                     const tintValues = Object.values(
-                                                        paletteData[group][tint]
+                                                        paletteData[group][tint],
                                                     ) as Color[];
                                                     const tintKeys = Object.keys(paletteData[group][tint]);
                                                     if (tintValues.length > 0) {
@@ -599,15 +603,15 @@ const ColorPaletteConfigurator = ({
                                                         tintKeys.forEach((weight, id) => {
                                                             paletteData[group][tint][weight] = Color(tint100).mix(
                                                                 Color(tint900),
-                                                                id / (tintValues.length - 1)
+                                                                id / (tintValues.length - 1),
                                                             );
                                                             // eslint-disable-next-line no-console
                                                             console.log(
                                                                 `mix ${Color(tint100).hex()} with ${Color(
-                                                                    tint900
+                                                                    tint900,
                                                                 ).hex()} by ${id / (tintValues.length - 1)} -> ${
                                                                     paletteData[group][tint][weight]
-                                                                }`
+                                                                }`,
                                                             );
                                                         });
                                                     }
@@ -695,7 +699,7 @@ const ColorPaletteConfigurator = ({
                                                         onChange={(event) => {
                                                             updateHashtestGroups(
                                                                 event.target.value,
-                                                                event.target.checked
+                                                                event.target.checked,
                                                             );
                                                         }}
                                                         checked={hashtestGroups.includes(group)}
@@ -715,7 +719,7 @@ const ColorPaletteConfigurator = ({
                                                         onChange={(event) => {
                                                             updateHashtestWeights(
                                                                 event.target.value,
-                                                                event.target.checked
+                                                                event.target.checked,
                                                             );
                                                         }}
                                                         checked={hashtestWeights.includes(weight)}

package/src/components/Application/tests/ApplicationViewability.test.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { expect } from "@storybook/test";
 import { render } from "@testing-library/react";
 
 import "@testing-library/jest-dom";
@@ -11,7 +10,7 @@ import { Default as ApplicationViewabilityStory } from "./../stories/Application
 const applyViewabilityAndCheckClass = (props: Omit<ApplicationViewabilityProps, "children">) => {
     const { container } = render(<ApplicationViewability {...ApplicationViewabilityStory.args} {...props} />);
     const element = container.getElementsByClassName(
-        props.hide ? `${eccgui}-application__hide--${props.hide}` : `${eccgui}-application__show--${props.show}`
+        props.hide ? `${eccgui}-application__hide--${props.hide}` : `${eccgui}-application__show--${props.show}`,
     );
     expect(element.length).toBe(1);
     return element;
@@ -25,19 +24,14 @@ describe("ApplicationViewability", () => {
          * Looks like it is not too easy to include and test them.
          * So we only test for the correct CSS class.
          */
-        // console.log(window.getComputedStyle(element.item(0)??new Element).getPropertyValue("display"));
-        // waitFor(() => expect(element).toBeVisible());
     });
     it("should not be visible on `hide=screen`", () => {
         applyViewabilityAndCheckClass({ hide: "screen" });
-        // waitFor(() => expect(element).not.toBeVisible());
     });
     it("should be visible on `hide=print`", () => {
         applyViewabilityAndCheckClass({ hide: "print" });
-        // waitFor(() => expect(element).toBeVisible());
     });
     it("should not be visible on `show=print`", () => {
         applyViewabilityAndCheckClass({ show: "print" });
-        // waitFor(() => expect(element).not.toBeVisible());
     });
 });

package/src/components/AutoSuggestion/AutoSuggestion.tsx

@@ -4,6 +4,7 @@ import { Classes as BlueprintClassNames } from "@blueprintjs/core";
 import { EditorView, Rect } from "@codemirror/view";
 import { debounce } from "lodash";
 
+import { IntentTypes } from "../../common/Intent";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { SupportedCodeEditorModes } from "../../extensions/codemirror/hooks/useCodemirrorModeExtension.hooks";
 
@@ -96,14 +97,14 @@ export interface CodeAutocompleteFieldProps {
      */
     fetchSuggestions: (
         inputString: string,
-        cursorPosition: number
+        cursorPosition: number,
     ) =>
         | (CodeAutocompleteFieldPartialAutoCompleteResult | undefined)
         | Promise<CodeAutocompleteFieldPartialAutoCompleteResult | undefined>;
     /** Checks if the input is valid
      */
     checkInput?: (
-        inputString: string
+        inputString: string,
     ) => CodeAutocompleteFieldValidationResult | Promise<CodeAutocompleteFieldValidationResult | undefined>;
     /** Called with the input validation result
      */
@@ -124,10 +125,10 @@ export interface CodeAutocompleteFieldProps {
      */
     useTabForCompletions?: boolean;
     /** An additional element that is put to the left side of the input field */
-    leftElement?: JSX.Element | null;
+    leftElement?: React.JSX.Element | null;
     /** An additional element that is put to the right side of the input field
      */
-    rightElement?: JSX.Element | null;
+    rightElement?: React.JSX.Element | null;
     /** Placeholder tobe shown when no text has been entered, yet. */
     placeholder?: string;
     /** If the horizontal scrollbars should be shown. */
@@ -154,6 +155,8 @@ export interface CodeAutocompleteFieldProps {
     readOnly?: boolean;
     /** Properties that should be added to the outer div container. */
     outerDivAttributes?: Omit<React.HTMLAttributes<HTMLDivElement>, "id" | "data-test-id">;
+    /** Intent state of the input field. Validation errors override this. */
+    intent?: IntentTypes;
 }
 
 // Meta data regarding a request
@@ -192,6 +195,7 @@ export const CodeAutocompleteField = ({
     height,
     readOnly,
     outerDivAttributes,
+    intent,
 }: CodeAutocompleteFieldProps) => {
     const value = React.useRef<string>(initialValue);
     const cursorPosition = React.useRef(0);
@@ -204,7 +208,7 @@ export const CodeAutocompleteField = ({
     const validationRequestData = React.useRef<RequestMetaData>({ requestId: undefined });
     const errorMarkers = React.useRef<any[]>([]);
     const [validationResponse, setValidationResponse] = useState<CodeAutocompleteFieldValidationResult | undefined>(
-        undefined
+        undefined,
     );
     const [suggestionResponse, setSuggestionResponse] = useState<
         CodeAutocompleteFieldPartialAutoCompleteResult | undefined
@@ -214,7 +218,7 @@ export const CodeAutocompleteField = ({
         CodeAutocompleteFieldSuggestionWithReplacementInfo | undefined
     >(undefined);
     const [cm, setCM] = React.useState<EditorView>();
-    const currentCm = React.useRef<EditorView>();
+    const currentCm = React.useRef<EditorView>(undefined);
     currentCm.current = cm;
     const isFocused = React.useRef(false);
     const autoSuggestionDivRef = React.useRef<HTMLDivElement>(null);
@@ -339,7 +343,7 @@ export const CodeAutocompleteField = ({
                         length,
                     }));
                     newSuggestions = [...newSuggestions, ...replacementsWithMetaData];
-                }
+                },
             );
             editorState.suggestions = newSuggestions;
             setSuggestions(newSuggestions);
@@ -361,7 +365,7 @@ export const CodeAutocompleteField = ({
         return { fromOffset, toOffset };
     };
 
-    const inputActionsDisplayed = React.useCallback((node) => {
+    const inputActionsDisplayed = React.useCallback((node: any) => {
         if (!node) return;
         const width = node.offsetWidth;
         const slCodeEditor = node.parentElement.getElementsByClassName(`${eccgui}-singlelinecodeeditor`);
@@ -392,12 +396,12 @@ export const CodeAutocompleteField = ({
                 setPathValidationPending(false);
             }
         },
-        [checkInput]
+        [checkInput],
     );
 
     const checkValuePathValidity = useMemo(
         () => debounce((inputString: string) => asyncCheckInput(inputString), validationRequestDelay),
-        [asyncCheckInput, validationRequestDelay]
+        [asyncCheckInput, validationRequestDelay],
     );
 
     const asyncHandleEditorInputChange = useMemo(
@@ -414,7 +418,7 @@ export const CodeAutocompleteField = ({
                 if (cursorLine) {
                     const result: CodeAutocompleteFieldPartialAutoCompleteResult | undefined = await fetchSuggestions(
                         inputString.split("\n")[cursorLine - 1], //line starts from 1
-                        cursorPosition
+                        cursorPosition,
                     );
                     if (value.current === inputString) {
                         setSuggestionResponse(result);
@@ -428,7 +432,7 @@ export const CodeAutocompleteField = ({
                 setSuggestionsPending(false);
             }
         },
-        [fetchSuggestions, cm]
+        [fetchSuggestions, cm],
     );
 
     const handleEditorInputChange = useMemo(
@@ -436,9 +440,9 @@ export const CodeAutocompleteField = ({
             debounce(
                 (inputString: string, cursorPosition: number) =>
                     asyncHandleEditorInputChange(inputString, cursorPosition),
-                autoCompletionRequestDelay
+                autoCompletionRequestDelay,
             ),
-        [asyncHandleEditorInputChange, autoCompletionRequestDelay]
+        [asyncHandleEditorInputChange, autoCompletionRequestDelay],
     );
 
     const handleChange = React.useMemo(() => {
@@ -620,16 +624,22 @@ export const CodeAutocompleteField = ({
         (item: CodeAutocompleteFieldSuggestionWithReplacementInfo | undefined) => {
             setHighlightedElement(item);
         },
-        []
+        [],
     );
 
     const onSelection = React.useMemo(
         () => (ranges: IRange[]) => {
             selectedTextRanges.current = ranges;
         },
-        []
+        [],
     );
 
+    const hasError = !!value.current && !pathIsValid && !pathValidationPending;
+    const effectiveIntent = hasError ? "danger" : intent;
+    const blueprintIntent =
+        effectiveIntent && !["info", "accent", "neutral"].includes(effectiveIntent) ? effectiveIntent : undefined;
+    const inputIntentClass = effectiveIntent ? ` ${eccgui}-intent--${effectiveIntent}` : "";
+
     const codeEditor = React.useMemo(() => {
         return (
             <ExtendedCodeEditor
@@ -661,9 +671,8 @@ export const CodeAutocompleteField = ({
         multiline,
         handleInputMouseDown,
         readOnly,
+        effectiveIntent,
     ]);
-
-    const hasError = !!value.current && !pathIsValid && !pathValidationPending;
     const autoSuggestionInput = (
         <div
             id={id}
@@ -674,7 +683,7 @@ export const CodeAutocompleteField = ({
             <div
                 className={` ${eccgui}-autosuggestion__inputfield ${BlueprintClassNames.INPUT_GROUP} ${
                     BlueprintClassNames.FILL
-                } ${hasError ? BlueprintClassNames.INTENT_DANGER : ""}`}
+                } ${blueprintIntent ? BlueprintClassNames.intentClass(blueprintIntent as any) : ""}${inputIntentClass}`}
             >
                 <ContextOverlay
                     minimal
@@ -734,13 +743,11 @@ export const CodeAutocompleteField = ({
                     <>
                         {label}
                         &nbsp;
-                        {(pathValidationPending || suggestionsPending) && (
-                            <Spinner size="tiny" position="inline" />
-                        )}
+                        {(pathValidationPending || suggestionsPending) && <Spinner size="tiny" position="inline" />}
                     </>
                 ),
             }}
-            intent={hasError ? "danger" : undefined}
+            intent={effectiveIntent}
             messageText={hasError ? validationErrorText : undefined}
         >
             {withRightElement}