@react-aria/select 3.15.6 → 3.16.0

package/dist/HiddenSelect.main.js

@@ -32,10 +32,17 @@ $parcel$export(module.exports, "HiddenSelect", () => $6eae0e0872a4cdd4$export$cb
 
 function $6eae0e0872a4cdd4$export$f809e80f58e251d1(props, state, triggerRef) {
     let data = (0, $23a1e93dc7fa8653$exports.selectData).get(state) || {};
-    let { autoComplete: autoComplete, name: name = data.name, isDisabled: isDisabled = data.isDisabled } = props;
+    let { autoComplete: autoComplete, name: name = data.name, form: form = data.form, isDisabled: isDisabled = data.isDisabled } = props;
     let { validationBehavior: validationBehavior, isRequired: isRequired } = data;
-    let { visuallyHiddenProps: visuallyHiddenProps } = (0, $ccxQv$reactariavisuallyhidden.useVisuallyHidden)();
-    (0, $ccxQv$reactariautils.useFormReset)(props.selectRef, state.selectedKey, state.setSelectedKey);
+    let { visuallyHiddenProps: visuallyHiddenProps } = (0, $ccxQv$reactariavisuallyhidden.useVisuallyHidden)({
+        style: {
+            // Prevent page scrolling.
+            position: 'fixed',
+            top: 0,
+            left: 0
+        }
+    });
+    (0, $ccxQv$reactariautils.useFormReset)(props.selectRef, state.defaultSelectedKey, state.setSelectedKey);
     (0, $ccxQv$reactariaform.useFormValidation)({
         validationBehavior: validationBehavior,
         focus: ()=>{
@@ -43,6 +50,10 @@ function $6eae0e0872a4cdd4$export$f809e80f58e251d1(props, state, triggerRef) {
             return (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();
         }
     }, state, props.selectRef);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    let onChange = (0, $ccxQv$react.useCallback)((e)=>state.setSelectedKey(e.currentTarget.value), [
+        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
@@ -70,19 +81,21 @@ function $6eae0e0872a4cdd4$export$f809e80f58e251d1(props, state, triggerRef) {
             disabled: isDisabled,
             required: validationBehavior === 'native' && isRequired,
             name: name,
-            value: (_state_selectedKey = state.selectedKey) !== null && _state_selectedKey !== void 0 ? _state_selectedKey : undefined,
-            onChange: (e)=>state.setSelectedKey(e.target.value)
+            form: form,
+            value: (_state_selectedKey = state.selectedKey) !== null && _state_selectedKey !== void 0 ? _state_selectedKey : '',
+            onChange: onChange,
+            onInput: onChange
         }
     };
 }
 function $6eae0e0872a4cdd4$export$cbd84cdb2e668835(props) {
-    let { state: state, triggerRef: triggerRef, label: label, name: name, isDisabled: isDisabled } = props;
+    let { state: state, triggerRef: triggerRef, label: label, name: name, form: form, isDisabled: isDisabled } = props;
     let selectRef = (0, $ccxQv$react.useRef)(null);
+    let inputRef = (0, $ccxQv$react.useRef)(null);
     let { containerProps: containerProps, selectProps: selectProps } = $6eae0e0872a4cdd4$export$f809e80f58e251d1({
         ...props,
-        selectRef: selectRef
+        selectRef: state.collection.size <= 300 ? selectRef : inputRef
     }, 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">.
@@ -101,13 +114,35 @@ function $6eae0e0872a4cdd4$export$cbd84cdb2e668835(props) {
             value: item.key
         }, item.textValue);
     }))));
-    else if (name) return /*#__PURE__*/ (0, ($parcel$interopDefault($ccxQv$react))).createElement("input", {
-        type: "hidden",
-        autoComplete: selectProps.autoComplete,
-        name: name,
-        disabled: isDisabled,
-        value: (_state_selectedKey = state.selectedKey) !== null && _state_selectedKey !== void 0 ? _state_selectedKey : ''
-    });
+    else if (name) {
+        let data = (0, $23a1e93dc7fa8653$exports.selectData).get(state) || {};
+        let { validationBehavior: validationBehavior } = data;
+        var _state_selectedKey;
+        let inputProps = {
+            type: 'hidden',
+            autoComplete: selectProps.autoComplete,
+            name: name,
+            form: form,
+            disabled: isDisabled,
+            value: (_state_selectedKey = state.selectedKey) !== null && _state_selectedKey !== void 0 ? _state_selectedKey : ''
+        };
+        if (validationBehavior === 'native') // Use a hidden <input type="text"> rather than <input type="hidden">
+        // so that an empty value blocks HTML form submission when the field is required.
+        return /*#__PURE__*/ (0, ($parcel$interopDefault($ccxQv$react))).createElement("input", {
+            ...inputProps,
+            ref: inputRef,
+            style: {
+                display: 'none'
+            },
+            type: "text",
+            required: selectProps.required,
+            onChange: ()=>{}
+        });
+        return /*#__PURE__*/ (0, ($parcel$interopDefault($ccxQv$react))).createElement("input", {
+            ...inputProps,
+            ref: inputRef
+        });
+    }
     return null;
 }
 

