npm - @react-aria/select - Versions diffs - 3.17.1 → 3.17.3 - Mend

@react-aria/select 3.17.1 → 3.17.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/dist/HiddenSelect.main.js +10 -6
package/dist/HiddenSelect.main.js.map +1 -1
package/dist/HiddenSelect.mjs +10 -6
package/dist/HiddenSelect.module.js +10 -6
package/dist/HiddenSelect.module.js.map +1 -1
package/dist/types.d.ts.map +1 -1
package/dist/useSelect.main.js +1 -1
package/dist/useSelect.main.js.map +1 -1
package/dist/useSelect.mjs +2 -2
package/dist/useSelect.module.js +2 -2
package/dist/useSelect.module.js.map +1 -1
package/package.json +15 -15
package/src/HiddenSelect.tsx +11 -5
package/src/useSelect.ts +2 -2

package/dist/HiddenSelect.main.js CHANGED Viewed

@@ -1,6 +1,6 @@
 var $23a1e93dc7fa8653$exports = require("./useSelect.main.js");
-var $ccxQv$react = require("react");
 var $ccxQv$reactariautils = require("@react-aria/utils");
+var $ccxQv$react = require("react");
 var $ccxQv$reactariaform = require("@react-aria/form");
 var $ccxQv$reactariavisuallyhidden = require("@react-aria/visually-hidden");
@@ -52,7 +52,8 @@ function $6eae0e0872a4cdd4$export$f809e80f58e251d1(props, state, triggerRef) {
     }, state, props.selectRef);
     let setValue = state.setValue;
     let onChange = (0, $ccxQv$react.useCallback)((e)=>{
-        if (e.target.multiple) setValue(Array.from(e.target.selectedOptions, (option)=>option.value));
+        let eventTarget = (0, $ccxQv$reactariautils.getEventTarget)(e);
+        if (eventTarget.multiple) setValue(Array.from(eventTarget.selectedOptions, (option)=>option.value));
         else setValue(e.currentTarget.value);
     }, [
         setValue
@@ -100,6 +101,9 @@ function $6eae0e0872a4cdd4$export$cbd84cdb2e668835(props) {
         ...props,
         selectRef: state.collection.size <= 300 ? selectRef : inputRef
     }, state, triggerRef);
+    let values = Array.isArray(state.value) ? state.value : [
+        state.value
+    ];
     // 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">.
@@ -117,14 +121,14 @@ function $6eae0e0872a4cdd4$export$cbd84cdb2e668835(props) {
             key: item.key,
             value: item.key
         }, item.textValue);
