@react-spectrum/combobox 3.13.4 → 3.14.0

package/dist/MobileComboBox.main.js

@@ -101,7 +101,7 @@ const $e514018f82d1b067$export$7637df911c069b4d = /*#__PURE__*/ (0, ($parcel$int
         // then the closing of the tray will call setFocused(false) again due to cleanup effect)
         shouldCloseOnBlur: false
     });
-    let buttonRef = (0, $iKVNA$react.useRef)(undefined);
+    let buttonRef = (0, $iKVNA$react.useRef)(null);
     let domRef = (0, $iKVNA$reactspectrumutils.useFocusableRef)(ref, buttonRef);
     let { triggerProps: triggerProps, overlayProps: overlayProps } = (0, $iKVNA$reactariaoverlays.useOverlayTrigger)({
         type: 'listbox'
@@ -109,10 +109,13 @@ const $e514018f82d1b067$export$7637df911c069b4d = /*#__PURE__*/ (0, ($parcel$int
     let inputRef = (0, $iKVNA$react.useRef)(null);
     (0, $iKVNA$reactariaform.useFormValidation)({
         ...props,
-        focus: ()=>buttonRef.current.focus()
+        focus: ()=>{
+            var _buttonRef_current;
+            return (_buttonRef_current = buttonRef.current) === null || _buttonRef_current === void 0 ? void 0 : _buttonRef_current.focus();
+        }
     }, state, inputRef);
     let { isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = state.displayValidation;
-    let validationState = props.validationState || (isInvalid ? 'invalid' : null);
+    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 { labelProps: labelProps, fieldProps: fieldProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = (0, $iKVNA$reactarialabel.useField)({
@@ -124,14 +127,15 @@ const $e514018f82d1b067$export$7637df911c069b4d = /*#__PURE__*/ (0, ($parcel$int
     // Focus the button and show focus ring when clicking on the label
     labelProps.onClick = ()=>{
         if (!props.isDisabled) {
-            buttonRef.current.focus();
+            var _buttonRef_current;
+            (_buttonRef_current = buttonRef.current) === null || _buttonRef_current === void 0 ? void 0 : _buttonRef_current.focus();
             (0, $iKVNA$reactariainteractions.setInteractionModality)('keyboard');
         }
     };
     let inputProps = {
         type: 'hidden',
         name: name,
-        value: formValue === 'text' ? state.inputValue : state.selectedKey
+        value: formValue === 'text' ? state.inputValue : String(state.selectedKey)
     };
     if (validationBehavior === 'native') {
         // Use a hidden <input type="text"> rather than <input type="hidden">
@@ -142,7 +146,8 @@ const $e514018f82d1b067$export$7637df911c069b4d = /*#__PURE__*/ (0, ($parcel$int
         // Ignore react warning.
         inputProps.onChange = ()=>{};
     }
-    (0, $iKVNA$reactariautils.useFormReset)(inputRef, inputProps.value, formValue === 'text' ? state.setInputValue : state.setSelectedKey);
+    var _inputProps_value;
+    (0, $iKVNA$reactariautils.useFormReset)(inputRef, String((_inputProps_value = inputProps.value) !== null && _inputProps_value !== void 0 ? _inputProps_value : ''), formValue === 'text' ? state.setInputValue : state.setSelectedKey);
     return /*#__PURE__*/ (0, ($parcel$interopDefault($iKVNA$react))).createElement((0, ($parcel$interopDefault($iKVNA$react))).Fragment, null, /*#__PURE__*/ (0, ($parcel$interopDefault($iKVNA$react))).createElement((0, $iKVNA$reactspectrumlabel.Field), {
         ...props,
         labelProps: labelProps,
@@ -155,7 +160,7 @@ const $e514018f82d1b067$export$7637df911c069b4d = /*#__PURE__*/ (0, ($parcel$int
         elementType: "span",
         ref: domRef,
         includeNecessityIndicatorInAccessibilityName: true
-    }, /*#__PURE__*/ (0, ($parcel$interopDefault($iKVNA$react))).createElement($e514018f82d1b067$var$ComboBoxButton, {
+    }, /*#__PURE__*/ (0, ($parcel$interopDefault($iKVNA$react))).createElement($e514018f82d1b067$export$adfa0abcd5972f7e, {
         ...(0, $iKVNA$reactariautils.mergeProps)(triggerProps, fieldProps, {
             autoFocus: props.autoFocus
         }),
@@ -179,7 +184,7 @@ const $e514018f82d1b067$export$7637df911c069b4d = /*#__PURE__*/ (0, ($parcel$int
         state: state
     })));
 });
-const $e514018f82d1b067$var$ComboBoxButton = /*#__PURE__*/ (0, ($parcel$interopDefault($iKVNA$react))).forwardRef(function ComboBoxButton(props, ref) {
+const $e514018f82d1b067$export$adfa0abcd5972f7e = /*#__PURE__*/ (0, ($parcel$interopDefault($iKVNA$react))).forwardRef(function ComboBoxButton(props, ref) {
     let { isQuiet: isQuiet, isDisabled: isDisabled, isPlaceholder: isPlaceholder, validationState: validationState, children: children, style: style, className: className } = props;
     let stringFormatter = (0, $iKVNA$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($9e627d9ac6346a53$exports))), '@react-spectrum/combobox');
     let valueId = (0, $iKVNA$reactariautils.useId)();
@@ -191,6 +196,7 @@ const $e514018f82d1b067$var$ComboBoxButton = /*#__PURE__*/ (0, ($parcel$interopD
     let validation = /*#__PURE__*/ (0, ($parcel$interopDefault($iKVNA$react))).cloneElement(validationIcon, {
         UNSAFE_className: (0, $iKVNA$reactspectrumutils.classNames)((0, ($parcel$interopDefault($40cb3a00c193680f$exports))), 'spectrum-Textfield-validationIcon', (0, $iKVNA$reactspectrumutils.classNames)((0, ($parcel$interopDefault($2f86633ce5b04f1e$exports))), 'spectrum-InputGroup-input-validationIcon'))
     });
+    let objRef = (0, $iKVNA$reactariautils.useObjectRef)(ref);
     let { hoverProps: hoverProps, isHovered: isHovered } = (0, $iKVNA$reactariainteractions.useHover)({});
     let { buttonProps: buttonProps, isPressed: isPressed } = (0, $iKVNA$reactariabutton.useButton)({
         ...props,
@@ -201,14 +207,14 @@ const $e514018f82d1b067$var$ComboBoxButton = /*#__PURE__*/ (0, ($parcel$interopD
             validationState === 'invalid' ? invalidId : null
         ].filter(Boolean).join(' '),
         elementType: 'div'
-    }, ref);
+    }, objRef);
     return /*#__PURE__*/ (0, ($parcel$interopDefault($iKVNA$react))).createElement((0, $iKVNA$reactariafocus.FocusRing), {
         focusClass: (0, $iKVNA$reactspectrumutils.classNames)((0, ($parcel$interopDefault($2f86633ce5b04f1e$exports))), 'is-focused'),
         focusRingClass: (0, $iKVNA$reactspectrumutils.classNames)((0, ($parcel$interopDefault($2f86633ce5b04f1e$exports))), 'focus-ring')
     }, /*#__PURE__*/ (0, ($parcel$interopDefault($iKVNA$react))).createElement("div", {
         ...(0, $iKVNA$reactariautils.mergeProps)(hoverProps, buttonProps),
         "aria-haspopup": "dialog",
-        ref: ref,
+        ref: objRef,
         style: {
             ...style,
             outline: 'none'
@@ -251,10 +257,10 @@ function $e514018f82d1b067$var$ComboBoxTray(props) {
     state, isDisabled: isDisabled, validationState: validationState, label: label, overlayProps: overlayProps, loadingState: loadingState, onLoadMore: onLoadMore, onClose: onClose } = props;
     let timeout = (0, $iKVNA$react.useRef)(null);
     let [showLoading, setShowLoading] = (0, $iKVNA$react.useState)(false);
-    let inputRef = (0, $iKVNA$react.useRef)(undefined);
-    let buttonRef = (0, $iKVNA$react.useRef)(undefined);
-    let popoverRef = (0, $iKVNA$react.useRef)(undefined);
-    let listBoxRef = (0, $iKVNA$react.useRef)(undefined);
+    let inputRef = (0, $iKVNA$react.useRef)(null);
+    let buttonRef = (0, $iKVNA$react.useRef)(null);
+    let popoverRef = (0, $iKVNA$react.useRef)(null);
+    let listBoxRef = (0, $iKVNA$react.useRef)(null);
     let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';
     let layout = (0, $iKVNA$reactspectrumlistbox.useListBoxLayout)();
     let stringFormatter = (0, $iKVNA$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($9e627d9ac6346a53$exports))), '@react-spectrum/combobox');
@@ -270,7 +276,7 @@ function $e514018f82d1b067$var$ComboBoxTray(props) {
         name: undefined
     }, state);
     (0, ($parcel$interopDefault($iKVNA$react))).useEffect(()=>{
-        (0, $iKVNA$reactariafocus.focusSafely)(inputRef.current);
+        if (inputRef.current) (0, $iKVNA$reactariafocus.focusSafely)(inputRef.current);
     }, []);
     (0, ($parcel$interopDefault($iKVNA$react))).useEffect(()=>{
         // When the tray closes, set state.isFocused (i.e. the tray input's focus tracker) to false.
@@ -297,8 +303,9 @@ function $e514018f82d1b067$var$ComboBoxTray(props) {
         "aria-label": stringFormatter.format('clear'),
         excludeFromTabOrder: true,
         onPress: ()=>{
+            var _inputRef_current;
             state.setInputValue('');
-            inputRef.current.focus();
+            (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.focus();
         },
         UNSAFE_className: (0, $iKVNA$reactspectrumutils.classNames)((0, ($parcel$interopDefault($1e139f06a0a4b696$exports))), 'spectrum-ClearButton'),
         isDisabled: isDisabled
@@ -320,8 +327,9 @@ function $e514018f82d1b067$var$ComboBoxTray(props) {
         isTouchDown.current = false;
     };
     let onScroll = (0, $iKVNA$react.useCallback)(()=>{
+        var _popoverRef_current;
         if (!inputRef.current || document.activeElement !== inputRef.current || !isTouchDown.current) return;
-        popoverRef.current.focus();
+        (_popoverRef_current = popoverRef.current) === null || _popoverRef_current === void 0 ? void 0 : _popoverRef_current.focus();
     }, [
         inputRef,
         popoverRef,
@@ -344,7 +352,7 @@ function $e514018f82d1b067$var$ComboBoxTray(props) {
         } else if (loadingState !== 'filtering') {
             // If loading is no longer happening, clear any timers and hide the loading circle
             setShowLoading(false);
-            clearTimeout(timeout.current);
+            if (timeout.current) clearTimeout(timeout.current);
             timeout.current = null;
         }
         lastInputValue.current = inputValue;
@@ -354,9 +362,10 @@ function $e514018f82d1b067$var$ComboBoxTray(props) {
         showLoading
     ]);
     let onKeyDown = (e)=>{
+        var _popoverRef_current, _inputProps_onKeyDown;
         // Close virtual keyboard if user hits Enter w/o any focused options
-        if (e.key === 'Enter' && state.selectionManager.focusedKey == null) popoverRef.current.focus();
-        else inputProps.onKeyDown(e);
+        if (e.key === 'Enter' && state.selectionManager.focusedKey == null) (_popoverRef_current = popoverRef.current) === null || _popoverRef_current === void 0 ? void 0 : _popoverRef_current.focus();
+        else (_inputProps_onKeyDown = inputProps.onKeyDown) === null || _inputProps_onKeyDown === void 0 ? void 0 : _inputProps_onKeyDown.call(inputProps, e);
     };
     return /*#__PURE__*/ (0, ($parcel$interopDefault($iKVNA$react))).createElement((0, $iKVNA$reactariafocus.FocusScope), {
         restoreFocus: true,
@@ -377,11 +386,11 @@ function $e514018f82d1b067$var$ComboBoxTray(props) {
         inputRef: inputRef,
         isDisabled: isDisabled,
         isLoading: showLoading && loadingState === 'filtering',
-        loadingIndicator: loadingState != null && loadingCircle,
+        loadingIndicator: loadingState != null ? loadingCircle : undefined,
         validationState: validationState,
         labelAlign: "start",
         labelPosition: "top",
-        wrapperChildren: (state.inputValue !== '' || loadingState === 'filtering' || validationState != null) && !props.isReadOnly && clearButton,
+        wrapperChildren: (state.inputValue !== '' || loadingState === 'filtering' || validationState != null) && !props.isReadOnly ? clearButton : undefined,
         UNSAFE_className: (0, $iKVNA$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

package/dist/MobileComboBox.main.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/combobox/src/MobileComboBox.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 */\n\nimport AlertMedium from '@spectrum-icons/ui/AlertMedium';\nimport {AriaButtonProps} from '@react-types/button';\nimport buttonStyles from '@adobe/spectrum-css-temp/components/button/vars.css';\nimport CheckmarkMedium from '@spectrum-icons/ui/CheckmarkMedium';\nimport ChevronDownMedium from '@spectrum-icons/ui/ChevronDownMedium';\nimport {classNames, unwrapDOMRef, useFocusableRef} from '@react-spectrum/utils';\nimport {ClearButton} from '@react-spectrum/button';\nimport {ComboBoxState, useComboBoxState} from '@react-stately/combobox';\nimport comboboxStyles from './combobox.css';\nimport {DismissButton, useOverlayTrigger} from '@react-aria/overlays';\nimport {Field} from '@react-spectrum/label';\nimport {FocusableRef, FocusableRefValue, RefObject, ValidationState} from '@react-types/shared';\nimport {FocusRing, focusSafely, FocusScope} from '@react-aria/focus';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport labelStyles from '@adobe/spectrum-css-temp/components/fieldlabel/vars.css';\nimport {ListBoxBase, useListBoxLayout} from '@react-spectrum/listbox';\nimport {mergeProps, useFormReset, useId} from '@react-aria/utils';\nimport {ProgressCircle} from '@react-spectrum/progress';\nimport React, {HTMLAttributes, InputHTMLAttributes, ReactElement, ReactNode, useCallback, useEffect, useRef, useState} from 'react';\nimport searchStyles from '@adobe/spectrum-css-temp/components/search/vars.css';\nimport {setInteractionModality, useHover} from '@react-aria/interactions';\nimport {SpectrumComboBoxProps} from '@react-types/combobox';\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 {Tray} from '@react-spectrum/overlays';\nimport {useButton} from '@react-aria/button';\nimport {useComboBox} from '@react-aria/combobox';\nimport {useDialog} from '@react-aria/dialog';\nimport {useField} from '@react-aria/label';\nimport {useFilter, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useFormValidation} from '@react-aria/form';\nimport {useProviderProps} from '@react-spectrum/provider';\n\nexport const MobileComboBox = React.forwardRef(function MobileComboBox<T extends object>(props: SpectrumComboBoxProps<T>, ref: FocusableRef<HTMLElement>) {\n  props = useProviderProps(props);\n\n  let {\n    isQuiet,\n    isDisabled,\n    isReadOnly,\n    isRequired,\n    validationBehavior,\n    name,\n    formValue = 'text',\n    allowsCustomValue\n  } = props;\n  if (allowsCustomValue) {\n    formValue = 'text';\n  }\n\n  let {contains} = useFilter({sensitivity: 'base'});\n  let state = useComboBoxState({\n    ...props,\n    defaultFilter: contains,\n    allowsEmptyCollection: true,\n    // Needs to be false here otherwise we double up on commitSelection/commitCustomValue calls when\n    // user taps on underlay (i.e. initial tap will call setFocused(false) -> commitSelection/commitCustomValue via onBlur,\n    // then the closing of the tray will call setFocused(false) again due to cleanup effect)\n    shouldCloseOnBlur: false\n  });\n\n  let buttonRef = useRef<HTMLElement>(undefined);\n  let domRef = useFocusableRef(ref, buttonRef);\n  let {triggerProps, overlayProps} = useOverlayTrigger({type: 'listbox'}, state, buttonRef);\n\n  let inputRef = useRef<HTMLInputElement>(null);\n  useFormValidation({\n    ...props,\n    focus: () => buttonRef.current.focus()\n  }, state, inputRef);\n  let {isInvalid, validationErrors, validationDetails} = state.displayValidation;\n  let validationState = props.validationState || (isInvalid ? 'invalid' : null);\n  let errorMessage = props.errorMessage ?? validationErrors.join(' ');\n\n  let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({\n    ...props,\n    labelElementType: 'span',\n    isInvalid,\n    errorMessage\n  });\n\n  // Focus the button and show focus ring when clicking on the label\n  labelProps.onClick = () => {\n    if (!props.isDisabled) {\n      buttonRef.current.focus();\n      setInteractionModality('keyboard');\n    }\n  };\n\n  let inputProps: InputHTMLAttributes<HTMLInputElement> = {\n    type: 'hidden',\n    name,\n    value: formValue === 'text' ? state.inputValue : state.selectedKey\n  };\n\n  if (validationBehavior === 'native') {\n    // Use a hidden <input type=\"text\"> rather than <input type=\"hidden\">\n    // so that an empty value blocks HTML form submission when the field is required.\n    inputProps.type = 'text';\n    inputProps.hidden = true;\n    inputProps.required = isRequired;\n    // Ignore react warning.\n    inputProps.onChange = () => {};\n  }\n\n  useFormReset(inputRef, inputProps.value, formValue === 'text' ? state.setInputValue : state.setSelectedKey);\n\n  return (\n    <>\n      <Field\n        {...props}\n        labelProps={labelProps}\n        descriptionProps={descriptionProps}\n        errorMessageProps={errorMessageProps}\n        validationState={validationState}\n        isInvalid={isInvalid}\n        validationErrors={validationErrors}\n        validationDetails={validationDetails}\n        elementType=\"span\"\n        ref={domRef}\n        includeNecessityIndicatorInAccessibilityName>\n        <ComboBoxButton\n          {...mergeProps(triggerProps, fieldProps, {autoFocus: props.autoFocus})}\n          ref={buttonRef}\n          isQuiet={isQuiet}\n          isDisabled={isDisabled}\n          isPlaceholder={!state.inputValue}\n          validationState={validationState}\n          onPress={() => !isReadOnly && state.open(null, 'manual')}>\n          {state.inputValue || props.placeholder || ''}\n        </ComboBoxButton>\n      </Field>\n      <input {...inputProps} ref={inputRef} />\n      <Tray state={state} isFixedHeight {...overlayProps}>\n        <ComboBoxTray\n          {...props}\n          onClose={state.close}\n          overlayProps={overlayProps}\n          state={state} />\n      </Tray>\n    </>\n  );\n});\n\ninterface ComboBoxButtonProps extends AriaButtonProps {\n  isQuiet?: boolean,\n  isDisabled?: boolean,\n  isPlaceholder?: boolean,\n  validationState?: ValidationState,\n  children?: ReactNode,\n  style?: React.CSSProperties,\n  className?: string\n}\n\nconst ComboBoxButton = React.forwardRef(function ComboBoxButton(props: ComboBoxButtonProps, ref: RefObject<HTMLElement | null>) {\n  let {\n    isQuiet,\n    isDisabled,\n    isPlaceholder,\n    validationState,\n    children,\n    style,\n    className\n  } = props;\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/combobox');\n  let valueId = useId();\n  let invalidId = useId();\n  let validationIcon = validationState === 'invalid'\n    ? <AlertMedium id={invalidId} aria-label={stringFormatter.format('invalid')} />\n    : <CheckmarkMedium />;\n\n  let validation = React.cloneElement(validationIcon, {\n    UNSAFE_className: classNames(\n      textfieldStyles,\n      'spectrum-Textfield-validationIcon',\n      classNames(\n        styles,\n        'spectrum-InputGroup-input-validationIcon'\n      )\n    )\n  });\n\n  let {hoverProps, isHovered} = useHover({});\n  let {buttonProps, isPressed} = useButton({\n    ...props,\n    'aria-labelledby': [\n      props['aria-labelledby'],\n      props['aria-label'] && !props['aria-labelledby'] ? props.id : null,\n      valueId,\n      validationState === 'invalid' ? invalidId : null\n    ].filter(Boolean).join(' '),\n    elementType: 'div'\n  }, ref);\n\n  return (\n    (<FocusRing\n      focusClass={classNames(styles, 'is-focused')}\n      focusRingClass={classNames(styles, 'focus-ring')}>\n      <div\n        {...mergeProps(hoverProps, buttonProps)}\n        aria-haspopup=\"dialog\"\n        ref={ref as RefObject<HTMLDivElement | null>}\n        style={{...style, outline: 'none'}}\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              comboboxStyles,\n              'mobile-combobox'\n            ),\n            className\n          )\n        }>\n        <div\n          className={\n            classNames(\n              textfieldStyles,\n              'spectrum-Textfield',\n              {\n                'spectrum-Textfield--invalid': validationState === 'invalid' && !isDisabled,\n                'spectrum-Textfield--valid': validationState === 'valid' && !isDisabled,\n                'spectrum-Textfield--quiet': isQuiet\n              },\n              classNames(\n                styles,\n                'spectrum-InputGroup-field'\n              )\n            )\n          }>\n          <div\n            className={\n              classNames(\n                textfieldStyles,\n                'spectrum-Textfield-input',\n                {\n                  'is-hovered': isHovered,\n                  'is-placeholder': isPlaceholder,\n                  'is-disabled': isDisabled\n                },\n                classNames(\n                  styles,\n                  'spectrum-InputGroup-input',\n                  classNames(labelStyles, 'spectrum-Field-field')\n                ),\n                classNames(\n                  comboboxStyles,\n                  'mobile-input'\n                )\n              )\n            }>\n            <span\n              id={valueId}\n              className={\n                classNames(\n                  comboboxStyles,\n                  'mobile-value'\n                )\n              }>\n              {children}\n            </span>\n          </div>\n          {validationState && !isDisabled ? validation : null}\n        </div>\n        <div\n          className={\n            classNames(\n              buttonStyles,\n              'spectrum-FieldButton',\n              {\n                'spectrum-FieldButton--quiet': isQuiet,\n                'is-active': isPressed,\n                'is-disabled': isDisabled,\n                'spectrum-FieldButton--invalid': validationState === 'invalid' && !isDisabled,\n                'is-hovered': isHovered\n              },\n              classNames(\n                styles,\n                'spectrum-FieldButton'\n              )\n            )\n          }>\n          <ChevronDownMedium UNSAFE_className={classNames(styles, 'spectrum-Dropdown-chevron')} />\n        </div>\n      </div>\n    </FocusRing>)\n  );\n});\n\ninterface ComboBoxTrayProps extends SpectrumComboBoxProps<unknown> {\n  state: ComboBoxState<unknown>,\n  overlayProps: HTMLAttributes<HTMLElement>,\n  loadingIndicator?: ReactElement,\n  onClose: () => void\n}\n\nfunction ComboBoxTray(props: ComboBoxTrayProps) {\n  let {\n    // completionMode = 'suggest',\n    state,\n    isDisabled,\n    validationState,\n    label,\n    overlayProps,\n    loadingState,\n    onLoadMore,\n    onClose\n  } = props;\n\n  let timeout = useRef(null);\n  let [showLoading, setShowLoading] = useState(false);\n  let inputRef = useRef<HTMLInputElement>(undefined);\n  let buttonRef = useRef<FocusableRefValue<HTMLElement>>(undefined);\n  let popoverRef = useRef<HTMLDivElement>(undefined);\n  let listBoxRef = useRef<HTMLDivElement>(undefined);\n  let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';\n  let layout = useListBoxLayout();\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/combobox');\n\n  let {inputProps, listBoxProps, labelProps} = useComboBox(\n    {\n      ...props,\n      // completionMode,\n      layoutDelegate: layout,\n      buttonRef: unwrapDOMRef(buttonRef),\n      popoverRef: popoverRef,\n      listBoxRef,\n      inputRef,\n      // Handled outside the tray.\n      name: undefined\n    },\n    state\n  );\n\n  React.useEffect(() => {\n    focusSafely(inputRef.current);\n  }, []);\n\n  React.useEffect(() => {\n    // When the tray closes, set state.isFocused (i.e. the tray input's focus tracker) to false.\n    // This is to prevent state.isFocused from being set to true when the tray closes via tapping on the underlay\n    // (FocusScope attempts to restore focus to the tray input when tapping outside the tray due to \"contain\")\n    // Have to do this manually since React doesn't call onBlur when a component is unmounted: https://github.com/facebook/react/issues/12363\n    if (!state.isOpen && state.isFocused) {\n      state.setFocused(false);\n    }\n  });\n\n  let {dialogProps} = useDialog({\n    'aria-labelledby': useId(labelProps.id)\n  }, popoverRef);\n\n  // Override the role of the input to \"searchbox\" instead of \"combobox\".\n  // Since the listbox is always visible, the combobox role doesn't really give us anything.\n  // VoiceOver on iOS reads \"double tap to collapse\" when focused on the input rather than\n  // \"double tap to edit text\", as with a textbox or searchbox. We'd like double tapping to\n  // open the virtual keyboard rather than closing the tray.\n  // Unlike \"combobox\", \"aria-expanded\" is not a valid attribute on \"searchbox\".\n  inputProps.role = 'searchbox';\n  inputProps['aria-haspopup'] = 'listbox';\n  delete inputProps['aria-expanded'];\n  delete inputProps.onTouchEnd;\n\n  let clearButton = (\n    <ClearButton\n      preventFocus\n      aria-label={stringFormatter.format('clear')}\n      excludeFromTabOrder\n      onPress={() => {\n        state.setInputValue('');\n        inputRef.current.focus();\n      }}\n      UNSAFE_className={\n        classNames(\n          searchStyles,\n          'spectrum-ClearButton'\n        )\n      }\n      isDisabled={isDisabled} />\n  );\n\n  let loadingCircle = (\n    <ProgressCircle\n      aria-label={stringFormatter.format('loading')}\n      size=\"S\"\n      isIndeterminate\n      UNSAFE_className={classNames(\n        searchStyles,\n        'spectrum-Search-circleLoader',\n        classNames(\n          textfieldStyles,\n          'spectrum-Textfield-circleLoader'\n        )\n      )} />\n  );\n\n  // Close the software keyboard on scroll to give the user a bigger area to scroll.\n  // But only do this if scrolling with touch, otherwise it can cause issues with touch\n  // screen readers.\n  let isTouchDown = useRef(false);\n  let onTouchStart = () => {\n    isTouchDown.current = true;\n  };\n\n  let onTouchEnd = () => {\n    isTouchDown.current = false;\n  };\n\n  let onScroll = useCallback(() => {\n    if (!inputRef.current || document.activeElement !== inputRef.current || !isTouchDown.current) {\n      return;\n    }\n\n    popoverRef.current.focus();\n  }, [inputRef, popoverRef, isTouchDown]);\n\n  let inputValue = inputProps.value;\n  let lastInputValue = useRef(inputValue);\n  useEffect(() => {\n    if (loadingState === 'filtering' && !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 (loadingState !== 'filtering') {\n      // If loading is no longer happening, clear any timers and hide the loading circle\n      setShowLoading(false);\n      clearTimeout(timeout.current);\n      timeout.current = null;\n    }\n\n    lastInputValue.current = inputValue;\n  }, [loadingState, inputValue, showLoading]);\n\n  let onKeyDown = (e) => {\n    // Close virtual keyboard if user hits Enter w/o any focused options\n    if (e.key === 'Enter' && state.selectionManager.focusedKey == null) {\n      popoverRef.current.focus();\n    } else {\n      inputProps.onKeyDown(e);\n    }\n  };\n\n  return (\n    <FocusScope restoreFocus contain>\n      <div\n        {...mergeProps(overlayProps, dialogProps)}\n        ref={popoverRef}\n        className={\n          classNames(\n            comboboxStyles,\n            'tray-dialog'\n          )\n        }>\n        <DismissButton onDismiss={onClose} />\n        <TextFieldBase\n          label={label}\n          labelProps={labelProps}\n          inputProps={{...inputProps, onKeyDown}}\n          inputRef={inputRef}\n          isDisabled={isDisabled}\n          isLoading={showLoading && loadingState === 'filtering'}\n          loadingIndicator={loadingState != null && loadingCircle}\n          validationState={validationState}\n          labelAlign=\"start\"\n          labelPosition=\"top\"\n          wrapperChildren={(state.inputValue !== '' || loadingState === 'filtering' || validationState != null) && !props.isReadOnly && clearButton}\n          UNSAFE_className={\n            classNames(\n              searchStyles,\n              'spectrum-Search',\n              'spectrum-Textfield',\n              'spectrum-Search--loadable',\n              {\n                'spectrum-Search--invalid': validationState === 'invalid' && !isDisabled,\n                'spectrum-Search--valid': validationState === 'valid' && !isDisabled\n              },\n              classNames(\n                comboboxStyles,\n                'tray-textfield',\n                {\n                  'has-label': !!props.label\n                }\n              )\n            )\n          }\n          inputClassName={\n            classNames(\n              comboboxStyles,\n              'tray-textfield-input',\n              classNames(\n                searchStyles,\n                'spectrum-Search-input'\n              )\n            )\n          }\n          validationIconClassName={\n            classNames(\n              searchStyles,\n              'spectrum-Search-validationIcon'\n            )\n          } />\n        <ListBoxBase\n          {...listBoxProps}\n          domProps={{onTouchStart, onTouchEnd}}\n          disallowEmptySelection\n          shouldSelectOnPressUp\n          focusOnPointerEnter\n          layout={layout}\n          state={state}\n          shouldUseVirtualFocus\n          renderEmptyState={() => loadingState !== 'loading' && (\n            <span className={classNames(comboboxStyles, 'no-results')}>\n              {stringFormatter.format('noResults')}\n            </span>\n          )}\n          UNSAFE_className={\n            classNames(\n              comboboxStyles,\n              'tray-listbox'\n            )\n          }\n          ref={listBoxRef}\n          onScroll={onScroll}\n          onLoadMore={onLoadMore}\n          isLoading={isLoading} />\n        <DismissButton onDismiss={onClose} />\n      </div>\n    </FocusScope>\n  );\n}\n"],"names":[],"version":3,"file":"MobileComboBox.main.js.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/combobox/src/MobileComboBox.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 */\n\nimport AlertMedium from '@spectrum-icons/ui/AlertMedium';\nimport {AriaButtonProps} from '@react-types/button';\nimport buttonStyles from '@adobe/spectrum-css-temp/components/button/vars.css';\nimport CheckmarkMedium from '@spectrum-icons/ui/CheckmarkMedium';\nimport ChevronDownMedium from '@spectrum-icons/ui/ChevronDownMedium';\nimport {classNames, unwrapDOMRef, useFocusableRef} from '@react-spectrum/utils';\nimport {ClearButton} from '@react-spectrum/button';\nimport {ComboBoxState, useComboBoxState} from '@react-stately/combobox';\nimport comboboxStyles from './combobox.css';\nimport {DismissButton, useOverlayTrigger} from '@react-aria/overlays';\nimport {Field} from '@react-spectrum/label';\nimport {FocusableRef, FocusableRefValue, ValidationState} from '@react-types/shared';\nimport {FocusRing, focusSafely, FocusScope} from '@react-aria/focus';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport labelStyles from '@adobe/spectrum-css-temp/components/fieldlabel/vars.css';\nimport {ListBoxBase, useListBoxLayout} from '@react-spectrum/listbox';\nimport {mergeProps, useFormReset, useId, useObjectRef} from '@react-aria/utils';\nimport {ProgressCircle} from '@react-spectrum/progress';\nimport React, {ForwardedRef, HTMLAttributes, InputHTMLAttributes, ReactElement, ReactNode, useCallback, useEffect, useRef, useState} from 'react';\nimport searchStyles from '@adobe/spectrum-css-temp/components/search/vars.css';\nimport {setInteractionModality, useHover} from '@react-aria/interactions';\nimport {SpectrumComboBoxProps} from '@react-types/combobox';\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 {Tray} from '@react-spectrum/overlays';\nimport {useButton} from '@react-aria/button';\nimport {useComboBox} from '@react-aria/combobox';\nimport {useDialog} from '@react-aria/dialog';\nimport {useField} from '@react-aria/label';\nimport {useFilter, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useFormValidation} from '@react-aria/form';\nimport {useProviderProps} from '@react-spectrum/provider';\n\nexport const MobileComboBox = React.forwardRef(function MobileComboBox(props: SpectrumComboBoxProps<any>, ref: FocusableRef<HTMLElement>) {\n  props = useProviderProps(props);\n\n  let {\n    isQuiet,\n    isDisabled,\n    isReadOnly,\n    isRequired,\n    validationBehavior,\n    name,\n    formValue = 'text',\n    allowsCustomValue\n  } = props;\n  if (allowsCustomValue) {\n    formValue = 'text';\n  }\n\n  let {contains} = useFilter({sensitivity: 'base'});\n  let state = useComboBoxState({\n    ...props,\n    defaultFilter: contains,\n    allowsEmptyCollection: true,\n    // Needs to be false here otherwise we double up on commitSelection/commitCustomValue calls when\n    // user taps on underlay (i.e. initial tap will call setFocused(false) -> commitSelection/commitCustomValue via onBlur,\n    // then the closing of the tray will call setFocused(false) again due to cleanup effect)\n    shouldCloseOnBlur: false\n  });\n\n  let buttonRef = useRef<HTMLDivElement>(null);\n  let domRef = useFocusableRef(ref, buttonRef);\n  let {triggerProps, overlayProps} = useOverlayTrigger({type: 'listbox'}, state, buttonRef);\n\n  let inputRef = useRef<HTMLInputElement>(null);\n  useFormValidation({\n    ...props,\n    focus: () => buttonRef.current?.focus()\n  }, state, inputRef);\n  let {isInvalid, validationErrors, validationDetails} = state.displayValidation;\n  let validationState = props.validationState || (isInvalid ? 'invalid' : undefined);\n  let errorMessage = props.errorMessage ?? validationErrors.join(' ');\n\n  let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({\n    ...props,\n    labelElementType: 'span',\n    isInvalid,\n    errorMessage\n  });\n\n  // Focus the button and show focus ring when clicking on the label\n  labelProps.onClick = () => {\n    if (!props.isDisabled) {\n      buttonRef.current?.focus();\n      setInteractionModality('keyboard');\n    }\n  };\n\n  let inputProps: InputHTMLAttributes<HTMLInputElement> = {\n    type: 'hidden',\n    name,\n    value: formValue === 'text' ? state.inputValue : String(state.selectedKey)\n  };\n\n  if (validationBehavior === 'native') {\n    // Use a hidden <input type=\"text\"> rather than <input type=\"hidden\">\n    // so that an empty value blocks HTML form submission when the field is required.\n    inputProps.type = 'text';\n    inputProps.hidden = true;\n    inputProps.required = isRequired;\n    // Ignore react warning.\n    inputProps.onChange = () => {};\n  }\n\n  useFormReset(inputRef, String(inputProps.value ?? ''), formValue === 'text' ? state.setInputValue : state.setSelectedKey);\n\n  return (\n    <>\n      <Field\n        {...props}\n        labelProps={labelProps}\n        descriptionProps={descriptionProps}\n        errorMessageProps={errorMessageProps}\n        validationState={validationState}\n        isInvalid={isInvalid}\n        validationErrors={validationErrors}\n        validationDetails={validationDetails}\n        elementType=\"span\"\n        ref={domRef}\n        includeNecessityIndicatorInAccessibilityName>\n        <ComboBoxButton\n          {...mergeProps(triggerProps, fieldProps, {autoFocus: props.autoFocus})}\n          ref={buttonRef}\n          isQuiet={isQuiet}\n          isDisabled={isDisabled}\n          isPlaceholder={!state.inputValue}\n          validationState={validationState}\n          onPress={() => !isReadOnly && state.open(null, 'manual')}>\n          {state.inputValue || props.placeholder || ''}\n        </ComboBoxButton>\n      </Field>\n      <input {...inputProps} ref={inputRef} />\n      <Tray state={state} isFixedHeight {...overlayProps}>\n        <ComboBoxTray\n          {...props}\n          onClose={state.close}\n          overlayProps={overlayProps}\n          state={state} />\n      </Tray>\n    </>\n  );\n});\n\ninterface ComboBoxButtonProps extends AriaButtonProps {\n  isQuiet?: boolean,\n  isDisabled?: boolean,\n  isPlaceholder?: boolean,\n  validationState?: ValidationState,\n  children?: ReactNode,\n  style?: React.CSSProperties,\n  className?: string\n}\n\nexport const ComboBoxButton = React.forwardRef(function ComboBoxButton(props: ComboBoxButtonProps, ref: ForwardedRef<HTMLDivElement>) {\n  let {\n    isQuiet,\n    isDisabled,\n    isPlaceholder,\n    validationState,\n    children,\n    style,\n    className\n  } = props;\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/combobox');\n  let valueId = useId();\n  let invalidId = useId();\n  let validationIcon = validationState === 'invalid'\n    ? <AlertMedium id={invalidId} aria-label={stringFormatter.format('invalid')} />\n    : <CheckmarkMedium />;\n\n  let validation = React.cloneElement(validationIcon, {\n    UNSAFE_className: classNames(\n      textfieldStyles,\n      'spectrum-Textfield-validationIcon',\n      classNames(\n        styles,\n        'spectrum-InputGroup-input-validationIcon'\n      )\n    )\n  });\n\n  let objRef = useObjectRef(ref);\n  let {hoverProps, isHovered} = useHover({});\n  let {buttonProps, isPressed} = useButton({\n    ...props,\n    'aria-labelledby': [\n      props['aria-labelledby'],\n      props['aria-label'] && !props['aria-labelledby'] ? props.id : null,\n      valueId,\n      validationState === 'invalid' ? invalidId : null\n    ].filter(Boolean).join(' '),\n    elementType: 'div'\n  }, objRef);\n\n  return (\n    (<FocusRing\n      focusClass={classNames(styles, 'is-focused')}\n      focusRingClass={classNames(styles, 'focus-ring')}>\n      <div\n        {...mergeProps(hoverProps, buttonProps)}\n        aria-haspopup=\"dialog\"\n        ref={objRef}\n        style={{...style, outline: 'none'}}\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              comboboxStyles,\n              'mobile-combobox'\n            ),\n            className\n          )\n        }>\n        <div\n          className={\n            classNames(\n              textfieldStyles,\n              'spectrum-Textfield',\n              {\n                'spectrum-Textfield--invalid': validationState === 'invalid' && !isDisabled,\n                'spectrum-Textfield--valid': validationState === 'valid' && !isDisabled,\n                'spectrum-Textfield--quiet': isQuiet\n              },\n              classNames(\n                styles,\n                'spectrum-InputGroup-field'\n              )\n            )\n          }>\n          <div\n            className={\n              classNames(\n                textfieldStyles,\n                'spectrum-Textfield-input',\n                {\n                  'is-hovered': isHovered,\n                  'is-placeholder': isPlaceholder,\n                  'is-disabled': isDisabled\n                },\n                classNames(\n                  styles,\n                  'spectrum-InputGroup-input',\n                  classNames(labelStyles, 'spectrum-Field-field')\n                ),\n                classNames(\n                  comboboxStyles,\n                  'mobile-input'\n                )\n              )\n            }>\n            <span\n              id={valueId}\n              className={\n                classNames(\n                  comboboxStyles,\n                  'mobile-value'\n                )\n              }>\n              {children}\n            </span>\n          </div>\n          {validationState && !isDisabled ? validation : null}\n        </div>\n        <div\n          className={\n            classNames(\n              buttonStyles,\n              'spectrum-FieldButton',\n              {\n                'spectrum-FieldButton--quiet': isQuiet,\n                'is-active': isPressed,\n                'is-disabled': isDisabled,\n                'spectrum-FieldButton--invalid': validationState === 'invalid' && !isDisabled,\n                'is-hovered': isHovered\n              },\n              classNames(\n                styles,\n                'spectrum-FieldButton'\n              )\n            )\n          }>\n          <ChevronDownMedium UNSAFE_className={classNames(styles, 'spectrum-Dropdown-chevron')} />\n        </div>\n      </div>\n    </FocusRing>)\n  );\n});\n\ninterface ComboBoxTrayProps extends SpectrumComboBoxProps<any> {\n  state: ComboBoxState<any>,\n  overlayProps: HTMLAttributes<HTMLElement>,\n  loadingIndicator?: ReactElement,\n  onClose: () => void\n}\n\nfunction ComboBoxTray(props: ComboBoxTrayProps) {\n  let {\n    // completionMode = 'suggest',\n    state,\n    isDisabled,\n    validationState,\n    label,\n    overlayProps,\n    loadingState,\n    onLoadMore,\n    onClose\n  } = props;\n\n  let timeout = useRef<ReturnType<typeof setTimeout> | null>(null);\n  let [showLoading, setShowLoading] = useState(false);\n  let inputRef = useRef<HTMLInputElement>(null);\n  let buttonRef = useRef<FocusableRefValue<HTMLElement>>(null);\n  let popoverRef = useRef<HTMLDivElement>(null);\n  let listBoxRef = useRef<HTMLDivElement>(null);\n  let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';\n  let layout = useListBoxLayout();\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/combobox');\n\n  let {inputProps, listBoxProps, labelProps} = useComboBox(\n    {\n      ...props,\n      // completionMode,\n      layoutDelegate: layout,\n      buttonRef: unwrapDOMRef(buttonRef),\n      popoverRef: popoverRef,\n      listBoxRef,\n      inputRef,\n      // Handled outside the tray.\n      name: undefined\n    },\n    state\n  );\n\n  React.useEffect(() => {\n    if (inputRef.current) {\n      focusSafely(inputRef.current);\n    }\n  }, []);\n\n  React.useEffect(() => {\n    // When the tray closes, set state.isFocused (i.e. the tray input's focus tracker) to false.\n    // This is to prevent state.isFocused from being set to true when the tray closes via tapping on the underlay\n    // (FocusScope attempts to restore focus to the tray input when tapping outside the tray due to \"contain\")\n    // Have to do this manually since React doesn't call onBlur when a component is unmounted: https://github.com/facebook/react/issues/12363\n    if (!state.isOpen && state.isFocused) {\n      state.setFocused(false);\n    }\n  });\n\n  let {dialogProps} = useDialog({\n    'aria-labelledby': useId(labelProps.id)\n  }, popoverRef);\n\n  // Override the role of the input to \"searchbox\" instead of \"combobox\".\n  // Since the listbox is always visible, the combobox role doesn't really give us anything.\n  // VoiceOver on iOS reads \"double tap to collapse\" when focused on the input rather than\n  // \"double tap to edit text\", as with a textbox or searchbox. We'd like double tapping to\n  // open the virtual keyboard rather than closing the tray.\n  // Unlike \"combobox\", \"aria-expanded\" is not a valid attribute on \"searchbox\".\n  inputProps.role = 'searchbox';\n  inputProps['aria-haspopup'] = 'listbox';\n  delete inputProps['aria-expanded'];\n  delete inputProps.onTouchEnd;\n\n  let clearButton = (\n    <ClearButton\n      preventFocus\n      aria-label={stringFormatter.format('clear')}\n      excludeFromTabOrder\n      onPress={() => {\n        state.setInputValue('');\n        inputRef.current?.focus();\n      }}\n      UNSAFE_className={\n        classNames(\n          searchStyles,\n          'spectrum-ClearButton'\n        )\n      }\n      isDisabled={isDisabled} />\n  );\n\n  let loadingCircle = (\n    <ProgressCircle\n      aria-label={stringFormatter.format('loading')}\n      size=\"S\"\n      isIndeterminate\n      UNSAFE_className={classNames(\n        searchStyles,\n        'spectrum-Search-circleLoader',\n        classNames(\n          textfieldStyles,\n          'spectrum-Textfield-circleLoader'\n        )\n      )} />\n  );\n\n  // Close the software keyboard on scroll to give the user a bigger area to scroll.\n  // But only do this if scrolling with touch, otherwise it can cause issues with touch\n  // screen readers.\n  let isTouchDown = useRef(false);\n  let onTouchStart = () => {\n    isTouchDown.current = true;\n  };\n\n  let onTouchEnd = () => {\n    isTouchDown.current = false;\n  };\n\n  let onScroll = useCallback(() => {\n    if (!inputRef.current || document.activeElement !== inputRef.current || !isTouchDown.current) {\n      return;\n    }\n\n    popoverRef.current?.focus();\n  }, [inputRef, popoverRef, isTouchDown]);\n\n  let inputValue = inputProps.value;\n  let lastInputValue = useRef(inputValue);\n  useEffect(() => {\n    if (loadingState === 'filtering' && !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 (loadingState !== 'filtering') {\n      // If loading is no longer happening, clear any timers and hide the loading circle\n      setShowLoading(false);\n      if (timeout.current) {\n        clearTimeout(timeout.current);\n      }\n      timeout.current = null;\n    }\n\n    lastInputValue.current = inputValue;\n  }, [loadingState, inputValue, showLoading]);\n\n  let onKeyDown = (e) => {\n    // Close virtual keyboard if user hits Enter w/o any focused options\n    if (e.key === 'Enter' && state.selectionManager.focusedKey == null) {\n      popoverRef.current?.focus();\n    } else {\n      inputProps.onKeyDown?.(e);\n    }\n  };\n\n  return (\n    <FocusScope restoreFocus contain>\n      <div\n        {...mergeProps(overlayProps, dialogProps)}\n        ref={popoverRef}\n        className={\n          classNames(\n            comboboxStyles,\n            'tray-dialog'\n          )\n        }>\n        <DismissButton onDismiss={onClose} />\n        <TextFieldBase\n          label={label}\n          labelProps={labelProps}\n          inputProps={{...inputProps, onKeyDown}}\n          inputRef={inputRef}\n          isDisabled={isDisabled}\n          isLoading={showLoading && loadingState === 'filtering'}\n          loadingIndicator={loadingState != null ? loadingCircle : undefined}\n          validationState={validationState}\n          labelAlign=\"start\"\n          labelPosition=\"top\"\n          wrapperChildren={(state.inputValue !== '' || loadingState === 'filtering' || validationState != null) && !props.isReadOnly ? clearButton : undefined}\n          UNSAFE_className={\n            classNames(\n              searchStyles,\n              'spectrum-Search',\n              'spectrum-Textfield',\n              'spectrum-Search--loadable',\n              {\n                'spectrum-Search--invalid': validationState === 'invalid' && !isDisabled,\n                'spectrum-Search--valid': validationState === 'valid' && !isDisabled\n              },\n              classNames(\n                comboboxStyles,\n                'tray-textfield',\n                {\n                  'has-label': !!props.label\n                }\n              )\n            )\n          }\n          inputClassName={\n            classNames(\n              comboboxStyles,\n              'tray-textfield-input',\n              classNames(\n                searchStyles,\n                'spectrum-Search-input'\n              )\n            )\n          }\n          validationIconClassName={\n            classNames(\n              searchStyles,\n              'spectrum-Search-validationIcon'\n            )\n          } />\n        <ListBoxBase\n          {...listBoxProps}\n          domProps={{onTouchStart, onTouchEnd}}\n          disallowEmptySelection\n          shouldSelectOnPressUp\n          focusOnPointerEnter\n          layout={layout}\n          state={state}\n          shouldUseVirtualFocus\n          renderEmptyState={() => loadingState !== 'loading' && (\n            <span className={classNames(comboboxStyles, 'no-results')}>\n              {stringFormatter.format('noResults')}\n            </span>\n          )}\n          UNSAFE_className={\n            classNames(\n              comboboxStyles,\n              'tray-listbox'\n            )\n          }\n          ref={listBoxRef}\n          onScroll={onScroll}\n          onLoadMore={onLoadMore}\n          isLoading={isLoading} />\n        <DismissButton onDismiss={onClose} />\n      </div>\n    </FocusScope>\n  );\n}\n"],"names":[],"version":3,"file":"MobileComboBox.main.js.map"}

package/dist/MobileComboBox.mjs

@@ -21,7 +21,7 @@ import {useOverlayTrigger as $gRayl$useOverlayTrigger, DismissButton as $gRayl$D
 import {Field as $gRayl$Field} from "@react-spectrum/label";
 import {FocusRing as $gRayl$FocusRing, focusSafely as $gRayl$focusSafely, FocusScope as $gRayl$FocusScope} from "@react-aria/focus";
 import {useListBoxLayout as $gRayl$useListBoxLayout, ListBoxBase as $gRayl$ListBoxBase} from "@react-spectrum/listbox";
-import {useFormReset as $gRayl$useFormReset, mergeProps as $gRayl$mergeProps, useId as $gRayl$useId} from "@react-aria/utils";
+import {useFormReset as $gRayl$useFormReset, mergeProps as $gRayl$mergeProps, useId as $gRayl$useId, useObjectRef as $gRayl$useObjectRef} from "@react-aria/utils";
 import {ProgressCircle as $gRayl$ProgressCircle} from "@react-spectrum/progress";
 import $gRayl$react, {useRef as $gRayl$useRef, useState as $gRayl$useState, useCallback as $gRayl$useCallback, useEffect as $gRayl$useEffect} from "react";
 import {setInteractionModality as $gRayl$setInteractionModality, useHover as $gRayl$useHover} from "@react-aria/interactions";
@@ -95,7 +95,7 @@ const $a1ae4cad4496428f$export$7637df911c069b4d = /*#__PURE__*/ (0, $gRayl$react
         // then the closing of the tray will call setFocused(false) again due to cleanup effect)
         shouldCloseOnBlur: false
     });
-    let buttonRef = (0, $gRayl$useRef)(undefined);
+    let buttonRef = (0, $gRayl$useRef)(null);
     let domRef = (0, $gRayl$useFocusableRef)(ref, buttonRef);
     let { triggerProps: triggerProps, overlayProps: overlayProps } = (0, $gRayl$useOverlayTrigger)({
         type: 'listbox'
@@ -103,10 +103,13 @@ const $a1ae4cad4496428f$export$7637df911c069b4d = /*#__PURE__*/ (0, $gRayl$react
     let inputRef = (0, $gRayl$useRef)(null);
     (0, $gRayl$useFormValidation)({
         ...props,
-        focus: ()=>buttonRef.current.focus()
+        focus: ()=>{
+            var _buttonRef_current;
+            return (_buttonRef_current = buttonRef.current) === null || _buttonRef_current === void 0 ? void 0 : _buttonRef_current.focus();
+        }
     }, state, inputRef);
     let { isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = state.displayValidation;
-    let validationState = props.validationState || (isInvalid ? 'invalid' : null);
+    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 { labelProps: labelProps, fieldProps: fieldProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = (0, $gRayl$useField)({
@@ -118,14 +121,15 @@ const $a1ae4cad4496428f$export$7637df911c069b4d = /*#__PURE__*/ (0, $gRayl$react
     // Focus the button and show focus ring when clicking on the label
     labelProps.onClick = ()=>{
         if (!props.isDisabled) {
-            buttonRef.current.focus();
+            var _buttonRef_current;
+            (_buttonRef_current = buttonRef.current) === null || _buttonRef_current === void 0 ? void 0 : _buttonRef_current.focus();
             (0, $gRayl$setInteractionModality)('keyboard');
         }
     };
     let inputProps = {
         type: 'hidden',
         name: name,
-        value: formValue === 'text' ? state.inputValue : state.selectedKey
+        value: formValue === 'text' ? state.inputValue : String(state.selectedKey)
     };
     if (validationBehavior === 'native') {
         // Use a hidden <input type="text"> rather than <input type="hidden">
@@ -136,7 +140,8 @@ const $a1ae4cad4496428f$export$7637df911c069b4d = /*#__PURE__*/ (0, $gRayl$react
         // Ignore react warning.
         inputProps.onChange = ()=>{};
     }
-    (0, $gRayl$useFormReset)(inputRef, inputProps.value, formValue === 'text' ? state.setInputValue : state.setSelectedKey);
+    var _inputProps_value;
+    (0, $gRayl$useFormReset)(inputRef, String((_inputProps_value = inputProps.value) !== null && _inputProps_value !== void 0 ? _inputProps_value : ''), formValue === 'text' ? state.setInputValue : state.setSelectedKey);
     return /*#__PURE__*/ (0, $gRayl$react).createElement((0, $gRayl$react).Fragment, null, /*#__PURE__*/ (0, $gRayl$react).createElement((0, $gRayl$Field), {
         ...props,
         labelProps: labelProps,
@@ -149,7 +154,7 @@ const $a1ae4cad4496428f$export$7637df911c069b4d = /*#__PURE__*/ (0, $gRayl$react
         elementType: "span",
         ref: domRef,
         includeNecessityIndicatorInAccessibilityName: true
-    }, /*#__PURE__*/ (0, $gRayl$react).createElement($a1ae4cad4496428f$var$ComboBoxButton, {
+    }, /*#__PURE__*/ (0, $gRayl$react).createElement($a1ae4cad4496428f$export$adfa0abcd5972f7e, {
         ...(0, $gRayl$mergeProps)(triggerProps, fieldProps, {
             autoFocus: props.autoFocus
         }),
@@ -173,7 +178,7 @@ const $a1ae4cad4496428f$export$7637df911c069b4d = /*#__PURE__*/ (0, $gRayl$react
         state: state
     })));
 });
-const $a1ae4cad4496428f$var$ComboBoxButton = /*#__PURE__*/ (0, $gRayl$react).forwardRef(function ComboBoxButton(props, ref) {
+const $a1ae4cad4496428f$export$adfa0abcd5972f7e = /*#__PURE__*/ (0, $gRayl$react).forwardRef(function ComboBoxButton(props, ref) {
     let { isQuiet: isQuiet, isDisabled: isDisabled, isPlaceholder: isPlaceholder, validationState: validationState, children: children, style: style, className: className } = props;
     let stringFormatter = (0, $gRayl$useLocalizedStringFormatter)((0, ($parcel$interopDefault($gRayl$intlStringsmodulejs))), '@react-spectrum/combobox');
     let valueId = (0, $gRayl$useId)();
@@ -185,6 +190,7 @@ const $a1ae4cad4496428f$var$ComboBoxButton = /*#__PURE__*/ (0, $gRayl$react).for
     let validation = /*#__PURE__*/ (0, $gRayl$react).cloneElement(validationIcon, {
         UNSAFE_className: (0, $gRayl$classNames)((0, ($parcel$interopDefault($gRayl$textfield_vars_cssmodulejs))), 'spectrum-Textfield-validationIcon', (0, $gRayl$classNames)((0, ($parcel$interopDefault($gRayl$inputgroup_vars_cssmodulejs))), 'spectrum-InputGroup-input-validationIcon'))
     });
+    let objRef = (0, $gRayl$useObjectRef)(ref);
     let { hoverProps: hoverProps, isHovered: isHovered } = (0, $gRayl$useHover)({});
     let { buttonProps: buttonProps, isPressed: isPressed } = (0, $gRayl$useButton)({
         ...props,
@@ -195,14 +201,14 @@ const $a1ae4cad4496428f$var$ComboBoxButton = /*#__PURE__*/ (0, $gRayl$react).for
             validationState === 'invalid' ? invalidId : null
         ].filter(Boolean).join(' '),
         elementType: 'div'
-    }, ref);
+    }, objRef);
     return /*#__PURE__*/ (0, $gRayl$react).createElement((0, $gRayl$FocusRing), {
         focusClass: (0, $gRayl$classNames)((0, ($parcel$interopDefault($gRayl$inputgroup_vars_cssmodulejs))), 'is-focused'),
         focusRingClass: (0, $gRayl$classNames)((0, ($parcel$interopDefault($gRayl$inputgroup_vars_cssmodulejs))), 'focus-ring')
     }, /*#__PURE__*/ (0, $gRayl$react).createElement("div", {
         ...(0, $gRayl$mergeProps)(hoverProps, buttonProps),
         "aria-haspopup": "dialog",
-        ref: ref,
+        ref: objRef,
         style: {
             ...style,
             outline: 'none'
@@ -245,10 +251,10 @@ function $a1ae4cad4496428f$var$ComboBoxTray(props) {
     state, isDisabled: isDisabled, validationState: validationState, label: label, overlayProps: overlayProps, loadingState: loadingState, onLoadMore: onLoadMore, onClose: onClose } = props;
     let timeout = (0, $gRayl$useRef)(null);
     let [showLoading, setShowLoading] = (0, $gRayl$useState)(false);
-    let inputRef = (0, $gRayl$useRef)(undefined);
-    let buttonRef = (0, $gRayl$useRef)(undefined);
-    let popoverRef = (0, $gRayl$useRef)(undefined);
-    let listBoxRef = (0, $gRayl$useRef)(undefined);
+    let inputRef = (0, $gRayl$useRef)(null);
+    let buttonRef = (0, $gRayl$useRef)(null);
+    let popoverRef = (0, $gRayl$useRef)(null);
+    let listBoxRef = (0, $gRayl$useRef)(null);
     let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';
     let layout = (0, $gRayl$useListBoxLayout)();
     let stringFormatter = (0, $gRayl$useLocalizedStringFormatter)((0, ($parcel$interopDefault($gRayl$intlStringsmodulejs))), '@react-spectrum/combobox');
@@ -264,7 +270,7 @@ function $a1ae4cad4496428f$var$ComboBoxTray(props) {
         name: undefined
     }, state);
     (0, $gRayl$react).useEffect(()=>{
-        (0, $gRayl$focusSafely)(inputRef.current);
+        if (inputRef.current) (0, $gRayl$focusSafely)(inputRef.current);
     }, []);
     (0, $gRayl$react).useEffect(()=>{
         // When the tray closes, set state.isFocused (i.e. the tray input's focus tracker) to false.
@@ -291,8 +297,9 @@ function $a1ae4cad4496428f$var$ComboBoxTray(props) {
         "aria-label": stringFormatter.format('clear'),
         excludeFromTabOrder: true,
         onPress: ()=>{
+            var _inputRef_current;
             state.setInputValue('');
-            inputRef.current.focus();
+            (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.focus();
         },
         UNSAFE_className: (0, $gRayl$classNames)((0, ($parcel$interopDefault($gRayl$search_vars_cssmodulejs))), 'spectrum-ClearButton'),
         isDisabled: isDisabled
@@ -314,8 +321,9 @@ function $a1ae4cad4496428f$var$ComboBoxTray(props) {
         isTouchDown.current = false;
     };
     let onScroll = (0, $gRayl$useCallback)(()=>{
+        var _popoverRef_current;
         if (!inputRef.current || document.activeElement !== inputRef.current || !isTouchDown.current) return;
-        popoverRef.current.focus();
+        (_popoverRef_current = popoverRef.current) === null || _popoverRef_current === void 0 ? void 0 : _popoverRef_current.focus();
     }, [
         inputRef,
         popoverRef,
@@ -338,7 +346,7 @@ function $a1ae4cad4496428f$var$ComboBoxTray(props) {
         } else if (loadingState !== 'filtering') {
             // If loading is no longer happening, clear any timers and hide the loading circle
             setShowLoading(false);
-            clearTimeout(timeout.current);
+            if (timeout.current) clearTimeout(timeout.current);
             timeout.current = null;
         }
         lastInputValue.current = inputValue;
@@ -348,9 +356,10 @@ function $a1ae4cad4496428f$var$ComboBoxTray(props) {
         showLoading
     ]);
     let onKeyDown = (e)=>{
+        var _popoverRef_current, _inputProps_onKeyDown;
         // Close virtual keyboard if user hits Enter w/o any focused options
-        if (e.key === 'Enter' && state.selectionManager.focusedKey == null) popoverRef.current.focus();
-        else inputProps.onKeyDown(e);
+        if (e.key === 'Enter' && state.selectionManager.focusedKey == null) (_popoverRef_current = popoverRef.current) === null || _popoverRef_current === void 0 ? void 0 : _popoverRef_current.focus();
+        else (_inputProps_onKeyDown = inputProps.onKeyDown) === null || _inputProps_onKeyDown === void 0 ? void 0 : _inputProps_onKeyDown.call(inputProps, e);
     };
     return /*#__PURE__*/ (0, $gRayl$react).createElement((0, $gRayl$FocusScope), {
         restoreFocus: true,
@@ -371,11 +380,11 @@ function $a1ae4cad4496428f$var$ComboBoxTray(props) {
         inputRef: inputRef,
         isDisabled: isDisabled,
         isLoading: showLoading && loadingState === 'filtering',
-        loadingIndicator: loadingState != null && loadingCircle,
+        loadingIndicator: loadingState != null ? loadingCircle : undefined,
         validationState: validationState,
         labelAlign: "start",
         labelPosition: "top",
-        wrapperChildren: (state.inputValue !== '' || loadingState === 'filtering' || validationState != null) && !props.isReadOnly && clearButton,
+        wrapperChildren: (state.inputValue !== '' || loadingState === 'filtering' || validationState != null) && !props.isReadOnly ? clearButton : undefined,
         UNSAFE_className: (0, $gRayl$classNames)((0, ($parcel$interopDefault($gRayl$search_vars_cssmodulejs))), 'spectrum-Search', 'spectrum-Textfield', 'spectrum-Search--loadable', {
             'spectrum-Search--invalid': validationState === 'invalid' && !isDisabled,
             'spectrum-Search--valid': validationState === 'valid' && !isDisabled
@@ -410,5 +419,5 @@ function $a1ae4cad4496428f$var$ComboBoxTray(props) {
 }
 
 
-export {$a1ae4cad4496428f$export$7637df911c069b4d as MobileComboBox};
+export {$a1ae4cad4496428f$export$7637df911c069b4d as MobileComboBox, $a1ae4cad4496428f$export$adfa0abcd5972f7e as ComboBoxButton};
 //# sourceMappingURL=MobileComboBox.module.js.map