package/dist/HiddenSelect.main.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAuDM,SAAS,0CAAmB,KAA8B,EAAE,KAAqB,EAAE,UAA8C;IACtI,IAAI,OAAO,CAAA,GAAA,oCAAS,EAAE,GAAG,CAAC,UAAU,CAAC;IACrC,IAAI,gBAAC,YAAY,QAAE,OAAO,KAAK,IAAI,cAAE,aAAa,KAAK,UAAU,EAAC,GAAG;IACrE,IAAI,sBAAC,kBAAkB,cAAE,UAAU,EAAC,GAAG;IACvC,IAAI,uBAAC,mBAAmB,EAAC,GAAG,CAAA,GAAA,gDAAgB;IAE5C,CAAA,GAAA,kCAAW,EAAE,MAAM,SAAS,EAAE,MAAM,WAAW,EAAE,MAAM,cAAc;IACrE,CAAA,GAAA,sCAAgB,EAAE;4BAChB;QACA,OAAO;gBAAM;oBAAA,sBAAA,WAAW,OAAO,cAAlB,0CAAA,oBAAoB,KAAK;;IACxC,GAAG,OAAO,MAAM,SAAS;QA0Bd;IAxBX,wFAAwF;IACxF,sFAAsF;IACtF,gDAAgD;IAChD,8FAA8F;IAC9F,kGAAkG;IAClG,mCAAmC;IACnC,OAAO;QACL,gBAAgB;YACd,GAAG,mBAAmB;YACtB,eAAe;YACf,aAAa;YACb,CAAC,gCAAgC,EAAE;YACnC,aAAa;YACb,CAAC,mBAAmB,EAAE;QACxB;QACA,YAAY;YACV,OAAO;gBAAC,SAAS;YAAM;QACzB;QACA,aAAa;YACX,UAAU;0BACV;YACA,UAAU;YACV,UAAU,uBAAuB,YAAY;kBAC7C;YACA,OAAO,CAAA,qBAAA,MAAM,WAAW,cAAjB,gCAAA,qBAAqB;YAC5B,UAAU,CAAC,IAA4C,MAAM,cAAc,CAAC,EAAE,MAAM,CAAC,KAAK;QAC5F;IACF;AACF;AAMO,SAAS,0CAAgB,KAA2B;IACzD,IAAI,SAAC,KAAK,cAAE,UAAU,SAAE,KAAK,QAAE,IAAI,cAAE,UAAU,EAAC,GAAG;IACnD,IAAI,YAAY,CAAA,GAAA,mBAAK,EAAE;IACvB,IAAI,kBAAC,cAAc,eAAE,WAAW,EAAC,GAAG,0CAAgB;QAAC,GAAG,KAAK;mBAAE;IAAS,GAAG,OAAO;QAmCrE;IAjCb,qFAAqF;IACrF,0FAA0F;IAC1F,+DAA+D;IAC/D,IAAI,MAAM,UAAU,CAAC,IAAI,IAAI,KAC3B,qBACE,0DAAC;QAAK,GAAG,cAAc;QAAE,eAAY;qBACnC,0DAAC,eACE,qBACD,0DAAC;QAAQ,GAAG,WAAW;QAAE,KAAK;qBAC5B,0DAAC,iBACA;WAAI,MAAM,UAAU,CAAC,OAAO;KAAG,CAAC,GAAG,CAAC,CAAA;QACnC,IAAI,OAAO,MAAM,UAAU,CAAC,OAAO,CAAC;QACpC,IAAI,QAAQ,KAAK,IAAI,KAAK,QACxB,qBACE,0DAAC;YACC,KAAK,KAAK,GAAG;YACb,OAAO,KAAK,GAAG;WACd,KAAK,SAAS;IAIvB;SAKH,IAAI,MACT,qBACE,0DAAC;QACC,MAAK;QACL,cAAc,YAAY,YAAY;QACtC,MAAM;QACN,UAAU;QACV,OAAO,CAAA,qBAAA,MAAM,WAAW,cAAjB,gCAAA,qBAAqB;;IAIlC,OAAO;AACT","sources":["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 */\n\nimport {FocusableElement, RefObject} from '@react-types/shared';\nimport React, {JSX, ReactNode, useRef} from 'react';\nimport {selectData} from './useSelect';\nimport {SelectState} from '@react-stately/select';\nimport {useFormReset} from '@react-aria/utils';\nimport {useFormValidation} from '@react-aria/form';\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 | null>\n}\n\nexport interface AriaHiddenSelectOptions extends AriaHiddenSelectProps {\n  /** A ref to the hidden `<select>` element. */\n  selectRef?: RefObject<HTMLSelectElement | null>\n}\n\nexport interface HiddenSelectAria {\n  /** Props for the container element. */\n  containerProps: React.HTMLAttributes<FocusableElement>,\n\n  /** Props for the hidden input element. */\n  inputProps: React.InputHTMLAttributes<HTMLInputElement>,\n\n  /** Props for the hidden select element. */\n  selectProps: React.SelectHTMLAttributes<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 | null>): HiddenSelectAria {\n  let data = selectData.get(state) || {};\n  let {autoComplete, name = data.name, isDisabled = data.isDisabled} = props;\n  let {validationBehavior, isRequired} = data;\n  let {visuallyHiddenProps} = useVisuallyHidden();\n\n  useFormReset(props.selectRef, state.selectedKey, state.setSelectedKey);\n  useFormValidation({\n    validationBehavior,\n    focus: () => triggerRef.current?.focus()\n  }, state, props.selectRef);\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  return {\n    containerProps: {\n      ...visuallyHiddenProps,\n      'aria-hidden': true,\n      // @ts-ignore\n      ['data-react-aria-prevent-focus']: true,\n      // @ts-ignore\n      ['data-a11y-ignore']: 'aria-hidden-focus'\n    },\n    inputProps: {\n      style: {display: 'none'}\n    },\n    selectProps: {\n      tabIndex: -1,\n      autoComplete,\n      disabled: isDisabled,\n      required: validationBehavior === 'native' && isRequired,\n      name,\n      value: state.selectedKey ?? undefined,\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>): JSX.Element | null {\n  let {state, triggerRef, label, name, isDisabled} = props;\n  let selectRef = useRef(null);\n  let {containerProps, 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} data-testid=\"hidden-select-container\">\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 && 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":"HiddenSelect.main.js.map"}
+{"mappings":"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","sources":["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 */\n\nimport {FocusableElement, RefObject} from '@react-types/shared';\nimport React, {InputHTMLAttributes, JSX, ReactNode, useCallback, useRef} from 'react';\nimport {selectData} from './useSelect';\nimport {SelectState} from '@react-stately/select';\nimport {useFormReset} from '@react-aria/utils';\nimport {useFormValidation} from '@react-aria/form';\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  /**\n   * The `<form>` element to associate the input with.\n   * The value of this attribute must be the id of a `<form>` in the same document.\n   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).\n   */\n  form?: 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 | null>\n}\n\nexport interface AriaHiddenSelectOptions extends AriaHiddenSelectProps {\n  /** A ref to the hidden `<select>` element. */\n  selectRef?: RefObject<HTMLSelectElement | HTMLInputElement | null>\n}\n\nexport interface HiddenSelectAria {\n  /** Props for the container element. */\n  containerProps: React.HTMLAttributes<FocusableElement>,\n\n  /** Props for the hidden input element. */\n  inputProps: React.InputHTMLAttributes<HTMLInputElement>,\n\n  /** Props for the hidden select element. */\n  selectProps: React.SelectHTMLAttributes<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 | null>): HiddenSelectAria {\n  let data = selectData.get(state) || {};\n  let {autoComplete, name = data.name, form = data.form, isDisabled = data.isDisabled} = props;\n  let {validationBehavior, isRequired} = data;\n  let {visuallyHiddenProps} = useVisuallyHidden({\n    style: {\n      // Prevent page scrolling.\n      position: 'fixed',\n      top: 0,\n      left: 0\n    }\n  });\n\n  useFormReset(props.selectRef, state.defaultSelectedKey, state.setSelectedKey);\n  useFormValidation({\n    validationBehavior,\n    focus: () => triggerRef.current?.focus()\n  }, state, props.selectRef);\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  let onChange = useCallback((e: React.ChangeEvent<HTMLSelectElement> | React.FormEvent<HTMLSelectElement>) => state.setSelectedKey(e.currentTarget.value), [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  return {\n    containerProps: {\n      ...visuallyHiddenProps,\n      'aria-hidden': true,\n      // @ts-ignore\n      ['data-react-aria-prevent-focus']: true,\n      // @ts-ignore\n      ['data-a11y-ignore']: 'aria-hidden-focus'\n    },\n    inputProps: {\n      style: {display: 'none'}\n    },\n    selectProps: {\n      tabIndex: -1,\n      autoComplete,\n      disabled: isDisabled,\n      required: validationBehavior === 'native' && isRequired,\n      name,\n      form,\n      value: state.selectedKey ?? '',\n      onChange,\n      onInput: onChange\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>): JSX.Element | null {\n  let {state, triggerRef, label, name, form, isDisabled} = props;\n  let selectRef = useRef(null);\n  let inputRef = useRef(null);\n  let {containerProps, selectProps} = useHiddenSelect({...props, selectRef: state.collection.size <= 300 ? selectRef : inputRef}, 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} data-testid=\"hidden-select-container\">\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 && 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    let data = selectData.get(state) || {};\n    let {validationBehavior} = data;\n\n    let inputProps: InputHTMLAttributes<HTMLInputElement> = {\n      type: 'hidden',\n      autoComplete: selectProps.autoComplete,\n      name,\n      form,\n      disabled: isDisabled,\n      value: state.selectedKey ?? ''\n    };\n\n    if (validationBehavior === 'native') {\n      // Use a hidden <input type=\"text\"> rather than <input type=\"hidden\">\n      // so that an empty value blocks HTML form submission when the field is required.\n      return (\n        <input\n          {...inputProps}\n          ref={inputRef}\n          style={{display: 'none'}}\n          type=\"text\"\n          required={selectProps.required}\n          onChange={() => {/** Ignore react warning. */}} />\n      );\n    }\n\n    return (\n      <input {...inputProps} ref={inputRef} />\n    );\n  }\n\n  return null;\n}\n"],"names":[],"version":3,"file":"HiddenSelect.main.js.map"}

package/dist/HiddenSelect.mjs

@@ -1,5 +1,5 @@
 import {selectData as $58aed456727eb0f3$export$703601b7e90536f8} from "./useSelect.mjs";
-import $8BE50$react, {useRef as $8BE50$useRef} from "react";
+import $8BE50$react, {useCallback as $8BE50$useCallback, useRef as $8BE50$useRef} from "react";
 import {useFormReset as $8BE50$useFormReset} from "@react-aria/utils";
 import {useFormValidation as $8BE50$useFormValidation} from "@react-aria/form";
 import {useVisuallyHidden as $8BE50$useVisuallyHidden} from "@react-aria/visually-hidden";
@@ -21,10 +21,17 @@ import {useVisuallyHidden as $8BE50$useVisuallyHidden} from "@react-aria/visuall
 
 function $bdd25dc72710631f$export$f809e80f58e251d1(props, state, triggerRef) {
     let data = (0, $58aed456727eb0f3$export$703601b7e90536f8).get(state) || {};
-    let { autoComplete: autoComplete, name: name = data.name, isDisabled: isDisabled = data.isDisabled } = props;
+    let { autoComplete: autoComplete, name: name = data.name, form: form = data.form, isDisabled: isDisabled = data.isDisabled } = props;
     let { validationBehavior: validationBehavior, isRequired: isRequired } = data;
-    let { visuallyHiddenProps: visuallyHiddenProps } = (0, $8BE50$useVisuallyHidden)();
-    (0, $8BE50$useFormReset)(props.selectRef, state.selectedKey, state.setSelectedKey);
+    let { visuallyHiddenProps: visuallyHiddenProps } = (0, $8BE50$useVisuallyHidden)({
+        style: {
+            // Prevent page scrolling.
+            position: 'fixed',
+            top: 0,
+            left: 0
+        }
+    });
+    (0, $8BE50$useFormReset)(props.selectRef, state.defaultSelectedKey, state.setSelectedKey);
     (0, $8BE50$useFormValidation)({
         validationBehavior: validationBehavior,
         focus: ()=>{
@@ -32,6 +39,10 @@ function $bdd25dc72710631f$export$f809e80f58e251d1(props, state, triggerRef) {
             return (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();
         }
     }, state, props.selectRef);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    let onChange = (0, $8BE50$useCallback)((e)=>state.setSelectedKey(e.currentTarget.value), [
+        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
@@ -59,19 +70,21 @@ function $bdd25dc72710631f$export$f809e80f58e251d1(props, state, triggerRef) {
             disabled: isDisabled,
             required: validationBehavior === 'native' && isRequired,
             name: name,
-            value: (_state_selectedKey = state.selectedKey) !== null && _state_selectedKey !== void 0 ? _state_selectedKey : undefined,
-            onChange: (e)=>state.setSelectedKey(e.target.value)
+            form: form,
+            value: (_state_selectedKey = state.selectedKey) !== null && _state_selectedKey !== void 0 ? _state_selectedKey : '',
+            onChange: onChange,
+            onInput: onChange
         }
     };
 }
 function $bdd25dc72710631f$export$cbd84cdb2e668835(props) {
-    let { state: state, triggerRef: triggerRef, label: label, name: name, isDisabled: isDisabled } = props;
+    let { state: state, triggerRef: triggerRef, label: label, name: name, form: form, isDisabled: isDisabled } = props;
     let selectRef = (0, $8BE50$useRef)(null);
+    let inputRef = (0, $8BE50$useRef)(null);
     let { containerProps: containerProps, selectProps: selectProps } = $bdd25dc72710631f$export$f809e80f58e251d1({
         ...props,
-        selectRef: selectRef
+        selectRef: state.collection.size <= 300 ? selectRef : inputRef
     }, 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">.
@@ -90,13 +103,35 @@ function $bdd25dc72710631f$export$cbd84cdb2e668835(props) {
             value: item.key
         }, item.textValue);
     }))));
-    else if (name) return /*#__PURE__*/ (0, $8BE50$react).createElement("input", {
-        type: "hidden",
-        autoComplete: selectProps.autoComplete,
-        name: name,
-        disabled: isDisabled,
-        value: (_state_selectedKey = state.selectedKey) !== null && _state_selectedKey !== void 0 ? _state_selectedKey : ''
-    });
+    else if (name) {
+        let data = (0, $58aed456727eb0f3$export$703601b7e90536f8).get(state) || {};
+        let { validationBehavior: validationBehavior } = data;
+        var _state_selectedKey;
+        let inputProps = {
+            type: 'hidden',
+            autoComplete: selectProps.autoComplete,
+            name: name,
+            form: form,
+            disabled: isDisabled,
+            value: (_state_selectedKey = state.selectedKey) !== null && _state_selectedKey !== void 0 ? _state_selectedKey : ''
+        };
+        if (validationBehavior === 'native') // Use a hidden <input type="text"> rather than <input type="hidden">
+        // so that an empty value blocks HTML form submission when the field is required.
+        return /*#__PURE__*/ (0, $8BE50$react).createElement("input", {
+            ...inputProps,
+            ref: inputRef,
+            style: {
+                display: 'none'
+            },
+            type: "text",
+            required: selectProps.required,
+            onChange: ()=>{}
+        });
+        return /*#__PURE__*/ (0, $8BE50$react).createElement("input", {
+            ...inputProps,
+            ref: inputRef
+        });
+    }
     return null;
 }
 

package/dist/HiddenSelect.module.js

@@ -1,5 +1,5 @@
 import {selectData as $58aed456727eb0f3$export$703601b7e90536f8} from "./useSelect.module.js";
-import $8BE50$react, {useRef as $8BE50$useRef} from "react";
+import $8BE50$react, {useCallback as $8BE50$useCallback, useRef as $8BE50$useRef} from "react";
 import {useFormReset as $8BE50$useFormReset} from "@react-aria/utils";
 import {useFormValidation as $8BE50$useFormValidation} from "@react-aria/form";
 import {useVisuallyHidden as $8BE50$useVisuallyHidden} from "@react-aria/visually-hidden";
@@ -21,10 +21,17 @@ import {useVisuallyHidden as $8BE50$useVisuallyHidden} from "@react-aria/visuall
 
 function $bdd25dc72710631f$export$f809e80f58e251d1(props, state, triggerRef) {
     let data = (0, $58aed456727eb0f3$export$703601b7e90536f8).get(state) || {};
-    let { autoComplete: autoComplete, name: name = data.name, isDisabled: isDisabled = data.isDisabled } = props;
+    let { autoComplete: autoComplete, name: name = data.name, form: form = data.form, isDisabled: isDisabled = data.isDisabled } = props;
     let { validationBehavior: validationBehavior, isRequired: isRequired } = data;
-    let { visuallyHiddenProps: visuallyHiddenProps } = (0, $8BE50$useVisuallyHidden)();
-    (0, $8BE50$useFormReset)(props.selectRef, state.selectedKey, state.setSelectedKey);
+    let { visuallyHiddenProps: visuallyHiddenProps } = (0, $8BE50$useVisuallyHidden)({
+        style: {
+            // Prevent page scrolling.
+            position: 'fixed',
+            top: 0,
+            left: 0
+        }
+    });
+    (0, $8BE50$useFormReset)(props.selectRef, state.defaultSelectedKey, state.setSelectedKey);
     (0, $8BE50$useFormValidation)({
         validationBehavior: validationBehavior,
         focus: ()=>{
@@ -32,6 +39,10 @@ function $bdd25dc72710631f$export$f809e80f58e251d1(props, state, triggerRef) {
             return (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();
         }
     }, state, props.selectRef);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    let onChange = (0, $8BE50$useCallback)((e)=>state.setSelectedKey(e.currentTarget.value), [
+        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
@@ -59,19 +70,21 @@ function $bdd25dc72710631f$export$f809e80f58e251d1(props, state, triggerRef) {
             disabled: isDisabled,
             required: validationBehavior === 'native' && isRequired,
             name: name,
-            value: (_state_selectedKey = state.selectedKey) !== null && _state_selectedKey !== void 0 ? _state_selectedKey : undefined,
-            onChange: (e)=>state.setSelectedKey(e.target.value)
+            form: form,
+            value: (_state_selectedKey = state.selectedKey) !== null && _state_selectedKey !== void 0 ? _state_selectedKey : '',
+            onChange: onChange,
+            onInput: onChange
         }
     };
 }
 function $bdd25dc72710631f$export$cbd84cdb2e668835(props) {
-    let { state: state, triggerRef: triggerRef, label: label, name: name, isDisabled: isDisabled } = props;
+    let { state: state, triggerRef: triggerRef, label: label, name: name, form: form, isDisabled: isDisabled } = props;
     let selectRef = (0, $8BE50$useRef)(null);
+    let inputRef = (0, $8BE50$useRef)(null);
     let { containerProps: containerProps, selectProps: selectProps } = $bdd25dc72710631f$export$f809e80f58e251d1({
         ...props,
-        selectRef: selectRef
+        selectRef: state.collection.size <= 300 ? selectRef : inputRef
     }, 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">.
@@ -90,13 +103,35 @@ function $bdd25dc72710631f$export$cbd84cdb2e668835(props) {
             value: item.key
         }, item.textValue);
     }))));
