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

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": "23.0.0-rc.1",
+  "version": "23.0.0-rc.2",
   "license": "Apache-2.0",
   "homepage": "https://github.com/eccenca/gui-elements",
   "bugs": "https://github.com/eccenca/gui-elements/issues",
@@ -60,8 +60,10 @@
     "check:package": "pjv --warnings --recommendations"
   },
   "dependencies": {
-    "@blueprintjs/core": "3.49.1",
-    "@blueprintjs/select": "3.18.1",
+    "@blueprintjs/colors": "^4.1.3",
+    "@blueprintjs/core": "4.0.4",
+    "@blueprintjs/popover2": "1.0.4",
+    "@blueprintjs/select": "4.3.1",
     "@carbon/icons": "10.44.0",
     "@carbon/icons-react": "10.44.0",
     "@mavrin/remark-typograf": "^2.2.0",
@@ -135,8 +137,9 @@
     "react-dom": ">=16"
   },
   "resolutions": {
-    "**/@blueprintjs/core": "3.49.1",
-    "**/@blueprintjs/select": "3.18.1",
+    "**/@blueprintjs/core": "4.0.4",
+    "**/@blueprintjs/popover2": "1.0.4",
+    "**/@blueprintjs/select": "4.3.1",
     "**/@carbon/icons": "10.44.0",
     "**/@carbon/icons-react": "10.44.0",
     "**/carbon-components": "10.44.0",

package/src/cmem/ActivityControl/ActivityControlWidget.stories.tsx

@@ -66,10 +66,10 @@ const actions = [
 ];
 
 const commonWidgetArgs = {
-    label: loremIpsum({ p: 1, avgSentencesPerParagraph: 1, avgWordsPerSentence: 4, random: false }),
+    label: loremIpsum({ p: 1, avgSentencesPerParagraph: 1, avgWordsPerSentence: 4, random: false }).toString(),
     border: true,
     activityActions: actions,
-    statusMessage: loremIpsum({ p: 1, startWithLoremIpsum: false, random: false }),
+    statusMessage: loremIpsum({ p: 1, startWithLoremIpsum: false, random: false }).toString(),
     progressSpinner: {
         intent: "none",
         value: 0.5,

package/src/cmem/ActivityControl/ActivityControlWidget.tsx

@@ -151,15 +151,8 @@ export function ActivityControlWidget(props: IActivityControlProps) {
                                     <Tooltip
                                         content={props.statusMessage}
                                         size="large"
-                                        tooltipProps={{
-                                            position: "top-right",
-                                            boundary: "viewport",
-                                            modifiers: {
-                                                flip: {
-                                                    enabled: false
-                                                }
-                                            }
-                                        }}
+                                        placement="top-start"
+                                        rootBoundary="viewport"
                                     >
                                         {props.statusMessage}
                                     </Tooltip>
@@ -181,9 +174,11 @@ export function ActivityControlWidget(props: IActivityControlProps) {
                                 name={action.icon}
                                 text={action.tooltip}
                                 onClick={action.action}
-                                tooltipOpenDelay={200}
                                 disabled={action.disabled}
                                 hasStateWarning={action.hasStateWarning}
+                                tooltipProps={{
+                                    hoverOpenDelay: 200
+                                }}
                             />
                         );
                     })}

package/src/cmem/react-flow/ReactFlow/ReactFlow.stories.tsx

@@ -1,8 +1,8 @@
 import React, { useState, useEffect, useCallback, FC } from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
-import IconButton from "../../../components/Icon/IconButton";
-import { ReactFlow, ReactFlowProps } from "./ReactFlow";
-import { ArrowHeadType, Elements, getMarkerEnd } from "react-flow-renderer";
+import { ReactFlow, EdgeTools, NodeTools, IconButton } from "./../../../index";
+import { ReactFlowProps } from "./ReactFlow";
+import { ArrowHeadType, Elements, FlowElement, getMarkerEnd } from "react-flow-renderer";
 
 export default {
     title: "CMEM/React Flow/Configurations",
@@ -17,7 +17,8 @@ const nodeExamples = {
             id: 'unspecified-1',
             type: "default",
             data: {
-                label: "Default ", content: "Example content.", minimalShape: "none"
+                label: "Default ", content: "Example content.", minimalShape: "none",
+                menuButtons: <NodeTools>Pass your menu here.</NodeTools>
             },
             position: { x: 200, y: 50 },
         },
@@ -42,7 +43,8 @@ const nodeExamples = {
             id: 'linking-1',
             type: "sourcepath",
             data: {
-                label: "Source path", content: "Example content.", minimalShape: "none"
+                label: "Source path", content: "Example content.", minimalShape: "none",
+                menuButtons: <NodeTools>Pass your menu here.</NodeTools>
             },
             position: { x: 100, y: 50 },
         },
@@ -91,7 +93,8 @@ const nodeExamples = {
             id: 'workflow-1',
             type: "dataset",
             data: {
-                label: "Dataset", content: "Example content.", minimalShape: "none"
+                label: "Dataset", content: "Example content.", minimalShape: "none",
+                menuButtons: <NodeTools>Pass your menu here.</NodeTools>
             },
             position: { x: 100, y: 50 },
         },
@@ -140,7 +143,8 @@ const nodeExamples = {
             id: 'graph-1',
             type: "default",
             data: {
-                label: "Default ", content: "Example content.", minimalShape: "none"
+                label: "Default ", content: "Example content.", minimalShape: "none",
+                menuButtons: <NodeTools>Pass your menu here.</NodeTools>
             },
             position: { x: 100, y: 50 },
         },
@@ -264,12 +268,36 @@ const nodeExamples = {
 const ReactFlowExample: FC<ReactFlowProps> = (args) => {
     const [reactflowInstance, setReactflowInstance] = useState(null);
     const [elements, setElements] = useState([] as Elements);
-    //const [edgeTools, setEdgeTools] = useState<JSX.Element>(<></>);
+    const [edgeTools, setEdgeTools] = useState<JSX.Element>(<></>);
 
     useEffect(() => {
         setElements(nodeExamples[args.configuration ?? "unspecified"] as Elements);
     }, [args]);
 
+    // Helper methods for nodes and edges
+    const isNode = (element: FlowElement & { source?: string }): boolean =>
+        !element.source;
+    const isEdge = (element: FlowElement & { source?: string }): boolean =>
+        !isNode(element);
+
+    // Fired when clicked on any elements, e.g. edge or node. Used to show the edge menu.
+    const onElementClick = React.useCallback((event, element) => {
+        if (isEdge(element)) {
+            event.preventDefault();
+            setEdgeTools(
+                <EdgeTools
+                    posOffset={{ left: event.clientX, top: event.clientY }}
+                    onClose={() => {
+                        setEdgeTools(<></>);
+                    }}
+                >
+                    EdgeTools demo,
+                    add elements here.
+                </EdgeTools>
+            );
+        }
+    }, []);
+
     const onLoad = useCallback(
         (rfi) => {
             if (!reactflowInstance) {
@@ -279,13 +307,18 @@ const ReactFlowExample: FC<ReactFlowProps> = (args) => {
         [reactflowInstance]
     );
 
-    return <ReactFlow
-        configuration={args.configuration}
-        elements={elements}
-        style={{ height: '400px' }}
-        onLoad={onLoad}
-        defaultZoom={1}
-    />
+    return <>
+        <ReactFlow
+            configuration={args.configuration}
+            elements={elements}
+            style={{ height: '400px' }}
+            onLoad={onLoad}
+            defaultZoom={1}
+            onElementClick={onElementClick}
+            onEdgeContextMenu={onElementClick}
+        />
+        {edgeTools}
+    </>
 }
 
 const Template: ComponentStory<typeof ReactFlow> = (args) => (

package/src/cmem/react-flow/ReactFlow/ReactFlow.tsx

@@ -22,6 +22,7 @@ export interface ReactFlowProps extends ReactFlowOriginalProps {
 export const ReactFlow = React.forwardRef<HTMLDivElement, ReactFlowProps>((
     {
         configuration = "unspecified",
+        children,
         ...originalProps
     },
     ref) => {
@@ -41,6 +42,7 @@ export const ReactFlow = React.forwardRef<HTMLDivElement, ReactFlowProps>((
             edgeTypes={ configReactFlow[configuration].edgeTypes }
             {...originalProps}
         >
+            { children }
             <ReactFlowMarkers />
         </ReactFlowOriginal>
     );

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,7 +83,7 @@ export default class CssCustomProperties {
                     return false;
                 }
             })
-        return cssStyleRules as CSSStyleRule[]
+        return cssStyleRules as AllowedCSSRule[]
     }
 
     static listLocalCssStyleRuleProperties = (filter: getLocalCssStyleRulePropertiesProps = {}) => {

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;
+        }
     }
 }

package/src/components/AutocompleteField/stories/AutoCompleteField.stories.tsx

@@ -0,0 +1,75 @@
+import React from "react";
+import {ComponentMeta, ComponentStory} from "@storybook/react";
+
+import {AutoCompleteField, IAutoCompleteFieldProps} from "../AutoCompleteField";
+import {extractSearchWords, matchesAllWords} from "../../Typography/Highlighter";
+import {createNewItemRendererFactory} from "../autoCompleteFieldUtils";
+
+const AutoCompleteFieldStory: ComponentMeta<typeof AutoCompleteField> = {
+    title: "Components/AutoCompleteField",
+    component: AutoCompleteField,
+    argTypes: {
+    },
+}
+
+const Template: ComponentStory<typeof AutoCompleteField> = (args) => (
+    <AutoCompleteField {...args}></AutoCompleteField>
+);
+
+export const Default = Template.bind({});
+export const AdaptQueryAfterSelection = Template.bind({})
+export const AllowReset = Template.bind({})
+export const AllowCustomValues = Template.bind({})
+
+// Renders string values as string
+const defaultRenderer = (item: string) => item
+
+const defaultArgs: IAutoCompleteFieldProps<string, string> = {
+    itemRenderer: (item: string) => `Rendered item: ${item}`,
+    itemValueRenderer: (item: string) => `Selected item: ${item}`,
+    itemValueString: (item: string) => `Query: ${item}`,
+    onSearch: (query: string) => {
+        const multiWord = extractSearchWords(query, true)
+        return ["search item A", "search element B", "search object C"]
+            .filter(word => matchesAllWords(word.toLowerCase(), multiWord))
+    },
+    onChange: elem => {
+        console.log(`Entry '${elem}' selected!`)
+    },
+    itemValueSelector: defaultRenderer,
+    noResultText: "No result"
+}
+
+// Changes the search query for the selected item, e.g. when the rendered item text should be different from the query finding this item.
+const adaptQueryAfterSelection: IAutoCompleteFieldProps<string, string> = {
+    ...defaultArgs,
+    resetQueryToValue: (selectedValue: string) => selectedValue
+}
+
+// Allows to reset a selection
+const resetSelection: IAutoCompleteFieldProps<string, string> = {
+    ...defaultArgs,
+    reset: {
+        resetValue: "",
+        resetButtonText: "Clear selected value",
+        resettableValue: (value: string) => true
+    }
+}
+
+const allowCustomValues: IAutoCompleteFieldProps<string, string> = {
+    ...defaultArgs,
+    createNewItem: {
+        itemRenderer: createNewItemRendererFactory(
+            (query: string) => `Create new item: ${query}`,
+            "item-add-artefact"
+        ),
+        itemFromQuery: item => item,
+    }
+}
+
+Default.args = defaultArgs;
+AdaptQueryAfterSelection.args = adaptQueryAfterSelection
+AllowReset.args = resetSelection
+AllowCustomValues.args = allowCustomValues
+
+export default AutoCompleteFieldStory