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

package/src/cmem/react-flow/configuration/linking.ts

@@ -1,6 +1,7 @@
-
 import { EdgeStep } from "./../../../extensions/react-flow/edges/EdgeStep";
 import { NodeDefault } from "./../../../extensions/react-flow/nodes/NodeDefault";
+import { StickyNoteNode } from "./../nodes/StickyNoteNode";
+import { LINKING_NODE_TYPES } from "./typing";
 
 const edgeTypes = {
     default: EdgeStep,
@@ -11,16 +12,14 @@ const edgeTypes = {
     danger: EdgeStep,
 };
 
-const nodeTypes = {
+const nodeTypes: Record<LINKING_NODE_TYPES, React.ReactNode> = {
     default: NodeDefault,
     sourcepath: NodeDefault,
     targetpath: NodeDefault,
     transformation: NodeDefault,
     comparator: NodeDefault,
     aggregator: NodeDefault,
+    stickynote: StickyNoteNode,
 };
 
- export {
-     edgeTypes,
-     nodeTypes,
- }
+export { edgeTypes, nodeTypes };

package/src/cmem/react-flow/configuration/typing.ts

@@ -0,0 +1,30 @@
+/** node types for linking editor nodes  */
+export enum LINKING_NODE_TYPES {
+    default = "default",
+    sourcepath = "sourcepath",
+    targetpath = "targetpath",
+    transformation = "transformation",
+    comparator = "comparator",
+    aggregator = "aggregator",
+    stickynote = "stickynote",
+}
+
+/** node types for workflow editor nodes */
+export enum WORKFLOW_NODE_TYPES {
+    default = "default",
+    dataset = "dataset",
+    linking = "linking",
+    transform = "transform",
+    task = "task",
+    workflow = "workflow",
+    stickynote = "stickynote",
+}
+
+/** node types for graph editor */
+export enum GRAPH_NODE_TYPES {
+    default = "default",
+    graph = "graph",
+    class = "class",
+    instance = "instance",
+    property = "property",
+}

package/src/cmem/react-flow/configuration/workflow.ts

@@ -1,5 +1,7 @@
 import { EdgeStep } from "./../../../extensions/react-flow/edges/EdgeStep";
 import { NodeDefault } from "./../../../extensions/react-flow/nodes/NodeDefault";
+import { StickyNoteNode } from "./../nodes/StickyNoteNode";
+import { WORKFLOW_NODE_TYPES } from "./typing";
 
 const edgeTypes = {
     default: EdgeStep,
@@ -8,16 +10,14 @@ const edgeTypes = {
     danger: EdgeStep,
 };
 
-const nodeTypes = {
+const nodeTypes: Record<WORKFLOW_NODE_TYPES, React.ReactNode> = {
     default: NodeDefault,
     dataset: NodeDefault,
     linking: NodeDefault,
     transform: NodeDefault,
     task: NodeDefault,
     workflow: NodeDefault,
+    stickynote: StickyNoteNode,
 };
 
- export {
-     edgeTypes,
-     nodeTypes,
- }
+export { edgeTypes, nodeTypes };

package/src/cmem/react-flow/nodes/StickyNoteNode.tsx

@@ -0,0 +1,13 @@
+import React, { memo } from "react";
+import { NodeDefault, NodeProps } from "./../../../extensions/react-flow/nodes/NodeDefault";
+
+export const StickyNoteNode = memo((node: NodeProps<any>) => {
+    const {
+        data,
+        ...otherNodeProps
+    } = node;
+
+    data.minimalShape = data.minimalShape??"none";
+
+    return <NodeDefault data={data} {...otherNodeProps} />;
+});

package/src/cmem/react-flow/nodes/_index.scss

@@ -0,0 +1,2 @@
+@import "stickynote";
+@import "colors";

package/src/cmem/react-flow/nodes/_stickynote.scss

@@ -0,0 +1,72 @@
+.react-flow__node-stickynote {
+    .#{$eccgui}-graphviz__node {
+        &:not(.#{$eccgui}-graphviz__node--minimal-rectangular),
+        &:not(.#{$eccgui}-graphviz__node--minimal-circular) {
+            .#{$eccgui}-graphviz__node__header {
+                color: currentColor;
+                position: absolute;
+                width: 100%;
+                height: 0px;
+                top: 0;
+                align-items: flex-start;
+                min-height: unset;
+            }
+            .#{$eccgui}-graphviz__node__header-label {
+                visibility: hidden;
+            }
+            .#{$eccgui}-graphviz__node__content {
+                color: currentColor;
+                background: transparent;
+                padding: $eccgui-size-block-whitespace / 2;
+            }
+        }
+    }
+    .#{$eccgui}-graphviz__node__header-menu {
+        display: none;
+    }
+    &.selected, &:hover {
+        .#{$eccgui}-graphviz__node__header-menu {
+            display: block;
+            opacity: $eccgui-opacity-muted;
+        }
+    }
+    &.selected {
+        .#{$eccgui}-graphviz__node__header-menu {
+            opacity: $eccgui-opacity-regular;
+        }
+    }
+    .#{$eccgui}-typography__contentblock {
+        h1 {
+            font-size: $eccgui-size-typo-subtitle;
+            line-height: $eccgui-size-typo-subtitle-lineheight;
+            font-weight: $eccgui-font-weight-bold;
+        }
+
+        h2 {
+            font-size: $eccgui-size-typo-subtitle;
+            line-height: $eccgui-size-typo-subtitle-lineheight;
+            font-weight: $eccgui-font-weight-regular;
+        }
+
+        h3 {
+            font-size: $eccgui-size-typo-text;
+            line-height: $eccgui-size-typo-text-lineheight;
+            font-weight: $eccgui-font-weight-bold;
+        }
+
+        h4 {
+            font-size: $eccgui-size-typo-text;
+            line-height: $eccgui-size-typo-text-lineheight;
+            font-weight: $eccgui-font-weight-regular;
+        }
+    }
+}
+
+.#{eccgui}-configuration--colors__stickynotes {
+    --yellowish: #ffd54f;
+    --blueish: #3a7896;
+    --purplish: #ae3c74;
+    --success: #{$eccgui-color-success-text};
+    --warning: #{$eccgui-color-warning-text};
+    --danger: #{$eccgui-color-danger-text};
+}