-    else if (name) return /*#__PURE__*/ (0, $8BE50$react).createElement("input", {
-        type: "hidden",
-        autoComplete: selectProps.autoComplete,
-        name: name,
-        disabled: isDisabled,
-        value: (_state_selectedKey = state.selectedKey) !== null && _state_selectedKey !== void 0 ? _state_selectedKey : ''
-    });
+    else if (name) {
+        let data = (0, $58aed456727eb0f3$export$703601b7e90536f8).get(state) || {};
+        let { validationBehavior: validationBehavior } = data;
+        var _state_selectedKey;
+        let inputProps = {
+            type: 'hidden',
+            autoComplete: selectProps.autoComplete,
+            name: name,
+            form: form,
+            disabled: isDisabled,
+            value: (_state_selectedKey = state.selectedKey) !== null && _state_selectedKey !== void 0 ? _state_selectedKey : ''
+        };
+        if (validationBehavior === 'native') // Use a hidden <input type="text"> rather than <input type="hidden">
+        // so that an empty value blocks HTML form submission when the field is required.
+        return /*#__PURE__*/ (0, $8BE50$react).createElement("input", {
+            ...inputProps,
+            ref: inputRef,
+            style: {
+                display: 'none'
+            },
+            type: "text",
+            required: selectProps.required,
+            onChange: ()=>{}
+        });
+        return /*#__PURE__*/ (0, $8BE50$react).createElement("input", {
+            ...inputProps,
+            ref: inputRef
+        });
+    }
     return null;
 }
 

