@react-spectrum/combobox 3.0.0-beta.0 → 3.0.0-nightly-641446f65-240905

package/dist/ComboBox.main.js

@@ -0,0 +1,293 @@
+require("./combobox.4bcd8cdb.css");
+var $41fae9390a5a37fa$exports = require("./combobox_css.main.js");
+var $9e627d9ac6346a53$exports = require("./intlStrings.main.js");
+var $e514018f82d1b067$exports = require("./MobileComboBox.main.js");
+require("./vars.963b3e04.css");
+var $2f86633ce5b04f1e$exports = require("./inputgroup_vars_css.main.js");
+require("./vars.25f9ddd3.css");
+var $40cb3a00c193680f$exports = require("./textfield_vars_css.main.js");
+var $XxzjX$spectrumiconsuiChevronDownMedium = require("@spectrum-icons/ui/ChevronDownMedium");
+var $XxzjX$reactspectrumutils = require("@react-spectrum/utils");
+var $XxzjX$reactspectrumlabel = require("@react-spectrum/label");
+var $XxzjX$reactspectrumbutton = require("@react-spectrum/button");
+var $XxzjX$reactariafocus = require("@react-aria/focus");
+var $XxzjX$reactspectrumlistbox = require("@react-spectrum/listbox");
+var $XxzjX$reactspectrumoverlays = require("@react-spectrum/overlays");
+var $XxzjX$reactariainteractions = require("@react-aria/interactions");
+var $XxzjX$reactspectrumprogress = require("@react-spectrum/progress");
+var $XxzjX$react = require("react");
+var $XxzjX$reactspectrumtextfield = require("@react-spectrum/textfield");
+var $XxzjX$reactariacombobox = require("@react-aria/combobox");
+var $XxzjX$reactstatelycombobox = require("@react-stately/combobox");
+var $XxzjX$reactariai18n = require("@react-aria/i18n");
+var $XxzjX$reactspectrumform = require("@react-spectrum/form");
+var $XxzjX$reactariautils = require("@react-aria/utils");
+var $XxzjX$reactspectrumprovider = require("@react-spectrum/provider");
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+
+$parcel$export(module.exports, "ComboBox", () => $e4f518eb9b010873$export$72b9695b8216309a);
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+function $e4f518eb9b010873$var$ComboBox(props, ref) {
+    props = (0, $XxzjX$reactspectrumprovider.useProviderProps)(props);
+    props = (0, $XxzjX$reactspectrumform.useFormProps)(props);
+    if (props.placeholder) console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/ComboBox.html#help-text');
+    let isMobile = (0, $XxzjX$reactspectrumutils.useIsMobileDevice)();
+    if (isMobile) // menuTrigger=focus/manual don't apply to mobile combobox
+    return /*#__PURE__*/ (0, ($parcel$interopDefault($XxzjX$react))).createElement((0, $e514018f82d1b067$exports.MobileComboBox), {
+        ...props,
+        menuTrigger: "input",
+        ref: ref
+    });
+    else return /*#__PURE__*/ (0, ($parcel$interopDefault($XxzjX$react))).createElement($e4f518eb9b010873$var$ComboBoxBase, {
+        ...props,
+        ref: ref
+    });
+}
+const $e4f518eb9b010873$var$ComboBoxBase = /*#__PURE__*/ (0, ($parcel$interopDefault($XxzjX$react))).forwardRef(function ComboBoxBase(props, ref) {
+    let { menuTrigger: menuTrigger = 'input', shouldFlip: shouldFlip = true, direction: direction = 'bottom', align: align = 'start', isQuiet: isQuiet, loadingState: loadingState, onLoadMore: onLoadMore, allowsCustomValue: allowsCustomValue, menuWidth: customMenuWidth, name: name, formValue: formValue = 'text' } = props;
+    if (allowsCustomValue) formValue = 'text';
+    let stringFormatter = (0, $XxzjX$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($9e627d9ac6346a53$exports))), '@react-spectrum/combobox');
+    let isAsync = loadingState != null;
+    let popoverRef = (0, $XxzjX$react.useRef)(undefined);
+    let unwrappedPopoverRef = (0, $XxzjX$reactspectrumutils.useUnwrapDOMRef)(popoverRef);
+    let buttonRef = (0, $XxzjX$react.useRef)(undefined);
+    let unwrappedButtonRef = (0, $XxzjX$reactspectrumutils.useUnwrapDOMRef)(buttonRef);
+    let listBoxRef = (0, $XxzjX$react.useRef)(undefined);
+    let inputRef = (0, $XxzjX$react.useRef)(undefined);
+    // serve as the new popover `triggerRef` instead of `unwrappedButtonRef` before for better positioning.
+    let inputGroupRef = (0, $XxzjX$react.useRef)(undefined);
+    let domRef = (0, $XxzjX$reactspectrumutils.useFocusableRef)(ref, inputRef);
+    let { contains: contains } = (0, $XxzjX$reactariai18n.useFilter)({
+        sensitivity: 'base'
+    });
+    let state = (0, $XxzjX$reactstatelycombobox.useComboBoxState)({
+        ...props,
+        defaultFilter: contains,
+        allowsEmptyCollection: isAsync
+    });
+    let layout = (0, $XxzjX$reactspectrumlistbox.useListBoxLayout)();
+    let { buttonProps: buttonProps, inputProps: inputProps, listBoxProps: listBoxProps, labelProps: labelProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps, isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = (0, $XxzjX$reactariacombobox.useComboBox)({
+        ...props,
+        layoutDelegate: layout,
+        buttonRef: unwrappedButtonRef,
+        popoverRef: unwrappedPopoverRef,
+        listBoxRef: listBoxRef,
+        inputRef: inputRef,
+        menuTrigger: menuTrigger,
+        name: formValue === 'text' ? name : undefined
+    }, state);
+    // Measure the width of the inputfield and the button to inform the width of the menu (below).
+    let [menuWidth, setMenuWidth] = (0, $XxzjX$react.useState)(null);
+    let { scale: scale } = (0, $XxzjX$reactspectrumprovider.useProvider)();
+    let onResize = (0, $XxzjX$react.useCallback)(()=>{
+        if (unwrappedButtonRef.current && inputRef.current) {
+            let buttonWidth = unwrappedButtonRef.current.offsetWidth;
+            let inputWidth = inputRef.current.offsetWidth;
+            setMenuWidth(buttonWidth + inputWidth);
+        }
+    }, [
+        unwrappedButtonRef,
+        inputRef,
+        setMenuWidth
+    ]);
+    (0, $XxzjX$reactspectrumutils.useResizeObserver)({
+        ref: domRef,
+        onResize: onResize
+    });
+    (0, $XxzjX$reactariautils.useLayoutEffect)(onResize, [
+        scale,
+        onResize
+    ]);
+    let width = isQuiet ? null : menuWidth;
+    let style = {
+        width: customMenuWidth ? (0, $XxzjX$reactspectrumutils.dimensionValue)(customMenuWidth) : width,
+        minWidth: isQuiet ? `calc(${menuWidth}px + calc(2 * var(--spectrum-dropdown-quiet-offset)))` : menuWidth
+    };
+    var _state_selectedKey;
+    return /*#__PURE__*/ (0, ($parcel$interopDefault($XxzjX$react))).createElement((0, ($parcel$interopDefault($XxzjX$react))).Fragment, null, /*#__PURE__*/ (0, ($parcel$interopDefault($XxzjX$react))).createElement((0, $XxzjX$reactspectrumlabel.Field), {
+        ...props,
+        descriptionProps: descriptionProps,
+        errorMessageProps: errorMessageProps,
+        isInvalid: isInvalid,
+        validationErrors: validationErrors,
+        validationDetails: validationDetails,
+        labelProps: labelProps,
+        ref: domRef
+    }, /*#__PURE__*/ (0, ($parcel$interopDefault($XxzjX$react))).createElement($e4f518eb9b010873$var$ComboBoxInput, {
+        ...props,
+        isOpen: state.isOpen,
+        loadingState: loadingState,
+        inputProps: inputProps,
+        inputRef: inputRef,
+        triggerProps: buttonProps,
+        triggerRef: buttonRef,
+        validationState: props.validationState || (isInvalid ? 'invalid' : null),
+        ref: inputGroupRef
+    })), name && formValue === 'key' && /*#__PURE__*/ (0, ($parcel$interopDefault($XxzjX$react))).createElement("input", {
+        type: "hidden",
+        name: name,
+        value: (_state_selectedKey = state.selectedKey) !== null && _state_selectedKey !== void 0 ? _state_selectedKey : ''
+    }), /*#__PURE__*/ (0, ($parcel$interopDefault($XxzjX$react))).createElement((0, $XxzjX$reactspectrumoverlays.Popover), {
+        state: state,
+        UNSAFE_style: style,
+        UNSAFE_className: (0, $XxzjX$reactspectrumutils.classNames)((0, ($parcel$interopDefault($2f86633ce5b04f1e$exports))), 'spectrum-InputGroup-popover', {
+            'spectrum-InputGroup-popover--quiet': isQuiet
+        }),
+        ref: popoverRef,
+        triggerRef: inputGroupRef,
+        scrollRef: listBoxRef,
+        placement: `${direction} ${align}`,
+        hideArrow: true,
+        isNonModal: true,
+        shouldFlip: shouldFlip
+    }, /*#__PURE__*/ (0, ($parcel$interopDefault($XxzjX$react))).createElement((0, $XxzjX$reactspectrumlistbox.ListBoxBase), {
+        ...listBoxProps,
+        ref: listBoxRef,
+        disallowEmptySelection: true,
+        autoFocus: state.focusStrategy,
+        shouldSelectOnPressUp: true,
+        focusOnPointerEnter: true,
+        layout: layout,
+        state: state,
+        shouldUseVirtualFocus: true,
+        isLoading: loadingState === 'loading' || loadingState === 'loadingMore',
+        showLoadingSpinner: loadingState === 'loadingMore',
+        onLoadMore: onLoadMore,
+        renderEmptyState: ()=>isAsync && /*#__PURE__*/ (0, ($parcel$interopDefault($XxzjX$react))).createElement("span", {
+                className: (0, $XxzjX$reactspectrumutils.classNames)((0, ($parcel$interopDefault($41fae9390a5a37fa$exports))), 'no-results')
+            }, loadingState === 'loading' ? stringFormatter.format('loading') : stringFormatter.format('noResults'))
+    })));
+});
+const $e4f518eb9b010873$var$ComboBoxInput = /*#__PURE__*/ (0, ($parcel$interopDefault($XxzjX$react))).forwardRef(function ComboBoxInput(props, ref) {
+    let { isQuiet: isQuiet, isDisabled: isDisabled, validationState: validationState, inputProps: inputProps, inputRef: inputRef, triggerProps: triggerProps, triggerRef: triggerRef, autoFocus: autoFocus, style: style, className: className, loadingState: loadingState, isOpen: isOpen, menuTrigger: menuTrigger } = props;
+    let { hoverProps: hoverProps, isHovered: isHovered } = (0, $XxzjX$reactariainteractions.useHover)({});
+    let stringFormatter = (0, $XxzjX$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($9e627d9ac6346a53$exports))), '@react-spectrum/combobox');
+    let timeout = (0, $XxzjX$react.useRef)(null);
+    let [showLoading, setShowLoading] = (0, $XxzjX$react.useState)(false);
+    let loadingCircle = /*#__PURE__*/ (0, ($parcel$interopDefault($XxzjX$react))).createElement((0, $XxzjX$reactspectrumprogress.ProgressCircle), {
+        "aria-label": stringFormatter.format('loading'),
+        size: "S",
+        isIndeterminate: true,
+        UNSAFE_className: (0, $XxzjX$reactspectrumutils.classNames)((0, ($parcel$interopDefault($40cb3a00c193680f$exports))), 'spectrum-Textfield-circleLoader', (0, $XxzjX$reactspectrumutils.classNames)((0, ($parcel$interopDefault($2f86633ce5b04f1e$exports))), 'spectrum-InputGroup-input-circleLoader'))
+    });
+    let isLoading = loadingState === 'loading' || loadingState === 'filtering';
+    let inputValue = inputProps.value;
+    let lastInputValue = (0, $XxzjX$react.useRef)(inputValue);
+    (0, $XxzjX$react.useEffect)(()=>{
+        if (isLoading && !showLoading) {
+            if (timeout.current === null) timeout.current = setTimeout(()=>{
+                setShowLoading(true);
+            }, 500);
+            // If user is typing, clear the timer and restart since it is a new request
+            if (inputValue !== lastInputValue.current) {
+                clearTimeout(timeout.current);
+                timeout.current = setTimeout(()=>{
+                    setShowLoading(true);
+                }, 500);
+            }
+        } else if (!isLoading) {
+            // If loading is no longer happening, clear any timers and hide the loading circle
+            setShowLoading(false);
+            clearTimeout(timeout.current);
+            timeout.current = null;
+        }
+        lastInputValue.current = inputValue;
+    }, [
+        isLoading,
+        showLoading,
+        inputValue
+    ]);
+    (0, $XxzjX$react.useEffect)(()=>{
+        return ()=>{
+            clearTimeout(timeout.current);
+            timeout.current = null;
+        };
+    }, []);
+    return /*#__PURE__*/ (0, ($parcel$interopDefault($XxzjX$react))).createElement((0, $XxzjX$reactariafocus.FocusRing), {
+        within: true,
+        isTextInput: true,
+        focusClass: (0, $XxzjX$reactspectrumutils.classNames)((0, ($parcel$interopDefault($2f86633ce5b04f1e$exports))), 'is-focused'),
+        focusRingClass: (0, $XxzjX$reactspectrumutils.classNames)((0, ($parcel$interopDefault($2f86633ce5b04f1e$exports))), 'focus-ring'),
+        autoFocus: autoFocus
+    }, /*#__PURE__*/ (0, ($parcel$interopDefault($XxzjX$react))).createElement("div", {
+        ...hoverProps,
+        ref: ref,
+        style: style,
+        className: (0, $XxzjX$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
+        }, className)
+    }, /*#__PURE__*/ (0, ($parcel$interopDefault($XxzjX$react))).createElement((0, $XxzjX$reactspectrumtextfield.TextFieldBase), {
+        inputProps: inputProps,
+        inputRef: inputRef,
+        UNSAFE_className: (0, $XxzjX$reactspectrumutils.classNames)((0, ($parcel$interopDefault($2f86633ce5b04f1e$exports))), 'spectrum-InputGroup-field'),
+        inputClassName: (0, $XxzjX$reactspectrumutils.classNames)((0, ($parcel$interopDefault($2f86633ce5b04f1e$exports))), 'spectrum-InputGroup-input'),
+        validationIconClassName: (0, $XxzjX$reactspectrumutils.classNames)((0, ($parcel$interopDefault($2f86633ce5b04f1e$exports))), 'spectrum-InputGroup-input-validationIcon'),
+        isDisabled: isDisabled,
+        isQuiet: isQuiet,
+        validationState: validationState,
+        // loading circle should only be displayed if menu is open, if menuTrigger is "manual", or first time load (to stop circle from showing up when user selects an option)
+        // TODO: add special case for completionMode: complete as well
+        isLoading: showLoading && (isOpen || menuTrigger === 'manual' || loadingState === 'loading'),
+        loadingIndicator: loadingState != null && loadingCircle,
+        disableFocusRing: true
+    }), /*#__PURE__*/ (0, ($parcel$interopDefault($XxzjX$react))).createElement((0, $XxzjX$reactariainteractions.PressResponder), {
+        preventFocusOnPress: true,
+        isPressed: isOpen
+    }, /*#__PURE__*/ (0, ($parcel$interopDefault($XxzjX$react))).createElement((0, $XxzjX$reactspectrumbutton.FieldButton), {
+        ...triggerProps,
+        ref: triggerRef,
+        UNSAFE_className: (0, $XxzjX$reactspectrumutils.classNames)((0, ($parcel$interopDefault($2f86633ce5b04f1e$exports))), 'spectrum-FieldButton'),
+        isQuiet: isQuiet,
+        validationState: validationState
+    }, /*#__PURE__*/ (0, ($parcel$interopDefault($XxzjX$react))).createElement((0, ($parcel$interopDefault($XxzjX$spectrumiconsuiChevronDownMedium))), {
+        UNSAFE_className: (0, $XxzjX$reactspectrumutils.classNames)((0, ($parcel$interopDefault($2f86633ce5b04f1e$exports))), 'spectrum-Dropdown-chevron')
+    })))));
+});
+/**
+ * ComboBoxes combine a text entry with a picker menu, allowing users to filter longer lists to only the selections matching a query.
+ */ const $e4f518eb9b010873$export$72b9695b8216309a = /*#__PURE__*/ (0, ($parcel$interopDefault($XxzjX$react))).forwardRef($e4f518eb9b010873$var$ComboBox);
+
+
+//# sourceMappingURL=ComboBox.main.js.map

