@eccenca/gui-elements 23.1.0 → 23.2.0-rc.1

package/src/components/AutoSuggestion/AutoSuggestion.tsx

@@ -1,13 +1,14 @@
-import React, {useEffect, useMemo, useState} from "react";
-import CodeMirror, {Position} from "codemirror";
-import {FieldItem, IconButton, Spinner, Toolbar, ToolbarSection, ContextOverlay} from "./../../";
-import {Classes as BlueprintClassNames} from "@blueprintjs/core";
+import React, { useEffect, useMemo, useState } from "react";
+import { Classes as BlueprintClassNames } from "@blueprintjs/core";
+import CodeMirror, { Position } from "codemirror";
+import { debounce } from "lodash";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
+import { ContextOverlay, FieldItem, IconButton, Spinner, Toolbar, ToolbarSection } from "./../../";
+import { AutoSuggestionList } from "./AutoSuggestionList";
 //custom components
-import SingleLineCodeEditor, {IRange} from "./SingleLineCodeEditor";
-import {AutoSuggestionList} from "./AutoSuggestionList";
-import {debounce} from "lodash";
+import SingleLineCodeEditor, { IRange } from "./SingleLineCodeEditor";
 
 export enum OVERWRITTEN_KEYS {
     ArrowUp = "ArrowUp",
@@ -15,220 +16,246 @@ export enum OVERWRITTEN_KEYS {
     Enter = "Enter",
     Tab = "Tab",
 }
-export type OverwrittenKeyTypes = typeof OVERWRITTEN_KEYS[keyof typeof OVERWRITTEN_KEYS];
+export type OverwrittenKeyTypes = (typeof OVERWRITTEN_KEYS)[keyof typeof OVERWRITTEN_KEYS];
 
 /** A single suggestion. */
 export interface ISuggestionBase {
     // The actual value
-    value: string
+    value: string;
     // Optional human-readable label
-    label?: string
+    label?: string;
     // Optional description of the value.
-    description?: string
+    description?: string;
 }
 
 /** Same as ISuggestionBase, but with the query that was used to fetch this suggestion. */
 export interface ISuggestionWithReplacementInfo extends ISuggestionBase {
     // The query this result was filtered by
-    query: string
+    query: string;
     // The offset of the original string that should be replaced
-    from: number
+    from: number;
     // The length of the original string that should be replaced
-    length: number
+    length: number;
 }
 
 /** The suggestions for a specific substring of the given input string. */
 export interface IReplacementResult {
     // The range of the input string that should be replaced
     replacementInterval: {
-        from: number
-        length: number
-    }
+        from: number;
+        length: number;
+    };
     // The extracted query from the local value at the cursor position of the path that was used to retrieve the suggestions.
-    extractedQuery: string
+    extractedQuery: string;
     // The suggested replacements for the substring that should be replaced.
-    replacements: ISuggestionBase[]
+    replacements: ISuggestionBase[];
 }
 
 export interface IPartialAutoCompleteResult {
     // Repeats the input string from the corresponding request
-    inputString: string
+    inputString: string;
     // Repeats the cursor position from the corresponding request
-    cursorPosition: number
-    replacementResults: IReplacementResult[]
+    cursorPosition: number;
+    replacementResults: IReplacementResult[];
 }
 
 /** Validation result */
 export interface IValidationResult {
     // If the input value is valid or not
-    valid: boolean,
+    valid: boolean;
     parseError?: {
         // Detail error message
-        message: string
+        message: string;
         // Start of the parse error in the input string
-        start: number
+        start: number;
         // End of the parse error in the input string
-        end: number
-    }
+        end: number;
+    };
 }
 