package/dist/HiddenSelect.module.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAuDM,SAAS,0CAAmB,KAA8B,EAAE,KAAqB,EAAE,UAA8C;IACtI,IAAI,OAAO,CAAA,GAAA,yCAAS,EAAE,GAAG,CAAC,UAAU,CAAC;IACrC,IAAI,gBAAC,YAAY,QAAE,OAAO,KAAK,IAAI,cAAE,aAAa,KAAK,UAAU,EAAC,GAAG;IACrE,IAAI,sBAAC,kBAAkB,cAAE,UAAU,EAAC,GAAG;IACvC,IAAI,uBAAC,mBAAmB,EAAC,GAAG,CAAA,GAAA,wBAAgB;IAE5C,CAAA,GAAA,mBAAW,EAAE,MAAM,SAAS,EAAE,MAAM,WAAW,EAAE,MAAM,cAAc;IACrE,CAAA,GAAA,wBAAgB,EAAE;4BAChB;QACA,OAAO;gBAAM;oBAAA,sBAAA,WAAW,OAAO,cAAlB,0CAAA,oBAAoB,KAAK;;IACxC,GAAG,OAAO,MAAM,SAAS;QA0Bd;IAxBX,wFAAwF;IACxF,sFAAsF;IACtF,gDAAgD;IAChD,8FAA8F;IAC9F,kGAAkG;IAClG,mCAAmC;IACnC,OAAO;QACL,gBAAgB;YACd,GAAG,mBAAmB;YACtB,eAAe;YACf,aAAa;YACb,CAAC,gCAAgC,EAAE;YACnC,aAAa;YACb,CAAC,mBAAmB,EAAE;QACxB;QACA,YAAY;YACV,OAAO;gBAAC,SAAS;YAAM;QACzB;QACA,aAAa;YACX,UAAU;0BACV;YACA,UAAU;YACV,UAAU,uBAAuB,YAAY;kBAC7C;YACA,OAAO,CAAA,qBAAA,MAAM,WAAW,cAAjB,gCAAA,qBAAqB;YAC5B,UAAU,CAAC,IAA4C,MAAM,cAAc,CAAC,EAAE,MAAM,CAAC,KAAK;QAC5F;IACF;AACF;AAMO,SAAS,0CAAgB,KAA2B;IACzD,IAAI,SAAC,KAAK,cAAE,UAAU,SAAE,KAAK,QAAE,IAAI,cAAE,UAAU,EAAC,GAAG;IACnD,IAAI,YAAY,CAAA,GAAA,aAAK,EAAE;IACvB,IAAI,kBAAC,cAAc,eAAE,WAAW,EAAC,GAAG,0CAAgB;QAAC,GAAG,KAAK;mBAAE;IAAS,GAAG,OAAO;QAmCrE;IAjCb,qFAAqF;IACrF,0FAA0F;IAC1F,+DAA+D;IAC/D,IAAI,MAAM,UAAU,CAAC,IAAI,IAAI,KAC3B,qBACE,gCAAC;QAAK,GAAG,cAAc;QAAE,eAAY;qBACnC,gCAAC,eACE,qBACD,gCAAC;QAAQ,GAAG,WAAW;QAAE,KAAK;qBAC5B,gCAAC,iBACA;WAAI,MAAM,UAAU,CAAC,OAAO;KAAG,CAAC,GAAG,CAAC,CAAA;QACnC,IAAI,OAAO,MAAM,UAAU,CAAC,OAAO,CAAC;QACpC,IAAI,QAAQ,KAAK,IAAI,KAAK,QACxB,qBACE,gCAAC;YACC,KAAK,KAAK,GAAG;YACb,OAAO,KAAK,GAAG;WACd,KAAK,SAAS;IAIvB;SAKH,IAAI,MACT,qBACE,gCAAC;QACC,MAAK;QACL,cAAc,YAAY,YAAY;QACtC,MAAM;QACN,UAAU;QACV,OAAO,CAAA,qBAAA,MAAM,WAAW,cAAjB,gCAAA,qBAAqB;;IAIlC,OAAO;AACT","sources":["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 */\n\nimport {FocusableElement, RefObject} from '@react-types/shared';\nimport React, {JSX, ReactNode, useRef} from 'react';\nimport {selectData} from './useSelect';\nimport {SelectState} from '@react-stately/select';\nimport {useFormReset} from '@react-aria/utils';\nimport {useFormValidation} from '@react-aria/form';\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 | null>\n}\n\nexport interface AriaHiddenSelectOptions extends AriaHiddenSelectProps {\n  /** A ref to the hidden `<select>` element. */\n  selectRef?: RefObject<HTMLSelectElement | null>\n}\n\nexport interface HiddenSelectAria {\n  /** Props for the container element. */\n  containerProps: React.HTMLAttributes<FocusableElement>,\n\n  /** Props for the hidden input element. */\n  inputProps: React.InputHTMLAttributes<HTMLInputElement>,\n\n  /** Props for the hidden select element. */\n  selectProps: React.SelectHTMLAttributes<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 | null>): HiddenSelectAria {\n  let data = selectData.get(state) || {};\n  let {autoComplete, name = data.name, isDisabled = data.isDisabled} = props;\n  let {validationBehavior, isRequired} = data;\n  let {visuallyHiddenProps} = useVisuallyHidden();\n\n  useFormReset(props.selectRef, state.selectedKey, state.setSelectedKey);\n  useFormValidation({\n    validationBehavior,\n    focus: () => triggerRef.current?.focus()\n  }, state, props.selectRef);\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  return {\n    containerProps: {\n      ...visuallyHiddenProps,\n      'aria-hidden': true,\n      // @ts-ignore\n      ['data-react-aria-prevent-focus']: true,\n      // @ts-ignore\n      ['data-a11y-ignore']: 'aria-hidden-focus'\n    },\n    inputProps: {\n      style: {display: 'none'}\n    },\n    selectProps: {\n      tabIndex: -1,\n      autoComplete,\n      disabled: isDisabled,\n      required: validationBehavior === 'native' && isRequired,\n      name,\n      value: state.selectedKey ?? undefined,\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>): JSX.Element | null {\n  let {state, triggerRef, label, name, isDisabled} = props;\n  let selectRef = useRef(null);\n  let {containerProps, 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} data-testid=\"hidden-select-container\">\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 && 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":"HiddenSelect.module.js.map"}
+{"mappings":"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","sources":["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 */\n\nimport {FocusableElement, RefObject} from '@react-types/shared';\nimport React, {InputHTMLAttributes, JSX, ReactNode, useCallback, useRef} from 'react';\nimport {selectData} from './useSelect';\nimport {SelectState} from '@react-stately/select';\nimport {useFormReset} from '@react-aria/utils';\nimport {useFormValidation} from '@react-aria/form';\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  /**\n   * The `<form>` element to associate the input with.\n   * The value of this attribute must be the id of a `<form>` in the same document.\n   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).\n   */\n  form?: 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 | null>\n}\n\nexport interface AriaHiddenSelectOptions extends AriaHiddenSelectProps {\n  /** A ref to the hidden `<select>` element. */\n  selectRef?: RefObject<HTMLSelectElement | HTMLInputElement | null>\n}\n\nexport interface HiddenSelectAria {\n  /** Props for the container element. */\n  containerProps: React.HTMLAttributes<FocusableElement>,\n\n  /** Props for the hidden input element. */\n  inputProps: React.InputHTMLAttributes<HTMLInputElement>,\n\n  /** Props for the hidden select element. */\n  selectProps: React.SelectHTMLAttributes<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 | null>): HiddenSelectAria {\n  let data = selectData.get(state) || {};\n  let {autoComplete, name = data.name, form = data.form, isDisabled = data.isDisabled} = props;\n  let {validationBehavior, isRequired} = data;\n  let {visuallyHiddenProps} = useVisuallyHidden({\n    style: {\n      // Prevent page scrolling.\n      position: 'fixed',\n      top: 0,\n      left: 0\n    }\n  });\n\n  useFormReset(props.selectRef, state.defaultSelectedKey, state.setSelectedKey);\n  useFormValidation({\n    validationBehavior,\n    focus: () => triggerRef.current?.focus()\n  }, state, props.selectRef);\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  let onChange = useCallback((e: React.ChangeEvent<HTMLSelectElement> | React.FormEvent<HTMLSelectElement>) => state.setSelectedKey(e.currentTarget.value), [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  return {\n    containerProps: {\n      ...visuallyHiddenProps,\n      'aria-hidden': true,\n      // @ts-ignore\n      ['data-react-aria-prevent-focus']: true,\n      // @ts-ignore\n      ['data-a11y-ignore']: 'aria-hidden-focus'\n    },\n    inputProps: {\n      style: {display: 'none'}\n    },\n    selectProps: {\n      tabIndex: -1,\n      autoComplete,\n      disabled: isDisabled,\n      required: validationBehavior === 'native' && isRequired,\n      name,\n      form,\n      value: state.selectedKey ?? '',\n      onChange,\n      onInput: onChange\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>): JSX.Element | null {\n  let {state, triggerRef, label, name, form, isDisabled} = props;\n  let selectRef = useRef(null);\n  let inputRef = useRef(null);\n  let {containerProps, selectProps} = useHiddenSelect({...props, selectRef: state.collection.size <= 300 ? selectRef : inputRef}, 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} data-testid=\"hidden-select-container\">\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 && 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    let data = selectData.get(state) || {};\n    let {validationBehavior} = data;\n\n    let inputProps: InputHTMLAttributes<HTMLInputElement> = {\n      type: 'hidden',\n      autoComplete: selectProps.autoComplete,\n      name,\n      form,\n      disabled: isDisabled,\n      value: state.selectedKey ?? ''\n    };\n\n    if (validationBehavior === 'native') {\n      // Use a hidden <input type=\"text\"> rather than <input type=\"hidden\">\n      // so that an empty value blocks HTML form submission when the field is required.\n      return (\n        <input\n          {...inputProps}\n          ref={inputRef}\n          style={{display: 'none'}}\n          type=\"text\"\n          required={selectProps.required}\n          onChange={() => {/** Ignore react warning. */}} />\n      );\n    }\n\n    return (\n      <input {...inputProps} ref={inputRef} />\n    );\n  }\n\n  return null;\n}\n"],"names":[],"version":3,"file":"HiddenSelect.module.js.map"}

package/dist/types.d.ts

@@ -1,37 +1,9 @@
+import { FocusableElement, RefObject, DOMAttributes, KeyboardDelegate, ValidationResult } from "@react-types/shared";
+import React, { JSX, ReactNode } from "react";
+import { SelectState } from "@react-stately/select";
 import { AriaButtonProps } from "@react-types/button";
 import { AriaListBoxOptions } from "@react-aria/listbox";
 import { AriaSelectProps } from "@react-types/select";
-import { DOMAttributes, KeyboardDelegate, RefObject, ValidationResult, FocusableElement } from "@react-types/shared";
-import { SelectState } from "@react-stately/select";
-import React, { JSX, ReactNode } from "react";
-export interface AriaSelectOptions<T> extends Omit<AriaSelectProps<T>, 'children'> {
-    /**
-     * An optional keyboard delegate implementation for type to select,
-     * to override the default.
-     */
-    keyboardDelegate?: KeyboardDelegate;
-}
-export interface SelectAria<T> extends ValidationResult {
-    /** Props for the label element. */
-    labelProps: DOMAttributes;
-    /** Props for the popup trigger element. */
-    triggerProps: AriaButtonProps;
-    /** Props for the element representing the selected value. */
-    valueProps: DOMAttributes;
-    /** Props for the popup. */
-    menuProps: AriaListBoxOptions<T>;
-    /** Props for the select's description element, if any. */
-    descriptionProps: DOMAttributes;
-    /** Props for the select's error message element, if any. */
-    errorMessageProps: DOMAttributes;
-}
-/**
- * Provides the behavior and accessibility implementation for a select component.
- * A select displays a collapsible list of options and allows a user to select one of them.
- * @param props - Props for the select.
- * @param state - State for the select, as returned by `useListState`.
- */
-export function useSelect<T>(props: AriaSelectOptions<T>, state: SelectState<T>, ref: RefObject<HTMLElement | null>): SelectAria<T>;
 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).
@@ -41,6 +13,12 @@ export interface AriaHiddenSelectProps {
     label?: ReactNode;
     /** HTML form input name. */
     name?: string;
+    /**
+     * The `<form>` element to associate the input with.
+     * The value of this attribute must be the id of a `<form>` in the same document.
+     * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).
+     */
+    form?: string;
     /** Sets the disabled state of the select and input. */
     isDisabled?: boolean;
 }
@@ -52,7 +30,7 @@ export interface HiddenSelectProps<T> extends AriaHiddenSelectProps {
 }
 interface AriaHiddenSelectOptions extends AriaHiddenSelectProps {
     /** A ref to the hidden `<select>` element. */
-    selectRef?: RefObject<HTMLSelectElement | null>;
+    selectRef?: RefObject<HTMLSelectElement | HTMLInputElement | null>;
 }
 interface HiddenSelectAria {
     /** Props for the container element. */
@@ -73,6 +51,36 @@ export function useHiddenSelect<T>(props: AriaHiddenSelectOptions, state: Select
  * form autofill, mobile form navigation, and native form submission.
  */
 export function HiddenSelect<T>(props: HiddenSelectProps<T>): JSX.Element | null;
+export interface AriaSelectOptions<T> extends Omit<AriaSelectProps<T>, 'children'> {
+    /**
+     * An optional keyboard delegate implementation for type to select,
+     * to override the default.
+     */
+    keyboardDelegate?: KeyboardDelegate;
+}
+export interface SelectAria<T> extends ValidationResult {
+    /** Props for the label element. */
+    labelProps: DOMAttributes;
+    /** Props for the popup trigger element. */
+    triggerProps: AriaButtonProps;
+    /** Props for the element representing the selected value. */
+    valueProps: DOMAttributes;
+    /** Props for the popup. */
+    menuProps: AriaListBoxOptions<T>;
+    /** Props for the select's description element, if any. */
+    descriptionProps: DOMAttributes;
+    /** Props for the select's error message element, if any. */
+    errorMessageProps: DOMAttributes;
+    /** Props for the hidden select element. */
+    hiddenSelectProps: HiddenSelectProps<T>;
+}
+/**
+ * Provides the behavior and accessibility implementation for a select component.
+ * A select displays a collapsible list of options and allows a user to select one of them.
+ * @param props - Props for the select.
+ * @param state - State for the select, as returned by `useListState`.
+ */
+export function useSelect<T>(props: AriaSelectOptions<T>, state: SelectState<T>, ref: RefObject<HTMLElement | null>): SelectAria<T>;
 export type { AriaSelectProps } from '@react-types/select';
 
 //# sourceMappingURL=types.d.ts.map

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,CAAE,SAAQ,gBAAgB;IACrD,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;AAWD;;;;;GAKG;AACH,0BAA0B,CAAC,EAAE,KAAK,EAAE,kBAAkB,CAAC,CAAC,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,EAAE,GAAG,EAAE,UAAU,WAAW,GAAG,IAAI,CAAC,GAAG,WAAW,CAAC,CAAC,CAwKlI;ACxND;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,GAAG,IAAI,CAAC,CAAA;CAC/C;AAED,iCAAyC,SAAQ,qBAAqB;IACpE,8CAA8C;IAC9C,SAAS,CAAC,EAAE,UAAU,iBAAiB,GAAG,IAAI,CAAC,CAAA;CAChD;AAED;IACE,uCAAuC;IACvC,cAAc,EAAE,MAAM,cAAc,CAAC,gBAAgB,CAAC,CAAC;IAEvD,0CAA0C;IAC1C,UAAU,EAAE,MAAM,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IAExD,2CAA2C;IAC3C,WAAW,EAAE,MAAM,oBAAoB,CAAC,iBAAiB,CAAC,CAAA;CAC3D;AAED;;;;GAIG;AACH,gCAAgC,CAAC,EAAE,KAAK,EAAE,uBAAuB,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,EAAE,UAAU,EAAE,UAAU,gBAAgB,GAAG,IAAI,CAAC,GAAG,gBAAgB,CAwC1J;AAED;;;GAGG;AACH,6BAA6B,CAAC,EAAE,KAAK,EAAE,kBAAkB,CAAC,CAAC,GAAG,IAAI,OAAO,GAAG,IAAI,CA2C/E;AC3ID,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":";;;;;;AAoBA;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;;;;OAIG;IACH,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,GAAG,IAAI,CAAC,CAAA;CAC/C;AAED,iCAAyC,SAAQ,qBAAqB;IACpE,8CAA8C;IAC9C,SAAS,CAAC,EAAE,UAAU,iBAAiB,GAAG,gBAAgB,GAAG,IAAI,CAAC,CAAA;CACnE;AAED;IACE,uCAAuC;IACvC,cAAc,EAAE,MAAM,cAAc,CAAC,gBAAgB,CAAC,CAAC;IAEvD,0CAA0C;IAC1C,UAAU,EAAE,MAAM,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IAExD,2CAA2C;IAC3C,WAAW,EAAE,MAAM,oBAAoB,CAAC,iBAAiB,CAAC,CAAA;CAC3D;AAED;;;;GAIG;AACH,gCAAgC,CAAC,EAAE,KAAK,EAAE,uBAAuB,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,EAAE,UAAU,EAAE,UAAU,gBAAgB,GAAG,IAAI,CAAC,GAAG,gBAAgB,CAoD1J;AAED;;;GAGG;AACH,6BAA6B,CAAC,EAAE,KAAK,EAAE,kBAAkB,CAAC,CAAC,GAAG,IAAI,OAAO,GAAG,IAAI,CAiE/E;ACzKD,mCAAmC,CAAC,CAAE,SAAQ,IAAI,CAAC,gBAAgB,CAAC,CAAC,EAAE,UAAU,CAAC;IAChF;;;OAGG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAA;CACpC;AAED,4BAA4B,CAAC,CAAE,SAAQ,gBAAgB;IACrD,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,CAAC;IAEjC,2CAA2C;IAC3C,iBAAiB,EAAE,kBAAkB,CAAC,CAAC,CAAA;CACxC;AAYD;;;;;GAKG;AACH,0BAA0B,CAAC,EAAE,KAAK,EAAE,kBAAkB,CAAC,CAAC,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,EAAE,GAAG,EAAE,UAAU,WAAW,GAAG,IAAI,CAAC,GAAG,WAAW,CAAC,CAAC,CAkLlI;AC5OD,YAAY,EAAC,eAAe,EAAC,MAAM,qBAAqB,CAAC","sources":["packages/@react-aria/select/src/packages/@react-aria/select/src/HiddenSelect.tsx","packages/@react-aria/select/src/packages/@react-aria/select/src/useSelect.ts","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/dist/useSelect.main.js

@@ -32,7 +32,7 @@ $parcel$export(module.exports, "useSelect", () => $23a1e93dc7fa8653$export$e64b2
 
 const $23a1e93dc7fa8653$export$703601b7e90536f8 = new WeakMap();
 function $23a1e93dc7fa8653$export$e64b2f635402ca43(props, state, ref) {
-    let { keyboardDelegate: keyboardDelegate, isDisabled: isDisabled, isRequired: isRequired, name: name, validationBehavior: validationBehavior = 'aria' } = props;
+    let { keyboardDelegate: keyboardDelegate, isDisabled: isDisabled, isRequired: isRequired, name: name, form: form, validationBehavior: validationBehavior = 'aria' } = props;
     // By default, a KeyboardDelegate is provided which uses the DOM to query layout information (e.g. for page up/page down).
     // When virtualized, the layout object will be passed in as a prop and override this.
     let collator = (0, $63cuq$reactariai18n.useCollator)({
@@ -97,6 +97,7 @@ function $23a1e93dc7fa8653$export$e64b2f635402ca43(props, state, ref) {
         isDisabled: isDisabled,
         isRequired: isRequired,
         name: name,
+        form: form,
         validationBehavior: validationBehavior
     });
     return {
@@ -159,7 +160,15 @@ function $23a1e93dc7fa8653$export$e64b2f635402ca43(props, state, ref) {
         errorMessageProps: errorMessageProps,
         isInvalid: isInvalid,
         validationErrors: validationErrors,
-        validationDetails: validationDetails
+        validationDetails: validationDetails,
+        hiddenSelectProps: {
+            isDisabled: isDisabled,
+            name: name,
+            label: props.label,
+            state: state,
+            triggerRef: ref,
+            form: form
+        }
     };
 }
 

package/dist/useSelect.main.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-aria/select/src/useSelect.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaButtonProps} from '@react-types/button';\nimport {AriaListBoxOptions} from '@react-aria/listbox';\nimport {AriaSelectProps} from '@react-types/select';\nimport {chain, filterDOMProps, mergeProps, useId} from '@react-aria/utils';\nimport {DOMAttributes, KeyboardDelegate, RefObject, ValidationResult} from '@react-types/shared';\nimport {FocusEvent, 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> extends ValidationResult {\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\ninterface SelectData {\n  isDisabled?: boolean,\n  isRequired?: boolean,\n  name?: string,\n  validationBehavior?: 'aria' | 'native'\n}\n\nexport const selectData = new WeakMap<SelectState<any>, SelectData>();\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<HTMLElement | null>): SelectAria<T> {\n  let {\n    keyboardDelegate,\n    isDisabled,\n    isRequired,\n    name,\n    validationBehavior = 'aria'\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, ref, collator), [keyboardDelegate, state.collection, state.disabledKeys, collator, ref]);\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 {isInvalid, validationErrors, validationDetails} = state.displayValidation;\n  let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({\n    ...props,\n    labelElementType: 'span',\n    isInvalid,\n    errorMessage: props.errorMessage || validationErrors\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  selectData.set(state, {\n    isDisabled,\n    isRequired,\n    name,\n    validationBehavior\n  });\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      linkBehavior: 'selection',\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    isInvalid,\n    validationErrors,\n    validationDetails\n  };\n}\n"],"names":[],"version":3,"file":"useSelect.main.js.map"}
+{"mappings":"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","sources":["packages/@react-aria/select/src/useSelect.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaButtonProps} from '@react-types/button';\nimport {AriaListBoxOptions} from '@react-aria/listbox';\nimport {AriaSelectProps} from '@react-types/select';\nimport {chain, filterDOMProps, mergeProps, useId} from '@react-aria/utils';\nimport {DOMAttributes, KeyboardDelegate, RefObject, ValidationResult} from '@react-types/shared';\nimport {FocusEvent, useMemo} from 'react';\nimport {HiddenSelectProps} from './HiddenSelect';\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> extends ValidationResult {\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  /** Props for the hidden select element. */\n  hiddenSelectProps: HiddenSelectProps<T>\n}\n\ninterface SelectData {\n  isDisabled?: boolean,\n  isRequired?: boolean,\n  name?: string,\n  form?: string,\n  validationBehavior?: 'aria' | 'native'\n}\n\nexport const selectData: WeakMap<SelectState<any>, SelectData> = new WeakMap<SelectState<any>, SelectData>();\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<HTMLElement | null>): SelectAria<T> {\n  let {\n    keyboardDelegate,\n    isDisabled,\n    isRequired,\n    name,\n    form,\n    validationBehavior = 'aria'\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, ref, collator), [keyboardDelegate, state.collection, state.disabledKeys, collator, ref]);\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 {isInvalid, validationErrors, validationDetails} = state.displayValidation;\n  let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({\n    ...props,\n    labelElementType: 'span',\n    isInvalid,\n    errorMessage: props.errorMessage || validationErrors\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  selectData.set(state, {\n    isDisabled,\n    isRequired,\n    name,\n    form,\n    validationBehavior\n  });\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      linkBehavior: 'selection',\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    isInvalid,\n    validationErrors,\n    validationDetails,\n    hiddenSelectProps: {\n      isDisabled,\n      name,\n      label: props.label,\n      state,\n      triggerRef: ref,\n      form\n    }\n  };\n}\n"],"names":[],"version":3,"file":"useSelect.main.js.map"}

package/dist/useSelect.mjs

@@ -25,7 +25,7 @@ import {useMenuTrigger as $aUnai$useMenuTrigger} from "@react-aria/menu";
 
 const $58aed456727eb0f3$export$703601b7e90536f8 = new WeakMap();
 function $58aed456727eb0f3$export$e64b2f635402ca43(props, state, ref) {
-    let { keyboardDelegate: keyboardDelegate, isDisabled: isDisabled, isRequired: isRequired, name: name, validationBehavior: validationBehavior = 'aria' } = props;
+    let { keyboardDelegate: keyboardDelegate, isDisabled: isDisabled, isRequired: isRequired, name: name, form: form, validationBehavior: validationBehavior = 'aria' } = props;
     // By default, a KeyboardDelegate is provided which uses the DOM to query layout information (e.g. for page up/page down).
     // When virtualized, the layout object will be passed in as a prop and override this.
     let collator = (0, $aUnai$useCollator)({
@@ -90,6 +90,7 @@ function $58aed456727eb0f3$export$e64b2f635402ca43(props, state, ref) {
         isDisabled: isDisabled,
         isRequired: isRequired,
         name: name,
+        form: form,
         validationBehavior: validationBehavior
     });
     return {
@@ -152,7 +153,15 @@ function $58aed456727eb0f3$export$e64b2f635402ca43(props, state, ref) {
         errorMessageProps: errorMessageProps,
         isInvalid: isInvalid,
         validationErrors: validationErrors,
-        validationDetails: validationDetails
+        validationDetails: validationDetails,
+        hiddenSelectProps: {
+            isDisabled: isDisabled,
+            name: name,
+            label: props.label,
+            state: state,
+            triggerRef: ref,
+            form: form
+        }
     };
 }
 

package/dist/useSelect.module.js

@@ -25,7 +25,7 @@ import {useMenuTrigger as $aUnai$useMenuTrigger} from "@react-aria/menu";
 
 const $58aed456727eb0f3$export$703601b7e90536f8 = new WeakMap();
 function $58aed456727eb0f3$export$e64b2f635402ca43(props, state, ref) {
-    let { keyboardDelegate: keyboardDelegate, isDisabled: isDisabled, isRequired: isRequired, name: name, validationBehavior: validationBehavior = 'aria' } = props;
+    let { keyboardDelegate: keyboardDelegate, isDisabled: isDisabled, isRequired: isRequired, name: name, form: form, validationBehavior: validationBehavior = 'aria' } = props;
     // By default, a KeyboardDelegate is provided which uses the DOM to query layout information (e.g. for page up/page down).
     // When virtualized, the layout object will be passed in as a prop and override this.
     let collator = (0, $aUnai$useCollator)({
@@ -90,6 +90,7 @@ function $58aed456727eb0f3$export$e64b2f635402ca43(props, state, ref) {
         isDisabled: isDisabled,
         isRequired: isRequired,
         name: name,
+        form: form,
         validationBehavior: validationBehavior
     });
     return {
@@ -152,7 +153,15 @@ function $58aed456727eb0f3$export$e64b2f635402ca43(props, state, ref) {
         errorMessageProps: errorMessageProps,
         isInvalid: isInvalid,
         validationErrors: validationErrors,
-        validationDetails: validationDetails
+        validationDetails: validationDetails,
+        hiddenSelectProps: {
+            isDisabled: isDisabled,
+            name: name,
+            label: props.label,
+            state: state,
+            triggerRef: ref,
+            form: form
+        }
     };
 }
 

package/dist/useSelect.module.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAkDM,MAAM,4CAAa,IAAI;AAQvB,SAAS,0CAAa,KAA2B,EAAE,KAAqB,EAAE,GAAkC;IACjH,IAAI,oBACF,gBAAgB,cAChB,UAAU,cACV,UAAU,QACV,IAAI,sBACJ,qBAAqB,QACtB,GAAG;IAEJ,0HAA0H;IAC1H,qFAAqF;IACrF,IAAI,WAAW,CAAA,GAAA,kBAAU,EAAE;QAAC,OAAO;QAAU,aAAa;IAAM;IAChE,IAAI,WAAW,CAAA,GAAA,cAAM,EAAE,IAAM,oBAAoB,IAAI,CAAA,GAAA,2BAAmB,EAAE,MAAM,UAAU,EAAE,MAAM,YAAY,EAAE,KAAK,WAAW;QAAC;QAAkB,MAAM,UAAU;QAAE,MAAM,YAAY;QAAE;QAAU;KAAI;IAEvM,IAAI,oBAAC,gBAAgB,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,qBAAa,EAC/C;oBACE;QACA,MAAM;IACR,GACA,OACA;IAGF,IAAI,YAAY,CAAC;QACf,OAAQ,EAAE,GAAG;YACX,KAAK;gBAAa;wBAIsB,uBAA4C;oBAHlF,+BAA+B;oBAC/B,EAAE,cAAc;oBAEhB,IAAI,MAAM,MAAM,WAAW,IAAI,QAAO,wBAAA,SAAS,WAAW,cAApB,4CAAA,2BAAA,UAAuB,MAAM,WAAW,KAAI,wBAAA,SAAS,WAAW,cAApB,4CAAA,2BAAA;oBAClF,IAAI,KACF,MAAM,cAAc,CAAC;oBAEvB;gBACF;YACA,KAAK;gBAAc;wBAIqB,uBAA4C;oBAHlF,+BAA+B;oBAC/B,EAAE,cAAc;oBAEhB,IAAI,MAAM,MAAM,WAAW,IAAI,QAAO,wBAAA,SAAS,WAAW,cAApB,4CAAA,2BAAA,UAAuB,MAAM,WAAW,KAAI,yBAAA,SAAS,WAAW,cAApB,6CAAA,4BAAA;oBAClF,IAAI,KACF,MAAM,cAAc,CAAC;oBAEvB;gBACF;QACF;IACF;IAEA,IAAI,mBAAC,eAAe,EAAC,GAAG,CAAA,GAAA,oBAAY,EAAE;QACpC,kBAAkB;QAClB,kBAAkB,MAAM,gBAAgB;QACxC,cAAa,GAAG;YACd,MAAM,cAAc,CAAC;QACvB;IACF;IAEA,IAAI,aAAC,SAAS,oBAAE,gBAAgB,qBAAE,iBAAiB,EAAC,GAAG,MAAM,iBAAiB;IAC9E,IAAI,cAAC,UAAU,cAAE,UAAU,oBAAE,gBAAgB,qBAAE,iBAAiB,EAAC,GAAG,CAAA,GAAA,eAAO,EAAE;QAC3E,GAAG,KAAK;QACR,kBAAkB;mBAClB;QACA,cAAc,MAAM,YAAY,IAAI;IACtC;IAEA,gBAAgB,SAAS,GAAG,gBAAgB,gBAAgB;IAC5D,OAAO,gBAAgB,gBAAgB;IAEvC,IAAI,WAAW,CAAA,GAAA,qBAAa,EAAE,OAAO;QAAC,WAAW;IAAI;IACrD,IAAI,eAAe,CAAA,GAAA,iBAAS,EAAE,iBAAiB,kBAAkB;IAEjE,IAAI,UAAU,CAAA,GAAA,YAAI;IAElB,0CAAW,GAAG,CAAC,OAAO;oBACpB;oBACA;cACA;4BACA;IACF;IAEA,OAAO;QACL,YAAY;YACV,GAAG,UAAU;YACb,SAAS;gBACP,IAAI,CAAC,MAAM,UAAU,EAAE;wBACrB;qBAAA,eAAA,IAAI,OAAO,cAAX,mCAAA,aAAa,KAAK;oBAElB,yDAAyD;oBACzD,CAAA,GAAA,6BAAqB,EAAE;gBACzB;YACF;QACF;QACA,cAAc,CAAA,GAAA,iBAAS,EAAE,UAAU;YACjC,GAAG,YAAY;wBACf;YACA,WAAW,CAAA,GAAA,YAAI,EAAE,aAAa,SAAS,EAAE,WAAW,MAAM,SAAS;YACnE,SAAS,MAAM,OAAO;YACtB,mBAAmB;gBACjB;gBACA,YAAY,CAAC,kBAAkB;gBAC/B,YAAY,CAAC,aAAa,IAAI,CAAC,YAAY,CAAC,kBAAkB,GAAG,aAAa,EAAE,GAAG;aACpF,CAAC,MAAM,CAAC,SAAS,IAAI,CAAC;YACvB,SAAQ,CAAa;gBACnB,IAAI,MAAM,SAAS,EACjB;gBAGF,IAAI,MAAM,OAAO,EACf,MAAM,OAAO,CAAC;gBAGhB,IAAI,MAAM,aAAa,EACrB,MAAM,aAAa,CAAC;gBAGtB,MAAM,UAAU,CAAC;YACnB;YACA,QAAO,CAAa;gBAClB,IAAI,MAAM,MAAM,EACd;gBAGF,IAAI,MAAM,MAAM,EACd,MAAM,MAAM,CAAC;gBAGf,IAAI,MAAM,aAAa,EACrB,MAAM,aAAa,CAAC;gBAGtB,MAAM,UAAU,CAAC;YACnB;QACF;QACA,YAAY;YACV,IAAI;QACN;QACA,WAAW;YACT,GAAG,SAAS;YACZ,WAAW,MAAM,aAAa,IAAI;YAClC,uBAAuB;YACvB,oBAAoB;YACpB,wBAAwB;YACxB,cAAc;YACd,QAAQ,CAAC;gBACP,IAAI,EAAE,aAAa,CAAC,QAAQ,CAAC,EAAE,aAAa,GAC1C;gBAGF,IAAI,MAAM,MAAM,EACd,MAAM,MAAM,CAAC;gBAGf,IAAI,MAAM,aAAa,EACrB,MAAM,aAAa,CAAC;gBAGtB,MAAM,UAAU,CAAC;YACnB;YACA,mBAAmB;gBACjB,UAAU,CAAC,kBAAkB;gBAC7B,YAAY,CAAC,aAAa,IAAI,CAAC,UAAU,CAAC,kBAAkB,GAAG,aAAa,EAAE,GAAG;aAClF,CAAC,MAAM,CAAC,SAAS,IAAI,CAAC;QACzB;0BACA;2BACA;mBACA;0BACA;2BACA;IACF;AACF","sources":["packages/@react-aria/select/src/useSelect.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaButtonProps} from '@react-types/button';\nimport {AriaListBoxOptions} from '@react-aria/listbox';\nimport {AriaSelectProps} from '@react-types/select';\nimport {chain, filterDOMProps, mergeProps, useId} from '@react-aria/utils';\nimport {DOMAttributes, KeyboardDelegate, RefObject, ValidationResult} from '@react-types/shared';\nimport {FocusEvent, 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> extends ValidationResult {\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\ninterface SelectData {\n  isDisabled?: boolean,\n  isRequired?: boolean,\n  name?: string,\n  validationBehavior?: 'aria' | 'native'\n}\n\nexport const selectData = new WeakMap<SelectState<any>, SelectData>();\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<HTMLElement | null>): SelectAria<T> {\n  let {\n    keyboardDelegate,\n    isDisabled,\n    isRequired,\n    name,\n    validationBehavior = 'aria'\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, ref, collator), [keyboardDelegate, state.collection, state.disabledKeys, collator, ref]);\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 {isInvalid, validationErrors, validationDetails} = state.displayValidation;\n  let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({\n    ...props,\n    labelElementType: 'span',\n    isInvalid,\n    errorMessage: props.errorMessage || validationErrors\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  selectData.set(state, {\n    isDisabled,\n    isRequired,\n    name,\n    validationBehavior\n  });\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      linkBehavior: 'selection',\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    isInvalid,\n    validationErrors,\n    validationDetails\n  };\n}\n"],"names":[],"version":3,"file":"useSelect.module.js.map"}
+{"mappings":"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","sources":["packages/@react-aria/select/src/useSelect.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaButtonProps} from '@react-types/button';\nimport {AriaListBoxOptions} from '@react-aria/listbox';\nimport {AriaSelectProps} from '@react-types/select';\nimport {chain, filterDOMProps, mergeProps, useId} from '@react-aria/utils';\nimport {DOMAttributes, KeyboardDelegate, RefObject, ValidationResult} from '@react-types/shared';\nimport {FocusEvent, useMemo} from 'react';\nimport {HiddenSelectProps} from './HiddenSelect';\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> extends ValidationResult {\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  /** Props for the hidden select element. */\n  hiddenSelectProps: HiddenSelectProps<T>\n}\n\ninterface SelectData {\n  isDisabled?: boolean,\n  isRequired?: boolean,\n  name?: string,\n  form?: string,\n  validationBehavior?: 'aria' | 'native'\n}\n\nexport const selectData: WeakMap<SelectState<any>, SelectData> = new WeakMap<SelectState<any>, SelectData>();\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<HTMLElement | null>): SelectAria<T> {\n  let {\n    keyboardDelegate,\n    isDisabled,\n    isRequired,\n    name,\n    form,\n    validationBehavior = 'aria'\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, ref, collator), [keyboardDelegate, state.collection, state.disabledKeys, collator, ref]);\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 {isInvalid, validationErrors, validationDetails} = state.displayValidation;\n  let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({\n    ...props,\n    labelElementType: 'span',\n    isInvalid,\n    errorMessage: props.errorMessage || validationErrors\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  selectData.set(state, {\n    isDisabled,\n    isRequired,\n    name,\n    form,\n    validationBehavior\n  });\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      linkBehavior: 'selection',\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    isInvalid,\n    validationErrors,\n    validationDetails,\n    hiddenSelectProps: {\n      isDisabled,\n      name,\n      label: props.label,\n      state,\n      triggerRef: ref,\n      form\n    }\n  };\n}\n"],"names":[],"version":3,"file":"useSelect.module.js.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-aria/select",
-  "version": "3.15.6",
+  "version": "3.16.0",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -26,19 +26,19 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-aria/form": "^3.0.17",
-    "@react-aria/i18n": "^3.12.10",
-    "@react-aria/interactions": "^3.25.2",
-    "@react-aria/label": "^3.7.19",
-    "@react-aria/listbox": "^3.14.5",
-    "@react-aria/menu": "^3.18.4",
-    "@react-aria/selection": "^3.24.2",
-    "@react-aria/utils": "^3.29.1",
-    "@react-aria/visually-hidden": "^3.8.24",
-    "@react-stately/select": "^3.6.14",
-    "@react-types/button": "^3.12.2",
-    "@react-types/select": "^3.9.13",
-    "@react-types/shared": "^3.30.0",
+    "@react-aria/form": "^3.1.0",
+    "@react-aria/i18n": "^3.12.11",
+    "@react-aria/interactions": "^3.25.4",
+    "@react-aria/label": "^3.7.20",
+    "@react-aria/listbox": "^3.14.7",
+    "@react-aria/menu": "^3.19.0",
+    "@react-aria/selection": "^3.25.0",
+    "@react-aria/utils": "^3.30.0",
+    "@react-aria/visually-hidden": "^3.8.26",
+    "@react-stately/select": "^3.7.0",
+    "@react-types/button": "^3.13.0",
+    "@react-types/select": "^3.10.0",
+    "@react-types/shared": "^3.31.0",
     "@swc/helpers": "^0.5.0"
   },
   "peerDependencies": {
@@ -48,5 +48,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "265b4d7f107905ee1c6e87a8af1613ab440a6849"
+  "gitHead": "8b9348ff255e018b2dd9b27e2a45507cadfa1d35"
 }

package/src/HiddenSelect.tsx

@@ -11,7 +11,7 @@
  */
 
 import {FocusableElement, RefObject} from '@react-types/shared';
-import React, {JSX, ReactNode, useRef} from 'react';
+import React, {InputHTMLAttributes, JSX, ReactNode, useCallback, useRef} from 'react';
 import {selectData} from './useSelect';
 import {SelectState} from '@react-stately/select';
 import {useFormReset} from '@react-aria/utils';
@@ -30,6 +30,13 @@ export interface AriaHiddenSelectProps {
   /** HTML form input name. */
   name?: string,
 
+  /**
+   * The `<form>` element to associate the input with.
+   * The value of this attribute must be the id of a `<form>` in the same document.
+   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).
+   */
+  form?: string,
+
   /** Sets the disabled state of the select and input. */
   isDisabled?: boolean
 }
@@ -44,7 +51,7 @@ export interface HiddenSelectProps<T> extends AriaHiddenSelectProps {
 
 export interface AriaHiddenSelectOptions extends AriaHiddenSelectProps {
   /** A ref to the hidden `<select>` element. */
-  selectRef?: RefObject<HTMLSelectElement | null>
+  selectRef?: RefObject<HTMLSelectElement | HTMLInputElement | null>
 }
 
 export interface HiddenSelectAria {
@@ -65,16 +72,26 @@ export interface HiddenSelectAria {
  */
 export function useHiddenSelect<T>(props: AriaHiddenSelectOptions, state: SelectState<T>, triggerRef: RefObject<FocusableElement | null>): HiddenSelectAria {
   let data = selectData.get(state) || {};
-  let {autoComplete, name = data.name, isDisabled = data.isDisabled} = props;
+  let {autoComplete, name = data.name, form = data.form, isDisabled = data.isDisabled} = props;
   let {validationBehavior, isRequired} = data;
-  let {visuallyHiddenProps} = useVisuallyHidden();
+  let {visuallyHiddenProps} = useVisuallyHidden({
+    style: {
+      // Prevent page scrolling.
+      position: 'fixed',
+      top: 0,
+      left: 0
+    }
+  });
 
-  useFormReset(props.selectRef, state.selectedKey, state.setSelectedKey);
+  useFormReset(props.selectRef, state.defaultSelectedKey, state.setSelectedKey);
   useFormValidation({
     validationBehavior,
     focus: () => triggerRef.current?.focus()
   }, state, props.selectRef);
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  let onChange = useCallback((e: React.ChangeEvent<HTMLSelectElement> | React.FormEvent<HTMLSelectElement>) => state.setSelectedKey(e.currentTarget.value), [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.
@@ -99,8 +116,10 @@ export function useHiddenSelect<T>(props: AriaHiddenSelectOptions, state: Select
       disabled: isDisabled,
       required: validationBehavior === 'native' && isRequired,
       name,
-      value: state.selectedKey ?? undefined,
-      onChange: (e: React.ChangeEvent<HTMLSelectElement>) => state.setSelectedKey(e.target.value)
+      form,
+      value: state.selectedKey ?? '',
+      onChange,
+      onInput: onChange
     }
   };
 }
@@ -110,9 +129,10 @@ export function useHiddenSelect<T>(props: AriaHiddenSelectOptions, state: Select
  * form autofill, mobile form navigation, and native form submission.
  */
 export function HiddenSelect<T>(props: HiddenSelectProps<T>): JSX.Element | null {
-  let {state, triggerRef, label, name, isDisabled} = props;
+  let {state, triggerRef, label, name, form, isDisabled} = props;
   let selectRef = useRef(null);
-  let {containerProps, selectProps} = useHiddenSelect({...props, selectRef}, state, triggerRef);
+  let inputRef = useRef(null);
+  let {containerProps, selectProps} = useHiddenSelect({...props, selectRef: state.collection.size <= 300 ? selectRef : inputRef}, 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
@@ -141,13 +161,34 @@ export function HiddenSelect<T>(props: HiddenSelectProps<T>): JSX.Element | null
       </div>
     );
   } else if (name) {
+    let data = selectData.get(state) || {};
+    let {validationBehavior} = data;
+
+    let inputProps: InputHTMLAttributes<HTMLInputElement> = {
+      type: 'hidden',
+      autoComplete: selectProps.autoComplete,
+      name,
+      form,
+      disabled: isDisabled,
+      value: state.selectedKey ?? ''
+    };
+
+    if (validationBehavior === 'native') {
+      // Use a hidden <input type="text"> rather than <input type="hidden">
+      // so that an empty value blocks HTML form submission when the field is required.
+      return (
+        <input
+          {...inputProps}
+          ref={inputRef}
+          style={{display: 'none'}}
+          type="text"
+          required={selectProps.required}
+          onChange={() => {/** Ignore react warning. */}} />
+      );
+    }
+
     return (
-      <input
-        type="hidden"
-        autoComplete={selectProps.autoComplete}
-        name={name}
-        disabled={isDisabled}
-        value={state.selectedKey ?? ''} />
+      <input {...inputProps} ref={inputRef} />
     );
   }
 

package/src/useSelect.ts

@@ -16,6 +16,7 @@ import {AriaSelectProps} from '@react-types/select';
 import {chain, filterDOMProps, mergeProps, useId} from '@react-aria/utils';
 import {DOMAttributes, KeyboardDelegate, RefObject, ValidationResult} from '@react-types/shared';
 import {FocusEvent, useMemo} from 'react';
+import {HiddenSelectProps} from './HiddenSelect';
 import {ListKeyboardDelegate, useTypeSelect} from '@react-aria/selection';
 import {SelectState} from '@react-stately/select';
 import {setInteractionModality} from '@react-aria/interactions';
@@ -48,17 +49,21 @@ export interface SelectAria<T> extends ValidationResult {
   descriptionProps: DOMAttributes,
 
   /** Props for the select's error message element, if any. */
-  errorMessageProps: DOMAttributes
+  errorMessageProps: DOMAttributes,
+
+  /** Props for the hidden select element. */
+  hiddenSelectProps: HiddenSelectProps<T>
 }
 
 interface SelectData {
   isDisabled?: boolean,
   isRequired?: boolean,
   name?: string,
+  form?: string,
   validationBehavior?: 'aria' | 'native'
 }
 
-export const selectData = new WeakMap<SelectState<any>, SelectData>();
+export const selectData: WeakMap<SelectState<any>, SelectData> = new WeakMap<SelectState<any>, SelectData>();
 
 /**
  * Provides the behavior and accessibility implementation for a select component.
@@ -72,6 +77,7 @@ export function useSelect<T>(props: AriaSelectOptions<T>, state: SelectState<T>,
     isDisabled,
     isRequired,
     name,
+    form,
     validationBehavior = 'aria'
   } = props;
 
@@ -142,6 +148,7 @@ export function useSelect<T>(props: AriaSelectOptions<T>, state: SelectState<T>,
     isDisabled,
     isRequired,
     name,
+    form,
     validationBehavior
   });
 
@@ -232,6 +239,14 @@ export function useSelect<T>(props: AriaSelectOptions<T>, state: SelectState<T>,
     errorMessageProps,
     isInvalid,
     validationErrors,
-    validationDetails
+    validationDetails,
+    hiddenSelectProps: {
+      isDisabled,
+      name,
+      label: props.label,
+      state,
+      triggerRef: ref,
+      form
+    }
   };
 }