@autoguru/overdrive 4.1.6 → 4.1.9

package/dist/components/AutoSuggest/AutoSuggest.js

@@ -1,327 +1,650 @@
+"use strict";
+
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+const _excluded = ["autoFocus", "autoWidth", "inlineOptions", "fieldIcon", "suggestions", "value", "onChange", "onEnter", "itemRenderer", "onBlur", "onFocus", "onKeyDown", "onClick"],
+      _excluded2 = ["closeModal"],
+      _excluded3 = ["inlineOptions", "noScroll", "isFocused", "fieldIcon", "isLoading", "autoFocus", "autoWidth", "suggestions", "value", "onChange", "itemRenderer", "onBlur", "onFocus", "onKeyDown", "onClick", "className"],
+      _excluded4 = ["field", "eventHandlers", "validation", "suffixed", "prefixed", "isLoading", "fieldIcon", "isFocused", "className"],
+      _excluded5 = ["onReset"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 import { ChevronDownIcon, CloseIcon } from '@autoguru/icons';
 import { wrapEvent } from '@autoguru/utilities';
 import clsx from 'clsx';
 import * as React from 'react';
-import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useReducer, useRef, useState, } from 'react';
-import { useMedia } from '../../hooks/useMedia';
-import { setRef, useId } from '../../utils';
-import { Box } from '../Box';
-import { Button } from '../Button';
-import { Icon } from '../Icon';
-import { Portal } from '../Portal';
-import { Positioner } from '../Positioner';
-import { EAlignment } from '../Positioner/alignment';
-import { Text } from '../Text';
-import { withEnhancedInput } from '../private/InputBase';
-import * as styles from './AutoSuggest.css';
-import { useLayoutSuggestionVisible } from './useLayoutSuggestionVisible';
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useReducer, useRef, useState } from 'react';
+import { useMedia } from "../../hooks/useMedia/index.js";
+import { setRef, useId } from "../../utils/index.js";
+import { Box } from "../Box/index.js";
+import { Button } from "../Button/index.js";
+import { Icon } from "../Icon/index.js";
+import { Portal } from "../Portal/index.js";
+import { Positioner } from "../Positioner/index.js";
+import { EAlignment } from "../Positioner/alignment.js";
+import { Text } from "../Text/index.js";
+import { withEnhancedInput } from "../private/InputBase/index.js";
+import * as styles from "./AutoSuggest.css.js";
+import { useLayoutSuggestionVisible } from "./useLayoutSuggestionVisible.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 var ActionTypes;
+
 (function (ActionTypes) {
-    ActionTypes[ActionTypes["INPUT_CHANGE"] = 0] = "INPUT_CHANGE";
-    ActionTypes[ActionTypes["INPUT_ESCAPE"] = 1] = "INPUT_ESCAPE";
-    ActionTypes[ActionTypes["INPUT_ENTER"] = 2] = "INPUT_ENTER";
-    ActionTypes[ActionTypes["INPUT_FOCUS"] = 3] = "INPUT_FOCUS";
-    ActionTypes[ActionTypes["INPUT_BLUR"] = 4] = "INPUT_BLUR";
-    ActionTypes[ActionTypes["INPUT_ARROW_DOWN"] = 5] = "INPUT_ARROW_DOWN";
-    ActionTypes[ActionTypes["INPUT_ARROW_UP"] = 6] = "INPUT_ARROW_UP";
-    ActionTypes[ActionTypes["FLYOUT_CLOSE"] = 7] = "FLYOUT_CLOSE";
-    ActionTypes[ActionTypes["SUGGESTION_MOUSE_ENTER"] = 8] = "SUGGESTION_MOUSE_ENTER";
-    ActionTypes[ActionTypes["SUGGESTION_MOUSE_CLICK"] = 9] = "SUGGESTION_MOUSE_CLICK";
+  ActionTypes[ActionTypes["INPUT_CHANGE"] = 0] = "INPUT_CHANGE";
+  ActionTypes[ActionTypes["INPUT_ESCAPE"] = 1] = "INPUT_ESCAPE";
+  ActionTypes[ActionTypes["INPUT_ENTER"] = 2] = "INPUT_ENTER";
+  ActionTypes[ActionTypes["INPUT_FOCUS"] = 3] = "INPUT_FOCUS";
+  ActionTypes[ActionTypes["INPUT_BLUR"] = 4] = "INPUT_BLUR";
+  ActionTypes[ActionTypes["INPUT_ARROW_DOWN"] = 5] = "INPUT_ARROW_DOWN";
+  ActionTypes[ActionTypes["INPUT_ARROW_UP"] = 6] = "INPUT_ARROW_UP";
+  ActionTypes[ActionTypes["FLYOUT_CLOSE"] = 7] = "FLYOUT_CLOSE";
+  ActionTypes[ActionTypes["SUGGESTION_MOUSE_ENTER"] = 8] = "SUGGESTION_MOUSE_ENTER";
+  ActionTypes[ActionTypes["SUGGESTION_MOUSE_CLICK"] = 9] = "SUGGESTION_MOUSE_CLICK";
 })(ActionTypes || (ActionTypes = {}));