-export interface IProps {
-    // Optional label to be shown for the input (above). This will create a FieldItem around the input.
-    label?: string
-    // The value the component is initialized with, do not use this to control value changes.
-    initialValue: string
-    // Callback on value change
-    onChange: (currentValue: string) => any
-    // Fetches the suggestions
-    fetchSuggestions: (inputString: string, cursorPosition: number) => (IPartialAutoCompleteResult | undefined) | Promise<IPartialAutoCompleteResult | undefined>
-    // Checks if the input is valid
-    checkInput?: (inputString: string) => IValidationResult | Promise<IValidationResult | undefined>
-    // Called with the input validation result
-    onInputChecked?: (validInput: boolean) => any
-    // Text that should be shown if the input validation failed.
-    validationErrorText?: string
-    // Text that should be shown when hovering over the clear icon
-    clearIconText?: string
-    // Called when focus status changes
-    onFocusChange?: (hasFocus: boolean) => any
-    // Optional ID to attach to the outer element
-    id?: string
-    // If the <Tab> key should be used for auto-completing items. Else it will have its default behavior.
-    useTabForCompletions?: boolean
+export interface AutoSuggestionProps {
+    /** Additional class name.
+     */
+    className?: string;
+    /** Optional label to be shown for the input (above). This will create a FieldItem around the input.
+     */
+    label?: string;
+    /** The value the component is initialized with, do not use this to control value changes.
+     */
+    initialValue: string;
+    /** Callback on value change
+     */
+    onChange: (currentValue: string) => any;
+    /** Fetches the suggestions
+     */
+    fetchSuggestions: (
+        inputString: string,
+        cursorPosition: number
+    ) => (IPartialAutoCompleteResult | undefined) | Promise<IPartialAutoCompleteResult | undefined>;
+    /** Checks if the input is valid
+     */
+    checkInput?: (inputString: string) => IValidationResult | Promise<IValidationResult | undefined>;
+    /** Called with the input validation result
+     */
+    onInputChecked?: (validInput: boolean) => any;
+    /** Text that should be shown if the input validation failed.
+     */
+    validationErrorText?: string;
+    /** Text that should be shown when hovering over the clear icon
+     */
+    clearIconText?: string;
+    /** Called when focus status changes
+     */
+    onFocusChange?: (hasFocus: boolean) => any;
+    /** Optional ID to attach to the outer element
+     */
+    id?: string;
+    /** If the <Tab> key should be used for auto-completing items. Else it will have its default behavior.
+     */
+    useTabForCompletions?: boolean;
     /** An additional element that is put to the left side of the input field */
-    leftElement?: JSX.Element | null
-    // An additional element that is put to the right side of the input field
-    rightElement?: JSX.Element | null
+    leftElement?: JSX.Element | null;
+    /** An additional element that is put to the right side of the input field
+     */
+    rightElement?: JSX.Element | null;
     /** Placeholder tobe shown when no text has been entered, yet. */
-    placeholder?: string
+    placeholder?: string;
     /** If the horizontal scrollbars should be shown. */
-    showScrollBar?: boolean
+    showScrollBar?: boolean;
     /** Delay in ms before an auto-completion request should be send after nothing is typed in anymore.
      * This should prevent the UI to send too many requests to the backend. */
-    autoCompletionRequestDelay?: number
+    autoCompletionRequestDelay?: number;
     /** Delay in ms before a validation request should be send after nothing is typed in anymore.
      * This should prevent the UI to send too many requests to the backend. */
-    validationRequestDelay?: number
+    validationRequestDelay?: number;
 }
 
+// @deprecated
+export type IProps = AutoSuggestionProps;
+
 // Meta data regarding a request
 interface RequestMetaData {
-    requestId: string | undefined
+    requestId: string | undefined;
 }
 
-type HorizontalShiftCallbackFunction = (shift: number) => any
-
-/** Input component that allows partial, fine-grained auto-completion, i.e. of sub-strings of the input string.
- * This is comparable to a one line code editor. */
-const AutoSuggestion = ({
-                            label,
-                            initialValue,
-                            onChange,
-                            fetchSuggestions,
-                            checkInput,
-                            validationErrorText = "Invalid value",
-                            clearIconText = "Clear",
-                            onFocusChange,
-                            id,
-                            onInputChecked,
-                            leftElement,
-                            rightElement,
-                            useTabForCompletions = false,
-                            placeholder,
-                            showScrollBar = true,
-                            autoCompletionRequestDelay = 1000,
-                            validationRequestDelay = 200
-                        }: IProps) => {
-    const value = React.useRef<string>(initialValue)
+type HorizontalShiftCallbackFunction = (shift: number) => any;
+
+/**
+ * **Element is deprecated.**
+ * Use `CodeAutocompleteField` as replacement.
+ *
+ * @deprecated
+ */
+export const AutoSuggestion = ({
+    className,
+    label,
+    initialValue,
+    onChange,
+    fetchSuggestions,
+    checkInput,
+    validationErrorText = "Invalid value",
+    clearIconText = "Clear",
+    onFocusChange,
+    id,
+    onInputChecked,
+    leftElement,
+    rightElement,
+    useTabForCompletions = false,
+    placeholder,
+    showScrollBar = true,
+    autoCompletionRequestDelay = 1000,
+    validationRequestDelay = 200,
+}: AutoSuggestionProps) => {
+    const value = React.useRef<string>(initialValue);
     const cursorPosition = React.useRef(0);
-    const horizontalShiftSubscriber = React.useRef<HorizontalShiftCallbackFunction | undefined>(undefined)
+    const horizontalShiftSubscriber = React.useRef<HorizontalShiftCallbackFunction | undefined>(undefined);
     const [shouldShowDropdown, setShouldShowDropdown] = React.useState(false);
     const [suggestions, setSuggestions] = React.useState<ISuggestionWithReplacementInfo[]>([]);
     const [suggestionsPending, setSuggestionsPending] = React.useState(false);
-    const suggestionRequestData = React.useRef<RequestMetaData>({requestId: undefined})
-    const [pathValidationPending, setPathValidationPending] = React.useState(false)
-    const validationRequestData = React.useRef<RequestMetaData>({requestId: undefined})
+    const suggestionRequestData = React.useRef<RequestMetaData>({ requestId: undefined });
+    const [pathValidationPending, setPathValidationPending] = React.useState(false);
+    const validationRequestData = React.useRef<RequestMetaData>({ requestId: undefined });
     const [, setErrorMarkers] = React.useState<CodeMirror.TextMarker[]>([]);
-    const [validationResponse, setValidationResponse] = useState<IValidationResult | undefined>(undefined)
-    const [suggestionResponse, setSuggestionResponse] = useState<IPartialAutoCompleteResult | undefined>(undefined)
+    const [validationResponse, setValidationResponse] = useState<IValidationResult | undefined>(undefined);
+    const [suggestionResponse, setSuggestionResponse] = useState<IPartialAutoCompleteResult | undefined>(undefined);
     // The element that should be used for replacement highlighting
-    const [highlightedElement, setHighlightedElement] = useState<ISuggestionWithReplacementInfo | undefined>(undefined)
+    const [highlightedElement, setHighlightedElement] = useState<ISuggestionWithReplacementInfo | undefined>(undefined);
     const [editorInstance, setEditorInstance] = React.useState<CodeMirror.Editor>();
     const isFocused = React.useRef(false);
     /** Mutable editor state, since this needs to be current in scope of the SingleLineEditorComponent. */
     const [editorState] = React.useState<{
-        index: number,
-        suggestions: ISuggestionWithReplacementInfo[],
-        editorInstance?: CodeMirror.Editor,
-        dropdownShown: boolean
-    }>({index: 0, suggestions: [], dropdownShown: false})
+        index: number;
+        suggestions: ISuggestionWithReplacementInfo[];
+        editorInstance?: CodeMirror.Editor;
+        dropdownShown: boolean;
+    }>({ index: 0, suggestions: [], dropdownShown: false });
     /** This is for the AutoSuggestionList component in order to re-render. */
-    const [focusedIndex, setFocusedIndex] = React.useState(0)
-    const selectedTextRanges = React.useRef<IRange[]>([])
+    const [focusedIndex, setFocusedIndex] = React.useState(0);
+    const selectedTextRanges = React.useRef<IRange[]>([]);
 
     const pathIsValid = validationResponse?.valid ?? true;
 
     const setCurrentIndex = (newIndex: number) => {
-        editorState.index = newIndex
-        setFocusedIndex(newIndex)
-    }
-    const currentIndex = () => editorState.index
+        editorState.index = newIndex;
+        setFocusedIndex(newIndex);
+    };
+    const currentIndex = () => editorState.index;
 
     React.useEffect(() => {
-        editorState.editorInstance = editorInstance
-    }, [editorInstance, editorState])
+        editorState.editorInstance = editorInstance;
+    }, [editorInstance, editorState]);
 
     React.useEffect(() => {
-        if(initialValue != null) {
-            editorInstance?.setValue(initialValue)
+        if (initialValue != null) {
+            editorInstance?.setValue(initialValue);
         }
-    }, [initialValue, editorInstance])
+    }, [initialValue, editorInstance]);
 
     React.useEffect(() => {
-        editorState.dropdownShown = shouldShowDropdown
-    }, [shouldShowDropdown, editorState])
+        editorState.dropdownShown = shouldShowDropdown;
+    }, [shouldShowDropdown, editorState]);
 
     // Handle replacement highlighting
     useEffect(() => {
         if (highlightedElement && editorInstance) {
             const { from, length } = highlightedElement;
-            if(length > 0 && selectedTextRanges.current.length === 0) {
+            if (length > 0 && selectedTextRanges.current.length === 0) {
                 const to = from + length;
                 const marker = editorInstance.markText(
-                    {line: 0, ch: from},
-                    {line: 0, ch: to},
-                    {className: `${eccgui}-autosuggestion__text--highlighted`}
+                    { line: 0, ch: from },
+                    { line: 0, ch: to },
+                    { className: `${eccgui}-autosuggestion__text--highlighted` }
                 );
-                return () => marker.clear()
+                return () => marker.clear();
             }
         }
         return;
-    }, [highlightedElement, selectedTextRanges, editorInstance])
+    }, [highlightedElement, selectedTextRanges, editorInstance]);
 
     //handle linting
     React.useEffect(() => {
         const parseError = validationResponse?.parseError;
         if (parseError && editorInstance) {
             const { message, start, end } = parseError;
-            editorInstance.getDoc().getEditor()
+            editorInstance.getDoc().getEditor();
             const marker = editorInstance.markText(
                 { line: 0, ch: start },
                 { line: 0, ch: end },
                 { className: `${eccgui}-autosuggestion__text--highlighted-error`, title: message }
             );
             setErrorMarkers((previousMarkers) => {
-                previousMarkers.forEach(marker => marker.clear())
-                return [marker]
+                previousMarkers.forEach((marker) => marker.clear());
+                return [marker];
             });
         } else {
             // Valid, clear all error markers
             setErrorMarkers((previous) => {
-                previous.forEach(marker => marker.clear())
-                return []
-            })
+                previous.forEach((marker) => marker.clear());
+                return [];
+            });
         }