-    }))));
+    }), state.collection.size === 0 && name && values.map((value, i)=>/*#__PURE__*/ (0, ($parcel$interopDefault($ccxQv$react))).createElement("option", {
+            key: i,
+            value: value !== null && value !== void 0 ? value : ''
+        })))));
     else if (name) {
         let data = (0, $23a1e93dc7fa8653$exports.selectData).get(state) || {};
         let { validationBehavior: validationBehavior } = data;
         // Always render at least one hidden input to ensure required form submission.
-        let values = Array.isArray(state.value) ? state.value : [
-            state.value
-        ];
         if (values.length === 0) values = [
             null
         ];

package/dist/HiddenSelect.main.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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, Key, RefObject} from '@react-types/shared';\nimport React, {InputHTMLAttributes, JSX, ReactNode, useCallback, useRef} from 'react';\nimport {selectData} from './useSelect';\nimport {SelectionMode} from '@react-types/select';\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, M extends SelectionMode = 'single'> extends AriaHiddenSelectProps {\n /* State for the select. /\n state: SelectState<T, M>,\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, M extends SelectionMode = 'single'>(props: AriaHiddenSelectOptions, state: SelectState<T, M>, 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.defaultValue, state.setValue);\n useFormValidation({\n validationBehavior,\n focus: () => triggerRef.current?.focus()\n }, state, props.selectRef);\n\n let setValue = state.setValue;\n let onChange = useCallback((e: React.ChangeEvent<HTMLSelectElement>) => {\n if (e.target.multiple) {\n setValue(Array.from(\n e.target.selectedOptions,\n (option) => option.value\n ) as any);\n } else {\n setValue(e.currentTarget.value as any);\n }\n }, [setValue]);\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 multiple: state.selectionManager.selectionMode === 'multiple',\n required: validationBehavior === 'native' && isRequired,\n name,\n form,\n value: (state.value as string \| string[]) ?? '',\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, M extends SelectionMode = 'single'>(props: HiddenSelectProps<T, M>): 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 // Always render at least one hidden input to ensure required form submission.\n let values: (Key \| null)[] = Array.isArray(state.value) ? state.value : [state.value];\n if (values.length === 0) {\n values = [null];\n }\n \n let res = values.map((value, i) => {\n let inputProps: InputHTMLAttributes<HTMLInputElement> = {\n type: 'hidden',\n autoComplete: selectProps.autoComplete,\n name,\n form,\n disabled: isDisabled,\n value: value ?? ''\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 key={i}\n {...inputProps}\n ref={i === 0 ? inputRef : null}\n style={{display: 'none'}}\n type=\"text\"\n required={i === 0 ? selectProps.required : false}\n onChange={() => {/* Ignore react warning. */}} />\n );\n }\n\n return (\n <input key={i} {...inputProps} ref={i === 0 ? inputRef : null} />\n );\n });\n\n return <>{res}</>;\n }\n\n return null;\n}\n"],"names":[],"version":3,"file":"HiddenSelect.main.js.map"}
1	+ {"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, Key, RefObject} from '@react-types/shared';\nimport {getEventTarget, useFormReset} from '@react-aria/utils';\nimport React, {InputHTMLAttributes, JSX, ReactNode, useCallback, useRef} from 'react';\nimport {selectData} from './useSelect';\nimport {SelectionMode} from '@react-types/select';\nimport {SelectState} from '@react-stately/select';\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, M extends SelectionMode = 'single'> extends AriaHiddenSelectProps {\n /* State for the select. /\n state: SelectState<T, M>,\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, M extends SelectionMode = 'single'>(props: AriaHiddenSelectOptions, state: SelectState<T, M>, 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.defaultValue, state.setValue);\n useFormValidation({\n validationBehavior,\n focus: () => triggerRef.current?.focus()\n }, state, props.selectRef);\n\n let setValue = state.setValue;\n let onChange = useCallback((e: React.ChangeEvent<HTMLSelectElement>) => {\n let eventTarget = getEventTarget(e);\n if (eventTarget.multiple) {\n setValue(Array.from(\n eventTarget.selectedOptions,\n (option) => option.value\n ) as any);\n } else {\n setValue(e.currentTarget.value as any);\n }\n }, [setValue]);\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 multiple: state.selectionManager.selectionMode === 'multiple',\n required: validationBehavior === 'native' && isRequired,\n name,\n form,\n value: (state.value as string \| string[]) ?? '',\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, M extends SelectionMode = 'single'>(props: HiddenSelectProps<T, M>): 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 let values: (Key \| null)[] = Array.isArray(state.value) ? state.value : [state.value];\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 {/ The collection may be empty during the initial render. /}\n {/ Rendering options for the current values ensures the select has a value immediately, /}\n {/ making FormData reads consistent. /}\n {state.collection.size === 0 && name && values.map((value, i) => <option key={i} value={value ?? ''} />)}\n </select>\n </label>\n </div>\n );\n } else if (name) {\n let data = selectData.get(state) \|\| {};\n let {validationBehavior} = data;\n\n // Always render at least one hidden input to ensure required form submission.\n if (values.length === 0) {\n values = [null];\n }\n\n let res = values.map((value, i) => {\n let inputProps: InputHTMLAttributes<HTMLInputElement> = {\n type: 'hidden',\n autoComplete: selectProps.autoComplete,\n name,\n form,\n disabled: isDisabled,\n value: value ?? ''\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 key={i}\n {...inputProps}\n ref={i === 0 ? inputRef : null}\n style={{display: 'none'}}\n type=\"text\"\n required={i === 0 ? selectProps.required : false}\n onChange={() => {/* Ignore react warning. */}} />\n );\n }\n\n return (\n <input key={i} {...inputProps} ref={i === 0 ? inputRef : null} />\n );\n });\n\n return <>{res}</>;\n }\n\n return null;\n}\n"],"names":[],"version":3,"file":"HiddenSelect.main.js.map"}

package/dist/HiddenSelect.mjs CHANGED Viewed

@@ -1,6 +1,6 @@
 import {selectData as $58aed456727eb0f3$export$703601b7e90536f8} from "./useSelect.mjs";
+import {useFormReset as $8BE50$useFormReset, getEventTarget as $8BE50$getEventTarget} from "@react-aria/utils";
 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";
