@adobe/react-spectrum 3.47.1 → 3.47.2

package/dist/private/colorhandle_vars.css

@@ -32,24 +32,24 @@
   border-style: solid;
   display: block;
   position: absolute;
-}
 
-.wssHda_spectrum-ColorHandle, .wssHda_spectrum-ColorHandle:after {
-  border-radius: 100%;
-}
+  &, &:after {
+    border-radius: 100%;
+  }
 
-.wssHda_spectrum-ColorHandle:after {
-  content: "";
-  left: calc(50% - calc(var(--spectrum-global-dimension-size-300) / 2));
-  top: calc(50% - calc(var(--spectrum-global-dimension-size-300) / 2));
-  width: var(--spectrum-global-dimension-size-300);
-  height: var(--spectrum-global-dimension-size-300);
-  display: block;
-  position: absolute;
-}
+  &:after {
+    content: "";
+    left: calc(50% - calc(var(--spectrum-global-dimension-size-300) / 2));
+    top: calc(50% - calc(var(--spectrum-global-dimension-size-300) / 2));
+    width: var(--spectrum-global-dimension-size-300);
+    height: var(--spectrum-global-dimension-size-300);
+    display: block;
+    position: absolute;
+  }
 
-.wssHda_spectrum-ColorHandle.wssHda_is-disabled {
-  pointer-events: none;
+  &.wssHda_is-disabled {
+    pointer-events: none;
+  }
 }
 
 .wssHda_spectrum-ColorControl-handle--focused {
@@ -70,16 +70,16 @@
   box-shadow: 0 0 0 var(--spectrum-colorhandle-outer-border-size, var(--spectrum-global-dimension-static-size-10))
     #0000006b;
   background: repeating-conic-gradient(#e6e6e6 0% 25%, #fff 0% 50%) 50% / 16px 16px;
-}
 
-.wssHda_spectrum-ColorHandle.wssHda_is-disabled {
-  border-color: var(--spectrum-colorhandle-inner-border-color-disabled, var(--spectrum-global-color-gray-400));
-  background: var(--spectrum-colorhandle-fill-color-disabled, var(--spectrum-global-color-gray-300));
-  box-shadow: none;
-}
+  &.wssHda_is-disabled {
+    border-color: var(--spectrum-colorhandle-inner-border-color-disabled, var(--spectrum-global-color-gray-400));
+    background: var(--spectrum-colorhandle-fill-color-disabled, var(--spectrum-global-color-gray-300));
+    box-shadow: none;
 
-.wssHda_spectrum-ColorHandle.wssHda_is-disabled .wssHda_spectrum-ColorHandle-color {
-  display: none;
+    & .wssHda_spectrum-ColorHandle-color {
+      display: none;
+    }
+  }
 }
 
 .wssHda_spectrum-ColorHandle-color {

package/dist/private/colorloupe_vars.css

@@ -9,12 +9,12 @@
   pointer-events: none;
   transition: transform .1s ease-in-out, opacity .125s ease-in-out;
   position: absolute;
-}
 
-.m5ArDa_spectrum-ColorLoupe.m5ArDa_is-open {
-  opacity: 1;
-  z-index: 2;
-  transform: translate(0);
+  &.m5ArDa_is-open {
+    opacity: 1;
+    z-index: 2;
+    transform: translate(0);
+  }
 }
 
 .m5ArDa_spectrum-ColorLoupe-outer {

package/dist/private/colorloupe_vars.css.map

@@ -1 +1 @@
-{"mappings":"AAYA;;;;;;;;;;;;;AA0BE;;;;;;AAOF;;;;;;AASA;;;;AAIA;;;;AAIA;EACE","sources":["packages/@adobe/spectrum-css-temp/components/colorloupe/vars.css"],"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\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"colorloupe_vars.css.map"}
+{"mappings":"AAYA;;;;;;;;;;;;EA0BE;;;;;;;AAOF;;;;;;AASA;;;;AAIA;;;;AAIA;EACE","sources":["packages/@adobe/spectrum-css-temp/components/colorloupe/vars.css"],"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\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"colorloupe_vars.css.map"}

package/dist/private/colorslider_vars.css

@@ -30,55 +30,55 @@
   cursor: default;
   display: block;
   position: relative;
-}
 
-.A7dsgq_spectrum-ColorSlider .A7dsgq_spectrum-ColorSlider-handle.A7dsgq_spectrum-ColorSlider-handle {
-  margin: 0;
-}
+  & .A7dsgq_spectrum-ColorSlider-handle.A7dsgq_spectrum-ColorSlider-handle {
+    margin: 0;
+  }
 
-.A7dsgq_spectrum-ColorSlider:before {
-  content: "";
-  z-index: -1;
-  border-radius: var(--spectrum-colorslider-border-radius, var(--spectrum-alias-border-radius-regular));
-  background-size: var(--spectrum-global-dimension-static-size-200, 16px)
+  &:before {
+    content: "";
+    z-index: -1;
+    border-radius: var(--spectrum-colorslider-border-radius, var(--spectrum-alias-border-radius-regular));
+    background-size: var(--spectrum-global-dimension-static-size-200, 16px)
       var(--spectrum-global-dimension-static-size-200, 16px);
-  background-position: 0 0,
+    background-position: 0 0,
       0 var(--spectrum-global-dimension-static-size-100, 8px),
       var(--spectrum-global-dimension-static-size-100, 8px)
         calc(-1 * var(--spectrum-global-dimension-static-size-100, 8px)),
       calc(-1 * var(--spectrum-global-dimension-static-size-100, 8px)) 0;
-  position: absolute;
-  inset: 0;
-}
+    position: absolute;
+    inset: 0;
+  }
 
-.A7dsgq_spectrum-ColorSlider.A7dsgq_is-focused {
-  z-index: 2;
-}
+  &.A7dsgq_is-focused {
+    z-index: 2;
+  }
 
-.A7dsgq_spectrum-ColorSlider.A7dsgq_is-disabled {
-  pointer-events: none;
+  &.A7dsgq_is-disabled {
+    pointer-events: none;
+  }
 }
 
 .A7dsgq_spectrum-ColorSlider--vertical {
   width: var(--spectrum-colorslider-vertical-width, var(--spectrum-global-dimension-size-300));
   flex: 1;
   display: inline-block;
-}
 
-.A7dsgq_spectrum-ColorSlider--vertical .A7dsgq_spectrum-ColorSlider-handle {
-  top: 0;
-  left: 50%;
+  & .A7dsgq_spectrum-ColorSlider-handle {
+    top: 0;
+    left: 50%;
+  }
 }
 
 .A7dsgq_spectrum-ColorSlider-handle {
   top: 50%;
   left: 0;
-}
 
-.A7dsgq_spectrum-ColorSlider-handle:after {
-  width: var(--spectrum-global-dimension-size-300);
-  height: var(--spectrum-global-dimension-size-300);
-  border-radius: 0%;
+  &:after {
+    width: var(--spectrum-global-dimension-size-300);
+    height: var(--spectrum-global-dimension-size-300);
+    border-radius: 0%;
+  }
 }
 
 .A7dsgq_spectrum-ColorSlider-labelContainer {
@@ -103,16 +103,16 @@
   background-color: var(--spectrum-global-color-static-white, #fff);
   box-shadow: inset 0 0 0 var(--spectrum-colorslider-border-size, var(--spectrum-alias-border-size-thin))
     var(--spectrum-colorarea-border-color);
-}
 
-.A7dsgq_spectrum-ColorSlider:before {
-  background: repeating-conic-gradient(#e6e6e6 0% 25%, #fff 0% 50%) 0% / 16px 16px;
-}
+  &:before {
+    background: repeating-conic-gradient(#e6e6e6 0% 25%, #fff 0% 50%) 0% / 16px 16px;
+  }
 
-.A7dsgq_spectrum-ColorSlider.A7dsgq_is-disabled {
-  box-shadow: inset 0 0 0 var(--spectrum-colorslider-border-size, var(--spectrum-alias-border-size-thin))
+  &.A7dsgq_is-disabled {
+    box-shadow: inset 0 0 0 var(--spectrum-colorslider-border-size, var(--spectrum-alias-border-size-thin))
       var(--spectrum-colorslider-border-color-disabled, var(--spectrum-global-color-gray-300));
-  background: var(--spectrum-colorslider-fill-color-disabled, var(--spectrum-global-color-gray-300)) !important;
+    background: var(--spectrum-colorslider-fill-color-disabled, var(--spectrum-global-color-gray-300)) !important;
+  }
 }
 
 @media (forced-colors: active) {

package/dist/private/colorslider_vars.css.map

@@ -1 +1 @@
-{"mappings":"AAYA;;;;;;;;;;;;AAYA;;;;AAIA;;;;;;AAMA;;;;;;;;;;;;AAaE;;;;AAKA;;;;;;;;;;;;;;;;;;;;;;;;AAwCF;;;;;AAIE;;;;;;;;;;;;;;;;;;;;;;;;AA6BF;;;;;AAKE;;;;;;;;;AAYA","sources":["packages/@adobe/spectrum-css-temp/components/colorslider/vars.css"],"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\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"colorslider_vars.css.map"}
+{"mappings":"AAYA;;;;;;;;;;;;AAYA;;;;AAIA;;;;;;AAMA;;;;;;;;;;;EAaE;;;;EAKA;;;;;;;;;;;;;;EA4BF;;;;;AAME;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCF;;;;;;;;;;;;;EAgBA","sources":["packages/@adobe/spectrum-css-temp/components/colorslider/vars.css"],"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\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"colorslider_vars.css.map"}

package/dist/private/colorwheel_vars.css

@@ -21,22 +21,22 @@
   border-radius: 100%;
   display: block;
   position: relative;
-}
 
-.ogcnoG_spectrum-ColorWheel.ogcnoG_spectrum-ColorWheel .ogcnoG_spectrum-ColorWheel-handle {
-  margin: 0;
-}
+  & .ogcnoG_spectrum-ColorWheel-handle {
+    margin: 0;
+  }
 
-.ogcnoG_spectrum-ColorWheel.ogcnoG_spectrum-ColorWheel.ogcnoG_is-focused {
-  z-index: 2;
-}
+  &.ogcnoG_is-focused {
+    z-index: 2;
+  }
 
-.ogcnoG_spectrum-ColorWheel.ogcnoG_spectrum-ColorWheel.ogcnoG_is-disabled {
-  pointer-events: none;
-}
+  &.ogcnoG_is-disabled {
+    pointer-events: none;
+  }
 
-.ogcnoG_spectrum-ColorWheel.ogcnoG_spectrum-ColorWheel.ogcnoG_is-dragged {
-  z-index: 2;
+  &.ogcnoG_is-dragged {
+    z-index: 2;
+  }
 }
 
 .ogcnoG_spectrum-ColorWheel-gradient {
@@ -44,41 +44,47 @@
   width: calc(var(--spectrum-global-dimension-size-125) * 16);
   height: calc(var(--spectrum-global-dimension-size-125) * 16);
   position: relative;
-}
 
-.ogcnoG_spectrum-ColorWheel-gradient:before, .ogcnoG_spectrum-ColorWheel-gradient:after {
-  content: "";
-  border-width: var(--spectrum-colorwheel-border-size, var(--spectrum-alias-border-size-thin));
-  border-style: solid;
-  border-radius: 100%;
-  position: absolute;
-}
+  &:before, &:after {
+    content: "";
+    border-width: var(--spectrum-colorwheel-border-size, var(--spectrum-alias-border-size-thin));
+    border-style: solid;
+    border-radius: 100%;
+    position: absolute;
+  }
 
-.ogcnoG_spectrum-ColorWheel-gradient:before {
-  inset: 0;
-}
+  &:before {
+    inset: 0;
+  }
 
-.ogcnoG_spectrum-ColorWheel-gradient:after {
-  top: calc(var(--spectrum-colorwheel-track-width, var(--spectrum-global-dimension-size-300)) - var(--spectrum-colorwheel-border-size, var(--spectrum-alias-border-size-thin)));
-  left: calc(var(--spectrum-colorwheel-track-width, var(--spectrum-global-dimension-size-300)) - var(--spectrum-colorwheel-border-size, var(--spectrum-alias-border-size-thin)));
-  bottom: calc(var(--spectrum-colorwheel-track-width, var(--spectrum-global-dimension-size-300)) - var(--spectrum-colorwheel-border-size, var(--spectrum-alias-border-size-thin)));
-  right: calc(var(--spectrum-colorwheel-track-width, var(--spectrum-global-dimension-size-300)) - var(--spectrum-colorwheel-border-size, var(--spectrum-alias-border-size-thin)));
+  &:after {
+    top: calc(var(--spectrum-colorwheel-track-width, var(--spectrum-global-dimension-size-300)) - var(--spectrum-colorwheel-border-size, var(--spectrum-alias-border-size-thin)));
+    left: calc(var(--spectrum-colorwheel-track-width, var(--spectrum-global-dimension-size-300)) - var(--spectrum-colorwheel-border-size, var(--spectrum-alias-border-size-thin)));
+    bottom: calc(var(--spectrum-colorwheel-track-width, var(--spectrum-global-dimension-size-300)) - var(--spectrum-colorwheel-border-size, var(--spectrum-alias-border-size-thin)));
+    right: calc(var(--spectrum-colorwheel-track-width, var(--spectrum-global-dimension-size-300)) - var(--spectrum-colorwheel-border-size, var(--spectrum-alias-border-size-thin)));
+  }
 }
 
-.ogcnoG_spectrum-ColorWheel.ogcnoG_is-disabled .ogcnoG_spectrum-ColorWheel-gradient {
-  background: var(--spectrum-colorwheel-fill-color-disabled, var(--spectrum-global-color-gray-300)) !important;
-}
+.ogcnoG_spectrum-ColorWheel {
+  &.ogcnoG_is-disabled {
+    & .ogcnoG_spectrum-ColorWheel-gradient {
+      background: var(--spectrum-colorwheel-fill-color-disabled, var(--spectrum-global-color-gray-300)) !important;
 
-.ogcnoG_spectrum-ColorWheel.ogcnoG_is-disabled .ogcnoG_spectrum-ColorWheel-gradient:before, .ogcnoG_spectrum-ColorWheel.ogcnoG_is-disabled .ogcnoG_spectrum-ColorWheel-gradient:after {
-  border-color: var(--spectrum-colorwheel-border-color-disabled, var(--spectrum-global-color-gray-300));
-}
+      &:before, &:after {
+        border-color: var(--spectrum-colorwheel-border-color-disabled, var(--spectrum-global-color-gray-300));
+      }
+    }
 
-.ogcnoG_spectrum-ColorWheel.ogcnoG_is-disabled .ogcnoG_spectrum-ColorWheel-segment {
-  display: none;
+    & .ogcnoG_spectrum-ColorWheel-segment {
+      display: none;
+    }
+  }
 }
 
-.ogcnoG_spectrum-ColorWheel-gradient:before, .ogcnoG_spectrum-ColorWheel-gradient:after {
-  border-color: var(--spectrum-colorarea-border-color);
+.ogcnoG_spectrum-ColorWheel-gradient {
+  &:before, &:after {
+    border-color: var(--spectrum-colorarea-border-color);
+  }
 }
 
 @media (forced-colors: active) {

package/dist/private/colorwheel_vars.css.map

@@ -1 +1 @@
-{"mappings":"AAcA;;;;;;;;;;;;AAcA;;;;;;;;;;;;;AAcE;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAMF;;;;;;;AAME;;;;;;;;AASA;;;;AAOA;;;;;;;AAcE;;;;AAGE;;;;AAOF;;;;AAOF;;;;AAMF;EACE","sources":["packages/@adobe/spectrum-css-temp/components/colorwheel/vars.css"],"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\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"colorwheel_vars.css.map"}
+{"mappings":"AAcA;;;;;;;;;;;;AAcA;;;;;;;;;;;;EAcE;;;;EAIA;;;;EAIA;;;;EAIA;;;;;AAMF;;;;;;EAME;;;;;;;;EASA;;;;EAOA;;;;;;;;AAYF;EACE;IACE;;;MAGE;;;;;IAOF;;;;;;AAMJ;EACE;;;;;AAMF;EACE","sources":["packages/@adobe/spectrum-css-temp/components/colorwheel/vars.css"],"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\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"colorwheel_vars.css.map"}

package/dist/private/combobox/ComboBox.cjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/combobox/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-aria/useButton';\n\nimport {AriaComboBoxProps, useComboBox} from 'react-aria/useComboBox';\nimport {\n  AsyncLoadable,\n  DimensionValue,\n  DOMRefValue,\n  FocusableRef,\n  FocusableRefValue,\n  LoadingState,\n  SingleSelection,\n  SpectrumFieldValidation,\n  SpectrumLabelableProps,\n  SpectrumTextInputBase,\n  StyleProps\n} from '@react-types/shared';\nimport ChevronDownMedium from '@spectrum-icons/ui/ChevronDownMedium';\nimport {classNames} from '../utils/classNames';\nimport comboboxStyles from './combobox.css';\nimport {\n  ComboBoxValidationValue,\n  MenuTriggerAction,\n  useComboBoxState\n} from 'react-stately/useComboBoxState';\nimport {dimensionValue} from '../utils/styleProps';\nimport {Field} from '../label/Field';\nimport {FieldButton} from '../button/FieldButton';\nimport {FocusRing} from 'react-aria/FocusRing';\nimport intlMessages from '../../intl/combobox/*.json';\nimport {ListBoxBase, useListBoxLayout} from '../listbox/ListBoxBase';\nimport {MobileComboBox} from './MobileComboBox';\n// @ts-ignore\nimport {Popover} from '../overlays/Popover';\nimport {PressResponder} from 'react-aria/private/interactions/PressResponder';\nimport {ProgressCircle} from '../progress/ProgressCircle';\nimport React, {\n  ForwardedRef,\n  InputHTMLAttributes,\n  ReactElement,\n  RefObject,\n  useCallback,\n  useEffect,\n  useRef,\n  useState\n} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/inputgroup/vars.css';\nimport {TextFieldBase} from '../textfield/TextFieldBase';\nimport textfieldStyles from '@adobe/spectrum-css-temp/components/textfield/vars.css';\nimport {useFilter} from 'react-aria/useFilter';\nimport {useFocusableRef, useUnwrapDOMRef} from '../utils/useDOMRef';\nimport {useFormProps} from '../form/Form';\nimport {useHover} from 'react-aria/useHover';\nimport {useIsMobileDevice} from '../utils/useIsMobileDevice';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useProvider, useProviderProps} from '../provider/Provider';\nimport {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';\n\nexport interface SpectrumComboBoxProps<T>\n  extends\n    SpectrumTextInputBase,\n    Omit<\n      AriaComboBoxProps<T>,\n      | 'menuTrigger'\n      | 'isInvalid'\n      | 'validationState'\n      | 'selectionMode'\n      | 'selectedKey'\n      | 'defaultSelectedKey'\n      | 'onSelectionChange'\n      | 'value'\n      | 'defaultValue'\n      | 'onChange'\n    >,\n    Omit<SingleSelection, 'disallowEmptySelection'>,\n    SpectrumFieldValidation<ComboBoxValidationValue>,\n    SpectrumLabelableProps,\n    StyleProps,\n    Omit<AsyncLoadable, 'isLoading'> {\n  /**\n   * The interaction required to display the ComboBox menu. Note that this prop has no effect on the\n   * mobile ComboBox experience.\n   *\n   * @default 'input'\n   */\n  menuTrigger?: MenuTriggerAction;\n  /** Whether the ComboBox should be displayed with a quiet style. */\n  isQuiet?: boolean;\n  /**\n   * Alignment of the menu relative to the input target.\n   *\n   * @default 'start'\n   */\n  align?: 'start' | 'end';\n  /**\n   * Direction the menu will render relative to the ComboBox.\n   *\n   * @default 'bottom'\n   */\n  direction?: 'bottom' | 'top';\n  /**\n   * The current loading state of the ComboBox. Determines whether or not the progress circle should\n   * be shown.\n   */\n  loadingState?: LoadingState;\n  /**\n   * Whether the menu should automatically flip direction when space is limited.\n   *\n   * @default true\n   */\n  shouldFlip?: boolean;\n  /**\n   * Width of the menu. By default, matches width of the combobox. Note that the minimum width of\n   * the dropdown is always equal to the combobox's width.\n   */\n  menuWidth?: DimensionValue;\n  /**\n   * Whether the text or key of the selected item is submitted as part of an HTML form. When\n   * `allowsCustomValue` is `true`, this option does not apply and the text is always submitted.\n   *\n   * @default 'text'\n   */\n  formValue?: 'text' | 'key';\n}\n\n/**\n * ComboBoxes combine a text entry with a picker menu, allowing users to filter longer lists to only\n * the selections matching a query.\n */\nexport const ComboBox = React.forwardRef(function ComboBox<T extends object>(\n  props: SpectrumComboBoxProps<T>,\n  ref: FocusableRef<HTMLElement>\n) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n\n  let hasWarned = useRef(false);\n  useEffect(() => {\n    if (props.placeholder && !hasWarned.current && process.env.NODE_ENV !== 'production') {\n      console.warn(\n        '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      hasWarned.current = true;\n    }\n  }, [props.placeholder]);\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}) as <T>(props: SpectrumComboBoxProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;\n\nconst ComboBoxBase = React.forwardRef(function ComboBoxBase(\n  props: SpectrumComboBoxProps<any>,\n  ref: FocusableRef<HTMLElement>\n) {\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>>(null);\n  let unwrappedPopoverRef = useUnwrapDOMRef(popoverRef);\n  let buttonRef = useRef<FocusableRefValue<HTMLElement>>(null);\n  let unwrappedButtonRef = useUnwrapDOMRef(buttonRef);\n  let listBoxRef = useRef(null);\n  let inputRef = useRef<HTMLInputElement>(null);\n  // serve as the new popover `triggerRef` instead of `unwrappedButtonRef` before for better positioning.\n  let inputGroupRef = useRef<HTMLDivElement>(null);\n  let domRef = useFocusableRef(ref, inputRef);\n\n  let {contains} = useFilter({sensitivity: 'base'});\n  let state = useComboBoxState({\n    ...props,\n    defaultFilter: contains,\n    allowsEmptyCollection: isAsync\n  });\n  let layout = useListBoxLayout();\n\n  let {\n    buttonProps,\n    inputProps,\n    listBoxProps,\n    labelProps,\n    descriptionProps,\n    errorMessageProps,\n    isInvalid,\n    validationErrors,\n    validationDetails\n  } = 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<number | undefined>(undefined);\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 ? undefined : menuWidth;\n  let style = {\n    width: customMenuWidth ? dimensionValue(customMenuWidth) : width,\n    minWidth: isQuiet\n      ? `calc(${menuWidth}px + calc(2 * var(--spectrum-dropdown-quiet-offset)))`\n      : menuWidth\n  };\n  let cbInputProps = {...props, children: null};\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          {...cbInputProps}\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' : undefined)}\n          ref={inputGroupRef}\n        />\n      </Field>\n      {name && formValue === 'key' && (\n        <input type=\"hidden\" name={name} form={props.form} value={state.selectedKey ?? ''} />\n      )}\n      <Popover\n        state={state}\n        UNSAFE_style={style}\n        UNSAFE_className={classNames(styles, 'spectrum-InputGroup-popover', {\n          'spectrum-InputGroup-popover--quiet': isQuiet\n        })}\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          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={() =>\n            isAsync && (\n              <span className={classNames(comboboxStyles, 'no-results')}>\n                {loadingState === 'loading'\n                  ? stringFormatter.format('loading')\n                  : stringFormatter.format('noResults')}\n              </span>\n            )\n          }\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(\n  props: ComboBoxInputProps,\n  ref: ForwardedRef<HTMLElement | null>\n) {\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<ReturnType<typeof setTimeout> | null>(null);\n  let [showLoading, setShowLoading] = useState(false);\n\n  let loadingCircle = (\n    <ProgressCircle\n      aria-label={stringFormatter.format('loading')}\n      size=\"S\"\n      isIndeterminate\n      UNSAFE_className={classNames(\n        textfieldStyles,\n        'spectrum-Textfield-circleLoader',\n        classNames(styles, '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 (timeout.current) {\n        clearTimeout(timeout.current);\n      }\n      timeout.current = null;\n    }\n\n    lastInputValue.current = inputValue;\n  }, [isLoading, showLoading, inputValue]);\n\n  let [prevIsLoading, setPrevIsLoading] = useState(isLoading);\n  if (prevIsLoading !== isLoading && !isLoading) {\n    setShowLoading(false);\n    setPrevIsLoading(isLoading);\n  }\n\n  useEffect(() => {\n    return () => {\n      if (timeout.current) {\n        clearTimeout(timeout.current);\n      }\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={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        <TextFieldBase\n          inputProps={inputProps}\n          inputRef={inputRef}\n          UNSAFE_className={classNames(styles, 'spectrum-InputGroup-field')}\n          inputClassName={classNames(styles, 'spectrum-InputGroup-input')}\n          validationIconClassName={classNames(styles, 'spectrum-InputGroup-input-validationIcon')}\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={\n            showLoading && (isOpen || menuTrigger === 'manual' || loadingState === 'loading')\n          }\n          loadingIndicator={loadingState != null ? loadingCircle : undefined}\n          disableFocusRing\n        />\n        <PressResponder preventFocusOnPress isPressed={isOpen}>\n          <FieldButton\n            {...triggerProps}\n            ref={triggerRef}\n            UNSAFE_className={classNames(styles, 'spectrum-FieldButton')}\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"],"names":[],"version":3,"file":"ComboBox.cjs.map"}
+{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/combobox/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-aria/useButton';\nimport {AriaComboBoxProps, useComboBox} from 'react-aria/useComboBox';\nimport {\n  AsyncLoadable,\n  DimensionValue,\n  DOMRefValue,\n  FocusableRef,\n  FocusableRefValue,\n  LoadingState,\n  SingleSelection,\n  SpectrumFieldValidation,\n  SpectrumLabelableProps,\n  SpectrumTextInputBase,\n  StyleProps\n} from '@react-types/shared';\nimport ChevronDownMedium from '@spectrum-icons/ui/ChevronDownMedium';\nimport {classNames} from '../utils/classNames';\nimport comboboxStyles from './combobox.css';\nimport {\n  ComboBoxValidationValue,\n  MenuTriggerAction,\n  useComboBoxState\n} from 'react-stately/useComboBoxState';\nimport {dimensionValue} from '../utils/styleProps';\nimport {Field} from '../label/Field';\nimport {FieldButton} from '../button/FieldButton';\nimport {FocusRing} from 'react-aria/FocusRing';\nimport intlMessages from '../../intl/combobox/*.json';\nimport {ListBoxBase, useListBoxLayout} from '../listbox/ListBoxBase';\nimport {MobileComboBox} from './MobileComboBox';\nimport {Popover} from '../overlays/Popover';\nimport {PressResponder} from 'react-aria/private/interactions/PressResponder';\nimport {ProgressCircle} from '../progress/ProgressCircle';\nimport React, {\n  ForwardedRef,\n  InputHTMLAttributes,\n  ReactElement,\n  RefObject,\n  useCallback,\n  useEffect,\n  useRef,\n  useState\n} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/inputgroup/vars.css';\nimport {TextFieldBase} from '../textfield/TextFieldBase';\nimport textfieldStyles from '@adobe/spectrum-css-temp/components/textfield/vars.css';\nimport {useFilter} from 'react-aria/useFilter';\nimport {useFocusableRef, useUnwrapDOMRef} from '../utils/useDOMRef';\nimport {useFormProps} from '../form/Form';\nimport {useHover} from 'react-aria/useHover';\nimport {useIsMobileDevice} from '../utils/useIsMobileDevice';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useProvider, useProviderProps} from '../provider/Provider';\nimport {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';\n\nexport interface SpectrumComboBoxProps<T>\n  extends\n    SpectrumTextInputBase,\n    Omit<\n      AriaComboBoxProps<T>,\n      | 'menuTrigger'\n      | 'isInvalid'\n      | 'validationState'\n      | 'selectionMode'\n      | 'selectedKey'\n      | 'defaultSelectedKey'\n      | 'onSelectionChange'\n      | 'value'\n      | 'defaultValue'\n      | 'onChange'\n    >,\n    Omit<SingleSelection, 'disallowEmptySelection'>,\n    SpectrumFieldValidation<ComboBoxValidationValue>,\n    SpectrumLabelableProps,\n    StyleProps,\n    Omit<AsyncLoadable, 'isLoading'> {\n  /**\n   * The interaction required to display the ComboBox menu. Note that this prop has no effect on the\n   * mobile ComboBox experience.\n   *\n   * @default 'input'\n   */\n  menuTrigger?: MenuTriggerAction;\n  /** Whether the ComboBox should be displayed with a quiet style. */\n  isQuiet?: boolean;\n  /**\n   * Alignment of the menu relative to the input target.\n   *\n   * @default 'start'\n   */\n  align?: 'start' | 'end';\n  /**\n   * Direction the menu will render relative to the ComboBox.\n   *\n   * @default 'bottom'\n   */\n  direction?: 'bottom' | 'top';\n  /**\n   * The current loading state of the ComboBox. Determines whether or not the progress circle should\n   * be shown.\n   */\n  loadingState?: LoadingState;\n  /**\n   * Whether the menu should automatically flip direction when space is limited.\n   *\n   * @default true\n   */\n  shouldFlip?: boolean;\n  /**\n   * Width of the menu. By default, matches width of the combobox. Note that the minimum width of\n   * the dropdown is always equal to the combobox's width.\n   */\n  menuWidth?: DimensionValue;\n  /**\n   * Whether the text or key of the selected item is submitted as part of an HTML form. When\n   * `allowsCustomValue` is `true`, this option does not apply and the text is always submitted.\n   *\n   * @default 'text'\n   */\n  formValue?: 'text' | 'key';\n}\n\n/**\n * ComboBoxes combine a text entry with a picker menu, allowing users to filter longer lists to only\n * the selections matching a query.\n */\nexport const ComboBox = React.forwardRef(function ComboBox<T extends object>(\n  props: SpectrumComboBoxProps<T>,\n  ref: FocusableRef<HTMLElement>\n) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n\n  let hasWarned = useRef(false);\n  useEffect(() => {\n    if (props.placeholder && !hasWarned.current && process.env.NODE_ENV !== 'production') {\n      console.warn(\n        '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      hasWarned.current = true;\n    }\n  }, [props.placeholder]);\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}) as <T>(props: SpectrumComboBoxProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;\n\nconst ComboBoxBase = React.forwardRef(function ComboBoxBase(\n  props: SpectrumComboBoxProps<any>,\n  ref: FocusableRef<HTMLElement>\n) {\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>>(null);\n  let unwrappedPopoverRef = useUnwrapDOMRef(popoverRef);\n  let buttonRef = useRef<FocusableRefValue<HTMLElement>>(null);\n  let unwrappedButtonRef = useUnwrapDOMRef(buttonRef);\n  let listBoxRef = useRef(null);\n  let inputRef = useRef<HTMLInputElement>(null);\n  // serve as the new popover `triggerRef` instead of `unwrappedButtonRef` before for better positioning.\n  let inputGroupRef = useRef<HTMLDivElement>(null);\n  let domRef = useFocusableRef(ref, inputRef);\n\n  let {contains} = useFilter({sensitivity: 'base'});\n  let state = useComboBoxState({\n    ...props,\n    defaultFilter: contains,\n    allowsEmptyCollection: isAsync\n  });\n  let layout = useListBoxLayout();\n\n  let {\n    buttonProps,\n    inputProps,\n    listBoxProps,\n    labelProps,\n    descriptionProps,\n    errorMessageProps,\n    isInvalid,\n    validationErrors,\n    validationDetails\n  } = 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<number | undefined>(undefined);\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 ? undefined : menuWidth;\n  let style = {\n    width: customMenuWidth ? dimensionValue(customMenuWidth) : width,\n    minWidth: isQuiet\n      ? `calc(${menuWidth}px + calc(2 * var(--spectrum-dropdown-quiet-offset)))`\n      : menuWidth\n  };\n  let cbInputProps = {...props, children: null};\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          {...cbInputProps}\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' : undefined)}\n          ref={inputGroupRef}\n        />\n      </Field>\n      {name && formValue === 'key' && (\n        <input type=\"hidden\" name={name} form={props.form} value={state.selectedKey ?? ''} />\n      )}\n      <Popover\n        state={state}\n        UNSAFE_style={style}\n        UNSAFE_className={classNames(styles, 'spectrum-InputGroup-popover', {\n          'spectrum-InputGroup-popover--quiet': isQuiet\n        })}\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          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={() =>\n            isAsync && (\n              <span className={classNames(comboboxStyles, 'no-results')}>\n                {loadingState === 'loading'\n                  ? stringFormatter.format('loading')\n                  : stringFormatter.format('noResults')}\n              </span>\n            )\n          }\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(\n  props: ComboBoxInputProps,\n  ref: ForwardedRef<HTMLElement | null>\n) {\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<ReturnType<typeof setTimeout> | null>(null);\n  let [showLoading, setShowLoading] = useState(false);\n\n  let loadingCircle = (\n    <ProgressCircle\n      aria-label={stringFormatter.format('loading')}\n      size=\"S\"\n      isIndeterminate\n      UNSAFE_className={classNames(\n        textfieldStyles,\n        'spectrum-Textfield-circleLoader',\n        classNames(styles, '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 (timeout.current) {\n        clearTimeout(timeout.current);\n      }\n      timeout.current = null;\n    }\n\n    lastInputValue.current = inputValue;\n  }, [isLoading, showLoading, inputValue]);\n\n  let [prevIsLoading, setPrevIsLoading] = useState(isLoading);\n  if (prevIsLoading !== isLoading && !isLoading) {\n    setShowLoading(false);\n    setPrevIsLoading(isLoading);\n  }\n\n  useEffect(() => {\n    return () => {\n      if (timeout.current) {\n        clearTimeout(timeout.current);\n      }\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={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        <TextFieldBase\n          inputProps={inputProps}\n          inputRef={inputRef}\n          UNSAFE_className={classNames(styles, 'spectrum-InputGroup-field')}\n          inputClassName={classNames(styles, 'spectrum-InputGroup-input')}\n          validationIconClassName={classNames(styles, 'spectrum-InputGroup-input-validationIcon')}\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={\n            showLoading && (isOpen || menuTrigger === 'manual' || loadingState === 'loading')\n          }\n          loadingIndicator={loadingState != null ? loadingCircle : undefined}\n          disableFocusRing\n        />\n        <PressResponder preventFocusOnPress isPressed={isOpen}>\n          <FieldButton\n            {...triggerProps}\n            ref={triggerRef}\n            UNSAFE_className={classNames(styles, 'spectrum-FieldButton')}\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"],"names":[],"version":3,"file":"ComboBox.cjs.map"}

package/dist/private/combobox/ComboBox.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/combobox/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-aria/useButton';\n\nimport {AriaComboBoxProps, useComboBox} from 'react-aria/useComboBox';\nimport {\n  AsyncLoadable,\n  DimensionValue,\n  DOMRefValue,\n  FocusableRef,\n  FocusableRefValue,\n  LoadingState,\n  SingleSelection,\n  SpectrumFieldValidation,\n  SpectrumLabelableProps,\n  SpectrumTextInputBase,\n  StyleProps\n} from '@react-types/shared';\nimport ChevronDownMedium from '@spectrum-icons/ui/ChevronDownMedium';\nimport {classNames} from '../utils/classNames';\nimport comboboxStyles from './combobox.css';\nimport {\n  ComboBoxValidationValue,\n  MenuTriggerAction,\n  useComboBoxState\n} from 'react-stately/useComboBoxState';\nimport {dimensionValue} from '../utils/styleProps';\nimport {Field} from '../label/Field';\nimport {FieldButton} from '../button/FieldButton';\nimport {FocusRing} from 'react-aria/FocusRing';\nimport intlMessages from '../../intl/combobox/*.json';\nimport {ListBoxBase, useListBoxLayout} from '../listbox/ListBoxBase';\nimport {MobileComboBox} from './MobileComboBox';\n// @ts-ignore\nimport {Popover} from '../overlays/Popover';\nimport {PressResponder} from 'react-aria/private/interactions/PressResponder';\nimport {ProgressCircle} from '../progress/ProgressCircle';\nimport React, {\n  ForwardedRef,\n  InputHTMLAttributes,\n  ReactElement,\n  RefObject,\n  useCallback,\n  useEffect,\n  useRef,\n  useState\n} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/inputgroup/vars.css';\nimport {TextFieldBase} from '../textfield/TextFieldBase';\nimport textfieldStyles from '@adobe/spectrum-css-temp/components/textfield/vars.css';\nimport {useFilter} from 'react-aria/useFilter';\nimport {useFocusableRef, useUnwrapDOMRef} from '../utils/useDOMRef';\nimport {useFormProps} from '../form/Form';\nimport {useHover} from 'react-aria/useHover';\nimport {useIsMobileDevice} from '../utils/useIsMobileDevice';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useProvider, useProviderProps} from '../provider/Provider';\nimport {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';\n\nexport interface SpectrumComboBoxProps<T>\n  extends\n    SpectrumTextInputBase,\n    Omit<\n      AriaComboBoxProps<T>,\n      | 'menuTrigger'\n      | 'isInvalid'\n      | 'validationState'\n      | 'selectionMode'\n      | 'selectedKey'\n      | 'defaultSelectedKey'\n      | 'onSelectionChange'\n      | 'value'\n      | 'defaultValue'\n      | 'onChange'\n    >,\n    Omit<SingleSelection, 'disallowEmptySelection'>,\n    SpectrumFieldValidation<ComboBoxValidationValue>,\n    SpectrumLabelableProps,\n    StyleProps,\n    Omit<AsyncLoadable, 'isLoading'> {\n  /**\n   * The interaction required to display the ComboBox menu. Note that this prop has no effect on the\n   * mobile ComboBox experience.\n   *\n   * @default 'input'\n   */\n  menuTrigger?: MenuTriggerAction;\n  /** Whether the ComboBox should be displayed with a quiet style. */\n  isQuiet?: boolean;\n  /**\n   * Alignment of the menu relative to the input target.\n   *\n   * @default 'start'\n   */\n  align?: 'start' | 'end';\n  /**\n   * Direction the menu will render relative to the ComboBox.\n   *\n   * @default 'bottom'\n   */\n  direction?: 'bottom' | 'top';\n  /**\n   * The current loading state of the ComboBox. Determines whether or not the progress circle should\n   * be shown.\n   */\n  loadingState?: LoadingState;\n  /**\n   * Whether the menu should automatically flip direction when space is limited.\n   *\n   * @default true\n   */\n  shouldFlip?: boolean;\n  /**\n   * Width of the menu. By default, matches width of the combobox. Note that the minimum width of\n   * the dropdown is always equal to the combobox's width.\n   */\n  menuWidth?: DimensionValue;\n  /**\n   * Whether the text or key of the selected item is submitted as part of an HTML form. When\n   * `allowsCustomValue` is `true`, this option does not apply and the text is always submitted.\n   *\n   * @default 'text'\n   */\n  formValue?: 'text' | 'key';\n}\n\n/**\n * ComboBoxes combine a text entry with a picker menu, allowing users to filter longer lists to only\n * the selections matching a query.\n */\nexport const ComboBox = React.forwardRef(function ComboBox<T extends object>(\n  props: SpectrumComboBoxProps<T>,\n  ref: FocusableRef<HTMLElement>\n) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n\n  let hasWarned = useRef(false);\n  useEffect(() => {\n    if (props.placeholder && !hasWarned.current && process.env.NODE_ENV !== 'production') {\n      console.warn(\n        '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      hasWarned.current = true;\n    }\n  }, [props.placeholder]);\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}) as <T>(props: SpectrumComboBoxProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;\n\nconst ComboBoxBase = React.forwardRef(function ComboBoxBase(\n  props: SpectrumComboBoxProps<any>,\n  ref: FocusableRef<HTMLElement>\n) {\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>>(null);\n  let unwrappedPopoverRef = useUnwrapDOMRef(popoverRef);\n  let buttonRef = useRef<FocusableRefValue<HTMLElement>>(null);\n  let unwrappedButtonRef = useUnwrapDOMRef(buttonRef);\n  let listBoxRef = useRef(null);\n  let inputRef = useRef<HTMLInputElement>(null);\n  // serve as the new popover `triggerRef` instead of `unwrappedButtonRef` before for better positioning.\n  let inputGroupRef = useRef<HTMLDivElement>(null);\n  let domRef = useFocusableRef(ref, inputRef);\n\n  let {contains} = useFilter({sensitivity: 'base'});\n  let state = useComboBoxState({\n    ...props,\n    defaultFilter: contains,\n    allowsEmptyCollection: isAsync\n  });\n  let layout = useListBoxLayout();\n\n  let {\n    buttonProps,\n    inputProps,\n    listBoxProps,\n    labelProps,\n    descriptionProps,\n    errorMessageProps,\n    isInvalid,\n    validationErrors,\n    validationDetails\n  } = 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<number | undefined>(undefined);\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 ? undefined : menuWidth;\n  let style = {\n    width: customMenuWidth ? dimensionValue(customMenuWidth) : width,\n    minWidth: isQuiet\n      ? `calc(${menuWidth}px + calc(2 * var(--spectrum-dropdown-quiet-offset)))`\n      : menuWidth\n  };\n  let cbInputProps = {...props, children: null};\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          {...cbInputProps}\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' : undefined)}\n          ref={inputGroupRef}\n        />\n      </Field>\n      {name && formValue === 'key' && (\n        <input type=\"hidden\" name={name} form={props.form} value={state.selectedKey ?? ''} />\n      )}\n      <Popover\n        state={state}\n        UNSAFE_style={style}\n        UNSAFE_className={classNames(styles, 'spectrum-InputGroup-popover', {\n          'spectrum-InputGroup-popover--quiet': isQuiet\n        })}\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          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={() =>\n            isAsync && (\n              <span className={classNames(comboboxStyles, 'no-results')}>\n                {loadingState === 'loading'\n                  ? stringFormatter.format('loading')\n                  : stringFormatter.format('noResults')}\n              </span>\n            )\n          }\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(\n  props: ComboBoxInputProps,\n  ref: ForwardedRef<HTMLElement | null>\n) {\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<ReturnType<typeof setTimeout> | null>(null);\n  let [showLoading, setShowLoading] = useState(false);\n\n  let loadingCircle = (\n    <ProgressCircle\n      aria-label={stringFormatter.format('loading')}\n      size=\"S\"\n      isIndeterminate\n      UNSAFE_className={classNames(\n        textfieldStyles,\n        'spectrum-Textfield-circleLoader',\n        classNames(styles, '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 (timeout.current) {\n        clearTimeout(timeout.current);\n      }\n      timeout.current = null;\n    }\n\n    lastInputValue.current = inputValue;\n  }, [isLoading, showLoading, inputValue]);\n\n  let [prevIsLoading, setPrevIsLoading] = useState(isLoading);\n  if (prevIsLoading !== isLoading && !isLoading) {\n    setShowLoading(false);\n    setPrevIsLoading(isLoading);\n  }\n\n  useEffect(() => {\n    return () => {\n      if (timeout.current) {\n        clearTimeout(timeout.current);\n      }\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={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        <TextFieldBase\n          inputProps={inputProps}\n          inputRef={inputRef}\n          UNSAFE_className={classNames(styles, 'spectrum-InputGroup-field')}\n          inputClassName={classNames(styles, 'spectrum-InputGroup-input')}\n          validationIconClassName={classNames(styles, 'spectrum-InputGroup-input-validationIcon')}\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={\n            showLoading && (isOpen || menuTrigger === 'manual' || loadingState === 'loading')\n          }\n          loadingIndicator={loadingState != null ? loadingCircle : undefined}\n          disableFocusRing\n        />\n        <PressResponder preventFocusOnPress isPressed={isOpen}>\n          <FieldButton\n            {...triggerProps}\n            ref={triggerRef}\n            UNSAFE_className={classNames(styles, 'spectrum-FieldButton')}\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"],"names":[],"version":3,"file":"ComboBox.js.map"}
+{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/combobox/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-aria/useButton';\nimport {AriaComboBoxProps, useComboBox} from 'react-aria/useComboBox';\nimport {\n  AsyncLoadable,\n  DimensionValue,\n  DOMRefValue,\n  FocusableRef,\n  FocusableRefValue,\n  LoadingState,\n  SingleSelection,\n  SpectrumFieldValidation,\n  SpectrumLabelableProps,\n  SpectrumTextInputBase,\n  StyleProps\n} from '@react-types/shared';\nimport ChevronDownMedium from '@spectrum-icons/ui/ChevronDownMedium';\nimport {classNames} from '../utils/classNames';\nimport comboboxStyles from './combobox.css';\nimport {\n  ComboBoxValidationValue,\n  MenuTriggerAction,\n  useComboBoxState\n} from 'react-stately/useComboBoxState';\nimport {dimensionValue} from '../utils/styleProps';\nimport {Field} from '../label/Field';\nimport {FieldButton} from '../button/FieldButton';\nimport {FocusRing} from 'react-aria/FocusRing';\nimport intlMessages from '../../intl/combobox/*.json';\nimport {ListBoxBase, useListBoxLayout} from '../listbox/ListBoxBase';\nimport {MobileComboBox} from './MobileComboBox';\nimport {Popover} from '../overlays/Popover';\nimport {PressResponder} from 'react-aria/private/interactions/PressResponder';\nimport {ProgressCircle} from '../progress/ProgressCircle';\nimport React, {\n  ForwardedRef,\n  InputHTMLAttributes,\n  ReactElement,\n  RefObject,\n  useCallback,\n  useEffect,\n  useRef,\n  useState\n} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/inputgroup/vars.css';\nimport {TextFieldBase} from '../textfield/TextFieldBase';\nimport textfieldStyles from '@adobe/spectrum-css-temp/components/textfield/vars.css';\nimport {useFilter} from 'react-aria/useFilter';\nimport {useFocusableRef, useUnwrapDOMRef} from '../utils/useDOMRef';\nimport {useFormProps} from '../form/Form';\nimport {useHover} from 'react-aria/useHover';\nimport {useIsMobileDevice} from '../utils/useIsMobileDevice';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useProvider, useProviderProps} from '../provider/Provider';\nimport {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';\n\nexport interface SpectrumComboBoxProps<T>\n  extends\n    SpectrumTextInputBase,\n    Omit<\n      AriaComboBoxProps<T>,\n      | 'menuTrigger'\n      | 'isInvalid'\n      | 'validationState'\n      | 'selectionMode'\n      | 'selectedKey'\n      | 'defaultSelectedKey'\n      | 'onSelectionChange'\n      | 'value'\n      | 'defaultValue'\n      | 'onChange'\n    >,\n    Omit<SingleSelection, 'disallowEmptySelection'>,\n    SpectrumFieldValidation<ComboBoxValidationValue>,\n    SpectrumLabelableProps,\n    StyleProps,\n    Omit<AsyncLoadable, 'isLoading'> {\n  /**\n   * The interaction required to display the ComboBox menu. Note that this prop has no effect on the\n   * mobile ComboBox experience.\n   *\n   * @default 'input'\n   */\n  menuTrigger?: MenuTriggerAction;\n  /** Whether the ComboBox should be displayed with a quiet style. */\n  isQuiet?: boolean;\n  /**\n   * Alignment of the menu relative to the input target.\n   *\n   * @default 'start'\n   */\n  align?: 'start' | 'end';\n  /**\n   * Direction the menu will render relative to the ComboBox.\n   *\n   * @default 'bottom'\n   */\n  direction?: 'bottom' | 'top';\n  /**\n   * The current loading state of the ComboBox. Determines whether or not the progress circle should\n   * be shown.\n   */\n  loadingState?: LoadingState;\n  /**\n   * Whether the menu should automatically flip direction when space is limited.\n   *\n   * @default true\n   */\n  shouldFlip?: boolean;\n  /**\n   * Width of the menu. By default, matches width of the combobox. Note that the minimum width of\n   * the dropdown is always equal to the combobox's width.\n   */\n  menuWidth?: DimensionValue;\n  /**\n   * Whether the text or key of the selected item is submitted as part of an HTML form. When\n   * `allowsCustomValue` is `true`, this option does not apply and the text is always submitted.\n   *\n   * @default 'text'\n   */\n  formValue?: 'text' | 'key';\n}\n\n/**\n * ComboBoxes combine a text entry with a picker menu, allowing users to filter longer lists to only\n * the selections matching a query.\n */\nexport const ComboBox = React.forwardRef(function ComboBox<T extends object>(\n  props: SpectrumComboBoxProps<T>,\n  ref: FocusableRef<HTMLElement>\n) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n\n  let hasWarned = useRef(false);\n  useEffect(() => {\n    if (props.placeholder && !hasWarned.current && process.env.NODE_ENV !== 'production') {\n      console.warn(\n        '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      hasWarned.current = true;\n    }\n  }, [props.placeholder]);\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}) as <T>(props: SpectrumComboBoxProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;\n\nconst ComboBoxBase = React.forwardRef(function ComboBoxBase(\n  props: SpectrumComboBoxProps<any>,\n  ref: FocusableRef<HTMLElement>\n) {\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>>(null);\n  let unwrappedPopoverRef = useUnwrapDOMRef(popoverRef);\n  let buttonRef = useRef<FocusableRefValue<HTMLElement>>(null);\n  let unwrappedButtonRef = useUnwrapDOMRef(buttonRef);\n  let listBoxRef = useRef(null);\n  let inputRef = useRef<HTMLInputElement>(null);\n  // serve as the new popover `triggerRef` instead of `unwrappedButtonRef` before for better positioning.\n  let inputGroupRef = useRef<HTMLDivElement>(null);\n  let domRef = useFocusableRef(ref, inputRef);\n\n  let {contains} = useFilter({sensitivity: 'base'});\n  let state = useComboBoxState({\n    ...props,\n    defaultFilter: contains,\n    allowsEmptyCollection: isAsync\n  });\n  let layout = useListBoxLayout();\n\n  let {\n    buttonProps,\n    inputProps,\n    listBoxProps,\n    labelProps,\n    descriptionProps,\n    errorMessageProps,\n    isInvalid,\n    validationErrors,\n    validationDetails\n  } = 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<number | undefined>(undefined);\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 ? undefined : menuWidth;\n  let style = {\n    width: customMenuWidth ? dimensionValue(customMenuWidth) : width,\n    minWidth: isQuiet\n      ? `calc(${menuWidth}px + calc(2 * var(--spectrum-dropdown-quiet-offset)))`\n      : menuWidth\n  };\n  let cbInputProps = {...props, children: null};\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          {...cbInputProps}\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' : undefined)}\n          ref={inputGroupRef}\n        />\n      </Field>\n      {name && formValue === 'key' && (\n        <input type=\"hidden\" name={name} form={props.form} value={state.selectedKey ?? ''} />\n      )}\n      <Popover\n        state={state}\n        UNSAFE_style={style}\n        UNSAFE_className={classNames(styles, 'spectrum-InputGroup-popover', {\n          'spectrum-InputGroup-popover--quiet': isQuiet\n        })}\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          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={() =>\n            isAsync && (\n              <span className={classNames(comboboxStyles, 'no-results')}>\n                {loadingState === 'loading'\n                  ? stringFormatter.format('loading')\n                  : stringFormatter.format('noResults')}\n              </span>\n            )\n          }\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(\n  props: ComboBoxInputProps,\n  ref: ForwardedRef<HTMLElement | null>\n) {\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<ReturnType<typeof setTimeout> | null>(null);\n  let [showLoading, setShowLoading] = useState(false);\n\n  let loadingCircle = (\n    <ProgressCircle\n      aria-label={stringFormatter.format('loading')}\n      size=\"S\"\n      isIndeterminate\n      UNSAFE_className={classNames(\n        textfieldStyles,\n        'spectrum-Textfield-circleLoader',\n        classNames(styles, '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 (timeout.current) {\n        clearTimeout(timeout.current);\n      }\n      timeout.current = null;\n    }\n\n    lastInputValue.current = inputValue;\n  }, [isLoading, showLoading, inputValue]);\n\n  let [prevIsLoading, setPrevIsLoading] = useState(isLoading);\n  if (prevIsLoading !== isLoading && !isLoading) {\n    setShowLoading(false);\n    setPrevIsLoading(isLoading);\n  }\n\n  useEffect(() => {\n    return () => {\n      if (timeout.current) {\n        clearTimeout(timeout.current);\n      }\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={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        <TextFieldBase\n          inputProps={inputProps}\n          inputRef={inputRef}\n          UNSAFE_className={classNames(styles, 'spectrum-InputGroup-field')}\n          inputClassName={classNames(styles, 'spectrum-InputGroup-input')}\n          validationIconClassName={classNames(styles, 'spectrum-InputGroup-input-validationIcon')}\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={\n            showLoading && (isOpen || menuTrigger === 'manual' || loadingState === 'loading')\n          }\n          loadingIndicator={loadingState != null ? loadingCircle : undefined}\n          disableFocusRing\n        />\n        <PressResponder preventFocusOnPress isPressed={isOpen}>\n          <FieldButton\n            {...triggerProps}\n            ref={triggerRef}\n            UNSAFE_className={classNames(styles, 'spectrum-FieldButton')}\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"],"names":[],"version":3,"file":"ComboBox.js.map"}