package/src/common/utils/CssCustomProperties.ts

@@ -3,8 +3,10 @@
  * @see https://css-tricks.com/how-to-get-all-custom-properties-on-a-page-in-javascript/
  */
 
+type AllowedCSSRule = CSSStyleRule | CSSPageRule; // they have necessary `selectorText` and `style` properties
+
 interface getLocalCssStyleRulesProps {
-    cssRuleType?: "CSSStyleRule";
+    cssRuleType?: "CSSStyleRule" | "CSSPageRule";
     selectorText?: string;
 }
 interface getLocalCssStyleRulePropertiesProps extends getLocalCssStyleRulesProps {
@@ -43,7 +45,7 @@ export default class CssCustomProperties {
 
     static listLocalStylesheets = (): CSSStyleSheet[] => {
         if (document && document.styleSheets) {
-            return Array.from(document.styleSheets)
+            return (Array.from(document.styleSheets) as CSSStyleSheet[])
                 .filter((stylesheet) => {
                     // is inline stylesheet or from same domain
                     if (!stylesheet.href) {
@@ -53,7 +55,7 @@ export default class CssCustomProperties {
                 });
         }
 
-        return [];
+        return [] as CSSStyleSheet[];
     }
 
     static listLocalCssRules = (): CSSRule[] => {
@@ -64,16 +66,16 @@ export default class CssCustomProperties {
             .flat();
     }
 
-    static listLocalCssStyleRules = (filter: getLocalCssStyleRulesProps = {}): CSSStyleRule[] => {
+    static listLocalCssStyleRules = (filter: getLocalCssStyleRulesProps = {}): AllowedCSSRule[] => {
         const {cssRuleType = "CSSStyleRule", selectorText} = filter;
         const cssStyleRules = CssCustomProperties.listLocalCssRules()
-            .filter((cssrule) => {
-                if((cssrule as CSSStyleRule).style) {
-                    const cssStyleRule = cssrule as CSSStyleRule
-                    if (cssStyleRule.constructor.name !== cssRuleType) {
+            .filter((rule) => {
+                const cssrule = rule as AllowedCSSRule;
+                if((cssrule).style) {
+                    if (cssrule.constructor.name !== cssRuleType) {
                         return false;
                     }
-                    if (!!selectorText && cssStyleRule.selectorText !== selectorText) {
+                    if (!!selectorText && cssrule.selectorText !== selectorText) {
                         return false;
                     }
                     return true;
@@ -81,18 +83,18 @@ export default class CssCustomProperties {
                     return false;
                 }
             })
-        return cssStyleRules as CSSStyleRule[]
+        return cssStyleRules as AllowedCSSRule[]
     }
 
     static listLocalCssStyleRuleProperties = (filter: getLocalCssStyleRulePropertiesProps = {}) => {
         const { propertyType = "all", ...otherFilters } = filter;
         return CssCustomProperties.listLocalCssStyleRules(otherFilters)
             .map((cssrule) => {
-                return [...cssrule.style]
+                return [...(cssrule as CSSStyleRule).style]
                     .map((propertyname) => {
                         return [
                             propertyname.trim(),
-                            cssrule.style.getPropertyValue(propertyname).trim()
+                            (cssrule as CSSStyleRule).style.getPropertyValue(propertyname).trim()
                         ];
                     });
             })

package/src/common/utils/getColorConfiguration.ts

@@ -2,7 +2,7 @@ import CssCustomProperties from "./CssCustomProperties";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 // Configurations can be found in `src/cmem/react-flow/configuration/_colors-*.scss`
-type colorconfigs = "react-flow-graph" | "react-flow-linking" | "react-flow-workflow";
+type colorconfigs = "react-flow-graph" | "react-flow-linking" | "react-flow-workflow" | "stickynotes";
 
 /**
  * Read and returns color values provided by CSS custom properties.
@@ -12,7 +12,6 @@ type colorconfigs = "react-flow-graph" | "react-flow-linking" | "react-flow-work
 const getColorConfiguration = (configId: colorconfigs) => {
     return new CssCustomProperties({
         selectorText: `.${eccgui}-configuration--colors__${configId}`,
-        cssRuleType: "CSSStyleRule",
         removeDashPrefix: true,
         returnObject: true,
     }).customProperties();

package/src/components/Accordion/accordion.scss

@@ -9,10 +9,10 @@
     color: inherit;
 
     .#{$prefix}--accordion__arrow {
-        margin: 0 $eccgui-size-block-whitespace / 2 0 0;
+        margin: 0 $eccgui-size-block-whitespace * 0.5 0 0;
 
         .#{$prefix}--accordion--start & {
-            margin: 0 0 0 $eccgui-size-block-whitespace / 2;
+            margin: 0 0 0 $eccgui-size-block-whitespace * 0.5;
         }
     }
 }
@@ -25,27 +25,27 @@
     margin: 0 0 0 $eccgui-size-block-whitespace;
 
     .#{$prefix}--accordion--start & {
-        margin: 0 0 0 $eccgui-size-block-whitespace / 2;
+        margin: 0 0 0 $eccgui-size-block-whitespace * 0.5;
     }
 }
 
 .#{$prefix}--accordion__content {
-    padding: $eccgui-size-block-whitespace / 2;
-    margin: 0 calc(1rem + #{$eccgui-size-block-whitespace / 2}) 0 $eccgui-size-block-whitespace / 2;
+    padding: $eccgui-size-block-whitespace * 0.5;
+    margin: 0 calc(1rem + #{$eccgui-size-block-whitespace * 0.5}) 0 $eccgui-size-block-whitespace * 0.5;
     display: block;
     opacity: 0;
     position: fixed;
     left: -5000em;
 
     .#{$prefix}--accordion__item--active & {
-        padding: $eccgui-size-block-whitespace / 2 $eccgui-size-block-whitespace / 2 $eccgui-size-block-whitespace $eccgui-size-block-whitespace / 2;
+        padding: $eccgui-size-block-whitespace * 0.5 $eccgui-size-block-whitespace * 0.5 $eccgui-size-block-whitespace $eccgui-size-block-whitespace * 0.5;
         opacity: 1;
         position: static;
         left: auto;
     }
 
     .#{$prefix}--accordion--start & {
-        margin: 0 $eccgui-size-block-whitespace / 2 0 calc(1rem + #{$eccgui-size-block-whitespace / 2});
+        margin: 0 $eccgui-size-block-whitespace * 0.5 0 calc(1rem + #{$eccgui-size-block-whitespace * 0.5});
     }
 
     .#{$eccgui}-accordion__item--fullwidth & {
@@ -84,19 +84,19 @@
         }
 
         .#{$prefix}--accordion__title {
-            margin: 0 0 0 $eccgui-size-block-whitespace / 4;
+            margin: 0 0 0 $eccgui-size-block-whitespace * 0.25;
 
             .#{$prefix}--accordion--start & {
-                margin: 0 0 0 $eccgui-size-block-whitespace / 4;
+                margin: 0 0 0 $eccgui-size-block-whitespace * 0.25;
             }
         }
     }
 
     .#{$prefix}--accordion__content {
-        padding: $eccgui-size-block-whitespace / 4 0;
+        padding: $eccgui-size-block-whitespace * 0.25 0;
 
         .#{$prefix}--accordion__item--active & {
-            padding: $eccgui-size-block-whitespace / 4 0;
+            padding: $eccgui-size-block-whitespace * 0.25 0;
         }
     }
 }

package/src/components/Application/_header.scss

@@ -68,12 +68,13 @@ $shell-header-link: $carbon--blue-60 !default;
 
 
 span.#{$prefix}--header__name {
-    @extend a.#{$prefix}--header__name;
+    // @extend a.#{$prefix}--header__name;
+    @extend .#{$prefix}--header__name;
 }
 
 .#{$prefix}--header__name {
     &.#{$eccgui}-application__title--withsidebar {
-        padding-right: $eccgui-size-block-whitespace / 2;
+        padding-right: $eccgui-size-block-whitespace * 0.5;
     }
 }
 
@@ -91,7 +92,7 @@ span.#{$prefix}--header__name {
 
 .#{$eccgui}-application__title--depiction {
     display: inline-block;
-    margin-right: $eccgui-size-block-whitespace / 2;
+    margin-right: $eccgui-size-block-whitespace * 0.5;
 
     & > * {
         display: none;

package/src/components/AutoSuggestion/AutoSuggestion.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useEffect, useState} from "react";
+import React, {useEffect, useMemo, useState} from "react";
 import CodeMirror from "codemirror";
 import {FieldItem, IconButton, Spinner, Toolbar, ToolbarSection} from "./../../";
 import {Classes as BlueprintClassNames} from "@blueprintjs/core";
@@ -235,7 +235,7 @@ const AutoSuggestion = ({
         editorState.index = 0
     }, [suggestionResponse, editorState]);
 
-    const asyncCheckInput = async (inputString: string) => {
+    const asyncCheckInput = useMemo(() => async (inputString: string) => {
         if(!checkInput) {
             return
         }
@@ -249,16 +249,29 @@ const AutoSuggestion = ({
         } finally {
             setPathValidationPending(false)
         }
-    }
+    }, [checkInput])
 
-    const checkValuePathValidity = useCallback(
-        debounce((inputString: string) => asyncCheckInput(inputString), 200),
-        [checkInput]
+    const checkValuePathValidity = useMemo(
+        () => debounce((inputString: string) => asyncCheckInput(inputString), 1000),
+        [asyncCheckInput]
     )
 
-    const handleEditorInputChange = useCallback(
-        debounce((inputString: string, cursorPosition: number) => asyncHandleEditorInputChange(inputString, cursorPosition), 200),
-        [fetchSuggestions]
+    const asyncHandleEditorInputChange = useMemo(() => async (inputString: string, cursorPosition: number) => {
+        setSuggestionsPending(true)
+        try {
+            const result: IPartialAutoCompleteResult | undefined = await fetchSuggestions(inputString, cursorPosition)
+            setSuggestionResponse(result)
+        } catch(e) {
+            setSuggestionResponse(undefined)
+            // TODO: Error handling
+        } finally {
+            setSuggestionsPending(false)
+        }
+    }, [fetchSuggestions])
+
+    const handleEditorInputChange = useMemo(() =>
+        debounce((inputString: string, cursorPosition: number) => asyncHandleEditorInputChange(inputString, cursorPosition), 1000),
+        [asyncHandleEditorInputChange]
     )
 
     React.useEffect(() => {
@@ -276,19 +289,6 @@ const AutoSuggestion = ({
         return checkValuePathValidity.cancel
     }, [value, checkValuePathValidity])
 
-    const asyncHandleEditorInputChange = async (inputString: string, cursorPosition: number) => {
-        setSuggestionsPending(true)
-        try {
-            const result: IPartialAutoCompleteResult | undefined = await fetchSuggestions(inputString, cursorPosition)
-            setSuggestionResponse(result)
-        } catch(e) {
-            setSuggestionResponse(undefined)
-            // TODO: Error handling
-        } finally {
-            setSuggestionsPending(false)
-        }
-    }
-
     const handleChange = (val: string) => {
         setValue(val);
         onChange(val)
@@ -427,7 +427,7 @@ const AutoSuggestion = ({
 
     return label ? (
         <FieldItem
-            labelAttributes={{
+            labelProps={{
                 text: (
                     <>
                         {label}

package/src/components/AutoSuggestion/AutoSuggestionList.tsx

@@ -143,23 +143,21 @@ export const AutoSuggestionList = ({
                     {options.map((item, index) => (
                         <MenuItem
                             key={index}
-                            internalProps={{
-                                active: currentlyFocusedIndex === index,
-                                onMouseDown: (e) => e.preventDefault(),
-                                onClick: () => onItemSelectionChange(item),
-                                text: (
-                                    <Item
-                                        ref={generateRef(index)}
-                                        item={item}
-                                    />
-                                ),
-                                onMouseEnter: () => setHoveredItem(item),
-                                onMouseLeave: () => setHoveredItem(undefined),
-                                onMouseOver: () => {
-                                    if (item.value !== hoveredItem?.value) {
-                                        setHoveredItem(item);
-                                    }
-                                },
+                            active={currentlyFocusedIndex === index}
+                            onMouseDown={(e: any) => e.preventDefault()}
+                            onClick={() => onItemSelectionChange(item)}
+                            text={(
+                                <Item
+                                    ref={generateRef(index)}
+                                    item={item}
+                                />
+                            )}
+                            onMouseEnter={() => setHoveredItem(item)}
+                            onMouseLeave={() => setHoveredItem(undefined)}
+                            onMouseOver={() => {
+                                if (item.value !== hoveredItem?.value) {
+                                    setHoveredItem(item);
+                                }
                             }}
                         />
                     ))}

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

@@ -84,7 +84,7 @@ describe("Dropdown list", () => {
             options: mockOptions
         }
         const {container} = render(<AutoSuggestionList {...props} />)
-        const activeListItems = Array.from(container.querySelectorAll("li .bp3-menu-item.bp3-active"))
+        const activeListItems = Array.from(container.querySelectorAll("li .bp4-menu-item.bp4-active"))
         expect(activeListItems.length).toBe(1)
     })
 

package/src/components/AutocompleteField/AutoCompleteField.tsx

@@ -1,7 +1,22 @@
 import React, {useEffect, useRef, useState} from "react";
-import {HTMLInputProps, IInputGroupProps, InputGroupProps, IPopoverProps, IRefObject} from "@blueprintjs/core";
-import {Suggest} from "@blueprintjs/select";
-import {Highlighter, IconButton, Menu, MenuItem, OverflowText, Spinner} from "../../index";
+import {
+    HTMLInputProps as BlueprintHTMLInputProps,
+    InputGroupProps as BlueprintInputGroupProps,
+    IRefObject
+} from "@blueprintjs/core";
+import {
+    Suggest2 as Suggest
+} from "@blueprintjs/select";
+import {
+    Highlighter,
+    IconButton,
+    Menu,
+    Notification,
+    MenuItem,
+    OverflowText,
+    Spinner,
+    ContextOverlayProps,
+} from "../../index";
 import {CLASSPREFIX as eccgui} from "../../configuration/constants";
 
 type SearchFunction<T extends any> = (value: string) => T[];
@@ -70,12 +85,12 @@ export interface IAutoCompleteFieldProps<T extends any, UPDATE_VALUE extends any
      * `query` and `onQueryChange` instead of `inputProps.value` and
      * `inputProps.onChange`.
      */
-    inputProps?: IInputGroupProps & HTMLInputProps;
+    inputProps?: BlueprintInputGroupProps & BlueprintHTMLInputProps;
 
     /**
-     * Optional props of the BlueprintJs specific popover element.
+     * Optional props of the internally used `<ContextOverlay/>` element..
      */
-    popoverProps?: Partial<IPopoverProps>
+    contextOverlayProps?: Partial<Omit<ContextOverlayProps, "content" | "children">>
 
     /** Defines if a value can be reset, i.e. a reset icon is shown and the value is set to a specific value.
      *  When undefined, a value cannot be reset.
@@ -122,6 +137,9 @@ export interface IAutoCompleteFieldProps<T extends any, UPDATE_VALUE extends any
      * @param selectedValue The currently selected value.
      */
     resetQueryToValue?(selectedValue: T): string
+
+    /** If an error occurs during the auto-completion request, the error details will be prefixed with this string. */
+    requestErrorPrefix?: string
 }
 
 AutoCompleteField.defaultProps = {
@@ -160,6 +178,7 @@ export function AutoCompleteField<T extends any, UPDATE_VALUE extends any>(props
         itemValueRenderer,
         resetQueryToValue,
         itemValueString,
+        requestErrorPrefix = "",
         ...otherProps
     } = props;
     const [selectedItem, setSelectedItem] = useState<T | undefined>(initialValue);
@@ -169,11 +188,12 @@ export function AutoCompleteField<T extends any, UPDATE_VALUE extends any>(props
     const [query, setQuery] = useState<string>("");
     const [hasFocus, setHasFocus] = useState<boolean>(false);
     const [highlightingEnabled, setHighlightingEnabled] = useState<boolean>(true);
+    const [requestError, setRequestError] = useState<string | undefined>(undefined)
 
     // The suggestions that match the user's input
     const [filtered, setFiltered] = useState<T[]>([]);
 
-    const SuggestAutocomplete = Suggest.ofType<T>();
+    const BlueprintSuggestAutocomplete = Suggest.ofType<T>();
 
     // Sets the query to the item value if it has a valid string value
     const setQueryToSelectedValue = (item?: T) => {
@@ -262,6 +282,7 @@ export function AutoCompleteField<T extends any, UPDATE_VALUE extends any>(props
     // Fetches the results for the given query
     const fetchQueryResults = async (input: string) => {
         setListLoading(true);
+        setRequestError(undefined)
         try {
             let result = await onSearch(input);
             const onlySelectItemReturned = result.length <= 1 && selectedItem && input.length > 0 &&
@@ -282,8 +303,9 @@ export function AutoCompleteField<T extends any, UPDATE_VALUE extends any>(props
             }
             setHighlightingEnabled(enableHighlighting);
             setFiltered(result);
-        } catch (e) {
-            console.log(e);
+        } catch (e: any) {
+            const details = e?.message ?? ""
+            setRequestError(requestErrorPrefix + details)
         } finally {
             setListLoading(false);
         }
@@ -325,6 +347,9 @@ export function AutoCompleteField<T extends any, UPDATE_VALUE extends any>(props
         onChange?.(resetValue);
         setQuery("");
     };
+    const requestErrorRenderer = () => {
+        return <Notification danger={true} message={requestError} />
+    }
     // Optional clear button to reset the selected value
     const clearButton = reset &&
         selectedItem != null &&
@@ -339,21 +364,20 @@ export function AutoCompleteField<T extends any, UPDATE_VALUE extends any>(props
             />
         ) : undefined;
     // Additional properties for the input element of the auto-completion widget
-    const updatedInputProps: InputGroupProps & HTMLInputProps = {
+    const updatedInputProps: BlueprintInputGroupProps & BlueprintHTMLInputProps = {
         rightElement: clearButton,
         autoFocus: autoFocus,
         onBlur: handleOnFocusOut,
         onFocus: handleOnFocusIn,
         ...otherProps.inputProps,
     };
-    const updatedPopOverProps: Partial<IPopoverProps> = {
+    const updatedContextOverlayProps: Partial<Omit<ContextOverlayProps, "content" | "children">> = {
         minimal: true,
-        position: "bottom-left",
+        placement: "bottom-start",
         popoverClassName: `${eccgui}-autocompletefield__options`,
-        wrapperTagName: "div",
-        boundary: "window",
+        rootBoundary: "viewport",
         onClosed: onPopoverClose,
-        ...otherProps.popoverProps,
+        ...otherProps.contextOverlayProps,
     }
     if(selectedItem !== undefined) {
         // Makes sure that even when an empty string is selected, the placeholder won't be shown.
@@ -375,12 +399,13 @@ export function AutoCompleteField<T extends any, UPDATE_VALUE extends any>(props
     } : {}
     return (
         <div ref={fieldRef}>
-            <SuggestAutocomplete
+            <BlueprintSuggestAutocomplete
                 className={`${eccgui}-autocompletefield__input`}
                 disabled={disabled}
-                items={filtered}
+                // Need to display error messages in list
+                items={requestError ? [requestError as T] : filtered}
                 inputValueRenderer={selectedItem !== undefined ? itemValueRenderer : () => ""}
-                itemRenderer={optionRenderer}
+                itemRenderer={requestError ? requestErrorRenderer : optionRenderer}
                 itemsEqual={areEqualItems}
                 noResults={<MenuItem disabled={true} text={noResultText} style={fieldWidthLimits} />}
                 onItemSelect={onSelectionChange}
@@ -388,7 +413,7 @@ export function AutoCompleteField<T extends any, UPDATE_VALUE extends any>(props
                 closeOnSelect={true}
                 query={query}
                 // This leads to odd compile errors without "as any"
-                popoverProps={updatedPopOverProps as any}
+                popoverProps={updatedContextOverlayProps as any}
                 selectedItem={selectedItem}
                 fill
                 {...createNewItemProps}

package/src/components/AutocompleteField/autocompletefield.scss

@@ -1,6 +1,8 @@
 .#{$eccgui}-autocompletefield__options {
-    .#{$ns}-menu {
-        max-height: 45vh;
-        overflow: auto;
+    .#{$ns}-select-popover {
+        .#{$ns}-menu {
+            max-height: 45vh;
+            overflow: auto;
+        }
     }
 }