@react-spectrum/autocomplete 3.0.0-alpha.31 → 3.0.0-alpha.33

package/dist/SearchAutocomplete.main.js

@@ -6,7 +6,7 @@ require("./vars.31879241.css");
 var $1e139f06a0a4b696$exports = require("./search_vars_css.main.js");
 require("./vars.936671cd.css");
 var $2f86633ce5b04f1e$exports = require("./inputgroup_vars_css.main.js");
-require("./vars.5653edea.css");
+require("./vars.f9e74788.css");
 var $40cb3a00c193680f$exports = require("./textfield_vars_css.main.js");
 var $k6PeR$reactspectrumutils = require("@react-spectrum/utils");
 var $k6PeR$reactspectrumbutton = require("@react-spectrum/button");
@@ -72,7 +72,7 @@ $parcel$export(module.exports, "SearchAutocomplete", () => $dcf500d58a031ca6$exp
 function $dcf500d58a031ca6$var$SearchAutocomplete(props, ref) {
     props = (0, $k6PeR$reactspectrumprovider.useProviderProps)(props);
     props = (0, $k6PeR$reactspectrumform.useFormProps)(props);
-    if (props.placeholder) console.warn("Placeholders are deprecated due to accessibility issues. Please use help text instead.");
+    if (props.placeholder) console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead.');
     let isMobile = (0, $k6PeR$reactspectrumutils.useIsMobileDevice)();
     if (isMobile) // menuTrigger=focus/manual don't apply to mobile searchwithin
     return /*#__PURE__*/ (0, ($parcel$interopDefault($k6PeR$react))).createElement((0, $a9f98e219df0b64d$exports.MobileSearchAutocomplete), {
@@ -87,8 +87,8 @@ function $dcf500d58a031ca6$var$SearchAutocomplete(props, ref) {
 }
 function $dcf500d58a031ca6$var$_SearchAutocompleteBase(props, ref) {
     props = (0, $k6PeR$reactspectrumprovider.useProviderProps)(props);
-    let { menuTrigger: menuTrigger = "input", shouldFlip: shouldFlip = true, direction: direction = "bottom", align: align = "start", isQuiet: isQuiet, menuWidth: customMenuWidth, loadingState: loadingState, onLoadMore: onLoadMore, onSubmit: onSubmit = ()=>{}, validate: validate } = props;
-    let stringFormatter = (0, $k6PeR$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($e32120882142a69f$exports))), "@react-spectrum/autocomplete");
+    let { menuTrigger: menuTrigger = 'input', shouldFlip: shouldFlip = true, direction: direction = 'bottom', align: align = 'start', isQuiet: isQuiet, menuWidth: customMenuWidth, loadingState: loadingState, onLoadMore: onLoadMore, onSubmit: onSubmit = ()=>{}, validate: validate } = props;
+    let stringFormatter = (0, $k6PeR$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($e32120882142a69f$exports))), '@react-spectrum/autocomplete');
     let isAsync = loadingState != null;
     let popoverRef = (0, $k6PeR$react.useRef)(null);
     let unwrappedPopoverRef = (0, $k6PeR$reactspectrumutils.useUnwrapDOMRef)(popoverRef);
@@ -96,7 +96,7 @@ function $dcf500d58a031ca6$var$_SearchAutocompleteBase(props, ref) {
     let inputRef = (0, $k6PeR$react.useRef)(null);
     let domRef = (0, $k6PeR$reactspectrumutils.useFocusableRef)(ref, inputRef);
     let { contains: contains } = (0, $k6PeR$reactariai18n.useFilter)({
-        sensitivity: "base"
+        sensitivity: 'base'
     });
     let state = (0, $k6PeR$reactstatelycombobox.useComboBoxState)({
         ...props,
@@ -110,10 +110,10 @@ function $dcf500d58a031ca6$var$_SearchAutocompleteBase(props, ref) {
             validate
         ])
     });
-    let layout = (0, $k6PeR$reactspectrumlistbox.useListBoxLayout)(state, loadingState === "loadingMore");
+    let layout = (0, $k6PeR$reactspectrumlistbox.useListBoxLayout)();
     let { inputProps: inputProps, listBoxProps: listBoxProps, labelProps: labelProps, clearButtonProps: clearButtonProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps, isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = (0, $k6PeR$reactariaautocomplete.useSearchAutocomplete)({
         ...props,
-        keyboardDelegate: layout,
+        layoutDelegate: layout,
         popoverRef: unwrappedPopoverRef,
         listBoxRef: listBoxRef,
         inputRef: inputRef,
@@ -160,12 +160,12 @@ function $dcf500d58a031ca6$var$_SearchAutocompleteBase(props, ref) {
         inputProps: inputProps,
         inputRef: inputRef,
         clearButtonProps: clearButtonProps,
-        validationState: props.validationState || (isInvalid ? "invalid" : undefined)
+        validationState: props.validationState || (isInvalid ? 'invalid' : undefined)
     })), /*#__PURE__*/ (0, ($parcel$interopDefault($k6PeR$react))).createElement((0, $k6PeR$reactspectrumoverlays.Popover), {
         state: state,
         UNSAFE_style: style,
-        UNSAFE_className: (0, $k6PeR$reactspectrumutils.classNames)((0, ($parcel$interopDefault($2f86633ce5b04f1e$exports))), "spectrum-InputGroup-popover", {
-            "spectrum-InputGroup-popover--quiet": isQuiet
+        UNSAFE_className: (0, $k6PeR$reactspectrumutils.classNames)((0, ($parcel$interopDefault($2f86633ce5b04f1e$exports))), 'spectrum-InputGroup-popover', {
+            'spectrum-InputGroup-popover--quiet': isQuiet
         }),
         ref: popoverRef,
         triggerRef: inputRef,
@@ -183,11 +183,12 @@ function $dcf500d58a031ca6$var$_SearchAutocompleteBase(props, ref) {
         layout: layout,
         state: state,
         shouldUseVirtualFocus: true,
-        isLoading: loadingState === "loading" || loadingState === "loadingMore",
+        isLoading: loadingState === 'loading' || loadingState === 'loadingMore',
+        showLoadingSpinner: loadingState === 'loadingMore',
         onLoadMore: onLoadMore,
         renderEmptyState: ()=>isAsync && /*#__PURE__*/ (0, ($parcel$interopDefault($k6PeR$react))).createElement("span", {
-                className: (0, $k6PeR$reactspectrumutils.classNames)((0, ($parcel$interopDefault($83da5c2df967875d$exports))), "no-results")
-            }, stringFormatter.format("noResults"))
+                className: (0, $k6PeR$reactspectrumutils.classNames)((0, ($parcel$interopDefault($83da5c2df967875d$exports))), 'no-results')
+            }, stringFormatter.format('noResults'))
     })));
 }
 let $dcf500d58a031ca6$var$SearchAutocompleteBase = /*#__PURE__*/ (0, ($parcel$interopDefault($k6PeR$react))).forwardRef($dcf500d58a031ca6$var$_SearchAutocompleteBase);