@@ -41,7 +41,8 @@ function $bdd25dc72710631f$export$f809e80f58e251d1(props, state, triggerRef) {
     }, state, props.selectRef);
     let setValue = state.setValue;
     let onChange = (0, $8BE50$useCallback)((e)=>{
-        if (e.target.multiple) setValue(Array.from(e.target.selectedOptions, (option)=>option.value));
+        let eventTarget = (0, $8BE50$getEventTarget)(e);
+        if (eventTarget.multiple) setValue(Array.from(eventTarget.selectedOptions, (option)=>option.value));
         else setValue(e.currentTarget.value);
     }, [
         setValue
@@ -89,6 +90,9 @@ function $bdd25dc72710631f$export$cbd84cdb2e668835(props) {
         ...props,
         selectRef: state.collection.size <= 300 ? selectRef : inputRef
     }, state, triggerRef);
+    let values = Array.isArray(state.value) ? state.value : [
+        state.value
+    ];
     // 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">.
@@ -106,14 +110,14 @@ function $bdd25dc72710631f$export$cbd84cdb2e668835(props) {
             key: item.key,
             value: item.key
         }, item.textValue);
-    }))));
+    }), state.collection.size === 0 && name && values.map((value, i)=>/*#__PURE__*/ (0, $8BE50$react).createElement("option", {
+            key: i,
+            value: value !== null && value !== void 0 ? value : ''
+        })))));
     else if (name) {
         let data = (0, $58aed456727eb0f3$export$703601b7e90536f8).get(state) || {};
         let { validationBehavior: validationBehavior } = data;
         // Always render at least one hidden input to ensure required form submission.
-        let values = Array.isArray(state.value) ? state.value : [
-            state.value
-        ];
         if (values.length === 0) values = [
             null
         ];

package/dist/HiddenSelect.module.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import {selectData as $58aed456727eb0f3$export$703601b7e90536f8} from "./useSelect.module.js";
+import {useFormReset as $8BE50$useFormReset, getEventTarget as $8BE50$getEventTarget} from "@react-aria/utils";
 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";
@@ -41,7 +41,8 @@ function $bdd25dc72710631f$export$f809e80f58e251d1(props, state, triggerRef) {
     }, state, props.selectRef);
     let setValue = state.setValue;
     let onChange = (0, $8BE50$useCallback)((e)=>{
-        if (e.target.multiple) setValue(Array.from(e.target.selectedOptions, (option)=>option.value));
+        let eventTarget = (0, $8BE50$getEventTarget)(e);
+        if (eventTarget.multiple) setValue(Array.from(eventTarget.selectedOptions, (option)=>option.value));
         else setValue(e.currentTarget.value);
     }, [
         setValue
@@ -89,6 +90,9 @@ function $bdd25dc72710631f$export$cbd84cdb2e668835(props) {
         ...props,
         selectRef: state.collection.size <= 300 ? selectRef : inputRef
     }, state, triggerRef);
+    let values = Array.isArray(state.value) ? state.value : [
+        state.value
+    ];
     // 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">.
@@ -106,14 +110,14 @@ function $bdd25dc72710631f$export$cbd84cdb2e668835(props) {
             key: item.key,
             value: item.key
         }, item.textValue);