-        const isValid = validationResponse?.valid === undefined || validationResponse.valid
-        onInputChecked && onInputChecked(isValid)
+        const isValid = validationResponse?.valid === undefined || validationResponse.valid;
+        onInputChecked && onInputChecked(isValid);
     }, [validationResponse?.valid, validationResponse?.parseError, editorInstance, onInputChecked]);
 
     /** generate suggestions and also populate the replacement indexes dict */
@@ -243,17 +270,22 @@ const AutoSuggestion = ({
         if (suggestionResponse?.replacementResults?.length) {
             suggestionResponse.replacementResults.forEach(
                 ({ replacements, replacementInterval: { from, length }, extractedQuery }) => {
-                    const replacementsWithMetaData = replacements.map(r => ({...r, query: extractedQuery, from, length}))
+                    const replacementsWithMetaData = replacements.map((r) => ({
+                        ...r,
+                        query: extractedQuery,
+                        from,
+                        length,
+                    }));
                     newSuggestions = [...newSuggestions, ...replacementsWithMetaData];
                 }
             );
-            editorState.suggestions = newSuggestions
+            editorState.suggestions = newSuggestions;
             setSuggestions(newSuggestions);
         } else {
-            editorState.suggestions = []
-            setSuggestions([])
+            editorState.suggestions = [];
+            setSuggestions([]);
         }
-        editorState.index = 0
+        editorState.index = 0;
     }, [suggestionResponse, editorState]);
 
     const inputactionsDisplayed = React.useCallback((node) => {
@@ -265,58 +297,76 @@ const AutoSuggestion = ({
         }
     }, []);
 
-    const asyncCheckInput = useMemo(() => async (inputString: string) => {
-        if(!checkInput || inputString !== value.current || validationRequestData.current.requestId === inputString) {
-            return
-        }
-        validationRequestData.current.requestId = inputString
-        setPathValidationPending(true)
-        try {
-            const result: IValidationResult | undefined = await checkInput(inputString)
-            setValidationResponse(result)
-        } catch(e) {
-            setValidationResponse(undefined)
-            // TODO: Error handling
-        } finally {
-            setPathValidationPending(false)
-        }
-    }, [checkInput])
+    const asyncCheckInput = useMemo(
+        () => async (inputString: string) => {
+            if (
+                !checkInput ||
+                inputString !== value.current ||
+                validationRequestData.current.requestId === inputString
+            ) {
+                return;
+            }
+            validationRequestData.current.requestId = inputString;
+            setPathValidationPending(true);
+            try {
+                const result: IValidationResult | undefined = await checkInput(inputString);
+                setValidationResponse(result);
+            } catch (e) {
+                setValidationResponse(undefined);
+                // TODO: Error handling
+            } finally {
+                setPathValidationPending(false);
+            }
+        },
+        [checkInput]
+    );
 
     const checkValuePathValidity = useMemo(
         () => debounce((inputString: string) => asyncCheckInput(inputString), validationRequestDelay),
         [asyncCheckInput, validationRequestDelay]
-    )
+    );
 