@@ -199,23 +200,23 @@ function $dcf500d58a031ca6$var$_SearchAutocompleteInput(props, ref) {
     });
     let { icon: icon = searchIcon, isQuiet: isQuiet, isDisabled: isDisabled, isReadOnly: isReadOnly, validationState: validationState, inputProps: inputProps, inputRef: inputRef, autoFocus: autoFocus, style: style, className: className, loadingState: loadingState, isOpen: isOpen, menuTrigger: menuTrigger, clearButtonProps: clearButtonProps } = props;
     let { hoverProps: hoverProps, isHovered: isHovered } = (0, $k6PeR$reactariainteractions.useHover)({});
-    let stringFormatter = (0, $k6PeR$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($e32120882142a69f$exports))), "@react-spectrum/autocomplete");
+    let stringFormatter = (0, $k6PeR$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($e32120882142a69f$exports))), '@react-spectrum/autocomplete');
     let domProps = (0, $k6PeR$reactariautils.filterDOMProps)(props);
     let timeout = (0, $k6PeR$react.useRef)(null);
     let [showLoading, setShowLoading] = (0, $k6PeR$react.useState)(false);
     let loadingCircle = /*#__PURE__*/ (0, ($parcel$interopDefault($k6PeR$react))).createElement((0, $k6PeR$reactspectrumprogress.ProgressCircle), {
-        "aria-label": stringFormatter.format("loading"),
+        "aria-label": stringFormatter.format('loading'),
         size: "S",
         isIndeterminate: true,
-        UNSAFE_className: (0, $k6PeR$reactspectrumutils.classNames)((0, ($parcel$interopDefault($40cb3a00c193680f$exports))), "spectrum-Textfield-circleLoader", (0, $k6PeR$reactspectrumutils.classNames)((0, ($parcel$interopDefault($2f86633ce5b04f1e$exports))), "spectrum-InputGroup-input-circleLoader"), (0, $k6PeR$reactspectrumutils.classNames)((0, ($parcel$interopDefault($1e139f06a0a4b696$exports))), "spectrum-Search-circleLoader"))
+        UNSAFE_className: (0, $k6PeR$reactspectrumutils.classNames)((0, ($parcel$interopDefault($40cb3a00c193680f$exports))), 'spectrum-Textfield-circleLoader', (0, $k6PeR$reactspectrumutils.classNames)((0, ($parcel$interopDefault($2f86633ce5b04f1e$exports))), 'spectrum-InputGroup-input-circleLoader'), (0, $k6PeR$reactspectrumutils.classNames)((0, ($parcel$interopDefault($1e139f06a0a4b696$exports))), 'spectrum-Search-circleLoader'))
     });
     let clearButton = /*#__PURE__*/ (0, ($parcel$interopDefault($k6PeR$react))).createElement((0, $k6PeR$reactspectrumbutton.ClearButton), {
         ...clearButtonProps,
         preventFocus: true,
-        UNSAFE_className: (0, $k6PeR$reactspectrumutils.classNames)((0, ($parcel$interopDefault($1e139f06a0a4b696$exports))), "spectrum-ClearButton"),
+        UNSAFE_className: (0, $k6PeR$reactspectrumutils.classNames)((0, ($parcel$interopDefault($1e139f06a0a4b696$exports))), 'spectrum-ClearButton'),
         isDisabled: isDisabled
     });