-    }))));
+    }), state.collection.size === 0 && name && values.map((value, i)=>/*#__PURE__*/ (0, $8BE50$react).createElement("option", {
+            key: i,
+            value: value !== null && value !== void 0 ? value : ''
+        })))));
     else if (name) {
         let data = (0, $58aed456727eb0f3$export$703601b7e90536f8).get(state) || {};
         let { validationBehavior: validationBehavior } = data;
         // Always render at least one hidden input to ensure required form submission.
-        let values = Array.isArray(state.value) ? state.value : [
-            state.value
-        ];
         if (values.length === 0) values = [
             null
         ];

package/dist/HiddenSelect.module.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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, Key, RefObject} from '@react-types/shared';\nimport React, {InputHTMLAttributes, JSX, ReactNode, useCallback, useRef} from 'react';\nimport {selectData} from './useSelect';\nimport {SelectionMode} from '@react-types/select';\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, M extends SelectionMode = 'single'> extends AriaHiddenSelectProps {\n /* State for the select. /\n state: SelectState<T, M>,\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, M extends SelectionMode = 'single'>(props: AriaHiddenSelectOptions, state: SelectState<T, M>, 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.defaultValue, state.setValue);\n useFormValidation({\n validationBehavior,\n focus: () => triggerRef.current?.focus()\n }, state, props.selectRef);\n\n let setValue = state.setValue;\n let onChange = useCallback((e: React.ChangeEvent<HTMLSelectElement>) => {\n if (e.target.multiple) {\n setValue(Array.from(\n e.target.selectedOptions,\n (option) => option.value\n ) as any);\n } else {\n setValue(e.currentTarget.value as any);\n }\n }, [setValue]);\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 multiple: state.selectionManager.selectionMode === 'multiple',\n required: validationBehavior === 'native' && isRequired,\n name,\n form,\n value: (state.value as string \| string[]) ?? '',\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, M extends SelectionMode = 'single'>(props: HiddenSelectProps<T, M>): 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 // Always render at least one hidden input to ensure required form submission.\n let values: (Key \| null)[] = Array.isArray(state.value) ? state.value : [state.value];\n if (values.length === 0) {\n values = [null];\n }\n \n let res = values.map((value, i) => {\n let inputProps: InputHTMLAttributes<HTMLInputElement> = {\n type: 'hidden',\n autoComplete: selectProps.autoComplete,\n name,\n form,\n disabled: isDisabled,\n value: value ?? ''\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 key={i}\n {...inputProps}\n ref={i === 0 ? inputRef : null}\n style={{display: 'none'}}\n type=\"text\"\n required={i === 0 ? selectProps.required : false}\n onChange={() => {/* Ignore react warning. */}} />\n );\n }\n\n return (\n <input key={i} {...inputProps} ref={i === 0 ? inputRef : null} />\n );\n });\n\n return <>{res}</>;\n }\n\n return null;\n}\n"],"names":[],"version":3,"file":"HiddenSelect.module.js.map"}
1	+ {"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, Key, RefObject} from '@react-types/shared';\nimport {getEventTarget, useFormReset} from '@react-aria/utils';\nimport React, {InputHTMLAttributes, JSX, ReactNode, useCallback, useRef} from 'react';\nimport {selectData} from './useSelect';\nimport {SelectionMode} from '@react-types/select';\nimport {SelectState} from '@react-stately/select';\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, M extends SelectionMode = 'single'> extends AriaHiddenSelectProps {\n /* State for the select. /\n state: SelectState<T, M>,\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, M extends SelectionMode = 'single'>(props: AriaHiddenSelectOptions, state: SelectState<T, M>, 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.defaultValue, state.setValue);\n useFormValidation({\n validationBehavior,\n focus: () => triggerRef.current?.focus()\n }, state, props.selectRef);\n\n let setValue = state.setValue;\n let onChange = useCallback((e: React.ChangeEvent<HTMLSelectElement>) => {\n let eventTarget = getEventTarget(e);\n if (eventTarget.multiple) {\n setValue(Array.from(\n eventTarget.selectedOptions,\n (option) => option.value\n ) as any);\n } else {\n setValue(e.currentTarget.value as any);\n }\n }, [setValue]);\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 multiple: state.selectionManager.selectionMode === 'multiple',\n required: validationBehavior === 'native' && isRequired,\n name,\n form,\n value: (state.value as string \| string[]) ?? '',\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, M extends SelectionMode = 'single'>(props: HiddenSelectProps<T, M>): 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 let values: (Key \| null)[] = Array.isArray(state.value) ? state.value : [state.value];\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 {/ The collection may be empty during the initial render. /}\n {/ Rendering options for the current values ensures the select has a value immediately, /}\n {/ making FormData reads consistent. /}\n {state.collection.size === 0 && name && values.map((value, i) => <option key={i} value={value ?? ''} />)}\n </select>\n </label>\n </div>\n );\n } else if (name) {\n let data = selectData.get(state) \|\| {};\n let {validationBehavior} = data;\n\n // Always render at least one hidden input to ensure required form submission.\n if (values.length === 0) {\n values = [null];\n }\n\n let res = values.map((value, i) => {\n let inputProps: InputHTMLAttributes<HTMLInputElement> = {\n type: 'hidden',\n autoComplete: selectProps.autoComplete,\n name,\n form,\n disabled: isDisabled,\n value: value ?? ''\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 key={i}\n {...inputProps}\n ref={i === 0 ? inputRef : null}\n style={{display: 'none'}}\n type=\"text\"\n required={i === 0 ? selectProps.required : false}\n onChange={() => {/* Ignore react warning. */}} />\n );\n }\n\n return (\n <input key={i} {...inputProps} ref={i === 0 ? inputRef : null} />\n );\n });\n\n return <>{res}</>;\n }\n\n return null;\n}\n"],"names":[],"version":3,"file":"HiddenSelect.module.js.map"}

