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

package/dist/MobileSearchAutocomplete.main.js

@@ -83,7 +83,7 @@ function $a9f98e219df0b64d$var$_MobileSearchAutocomplete(props, ref) {
     props = (0, $56uON$reactspectrumprovider.useProviderProps)(props);
     let { isQuiet: isQuiet, isDisabled: isDisabled, isRequired: isRequired, validationBehavior: validationBehavior, validate: validate, name: name, isReadOnly: isReadOnly, onSubmit: onSubmit = ()=>{} } = props;
     let { contains: contains } = (0, $56uON$reactariai18n.useFilter)({
-        sensitivity: "base"
+        sensitivity: 'base'
     });
     let state = (0, $56uON$reactstatelycombobox.useComboBoxState)({
         ...props,
@@ -104,7 +104,7 @@ function $a9f98e219df0b64d$var$_MobileSearchAutocomplete(props, ref) {
     let buttonRef = (0, $56uON$react.useRef)(null);
     let domRef = (0, $56uON$reactspectrumutils.useFocusableRef)(ref, buttonRef);
     let { triggerProps: triggerProps, overlayProps: overlayProps } = (0, $56uON$reactariaoverlays.useOverlayTrigger)({
-        type: "listbox"
+        type: 'listbox'
     }, state, buttonRef);
     let inputRef = (0, $56uON$react.useRef)(null);
     (0, $56uON$reactariaform.useFormValidation)({
@@ -115,12 +115,12 @@ function $a9f98e219df0b64d$var$_MobileSearchAutocomplete(props, ref) {
         }
     }, state, inputRef);
     let { isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = state.displayValidation;
-    let validationState = props.validationState || (isInvalid ? "invalid" : undefined);
+    let validationState = props.validationState || (isInvalid ? 'invalid' : undefined);
     var _props_errorMessage;
-    let errorMessage = (_props_errorMessage = props.errorMessage) !== null && _props_errorMessage !== void 0 ? _props_errorMessage : validationErrors.join(" ");
+    let errorMessage = (_props_errorMessage = props.errorMessage) !== null && _props_errorMessage !== void 0 ? _props_errorMessage : validationErrors.join(' ');
     let { labelProps: labelProps, fieldProps: fieldProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = (0, $56uON$reactarialabel.useField)({
         ...props,
-        labelElementType: "span",
+        labelElementType: 'span',
         isInvalid: isInvalid,
         errorMessage: errorMessage
     });
@@ -128,18 +128,18 @@ function $a9f98e219df0b64d$var$_MobileSearchAutocomplete(props, ref) {
     labelProps.onClick = ()=>{
         if (!props.isDisabled && buttonRef.current) {
             buttonRef.current.focus();
-            (0, $56uON$reactariainteractions.setInteractionModality)("keyboard");
+            (0, $56uON$reactariainteractions.setInteractionModality)('keyboard');
         }
     };
     let inputProps = {
-        type: "hidden",
+        type: 'hidden',
         name: name,
         value: state.inputValue
     };
-    if (validationBehavior === "native") {
+    if (validationBehavior === 'native') {
         // Use a hidden <input type="text"> rather than <input type="hidden">
         // so that an empty value blocks HTML form submission when the field is required.
-        inputProps.type = "text";
+        inputProps.type = 'text';
         inputProps.hidden = true;
         inputProps.required = isRequired;
         // Ignore react warning.
@@ -169,9 +169,9 @@ function $a9f98e219df0b64d$var$_MobileSearchAutocomplete(props, ref) {
         isPlaceholder: !state.inputValue,
         validationState: validationState,
         inputValue: state.inputValue,
-        clearInput: ()=>state.setInputValue(""),
-        onPress: ()=>!isReadOnly && state.open(null, "manual")
-    }, state.inputValue || props.placeholder || "")), /*#__PURE__*/ (0, ($parcel$interopDefault($56uON$react))).createElement("input", {
+        clearInput: ()=>state.setInputValue(''),
+        onPress: ()=>!isReadOnly && state.open(null, 'manual')
+    }, state.inputValue || props.placeholder || '')), /*#__PURE__*/ (0, ($parcel$interopDefault($56uON$react))).createElement("input", {
         ...inputProps,
         ref: inputRef
     }), /*#__PURE__*/ (0, ($parcel$interopDefault($56uON$react))).createElement((0, $56uON$reactspectrumoverlays.Tray), {
@@ -193,16 +193,16 @@ const $a9f98e219df0b64d$var$SearchAutocompleteButton = /*#__PURE__*/ (0, ($parce
         "data-testid": "searchicon"
     });
     let { icon: icon = searchIcon, isQuiet: isQuiet, isDisabled: isDisabled, isReadOnly: isReadOnly, isPlaceholder: isPlaceholder, validationState: validationState, inputValue: inputValue, clearInput: clearInput, children: children, style: style, className: className } = props;
-    let stringFormatter = (0, $56uON$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($e32120882142a69f$exports))), "@react-spectrum/autocomplete");
+    let stringFormatter = (0, $56uON$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($e32120882142a69f$exports))), '@react-spectrum/autocomplete');
     let valueId = (0, $56uON$reactariautils.useId)();
     let invalidId = (0, $56uON$reactariautils.useId)();
-    let validationIcon = validationState === "invalid" ? /*#__PURE__*/ (0, ($parcel$interopDefault($56uON$react))).createElement((0, ($parcel$interopDefault($56uON$spectrumiconsuiAlertMedium))), {
+    let validationIcon = validationState === 'invalid' ? /*#__PURE__*/ (0, ($parcel$interopDefault($56uON$react))).createElement((0, ($parcel$interopDefault($56uON$spectrumiconsuiAlertMedium))), {
         id: invalidId,
-        "aria-label": stringFormatter.format("invalid")
+        "aria-label": stringFormatter.format('invalid')
     }) : /*#__PURE__*/ (0, ($parcel$interopDefault($56uON$react))).createElement((0, ($parcel$interopDefault($56uON$spectrumiconsuiCheckmarkMedium))), null);
     if (icon) icon = /*#__PURE__*/ (0, ($parcel$interopDefault($56uON$react))).cloneElement(icon, {
-        UNSAFE_className: (0, $56uON$reactspectrumutils.classNames)((0, ($parcel$interopDefault($40cb3a00c193680f$exports))), "spectrum-Textfield-icon"),
-        size: "S"
+        UNSAFE_className: (0, $56uON$reactspectrumutils.classNames)((0, ($parcel$interopDefault($40cb3a00c193680f$exports))), 'spectrum-Textfield-icon'),
+        size: 'S'
     });
     let clearButton = /*#__PURE__*/ (0, ($parcel$interopDefault($56uON$react))).createElement((0, $56uON$reactspectrumbutton.ClearButton), {
         onPress: (e)=>{
@@ -211,25 +211,25 @@ const $a9f98e219df0b64d$var$SearchAutocompleteButton = /*#__PURE__*/ (0, ($parce
             props === null || props === void 0 ? void 0 : (_props_onPress = props.onPress) === null || _props_onPress === void 0 ? void 0 : _props_onPress.call(props, e);
         },
         preventFocus: true,
-        "aria-label": stringFormatter.format("clear"),
+        "aria-label": stringFormatter.format('clear'),
         excludeFromTabOrder: true,
-        UNSAFE_className: (0, $56uON$reactspectrumutils.classNames)((0, ($parcel$interopDefault($1e139f06a0a4b696$exports))), "spectrum-ClearButton"),
+        UNSAFE_className: (0, $56uON$reactspectrumutils.classNames)((0, ($parcel$interopDefault($1e139f06a0a4b696$exports))), 'spectrum-ClearButton'),
         isDisabled: isDisabled
     });
     let validation = /*#__PURE__*/ (0, ($parcel$interopDefault($56uON$react))).cloneElement(validationIcon, {
-        UNSAFE_className: (0, $56uON$reactspectrumutils.classNames)((0, ($parcel$interopDefault($40cb3a00c193680f$exports))), "spectrum-Textfield-validationIcon", (0, $56uON$reactspectrumutils.classNames)((0, ($parcel$interopDefault($2f86633ce5b04f1e$exports))), "spectrum-InputGroup-input-validationIcon"), (0, $56uON$reactspectrumutils.classNames)((0, ($parcel$interopDefault($1e139f06a0a4b696$exports))), "spectrum-Search-validationIcon"))
+        UNSAFE_className: (0, $56uON$reactspectrumutils.classNames)((0, ($parcel$interopDefault($40cb3a00c193680f$exports))), 'spectrum-Textfield-validationIcon', (0, $56uON$reactspectrumutils.classNames)((0, ($parcel$interopDefault($2f86633ce5b04f1e$exports))), 'spectrum-InputGroup-input-validationIcon'), (0, $56uON$reactspectrumutils.classNames)((0, ($parcel$interopDefault($1e139f06a0a4b696$exports))), 'spectrum-Search-validationIcon'))
     });
     let { hoverProps: hoverProps, isHovered: isHovered } = (0, $56uON$reactariainteractions.useHover)({});
     let { isFocused: isFocused, isFocusVisible: isFocusVisible, focusProps: focusProps } = (0, $56uON$reactariafocus.useFocusRing)();
     let { buttonProps: buttonProps } = (0, $56uON$reactariabutton.useButton)({
         ...props,
-        "aria-labelledby": [
-            props["aria-labelledby"],
-            props["aria-label"] && !props["aria-labelledby"] ? props.id : null,
+        'aria-labelledby': [
+            props['aria-labelledby'],
+            props['aria-label'] && !props['aria-labelledby'] ? props.id : null,
             valueId,
-            validationState === "invalid" ? invalidId : null
-        ].filter(Boolean).join(" "),
-        elementType: "div"
+            validationState === 'invalid' ? invalidId : null
+        ].filter(Boolean).join(' '),
+        elementType: 'div'
     }, ref);
     return /*#__PURE__*/ (0, ($parcel$interopDefault($56uON$react))).createElement("div", {
         ...(0, $56uON$reactariautils.mergeProps)(hoverProps, focusProps, buttonProps),
@@ -237,40 +237,40 @@ const $a9f98e219df0b64d$var$SearchAutocompleteButton = /*#__PURE__*/ (0, ($parce
         ref: ref,
         style: {
             ...style,
-            outline: "none"
+            outline: 'none'
         },
-        className: (0, $56uON$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,
-            "is-focused": isFocused,
-            "focus-ring": isFocusVisible
-        }, (0, $56uON$reactspectrumutils.classNames)((0, ($parcel$interopDefault($83da5c2df967875d$exports))), "searchautocomplete", "mobile-searchautocomplete"), className)
+        className: (0, $56uON$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,
+            'is-focused': isFocused,
+            'focus-ring': isFocusVisible
+        }, (0, $56uON$reactspectrumutils.classNames)((0, ($parcel$interopDefault($83da5c2df967875d$exports))), 'searchautocomplete', 'mobile-searchautocomplete'), className)
     }, /*#__PURE__*/ (0, ($parcel$interopDefault($56uON$react))).createElement("div", {
-        className: (0, $56uON$reactspectrumutils.classNames)((0, ($parcel$interopDefault($40cb3a00c193680f$exports))), "spectrum-Textfield", {
-            "spectrum-Textfield--invalid": validationState === "invalid" && !isDisabled,
-            "spectrum-Textfield--valid": validationState === "valid" && !isDisabled,
-            "spectrum-Textfield--quiet": isQuiet
-        }, (0, $56uON$reactspectrumutils.classNames)((0, ($parcel$interopDefault($1e139f06a0a4b696$exports))), "spectrum-Search", "spectrum-Search--loadable", {
-            "is-disabled": isDisabled,
-            "is-quiet": isQuiet,
-            "spectrum-Search--invalid": validationState === "invalid" && !isDisabled,
-            "spectrum-Search--valid": validationState === "valid" && !isDisabled
-        }), (0, $56uON$reactspectrumutils.classNames)((0, ($parcel$interopDefault($2f86633ce5b04f1e$exports))), "spectrum-InputGroup-field"))
+        className: (0, $56uON$reactspectrumutils.classNames)((0, ($parcel$interopDefault($40cb3a00c193680f$exports))), 'spectrum-Textfield', {
+            'spectrum-Textfield--invalid': validationState === 'invalid' && !isDisabled,
+            'spectrum-Textfield--valid': validationState === 'valid' && !isDisabled,
+            'spectrum-Textfield--quiet': isQuiet
+        }, (0, $56uON$reactspectrumutils.classNames)((0, ($parcel$interopDefault($1e139f06a0a4b696$exports))), 'spectrum-Search', 'spectrum-Search--loadable', {
+            'is-disabled': isDisabled,
+            'is-quiet': isQuiet,
+            'spectrum-Search--invalid': validationState === 'invalid' && !isDisabled,
+            'spectrum-Search--valid': validationState === 'valid' && !isDisabled
+        }), (0, $56uON$reactspectrumutils.classNames)((0, ($parcel$interopDefault($2f86633ce5b04f1e$exports))), 'spectrum-InputGroup-field'))
     }, /*#__PURE__*/ (0, ($parcel$interopDefault($56uON$react))).createElement("div", {
-        className: (0, $56uON$reactspectrumutils.classNames)((0, ($parcel$interopDefault($40cb3a00c193680f$exports))), "spectrum-Textfield-input", {
-            "spectrum-Textfield-inputIcon": !!icon,
-            "is-hovered": isHovered,
-            "is-placeholder": isPlaceholder,
-            "is-disabled": isDisabled,
-            "is-quiet": isQuiet,
-            "is-focused": isFocused
-        }, (0, $56uON$reactspectrumutils.classNames)((0, ($parcel$interopDefault($1e139f06a0a4b696$exports))), "spectrum-Search-input"), (0, $56uON$reactspectrumutils.classNames)((0, ($parcel$interopDefault($83da5c2df967875d$exports))), "mobile-input"))
+        className: (0, $56uON$reactspectrumutils.classNames)((0, ($parcel$interopDefault($40cb3a00c193680f$exports))), 'spectrum-Textfield-input', {
+            'spectrum-Textfield-inputIcon': !!icon,
+            'is-hovered': isHovered,
+            'is-placeholder': isPlaceholder,
+            'is-disabled': isDisabled,
+            'is-quiet': isQuiet,
+            'is-focused': isFocused
+        }, (0, $56uON$reactspectrumutils.classNames)((0, ($parcel$interopDefault($1e139f06a0a4b696$exports))), 'spectrum-Search-input'), (0, $56uON$reactspectrumutils.classNames)((0, ($parcel$interopDefault($83da5c2df967875d$exports))), 'mobile-input'))
     }, icon, /*#__PURE__*/ (0, ($parcel$interopDefault($56uON$react))).createElement("span", {
         id: valueId,
-        className: (0, $56uON$reactspectrumutils.classNames)((0, ($parcel$interopDefault($83da5c2df967875d$exports))), "mobile-value")
-    }, children)), validationState && !isDisabled ? validation : null, (inputValue !== "" || validationState != null) && !isReadOnly && clearButton));
+        className: (0, $56uON$reactspectrumutils.classNames)((0, ($parcel$interopDefault($83da5c2df967875d$exports))), 'mobile-value')
+    }, children)), validationState && !isDisabled ? validation : null, (inputValue !== '' || validationState != null) && !isReadOnly && clearButton));
 });
 function $a9f98e219df0b64d$var$SearchAutocompleteTray(props) {
     let searchIcon = /*#__PURE__*/ (0, ($parcel$interopDefault($56uON$react))).createElement((0, ($parcel$interopDefault($56uON$spectrumiconsuiMagnifier))), {
@@ -283,9 +283,9 @@ function $a9f98e219df0b64d$var$SearchAutocompleteTray(props) {
     let inputRef = (0, $56uON$react.useRef)(null);
     let popoverRef = (0, $56uON$react.useRef)(null);
     let listBoxRef = (0, $56uON$react.useRef)(null);
-    let isLoading = loadingState === "loading" || loadingState === "loadingMore";
+    let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';
     let layout = (0, $56uON$reactspectrumlistbox.useListBoxLayout)(state, isLoading);
-    let stringFormatter = (0, $56uON$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($e32120882142a69f$exports))), "@react-spectrum/autocomplete");
+    let stringFormatter = (0, $56uON$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($e32120882142a69f$exports))), '@react-spectrum/autocomplete');
     let { inputProps: inputProps, listBoxProps: listBoxProps, labelProps: labelProps, clearButtonProps: clearButtonProps } = (0, $56uON$reactariaautocomplete.useSearchAutocomplete)({
         ...props,
         keyboardDelegate: layout,
@@ -306,29 +306,29 @@ function $a9f98e219df0b64d$var$SearchAutocompleteTray(props) {
         if (!state.isOpen && state.isFocused) state.setFocused(false);
     });
     let { dialogProps: dialogProps } = (0, $56uON$reactariadialog.useDialog)({
-        "aria-labelledby": (0, $56uON$reactariautils.useId)(labelProps.id)
+        'aria-labelledby': (0, $56uON$reactariautils.useId)(labelProps.id)
     }, popoverRef);
     // Override the role of the input to "searchbox" instead of "combobox".
     // Since the listbox is always visible, the combobox role doesn't really give us anything.
     // VoiceOver on iOS reads "double tap to collapse" when focused on the input rather than
     // "double tap to edit text", as with a textbox or searchbox. We'd like double tapping to
     // open the virtual keyboard rather than closing the tray.
-    inputProps.role = "searchbox";
-    inputProps["aria-haspopup"] = "listbox";
+    inputProps.role = 'searchbox';
+    inputProps['aria-haspopup'] = 'listbox';
     delete inputProps.onTouchEnd;
     let clearButton = /*#__PURE__*/ (0, ($parcel$interopDefault($56uON$react))).createElement((0, $56uON$reactspectrumbutton.ClearButton), {
         ...clearButtonProps,
         preventFocus: true,
-        "aria-label": stringFormatter.format("clear"),
+        "aria-label": stringFormatter.format('clear'),
         excludeFromTabOrder: true,
-        UNSAFE_className: (0, $56uON$reactspectrumutils.classNames)((0, ($parcel$interopDefault($1e139f06a0a4b696$exports))), "spectrum-ClearButton"),
+        UNSAFE_className: (0, $56uON$reactspectrumutils.classNames)((0, ($parcel$interopDefault($1e139f06a0a4b696$exports))), 'spectrum-ClearButton'),
         isDisabled: isDisabled
     });
     let loadingCircle = /*#__PURE__*/ (0, ($parcel$interopDefault($56uON$react))).createElement((0, $56uON$reactspectrumprogress.ProgressCircle), {
-        "aria-label": stringFormatter.format("loading"),
+        "aria-label": stringFormatter.format('loading'),
         size: "S",
         isIndeterminate: true,
-        UNSAFE_className: (0, $56uON$reactspectrumutils.classNames)((0, ($parcel$interopDefault($1e139f06a0a4b696$exports))), "spectrum-Search-circleLoader", (0, $56uON$reactspectrumutils.classNames)((0, ($parcel$interopDefault($40cb3a00c193680f$exports))), "spectrum-Textfield-circleLoader"))
+        UNSAFE_className: (0, $56uON$reactspectrumutils.classNames)((0, ($parcel$interopDefault($1e139f06a0a4b696$exports))), 'spectrum-Search-circleLoader', (0, $56uON$reactspectrumutils.classNames)((0, ($parcel$interopDefault($40cb3a00c193680f$exports))), 'spectrum-Textfield-circleLoader'))
     });
     // Close the software keyboard on scroll to give the user a bigger area to scroll.
     // But only do this if scrolling with touch, otherwise it can cause issues with touch
@@ -351,7 +351,7 @@ function $a9f98e219df0b64d$var$SearchAutocompleteTray(props) {
     let inputValue = inputProps.value;
     let lastInputValue = (0, $56uON$react.useRef)(inputValue);
     (0, $56uON$react.useEffect)(()=>{
-        if (loadingState === "filtering" && !showLoading) {
+        if (loadingState === 'filtering' && !showLoading) {
             if (timeout.current === null) timeout.current = setTimeout(()=>{
                 setShowLoading(true);
             }, 500);
@@ -362,7 +362,7 @@ function $a9f98e219df0b64d$var$SearchAutocompleteTray(props) {
                     setShowLoading(true);
                 }, 500);
             }
-        } else if (loadingState !== "filtering") {
+        } else if (loadingState !== 'filtering') {
             // If loading is no longer happening, clear any timers and hide the loading circle
             setShowLoading(false);
             if (timeout.current !== null) {
@@ -378,7 +378,7 @@ function $a9f98e219df0b64d$var$SearchAutocompleteTray(props) {
     ]);
     let onKeyDown = (e)=>{
         // Close virtual keyboard, close tray, and fire onSubmit if user hits Enter w/o any focused options
-        if (e.key === "Enter" && state.selectionManager.focusedKey == null) {
+        if (e.key === 'Enter' && state.selectionManager.focusedKey == null) {
             var _popoverRef_current;
             (_popoverRef_current = popoverRef.current) === null || _popoverRef_current === void 0 ? void 0 : _popoverRef_current.focus();
             if (onClose) onClose();
@@ -386,8 +386,8 @@ function $a9f98e219df0b64d$var$SearchAutocompleteTray(props) {
         } else if (inputProps.onKeyDown) inputProps.onKeyDown(e);
     };
     if (icon) icon = /*#__PURE__*/ (0, ($parcel$interopDefault($56uON$react))).cloneElement(icon, {
-        UNSAFE_className: (0, $56uON$reactspectrumutils.classNames)((0, ($parcel$interopDefault($40cb3a00c193680f$exports))), "spectrum-Textfield-icon"),
-        size: "S"
+        UNSAFE_className: (0, $56uON$reactspectrumutils.classNames)((0, ($parcel$interopDefault($40cb3a00c193680f$exports))), 'spectrum-Textfield-icon'),
+        size: 'S'
     });
     return /*#__PURE__*/ (0, ($parcel$interopDefault($56uON$react))).createElement((0, $56uON$reactariafocus.FocusScope), {
         restoreFocus: true,
@@ -395,7 +395,7 @@ function $a9f98e219df0b64d$var$SearchAutocompleteTray(props) {
     }, /*#__PURE__*/ (0, ($parcel$interopDefault($56uON$react))).createElement("div", {
         ...(0, $56uON$reactariautils.mergeProps)(overlayProps, dialogProps),
         ref: popoverRef,
-        className: (0, $56uON$reactspectrumutils.classNames)((0, ($parcel$interopDefault($83da5c2df967875d$exports))), "tray-dialog")
+        className: (0, $56uON$reactspectrumutils.classNames)((0, ($parcel$interopDefault($83da5c2df967875d$exports))), 'tray-dialog')
     }, /*#__PURE__*/ (0, ($parcel$interopDefault($56uON$react))).createElement((0, $56uON$reactariaoverlays.DismissButton), {
         onDismiss: onClose
     }), /*#__PURE__*/ (0, ($parcel$interopDefault($56uON$react))).createElement((0, $56uON$reactspectrumtextfield.TextFieldBase), {
@@ -407,19 +407,19 @@ function $a9f98e219df0b64d$var$SearchAutocompleteTray(props) {
         },
         inputRef: inputRef,
         isDisabled: isDisabled,
-        isLoading: showLoading && loadingState === "filtering",
+        isLoading: showLoading && loadingState === 'filtering',
         loadingIndicator: loadingState != null ? loadingCircle : undefined,
         validationState: validationState,
-        wrapperChildren: (state.inputValue !== "" || loadingState === "filtering" || validationState != null) && !props.isReadOnly ? clearButton : undefined,
+        wrapperChildren: (state.inputValue !== '' || loadingState === 'filtering' || validationState != null) && !props.isReadOnly ? clearButton : undefined,
         icon: icon,
-        UNSAFE_className: (0, $56uON$reactspectrumutils.classNames)((0, ($parcel$interopDefault($1e139f06a0a4b696$exports))), "spectrum-Search", "spectrum-Textfield", "spectrum-Search--loadable", {
-            "spectrum-Search--invalid": validationState === "invalid" && !isDisabled,
-            "spectrum-Search--valid": validationState === "valid" && !isDisabled
-        }, (0, $56uON$reactspectrumutils.classNames)((0, ($parcel$interopDefault($83da5c2df967875d$exports))), "tray-textfield", {
-            "has-label": !!props.label
+        UNSAFE_className: (0, $56uON$reactspectrumutils.classNames)((0, ($parcel$interopDefault($1e139f06a0a4b696$exports))), 'spectrum-Search', 'spectrum-Textfield', 'spectrum-Search--loadable', {
+            'spectrum-Search--invalid': validationState === 'invalid' && !isDisabled,
+            'spectrum-Search--valid': validationState === 'valid' && !isDisabled
+        }, (0, $56uON$reactspectrumutils.classNames)((0, ($parcel$interopDefault($83da5c2df967875d$exports))), 'tray-textfield', {
+            'has-label': !!props.label
         })),
-        inputClassName: (0, $56uON$reactspectrumutils.classNames)((0, ($parcel$interopDefault($1e139f06a0a4b696$exports))), "spectrum-Search-input"),
-        validationIconClassName: (0, $56uON$reactspectrumutils.classNames)((0, ($parcel$interopDefault($1e139f06a0a4b696$exports))), "spectrum-Search-validationIcon")
+        inputClassName: (0, $56uON$reactspectrumutils.classNames)((0, ($parcel$interopDefault($1e139f06a0a4b696$exports))), 'spectrum-Search-input'),
+        validationIconClassName: (0, $56uON$reactspectrumutils.classNames)((0, ($parcel$interopDefault($1e139f06a0a4b696$exports))), 'spectrum-Search-validationIcon')
     }), /*#__PURE__*/ (0, ($parcel$interopDefault($56uON$react))).createElement((0, $56uON$reactspectrumlistbox.ListBoxBase), {
         ...listBoxProps,
         domProps: {
@@ -432,10 +432,10 @@ function $a9f98e219df0b64d$var$SearchAutocompleteTray(props) {
         layout: layout,
         state: state,
         shouldUseVirtualFocus: true,
-        renderEmptyState: ()=>loadingState !== "loading" && /*#__PURE__*/ (0, ($parcel$interopDefault($56uON$react))).createElement("span", {
-                className: (0, $56uON$reactspectrumutils.classNames)((0, ($parcel$interopDefault($83da5c2df967875d$exports))), "no-results")
-            }, stringFormatter.format("noResults")),
-        UNSAFE_className: (0, $56uON$reactspectrumutils.classNames)((0, ($parcel$interopDefault($83da5c2df967875d$exports))), "tray-listbox"),
+        renderEmptyState: ()=>loadingState !== 'loading' && /*#__PURE__*/ (0, ($parcel$interopDefault($56uON$react))).createElement("span", {
+                className: (0, $56uON$reactspectrumutils.classNames)((0, ($parcel$interopDefault($83da5c2df967875d$exports))), 'no-results')
+            }, stringFormatter.format('noResults')),
+        UNSAFE_className: (0, $56uON$reactspectrumutils.classNames)((0, ($parcel$interopDefault($83da5c2df967875d$exports))), 'tray-listbox'),
         ref: listBoxRef,
         onScroll: onScroll,
         onLoadMore: onLoadMore,