-    let isLoading = loadingState === "loading" || loadingState === "filtering";
+    let isLoading = loadingState === 'loading' || loadingState === 'filtering';
     let inputValue = inputProps.value;
     let lastInputValue = (0, $k6PeR$react.useRef)(inputValue);
     (0, $k6PeR$react.useEffect)(()=>{
@@ -247,38 +248,38 @@ function $dcf500d58a031ca6$var$_SearchAutocompleteInput(props, ref) {
     return /*#__PURE__*/ (0, ($parcel$interopDefault($k6PeR$react))).createElement((0, $k6PeR$reactariafocus.FocusRing), {
         within: true,
         isTextInput: true,
-        focusClass: (0, $k6PeR$reactspectrumutils.classNames)((0, ($parcel$interopDefault($2f86633ce5b04f1e$exports))), "is-focused"),
-        focusRingClass: (0, $k6PeR$reactspectrumutils.classNames)((0, ($parcel$interopDefault($2f86633ce5b04f1e$exports))), "focus-ring"),
+        focusClass: (0, $k6PeR$reactspectrumutils.classNames)((0, ($parcel$interopDefault($2f86633ce5b04f1e$exports))), 'is-focused'),
+        focusRingClass: (0, $k6PeR$reactspectrumutils.classNames)((0, ($parcel$interopDefault($2f86633ce5b04f1e$exports))), 'focus-ring'),
         autoFocus: autoFocus
     }, /*#__PURE__*/ (0, ($parcel$interopDefault($k6PeR$react))).createElement("div", {
         ...hoverProps,
         ref: ref,
         style: style,
-        className: (0, $k6PeR$reactspectrumutils.classNames)((0, ($parcel$interopDefault($2f86633ce5b04f1e$exports))), "spectrum-InputGroup", {
-            "spectrum-InputGroup--quiet": isQuiet,
-            "is-disabled": isDisabled,
-            "spectrum-InputGroup--invalid": validationState === "invalid" && !isDisabled,
-            "is-hovered": isHovered
-        }, (0, $k6PeR$reactspectrumutils.classNames)((0, ($parcel$interopDefault($83da5c2df967875d$exports))), "searchautocomplete"), className)
+        className: (0, $k6PeR$reactspectrumutils.classNames)((0, ($parcel$interopDefault($2f86633ce5b04f1e$exports))), 'spectrum-InputGroup', {
+            'spectrum-InputGroup--quiet': isQuiet,
+            'is-disabled': isDisabled,
+            'spectrum-InputGroup--invalid': validationState === 'invalid' && !isDisabled,
+            'is-hovered': isHovered
+        }, (0, $k6PeR$reactspectrumutils.classNames)((0, ($parcel$interopDefault($83da5c2df967875d$exports))), 'searchautocomplete'), className)
     }, /*#__PURE__*/ (0, ($parcel$interopDefault($k6PeR$react))).createElement((0, $k6PeR$reactspectrumtextfield.TextFieldBase), {
         ...domProps,
         inputProps: inputProps,
         inputRef: inputRef,
-        UNSAFE_className: (0, $k6PeR$reactspectrumutils.classNames)((0, ($parcel$interopDefault($1e139f06a0a4b696$exports))), "spectrum-Search", "spectrum-Search--loadable", "spectrum-Textfield", {
-            "is-disabled": isDisabled,
-            "is-quiet": isQuiet,
-            "spectrum-Search--invalid": validationState === "invalid" && !isDisabled,
-            "spectrum-Search--valid": validationState === "valid" && !isDisabled
-        }, (0, $k6PeR$reactspectrumutils.classNames)((0, ($parcel$interopDefault($2f86633ce5b04f1e$exports))), "spectrum-InputGroup-field")),
-        inputClassName: (0, $k6PeR$reactspectrumutils.classNames)((0, ($parcel$interopDefault($1e139f06a0a4b696$exports))), "spectrum-Search-input"),
-        validationIconClassName: (0, $k6PeR$reactspectrumutils.classNames)((0, ($parcel$interopDefault($1e139f06a0a4b696$exports))), "spectrum-Search-validationIcon"),
+        UNSAFE_className: (0, $k6PeR$reactspectrumutils.classNames)((0, ($parcel$interopDefault($1e139f06a0a4b696$exports))), 'spectrum-Search', 'spectrum-Search--loadable', 'spectrum-Textfield', {
+            'is-disabled': isDisabled,
+            'is-quiet': isQuiet,
+            'spectrum-Search--invalid': validationState === 'invalid' && !isDisabled,
+            'spectrum-Search--valid': validationState === 'valid' && !isDisabled
+        }, (0, $k6PeR$reactspectrumutils.classNames)((0, ($parcel$interopDefault($2f86633ce5b04f1e$exports))), 'spectrum-InputGroup-field')),
+        inputClassName: (0, $k6PeR$reactspectrumutils.classNames)((0, ($parcel$interopDefault($1e139f06a0a4b696$exports))), 'spectrum-Search-input'),
+        validationIconClassName: (0, $k6PeR$reactspectrumutils.classNames)((0, ($parcel$interopDefault($1e139f06a0a4b696$exports))), 'spectrum-Search-validationIcon'),
         isDisabled: isDisabled,
         isQuiet: isQuiet,
         validationState: validationState,
-        isLoading: showLoading && (isOpen || menuTrigger === "manual" || loadingState === "loading"),
+        isLoading: showLoading && (isOpen || menuTrigger === 'manual' || loadingState === 'loading'),
         loadingIndicator: loadingState != null ? loadingCircle : undefined,
         icon: icon,
-        wrapperChildren: (inputValue !== "" || loadingState === "filtering" || validationState != null) && !isReadOnly ? clearButton : undefined,
+        wrapperChildren: (inputValue !== '' || loadingState === 'filtering' || validationState != null) && !isReadOnly ? clearButton : undefined,
         disableFocusRing: true
     })));
 }

package/dist/SearchAutocomplete.main.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/autocomplete/src/SearchAutocomplete.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport {AriaButtonProps} from '@react-types/button';\nimport {classNames, dimensionValue, useFocusableRef, useIsMobileDevice, useResizeObserver, useUnwrapDOMRef} from '@react-spectrum/utils';\nimport {ClearButton} from '@react-spectrum/button';\nimport {DOMRefValue, FocusableRef} from '@react-types/shared';\nimport {Field} from '@react-spectrum/label';\nimport {filterDOMProps, useLayoutEffect} from '@react-aria/utils';\nimport {FocusRing} from '@react-aria/focus';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {ListBoxBase, useListBoxLayout} from '@react-spectrum/listbox';\nimport Magnifier from '@spectrum-icons/ui/Magnifier';\nimport {MobileSearchAutocomplete} from './MobileSearchAutocomplete';\nimport {Popover} from '@react-spectrum/overlays';\nimport {ProgressCircle} from '@react-spectrum/progress';\nimport React, {\n  forwardRef,\n  InputHTMLAttributes,\n  ReactElement,\n  RefObject,\n  useCallback,\n  useEffect,\n  useRef,\n  useState\n} from 'react';\nimport searchAutocompleteStyles from './searchautocomplete.css';\nimport searchStyles from '@adobe/spectrum-css-temp/components/search/vars.css';\nimport {SpectrumSearchAutocompleteProps} from '@react-types/autocomplete';\nimport styles from '@adobe/spectrum-css-temp/components/inputgroup/vars.css';\nimport {TextFieldBase} from '@react-spectrum/textfield';\nimport textfieldStyles from '@adobe/spectrum-css-temp/components/textfield/vars.css';\nimport {useComboBoxState} from '@react-stately/combobox';\nimport {useFilter, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useFormProps} from '@react-spectrum/form';\nimport {useHover} from '@react-aria/interactions';\nimport {useProvider, useProviderProps} from '@react-spectrum/provider';\nimport {useSearchAutocomplete} from '@react-aria/autocomplete';\n\nfunction SearchAutocomplete<T extends object>(props: SpectrumSearchAutocompleteProps<T>, ref: FocusableRef<HTMLElement>) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n\n  if (props.placeholder) {\n    console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead.');\n  }\n\n  let isMobile = useIsMobileDevice();\n  if (isMobile) {\n    // menuTrigger=focus/manual don't apply to mobile searchwithin\n    return <MobileSearchAutocomplete {...props} menuTrigger=\"input\" ref={ref} />;\n  } else {\n    return <SearchAutocompleteBase {...props} ref={ref} />;\n  }\n}\n\nfunction _SearchAutocompleteBase<T extends object>(props: SpectrumSearchAutocompleteProps<T>, ref: FocusableRef<HTMLElement>) {\n  props = useProviderProps(props);\n\n  let {\n    menuTrigger = 'input',\n    shouldFlip = true,\n    direction = 'bottom',\n    align = 'start',\n    isQuiet,\n    menuWidth: customMenuWidth,\n    loadingState,\n    onLoadMore,\n    onSubmit = () => {},\n    validate\n  } = props;\n\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/autocomplete');\n  let isAsync = loadingState != null;\n  let popoverRef = useRef<DOMRefValue<HTMLDivElement>>(null);\n  let unwrappedPopoverRef = useUnwrapDOMRef(popoverRef);\n  let listBoxRef = useRef(null);\n  let inputRef = useRef<HTMLInputElement>(null);\n  let domRef = useFocusableRef(ref, inputRef);\n\n  let {contains} = useFilter({sensitivity: 'base'});\n  let state = useComboBoxState(\n    {\n      ...props,\n      defaultFilter: contains,\n      allowsEmptyCollection: isAsync,\n      allowsCustomValue: true,\n      onSelectionChange: (key) => key !== null && onSubmit(null, key),\n      selectedKey: undefined,\n      defaultSelectedKey: undefined,\n      validate: useCallback(v => validate?.(v.inputValue), [validate])\n    }\n  );\n  let layout = useListBoxLayout(state, loadingState === 'loadingMore');\n\n  let {inputProps, listBoxProps, labelProps, clearButtonProps, descriptionProps, errorMessageProps, isInvalid, validationErrors, validationDetails} = useSearchAutocomplete(\n    {\n      ...props,\n      keyboardDelegate: layout,\n      popoverRef: unwrappedPopoverRef,\n      listBoxRef,\n      inputRef,\n      menuTrigger\n    },\n    state\n  );\n\n  // Measure the width of the inputfield to inform the width of the menu (below).\n  let [menuWidth, setMenuWidth] = useState<number>(0);\n  let {scale} = useProvider();\n\n  let onResize = useCallback(() => {\n    if (inputRef.current) {\n      let inputWidth = inputRef.current.offsetWidth;\n      setMenuWidth(inputWidth);\n    }\n  }, [inputRef, setMenuWidth]);\n\n  useResizeObserver({\n    ref: domRef,\n    onResize: onResize\n  });\n\n  useLayoutEffect(onResize, [scale, onResize]);\n\n  let width = isQuiet ? undefined : menuWidth;\n  let style = {\n    width: customMenuWidth ? dimensionValue(customMenuWidth) : width,\n    minWidth: isQuiet ? `calc(${menuWidth}px + calc(2 * var(--spectrum-dropdown-quiet-offset)))` : menuWidth\n  };\n\n  return (\n    <>\n      <Field\n        {...props}\n        descriptionProps={descriptionProps}\n        errorMessageProps={errorMessageProps}\n        labelProps={labelProps}\n        isInvalid={isInvalid}\n        validationErrors={validationErrors}\n        validationDetails={validationDetails}\n        ref={domRef}>\n        <SearchAutocompleteInput\n          {...props}\n          isOpen={state.isOpen}\n          loadingState={loadingState}\n          inputProps={inputProps}\n          inputRef={inputRef}\n          clearButtonProps={clearButtonProps}\n          validationState={props.validationState || (isInvalid ? 'invalid' : undefined)} />\n      </Field>\n      <Popover\n        state={state}\n        UNSAFE_style={style}\n        UNSAFE_className={classNames(styles, 'spectrum-InputGroup-popover', {'spectrum-InputGroup-popover--quiet': isQuiet})}\n        ref={popoverRef}\n        triggerRef={inputRef}\n        placement={`${direction} ${align}`}\n        hideArrow\n        isNonModal\n        shouldFlip={shouldFlip}>\n        <ListBoxBase\n          {...listBoxProps}\n          ref={listBoxRef}\n          disallowEmptySelection\n          autoFocus={state.focusStrategy}\n          shouldSelectOnPressUp\n          focusOnPointerEnter\n          layout={layout}\n          state={state}\n          shouldUseVirtualFocus\n          isLoading={loadingState === 'loading' || loadingState === 'loadingMore'}\n          onLoadMore={onLoadMore}\n          renderEmptyState={() => isAsync && (\n            <span className={classNames(searchAutocompleteStyles, 'no-results')}>\n              {stringFormatter.format('noResults')}\n            </span>\n          )} />\n      </Popover>\n    </>\n  );\n}\n\nlet SearchAutocompleteBase = React.forwardRef(_SearchAutocompleteBase) as <T>(props: SpectrumSearchAutocompleteProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;\n\n\ninterface SearchAutocompleteInputProps<T> extends SpectrumSearchAutocompleteProps<T> {\n  inputProps: InputHTMLAttributes<HTMLInputElement>,\n  inputRef: RefObject<HTMLInputElement>,\n  style?: React.CSSProperties,\n  className?: string,\n  isOpen?: boolean,\n  clearButtonProps: AriaButtonProps\n}\n\n// any type is because we don't want to call useObjectRef because this is an internal component and we know\n// we are always passing an object ref\nfunction _SearchAutocompleteInput<T>(props: SearchAutocompleteInputProps<T>, ref: any) {\n  let searchIcon = (\n    <Magnifier data-testid=\"searchicon\" />\n  );\n\n  let {\n    icon = searchIcon,\n    isQuiet,\n    isDisabled,\n    isReadOnly,\n    validationState,\n    inputProps,\n    inputRef,\n    autoFocus,\n    style,\n    className,\n    loadingState,\n    isOpen,\n    menuTrigger,\n    clearButtonProps\n  } = props;\n  let {hoverProps, isHovered} = useHover({});\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/autocomplete');\n  let domProps = filterDOMProps(props);\n  let timeout = useRef<ReturnType<typeof setTimeout> | null>(null);\n  let [showLoading, setShowLoading] = useState(false);\n\n  let loadingCircle = (\n    <ProgressCircle\n      aria-label={stringFormatter.format('loading')}\n      size=\"S\"\n      isIndeterminate\n      UNSAFE_className={classNames(\n        textfieldStyles,\n        'spectrum-Textfield-circleLoader',\n        classNames(\n          styles,\n          'spectrum-InputGroup-input-circleLoader'\n        ),\n        classNames(\n          searchStyles,\n          'spectrum-Search-circleLoader'\n        )\n      )} />\n  );\n\n  let clearButton = (\n    <ClearButton\n      {...clearButtonProps}\n      preventFocus\n      UNSAFE_className={\n        classNames(\n          searchStyles,\n          'spectrum-ClearButton'\n        )\n      }\n      isDisabled={isDisabled} />\n  );\n\n  let isLoading = loadingState === 'loading' || loadingState === 'filtering';\n  let inputValue = inputProps.value;\n  let lastInputValue = useRef(inputValue);\n  useEffect(() => {\n    if (isLoading && !showLoading) {\n      if (timeout.current === null) {\n        timeout.current = setTimeout(() => {\n          setShowLoading(true);\n        }, 500);\n      }\n\n      // If user is typing, clear the timer and restart since it is a new request\n      if (inputValue !== lastInputValue.current) {\n        clearTimeout(timeout.current);\n        timeout.current = setTimeout(() => {\n          setShowLoading(true);\n        }, 500);\n      }\n    } else if (!isLoading) {\n      // If loading is no longer happening, clear any timers and hide the loading circle\n      setShowLoading(false);\n      if (timeout.current != null) {\n        clearTimeout(timeout.current);\n        timeout.current = null;\n      }\n    }\n\n    lastInputValue.current = inputValue;\n  }, [isLoading, showLoading, inputValue]);\n\n  return (\n    <FocusRing\n      within\n      isTextInput\n      focusClass={classNames(styles, 'is-focused')}\n      focusRingClass={classNames(styles, 'focus-ring')}\n      autoFocus={autoFocus}>\n      <div\n        {...hoverProps}\n        ref={ref as RefObject<HTMLDivElement>}\n        style={style}\n        className={\n          classNames(\n            styles,\n            'spectrum-InputGroup',\n            {\n              'spectrum-InputGroup--quiet': isQuiet,\n              'is-disabled': isDisabled,\n              'spectrum-InputGroup--invalid': validationState === 'invalid' && !isDisabled,\n              'is-hovered': isHovered\n            },\n            classNames(\n              searchAutocompleteStyles,\n              'searchautocomplete'\n            ),\n            className\n          )\n        }>\n        <TextFieldBase\n          {...domProps}\n          inputProps={inputProps}\n          inputRef={inputRef}\n          UNSAFE_className={\n            classNames(\n              searchStyles,\n              'spectrum-Search',\n              'spectrum-Search--loadable',\n              'spectrum-Textfield',\n              {\n                'is-disabled': isDisabled,\n                'is-quiet': isQuiet,\n                'spectrum-Search--invalid': validationState === 'invalid' && !isDisabled,\n                'spectrum-Search--valid': validationState === 'valid' && !isDisabled\n              },\n              classNames(\n                styles,\n                'spectrum-InputGroup-field'\n              )\n            )\n          }\n          inputClassName={classNames(searchStyles, 'spectrum-Search-input')}\n          validationIconClassName={\n            classNames(\n              searchStyles,\n              'spectrum-Search-validationIcon'\n            )\n          }\n          isDisabled={isDisabled}\n          isQuiet={isQuiet}\n          validationState={validationState}\n          isLoading={showLoading && (isOpen || menuTrigger === 'manual' || loadingState === 'loading')}\n          loadingIndicator={loadingState != null ? loadingCircle : undefined}\n          icon={icon}\n          wrapperChildren={(inputValue !== '' || loadingState === 'filtering' || validationState != null) && !isReadOnly ? clearButton : undefined}\n          disableFocusRing />\n      </div>\n    </FocusRing>\n  );\n}\n\nlet SearchAutocompleteInput = React.forwardRef(_SearchAutocompleteInput) as <T>(props: SearchAutocompleteInputProps<T> & {ref?: any}) => ReactElement;\n\n\n/**\n * A SearchAutocomplete is a searchfield that supports a dynamic list of suggestions.\n */\nlet _SearchAutocomplete = forwardRef(SearchAutocomplete) as <T>(props: SpectrumSearchAutocompleteProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;\nexport {_SearchAutocomplete as SearchAutocomplete};\n"],"names":[],"version":3,"file":"SearchAutocomplete.main.js.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/autocomplete/src/SearchAutocomplete.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport {AriaButtonProps} from '@react-types/button';\nimport {classNames, dimensionValue, useFocusableRef, useIsMobileDevice, useResizeObserver, useUnwrapDOMRef} from '@react-spectrum/utils';\nimport {ClearButton} from '@react-spectrum/button';\nimport {DOMRefValue, FocusableRef} from '@react-types/shared';\nimport {Field} from '@react-spectrum/label';\nimport {filterDOMProps, useLayoutEffect} from '@react-aria/utils';\nimport {FocusRing} from '@react-aria/focus';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {ListBoxBase, useListBoxLayout} from '@react-spectrum/listbox';\nimport Magnifier from '@spectrum-icons/ui/Magnifier';\nimport {MobileSearchAutocomplete} from './MobileSearchAutocomplete';\nimport {Popover} from '@react-spectrum/overlays';\nimport {ProgressCircle} from '@react-spectrum/progress';\nimport React, {\n  forwardRef,\n  InputHTMLAttributes,\n  ReactElement,\n  RefObject,\n  useCallback,\n  useEffect,\n  useRef,\n  useState\n} from 'react';\nimport searchAutocompleteStyles from './searchautocomplete.css';\nimport searchStyles from '@adobe/spectrum-css-temp/components/search/vars.css';\nimport {SpectrumSearchAutocompleteProps} from '@react-types/autocomplete';\nimport styles from '@adobe/spectrum-css-temp/components/inputgroup/vars.css';\nimport {TextFieldBase} from '@react-spectrum/textfield';\nimport textfieldStyles from '@adobe/spectrum-css-temp/components/textfield/vars.css';\nimport {useComboBoxState} from '@react-stately/combobox';\nimport {useFilter, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useFormProps} from '@react-spectrum/form';\nimport {useHover} from '@react-aria/interactions';\nimport {useProvider, useProviderProps} from '@react-spectrum/provider';\nimport {useSearchAutocomplete} from '@react-aria/autocomplete';\n\nfunction SearchAutocomplete<T extends object>(props: SpectrumSearchAutocompleteProps<T>, ref: FocusableRef<HTMLElement>) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n\n  if (props.placeholder) {\n    console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead.');\n  }\n\n  let isMobile = useIsMobileDevice();\n  if (isMobile) {\n    // menuTrigger=focus/manual don't apply to mobile searchwithin\n    return <MobileSearchAutocomplete {...props} menuTrigger=\"input\" ref={ref} />;\n  } else {\n    return <SearchAutocompleteBase {...props} ref={ref} />;\n  }\n}\n\nfunction _SearchAutocompleteBase<T extends object>(props: SpectrumSearchAutocompleteProps<T>, ref: FocusableRef<HTMLElement>) {\n  props = useProviderProps(props);\n\n  let {\n    menuTrigger = 'input',\n    shouldFlip = true,\n    direction = 'bottom',\n    align = 'start',\n    isQuiet,\n    menuWidth: customMenuWidth,\n    loadingState,\n    onLoadMore,\n    onSubmit = () => {},\n    validate\n  } = props;\n\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/autocomplete');\n  let isAsync = loadingState != null;\n  let popoverRef = useRef<DOMRefValue<HTMLDivElement>>(null);\n  let unwrappedPopoverRef = useUnwrapDOMRef(popoverRef);\n  let listBoxRef = useRef(null);\n  let inputRef = useRef<HTMLInputElement>(null);\n  let domRef = useFocusableRef(ref, inputRef);\n\n  let {contains} = useFilter({sensitivity: 'base'});\n  let state = useComboBoxState(\n    {\n      ...props,\n      defaultFilter: contains,\n      allowsEmptyCollection: isAsync,\n      allowsCustomValue: true,\n      onSelectionChange: (key) => key !== null && onSubmit(null, key),\n      selectedKey: undefined,\n      defaultSelectedKey: undefined,\n      validate: useCallback(v => validate?.(v.inputValue), [validate])\n    }\n  );\n  let layout = useListBoxLayout();\n\n  let {inputProps, listBoxProps, labelProps, clearButtonProps, descriptionProps, errorMessageProps, isInvalid, validationErrors, validationDetails} = useSearchAutocomplete(\n    {\n      ...props,\n      layoutDelegate: layout,\n      popoverRef: unwrappedPopoverRef,\n      listBoxRef,\n      inputRef,\n      menuTrigger\n    },\n    state\n  );\n\n  // Measure the width of the inputfield to inform the width of the menu (below).\n  let [menuWidth, setMenuWidth] = useState<number>(0);\n  let {scale} = useProvider();\n\n  let onResize = useCallback(() => {\n    if (inputRef.current) {\n      let inputWidth = inputRef.current.offsetWidth;\n      setMenuWidth(inputWidth);\n    }\n  }, [inputRef, setMenuWidth]);\n\n  useResizeObserver({\n    ref: domRef,\n    onResize: onResize\n  });\n\n  useLayoutEffect(onResize, [scale, onResize]);\n\n  let width = isQuiet ? undefined : menuWidth;\n  let style = {\n    width: customMenuWidth ? dimensionValue(customMenuWidth) : width,\n    minWidth: isQuiet ? `calc(${menuWidth}px + calc(2 * var(--spectrum-dropdown-quiet-offset)))` : menuWidth\n  };\n\n  return (\n    <>\n      <Field\n        {...props}\n        descriptionProps={descriptionProps}\n        errorMessageProps={errorMessageProps}\n        labelProps={labelProps}\n        isInvalid={isInvalid}\n        validationErrors={validationErrors}\n        validationDetails={validationDetails}\n        ref={domRef}>\n        <SearchAutocompleteInput\n          {...props}\n          isOpen={state.isOpen}\n          loadingState={loadingState}\n          inputProps={inputProps}\n          inputRef={inputRef}\n          clearButtonProps={clearButtonProps}\n          validationState={props.validationState || (isInvalid ? 'invalid' : undefined)} />\n      </Field>\n      <Popover\n        state={state}\n        UNSAFE_style={style}\n        UNSAFE_className={classNames(styles, 'spectrum-InputGroup-popover', {'spectrum-InputGroup-popover--quiet': isQuiet})}\n        ref={popoverRef}\n        triggerRef={inputRef}\n        placement={`${direction} ${align}`}\n        hideArrow\n        isNonModal\n        shouldFlip={shouldFlip}>\n        <ListBoxBase\n          {...listBoxProps}\n          ref={listBoxRef}\n          disallowEmptySelection\n          autoFocus={state.focusStrategy}\n          shouldSelectOnPressUp\n          focusOnPointerEnter\n          layout={layout}\n          state={state}\n          shouldUseVirtualFocus\n          isLoading={loadingState === 'loading' || loadingState === 'loadingMore'}\n          showLoadingSpinner={loadingState === 'loadingMore'}\n          onLoadMore={onLoadMore}\n          renderEmptyState={() => isAsync && (\n            <span className={classNames(searchAutocompleteStyles, 'no-results')}>\n              {stringFormatter.format('noResults')}\n            </span>\n          )} />\n      </Popover>\n    </>\n  );\n}\n\nlet SearchAutocompleteBase = React.forwardRef(_SearchAutocompleteBase) as <T>(props: SpectrumSearchAutocompleteProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;\n\n\ninterface SearchAutocompleteInputProps<T> extends SpectrumSearchAutocompleteProps<T> {\n  inputProps: InputHTMLAttributes<HTMLInputElement>,\n  inputRef: RefObject<HTMLInputElement | null>,\n  style?: React.CSSProperties,\n  className?: string,\n  isOpen?: boolean,\n  clearButtonProps: AriaButtonProps\n}\n\n// any type is because we don't want to call useObjectRef because this is an internal component and we know\n// we are always passing an object ref\nfunction _SearchAutocompleteInput<T>(props: SearchAutocompleteInputProps<T>, ref: any) {\n  let searchIcon = (\n    <Magnifier data-testid=\"searchicon\" />\n  );\n\n  let {\n    icon = searchIcon,\n    isQuiet,\n    isDisabled,\n    isReadOnly,\n    validationState,\n    inputProps,\n    inputRef,\n    autoFocus,\n    style,\n    className,\n    loadingState,\n    isOpen,\n    menuTrigger,\n    clearButtonProps\n  } = props;\n  let {hoverProps, isHovered} = useHover({});\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/autocomplete');\n  let domProps = filterDOMProps(props);\n  let timeout = useRef<ReturnType<typeof setTimeout> | null>(null);\n  let [showLoading, setShowLoading] = useState(false);\n\n  let loadingCircle = (\n    <ProgressCircle\n      aria-label={stringFormatter.format('loading')}\n      size=\"S\"\n      isIndeterminate\n      UNSAFE_className={classNames(\n        textfieldStyles,\n        'spectrum-Textfield-circleLoader',\n        classNames(\n          styles,\n          'spectrum-InputGroup-input-circleLoader'\n        ),\n        classNames(\n          searchStyles,\n          'spectrum-Search-circleLoader'\n        )\n      )} />\n  );\n\n  let clearButton = (\n    <ClearButton\n      {...clearButtonProps}\n      preventFocus\n      UNSAFE_className={\n        classNames(\n          searchStyles,\n          'spectrum-ClearButton'\n        )\n      }\n      isDisabled={isDisabled} />\n  );\n\n  let isLoading = loadingState === 'loading' || loadingState === 'filtering';\n  let inputValue = inputProps.value;\n  let lastInputValue = useRef(inputValue);\n  useEffect(() => {\n    if (isLoading && !showLoading) {\n      if (timeout.current === null) {\n        timeout.current = setTimeout(() => {\n          setShowLoading(true);\n        }, 500);\n      }\n\n      // If user is typing, clear the timer and restart since it is a new request\n      if (inputValue !== lastInputValue.current) {\n        clearTimeout(timeout.current);\n        timeout.current = setTimeout(() => {\n          setShowLoading(true);\n        }, 500);\n      }\n    } else if (!isLoading) {\n      // If loading is no longer happening, clear any timers and hide the loading circle\n      setShowLoading(false);\n      if (timeout.current != null) {\n        clearTimeout(timeout.current);\n        timeout.current = null;\n      }\n    }\n\n    lastInputValue.current = inputValue;\n  }, [isLoading, showLoading, inputValue]);\n\n  return (\n    (<FocusRing\n      within\n      isTextInput\n      focusClass={classNames(styles, 'is-focused')}\n      focusRingClass={classNames(styles, 'focus-ring')}\n      autoFocus={autoFocus}>\n      <div\n        {...hoverProps}\n        ref={ref as RefObject<HTMLDivElement | null>}\n        style={style}\n        className={\n          classNames(\n            styles,\n            'spectrum-InputGroup',\n            {\n              'spectrum-InputGroup--quiet': isQuiet,\n              'is-disabled': isDisabled,\n              'spectrum-InputGroup--invalid': validationState === 'invalid' && !isDisabled,\n              'is-hovered': isHovered\n            },\n            classNames(\n              searchAutocompleteStyles,\n              'searchautocomplete'\n            ),\n            className\n          )\n        }>\n        <TextFieldBase\n          {...domProps}\n          inputProps={inputProps}\n          inputRef={inputRef}\n          UNSAFE_className={\n            classNames(\n              searchStyles,\n              'spectrum-Search',\n              'spectrum-Search--loadable',\n              'spectrum-Textfield',\n              {\n                'is-disabled': isDisabled,\n                'is-quiet': isQuiet,\n                'spectrum-Search--invalid': validationState === 'invalid' && !isDisabled,\n                'spectrum-Search--valid': validationState === 'valid' && !isDisabled\n              },\n              classNames(\n                styles,\n                'spectrum-InputGroup-field'\n              )\n            )\n          }\n          inputClassName={classNames(searchStyles, 'spectrum-Search-input')}\n          validationIconClassName={\n            classNames(\n              searchStyles,\n              'spectrum-Search-validationIcon'\n            )\n          }\n          isDisabled={isDisabled}\n          isQuiet={isQuiet}\n          validationState={validationState}\n          isLoading={showLoading && (isOpen || menuTrigger === 'manual' || loadingState === 'loading')}\n          loadingIndicator={loadingState != null ? loadingCircle : undefined}\n          icon={icon}\n          wrapperChildren={(inputValue !== '' || loadingState === 'filtering' || validationState != null) && !isReadOnly ? clearButton : undefined}\n          disableFocusRing />\n      </div>\n    </FocusRing>)\n  );\n}\n\nlet SearchAutocompleteInput = React.forwardRef(_SearchAutocompleteInput) as <T>(props: SearchAutocompleteInputProps<T> & {ref?: any}) => ReactElement;\n\n\n/**\n * A SearchAutocomplete is a searchfield that supports a dynamic list of suggestions.\n */\nlet _SearchAutocomplete = forwardRef(SearchAutocomplete) as <T>(props: SpectrumSearchAutocompleteProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;\nexport {_SearchAutocomplete as SearchAutocomplete};\n"],"names":[],"version":3,"file":"SearchAutocomplete.main.js.map"}