package/dist/types.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"mappings":";;;;;;AAqBA;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,EAAE,CAAC,SAAS,aAAa,GAAG,QAAQ,CAAE,SAAQ,qBAAqB;IACrG,4BAA4B;IAC5B,KAAK,EAAE,YAAY,CAAC,EAAE,CAAC,CAAC,CAAC;IAEzB,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,CAAC,SAAS,aAAa,GAAG,QAAQ,EAAE,KAAK,EAAE,uBAAuB,EAAE,KAAK,EAAE,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,UAAU,gBAAgB,GAAG,IAAI,CAAC,GAAG,gBAAgB,~~CA8DjM~~;AAED;;;GAGG;AACH,6BAA6B,CAAC,EAAE,CAAC,SAAS,aAAa,GAAG,QAAQ,EAAE,KAAK,EAAE,kBAAkB,CAAC,EAAE,CAAC,CAAC,GAAG,IAAI,OAAO,GAAG,IAAI,~~CA4EtH~~;~~AC/LD~~,mCAAmC,CAAC,EAAE,CAAC,SAAS,aAAa,GAAG,QAAQ,CAAE,SAAQ,IAAI,CAAC,gBAAgB,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC;IACvH;;;OAGG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAA;CACpC;AAED,4BAA4B,CAAC,EAAE,CAAC,SAAS,aAAa,GAAG,QAAQ,CAAE,SAAQ,gBAAgB;IACzF,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,EAAE,CAAC,CAAC,CAAA;CAC3C;AAYD;;;;;GAKG;AACH,0BAA0B,CAAC,EAAE,CAAC,SAAS,aAAa,GAAG,QAAQ,EAAE,KAAK,EAAE,kBAAkB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,UAAU,WAAW,GAAG,IAAI,CAAC,GAAG,WAAW,CAAC,EAAE,CAAC,CAAC,CAyL/K;ACnPD,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"}
1	+ {"mappings":";;;;;;AAqBA;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,EAAE,CAAC,SAAS,aAAa,GAAG,QAAQ,CAAE,SAAQ,qBAAqB;IACrG,4BAA4B;IAC5B,KAAK,EAAE,YAAY,CAAC,EAAE,CAAC,CAAC,CAAC;IAEzB,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,CAAC,SAAS,aAAa,GAAG,QAAQ,EAAE,KAAK,EAAE,uBAAuB,EAAE,KAAK,EAAE,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,UAAU,gBAAgB,GAAG,IAAI,CAAC,GAAG,gBAAgB,CA+DjM;AAED;;;GAGG;AACH,6BAA6B,CAAC,EAAE,CAAC,SAAS,aAAa,GAAG,QAAQ,EAAE,KAAK,EAAE,kBAAkB,CAAC,EAAE,CAAC,CAAC,GAAG,IAAI,OAAO,GAAG,IAAI,CAiFtH;ACrMD,mCAAmC,CAAC,EAAE,CAAC,SAAS,aAAa,GAAG,QAAQ,CAAE,SAAQ,IAAI,CAAC,gBAAgB,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC;IACvH;;;OAGG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAA;CACpC;AAED,4BAA4B,CAAC,EAAE,CAAC,SAAS,aAAa,GAAG,QAAQ,CAAE,SAAQ,gBAAgB;IACzF,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,EAAE,CAAC,CAAC,CAAA;CAC3C;AAYD;;;;;GAKG;AACH,0BAA0B,CAAC,EAAE,CAAC,SAAS,aAAa,GAAG,QAAQ,EAAE,KAAK,EAAE,kBAAkB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,UAAU,WAAW,GAAG,IAAI,CAAC,GAAG,WAAW,CAAC,EAAE,CAAC,CAAC,CAyL/K;ACnPD,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 CHANGED Viewed

@@ -148,7 +148,7 @@ function $23a1e93dc7fa8653$export$e64b2f635402ca43(props, state, ref) {
             disallowEmptySelection: true,
             linkBehavior: 'selection',
             onBlur: (e)=>{
-                if (e.currentTarget.contains(e.relatedTarget)) return;
+                if ((0, $63cuq$reactariautils.nodeContains)(e.currentTarget, e.relatedTarget)) return;
                 if (props.onBlur) props.onBlur(e);
                 if (props.onFocusChange) props.onFocusChange(false);
                 state.setFocused(false);

package/dist/useSelect.main.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAuDM,MAAM,4CAAyD,IAAI;AAQnE,SAAS,0CAAiD,KAA8B,EAAE,KAAwB,EAAE,GAAkC;IAC3J,IAAI,oBACF,gBAAgB,cAChB,UAAU,cACV,UAAU,QACV,IAAI,QACJ,IAAI,sBACJ,qBAAqB,QACtB,GAAG;IAEJ,0HAA0H;IAC1H,qFAAqF;IACrF,IAAI,WAAW,CAAA,GAAA,gCAAU,EAAE;QAAC,OAAO;QAAU,aAAa;IAAM;IAChE,IAAI,WAAW,CAAA,GAAA,oBAAM,EAAE,IAAM,oBAAoB,IAAI,CAAA,GAAA,8CAAmB,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,mCAAa,EAC/C;oBACE;QACA,MAAM;IACR,GACA,OACA;IAGF,IAAI,YAAY,CAAC;QACf,IAAI,MAAM,gBAAgB,CAAC,aAAa,KAAK,YAC3C;QAGF,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,uCAAY,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,8BAAO,EAAE;QAC3E,GAAG,KAAK;QACR,kBAAkB;mBAClB;QACA,cAAc,MAAM,YAAY,IAAI;IACtC;IAEA,gBAAgB,SAAS,GAAG,gBAAgB,gBAAgB;IAC5D,OAAO,gBAAgB,gBAAgB;IACvC,IAAI,MAAM,gBAAgB,CAAC,aAAa,KAAK,YAC3C,kBAAkB,CAAC;IAGrB,IAAI,WAAW,CAAA,GAAA,oCAAa,EAAE,OAAO;QAAC,WAAW;IAAI;IACrD,IAAI,eAAe,CAAA,GAAA,gCAAS,EAAE,iBAAiB,kBAAkB;IAEjE,IAAI,UAAU,CAAA,GAAA,2BAAI;IAElB,0CAAW,GAAG,CAAC,OAAO;oBACpB;oBACA;cACA;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,mDAAqB,EAAE;gBACzB;YACF;QACF;QACA,cAAc,CAAA,GAAA,gCAAS,EAAE,UAAU;YACjC,GAAG,YAAY;wBACf;YACA,WAAW,CAAA,GAAA,2BAAI,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;QACA,mBAAmB;wBACjB;kBACA;YACA,OAAO,MAAM,KAAK;mBAClB;YACA,YAAY;kBACZ;QACF;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, SelectionMode} 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, M extends SelectionMode = 'single'> extends Omit<AriaSelectProps<T, M>, '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, M extends SelectionMode = 'single'> 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, M>\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, 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, M extends SelectionMode = 'single'>(props: AriaSelectOptions<T, M>, state: SelectState<T, M>, ref: RefObject<HTMLElement \| null>): SelectAria<T, M> {\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 if (state.selectionManager.selectionMode === 'multiple') {\n return;\n }\n \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 if (state.selectionManager.selectionMode === 'multiple') {\n typeSelectProps = {};\n }\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"}
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, SelectionMode} from '@react-types/select';\nimport {chain, filterDOMProps, mergeProps, nodeContains, 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, M extends SelectionMode = 'single'> extends Omit<AriaSelectProps<T, M>, '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, M extends SelectionMode = 'single'> 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, M>\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, 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, M extends SelectionMode = 'single'>(props: AriaSelectOptions<T, M>, state: SelectState<T, M>, ref: RefObject<HTMLElement \| null>): SelectAria<T, M> {\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 if (state.selectionManager.selectionMode === 'multiple') {\n return;\n }\n \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 if (state.selectionManager.selectionMode === 'multiple') {\n typeSelectProps = {};\n }\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 (nodeContains(e.currentTarget, 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 CHANGED Viewed

@@ -1,4 +1,4 @@
-import {filterDOMProps as $aUnai$filterDOMProps, mergeProps as $aUnai$mergeProps, useId as $aUnai$useId, chain as $aUnai$chain} from "@react-aria/utils";
+import {filterDOMProps as $aUnai$filterDOMProps, mergeProps as $aUnai$mergeProps, useId as $aUnai$useId, chain as $aUnai$chain, nodeContains as $aUnai$nodeContains} from "@react-aria/utils";
 import {useMemo as $aUnai$useMemo} from "react";
 import {ListKeyboardDelegate as $aUnai$ListKeyboardDelegate, useTypeSelect as $aUnai$useTypeSelect} from "@react-aria/selection";
 import {setInteractionModality as $aUnai$setInteractionModality} from "@react-aria/interactions";
@@ -141,7 +141,7 @@ function $58aed456727eb0f3$export$e64b2f635402ca43(props, state, ref) {
             disallowEmptySelection: true,
             linkBehavior: 'selection',
             onBlur: (e)=>{
-                if (e.currentTarget.contains(e.relatedTarget)) return;
+                if ((0, $aUnai$nodeContains)(e.currentTarget, e.relatedTarget)) return;
                 if (props.onBlur) props.onBlur(e);
                 if (props.onFocusChange) props.onFocusChange(false);
                 state.setFocused(false);

package/dist/useSelect.module.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import {filterDOMProps as $aUnai$filterDOMProps, mergeProps as $aUnai$mergeProps, useId as $aUnai$useId, chain as $aUnai$chain} from "@react-aria/utils";
+import {filterDOMProps as $aUnai$filterDOMProps, mergeProps as $aUnai$mergeProps, useId as $aUnai$useId, chain as $aUnai$chain, nodeContains as $aUnai$nodeContains} from "@react-aria/utils";
 import {useMemo as $aUnai$useMemo} from "react";
 import {ListKeyboardDelegate as $aUnai$ListKeyboardDelegate, useTypeSelect as $aUnai$useTypeSelect} from "@react-aria/selection";
 import {setInteractionModality as $aUnai$setInteractionModality} from "@react-aria/interactions";
@@ -141,7 +141,7 @@ function $58aed456727eb0f3$export$e64b2f635402ca43(props, state, ref) {
             disallowEmptySelection: true,
             linkBehavior: 'selection',
             onBlur: (e)=>{
-                if (e.currentTarget.contains(e.relatedTarget)) return;
+                if ((0, $aUnai$nodeContains)(e.currentTarget, e.relatedTarget)) return;
                 if (props.onBlur) props.onBlur(e);
                 if (props.onFocusChange) props.onFocusChange(false);
                 state.setFocused(false);

package/dist/useSelect.module.js.map CHANGED Viewed

	@@ -1 +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, SelectionMode} 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, M extends SelectionMode = 'single'> extends Omit<AriaSelectProps<T, M>, '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, M extends SelectionMode = 'single'> 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, M>\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, 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, M extends SelectionMode = 'single'>(props: AriaSelectOptions<T, M>, state: SelectState<T, M>, ref: RefObject<HTMLElement \| null>): SelectAria<T, M> {\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 if (state.selectionManager.selectionMode === 'multiple') {\n return;\n }\n \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 if (state.selectionManager.selectionMode === 'multiple') {\n typeSelectProps = {};\n }\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"}
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, SelectionMode} from '@react-types/select';\nimport {chain, filterDOMProps, mergeProps, nodeContains, 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, M extends SelectionMode = 'single'> extends Omit<AriaSelectProps<T, M>, '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, M extends SelectionMode = 'single'> 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, M>\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, 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, M extends SelectionMode = 'single'>(props: AriaSelectOptions<T, M>, state: SelectState<T, M>, ref: RefObject<HTMLElement \| null>): SelectAria<T, M> {\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 if (state.selectionManager.selectionMode === 'multiple') {\n return;\n }\n \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 if (state.selectionManager.selectionMode === 'multiple') {\n typeSelectProps = {};\n }\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 (nodeContains(e.currentTarget, 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 CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@react-aria/select",
-  "version": "3.17.1",
+  "version": "3.17.3",
   "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.1.3",
-    "@react-aria/i18n": "^3.12.14",
-    "@react-aria/interactions": "^3.26.0",
-    "@react-aria/label": "^3.7.23",
-    "@react-aria/listbox": "^3.15.1",
-    "@react-aria/menu": "^3.19.4",
-    "@react-aria/selection": "^3.27.0",
-    "@react-aria/utils": "^3.32.0",
-    "@react-aria/visually-hidden": "^3.8.29",
-    "@react-stately/select": "^3.9.0",
-    "@react-types/button": "^3.14.1",
-    "@react-types/select": "^3.12.0",
-    "@react-types/shared": "^3.32.1",
+    "@react-aria/form": "^3.1.5",
+    "@react-aria/i18n": "^3.12.16",
+    "@react-aria/interactions": "^3.27.1",
+    "@react-aria/label": "^3.7.25",
+    "@react-aria/listbox": "^3.15.3",
+    "@react-aria/menu": "^3.21.0",
+    "@react-aria/selection": "^3.27.2",
+    "@react-aria/utils": "^3.33.1",
+    "@react-aria/visually-hidden": "^3.8.31",
+    "@react-stately/select": "^3.9.2",
+    "@react-types/button": "^3.15.1",
+    "@react-types/select": "^3.12.2",
+    "@react-types/shared": "^3.33.1",
     "@swc/helpers": "^0.5.0"
   },
   "peerDependencies": {
@@ -48,5 +48,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "4d838da5bfe36abb35aed166995a9ef63825370f"
+  "gitHead": "8df187370053aa35f553cb388ad670f65e1ab371"
 }

package/src/HiddenSelect.tsx CHANGED Viewed

@@ -11,11 +11,11 @@
  */
 import {FocusableElement, Key, RefObject} from '@react-types/shared';
+import {getEventTarget, useFormReset} from '@react-aria/utils';
 import React, {InputHTMLAttributes, JSX, ReactNode, useCallback, useRef} from 'react';
 import {selectData} from './useSelect';
 import {SelectionMode} from '@react-types/select';
 import {SelectState} from '@react-stately/select';
-import {useFormReset} from '@react-aria/utils';
 import {useFormValidation} from '@react-aria/form';
 import {useVisuallyHidden} from '@react-aria/visually-hidden';
@@ -92,9 +92,10 @@ export function useHiddenSelect<T, M extends SelectionMode = 'single'>(props: Ar
   let setValue = state.setValue;
   let onChange = useCallback((e: React.ChangeEvent<HTMLSelectElement>) => {
-    if (e.target.multiple) {
+    let eventTarget = getEventTarget(e);
+    if (eventTarget.multiple) {
       setValue(Array.from(
-        e.target.selectedOptions,
+        eventTarget.selectedOptions,
         (option) => option.value
       ) as any);
     } else {
@@ -145,6 +146,8 @@ export function HiddenSelect<T, M extends SelectionMode = 'single'>(props: Hidde
   let inputRef = useRef(null);
   let {containerProps, selectProps} = useHiddenSelect({...props, selectRef: state.collection.size <= 300 ? selectRef : inputRef}, state, triggerRef);
+  let values: (Key | null)[] = Array.isArray(state.value) ? state.value : [state.value];
   // 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">.
@@ -167,6 +170,10 @@ export function HiddenSelect<T, M extends SelectionMode = 'single'>(props: Hidde
                 );
               }
             })}
+            {/* The collection may be empty during the initial render. */}
+            {/* Rendering options for the current values ensures the select has a value immediately, */}
+            {/* making FormData reads consistent. */}
+            {state.collection.size === 0 && name && values.map((value, i) => <option key={i} value={value ?? ''} />)}
           </select>
         </label>
       </div>
@@ -176,11 +183,10 @@ export function HiddenSelect<T, M extends SelectionMode = 'single'>(props: Hidde
     let {validationBehavior} = data;
     // Always render at least one hidden input to ensure required form submission.
-    let values: (Key | null)[] = Array.isArray(state.value) ? state.value : [state.value];
     if (values.length === 0) {
       values = [null];
     }
     let res = values.map((value, i) => {
       let inputProps: InputHTMLAttributes<HTMLInputElement> = {
         type: 'hidden',

package/src/useSelect.ts CHANGED Viewed

@@ -13,7 +13,7 @@
 import {AriaButtonProps} from '@react-types/button';
 import {AriaListBoxOptions} from '@react-aria/listbox';
 import {AriaSelectProps, SelectionMode} from '@react-types/select';
-import {chain, filterDOMProps, mergeProps, useId} from '@react-aria/utils';
+import {chain, filterDOMProps, mergeProps, nodeContains, useId} from '@react-aria/utils';
 import {DOMAttributes, KeyboardDelegate, RefObject, ValidationResult} from '@react-types/shared';
 import {FocusEvent, useMemo} from 'react';
 import {HiddenSelectProps} from './HiddenSelect';
@@ -223,7 +223,7 @@ export function useSelect<T, M extends SelectionMode = 'single'>(props: AriaSele
       disallowEmptySelection: true,
       linkBehavior: 'selection',
       onBlur: (e) => {
-        if (e.currentTarget.contains(e.relatedTarget as Node)) {
+        if (nodeContains(e.currentTarget, e.relatedTarget as Node)) {
           return;
         }