package/dist/ComboBox.main.js.map

@@ -0,0 +1 @@
+{"mappings":"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","sources":["packages/@react-spectrum/combobox/src/ComboBox.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 {AriaButtonProps} from '@react-types/button';\nimport ChevronDownMedium from '@spectrum-icons/ui/ChevronDownMedium';\nimport {\n  classNames,\n  dimensionValue,\n  useFocusableRef,\n  useIsMobileDevice,\n  useResizeObserver,\n  useUnwrapDOMRef\n} from '@react-spectrum/utils';\nimport comboboxStyles from './combobox.css';\nimport {DOMRefValue, FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {Field} from '@react-spectrum/label';\nimport {FieldButton} from '@react-spectrum/button';\nimport {FocusRing} from '@react-aria/focus';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {ListBoxBase, useListBoxLayout} from '@react-spectrum/listbox';\nimport {MobileComboBox} from './MobileComboBox';\nimport {Popover} from '@react-spectrum/overlays';\nimport {PressResponder, useHover} from '@react-aria/interactions';\nimport {ProgressCircle} from '@react-spectrum/progress';\nimport React, {\n  InputHTMLAttributes,\n  ReactElement,\n  RefObject,\n  useCallback,\n  useEffect,\n  useRef,\n  useState\n} from 'react';\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 {useComboBox} from '@react-aria/combobox';\nimport {useComboBoxState} from '@react-stately/combobox';\nimport {useFilter, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useFormProps} from '@react-spectrum/form';\nimport {useLayoutEffect} from '@react-aria/utils';\nimport {useProvider, useProviderProps} from '@react-spectrum/provider';\n\nfunction ComboBox<T extends object>(props: SpectrumComboBoxProps<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. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/ComboBox.html#help-text');\n  }\n\n  let isMobile = useIsMobileDevice();\n  if (isMobile) {\n    // menuTrigger=focus/manual don't apply to mobile combobox\n    return <MobileComboBox {...props} menuTrigger=\"input\" ref={ref} />;\n  } else {\n    return <ComboBoxBase {...props} ref={ref} />;\n  }\n}\n\nconst ComboBoxBase = React.forwardRef(function ComboBoxBase<T extends object>(props: SpectrumComboBoxProps<T>, ref: FocusableRef<HTMLElement>) {\n  let {\n    menuTrigger = 'input',\n    shouldFlip = true,\n    direction = 'bottom',\n    align = 'start',\n    isQuiet,\n    loadingState,\n    onLoadMore,\n    allowsCustomValue,\n    menuWidth: customMenuWidth,\n    name,\n    formValue = 'text'\n  } = props;\n  if (allowsCustomValue) {\n    formValue = 'text';\n  }\n\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/combobox');\n  let isAsync = loadingState != null;\n  let popoverRef = useRef<DOMRefValue<HTMLDivElement>>(undefined);\n  let unwrappedPopoverRef = useUnwrapDOMRef(popoverRef);\n  let buttonRef = useRef<FocusableRefValue<HTMLElement>>(undefined);\n  let unwrappedButtonRef = useUnwrapDOMRef(buttonRef);\n  let listBoxRef = useRef(undefined);\n  let inputRef = useRef<HTMLInputElement>(undefined);\n  // serve as the new popover `triggerRef` instead of `unwrappedButtonRef` before for better positioning.\n  let inputGroupRef = useRef<HTMLDivElement>(undefined);\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    }\n  );\n  let layout = useListBoxLayout();\n\n  let {buttonProps, inputProps, listBoxProps, labelProps, descriptionProps, errorMessageProps, isInvalid, validationErrors, validationDetails} = useComboBox(\n    {\n      ...props,\n      layoutDelegate: layout,\n      buttonRef: unwrappedButtonRef,\n      popoverRef: unwrappedPopoverRef,\n      listBoxRef,\n      inputRef: inputRef,\n      menuTrigger,\n      name: formValue === 'text' ? name : undefined\n    },\n    state\n  );\n\n  // Measure the width of the inputfield and the button to inform the width of the menu (below).\n  let [menuWidth, setMenuWidth] = useState(null);\n  let {scale} = useProvider();\n\n  let onResize = useCallback(() => {\n    if (unwrappedButtonRef.current && inputRef.current) {\n      let buttonWidth = unwrappedButtonRef.current.offsetWidth;\n      let inputWidth = inputRef.current.offsetWidth;\n      setMenuWidth(buttonWidth + inputWidth);\n    }\n  }, [unwrappedButtonRef, inputRef, setMenuWidth]);\n\n  useResizeObserver({\n    ref: domRef,\n    onResize: onResize\n  });\n\n  useLayoutEffect(onResize, [scale, onResize]);\n\n  let width = isQuiet ? null : 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        isInvalid={isInvalid}\n        validationErrors={validationErrors}\n        validationDetails={validationDetails}\n        labelProps={labelProps}\n        ref={domRef}>\n        <ComboBoxInput\n          {...props}\n          isOpen={state.isOpen}\n          loadingState={loadingState}\n          inputProps={inputProps}\n          inputRef={inputRef}\n          triggerProps={buttonProps}\n          triggerRef={buttonRef}\n          validationState={props.validationState || (isInvalid ? 'invalid' : null)}\n          ref={inputGroupRef} />\n      </Field>\n      {name && formValue === 'key' && <input type=\"hidden\" name={name} value={state.selectedKey ?? ''} />}\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={inputGroupRef}\n        scrollRef={listBoxRef}\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(comboboxStyles, 'no-results')}>\n              {loadingState === 'loading' ? stringFormatter.format('loading') :  stringFormatter.format('noResults')}\n            </span>\n          )} />\n      </Popover>\n    </>\n  );\n});\n\ninterface ComboBoxInputProps extends SpectrumComboBoxProps<unknown> {\n  inputProps: InputHTMLAttributes<HTMLInputElement>,\n  inputRef: RefObject<HTMLInputElement | HTMLTextAreaElement | null>,\n  triggerProps: AriaButtonProps,\n  triggerRef: RefObject<FocusableRefValue<HTMLElement> | null>,\n  style?: React.CSSProperties,\n  className?: string,\n  isOpen?: boolean\n}\n\nconst ComboBoxInput = React.forwardRef(function ComboBoxInput(props: ComboBoxInputProps, ref: RefObject<HTMLElement | null>) {\n  let {\n    isQuiet,\n    isDisabled,\n    validationState,\n    inputProps,\n    inputRef,\n    triggerProps,\n    triggerRef,\n    autoFocus,\n    style,\n    className,\n    loadingState,\n    isOpen,\n    menuTrigger\n  } = props;\n  let {hoverProps, isHovered} = useHover({});\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/combobox');\n  let timeout = useRef(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      )} />\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      clearTimeout(timeout.current);\n      timeout.current = null;\n    }\n\n    lastInputValue.current = inputValue;\n  }, [isLoading, showLoading, inputValue]);\n\n  useEffect(() => {\n    return () => {\n      clearTimeout(timeout.current);\n      timeout.current = null;\n    };\n  }, []);\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            className\n          )\n        }>\n        <TextFieldBase\n          inputProps={inputProps}\n          inputRef={inputRef}\n          UNSAFE_className={\n            classNames(\n              styles,\n              'spectrum-InputGroup-field'\n            )\n          }\n          inputClassName={\n            classNames(\n              styles,\n              'spectrum-InputGroup-input'\n            )\n          }\n          validationIconClassName={\n            classNames(\n              styles,\n              'spectrum-InputGroup-input-validationIcon'\n            )\n          }\n          isDisabled={isDisabled}\n          isQuiet={isQuiet}\n          validationState={validationState}\n          // loading circle should only be displayed if menu is open, if menuTrigger is \"manual\", or first time load (to stop circle from showing up when user selects an option)\n          // TODO: add special case for completionMode: complete as well\n          isLoading={showLoading && (isOpen || menuTrigger === 'manual' || loadingState === 'loading')}\n          loadingIndicator={loadingState != null && loadingCircle}\n          disableFocusRing />\n        <PressResponder preventFocusOnPress isPressed={isOpen}>\n          <FieldButton\n            {...triggerProps}\n            ref={triggerRef}\n            UNSAFE_className={\n              classNames(\n                styles,\n                'spectrum-FieldButton'\n              )\n            }\n            isQuiet={isQuiet}\n            validationState={validationState}>\n            <ChevronDownMedium UNSAFE_className={classNames(styles, 'spectrum-Dropdown-chevron')} />\n          </FieldButton>\n        </PressResponder>\n      </div>\n    </FocusRing>)\n  );\n});\n\n/**\n * ComboBoxes combine a text entry with a picker menu, allowing users to filter longer lists to only the selections matching a query.\n */\nconst _ComboBox = React.forwardRef(ComboBox) as <T>(props: SpectrumComboBoxProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;\nexport {_ComboBox as ComboBox};\n"],"names":[],"version":3,"file":"ComboBox.main.js.map"}

