@react-aria/select 3.11.1-nightly.4036 → 3.11.1-nightly.4039

package/dist/import.mjs

@@ -1,5 +1,5 @@
-import {filterDOMProps as $thkiX$filterDOMProps, mergeProps as $thkiX$mergeProps, useId as $thkiX$useId, chain as $thkiX$chain} from "@react-aria/utils";
-import $thkiX$react, {useMemo as $thkiX$useMemo} from "react";
+import {filterDOMProps as $thkiX$filterDOMProps, mergeProps as $thkiX$mergeProps, useId as $thkiX$useId, chain as $thkiX$chain, useFormReset as $thkiX$useFormReset} from "@react-aria/utils";
+import $thkiX$react, {useMemo as $thkiX$useMemo, useRef as $thkiX$useRef} from "react";
 import {ListKeyboardDelegate as $thkiX$ListKeyboardDelegate, useTypeSelect as $thkiX$useTypeSelect} from "@react-aria/selection";
 import {setInteractionModality as $thkiX$setInteractionModality, useInteractionModality as $thkiX$useInteractionModality} from "@react-aria/interactions";
 import {useCollator as $thkiX$useCollator} from "@react-aria/i18n";
@@ -163,10 +163,12 @@ function $58aed456727eb0f3$export$e64b2f635402ca43(props, state, ref) {
  */ 
 
 
+
 function $bdd25dc72710631f$export$f809e80f58e251d1(props, state, triggerRef) {
     let { autoComplete: autoComplete , name: name , isDisabled: isDisabled  } = props;
     let modality = (0, $thkiX$useInteractionModality)();
     let { visuallyHiddenProps: visuallyHiddenProps  } = (0, $thkiX$useVisuallyHidden)();
+    (0, $thkiX$useFormReset)(props.selectRef, state.selectedKey, state.setSelectedKey);
     var _state_selectedKey;
     // In Safari, the <select> cannot have `display: none` or `hidden` for autofill to work.
     // In Firefox, there must be a <label> to identify the <select> whereas other browsers
@@ -213,12 +215,19 @@ function $bdd25dc72710631f$export$f809e80f58e251d1(props, state, triggerRef) {
 }
 function $bdd25dc72710631f$export$cbd84cdb2e668835(props) {
     let { state: state , triggerRef: triggerRef , label: label , name: name , isDisabled: isDisabled  } = props;
-    let { containerProps: containerProps , inputProps: inputProps , selectProps: selectProps  } = $bdd25dc72710631f$export$f809e80f58e251d1(props, state, triggerRef);
+    let selectRef = (0, $thkiX$useRef)(null);
+    let { containerProps: containerProps , inputProps: inputProps , selectProps: selectProps  } = $bdd25dc72710631f$export$f809e80f58e251d1({
+        ...props,
+        selectRef: selectRef
+    }, state, triggerRef);
     var _state_selectedKey;
     // If used in a <form>, use a hidden input so the value can be submitted to a server.
     // If the collection isn't too big, use a hidden <select> element for this so that browser
     // autofill will work. Otherwise, use an <input type="hidden">.
-    if (state.collection.size <= 300) return /*#__PURE__*/ (0, $thkiX$react).createElement("div", containerProps, /*#__PURE__*/ (0, $thkiX$react).createElement("input", inputProps), /*#__PURE__*/ (0, $thkiX$react).createElement("label", null, label, /*#__PURE__*/ (0, $thkiX$react).createElement("select", selectProps, /*#__PURE__*/ (0, $thkiX$react).createElement("option", null), [
+    if (state.collection.size <= 300) return /*#__PURE__*/ (0, $thkiX$react).createElement("div", containerProps, /*#__PURE__*/ (0, $thkiX$react).createElement("input", inputProps), /*#__PURE__*/ (0, $thkiX$react).createElement("label", null, label, /*#__PURE__*/ (0, $thkiX$react).createElement("select", {
+        ...selectProps,
+        ref: selectRef
+    }, /*#__PURE__*/ (0, $thkiX$react).createElement("option", null), [
         ...state.collection.getKeys()
     ].map((key)=>{
         let item = state.collection.getItem(key);

package/dist/main.js

@@ -173,10 +173,12 @@ function $23a1e93dc7fa8653$export$e64b2f635402ca43(props, state, ref) {
  */ 
 
 
+
 function $6eae0e0872a4cdd4$export$f809e80f58e251d1(props, state, triggerRef) {
     let { autoComplete: autoComplete , name: name , isDisabled: isDisabled  } = props;
     let modality = (0, $j4fa6$reactariainteractions.useInteractionModality)();
     let { visuallyHiddenProps: visuallyHiddenProps  } = (0, $j4fa6$reactariavisuallyhidden.useVisuallyHidden)();
+    (0, $j4fa6$reactariautils.useFormReset)(props.selectRef, state.selectedKey, state.setSelectedKey);
     var _state_selectedKey;
     // In Safari, the <select> cannot have `display: none` or `hidden` for autofill to work.
     // In Firefox, there must be a <label> to identify the <select> whereas other browsers
@@ -223,12 +225,19 @@ function $6eae0e0872a4cdd4$export$f809e80f58e251d1(props, state, triggerRef) {
 }
 function $6eae0e0872a4cdd4$export$cbd84cdb2e668835(props) {
     let { state: state , triggerRef: triggerRef , label: label , name: name , isDisabled: isDisabled  } = props;
-    let { containerProps: containerProps , inputProps: inputProps , selectProps: selectProps  } = $6eae0e0872a4cdd4$export$f809e80f58e251d1(props, state, triggerRef);
+    let selectRef = (0, $j4fa6$react.useRef)(null);
+    let { containerProps: containerProps , inputProps: inputProps , selectProps: selectProps  } = $6eae0e0872a4cdd4$export$f809e80f58e251d1({
+        ...props,
+        selectRef: selectRef
+    }, state, triggerRef);
     var _state_selectedKey;
     // If used in a <form>, use a hidden input so the value can be submitted to a server.
     // If the collection isn't too big, use a hidden <select> element for this so that browser
     // autofill will work. Otherwise, use an <input type="hidden">.
-    if (state.collection.size <= 300) return /*#__PURE__*/ (0, ($parcel$interopDefault($j4fa6$react))).createElement("div", containerProps, /*#__PURE__*/ (0, ($parcel$interopDefault($j4fa6$react))).createElement("input", inputProps), /*#__PURE__*/ (0, ($parcel$interopDefault($j4fa6$react))).createElement("label", null, label, /*#__PURE__*/ (0, ($parcel$interopDefault($j4fa6$react))).createElement("select", selectProps, /*#__PURE__*/ (0, ($parcel$interopDefault($j4fa6$react))).createElement("option", null), [
+    if (state.collection.size <= 300) return /*#__PURE__*/ (0, ($parcel$interopDefault($j4fa6$react))).createElement("div", containerProps, /*#__PURE__*/ (0, ($parcel$interopDefault($j4fa6$react))).createElement("input", inputProps), /*#__PURE__*/ (0, ($parcel$interopDefault($j4fa6$react))).createElement("label", null, label, /*#__PURE__*/ (0, ($parcel$interopDefault($j4fa6$react))).createElement("select", {
+        ...selectProps,
+        ref: selectRef
+    }, /*#__PURE__*/ (0, ($parcel$interopDefault($j4fa6$react))).createElement("option", null), [
         ...state.collection.getKeys()
     ].map((key)=>{
         let item = state.collection.getItem(key);

package/dist/main.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-aria/select/src/index.ts","packages/@react-aria/select/src/useSelect.ts","packages/@react-aria/select/src/HiddenSelect.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 */\nexport {useSelect} from './useSelect';\nexport {useHiddenSelect, HiddenSelect} from './HiddenSelect';\nexport type {AriaSelectOptions, SelectAria} from './useSelect';\nexport type {AriaHiddenSelectProps, HiddenSelectProps} from './HiddenSelect';\nexport type {AriaSelectProps} from '@react-types/select';\n","/*\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 {AriaListBoxOptions} from '@react-aria/listbox';\nimport {AriaSelectProps} from '@react-types/select';\nimport {chain, filterDOMProps, mergeProps, useId} from '@react-aria/utils';\nimport {DOMAttributes, FocusableElement, KeyboardDelegate} from '@react-types/shared';\nimport {FocusEvent, RefObject, useMemo} from 'react';\nimport {ListKeyboardDelegate, useTypeSelect} from '@react-aria/selection';\nimport {SelectState} from '@react-stately/select';\nimport {setInteractionModality} from '@react-aria/interactions';\nimport {useCollator} from '@react-aria/i18n';\nimport {useField} from '@react-aria/label';\nimport {useMenuTrigger} from '@react-aria/menu';\n\nexport interface AriaSelectOptions<T> extends Omit<AriaSelectProps<T>, 'children'> {\n  /**\n   * An optional keyboard delegate implementation for type to select,\n   * to override the default.\n   */\n  keyboardDelegate?: KeyboardDelegate\n}\n\nexport interface SelectAria<T> {\n  /** Props for the label element. */\n  labelProps: DOMAttributes,\n\n  /** Props for the popup trigger element. */\n  triggerProps: AriaButtonProps,\n\n  /** Props for the element representing the selected value. */\n  valueProps: DOMAttributes,\n\n  /** Props for the popup. */\n  menuProps: AriaListBoxOptions<T>,\n\n  /** Props for the select's description element, if any. */\n  descriptionProps: DOMAttributes,\n\n  /** Props for the select's error message element, if any. */\n  errorMessageProps: DOMAttributes\n}\n\n/**\n * Provides the behavior and accessibility implementation for a select component.\n * A select displays a collapsible list of options and allows a user to select one of them.\n * @param props - Props for the select.\n * @param state - State for the select, as returned by `useListState`.\n */\nexport function useSelect<T>(props: AriaSelectOptions<T>, state: SelectState<T>, ref: RefObject<FocusableElement>): SelectAria<T> {\n  let {\n    keyboardDelegate,\n    isDisabled\n  } = props;\n\n  // By default, a KeyboardDelegate is provided which uses the DOM to query layout information (e.g. for page up/page down).\n  // When virtualized, the layout object will be passed in as a prop and override this.\n  let collator = useCollator({usage: 'search', sensitivity: 'base'});\n  let delegate = useMemo(() => keyboardDelegate || new ListKeyboardDelegate(state.collection, state.disabledKeys, null, collator), [keyboardDelegate, state.collection, state.disabledKeys, collator]);\n\n  let {menuTriggerProps, menuProps} = useMenuTrigger<T>(\n    {\n      isDisabled,\n      type: 'listbox'\n    },\n    state,\n    ref\n  );\n\n  let onKeyDown = (e: KeyboardEvent) => {\n    switch (e.key) {\n      case 'ArrowLeft': {\n        // prevent scrolling containers\n        e.preventDefault();\n\n        let key = state.selectedKey != null ? delegate.getKeyAbove(state.selectedKey) : delegate.getFirstKey();\n        if (key) {\n          state.setSelectedKey(key);\n        }\n        break;\n      }\n      case 'ArrowRight': {\n        // prevent scrolling containers\n        e.preventDefault();\n\n        let key = state.selectedKey != null ? delegate.getKeyBelow(state.selectedKey) : delegate.getFirstKey();\n        if (key) {\n          state.setSelectedKey(key);\n        }\n        break;\n      }\n    }\n  };\n\n  let {typeSelectProps} = useTypeSelect({\n    keyboardDelegate: delegate,\n    selectionManager: state.selectionManager,\n    onTypeSelect(key) {\n      state.setSelectedKey(key);\n    }\n  });\n\n  let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({\n    ...props,\n    labelElementType: 'span'\n  });\n\n  typeSelectProps.onKeyDown = typeSelectProps.onKeyDownCapture;\n  delete typeSelectProps.onKeyDownCapture;\n\n  let domProps = filterDOMProps(props, {labelable: true});\n  let triggerProps = mergeProps(typeSelectProps, menuTriggerProps, fieldProps);\n\n  let valueId = useId();\n\n  return {\n    labelProps: {\n      ...labelProps,\n      onClick: () => {\n        if (!props.isDisabled) {\n          ref.current.focus();\n\n          // Show the focus ring so the user knows where focus went\n          setInteractionModality('keyboard');\n        }\n      }\n    },\n    triggerProps: mergeProps(domProps, {\n      ...triggerProps,\n      isDisabled,\n      onKeyDown: chain(triggerProps.onKeyDown, onKeyDown, props.onKeyDown),\n      onKeyUp: props.onKeyUp,\n      'aria-labelledby': [\n        valueId,\n        triggerProps['aria-labelledby'],\n        triggerProps['aria-label'] && !triggerProps['aria-labelledby'] ? triggerProps.id : null\n      ].filter(Boolean).join(' '),\n      onFocus(e: FocusEvent) {\n        if (state.isFocused) {\n          return;\n        }\n\n        if (props.onFocus) {\n          props.onFocus(e);\n        }\n\n        if (props.onFocusChange) {\n          props.onFocusChange(true);\n        }\n\n        state.setFocused(true);\n      },\n      onBlur(e: FocusEvent) {\n        if (state.isOpen) {\n          return;\n        }\n\n        if (props.onBlur) {\n          props.onBlur(e);\n        }\n\n        if (props.onFocusChange) {\n          props.onFocusChange(false);\n        }\n\n        state.setFocused(false);\n      }\n    }),\n    valueProps: {\n      id: valueId\n    },\n    menuProps: {\n      ...menuProps,\n      autoFocus: state.focusStrategy || true,\n      shouldSelectOnPressUp: true,\n      shouldFocusOnHover: true,\n      disallowEmptySelection: true,\n      onBlur: (e) => {\n        if (e.currentTarget.contains(e.relatedTarget as Node)) {\n          return;\n        }\n\n        if (props.onBlur) {\n          props.onBlur(e);\n        }\n\n        if (props.onFocusChange) {\n          props.onFocusChange(false);\n        }\n\n        state.setFocused(false);\n      },\n      'aria-labelledby': [\n        fieldProps['aria-labelledby'],\n        triggerProps['aria-label'] && !fieldProps['aria-labelledby'] ? triggerProps.id : null\n      ].filter(Boolean).join(' ')\n    },\n    descriptionProps,\n    errorMessageProps\n  };\n}\n","/*\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 {FocusableElement} from '@react-types/shared';\nimport React, {ReactNode, RefObject} from 'react';\nimport {SelectState} from '@react-stately/select';\nimport {useInteractionModality} from '@react-aria/interactions';\nimport {useVisuallyHidden} from '@react-aria/visually-hidden';\n\nexport interface AriaHiddenSelectProps {\n  /**\n   * Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete).\n   */\n   autoComplete?: string,\n\n  /** The text label for the select. */\n  label?: ReactNode,\n\n  /** HTML form input name. */\n  name?: string,\n\n  /** Sets the disabled state of the select and input. */\n  isDisabled?: boolean\n}\n\nexport interface HiddenSelectProps<T> extends AriaHiddenSelectProps {\n  /** State for the select. */\n  state: SelectState<T>,\n\n  /** A ref to the trigger element. */\n  triggerRef: RefObject<FocusableElement>\n}\n\n/**\n * Provides the behavior and accessibility implementation for a hidden `<select>` element, which\n * can be used in combination with `useSelect` to support browser form autofill, mobile form\n * navigation, and native HTML form submission.\n */\nexport function useHiddenSelect<T>(props: AriaHiddenSelectProps, state: SelectState<T>, triggerRef: RefObject<FocusableElement>) {\n  let {autoComplete, name, isDisabled} = props;\n  let modality = useInteractionModality();\n  let {visuallyHiddenProps} = useVisuallyHidden();\n\n  // In Safari, the <select> cannot have `display: none` or `hidden` for autofill to work.\n  // In Firefox, there must be a <label> to identify the <select> whereas other browsers\n  // seem to identify it just by surrounding text.\n  // The solution is to use <VisuallyHidden> to hide the elements, which clips the elements to a\n  // 1px rectangle. In addition, we hide from screen readers with aria-hidden, and make the <select>\n  // non tabbable with tabIndex={-1}.\n  //\n  // In mobile browsers, there are next/previous buttons above the software keyboard for navigating\n  // between fields in a form. These only support native form inputs that are tabbable. In order to\n  // support those, an additional hidden input is used to marshall focus to the button. It is tabbable\n  // except when the button is focused, so that shift tab works properly to go to the actual previous\n  // input in the form. Using the <select> for this also works, but Safari on iOS briefly flashes\n  // the native menu on focus, so this isn't ideal. A font-size of 16px or greater is required to\n  // prevent Safari from zooming in on the input when it is focused.\n  //\n  // If the current interaction modality is null, then the user hasn't interacted with the page yet.\n  // In this case, we set the tabIndex to -1 on the input element so that automated accessibility\n  // checkers don't throw false-positives about focusable elements inside an aria-hidden parent.\n  return {\n    containerProps: {\n      ...visuallyHiddenProps,\n      'aria-hidden': true\n    },\n    inputProps: {\n      type: 'text',\n      tabIndex: modality == null || state.isFocused || state.isOpen ? -1 : 0,\n      style: {fontSize: 16},\n      onFocus: () => triggerRef.current.focus(),\n      disabled: isDisabled\n    },\n    selectProps: {\n      tabIndex: -1,\n      autoComplete,\n      disabled: isDisabled,\n      name,\n      size: state.collection.size,\n      value: state.selectedKey ?? '',\n      onChange: (e: React.ChangeEvent<HTMLSelectElement>) => state.setSelectedKey(e.target.value)\n    }\n  };\n}\n\n/**\n * Renders a hidden native `<select>` element, which can be used to support browser\n * form autofill, mobile form navigation, and native form submission.\n */\nexport function HiddenSelect<T>(props: HiddenSelectProps<T>) {\n  let {state, triggerRef, label, name, isDisabled} = props;\n  let {containerProps, inputProps, selectProps} = useHiddenSelect(props, state, triggerRef);\n\n  // If used in a <form>, use a hidden input so the value can be submitted to a server.\n  // If the collection isn't too big, use a hidden <select> element for this so that browser\n  // autofill will work. Otherwise, use an <input type=\"hidden\">.\n  if (state.collection.size <= 300) {\n    return (\n      <div {...containerProps}>\n        <input {...inputProps} />\n        <label>\n          {label}\n          <select {...selectProps}>\n            <option />\n            {[...state.collection.getKeys()].map(key => {\n              let item = state.collection.getItem(key);\n              if (item.type === 'item') {\n                return (\n                  <option\n                    key={item.key}\n                    value={item.key}>\n                    {item.textValue}\n                  </option>\n                );\n              }\n            })}\n          </select>\n        </label>\n      </div>\n    );\n  } else if (name) {\n    return (\n      <input\n        type=\"hidden\"\n        autoComplete={selectProps.autoComplete}\n        name={name}\n        disabled={isDisabled}\n        value={state.selectedKey ?? ''} />\n    );\n  }\n\n  return null;\n}\n"],"names":[],"version":3,"file":"main.js.map"}
+{"mappings":"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","sources":["packages/@react-aria/select/src/index.ts","packages/@react-aria/select/src/useSelect.ts","packages/@react-aria/select/src/HiddenSelect.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 */\nexport {useSelect} from './useSelect';\nexport {useHiddenSelect, HiddenSelect} from './HiddenSelect';\nexport type {AriaSelectOptions, SelectAria} from './useSelect';\nexport type {AriaHiddenSelectProps, HiddenSelectProps} from './HiddenSelect';\nexport type {AriaSelectProps} from '@react-types/select';\n","/*\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 {AriaListBoxOptions} from '@react-aria/listbox';\nimport {AriaSelectProps} from '@react-types/select';\nimport {chain, filterDOMProps, mergeProps, useId} from '@react-aria/utils';\nimport {DOMAttributes, FocusableElement, KeyboardDelegate} from '@react-types/shared';\nimport {FocusEvent, RefObject, useMemo} from 'react';\nimport {ListKeyboardDelegate, useTypeSelect} from '@react-aria/selection';\nimport {SelectState} from '@react-stately/select';\nimport {setInteractionModality} from '@react-aria/interactions';\nimport {useCollator} from '@react-aria/i18n';\nimport {useField} from '@react-aria/label';\nimport {useMenuTrigger} from '@react-aria/menu';\n\nexport interface AriaSelectOptions<T> extends Omit<AriaSelectProps<T>, 'children'> {\n  /**\n   * An optional keyboard delegate implementation for type to select,\n   * to override the default.\n   */\n  keyboardDelegate?: KeyboardDelegate\n}\n\nexport interface SelectAria<T> {\n  /** Props for the label element. */\n  labelProps: DOMAttributes,\n\n  /** Props for the popup trigger element. */\n  triggerProps: AriaButtonProps,\n\n  /** Props for the element representing the selected value. */\n  valueProps: DOMAttributes,\n\n  /** Props for the popup. */\n  menuProps: AriaListBoxOptions<T>,\n\n  /** Props for the select's description element, if any. */\n  descriptionProps: DOMAttributes,\n\n  /** Props for the select's error message element, if any. */\n  errorMessageProps: DOMAttributes\n}\n\n/**\n * Provides the behavior and accessibility implementation for a select component.\n * A select displays a collapsible list of options and allows a user to select one of them.\n * @param props - Props for the select.\n * @param state - State for the select, as returned by `useListState`.\n */\nexport function useSelect<T>(props: AriaSelectOptions<T>, state: SelectState<T>, ref: RefObject<FocusableElement>): SelectAria<T> {\n  let {\n    keyboardDelegate,\n    isDisabled\n  } = props;\n\n  // By default, a KeyboardDelegate is provided which uses the DOM to query layout information (e.g. for page up/page down).\n  // When virtualized, the layout object will be passed in as a prop and override this.\n  let collator = useCollator({usage: 'search', sensitivity: 'base'});\n  let delegate = useMemo(() => keyboardDelegate || new ListKeyboardDelegate(state.collection, state.disabledKeys, null, collator), [keyboardDelegate, state.collection, state.disabledKeys, collator]);\n\n  let {menuTriggerProps, menuProps} = useMenuTrigger<T>(\n    {\n      isDisabled,\n      type: 'listbox'\n    },\n    state,\n    ref\n  );\n\n  let onKeyDown = (e: KeyboardEvent) => {\n    switch (e.key) {\n      case 'ArrowLeft': {\n        // prevent scrolling containers\n        e.preventDefault();\n\n        let key = state.selectedKey != null ? delegate.getKeyAbove(state.selectedKey) : delegate.getFirstKey();\n        if (key) {\n          state.setSelectedKey(key);\n        }\n        break;\n      }\n      case 'ArrowRight': {\n        // prevent scrolling containers\n        e.preventDefault();\n\n        let key = state.selectedKey != null ? delegate.getKeyBelow(state.selectedKey) : delegate.getFirstKey();\n        if (key) {\n          state.setSelectedKey(key);\n        }\n        break;\n      }\n    }\n  };\n\n  let {typeSelectProps} = useTypeSelect({\n    keyboardDelegate: delegate,\n    selectionManager: state.selectionManager,\n    onTypeSelect(key) {\n      state.setSelectedKey(key);\n    }\n  });\n\n  let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({\n    ...props,\n    labelElementType: 'span'\n  });\n\n  typeSelectProps.onKeyDown = typeSelectProps.onKeyDownCapture;\n  delete typeSelectProps.onKeyDownCapture;\n\n  let domProps = filterDOMProps(props, {labelable: true});\n  let triggerProps = mergeProps(typeSelectProps, menuTriggerProps, fieldProps);\n\n  let valueId = useId();\n\n  return {\n    labelProps: {\n      ...labelProps,\n      onClick: () => {\n        if (!props.isDisabled) {\n          ref.current.focus();\n\n          // Show the focus ring so the user knows where focus went\n          setInteractionModality('keyboard');\n        }\n      }\n    },\n    triggerProps: mergeProps(domProps, {\n      ...triggerProps,\n      isDisabled,\n      onKeyDown: chain(triggerProps.onKeyDown, onKeyDown, props.onKeyDown),\n      onKeyUp: props.onKeyUp,\n      'aria-labelledby': [\n        valueId,\n        triggerProps['aria-labelledby'],\n        triggerProps['aria-label'] && !triggerProps['aria-labelledby'] ? triggerProps.id : null\n      ].filter(Boolean).join(' '),\n      onFocus(e: FocusEvent) {\n        if (state.isFocused) {\n          return;\n        }\n\n        if (props.onFocus) {\n          props.onFocus(e);\n        }\n\n        if (props.onFocusChange) {\n          props.onFocusChange(true);\n        }\n\n        state.setFocused(true);\n      },\n      onBlur(e: FocusEvent) {\n        if (state.isOpen) {\n          return;\n        }\n\n        if (props.onBlur) {\n          props.onBlur(e);\n        }\n\n        if (props.onFocusChange) {\n          props.onFocusChange(false);\n        }\n\n        state.setFocused(false);\n      }\n    }),\n    valueProps: {\n      id: valueId\n    },\n    menuProps: {\n      ...menuProps,\n      autoFocus: state.focusStrategy || true,\n      shouldSelectOnPressUp: true,\n      shouldFocusOnHover: true,\n      disallowEmptySelection: true,\n      onBlur: (e) => {\n        if (e.currentTarget.contains(e.relatedTarget as Node)) {\n          return;\n        }\n\n        if (props.onBlur) {\n          props.onBlur(e);\n        }\n\n        if (props.onFocusChange) {\n          props.onFocusChange(false);\n        }\n\n        state.setFocused(false);\n      },\n      'aria-labelledby': [\n        fieldProps['aria-labelledby'],\n        triggerProps['aria-label'] && !fieldProps['aria-labelledby'] ? triggerProps.id : null\n      ].filter(Boolean).join(' ')\n    },\n    descriptionProps,\n    errorMessageProps\n  };\n}\n","/*\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 {FocusableElement} from '@react-types/shared';\nimport React, {ReactNode, RefObject, useRef} from 'react';\nimport {SelectState} from '@react-stately/select';\nimport {useFormReset} from '@react-aria/utils';\nimport {useInteractionModality} from '@react-aria/interactions';\nimport {useVisuallyHidden} from '@react-aria/visually-hidden';\n\nexport interface AriaHiddenSelectProps {\n  /**\n   * Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete).\n   */\n  autoComplete?: string,\n\n  /** The text label for the select. */\n  label?: ReactNode,\n\n  /** HTML form input name. */\n  name?: string,\n\n  /** Sets the disabled state of the select and input. */\n  isDisabled?: boolean\n}\n\nexport interface HiddenSelectProps<T> extends AriaHiddenSelectProps {\n  /** State for the select. */\n  state: SelectState<T>,\n\n  /** A ref to the trigger element. */\n  triggerRef: RefObject<FocusableElement>\n}\n\nexport interface AriaHiddenSelectOptions extends AriaHiddenSelectProps {\n  /** A ref to the hidden `<select>` element. */\n  selectRef?: RefObject<HTMLSelectElement>\n}\n\n/**\n * Provides the behavior and accessibility implementation for a hidden `<select>` element, which\n * can be used in combination with `useSelect` to support browser form autofill, mobile form\n * navigation, and native HTML form submission.\n */\nexport function useHiddenSelect<T>(props: AriaHiddenSelectOptions, state: SelectState<T>, triggerRef: RefObject<FocusableElement>) {\n  let {autoComplete, name, isDisabled} = props;\n  let modality = useInteractionModality();\n  let {visuallyHiddenProps} = useVisuallyHidden();\n\n  useFormReset(props.selectRef, state.selectedKey, state.setSelectedKey);\n\n  // In Safari, the <select> cannot have `display: none` or `hidden` for autofill to work.\n  // In Firefox, there must be a <label> to identify the <select> whereas other browsers\n  // seem to identify it just by surrounding text.\n  // The solution is to use <VisuallyHidden> to hide the elements, which clips the elements to a\n  // 1px rectangle. In addition, we hide from screen readers with aria-hidden, and make the <select>\n  // non tabbable with tabIndex={-1}.\n  //\n  // In mobile browsers, there are next/previous buttons above the software keyboard for navigating\n  // between fields in a form. These only support native form inputs that are tabbable. In order to\n  // support those, an additional hidden input is used to marshall focus to the button. It is tabbable\n  // except when the button is focused, so that shift tab works properly to go to the actual previous\n  // input in the form. Using the <select> for this also works, but Safari on iOS briefly flashes\n  // the native menu on focus, so this isn't ideal. A font-size of 16px or greater is required to\n  // prevent Safari from zooming in on the input when it is focused.\n  //\n  // If the current interaction modality is null, then the user hasn't interacted with the page yet.\n  // In this case, we set the tabIndex to -1 on the input element so that automated accessibility\n  // checkers don't throw false-positives about focusable elements inside an aria-hidden parent.\n  return {\n    containerProps: {\n      ...visuallyHiddenProps,\n      'aria-hidden': true\n    },\n    inputProps: {\n      type: 'text',\n      tabIndex: modality == null || state.isFocused || state.isOpen ? -1 : 0,\n      style: {fontSize: 16},\n      onFocus: () => triggerRef.current.focus(),\n      disabled: isDisabled\n    },\n    selectProps: {\n      tabIndex: -1,\n      autoComplete,\n      disabled: isDisabled,\n      name,\n      size: state.collection.size,\n      value: state.selectedKey ?? '',\n      onChange: (e: React.ChangeEvent<HTMLSelectElement>) => state.setSelectedKey(e.target.value)\n    }\n  };\n}\n\n/**\n * Renders a hidden native `<select>` element, which can be used to support browser\n * form autofill, mobile form navigation, and native form submission.\n */\nexport function HiddenSelect<T>(props: HiddenSelectProps<T>) {\n  let {state, triggerRef, label, name, isDisabled} = props;\n  let selectRef = useRef(null);\n  let {containerProps, inputProps, selectProps} = useHiddenSelect({...props, selectRef}, state, triggerRef);\n\n  // If used in a <form>, use a hidden input so the value can be submitted to a server.\n  // If the collection isn't too big, use a hidden <select> element for this so that browser\n  // autofill will work. Otherwise, use an <input type=\"hidden\">.\n  if (state.collection.size <= 300) {\n    return (\n      <div {...containerProps}>\n        <input {...inputProps} />\n        <label>\n          {label}\n          <select {...selectProps} ref={selectRef}>\n            <option />\n            {[...state.collection.getKeys()].map(key => {\n              let item = state.collection.getItem(key);\n              if (item.type === 'item') {\n                return (\n                  <option\n                    key={item.key}\n                    value={item.key}>\n                    {item.textValue}\n                  </option>\n                );\n              }\n            })}\n          </select>\n        </label>\n      </div>\n    );\n  } else if (name) {\n    return (\n      <input\n        type=\"hidden\"\n        autoComplete={selectProps.autoComplete}\n        name={name}\n        disabled={isDisabled}\n        value={state.selectedKey ?? ''} />\n    );\n  }\n\n  return null;\n}\n"],"names":[],"version":3,"file":"main.js.map"}

package/dist/module.js

@@ -1,5 +1,5 @@
-import {filterDOMProps as $thkiX$filterDOMProps, mergeProps as $thkiX$mergeProps, useId as $thkiX$useId, chain as $thkiX$chain} from "@react-aria/utils";
-import $thkiX$react, {useMemo as $thkiX$useMemo} from "react";
+import {filterDOMProps as $thkiX$filterDOMProps, mergeProps as $thkiX$mergeProps, useId as $thkiX$useId, chain as $thkiX$chain, useFormReset as $thkiX$useFormReset} from "@react-aria/utils";
+import $thkiX$react, {useMemo as $thkiX$useMemo, useRef as $thkiX$useRef} from "react";
 import {ListKeyboardDelegate as $thkiX$ListKeyboardDelegate, useTypeSelect as $thkiX$useTypeSelect} from "@react-aria/selection";
 import {setInteractionModality as $thkiX$setInteractionModality, useInteractionModality as $thkiX$useInteractionModality} from "@react-aria/interactions";
 import {useCollator as $thkiX$useCollator} from "@react-aria/i18n";
@@ -163,10 +163,12 @@ function $58aed456727eb0f3$export$e64b2f635402ca43(props, state, ref) {
  */ 
 
 
+
 function $bdd25dc72710631f$export$f809e80f58e251d1(props, state, triggerRef) {
     let { autoComplete: autoComplete , name: name , isDisabled: isDisabled  } = props;
     let modality = (0, $thkiX$useInteractionModality)();
     let { visuallyHiddenProps: visuallyHiddenProps  } = (0, $thkiX$useVisuallyHidden)();
+    (0, $thkiX$useFormReset)(props.selectRef, state.selectedKey, state.setSelectedKey);
     var _state_selectedKey;
     // In Safari, the <select> cannot have `display: none` or `hidden` for autofill to work.
     // In Firefox, there must be a <label> to identify the <select> whereas other browsers
@@ -213,12 +215,19 @@ function $bdd25dc72710631f$export$f809e80f58e251d1(props, state, triggerRef) {
 }
 function $bdd25dc72710631f$export$cbd84cdb2e668835(props) {
     let { state: state , triggerRef: triggerRef , label: label , name: name , isDisabled: isDisabled  } = props;
-    let { containerProps: containerProps , inputProps: inputProps , selectProps: selectProps  } = $bdd25dc72710631f$export$f809e80f58e251d1(props, state, triggerRef);
+    let selectRef = (0, $thkiX$useRef)(null);
+    let { containerProps: containerProps , inputProps: inputProps , selectProps: selectProps  } = $bdd25dc72710631f$export$f809e80f58e251d1({
+        ...props,
+        selectRef: selectRef
+    }, state, triggerRef);
     var _state_selectedKey;
     // If used in a <form>, use a hidden input so the value can be submitted to a server.
     // If the collection isn't too big, use a hidden <select> element for this so that browser
     // autofill will work. Otherwise, use an <input type="hidden">.
-    if (state.collection.size <= 300) return /*#__PURE__*/ (0, $thkiX$react).createElement("div", containerProps, /*#__PURE__*/ (0, $thkiX$react).createElement("input", inputProps), /*#__PURE__*/ (0, $thkiX$react).createElement("label", null, label, /*#__PURE__*/ (0, $thkiX$react).createElement("select", selectProps, /*#__PURE__*/ (0, $thkiX$react).createElement("option", null), [
+    if (state.collection.size <= 300) return /*#__PURE__*/ (0, $thkiX$react).createElement("div", containerProps, /*#__PURE__*/ (0, $thkiX$react).createElement("input", inputProps), /*#__PURE__*/ (0, $thkiX$react).createElement("label", null, label, /*#__PURE__*/ (0, $thkiX$react).createElement("select", {
+        ...selectProps,
+        ref: selectRef
+    }, /*#__PURE__*/ (0, $thkiX$react).createElement("option", null), [
         ...state.collection.getKeys()
     ].map((key)=>{
         let item = state.collection.getItem(key);

package/dist/module.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-aria/select/src/index.ts","packages/@react-aria/select/src/useSelect.ts","packages/@react-aria/select/src/HiddenSelect.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 */\nexport {useSelect} from './useSelect';\nexport {useHiddenSelect, HiddenSelect} from './HiddenSelect';\nexport type {AriaSelectOptions, SelectAria} from './useSelect';\nexport type {AriaHiddenSelectProps, HiddenSelectProps} from './HiddenSelect';\nexport type {AriaSelectProps} from '@react-types/select';\n","/*\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 {AriaListBoxOptions} from '@react-aria/listbox';\nimport {AriaSelectProps} from '@react-types/select';\nimport {chain, filterDOMProps, mergeProps, useId} from '@react-aria/utils';\nimport {DOMAttributes, FocusableElement, KeyboardDelegate} from '@react-types/shared';\nimport {FocusEvent, RefObject, useMemo} from 'react';\nimport {ListKeyboardDelegate, useTypeSelect} from '@react-aria/selection';\nimport {SelectState} from '@react-stately/select';\nimport {setInteractionModality} from '@react-aria/interactions';\nimport {useCollator} from '@react-aria/i18n';\nimport {useField} from '@react-aria/label';\nimport {useMenuTrigger} from '@react-aria/menu';\n\nexport interface AriaSelectOptions<T> extends Omit<AriaSelectProps<T>, 'children'> {\n  /**\n   * An optional keyboard delegate implementation for type to select,\n   * to override the default.\n   */\n  keyboardDelegate?: KeyboardDelegate\n}\n\nexport interface SelectAria<T> {\n  /** Props for the label element. */\n  labelProps: DOMAttributes,\n\n  /** Props for the popup trigger element. */\n  triggerProps: AriaButtonProps,\n\n  /** Props for the element representing the selected value. */\n  valueProps: DOMAttributes,\n\n  /** Props for the popup. */\n  menuProps: AriaListBoxOptions<T>,\n\n  /** Props for the select's description element, if any. */\n  descriptionProps: DOMAttributes,\n\n  /** Props for the select's error message element, if any. */\n  errorMessageProps: DOMAttributes\n}\n\n/**\n * Provides the behavior and accessibility implementation for a select component.\n * A select displays a collapsible list of options and allows a user to select one of them.\n * @param props - Props for the select.\n * @param state - State for the select, as returned by `useListState`.\n */\nexport function useSelect<T>(props: AriaSelectOptions<T>, state: SelectState<T>, ref: RefObject<FocusableElement>): SelectAria<T> {\n  let {\n    keyboardDelegate,\n    isDisabled\n  } = props;\n\n  // By default, a KeyboardDelegate is provided which uses the DOM to query layout information (e.g. for page up/page down).\n  // When virtualized, the layout object will be passed in as a prop and override this.\n  let collator = useCollator({usage: 'search', sensitivity: 'base'});\n  let delegate = useMemo(() => keyboardDelegate || new ListKeyboardDelegate(state.collection, state.disabledKeys, null, collator), [keyboardDelegate, state.collection, state.disabledKeys, collator]);\n\n  let {menuTriggerProps, menuProps} = useMenuTrigger<T>(\n    {\n      isDisabled,\n      type: 'listbox'\n    },\n    state,\n    ref\n  );\n\n  let onKeyDown = (e: KeyboardEvent) => {\n    switch (e.key) {\n      case 'ArrowLeft': {\n        // prevent scrolling containers\n        e.preventDefault();\n\n        let key = state.selectedKey != null ? delegate.getKeyAbove(state.selectedKey) : delegate.getFirstKey();\n        if (key) {\n          state.setSelectedKey(key);\n        }\n        break;\n      }\n      case 'ArrowRight': {\n        // prevent scrolling containers\n        e.preventDefault();\n\n        let key = state.selectedKey != null ? delegate.getKeyBelow(state.selectedKey) : delegate.getFirstKey();\n        if (key) {\n          state.setSelectedKey(key);\n        }\n        break;\n      }\n    }\n  };\n\n  let {typeSelectProps} = useTypeSelect({\n    keyboardDelegate: delegate,\n    selectionManager: state.selectionManager,\n    onTypeSelect(key) {\n      state.setSelectedKey(key);\n    }\n  });\n\n  let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({\n    ...props,\n    labelElementType: 'span'\n  });\n\n  typeSelectProps.onKeyDown = typeSelectProps.onKeyDownCapture;\n  delete typeSelectProps.onKeyDownCapture;\n\n  let domProps = filterDOMProps(props, {labelable: true});\n  let triggerProps = mergeProps(typeSelectProps, menuTriggerProps, fieldProps);\n\n  let valueId = useId();\n\n  return {\n    labelProps: {\n      ...labelProps,\n      onClick: () => {\n        if (!props.isDisabled) {\n          ref.current.focus();\n\n          // Show the focus ring so the user knows where focus went\n          setInteractionModality('keyboard');\n        }\n      }\n    },\n    triggerProps: mergeProps(domProps, {\n      ...triggerProps,\n      isDisabled,\n      onKeyDown: chain(triggerProps.onKeyDown, onKeyDown, props.onKeyDown),\n      onKeyUp: props.onKeyUp,\n      'aria-labelledby': [\n        valueId,\n        triggerProps['aria-labelledby'],\n        triggerProps['aria-label'] && !triggerProps['aria-labelledby'] ? triggerProps.id : null\n      ].filter(Boolean).join(' '),\n      onFocus(e: FocusEvent) {\n        if (state.isFocused) {\n          return;\n        }\n\n        if (props.onFocus) {\n          props.onFocus(e);\n        }\n\n        if (props.onFocusChange) {\n          props.onFocusChange(true);\n        }\n\n        state.setFocused(true);\n      },\n      onBlur(e: FocusEvent) {\n        if (state.isOpen) {\n          return;\n        }\n\n        if (props.onBlur) {\n          props.onBlur(e);\n        }\n\n        if (props.onFocusChange) {\n          props.onFocusChange(false);\n        }\n\n        state.setFocused(false);\n      }\n    }),\n    valueProps: {\n      id: valueId\n    },\n    menuProps: {\n      ...menuProps,\n      autoFocus: state.focusStrategy || true,\n      shouldSelectOnPressUp: true,\n      shouldFocusOnHover: true,\n      disallowEmptySelection: true,\n      onBlur: (e) => {\n        if (e.currentTarget.contains(e.relatedTarget as Node)) {\n          return;\n        }\n\n        if (props.onBlur) {\n          props.onBlur(e);\n        }\n\n        if (props.onFocusChange) {\n          props.onFocusChange(false);\n        }\n\n        state.setFocused(false);\n      },\n      'aria-labelledby': [\n        fieldProps['aria-labelledby'],\n        triggerProps['aria-label'] && !fieldProps['aria-labelledby'] ? triggerProps.id : null\n      ].filter(Boolean).join(' ')\n    },\n    descriptionProps,\n    errorMessageProps\n  };\n}\n","/*\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 {FocusableElement} from '@react-types/shared';\nimport React, {ReactNode, RefObject} from 'react';\nimport {SelectState} from '@react-stately/select';\nimport {useInteractionModality} from '@react-aria/interactions';\nimport {useVisuallyHidden} from '@react-aria/visually-hidden';\n\nexport interface AriaHiddenSelectProps {\n  /**\n   * Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete).\n   */\n   autoComplete?: string,\n\n  /** The text label for the select. */\n  label?: ReactNode,\n\n  /** HTML form input name. */\n  name?: string,\n\n  /** Sets the disabled state of the select and input. */\n  isDisabled?: boolean\n}\n\nexport interface HiddenSelectProps<T> extends AriaHiddenSelectProps {\n  /** State for the select. */\n  state: SelectState<T>,\n\n  /** A ref to the trigger element. */\n  triggerRef: RefObject<FocusableElement>\n}\n\n/**\n * Provides the behavior and accessibility implementation for a hidden `<select>` element, which\n * can be used in combination with `useSelect` to support browser form autofill, mobile form\n * navigation, and native HTML form submission.\n */\nexport function useHiddenSelect<T>(props: AriaHiddenSelectProps, state: SelectState<T>, triggerRef: RefObject<FocusableElement>) {\n  let {autoComplete, name, isDisabled} = props;\n  let modality = useInteractionModality();\n  let {visuallyHiddenProps} = useVisuallyHidden();\n\n  // In Safari, the <select> cannot have `display: none` or `hidden` for autofill to work.\n  // In Firefox, there must be a <label> to identify the <select> whereas other browsers\n  // seem to identify it just by surrounding text.\n  // The solution is to use <VisuallyHidden> to hide the elements, which clips the elements to a\n  // 1px rectangle. In addition, we hide from screen readers with aria-hidden, and make the <select>\n  // non tabbable with tabIndex={-1}.\n  //\n  // In mobile browsers, there are next/previous buttons above the software keyboard for navigating\n  // between fields in a form. These only support native form inputs that are tabbable. In order to\n  // support those, an additional hidden input is used to marshall focus to the button. It is tabbable\n  // except when the button is focused, so that shift tab works properly to go to the actual previous\n  // input in the form. Using the <select> for this also works, but Safari on iOS briefly flashes\n  // the native menu on focus, so this isn't ideal. A font-size of 16px or greater is required to\n  // prevent Safari from zooming in on the input when it is focused.\n  //\n  // If the current interaction modality is null, then the user hasn't interacted with the page yet.\n  // In this case, we set the tabIndex to -1 on the input element so that automated accessibility\n  // checkers don't throw false-positives about focusable elements inside an aria-hidden parent.\n  return {\n    containerProps: {\n      ...visuallyHiddenProps,\n      'aria-hidden': true\n    },\n    inputProps: {\n      type: 'text',\n      tabIndex: modality == null || state.isFocused || state.isOpen ? -1 : 0,\n      style: {fontSize: 16},\n      onFocus: () => triggerRef.current.focus(),\n      disabled: isDisabled\n    },\n    selectProps: {\n      tabIndex: -1,\n      autoComplete,\n      disabled: isDisabled,\n      name,\n      size: state.collection.size,\n      value: state.selectedKey ?? '',\n      onChange: (e: React.ChangeEvent<HTMLSelectElement>) => state.setSelectedKey(e.target.value)\n    }\n  };\n}\n\n/**\n * Renders a hidden native `<select>` element, which can be used to support browser\n * form autofill, mobile form navigation, and native form submission.\n */\nexport function HiddenSelect<T>(props: HiddenSelectProps<T>) {\n  let {state, triggerRef, label, name, isDisabled} = props;\n  let {containerProps, inputProps, selectProps} = useHiddenSelect(props, state, triggerRef);\n\n  // If used in a <form>, use a hidden input so the value can be submitted to a server.\n  // If the collection isn't too big, use a hidden <select> element for this so that browser\n  // autofill will work. Otherwise, use an <input type=\"hidden\">.\n  if (state.collection.size <= 300) {\n    return (\n      <div {...containerProps}>\n        <input {...inputProps} />\n        <label>\n          {label}\n          <select {...selectProps}>\n            <option />\n            {[...state.collection.getKeys()].map(key => {\n              let item = state.collection.getItem(key);\n              if (item.type === 'item') {\n                return (\n                  <option\n                    key={item.key}\n                    value={item.key}>\n                    {item.textValue}\n                  </option>\n                );\n              }\n            })}\n          </select>\n        </label>\n      </div>\n    );\n  } else if (name) {\n    return (\n      <input\n        type=\"hidden\"\n        autoComplete={selectProps.autoComplete}\n        name={name}\n        disabled={isDisabled}\n        value={state.selectedKey ?? ''} />\n    );\n  }\n\n  return null;\n}\n"],"names":[],"version":3,"file":"module.js.map"}
+{"mappings":"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","sources":["packages/@react-aria/select/src/index.ts","packages/@react-aria/select/src/useSelect.ts","packages/@react-aria/select/src/HiddenSelect.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 */\nexport {useSelect} from './useSelect';\nexport {useHiddenSelect, HiddenSelect} from './HiddenSelect';\nexport type {AriaSelectOptions, SelectAria} from './useSelect';\nexport type {AriaHiddenSelectProps, HiddenSelectProps} from './HiddenSelect';\nexport type {AriaSelectProps} from '@react-types/select';\n","/*\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 {AriaListBoxOptions} from '@react-aria/listbox';\nimport {AriaSelectProps} from '@react-types/select';\nimport {chain, filterDOMProps, mergeProps, useId} from '@react-aria/utils';\nimport {DOMAttributes, FocusableElement, KeyboardDelegate} from '@react-types/shared';\nimport {FocusEvent, RefObject, useMemo} from 'react';\nimport {ListKeyboardDelegate, useTypeSelect} from '@react-aria/selection';\nimport {SelectState} from '@react-stately/select';\nimport {setInteractionModality} from '@react-aria/interactions';\nimport {useCollator} from '@react-aria/i18n';\nimport {useField} from '@react-aria/label';\nimport {useMenuTrigger} from '@react-aria/menu';\n\nexport interface AriaSelectOptions<T> extends Omit<AriaSelectProps<T>, 'children'> {\n  /**\n   * An optional keyboard delegate implementation for type to select,\n   * to override the default.\n   */\n  keyboardDelegate?: KeyboardDelegate\n}\n\nexport interface SelectAria<T> {\n  /** Props for the label element. */\n  labelProps: DOMAttributes,\n\n  /** Props for the popup trigger element. */\n  triggerProps: AriaButtonProps,\n\n  /** Props for the element representing the selected value. */\n  valueProps: DOMAttributes,\n\n  /** Props for the popup. */\n  menuProps: AriaListBoxOptions<T>,\n\n  /** Props for the select's description element, if any. */\n  descriptionProps: DOMAttributes,\n\n  /** Props for the select's error message element, if any. */\n  errorMessageProps: DOMAttributes\n}\n\n/**\n * Provides the behavior and accessibility implementation for a select component.\n * A select displays a collapsible list of options and allows a user to select one of them.\n * @param props - Props for the select.\n * @param state - State for the select, as returned by `useListState`.\n */\nexport function useSelect<T>(props: AriaSelectOptions<T>, state: SelectState<T>, ref: RefObject<FocusableElement>): SelectAria<T> {\n  let {\n    keyboardDelegate,\n    isDisabled\n  } = props;\n\n  // By default, a KeyboardDelegate is provided which uses the DOM to query layout information (e.g. for page up/page down).\n  // When virtualized, the layout object will be passed in as a prop and override this.\n  let collator = useCollator({usage: 'search', sensitivity: 'base'});\n  let delegate = useMemo(() => keyboardDelegate || new ListKeyboardDelegate(state.collection, state.disabledKeys, null, collator), [keyboardDelegate, state.collection, state.disabledKeys, collator]);\n\n  let {menuTriggerProps, menuProps} = useMenuTrigger<T>(\n    {\n      isDisabled,\n      type: 'listbox'\n    },\n    state,\n    ref\n  );\n\n  let onKeyDown = (e: KeyboardEvent) => {\n    switch (e.key) {\n      case 'ArrowLeft': {\n        // prevent scrolling containers\n        e.preventDefault();\n\n        let key = state.selectedKey != null ? delegate.getKeyAbove(state.selectedKey) : delegate.getFirstKey();\n        if (key) {\n          state.setSelectedKey(key);\n        }\n        break;\n      }\n      case 'ArrowRight': {\n        // prevent scrolling containers\n        e.preventDefault();\n\n        let key = state.selectedKey != null ? delegate.getKeyBelow(state.selectedKey) : delegate.getFirstKey();\n        if (key) {\n          state.setSelectedKey(key);\n        }\n        break;\n      }\n    }\n  };\n\n  let {typeSelectProps} = useTypeSelect({\n    keyboardDelegate: delegate,\n    selectionManager: state.selectionManager,\n    onTypeSelect(key) {\n      state.setSelectedKey(key);\n    }\n  });\n\n  let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({\n    ...props,\n    labelElementType: 'span'\n  });\n\n  typeSelectProps.onKeyDown = typeSelectProps.onKeyDownCapture;\n  delete typeSelectProps.onKeyDownCapture;\n\n  let domProps = filterDOMProps(props, {labelable: true});\n  let triggerProps = mergeProps(typeSelectProps, menuTriggerProps, fieldProps);\n\n  let valueId = useId();\n\n  return {\n    labelProps: {\n      ...labelProps,\n      onClick: () => {\n        if (!props.isDisabled) {\n          ref.current.focus();\n\n          // Show the focus ring so the user knows where focus went\n          setInteractionModality('keyboard');\n        }\n      }\n    },\n    triggerProps: mergeProps(domProps, {\n      ...triggerProps,\n      isDisabled,\n      onKeyDown: chain(triggerProps.onKeyDown, onKeyDown, props.onKeyDown),\n      onKeyUp: props.onKeyUp,\n      'aria-labelledby': [\n        valueId,\n        triggerProps['aria-labelledby'],\n        triggerProps['aria-label'] && !triggerProps['aria-labelledby'] ? triggerProps.id : null\n      ].filter(Boolean).join(' '),\n      onFocus(e: FocusEvent) {\n        if (state.isFocused) {\n          return;\n        }\n\n        if (props.onFocus) {\n          props.onFocus(e);\n        }\n\n        if (props.onFocusChange) {\n          props.onFocusChange(true);\n        }\n\n        state.setFocused(true);\n      },\n      onBlur(e: FocusEvent) {\n        if (state.isOpen) {\n          return;\n        }\n\n        if (props.onBlur) {\n          props.onBlur(e);\n        }\n\n        if (props.onFocusChange) {\n          props.onFocusChange(false);\n        }\n\n        state.setFocused(false);\n      }\n    }),\n    valueProps: {\n      id: valueId\n    },\n    menuProps: {\n      ...menuProps,\n      autoFocus: state.focusStrategy || true,\n      shouldSelectOnPressUp: true,\n      shouldFocusOnHover: true,\n      disallowEmptySelection: true,\n      onBlur: (e) => {\n        if (e.currentTarget.contains(e.relatedTarget as Node)) {\n          return;\n        }\n\n        if (props.onBlur) {\n          props.onBlur(e);\n        }\n\n        if (props.onFocusChange) {\n          props.onFocusChange(false);\n        }\n\n        state.setFocused(false);\n      },\n      'aria-labelledby': [\n        fieldProps['aria-labelledby'],\n        triggerProps['aria-label'] && !fieldProps['aria-labelledby'] ? triggerProps.id : null\n      ].filter(Boolean).join(' ')\n    },\n    descriptionProps,\n    errorMessageProps\n  };\n}\n","/*\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 {FocusableElement} from '@react-types/shared';\nimport React, {ReactNode, RefObject, useRef} from 'react';\nimport {SelectState} from '@react-stately/select';\nimport {useFormReset} from '@react-aria/utils';\nimport {useInteractionModality} from '@react-aria/interactions';\nimport {useVisuallyHidden} from '@react-aria/visually-hidden';\n\nexport interface AriaHiddenSelectProps {\n  /**\n   * Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete).\n   */\n  autoComplete?: string,\n\n  /** The text label for the select. */\n  label?: ReactNode,\n\n  /** HTML form input name. */\n  name?: string,\n\n  /** Sets the disabled state of the select and input. */\n  isDisabled?: boolean\n}\n\nexport interface HiddenSelectProps<T> extends AriaHiddenSelectProps {\n  /** State for the select. */\n  state: SelectState<T>,\n\n  /** A ref to the trigger element. */\n  triggerRef: RefObject<FocusableElement>\n}\n\nexport interface AriaHiddenSelectOptions extends AriaHiddenSelectProps {\n  /** A ref to the hidden `<select>` element. */\n  selectRef?: RefObject<HTMLSelectElement>\n}\n\n/**\n * Provides the behavior and accessibility implementation for a hidden `<select>` element, which\n * can be used in combination with `useSelect` to support browser form autofill, mobile form\n * navigation, and native HTML form submission.\n */\nexport function useHiddenSelect<T>(props: AriaHiddenSelectOptions, state: SelectState<T>, triggerRef: RefObject<FocusableElement>) {\n  let {autoComplete, name, isDisabled} = props;\n  let modality = useInteractionModality();\n  let {visuallyHiddenProps} = useVisuallyHidden();\n\n  useFormReset(props.selectRef, state.selectedKey, state.setSelectedKey);\n\n  // In Safari, the <select> cannot have `display: none` or `hidden` for autofill to work.\n  // In Firefox, there must be a <label> to identify the <select> whereas other browsers\n  // seem to identify it just by surrounding text.\n  // The solution is to use <VisuallyHidden> to hide the elements, which clips the elements to a\n  // 1px rectangle. In addition, we hide from screen readers with aria-hidden, and make the <select>\n  // non tabbable with tabIndex={-1}.\n  //\n  // In mobile browsers, there are next/previous buttons above the software keyboard for navigating\n  // between fields in a form. These only support native form inputs that are tabbable. In order to\n  // support those, an additional hidden input is used to marshall focus to the button. It is tabbable\n  // except when the button is focused, so that shift tab works properly to go to the actual previous\n  // input in the form. Using the <select> for this also works, but Safari on iOS briefly flashes\n  // the native menu on focus, so this isn't ideal. A font-size of 16px or greater is required to\n  // prevent Safari from zooming in on the input when it is focused.\n  //\n  // If the current interaction modality is null, then the user hasn't interacted with the page yet.\n  // In this case, we set the tabIndex to -1 on the input element so that automated accessibility\n  // checkers don't throw false-positives about focusable elements inside an aria-hidden parent.\n  return {\n    containerProps: {\n      ...visuallyHiddenProps,\n      'aria-hidden': true\n    },\n    inputProps: {\n      type: 'text',\n      tabIndex: modality == null || state.isFocused || state.isOpen ? -1 : 0,\n      style: {fontSize: 16},\n      onFocus: () => triggerRef.current.focus(),\n      disabled: isDisabled\n    },\n    selectProps: {\n      tabIndex: -1,\n      autoComplete,\n      disabled: isDisabled,\n      name,\n      size: state.collection.size,\n      value: state.selectedKey ?? '',\n      onChange: (e: React.ChangeEvent<HTMLSelectElement>) => state.setSelectedKey(e.target.value)\n    }\n  };\n}\n\n/**\n * Renders a hidden native `<select>` element, which can be used to support browser\n * form autofill, mobile form navigation, and native form submission.\n */\nexport function HiddenSelect<T>(props: HiddenSelectProps<T>) {\n  let {state, triggerRef, label, name, isDisabled} = props;\n  let selectRef = useRef(null);\n  let {containerProps, inputProps, selectProps} = useHiddenSelect({...props, selectRef}, state, triggerRef);\n\n  // If used in a <form>, use a hidden input so the value can be submitted to a server.\n  // If the collection isn't too big, use a hidden <select> element for this so that browser\n  // autofill will work. Otherwise, use an <input type=\"hidden\">.\n  if (state.collection.size <= 300) {\n    return (\n      <div {...containerProps}>\n        <input {...inputProps} />\n        <label>\n          {label}\n          <select {...selectProps} ref={selectRef}>\n            <option />\n            {[...state.collection.getKeys()].map(key => {\n              let item = state.collection.getItem(key);\n              if (item.type === 'item') {\n                return (\n                  <option\n                    key={item.key}\n                    value={item.key}>\n                    {item.textValue}\n                  </option>\n                );\n              }\n            })}\n          </select>\n        </label>\n      </div>\n    );\n  } else if (name) {\n    return (\n      <input\n        type=\"hidden\"\n        autoComplete={selectProps.autoComplete}\n        name={name}\n        disabled={isDisabled}\n        value={state.selectedKey ?? ''} />\n    );\n  }\n\n  return null;\n}\n"],"names":[],"version":3,"file":"module.js.map"}

package/dist/types.d.ts

@@ -50,12 +50,16 @@ export interface HiddenSelectProps<T> extends AriaHiddenSelectProps {
     /** A ref to the trigger element. */
     triggerRef: RefObject<FocusableElement>;
 }
+interface AriaHiddenSelectOptions extends AriaHiddenSelectProps {
+    /** A ref to the hidden `<select>` element. */
+    selectRef?: RefObject<HTMLSelectElement>;
+}
 /**
  * Provides the behavior and accessibility implementation for a hidden `<select>` element, which
  * can be used in combination with `useSelect` to support browser form autofill, mobile form
  * navigation, and native HTML form submission.
  */
-export function useHiddenSelect<T>(props: AriaHiddenSelectProps, state: SelectState<T>, triggerRef: RefObject<FocusableElement>): {
+export function useHiddenSelect<T>(props: AriaHiddenSelectOptions, state: SelectState<T>, triggerRef: RefObject<FocusableElement>): {
     containerProps: {
         'aria-hidden': boolean;
         id?: string;

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"mappings":";;;;;;AAyBA,mCAAmC,CAAC,CAAE,SAAQ,IAAI,CAAC,gBAAgB,CAAC,CAAC,EAAE,UAAU,CAAC;IAChF;;;OAGG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAA;CACpC;AAED,4BAA4B,CAAC;IAC3B,mCAAmC;IACnC,UAAU,EAAE,aAAa,CAAC;IAE1B,2CAA2C;IAC3C,YAAY,EAAE,eAAe,CAAC;IAE9B,6DAA6D;IAC7D,UAAU,EAAE,aAAa,CAAC;IAE1B,2BAA2B;IAC3B,SAAS,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAEjC,0DAA0D;IAC1D,gBAAgB,EAAE,aAAa,CAAC;IAEhC,4DAA4D;IAC5D,iBAAiB,EAAE,aAAa,CAAA;CACjC;AAED;;;;;GAKG;AACH,0BAA0B,CAAC,EAAE,KAAK,EAAE,kBAAkB,CAAC,CAAC,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,EAAE,GAAG,EAAE,UAAU,gBAAgB,CAAC,GAAG,WAAW,CAAC,CAAC,CAuJhI;AChMD;IACE;;OAEG;IACF,YAAY,CAAC,EAAE,MAAM,CAAC;IAEvB,qCAAqC;IACrC,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,uDAAuD;IACvD,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,mCAAmC,CAAC,CAAE,SAAQ,qBAAqB;IACjE,4BAA4B;IAC5B,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC;IAEtB,oCAAoC;IACpC,UAAU,EAAE,UAAU,gBAAgB,CAAC,CAAA;CACxC;AAED;;;;GAIG;AACH,gCAAgC,CAAC,EAAE,KAAK,EAAE,qBAAqB,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,EAAE,UAAU,EAAE,UAAU,gBAAgB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBA0C3G,MAAM,WAAW,CAAC,iBAAiB,CAAC;;EAGvD;AAED;;;GAGG;AACH,6BAA6B,CAAC,EAAE,KAAK,EAAE,kBAAkB,CAAC,CAAC,qBA2C1D;AC9HD,YAAY,EAAC,eAAe,EAAC,MAAM,qBAAqB,CAAC","sources":["packages/@react-aria/select/src/packages/@react-aria/select/src/useSelect.ts","packages/@react-aria/select/src/packages/@react-aria/select/src/HiddenSelect.tsx","packages/@react-aria/select/src/packages/@react-aria/select/src/index.ts","packages/@react-aria/select/src/index.ts"],"sourcesContent":[null,null,null,"/*\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 */\nexport {useSelect} from './useSelect';\nexport {useHiddenSelect, HiddenSelect} from './HiddenSelect';\nexport type {AriaSelectOptions, SelectAria} from './useSelect';\nexport type {AriaHiddenSelectProps, HiddenSelectProps} from './HiddenSelect';\nexport type {AriaSelectProps} from '@react-types/select';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
+{"mappings":";;;;;;AAyBA,mCAAmC,CAAC,CAAE,SAAQ,IAAI,CAAC,gBAAgB,CAAC,CAAC,EAAE,UAAU,CAAC;IAChF;;;OAGG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAA;CACpC;AAED,4BAA4B,CAAC;IAC3B,mCAAmC;IACnC,UAAU,EAAE,aAAa,CAAC;IAE1B,2CAA2C;IAC3C,YAAY,EAAE,eAAe,CAAC;IAE9B,6DAA6D;IAC7D,UAAU,EAAE,aAAa,CAAC;IAE1B,2BAA2B;IAC3B,SAAS,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAEjC,0DAA0D;IAC1D,gBAAgB,EAAE,aAAa,CAAC;IAEhC,4DAA4D;IAC5D,iBAAiB,EAAE,aAAa,CAAA;CACjC;AAED;;;;;GAKG;AACH,0BAA0B,CAAC,EAAE,KAAK,EAAE,kBAAkB,CAAC,CAAC,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,EAAE,GAAG,EAAE,UAAU,gBAAgB,CAAC,GAAG,WAAW,CAAC,CAAC,CAuJhI;AC/LD;IACE;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,qCAAqC;IACrC,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,uDAAuD;IACvD,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,mCAAmC,CAAC,CAAE,SAAQ,qBAAqB;IACjE,4BAA4B;IAC5B,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC;IAEtB,oCAAoC;IACpC,UAAU,EAAE,UAAU,gBAAgB,CAAC,CAAA;CACxC;AAED,iCAAyC,SAAQ,qBAAqB;IACpE,8CAA8C;IAC9C,SAAS,CAAC,EAAE,UAAU,iBAAiB,CAAC,CAAA;CACzC;AAED;;;;GAIG;AACH,gCAAgC,CAAC,EAAE,KAAK,EAAE,uBAAuB,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,EAAE,UAAU,EAAE,UAAU,gBAAgB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBA4C7G,MAAM,WAAW,CAAC,iBAAiB,CAAC;;EAGvD;AAED;;;GAGG;AACH,6BAA6B,CAAC,EAAE,KAAK,EAAE,kBAAkB,CAAC,CAAC,qBA4C1D;ACvID,YAAY,EAAC,eAAe,EAAC,MAAM,qBAAqB,CAAC","sources":["packages/@react-aria/select/src/packages/@react-aria/select/src/useSelect.ts","packages/@react-aria/select/src/packages/@react-aria/select/src/HiddenSelect.tsx","packages/@react-aria/select/src/packages/@react-aria/select/src/index.ts","packages/@react-aria/select/src/index.ts"],"sourcesContent":[null,null,null,"/*\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 */\nexport {useSelect} from './useSelect';\nexport {useHiddenSelect, HiddenSelect} from './HiddenSelect';\nexport type {AriaSelectOptions, SelectAria} from './useSelect';\nexport type {AriaHiddenSelectProps, HiddenSelectProps} from './HiddenSelect';\nexport type {AriaSelectProps} from '@react-types/select';\n"],"names":[],"version":3,"file":"types.d.ts.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-aria/select",
-  "version": "3.11.1-nightly.4036+e4bc3269f",
+  "version": "3.11.1-nightly.4039+07f673acb",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -22,18 +22,18 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-aria/i18n": "3.0.0-nightly.2331+e4bc3269f",
-    "@react-aria/interactions": "3.0.0-nightly.2331+e4bc3269f",
-    "@react-aria/label": "3.0.0-nightly.2331+e4bc3269f",
-    "@react-aria/listbox": "3.10.1-nightly.4036+e4bc3269f",
-    "@react-aria/menu": "3.10.1-nightly.4036+e4bc3269f",
-    "@react-aria/selection": "3.0.0-nightly.2331+e4bc3269f",
-    "@react-aria/utils": "3.0.0-nightly.2331+e4bc3269f",
-    "@react-aria/visually-hidden": "3.0.0-nightly.2331+e4bc3269f",
-    "@react-stately/select": "3.5.3-nightly.4036+e4bc3269f",
-    "@react-types/button": "3.7.4-nightly.4036+e4bc3269f",
-    "@react-types/select": "3.8.2-nightly.4036+e4bc3269f",
-    "@react-types/shared": "3.0.0-nightly.2331+e4bc3269f",
+    "@react-aria/i18n": "3.0.0-nightly.2334+07f673acb",
+    "@react-aria/interactions": "3.0.0-nightly.2334+07f673acb",
+    "@react-aria/label": "3.0.0-nightly.2334+07f673acb",
+    "@react-aria/listbox": "3.10.1-nightly.4039+07f673acb",
+    "@react-aria/menu": "3.10.1-nightly.4039+07f673acb",
+    "@react-aria/selection": "3.0.0-nightly.2334+07f673acb",
+    "@react-aria/utils": "3.0.0-nightly.2334+07f673acb",
+    "@react-aria/visually-hidden": "3.0.0-nightly.2334+07f673acb",
+    "@react-stately/select": "3.5.3-nightly.4039+07f673acb",
+    "@react-types/button": "3.7.4-nightly.4039+07f673acb",
+    "@react-types/select": "3.8.2-nightly.4039+07f673acb",
+    "@react-types/shared": "3.0.0-nightly.2334+07f673acb",
     "@swc/helpers": "^0.5.0"
   },
   "peerDependencies": {
@@ -43,5 +43,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "e4bc3269fa41aa096700445c6bfa9c8620545e6a"
+  "gitHead": "07f673acb2d68144156df3aa0db6e91810b12c67"
 }

package/src/HiddenSelect.tsx

@@ -11,8 +11,9 @@
  */
 
 import {FocusableElement} from '@react-types/shared';
-import React, {ReactNode, RefObject} from 'react';
+import React, {ReactNode, RefObject, useRef} from 'react';
 import {SelectState} from '@react-stately/select';
+import {useFormReset} from '@react-aria/utils';
 import {useInteractionModality} from '@react-aria/interactions';
 import {useVisuallyHidden} from '@react-aria/visually-hidden';
 
@@ -20,7 +21,7 @@ export interface AriaHiddenSelectProps {
   /**
    * Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete).
    */
-   autoComplete?: string,
+  autoComplete?: string,
 
   /** The text label for the select. */
   label?: ReactNode,
@@ -40,16 +41,23 @@ export interface HiddenSelectProps<T> extends AriaHiddenSelectProps {
   triggerRef: RefObject<FocusableElement>
 }
 
+export interface AriaHiddenSelectOptions extends AriaHiddenSelectProps {
+  /** A ref to the hidden `<select>` element. */
+  selectRef?: RefObject<HTMLSelectElement>
+}
+
 /**
  * Provides the behavior and accessibility implementation for a hidden `<select>` element, which
  * can be used in combination with `useSelect` to support browser form autofill, mobile form
  * navigation, and native HTML form submission.
  */
-export function useHiddenSelect<T>(props: AriaHiddenSelectProps, state: SelectState<T>, triggerRef: RefObject<FocusableElement>) {
+export function useHiddenSelect<T>(props: AriaHiddenSelectOptions, state: SelectState<T>, triggerRef: RefObject<FocusableElement>) {
   let {autoComplete, name, isDisabled} = props;
   let modality = useInteractionModality();
   let {visuallyHiddenProps} = useVisuallyHidden();
 
+  useFormReset(props.selectRef, state.selectedKey, state.setSelectedKey);
+
   // In Safari, the <select> cannot have `display: none` or `hidden` for autofill to work.
   // In Firefox, there must be a <label> to identify the <select> whereas other browsers
   // seem to identify it just by surrounding text.
@@ -98,7 +106,8 @@ export function useHiddenSelect<T>(props: AriaHiddenSelectProps, state: SelectSt
  */
 export function HiddenSelect<T>(props: HiddenSelectProps<T>) {
   let {state, triggerRef, label, name, isDisabled} = props;
-  let {containerProps, inputProps, selectProps} = useHiddenSelect(props, state, triggerRef);
+  let selectRef = useRef(null);
+  let {containerProps, inputProps, selectProps} = useHiddenSelect({...props, selectRef}, state, triggerRef);
 
   // If used in a <form>, use a hidden input so the value can be submitted to a server.
   // If the collection isn't too big, use a hidden <select> element for this so that browser
@@ -109,7 +118,7 @@ export function HiddenSelect<T>(props: HiddenSelectProps<T>) {
         <input {...inputProps} />
         <label>
           {label}
-          <select {...selectProps}>
+          <select {...selectProps} ref={selectRef}>
             <option />
             {[...state.collection.getKeys()].map(key => {
               let item = state.collection.getItem(key);