@autoguru/overdrive 4.3.4 → 4.4.0

package/dist/components/AutoSuggest/AutoSuggest.js

@@ -1,640 +1,327 @@
-"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); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : 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/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";
+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';
 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 _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
-          };
+const inputReducerFactory = (suggestions) => (prevState, action) => {
+    switch (action.type) {
+        default:
+        case ActionTypes.INPUT_CHANGE: {
+            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 _objectSpread(_objectSpread({}, prevState), {}, {
-          highlightIndex: action.index
-        });
-      }
-
-    case ActionTypes.INPUT_ENTER:
-      {
-        if (prevState.highlightIndex > -1) {
-          return {
-            highlightIndex: -1,
-            previewText: null,
-            isFlyoutOpen: false
-          };
+        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,
+            };
+        }
+        case ActionTypes.INPUT_ENTER: {
+            if (prevState.highlightIndex > -1) {
+                return {
+                    highlightIndex: -1,
+                    previewText: null,
+                    isFlyoutOpen: false,
+                };
+            }
+            return prevState;
         }
-
-        return prevState;
-      }
-  }
+    }
 };
-
-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;
-
+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(() => {
         setShowModal(false);
         setIsFocused(false);
-        (_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
-  }));
+    }, [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 }));
 });
-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 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(_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: 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: 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]);
-                }
-
+const AutoSuggestInput = forwardRef(function AutoSuggestInput({ inlineOptions = false, noScroll = false, isFocused = false, size, 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, size: size, 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 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;
                 dispatch({
-                  type: ActionTypes.INPUT_ENTER
+                    type: ActionTypes.SUGGESTION_MOUSE_ENTER,
+                    index: idx,
                 });
-                return;
-              }
-
-            case 'Escape':
-              {
+            }, onClick: () => {
+                if (suggestion.skip)
+                    return;
+                if (typeof onChange === 'function')
+                    onChange(suggestion);
                 dispatch({
-                  type: ActionTypes.INPUT_ESCAPE
+                    type: ActionTypes.SUGGESTION_MOUSE_CLICK,
                 });
-              }
-          }
-        }, 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]
-  });
+            } }, 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, size, ...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: size === 'medium' ? '3' : '2', paddingRight: size === 'medium' ? '3' : '2', 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));
 }, {
-  primitiveType: 'text',
-  withPrefixIcon: true,
-  withSuffixIcon: false
+    primitiveType: 'text',
+    withPrefixIcon: true,
+    withSuffixIcon: false,
 });
-
-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 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 {
-    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;
-};
+    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;
+};