package/dist/SearchAutocomplete.mjs

@@ -6,7 +6,7 @@ import "./vars.31879241.css";
 import $fLcex$search_vars_cssmodulejs from "./search_vars_css.mjs";
 import "./vars.936671cd.css";
 import $fLcex$inputgroup_vars_cssmodulejs from "./inputgroup_vars_css.mjs";
-import "./vars.5653edea.css";
+import "./vars.f9e74788.css";
 import $fLcex$textfield_vars_cssmodulejs from "./textfield_vars_css.mjs";
 import {useIsMobileDevice as $fLcex$useIsMobileDevice, useUnwrapDOMRef as $fLcex$useUnwrapDOMRef, useFocusableRef as $fLcex$useFocusableRef, useResizeObserver as $fLcex$useResizeObserver, dimensionValue as $fLcex$dimensionValue, classNames as $fLcex$classNames} from "@react-spectrum/utils";
 import {ClearButton as $fLcex$ClearButton} from "@react-spectrum/button";
@@ -66,7 +66,7 @@ function $parcel$interopDefault(a) {
 function $f3f3b62273a2d260$var$SearchAutocomplete(props, ref) {
     props = (0, $fLcex$useProviderProps)(props);
     props = (0, $fLcex$useFormProps)(props);
-    if (props.placeholder) console.warn("Placeholders are deprecated due to accessibility issues. Please use help text instead.");
+    if (props.placeholder) console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead.');
     let isMobile = (0, $fLcex$useIsMobileDevice)();
     if (isMobile) // menuTrigger=focus/manual don't apply to mobile searchwithin
     return /*#__PURE__*/ (0, $fLcex$react).createElement((0, $c940f54e16bafef5$export$e7a90f7d6b078162), {
@@ -81,8 +81,8 @@ function $f3f3b62273a2d260$var$SearchAutocomplete(props, ref) {
 }
 function $f3f3b62273a2d260$var$_SearchAutocompleteBase(props, ref) {
     props = (0, $fLcex$useProviderProps)(props);
-    let { menuTrigger: menuTrigger = "input", shouldFlip: shouldFlip = true, direction: direction = "bottom", align: align = "start", isQuiet: isQuiet, menuWidth: customMenuWidth, loadingState: loadingState, onLoadMore: onLoadMore, onSubmit: onSubmit = ()=>{}, validate: validate } = props;
-    let stringFormatter = (0, $fLcex$useLocalizedStringFormatter)((0, ($parcel$interopDefault($fLcex$intlStringsmodulejs))), "@react-spectrum/autocomplete");
+    let { menuTrigger: menuTrigger = 'input', shouldFlip: shouldFlip = true, direction: direction = 'bottom', align: align = 'start', isQuiet: isQuiet, menuWidth: customMenuWidth, loadingState: loadingState, onLoadMore: onLoadMore, onSubmit: onSubmit = ()=>{}, validate: validate } = props;
+    let stringFormatter = (0, $fLcex$useLocalizedStringFormatter)((0, ($parcel$interopDefault($fLcex$intlStringsmodulejs))), '@react-spectrum/autocomplete');
     let isAsync = loadingState != null;
     let popoverRef = (0, $fLcex$useRef)(null);
     let unwrappedPopoverRef = (0, $fLcex$useUnwrapDOMRef)(popoverRef);
@@ -90,7 +90,7 @@ function $f3f3b62273a2d260$var$_SearchAutocompleteBase(props, ref) {
     let inputRef = (0, $fLcex$useRef)(null);
     let domRef = (0, $fLcex$useFocusableRef)(ref, inputRef);
     let { contains: contains } = (0, $fLcex$useFilter)({
-        sensitivity: "base"
+        sensitivity: 'base'
     });
     let state = (0, $fLcex$useComboBoxState)({
         ...props,
@@ -104,10 +104,10 @@ function $f3f3b62273a2d260$var$_SearchAutocompleteBase(props, ref) {
             validate
         ])
     });
-    let layout = (0, $fLcex$useListBoxLayout)(state, loadingState === "loadingMore");
+    let layout = (0, $fLcex$useListBoxLayout)();
     let { inputProps: inputProps, listBoxProps: listBoxProps, labelProps: labelProps, clearButtonProps: clearButtonProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps, isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = (0, $fLcex$useSearchAutocomplete)({
         ...props,
-        keyboardDelegate: layout,
+        layoutDelegate: layout,
         popoverRef: unwrappedPopoverRef,
         listBoxRef: listBoxRef,
         inputRef: inputRef,
@@ -154,12 +154,12 @@ function $f3f3b62273a2d260$var$_SearchAutocompleteBase(props, ref) {
         inputProps: inputProps,
         inputRef: inputRef,
         clearButtonProps: clearButtonProps,
-        validationState: props.validationState || (isInvalid ? "invalid" : undefined)
+        validationState: props.validationState || (isInvalid ? 'invalid' : undefined)
     })), /*#__PURE__*/ (0, $fLcex$react).createElement((0, $fLcex$Popover), {
         state: state,
         UNSAFE_style: style,
-        UNSAFE_className: (0, $fLcex$classNames)((0, ($parcel$interopDefault($fLcex$inputgroup_vars_cssmodulejs))), "spectrum-InputGroup-popover", {
-            "spectrum-InputGroup-popover--quiet": isQuiet
+        UNSAFE_className: (0, $fLcex$classNames)((0, ($parcel$interopDefault($fLcex$inputgroup_vars_cssmodulejs))), 'spectrum-InputGroup-popover', {
+            'spectrum-InputGroup-popover--quiet': isQuiet
         }),
         ref: popoverRef,
         triggerRef: inputRef,
@@ -177,11 +177,12 @@ function $f3f3b62273a2d260$var$_SearchAutocompleteBase(props, ref) {
         layout: layout,
         state: state,
         shouldUseVirtualFocus: true,
-        isLoading: loadingState === "loading" || loadingState === "loadingMore",
+        isLoading: loadingState === 'loading' || loadingState === 'loadingMore',
+        showLoadingSpinner: loadingState === 'loadingMore',
         onLoadMore: onLoadMore,
         renderEmptyState: ()=>isAsync && /*#__PURE__*/ (0, $fLcex$react).createElement("span", {
-                className: (0, $fLcex$classNames)((0, ($parcel$interopDefault($fLcex$searchautocomplete_cssmodulejs))), "no-results")
-            }, stringFormatter.format("noResults"))
+                className: (0, $fLcex$classNames)((0, ($parcel$interopDefault($fLcex$searchautocomplete_cssmodulejs))), 'no-results')
+            }, stringFormatter.format('noResults'))
     })));
 }
 let $f3f3b62273a2d260$var$SearchAutocompleteBase = /*#__PURE__*/ (0, $fLcex$react).forwardRef($f3f3b62273a2d260$var$_SearchAutocompleteBase);
@@ -193,23 +194,23 @@ function $f3f3b62273a2d260$var$_SearchAutocompleteInput(props, ref) {
     });
     let { icon: icon = searchIcon, isQuiet: isQuiet, isDisabled: isDisabled, isReadOnly: isReadOnly, validationState: validationState, inputProps: inputProps, inputRef: inputRef, autoFocus: autoFocus, style: style, className: className, loadingState: loadingState, isOpen: isOpen, menuTrigger: menuTrigger, clearButtonProps: clearButtonProps } = props;
     let { hoverProps: hoverProps, isHovered: isHovered } = (0, $fLcex$useHover)({});
-    let stringFormatter = (0, $fLcex$useLocalizedStringFormatter)((0, ($parcel$interopDefault($fLcex$intlStringsmodulejs))), "@react-spectrum/autocomplete");
+    let stringFormatter = (0, $fLcex$useLocalizedStringFormatter)((0, ($parcel$interopDefault($fLcex$intlStringsmodulejs))), '@react-spectrum/autocomplete');
     let domProps = (0, $fLcex$filterDOMProps)(props);
     let timeout = (0, $fLcex$useRef)(null);
     let [showLoading, setShowLoading] = (0, $fLcex$useState)(false);
     let loadingCircle = /*#__PURE__*/ (0, $fLcex$react).createElement((0, $fLcex$ProgressCircle), {
-        "aria-label": stringFormatter.format("loading"),
+        "aria-label": stringFormatter.format('loading'),
         size: "S",
         isIndeterminate: true,
-        UNSAFE_className: (0, $fLcex$classNames)((0, ($parcel$interopDefault($fLcex$textfield_vars_cssmodulejs))), "spectrum-Textfield-circleLoader", (0, $fLcex$classNames)((0, ($parcel$interopDefault($fLcex$inputgroup_vars_cssmodulejs))), "spectrum-InputGroup-input-circleLoader"), (0, $fLcex$classNames)((0, ($parcel$interopDefault($fLcex$search_vars_cssmodulejs))), "spectrum-Search-circleLoader"))
+        UNSAFE_className: (0, $fLcex$classNames)((0, ($parcel$interopDefault($fLcex$textfield_vars_cssmodulejs))), 'spectrum-Textfield-circleLoader', (0, $fLcex$classNames)((0, ($parcel$interopDefault($fLcex$inputgroup_vars_cssmodulejs))), 'spectrum-InputGroup-input-circleLoader'), (0, $fLcex$classNames)((0, ($parcel$interopDefault($fLcex$search_vars_cssmodulejs))), 'spectrum-Search-circleLoader'))
     });
     let clearButton = /*#__PURE__*/ (0, $fLcex$react).createElement((0, $fLcex$ClearButton), {
         ...clearButtonProps,
         preventFocus: true,
-        UNSAFE_className: (0, $fLcex$classNames)((0, ($parcel$interopDefault($fLcex$search_vars_cssmodulejs))), "spectrum-ClearButton"),
+        UNSAFE_className: (0, $fLcex$classNames)((0, ($parcel$interopDefault($fLcex$search_vars_cssmodulejs))), 'spectrum-ClearButton'),
         isDisabled: isDisabled
     });
-    let isLoading = loadingState === "loading" || loadingState === "filtering";
+    let isLoading = loadingState === 'loading' || loadingState === 'filtering';
     let inputValue = inputProps.value;
     let lastInputValue = (0, $fLcex$useRef)(inputValue);
     (0, $fLcex$useEffect)(()=>{
@@ -241,38 +242,38 @@ function $f3f3b62273a2d260$var$_SearchAutocompleteInput(props, ref) {
     return /*#__PURE__*/ (0, $fLcex$react).createElement((0, $fLcex$FocusRing), {
         within: true,
         isTextInput: true,
-        focusClass: (0, $fLcex$classNames)((0, ($parcel$interopDefault($fLcex$inputgroup_vars_cssmodulejs))), "is-focused"),
-        focusRingClass: (0, $fLcex$classNames)((0, ($parcel$interopDefault($fLcex$inputgroup_vars_cssmodulejs))), "focus-ring"),
+        focusClass: (0, $fLcex$classNames)((0, ($parcel$interopDefault($fLcex$inputgroup_vars_cssmodulejs))), 'is-focused'),
+        focusRingClass: (0, $fLcex$classNames)((0, ($parcel$interopDefault($fLcex$inputgroup_vars_cssmodulejs))), 'focus-ring'),
         autoFocus: autoFocus
     }, /*#__PURE__*/ (0, $fLcex$react).createElement("div", {
         ...hoverProps,
         ref: ref,
         style: style,
-        className: (0, $fLcex$classNames)((0, ($parcel$interopDefault($fLcex$inputgroup_vars_cssmodulejs))), "spectrum-InputGroup", {
-            "spectrum-InputGroup--quiet": isQuiet,
-            "is-disabled": isDisabled,
-            "spectrum-InputGroup--invalid": validationState === "invalid" && !isDisabled,
-            "is-hovered": isHovered
-        }, (0, $fLcex$classNames)((0, ($parcel$interopDefault($fLcex$searchautocomplete_cssmodulejs))), "searchautocomplete"), className)
+        className: (0, $fLcex$classNames)((0, ($parcel$interopDefault($fLcex$inputgroup_vars_cssmodulejs))), 'spectrum-InputGroup', {
+            'spectrum-InputGroup--quiet': isQuiet,
+            'is-disabled': isDisabled,
+            'spectrum-InputGroup--invalid': validationState === 'invalid' && !isDisabled,
+            'is-hovered': isHovered
+        }, (0, $fLcex$classNames)((0, ($parcel$interopDefault($fLcex$searchautocomplete_cssmodulejs))), 'searchautocomplete'), className)
     }, /*#__PURE__*/ (0, $fLcex$react).createElement((0, $fLcex$TextFieldBase), {
         ...domProps,
         inputProps: inputProps,
         inputRef: inputRef,
-        UNSAFE_className: (0, $fLcex$classNames)((0, ($parcel$interopDefault($fLcex$search_vars_cssmodulejs))), "spectrum-Search", "spectrum-Search--loadable", "spectrum-Textfield", {
-            "is-disabled": isDisabled,
-            "is-quiet": isQuiet,
-            "spectrum-Search--invalid": validationState === "invalid" && !isDisabled,
-            "spectrum-Search--valid": validationState === "valid" && !isDisabled
-        }, (0, $fLcex$classNames)((0, ($parcel$interopDefault($fLcex$inputgroup_vars_cssmodulejs))), "spectrum-InputGroup-field")),
-        inputClassName: (0, $fLcex$classNames)((0, ($parcel$interopDefault($fLcex$search_vars_cssmodulejs))), "spectrum-Search-input"),
-        validationIconClassName: (0, $fLcex$classNames)((0, ($parcel$interopDefault($fLcex$search_vars_cssmodulejs))), "spectrum-Search-validationIcon"),
+        UNSAFE_className: (0, $fLcex$classNames)((0, ($parcel$interopDefault($fLcex$search_vars_cssmodulejs))), 'spectrum-Search', 'spectrum-Search--loadable', 'spectrum-Textfield', {
+            'is-disabled': isDisabled,
+            'is-quiet': isQuiet,
+            'spectrum-Search--invalid': validationState === 'invalid' && !isDisabled,
+            'spectrum-Search--valid': validationState === 'valid' && !isDisabled
+        }, (0, $fLcex$classNames)((0, ($parcel$interopDefault($fLcex$inputgroup_vars_cssmodulejs))), 'spectrum-InputGroup-field')),
+        inputClassName: (0, $fLcex$classNames)((0, ($parcel$interopDefault($fLcex$search_vars_cssmodulejs))), 'spectrum-Search-input'),
+        validationIconClassName: (0, $fLcex$classNames)((0, ($parcel$interopDefault($fLcex$search_vars_cssmodulejs))), 'spectrum-Search-validationIcon'),
         isDisabled: isDisabled,
         isQuiet: isQuiet,
         validationState: validationState,
-        isLoading: showLoading && (isOpen || menuTrigger === "manual" || loadingState === "loading"),
+        isLoading: showLoading && (isOpen || menuTrigger === 'manual' || loadingState === 'loading'),
         loadingIndicator: loadingState != null ? loadingCircle : undefined,
         icon: icon,
-        wrapperChildren: (inputValue !== "" || loadingState === "filtering" || validationState != null) && !isReadOnly ? clearButton : undefined,
+        wrapperChildren: (inputValue !== '' || loadingState === 'filtering' || validationState != null) && !isReadOnly ? clearButton : undefined,
         disableFocusRing: true
     })));
 }
@@ -283,4 +284,4 @@ let $f3f3b62273a2d260$var$SearchAutocompleteInput = /*#__PURE__*/ (0, $fLcex$rea
 
 
 export {$f3f3b62273a2d260$export$dd65332a5b19fa63 as SearchAutocomplete};
-//# sourceMappingURL=SearchAutocomplete.mjs.map
+//# sourceMappingURL=SearchAutocomplete.module.js.map