-const inputReducerFactory = (suggestions) => (prevState, action) => {
-    switch (action.type) {
-        default:
-        case ActionTypes.INPUT_CHANGE: {
-            return {
-                isFlyoutOpen: true,
-                highlightIndex: -1,
-                previewText: null,
-            };
-        }
-        case ActionTypes.FLYOUT_CLOSE:
-        case ActionTypes.SUGGESTION_MOUSE_CLICK:
-        case ActionTypes.INPUT_ESCAPE:
-        case ActionTypes.INPUT_BLUR: {
-            return {
-                isFlyoutOpen: false,
-                highlightIndex: -1,
-                previewText: null,
-            };
-        }
-        case ActionTypes.INPUT_FOCUS: {
-            return {
-                ...prevState,
-                isFlyoutOpen: suggestions.length > -1,
-            };
-        }
-        case ActionTypes.INPUT_ARROW_DOWN: {
-            const nextIndex = getNextIndex(1, prevState.highlightIndex, suggestions);
-            return {
-                isFlyoutOpen: true,
-                highlightIndex: nextIndex,
-                previewText: nextIndex > -1 ? suggestions[nextIndex].text : null,
-            };
-        }
-        case ActionTypes.INPUT_ARROW_UP: {
-            const firstIndex = getNextIndex(1, -1, suggestions);
-            if (prevState.highlightIndex === firstIndex) {
-                return {
-                    isFlyoutOpen: true,
-                    highlightIndex: -1,
-                    previewText: null,
-                };
-            }
-            const nextIndex = getNextIndex(-1, prevState.highlightIndex, suggestions);
-            return {
-                isFlyoutOpen: true,
-                highlightIndex: nextIndex,
-                previewText: nextIndex > -1 ? suggestions[nextIndex].text : null,
-            };
-        }
-        case ActionTypes.SUGGESTION_MOUSE_ENTER: {
-            return {
-                ...prevState,
-                highlightIndex: action.index,
-            };
+
+const inputReducerFactory = suggestions => (prevState, action) => {
+  switch (action.type) {
+    default:
+    case ActionTypes.INPUT_CHANGE:
+      {
+        return {
+          isFlyoutOpen: true,
+          highlightIndex: -1,
+          previewText: null
+        };
+      }
+
+    case ActionTypes.FLYOUT_CLOSE:
+    case ActionTypes.SUGGESTION_MOUSE_CLICK:
+    case ActionTypes.INPUT_ESCAPE:
+    case ActionTypes.INPUT_BLUR:
+      {
+        return {
+          isFlyoutOpen: false,
+          highlightIndex: -1,
+          previewText: null
+        };
+      }
+
+    case ActionTypes.INPUT_FOCUS:
+      {
+        return _objectSpread(_objectSpread({}, prevState), {}, {
+          isFlyoutOpen: suggestions.length > -1
+        });
+      }
+
+    case ActionTypes.INPUT_ARROW_DOWN:
+      {
+        const nextIndex = getNextIndex(1, prevState.highlightIndex, suggestions);
+        return {
+          isFlyoutOpen: true,
+          highlightIndex: nextIndex,
+          previewText: nextIndex > -1 ? suggestions[nextIndex].text : null
+        };
+      }
+
+    case ActionTypes.INPUT_ARROW_UP:
+      {
+        const firstIndex = getNextIndex(1, -1, suggestions);
+
+        if (prevState.highlightIndex === firstIndex) {
+          return {
+            isFlyoutOpen: true,
+            highlightIndex: -1,
+            previewText: null
+          };
         }
-        case ActionTypes.INPUT_ENTER: {
-            if (prevState.highlightIndex > -1) {
-                return {
-                    highlightIndex: -1,
-                    previewText: null,
-                    isFlyoutOpen: false,
-                };
-            }
-            return prevState;
+
+        const nextIndex = getNextIndex(-1, prevState.highlightIndex, suggestions);
+        return {
+          isFlyoutOpen: true,
+          highlightIndex: nextIndex,
+          previewText: nextIndex > -1 ? suggestions[nextIndex].text : null
+        };
+      }
+
+    case ActionTypes.SUGGESTION_MOUSE_ENTER:
+      {
+        return _objectSpread(_objectSpread({}, prevState), {}, {
+          highlightIndex: action.index
+        });
+      }
+
+    case ActionTypes.INPUT_ENTER:
+      {
+        if (prevState.highlightIndex > -1) {
+          return {
+            highlightIndex: -1,
+            previewText: null,
+            isFlyoutOpen: false
+          };
         }
-    }
+
+        return prevState;
+      }
+  }
 };
-export const AutoSuggest = forwardRef(function AutoSuggest({ autoFocus = false, autoWidth = false, inlineOptions = false, fieldIcon, suggestions, value, onChange: incomingOnChange, onEnter, itemRenderer = defaultItemRenderer, onBlur: incomingOnBlur, onFocus: incomingOnFocus, onKeyDown, onClick, ...textInputProps }, ref) {
-    const inputRef = useRef();
-    useImperativeHandle(ref, () => inputRef.current);
-    const [isDesktop] = useMedia(['desktop'], false);
-    const [isFocused, setIsFocused] = useState(false);
-    const [showModal, setShowModal] = useState(false);
-    const props = {
-        suggestions,
-        value,
-        onChange: (value) => {
-            if (typeof value.payload !== 'undefined' &&
-                value.payload !== null) {
-                setShowModal(false);
-                if (!isDesktop)
-                    setIsFocused(false);
-            }
-            if (typeof incomingOnChange === 'function')
-                incomingOnChange(value);
-        },
-        onKeyUp: (event) => {
-            if (event.key === 'Enter' && typeof onEnter === 'function') {
-                setShowModal(false);
-                setIsFocused(false);
-                inputRef.current?.blur();
-                onEnter(value);
-            }
-        },
-        itemRenderer,
-        onKeyDown,
-        onClick,
-        onFocus: wrapEvent(() => {
-            setIsFocused(true);
-            setShowModal(true);
-        }, incomingOnFocus),
-        onBlur: wrapEvent(() => setIsFocused(false), incomingOnBlur),
-        ...textInputProps,
-    };
-    const closeModal = useCallback(() => {
+
+export const AutoSuggest = forwardRef(function AutoSuggest(_ref, ref) {
+  let {
+    autoFocus = false,
+    autoWidth = false,
+    inlineOptions = false,
+    fieldIcon,
+    suggestions,
+    value,
+    onChange: incomingOnChange,
+    onEnter,
+    itemRenderer = defaultItemRenderer,
+    onBlur: incomingOnBlur,
+    onFocus: incomingOnFocus,
+    onKeyDown,
+    onClick
+  } = _ref,
+      textInputProps = _objectWithoutProperties(_ref, _excluded);
+
+  const inputRef = useRef();
+  useImperativeHandle(ref, () => inputRef.current);
+  const [isDesktop] = useMedia(['desktop'], false);
+  const [isFocused, setIsFocused] = useState(false);
+  const [showModal, setShowModal] = useState(false);
+
+  const props = _objectSpread({
+    suggestions,
+    value,
+    onChange: value => {
+      if (typeof value.payload !== 'undefined' && value.payload !== null) {
+        setShowModal(false);
+        if (!isDesktop) setIsFocused(false);
+      }
+
+      if (typeof incomingOnChange === 'function') incomingOnChange(value);
+    },
+    onKeyUp: event => {
+      if (event.key === 'Enter' && typeof onEnter === 'function') {
+        var _inputRef$current;
+
         setShowModal(false);
         setIsFocused(false);
-    }, [setShowModal]);
-    return !inlineOptions && !isDesktop && showModal ? (React.createElement(AutoSuggestFullscreenInput, { ...props, isFocused: isFocused, inlineOptions: true, fieldIcon: fieldIcon, autoFocus: autoFocus, closeModal: closeModal })) : (React.createElement(AutoSuggestInput, { ref: inputRef, ...props, isFocused: isFocused, inlineOptions: inlineOptions, fieldIcon: fieldIcon, autoFocus: autoFocus, autoWidth: autoWidth }));
+        (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.blur();
+        onEnter(value);
+      }
+    },
+    itemRenderer,
+    onKeyDown,
+    onClick,
+    onFocus: wrapEvent(() => {
+      setIsFocused(true);
+      setShowModal(true);
+    }, incomingOnFocus),
+    onBlur: wrapEvent(() => setIsFocused(false), incomingOnBlur)
+  }, textInputProps);
+
+  const closeModal = useCallback(() => {
+    setShowModal(false);
+    setIsFocused(false);
+  }, [setShowModal]);
+  return !inlineOptions && !isDesktop && showModal ? _jsx(AutoSuggestFullscreenInput, _objectSpread(_objectSpread({}, props), {}, {
+    isFocused: isFocused,
+    inlineOptions: true,
+    fieldIcon: fieldIcon,
+    autoFocus: autoFocus,
+    closeModal: closeModal
+  })) : _jsx(AutoSuggestInput, _objectSpread(_objectSpread({
+    ref: inputRef
+  }, props), {}, {
+    isFocused: isFocused,
+    inlineOptions: inlineOptions,
+    fieldIcon: fieldIcon,
+    autoFocus: autoFocus,
+    autoWidth: autoWidth
+  }));
 });
-const AutoSuggestFullscreenInput = forwardRef(function AutoSuggestFullscreenInput({ closeModal, ...props }, ref) {
-    const [showPortal, setShowPortal] = useState(false);
-    useEffect(() => {
-        document.documentElement.style.position = 'fixed';
-        document.documentElement.style.overflow = 'hidden';
-        document.documentElement.style.maxHeight = '100%';
-        document.documentElement.style.width = '100%';
-        return () => {
-            document.documentElement.style.position = '';
-            document.documentElement.style.overflow = '';
-            document.documentElement.style.maxHeight = '';
-            document.documentElement.style.width = '';
-        };
-    }, []);
-    useEffect(() => {
-        const cb = requestAnimationFrame(() => setShowPortal(true));
-        return () => {
-            cancelAnimationFrame(cb);
-        };
-    }, [setShowPortal]);
-    return showPortal ? (React.createElement(Portal, null,
-        React.createElement("div", { className: styles.fullScreenRoot },
-            React.createElement(AutoSuggestInput, { ref: ref, ...props, className: styles.fullScreenInput, inlineOptions: true, noScroll: true }),
-            React.createElement(Button, { minimal: true, rounded: true, className: styles.fullScreenCloseBtn, size: "medium", onClick: closeModal },
-                React.createElement(Icon, { icon: CloseIcon }))))) : null;
-});
-const AutoSuggestInput = forwardRef(function AutoSuggestInput({ inlineOptions = false, noScroll = false, isFocused = false, fieldIcon, isLoading, autoFocus, autoWidth, suggestions, value, onChange, itemRenderer = defaultItemRenderer, onBlur, onFocus, onKeyDown, onClick, className, ...textInputProps }, ref) {
-    const triggerRef = useRef(null);
-    const highlightRef = useRef(null);
-    const suggestionListRef = useRef(null);
-    const suggestionListId = useId();
-    const reducer = useMemo(() => inputReducerFactory(suggestions), [suggestions]);
-    const [state, dispatch] = useReducer(reducer, {
-        highlightIndex: -1,
-        previewText: null,
-        isFlyoutOpen: false,
-    });
-    const shouldOpenFlyout = suggestions.length > 0 && state.isFlyoutOpen;
-    useLayoutSuggestionVisible(state.highlightIndex, highlightRef, suggestionListRef);
-    return (React.createElement(Box, { role: "combobox", "aria-label": textInputProps.placeholder, "aria-expanded": shouldOpenFlyout, "aria-owns": suggestionListId, "aria-haspopup": "listbox", width: "full" },
-        React.createElement(Box, { backgroundColour: "white", borderRadius: "1", className: styles.input },
-            React.createElement(AutoSuggestInputPrimitive, { className: className, isFocused: isFocused, isLoading: isLoading, autoFocus: autoFocus, fieldIcon: fieldIcon, wrapperRef: triggerRef, ...textInputProps, ref: ref, "aria-autocomplete": "list", "aria-controls": suggestionListId, "aria-activedescendant": state.highlightIndex > -1
-                    ? getSuggestionId(suggestionListId, state.highlightIndex)
-                    : undefined, value: state.previewText ?? value?.text, onReset: () => {
-                    dispatch({ type: ActionTypes.INPUT_CHANGE });
-                    if (typeof onChange === 'function')
-                        onChange({
-                            text: '',
-                            payload: undefined,
-                        });
-                }, onChange: (event) => {
-                    dispatch({ type: ActionTypes.INPUT_CHANGE });
-                    if (typeof onChange === 'function')
-                        onChange({
-                            text: event.target.value,
-                            payload: undefined,
-                        });
-                }, onFocus: wrapEvent(() => dispatch({ type: ActionTypes.INPUT_FOCUS }), onFocus), onBlur: wrapEvent(() => {
-                    if (state.highlightIndex > -1 &&
-                        state.highlightIndex &&
-                        state.previewText ===
-                            suggestions[state.highlightIndex]?.text &&
-                        typeof onChange === 'function')
-                        onChange(suggestions[state.highlightIndex]);
-                    dispatch({ type: ActionTypes.INPUT_BLUR });
-                }, onBlur), onKeyDown: wrapEvent((event) => {
-                    switch (event.key) {
-                        case 'ArrowUp':
-                        case 'ArrowDown': {
-                            event.preventDefault();
-                            dispatch({
-                                type: event.key === 'ArrowDown'
-                                    ? ActionTypes.INPUT_ARROW_DOWN
-                                    : ActionTypes.INPUT_ARROW_UP,
-                            });
-                            return;
-                        }
-                        case 'Enter': {
-                            if (state.highlightIndex > -1) {
-                                event.preventDefault();
-                                if (typeof onChange === 'function')
-                                    onChange(suggestions[state.highlightIndex]);
-                            }
-                            dispatch({ type: ActionTypes.INPUT_ENTER });
-                            return;
-                        }
-                        case 'Escape': {
-                            dispatch({ type: ActionTypes.INPUT_ESCAPE });
-                        }
-                    }
-                }, onKeyDown) })),
-        inlineOptions ? (React.createElement(SuggestionsList, { suggestionListRef: suggestionListRef, suggestionListId: suggestionListId, placeholder: textInputProps.placeholder, highlightIndex: state.highlightIndex, suggestions: suggestions, highlightRef: highlightRef, itemRenderer: itemRenderer, className: noScroll
-                ? styles.suggestionList.inlineOptionsNoScroll
-                : styles.suggestionList.inlineOptions, dispatch: dispatch, onChange: onChange })) : (React.createElement(SuggestionListFlyout, { id: suggestionListId, autoWidth: autoWidth, triggerRef: triggerRef, alignment: EAlignment.BOTTOM_LEFT, isOpen: shouldOpenFlyout, triggerOffset: 4 },
-            React.createElement(SuggestionsList, { className: styles.suggestionList.blockOptions, suggestionListRef: suggestionListRef, suggestionListId: suggestionListId, placeholder: textInputProps.placeholder, highlightIndex: state.highlightIndex, suggestions: suggestions, highlightRef: highlightRef, itemRenderer: itemRenderer, dispatch: dispatch, onChange: onChange })))));
+const AutoSuggestFullscreenInput = forwardRef(function AutoSuggestFullscreenInput(_ref2, ref) {
+  let {
+    closeModal
+  } = _ref2,
+      props = _objectWithoutProperties(_ref2, _excluded2);
+
+  const [showPortal, setShowPortal] = useState(false);
+  useEffect(() => {
+    document.documentElement.style.position = 'fixed';
+    document.documentElement.style.overflow = 'hidden';
+    document.documentElement.style.maxHeight = '100%';
+    document.documentElement.style.width = '100%';
+    return () => {
+      document.documentElement.style.position = '';
+      document.documentElement.style.overflow = '';
+      document.documentElement.style.maxHeight = '';
+      document.documentElement.style.width = '';
+    };
+  }, []);
+  useEffect(() => {
+    const cb = requestAnimationFrame(() => setShowPortal(true));
+    return () => {
+      cancelAnimationFrame(cb);
+    };
+  }, [setShowPortal]);
+  return showPortal ? _jsx(Portal, {
+    children: _jsxs("div", {
+      className: styles.fullScreenRoot,
+      children: [_jsx(AutoSuggestInput, _objectSpread(_objectSpread({
+        ref: ref
+      }, props), {}, {
+        className: styles.fullScreenInput,
+        inlineOptions: true,
+        noScroll: true
+      })), _jsx(Button, {
+        minimal: true,
+        rounded: true,
+        className: styles.fullScreenCloseBtn,
+        size: "medium",
+        onClick: closeModal,
+        children: _jsx(Icon, {
+          icon: CloseIcon
+        })
+      })]
+    })
+  }) : null;
 });
-const SuggestionsList = ({ className = '', suggestionListId, placeholder, highlightIndex, suggestions, highlightRef, itemRenderer, onChange, dispatch, suggestionListRef, }) => (React.createElement(Box, { ref: suggestionListRef, is: "ul", backgroundColour: "white", className: [styles.suggestionList.defaults, className], id: suggestionListId, "aria-label": placeholder, role: "listbox" },
-    React.createElement("div", { className: styles.spacer }),
-    suggestions.map((suggestion, idx) => {
-        const highlight = highlightIndex === idx;
-        return (React.createElement(Box, { key: suggestion.text.concat(String(idx)), ref: highlight ? highlightRef : undefined, is: "li", id: getSuggestionId(suggestionListId, idx), role: "option", "aria-selected": highlight, "aria-label": suggestion.text, className: clsx(styles.suggestionListItem.default, {
-                [styles.suggestionListItem.skipped]: suggestion.skip,
-            }), onMouseDown: (event) => event.preventDefault(), onMouseMove: () => {
-                if (suggestion.skip)
-                    return;
+const AutoSuggestInput = forwardRef(function AutoSuggestInput(_ref3, ref) {
+  var _state$previewText;
+
+  let {
+    inlineOptions = false,
+    noScroll = false,
+    isFocused = false,
+    fieldIcon,
+    isLoading,
+    autoFocus,
+    autoWidth,
+    suggestions,
+    value,
+    onChange,
+    itemRenderer = defaultItemRenderer,
+    onBlur,
+    onFocus,
+    onKeyDown,
+    onClick,
+    className
+  } = _ref3,
+      textInputProps = _objectWithoutProperties(_ref3, _excluded3);
+
+  const triggerRef = useRef(null);
+  const highlightRef = useRef(null);
+  const suggestionListRef = useRef(null);
+  const suggestionListId = useId();
+  const reducer = useMemo(() => inputReducerFactory(suggestions), [suggestions]);
+  const [state, dispatch] = useReducer(reducer, {
+    highlightIndex: -1,
+    previewText: null,
+    isFlyoutOpen: false
+  });
+  const shouldOpenFlyout = suggestions.length > 0 && state.isFlyoutOpen;
+  useLayoutSuggestionVisible(state.highlightIndex, highlightRef, suggestionListRef);
+  return _jsxs(Box, {
+    role: "combobox",
+    "aria-label": textInputProps.placeholder,
+    "aria-expanded": shouldOpenFlyout,
+    "aria-owns": suggestionListId,
+    "aria-haspopup": "listbox",
+    width: "full",
+    children: [_jsx(Box, {
+      backgroundColour: "white",
+      borderRadius: "1",
+      className: styles.input,
+      children: _jsx(AutoSuggestInputPrimitive, _objectSpread(_objectSpread({
+        className: className,
+        isFocused: isFocused,
+        isLoading: isLoading,
+        autoFocus: autoFocus,
+        fieldIcon: fieldIcon,
+        wrapperRef: triggerRef
+      }, textInputProps), {}, {
+        ref: ref,
+        "aria-autocomplete": "list",
+        "aria-controls": suggestionListId,
+        "aria-activedescendant": state.highlightIndex > -1 ? getSuggestionId(suggestionListId, state.highlightIndex) : undefined,
+        value: (_state$previewText = state.previewText) !== null && _state$previewText !== void 0 ? _state$previewText : value === null || value === void 0 ? void 0 : value.text,
+        onReset: () => {
+          dispatch({
+            type: ActionTypes.INPUT_CHANGE
+          });
+          if (typeof onChange === 'function') onChange({
+            text: '',
+            payload: undefined
+          });
+        },
+        onChange: function (_onChange) {
+          function onChange(_x) {
+            return _onChange.apply(this, arguments);
+          }
+
+          onChange.toString = function () {
+            return _onChange.toString();
+          };
+
+          return onChange;
+        }(event => {
+          dispatch({
+            type: ActionTypes.INPUT_CHANGE
+          });
+          if (typeof onChange === 'function') onChange({
+            text: event.target.value,
+            payload: undefined
+          });
+        }),
+        onFocus: wrapEvent(() => dispatch({
+          type: ActionTypes.INPUT_FOCUS
+        }), onFocus),
+        onBlur: wrapEvent(() => {
+          var _suggestions$state$hi;
+
+          if (state.highlightIndex > -1 && state.highlightIndex && state.previewText === ((_suggestions$state$hi = suggestions[state.highlightIndex]) === null || _suggestions$state$hi === void 0 ? void 0 : _suggestions$state$hi.text) && typeof onChange === 'function') onChange(suggestions[state.highlightIndex]);
+          dispatch({
+            type: ActionTypes.INPUT_BLUR
+          });
+        }, onBlur),
+        onKeyDown: wrapEvent(event => {
+          switch (event.key) {
+            case 'ArrowUp':
+            case 'ArrowDown':
+              {
+                event.preventDefault();
                 dispatch({
-                    type: ActionTypes.SUGGESTION_MOUSE_ENTER,
-                    index: idx,
+                  type: event.key === 'ArrowDown' ? ActionTypes.INPUT_ARROW_DOWN : ActionTypes.INPUT_ARROW_UP
                 });
-            }, onClick: () => {
-                if (suggestion.skip)
-                    return;
-                if (typeof onChange === 'function')
-                    onChange(suggestion);
+                return;
+              }
+
+            case 'Enter':
+              {
+                if (state.highlightIndex > -1) {
+                  event.preventDefault();
+                  if (typeof onChange === 'function') onChange(suggestions[state.highlightIndex]);
+                }
+
                 dispatch({
-                    type: ActionTypes.SUGGESTION_MOUSE_CLICK,
+                  type: ActionTypes.INPUT_ENTER
                 });
-            } }, typeof itemRenderer === 'function' &&
-            itemRenderer({
-                suggestions,
-                highlight,
-                value: suggestion,
-            })));
-    }),
-    React.createElement("div", { className: styles.spacer })));
-const AutoSuggestInputPrimitive = withEnhancedInput(({ field, eventHandlers, validation, suffixed, prefixed, isLoading, fieldIcon = ChevronDownIcon, isFocused, className, ...rest }) => {
-    let focusTimeout;
-    const ref = useRef(null);
-    const focusHandler = useCallback(() => {
-        ref.current?.focus();
-    }, []);
-    const { onReset, ...inputEventHandlers } = eventHandlers;
-    const handleRef = useCallback((node) => {
-        if (field.ref)
-            setRef(field.ref, node);
-        setRef(ref, node);
-    }, [field]);
-    const onRequestReset = useCallback(() => {
-        if (typeof onReset === 'function')
-            onReset();
-        focusTimeout = setTimeout(() => ref.current?.focus(), 100);
-    }, [onReset, focusTimeout]);
-    const suffix = useMemo(() => isLoading ? null : field.value && isFocused ? (React.createElement(Box, { is: "button", paddingY: "3", paddingRight: "4", flexShrink: 0, onMouseDown: onRequestReset },
-        React.createElement(Icon, { size: "medium", icon: CloseIcon }))) : fieldIcon ? (React.createElement(Box, { flexShrink: 0, paddingY: "3", paddingRight: "4", onClick: focusHandler },
-        React.createElement(Icon, { size: "medium", icon: fieldIcon }))) : null, [field.value, isLoading, fieldIcon, isFocused, onRequestReset]);
-    useEffect(() => () => (focusTimeout ? clearTimeout(focusTimeout) : void 0), []);
-    return (React.createElement(Box, { display: "flex", flexWrap: "nowrap", alignItems: "center", justifyContent: "center", className: className },
-        React.createElement(Box, { is: "input", flexGrow: 1, ...inputEventHandlers, ...field, ref: handleRef, autoCapitalize: "none", spellCheck: "false", autoComplete: "off", ...rest, type: "search" }),
-        suffix));
+                return;
+              }
+
+            case 'Escape':
+              {
+                dispatch({
+                  type: ActionTypes.INPUT_ESCAPE
+                });
+              }
+          }
+        }, onKeyDown)
+      }))
+    }), inlineOptions ? _jsx(SuggestionsList, {
+      suggestionListRef: suggestionListRef,
+      suggestionListId: suggestionListId,
+      placeholder: textInputProps.placeholder,
+      highlightIndex: state.highlightIndex,
+      suggestions: suggestions,
+      highlightRef: highlightRef,
+      itemRenderer: itemRenderer,
+      className: noScroll ? styles.suggestionList.inlineOptionsNoScroll : styles.suggestionList.inlineOptions,
+      dispatch: dispatch,
+      onChange: onChange
+    }) : _jsx(SuggestionListFlyout, {
+      id: suggestionListId,
+      autoWidth: autoWidth,
+      triggerRef: triggerRef,
+      alignment: EAlignment.BOTTOM_LEFT,
+      isOpen: shouldOpenFlyout,
+      triggerOffset: 4,
+      children: _jsx(SuggestionsList, {
+        className: styles.suggestionList.blockOptions,
+        suggestionListRef: suggestionListRef,
+        suggestionListId: suggestionListId,
+        placeholder: textInputProps.placeholder,
+        highlightIndex: state.highlightIndex,
+        suggestions: suggestions,
+        highlightRef: highlightRef,
+        itemRenderer: itemRenderer,
+        dispatch: dispatch,
+        onChange: onChange
+      })
+    })]
+  });
+});
+
+const SuggestionsList = _ref4 => {
+  let {
+    className = '',
+    suggestionListId,
+    placeholder,
+    highlightIndex,
+    suggestions,
+    highlightRef,
+    itemRenderer,
+    onChange,
+    dispatch,
+    suggestionListRef
+  } = _ref4;
+  return _jsxs(Box, {
+    ref: suggestionListRef,
+    is: "ul",
+    backgroundColour: "white",
+    className: [styles.suggestionList.defaults, className],
+    id: suggestionListId,
+    "aria-label": placeholder,
+    role: "listbox",
+    children: [_jsx("div", {
+      className: styles.spacer
+    }), suggestions.map((suggestion, idx) => {
+      const highlight = highlightIndex === idx;
+      return _jsx(Box, {
+        ref: highlight ? highlightRef : undefined,
+        is: "li",
+        id: getSuggestionId(suggestionListId, idx),
+        role: "option",
+        "aria-selected": highlight,
+        "aria-label": suggestion.text,
+        className: clsx(styles.suggestionListItem.default, {
+          [styles.suggestionListItem.skipped]: suggestion.skip
+        }),
+        onMouseDown: event => event.preventDefault(),
+        onMouseMove: () => {
+          if (suggestion.skip) return;
+          dispatch({
+            type: ActionTypes.SUGGESTION_MOUSE_ENTER,
+            index: idx
+          });
+        },
+        onClick: () => {
+          if (suggestion.skip) return;
+          if (typeof onChange === 'function') onChange(suggestion);
+          dispatch({
+            type: ActionTypes.SUGGESTION_MOUSE_CLICK
+          });
+        },
+        children: typeof itemRenderer === 'function' && itemRenderer({
+          suggestions,
+          highlight,
+          value: suggestion
+        })
+      }, suggestion.text.concat(String(idx)));
+    }), _jsx("div", {
+      className: styles.spacer
+    })]
+  });
+};
+
+const AutoSuggestInputPrimitive = withEnhancedInput(_ref5 => {
+  let {
+    field,
+    eventHandlers,
+    validation,
+    suffixed,
+    prefixed,
+    isLoading,
+    fieldIcon = ChevronDownIcon,
+    isFocused,
+    className
+  } = _ref5,
+      rest = _objectWithoutProperties(_ref5, _excluded4);
+
+  let focusTimeout;
+  const ref = useRef(null);
+  const focusHandler = useCallback(() => {
+    var _ref$current;
+
+    (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
+  }, []);
+
+  const {
+    onReset
+  } = eventHandlers,
+        inputEventHandlers = _objectWithoutProperties(eventHandlers, _excluded5);
+
+  const handleRef = useCallback(node => {
+    if (field.ref) setRef(field.ref, node);
+    setRef(ref, node);
+  }, [field]);
+  const onRequestReset = useCallback(() => {
+    if (typeof onReset === 'function') onReset();
+    focusTimeout = setTimeout(() => {
+      var _ref$current2;
+
+      return (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.focus();
+    }, 100);
+  }, [onReset, focusTimeout]);
+  const suffix = useMemo(() => isLoading ? null : field.value && isFocused ? _jsx(Box, {
+    is: "button",
+    paddingY: "3",
+    paddingRight: "4",
+    flexShrink: 0,
+    onMouseDown: onRequestReset,
+    children: _jsx(Icon, {
+      size: "medium",
+      icon: CloseIcon
+    })
+  }) : fieldIcon ? _jsx(Box, {
+    flexShrink: 0,
+    paddingY: "3",
+    paddingRight: "4",
+    onClick: focusHandler,
+    children: _jsx(Icon, {
+      size: "medium",
+      icon: fieldIcon
+    })
+  }) : null, [field.value, isLoading, fieldIcon, isFocused, onRequestReset]);
+  useEffect(() => () => focusTimeout ? clearTimeout(focusTimeout) : void 0, []);
+  return _jsxs(Box, {
+    display: "flex",
+    flexWrap: "nowrap",
+    alignItems: "center",
+    justifyContent: "center",
+    className: className,
+    children: [_jsx(Box, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+      is: "input",
+      flexGrow: 1
+    }, inputEventHandlers), field), {}, {
+      ref: handleRef,
+      autoCapitalize: "none",
+      spellCheck: "false",
+      autoComplete: "off"
+    }, rest), {}, {
+      type: "search"
+    })), suffix]
+  });
 }, {
-    primitiveType: 'text',
-    withPrefixIcon: true,
-    withSuffixIcon: false,
+  primitiveType: 'text',
+  withPrefixIcon: true,
+  withSuffixIcon: false
 });
-const getSuggestionId = (id, index) => `${id}-option-${index}`;
-const SuggestionListFlyout = ({ id, alignment, isOpen, triggerOffset, triggerRef, autoWidth, children, }) => (React.createElement(Positioner, { id: id, triggerRef: triggerRef, alignment: alignment, isOpen: isOpen, triggerOffset: triggerOffset, role: "listbox" },
-    React.createElement(Box, { borderWidth: "1", borderColour: "gray", borderRadius: "1", backgroundColour: "white", boxShadow: "2", style: {
-            width: triggerRef.current && !autoWidth
-                ? triggerRef.current.clientWidth
-                : undefined,
-        }, onMouseDown: (event) => event.preventDefault() }, children)));
-const defaultItemRenderer = ({ value, highlight, }) => (React.createElement(DefaultSuggestion, { highlight: highlight, text: value.text }));
-const DefaultSuggestion = ({ text, highlight, }) => (React.createElement("div", { className: clsx(styles.suggestion, {
-        [styles.suggestionHighlight]: highlight,
-    }) },
-    React.createElement(Text, { is: "span" }, text)));
-const getNextIndex = (direction, currentIndex, suggestions) => {
-    if (!Array.isArray(suggestions) || suggestions.length === 0)
-        return -1;
-    const maxIndex = suggestions.length - 1;
-    let itter = -1;
-    let returnIdx = -1;
-    let shouldSkip;
-    do {
-        ++itter;
-        const maybeNextIdx = Math.trunc((returnIdx === -1 ? currentIndex : returnIdx) + direction);
-        if (maybeNextIdx < 0) {
-            returnIdx = maybeNextIdx > maxIndex ? 0 : maxIndex;
-        }
-        else {
-            returnIdx = maybeNextIdx > maxIndex ? 0 : maybeNextIdx;
-        }
-        shouldSkip = suggestions[returnIdx]?.skip ?? false;
-    } while (shouldSkip && itter <= maxIndex);
-    return itter > maxIndex ? -1 : returnIdx;
+
+const getSuggestionId = (id, index) => "".concat(id, "-option-").concat(index);
+
+const SuggestionListFlyout = _ref6 => {
+  let {
+    id,
+    alignment,
+    isOpen,
+    triggerOffset,
+    triggerRef,
+    autoWidth,
+    children
+  } = _ref6;
+  return _jsx(Positioner, {
+    id: id,
+    triggerRef: triggerRef,
+    alignment: alignment,
+    isOpen: isOpen,
+    triggerOffset: triggerOffset,
+    role: "listbox",
+    children: _jsx(Box, {
+      borderWidth: "1",
+      borderColour: "gray",
+      borderRadius: "1",
+      backgroundColour: "white",
+      boxShadow: "2",
+      style: {
+        width: triggerRef.current && !autoWidth ? triggerRef.current.clientWidth : undefined
+      },
+      onMouseDown: event => event.preventDefault(),
+      children: children
+    })
+  });
+};
+
+const defaultItemRenderer = _ref7 => {
+  let {
+    value,
+    highlight
+  } = _ref7;
+  return _jsx(DefaultSuggestion, {
+    highlight: highlight,
+    text: value.text
+  });
 };
+
+const DefaultSuggestion = _ref8 => {
+  let {
+    text,
+    highlight
+  } = _ref8;
+  return _jsx("div", {
+    className: clsx(styles.suggestion, {
+      [styles.suggestionHighlight]: highlight
+    }),
+    children: _jsx(Text, {
+      is: "span",
+      children: text
+    })
+  });
+};
+
+const getNextIndex = (direction, currentIndex, suggestions) => {
+  if (!Array.isArray(suggestions) || suggestions.length === 0) return -1;
+  const maxIndex = suggestions.length - 1;
+  let itter = -1;
+  let returnIdx = -1;
+  let shouldSkip;
+
+  do {
+    var _suggestions$returnId, _suggestions$returnId2;
+
+    ++itter;
+    const maybeNextIdx = Math.trunc((returnIdx === -1 ? currentIndex : returnIdx) + direction);
+
+    if (maybeNextIdx < 0) {
+      returnIdx = maybeNextIdx > maxIndex ? 0 : maxIndex;
+    } else {
+      returnIdx = maybeNextIdx > maxIndex ? 0 : maybeNextIdx;
+    }
+
+    shouldSkip = (_suggestions$returnId = (_suggestions$returnId2 = suggestions[returnIdx]) === null || _suggestions$returnId2 === void 0 ? void 0 : _suggestions$returnId2.skip) !== null && _suggestions$returnId !== void 0 ? _suggestions$returnId : false;
+  } while (shouldSkip && itter <= maxIndex);
+
+  return itter > maxIndex ? -1 : returnIdx;
+};