-    const asyncHandleEditorInputChange = useMemo(() => async (inputString: string, cursorPosition: number) => {
-        const requestId = `${inputString} ${cursorPosition}`
-        if(requestId === suggestionRequestData.current.requestId) {
-            return
-        }
-        suggestionRequestData.current.requestId = requestId
-        setSuggestionsPending(true)
-        try {
-            const result: IPartialAutoCompleteResult | undefined = await fetchSuggestions(inputString, cursorPosition)
-            if(value.current === inputString) {
-                setSuggestionResponse(result)
+    const asyncHandleEditorInputChange = useMemo(
+        () => async (inputString: string, cursorPosition: number) => {
+            const requestId = `${inputString} ${cursorPosition}`;
+            if (requestId === suggestionRequestData.current.requestId) {
+                return;
             }
-        } catch(e) {
-            setSuggestionResponse(undefined)
-            // TODO: Error handling
-        } finally {
-            setSuggestionsPending(false)
-        }
-    }, [fetchSuggestions])
+            suggestionRequestData.current.requestId = requestId;
+            setSuggestionsPending(true);
+            try {
+                const result: IPartialAutoCompleteResult | undefined = await fetchSuggestions(
+                    inputString,
+                    cursorPosition
+                );
+                if (value.current === inputString) {
+                    setSuggestionResponse(result);
+                }
+            } catch (e) {
+                setSuggestionResponse(undefined);
+                // TODO: Error handling
+            } finally {
+                setSuggestionsPending(false);
+            }
+        },
+        [fetchSuggestions]
+    );
 
-    const handleEditorInputChange = useMemo(() =>
-        debounce((inputString: string, cursorPosition: number) => asyncHandleEditorInputChange(inputString, cursorPosition), autoCompletionRequestDelay),
+    const handleEditorInputChange = useMemo(
+        () =>
+            debounce(
+                (inputString: string, cursorPosition: number) =>
+                    asyncHandleEditorInputChange(inputString, cursorPosition),
+                autoCompletionRequestDelay
+            ),
         [asyncHandleEditorInputChange, autoCompletionRequestDelay]
-    )
+    );
 
     const handleChange = (val: string) => {
-        value.current = val
-        checkValuePathValidity.cancel()
-        checkValuePathValidity(value.current)
-        onChange(val)
+        value.current = val;
+        checkValuePathValidity.cancel();
+        checkValuePathValidity(value.current);
+        onChange(val);
     };
 
     const handleCursorChange = (pos: Position, coords: any, scrollinfo: any) => {
@@ -324,12 +374,11 @@ const AutoSuggestion = ({
         // cursor change is fired after onChange, so we put the auto-complete logic here
         if (isFocused.current) {
             setShouldShowDropdown(true);
-            handleEditorInputChange.cancel()
-            handleEditorInputChange(value.current, cursorPosition.current)
+            handleEditorInputChange.cancel();
+            handleEditorInputChange(value.current, cursorPosition.current);
         }
-        horizontalShiftSubscriber.current && horizontalShiftSubscriber.current(
-            Math.min(coords.left, Math.max(coords.left - scrollinfo.left, 0))
-        )
+        horizontalShiftSubscriber.current &&
+            horizontalShiftSubscriber.current(Math.min(coords.left, Math.max(coords.left - scrollinfo.left, 0)));
     };
 
     const handleInputEditorKeyPress = (event: KeyboardEvent) => {
@@ -341,53 +390,57 @@ const AutoSuggestion = ({
     };
 
     const closeDropDown = () => {
-        setHighlightedElement(undefined)
-        setShouldShowDropdown(false)
-    }
+        setHighlightedElement(undefined);
+        setShouldShowDropdown(false);
+    };
 
     const handleDropdownChange = (selectedSuggestion: ISuggestionWithReplacementInfo) => {
         if (selectedSuggestion && editorState.editorInstance) {
             const { from, length, value } = selectedSuggestion;
             const to = from + length;
-            editorState.editorInstance.replaceRange(selectedSuggestion.value, {line: 0, ch: from}, {line: 0, ch: to})
-            closeDropDown()
+            editorState.editorInstance.replaceRange(
+                selectedSuggestion.value,
+                { line: 0, ch: from },
+                { line: 0, ch: to }
+            );
+            closeDropDown();
             editorState.editorInstance.setCursor({ line: 0, ch: from + value.length });
             editorState.editorInstance.focus();
         }
     };
 
     const handleInputEditorClear = () => {
-        editorInstance?.setValue("")
-        cursorPosition.current = 0
-        handleChange("")
+        editorInstance?.setValue("");
+        cursorPosition.current = 0;
+        handleChange("");
         editorInstance?.focus();
     };
 
     const handleInputFocus = (focusState: boolean) => {
-        onFocusChange && onFocusChange(focusState)
-        focusState ? setShouldShowDropdown(true) : closeDropDown()
-        if(!isFocused.current && focusState) {
+        onFocusChange && onFocusChange(focusState);
+        focusState ? setShouldShowDropdown(true) : 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
-            setSuggestions([])
-            suggestionRequestData.current.requestId = undefined
-            isFocused.current = focusState
-            handleEditorInputChange.cancel()
-            handleEditorInputChange(value.current, cursorPosition.current)
+            setSuggestions([]);
+            suggestionRequestData.current.requestId = undefined;
+            isFocused.current = focusState;
+            handleEditorInputChange.cancel();
+            handleEditorInputChange(value.current, cursorPosition.current);
         } else {
-            isFocused.current = focusState
+            isFocused.current = focusState;
         }
     };
 
     //keyboard handlers
     const handleArrowDown = () => {
         const lastSuggestionIndex = editorState.suggestions.length - 1;
-        setCurrentIndex(currentIndex() === lastSuggestionIndex ? 0 : currentIndex() + 1)
+        setCurrentIndex(currentIndex() === lastSuggestionIndex ? 0 : currentIndex() + 1);
     };
 
     const handleArrowUp = () => {
         const lastSuggestionIndex = editorState.suggestions.length - 1;
-        setCurrentIndex(currentIndex() === 0 ? lastSuggestionIndex : currentIndex() - 1)
+        setCurrentIndex(currentIndex() === 0 ? lastSuggestionIndex : currentIndex() - 1);
     };
 
     const handleEnterPressed = () => {
@@ -416,27 +469,37 @@ const AutoSuggestion = ({
                     handleTabPressed();
                     break;
                 default:
-                    //do nothing
+                //do nothing
             }
         }
     };
 
     const handleItemHighlighting = React.useCallback((item: ISuggestionWithReplacementInfo | undefined) => {
-        setHighlightedElement(item)
-    }, [])
+        setHighlightedElement(item);
+    }, []);
 
-    const onSelection = React.useMemo(() => (ranges: IRange[]) => {
-        selectedTextRanges.current = ranges
-    }, [])
+    const onSelection = React.useMemo(
+        () => (ranges: IRange[]) => {
+            selectedTextRanges.current = ranges;
+        },
+        []
+    );
 
-    const subscribeToHorizontalShift = React.useMemo(() => (callback: HorizontalShiftCallbackFunction) => {
-        horizontalShiftSubscriber.current = callback
-    }, [])
+    const subscribeToHorizontalShift = React.useMemo(
+        () => (callback: HorizontalShiftCallbackFunction) => {
+            horizontalShiftSubscriber.current = callback;
+        },
+        []
+    );
 
     const hasError = !!value.current && !pathIsValid && !pathValidationPending;
     const autoSuggestionInput = (
-        <div id={id} className={`${eccgui}-autosuggestion`}>
-            <div className={`${eccgui}-autosuggestion__inputfield ${BlueprintClassNames.INPUT_GROUP} ${BlueprintClassNames.FILL} ${hasError ? BlueprintClassNames.INTENT_DANGER : ""}`}>
+        <div id={id} className={`${eccgui}-autosuggestion` + (className ? ` ${className}` : "")}>
+            <div
+                className={`${eccgui}-autosuggestion__inputfield ${BlueprintClassNames.INPUT_GROUP} ${
+                    BlueprintClassNames.FILL
+                } ${hasError ? BlueprintClassNames.INTENT_DANGER : ""}`}
+            >
                 <ContextOverlay
                     minimal
                     fill
@@ -444,9 +507,9 @@ const AutoSuggestion = ({
                     placement="bottom-start"
                     openOnTargetFocus={false}
                     autoFocus={false}
-                    content={(
+                    content={
                         <AutoSuggestionList
-                            id={id+"__dropdown"}
+                            id={id + "__dropdown"}
                             registerForHorizontalShift={subscribeToHorizontalShift}
                             loading={suggestionsPending}
                             options={suggestions}
@@ -455,7 +518,7 @@ const AutoSuggestion = ({
                             currentlyFocusedIndex={focusedIndex}
                             itemToHighlight={handleItemHighlighting}
                         />
-                    )}
+                    }
                 >
                     <SingleLineCodeEditor
                         mode="null"
@@ -485,17 +548,18 @@ const AutoSuggestion = ({
         </div>
     );
 
-    const withRightElement = rightElement || leftElement ? (
-        <Toolbar noWrap>
-            {leftElement && <ToolbarSection>{leftElement}</ToolbarSection>}
-            <ToolbarSection canGrow canShrink>
-                <div style={{minWidth: "100%", maxWidth: "100%"}}>
-                    {autoSuggestionInput}
-                </div>
-            </ToolbarSection>
-            {rightElement && <ToolbarSection>{rightElement}</ToolbarSection>}
-        </Toolbar>
-    ) : autoSuggestionInput
+    const withRightElement =
+        rightElement || leftElement ? (
+            <Toolbar noWrap>
+                {leftElement && <ToolbarSection>{leftElement}</ToolbarSection>}
+                <ToolbarSection canGrow canShrink>
+                    <div style={{ minWidth: "100%", maxWidth: "100%" }}>{autoSuggestionInput}</div>
+                </ToolbarSection>
+                {rightElement && <ToolbarSection>{rightElement}</ToolbarSection>}
+            </Toolbar>
+        ) : (
+            autoSuggestionInput
+        );
 
     return label ? (
         <FieldItem
@@ -507,14 +571,17 @@ const AutoSuggestion = ({
                         {(pathValidationPending || suggestionsPending) && (
                             <Spinner size="tiny" position="inline" description="Validating value path" />
                         )}
-                    </>)
+                    </>
+                ),
             }}
             hasStateDanger={hasError}
             messageText={hasError ? validationErrorText : undefined}
         >
             {withRightElement}
         </FieldItem>
-    ) : withRightElement
+    ) : (
+        withRightElement
+    );
 };
 
 export default AutoSuggestion;