@autoguru/overdrive 3.0.0-next.8 → 4.0.2

package/dist/components/AutoSuggest/AutoSuggest.js

@@ -1,476 +1,317 @@
-"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", "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, 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 { forwardRef, useCallback, useEffect, 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,
+            };
         }
-
-        return prevState;
-      }
-  }
+        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;
+        }
+    }
 };
-
-export const AutoSuggest = forwardRef(function AutoSuggest(_ref, ref) {
-  let {
-    autoFocus = false,
-    autoWidth = false,
-    inlineOptions = false,
-    fieldIcon,
-    suggestions,
-    value,
-    onChange: incomingOnChange,
-    itemRenderer = defaultItemRenderer,
-    onBlur: incomingOnBlur,
-    onFocus: incomingOnFocus,
-    onKeyDown,
-    onClick
-  } = _ref,
-      textInputProps = _objectWithoutProperties(_ref, _excluded);
-
-  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) {
+export const AutoSuggest = forwardRef(function AutoSuggest({ autoFocus = false, autoWidth = false, inlineOptions = false, fieldIcon, suggestions, value, onChange: incomingOnChange, itemRenderer = defaultItemRenderer, onBlur: incomingOnBlur, onFocus: incomingOnFocus, onKeyDown, onClick, ...textInputProps }, ref) {
+    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);
+        },
+        itemRenderer,
+        onKeyDown,
+        onClick,
+        onFocus: wrapEvent(() => {
+            setIsFocused(true);
+            setShowModal(true);
+        }, incomingOnFocus),
+        onBlur: wrapEvent(() => setIsFocused(false), incomingOnBlur),
+        ...textInputProps,
+    };
+    const closeModal = useCallback(() => {
         setShowModal(false);
-        if (!isDesktop) setIsFocused(false);
-      }
-
-      if (typeof incomingOnChange === 'function') incomingOnChange(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 ? <AutoSuggestFullscreenInput {...props} isFocused={isFocused} inlineOptions fieldIcon={fieldIcon} autoFocus={autoFocus} closeModal={closeModal} /> : <AutoSuggestInput ref={ref} {...props} isFocused={isFocused} inlineOptions={inlineOptions} fieldIcon={fieldIcon} autoFocus={autoFocus} autoWidth={autoWidth} />;
+        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: ref, ...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 ? <Portal>
-				<div className={styles.fullScreenRoot}>
-					<AutoSuggestInput ref={ref} {...props} className={styles.fullScreenInput} inlineOptions noScroll />
-					<Button minimal rounded className={styles.fullScreenCloseBtn} size="medium" onClick={closeModal}>
-						<Icon icon={CloseIcon} />
-					</Button>
-				</div>
-			</Portal> : 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 <Box role="combobox" aria-label={textInputProps.placeholder} aria-expanded={shouldOpenFlyout} aria-owns={suggestionListId} aria-haspopup="listbox" width="full">
-			<Box backgroundColour="white" borderRadius="1" className={styles.input}>
-				<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 = 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]);
-              }
-
-              dispatch({
-                type: ActionTypes.INPUT_ENTER
-              });
-              return;
-            }
-
-          case 'Escape':
-            {
-              dispatch({
-                type: ActionTypes.INPUT_ESCAPE
-              });
-            }
-        }
-      }, onKeyDown)} />
-			</Box>
-			{inlineOptions ? <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} /> : <SuggestionListFlyout id={suggestionListId} autoWidth={autoWidth} triggerRef={triggerRef} alignment={EAlignment.BOTTOM_LEFT} isOpen={shouldOpenFlyout} triggerOffset={4}>
-					<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} />
-				</SuggestionListFlyout>}
-		</Box>;
+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 SuggestionsList = _ref4 => {
-  let {
-    className = '',
-    suggestionListId,
-    placeholder,
-    highlightIndex,
-    suggestions,
-    highlightRef,
-    itemRenderer,
-    onChange,
-    dispatch,
-    suggestionListRef
-  } = _ref4;
-  return <Box ref={suggestionListRef} is="ul" backgroundColour="white" className={[styles.suggestionList.defaults, className]} id={suggestionListId} aria-label={placeholder} role="listbox">
-		<div className={styles.spacer} />
-		{suggestions.map((suggestion, idx) => {
-      const highlight = highlightIndex === idx;
-      return <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.SUGGESTION_MOUSE_ENTER,
-          index: idx
-        });
-      }} onClick={() => {
-        if (suggestion.skip) return;
-        if (typeof onChange === 'function') onChange(suggestion);
-        dispatch({
-          type: ActionTypes.SUGGESTION_MOUSE_CLICK
-        });
-      }}>
-					{typeof itemRenderer === 'function' && itemRenderer({
-          suggestions,
-          highlight,
-          value: suggestion
-        })}
-				</Box>;
-    })}
-		<div className={styles.spacer} />
-	</Box>;
-};
-
-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 ? <Box is="button" paddingY="3" paddingRight="4" flexShrink={0} onMouseDown={onRequestReset}>
-						<Icon size="medium" icon={CloseIcon} />
-					</Box> : fieldIcon ? <Box flexShrink={0} paddingY="3" paddingRight="4" onClick={focusHandler}>
-						<Icon size="medium" icon={fieldIcon} />
-					</Box> : null, [field.value, isLoading, fieldIcon, isFocused, onRequestReset]);
-  useEffect(() => () => focusTimeout ? clearTimeout(focusTimeout) : void 0, []);
-  return <Box display="flex" flexWrap="nowrap" alignItems="center" justifyContent="center" className={className}>
-				<Box is="input" flexGrow={1} {...inputEventHandlers} {...field} ref={handleRef} autoCapitalize="none" spellCheck="false" autoComplete="off" {...rest} type="search" />
-				{suffix}
-			</Box>;
+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.SUGGESTION_MOUSE_ENTER,
+                    index: idx,
+                });
+            }, onClick: () => {
+                if (suggestion.skip)
+                    return;
+                if (typeof onChange === 'function')
+                    onChange(suggestion);
+                dispatch({
+                    type: ActionTypes.SUGGESTION_MOUSE_CLICK,
+                });
+            } }, 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));
 }, {
-  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 <Positioner id={id} triggerRef={triggerRef} alignment={alignment} isOpen={isOpen} triggerOffset={triggerOffset} role="listbox">
-		<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}
-		</Box>
-	</Positioner>;
-};
-
-const defaultItemRenderer = _ref7 => {
-  let {
-    value,
-    highlight
-  } = _ref7;
-  return <DefaultSuggestion highlight={highlight} text={value.text} />;
-};
-
-const DefaultSuggestion = _ref8 => {
-  let {
-    text,
-    highlight
-  } = _ref8;
-  return <div className={clsx(styles.suggestion, {
-    [styles.suggestionHighlight]: highlight
-  })}>
-		<Text is="span">{text}</Text>
-	</div>;
-};
-
+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;
+};