package/dist/ComboBox.mjs

@@ -0,0 +1,288 @@
+import "./combobox.4bcd8cdb.css";
+import $c3ZYr$combobox_cssmodulejs from "./combobox_css.mjs";
+import $c3ZYr$intlStringsmodulejs from "./intlStrings.mjs";
+import {MobileComboBox as $a1ae4cad4496428f$export$7637df911c069b4d} from "./MobileComboBox.mjs";
+import "./vars.963b3e04.css";
+import $c3ZYr$inputgroup_vars_cssmodulejs from "./inputgroup_vars_css.mjs";
+import "./vars.25f9ddd3.css";
+import $c3ZYr$textfield_vars_cssmodulejs from "./textfield_vars_css.mjs";
+import $c3ZYr$spectrumiconsuiChevronDownMedium from "@spectrum-icons/ui/ChevronDownMedium";
+import {useIsMobileDevice as $c3ZYr$useIsMobileDevice, useUnwrapDOMRef as $c3ZYr$useUnwrapDOMRef, useFocusableRef as $c3ZYr$useFocusableRef, useResizeObserver as $c3ZYr$useResizeObserver, dimensionValue as $c3ZYr$dimensionValue, classNames as $c3ZYr$classNames} from "@react-spectrum/utils";
+import {Field as $c3ZYr$Field} from "@react-spectrum/label";
+import {FieldButton as $c3ZYr$FieldButton} from "@react-spectrum/button";
+import {FocusRing as $c3ZYr$FocusRing} from "@react-aria/focus";
+import {useListBoxLayout as $c3ZYr$useListBoxLayout, ListBoxBase as $c3ZYr$ListBoxBase} from "@react-spectrum/listbox";
+import {Popover as $c3ZYr$Popover} from "@react-spectrum/overlays";
+import {useHover as $c3ZYr$useHover, PressResponder as $c3ZYr$PressResponder} from "@react-aria/interactions";
+import {ProgressCircle as $c3ZYr$ProgressCircle} from "@react-spectrum/progress";
+import $c3ZYr$react, {useRef as $c3ZYr$useRef, useState as $c3ZYr$useState, useCallback as $c3ZYr$useCallback, useEffect as $c3ZYr$useEffect} from "react";
+import {TextFieldBase as $c3ZYr$TextFieldBase} from "@react-spectrum/textfield";
+import {useComboBox as $c3ZYr$useComboBox} from "@react-aria/combobox";
+import {useComboBoxState as $c3ZYr$useComboBoxState} from "@react-stately/combobox";
+import {useLocalizedStringFormatter as $c3ZYr$useLocalizedStringFormatter, useFilter as $c3ZYr$useFilter} from "@react-aria/i18n";
+import {useFormProps as $c3ZYr$useFormProps} from "@react-spectrum/form";
+import {useLayoutEffect as $c3ZYr$useLayoutEffect} from "@react-aria/utils";
+import {useProviderProps as $c3ZYr$useProviderProps, useProvider as $c3ZYr$useProvider} from "@react-spectrum/provider";
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+function $2289f375e813f187$var$ComboBox(props, ref) {
+    props = (0, $c3ZYr$useProviderProps)(props);
+    props = (0, $c3ZYr$useFormProps)(props);
+    if (props.placeholder) console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/ComboBox.html#help-text');
+    let isMobile = (0, $c3ZYr$useIsMobileDevice)();
+    if (isMobile) // menuTrigger=focus/manual don't apply to mobile combobox
+    return /*#__PURE__*/ (0, $c3ZYr$react).createElement((0, $a1ae4cad4496428f$export$7637df911c069b4d), {
+        ...props,
+        menuTrigger: "input",
+        ref: ref
+    });
+    else return /*#__PURE__*/ (0, $c3ZYr$react).createElement($2289f375e813f187$var$ComboBoxBase, {
+        ...props,
+        ref: ref
+    });
+}
+const $2289f375e813f187$var$ComboBoxBase = /*#__PURE__*/ (0, $c3ZYr$react).forwardRef(function ComboBoxBase(props, ref) {
+    let { menuTrigger: menuTrigger = 'input', shouldFlip: shouldFlip = true, direction: direction = 'bottom', align: align = 'start', isQuiet: isQuiet, loadingState: loadingState, onLoadMore: onLoadMore, allowsCustomValue: allowsCustomValue, menuWidth: customMenuWidth, name: name, formValue: formValue = 'text' } = props;
+    if (allowsCustomValue) formValue = 'text';
+    let stringFormatter = (0, $c3ZYr$useLocalizedStringFormatter)((0, ($parcel$interopDefault($c3ZYr$intlStringsmodulejs))), '@react-spectrum/combobox');
+    let isAsync = loadingState != null;
+    let popoverRef = (0, $c3ZYr$useRef)(undefined);
+    let unwrappedPopoverRef = (0, $c3ZYr$useUnwrapDOMRef)(popoverRef);
+    let buttonRef = (0, $c3ZYr$useRef)(undefined);
+    let unwrappedButtonRef = (0, $c3ZYr$useUnwrapDOMRef)(buttonRef);
+    let listBoxRef = (0, $c3ZYr$useRef)(undefined);
+    let inputRef = (0, $c3ZYr$useRef)(undefined);
+    // serve as the new popover `triggerRef` instead of `unwrappedButtonRef` before for better positioning.
+    let inputGroupRef = (0, $c3ZYr$useRef)(undefined);
+    let domRef = (0, $c3ZYr$useFocusableRef)(ref, inputRef);
+    let { contains: contains } = (0, $c3ZYr$useFilter)({
+        sensitivity: 'base'
+    });
+    let state = (0, $c3ZYr$useComboBoxState)({
+        ...props,
+        defaultFilter: contains,
+        allowsEmptyCollection: isAsync
+    });
+    let layout = (0, $c3ZYr$useListBoxLayout)();
+    let { buttonProps: buttonProps, inputProps: inputProps, listBoxProps: listBoxProps, labelProps: labelProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps, isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = (0, $c3ZYr$useComboBox)({
+        ...props,
+        layoutDelegate: layout,
+        buttonRef: unwrappedButtonRef,
+        popoverRef: unwrappedPopoverRef,
+        listBoxRef: listBoxRef,
+        inputRef: inputRef,
+        menuTrigger: menuTrigger,
+        name: formValue === 'text' ? name : undefined
+    }, state);
+    // Measure the width of the inputfield and the button to inform the width of the menu (below).
+    let [menuWidth, setMenuWidth] = (0, $c3ZYr$useState)(null);
+    let { scale: scale } = (0, $c3ZYr$useProvider)();
+    let onResize = (0, $c3ZYr$useCallback)(()=>{
+        if (unwrappedButtonRef.current && inputRef.current) {
+            let buttonWidth = unwrappedButtonRef.current.offsetWidth;
+            let inputWidth = inputRef.current.offsetWidth;
+            setMenuWidth(buttonWidth + inputWidth);
+        }
+    }, [
+        unwrappedButtonRef,
+        inputRef,
+        setMenuWidth
+    ]);
+    (0, $c3ZYr$useResizeObserver)({
+        ref: domRef,
+        onResize: onResize
+    });
+    (0, $c3ZYr$useLayoutEffect)(onResize, [
+        scale,
+        onResize
+    ]);
+    let width = isQuiet ? null : menuWidth;
+    let style = {
+        width: customMenuWidth ? (0, $c3ZYr$dimensionValue)(customMenuWidth) : width,
+        minWidth: isQuiet ? `calc(${menuWidth}px + calc(2 * var(--spectrum-dropdown-quiet-offset)))` : menuWidth
+    };
+    var _state_selectedKey;
+    return /*#__PURE__*/ (0, $c3ZYr$react).createElement((0, $c3ZYr$react).Fragment, null, /*#__PURE__*/ (0, $c3ZYr$react).createElement((0, $c3ZYr$Field), {
+        ...props,
+        descriptionProps: descriptionProps,
+        errorMessageProps: errorMessageProps,
+        isInvalid: isInvalid,
+        validationErrors: validationErrors,
+        validationDetails: validationDetails,
+        labelProps: labelProps,
+        ref: domRef
+    }, /*#__PURE__*/ (0, $c3ZYr$react).createElement($2289f375e813f187$var$ComboBoxInput, {
+        ...props,
+        isOpen: state.isOpen,
+        loadingState: loadingState,
+        inputProps: inputProps,
+        inputRef: inputRef,
+        triggerProps: buttonProps,
+        triggerRef: buttonRef,
+        validationState: props.validationState || (isInvalid ? 'invalid' : null),
+        ref: inputGroupRef
+    })), name && formValue === 'key' && /*#__PURE__*/ (0, $c3ZYr$react).createElement("input", {
+        type: "hidden",
+        name: name,
+        value: (_state_selectedKey = state.selectedKey) !== null && _state_selectedKey !== void 0 ? _state_selectedKey : ''
+    }), /*#__PURE__*/ (0, $c3ZYr$react).createElement((0, $c3ZYr$Popover), {
+        state: state,
+        UNSAFE_style: style,
+        UNSAFE_className: (0, $c3ZYr$classNames)((0, ($parcel$interopDefault($c3ZYr$inputgroup_vars_cssmodulejs))), 'spectrum-InputGroup-popover', {
+            'spectrum-InputGroup-popover--quiet': isQuiet
+        }),
+        ref: popoverRef,
+        triggerRef: inputGroupRef,
+        scrollRef: listBoxRef,
+        placement: `${direction} ${align}`,
+        hideArrow: true,
+        isNonModal: true,
+        shouldFlip: shouldFlip
+    }, /*#__PURE__*/ (0, $c3ZYr$react).createElement((0, $c3ZYr$ListBoxBase), {
+        ...listBoxProps,
+        ref: listBoxRef,
+        disallowEmptySelection: true,
+        autoFocus: state.focusStrategy,
+        shouldSelectOnPressUp: true,
+        focusOnPointerEnter: true,
+        layout: layout,
+        state: state,
+        shouldUseVirtualFocus: true,
+        isLoading: loadingState === 'loading' || loadingState === 'loadingMore',
+        showLoadingSpinner: loadingState === 'loadingMore',
+        onLoadMore: onLoadMore,
+        renderEmptyState: ()=>isAsync && /*#__PURE__*/ (0, $c3ZYr$react).createElement("span", {
+                className: (0, $c3ZYr$classNames)((0, ($parcel$interopDefault($c3ZYr$combobox_cssmodulejs))), 'no-results')
+            }, loadingState === 'loading' ? stringFormatter.format('loading') : stringFormatter.format('noResults'))
+    })));
+});
+const $2289f375e813f187$var$ComboBoxInput = /*#__PURE__*/ (0, $c3ZYr$react).forwardRef(function ComboBoxInput(props, ref) {
+    let { isQuiet: isQuiet, isDisabled: isDisabled, validationState: validationState, inputProps: inputProps, inputRef: inputRef, triggerProps: triggerProps, triggerRef: triggerRef, autoFocus: autoFocus, style: style, className: className, loadingState: loadingState, isOpen: isOpen, menuTrigger: menuTrigger } = props;
+    let { hoverProps: hoverProps, isHovered: isHovered } = (0, $c3ZYr$useHover)({});
+    let stringFormatter = (0, $c3ZYr$useLocalizedStringFormatter)((0, ($parcel$interopDefault($c3ZYr$intlStringsmodulejs))), '@react-spectrum/combobox');
+    let timeout = (0, $c3ZYr$useRef)(null);
+    let [showLoading, setShowLoading] = (0, $c3ZYr$useState)(false);
+    let loadingCircle = /*#__PURE__*/ (0, $c3ZYr$react).createElement((0, $c3ZYr$ProgressCircle), {
+        "aria-label": stringFormatter.format('loading'),
+        size: "S",
+        isIndeterminate: true,
+        UNSAFE_className: (0, $c3ZYr$classNames)((0, ($parcel$interopDefault($c3ZYr$textfield_vars_cssmodulejs))), 'spectrum-Textfield-circleLoader', (0, $c3ZYr$classNames)((0, ($parcel$interopDefault($c3ZYr$inputgroup_vars_cssmodulejs))), 'spectrum-InputGroup-input-circleLoader'))
+    });
+    let isLoading = loadingState === 'loading' || loadingState === 'filtering';
+    let inputValue = inputProps.value;
+    let lastInputValue = (0, $c3ZYr$useRef)(inputValue);
+    (0, $c3ZYr$useEffect)(()=>{
+        if (isLoading && !showLoading) {
+            if (timeout.current === null) timeout.current = setTimeout(()=>{
+                setShowLoading(true);
+            }, 500);
+            // If user is typing, clear the timer and restart since it is a new request
+            if (inputValue !== lastInputValue.current) {
+                clearTimeout(timeout.current);
+                timeout.current = setTimeout(()=>{
+                    setShowLoading(true);
+                }, 500);
+            }
+        } else if (!isLoading) {
+            // If loading is no longer happening, clear any timers and hide the loading circle
+            setShowLoading(false);
+            clearTimeout(timeout.current);
+            timeout.current = null;
+        }
+        lastInputValue.current = inputValue;
+    }, [
+        isLoading,
+        showLoading,
+        inputValue
+    ]);
+    (0, $c3ZYr$useEffect)(()=>{
+        return ()=>{
+            clearTimeout(timeout.current);
+            timeout.current = null;
+        };
+    }, []);
+    return /*#__PURE__*/ (0, $c3ZYr$react).createElement((0, $c3ZYr$FocusRing), {
+        within: true,
+        isTextInput: true,
+        focusClass: (0, $c3ZYr$classNames)((0, ($parcel$interopDefault($c3ZYr$inputgroup_vars_cssmodulejs))), 'is-focused'),
+        focusRingClass: (0, $c3ZYr$classNames)((0, ($parcel$interopDefault($c3ZYr$inputgroup_vars_cssmodulejs))), 'focus-ring'),
+        autoFocus: autoFocus
+    }, /*#__PURE__*/ (0, $c3ZYr$react).createElement("div", {
+        ...hoverProps,
+        ref: ref,
+        style: style,
+        className: (0, $c3ZYr$classNames)((0, ($parcel$interopDefault($c3ZYr$inputgroup_vars_cssmodulejs))), 'spectrum-InputGroup', {
+            'spectrum-InputGroup--quiet': isQuiet,
+            'is-disabled': isDisabled,
+            'spectrum-InputGroup--invalid': validationState === 'invalid' && !isDisabled,
+            'is-hovered': isHovered
+        }, className)
+    }, /*#__PURE__*/ (0, $c3ZYr$react).createElement((0, $c3ZYr$TextFieldBase), {
+        inputProps: inputProps,
+        inputRef: inputRef,
+        UNSAFE_className: (0, $c3ZYr$classNames)((0, ($parcel$interopDefault($c3ZYr$inputgroup_vars_cssmodulejs))), 'spectrum-InputGroup-field'),
+        inputClassName: (0, $c3ZYr$classNames)((0, ($parcel$interopDefault($c3ZYr$inputgroup_vars_cssmodulejs))), 'spectrum-InputGroup-input'),
+        validationIconClassName: (0, $c3ZYr$classNames)((0, ($parcel$interopDefault($c3ZYr$inputgroup_vars_cssmodulejs))), 'spectrum-InputGroup-input-validationIcon'),
+        isDisabled: isDisabled,
+        isQuiet: isQuiet,
+        validationState: validationState,
+        // loading circle should only be displayed if menu is open, if menuTrigger is "manual", or first time load (to stop circle from showing up when user selects an option)
+        // TODO: add special case for completionMode: complete as well
+        isLoading: showLoading && (isOpen || menuTrigger === 'manual' || loadingState === 'loading'),
+        loadingIndicator: loadingState != null && loadingCircle,
+        disableFocusRing: true
+    }), /*#__PURE__*/ (0, $c3ZYr$react).createElement((0, $c3ZYr$PressResponder), {
+        preventFocusOnPress: true,
+        isPressed: isOpen
+    }, /*#__PURE__*/ (0, $c3ZYr$react).createElement((0, $c3ZYr$FieldButton), {
+        ...triggerProps,
+        ref: triggerRef,
+        UNSAFE_className: (0, $c3ZYr$classNames)((0, ($parcel$interopDefault($c3ZYr$inputgroup_vars_cssmodulejs))), 'spectrum-FieldButton'),
+        isQuiet: isQuiet,
+        validationState: validationState
+    }, /*#__PURE__*/ (0, $c3ZYr$react).createElement((0, $c3ZYr$spectrumiconsuiChevronDownMedium), {
+        UNSAFE_className: (0, $c3ZYr$classNames)((0, ($parcel$interopDefault($c3ZYr$inputgroup_vars_cssmodulejs))), 'spectrum-Dropdown-chevron')
+    })))));
+});
+/**
+ * ComboBoxes combine a text entry with a picker menu, allowing users to filter longer lists to only the selections matching a query.
+ */ const $2289f375e813f187$export$72b9695b8216309a = /*#__PURE__*/ (0, $c3ZYr$react).forwardRef($2289f375e813f187$var$ComboBox);
+
+
+export {$2289f375e813f187$export$72b9695b8216309a as ComboBox};
+//# sourceMappingURL=ComboBox.module.js.map