@react-aria/select 3.6.1-nightly.3085 → 3.6.1-nightly.3100
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.
- package/dist/main.js +35 -36
- package/dist/main.js.map +1 -1
- package/dist/module.js +34 -35
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts.map +1 -1
- package/package.json +14 -14
- package/src/useSelect.ts +2 -3
package/dist/main.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
var $
|
|
2
|
-
var $
|
|
3
|
-
var $
|
|
4
|
-
var $
|
|
5
|
-
var $
|
|
6
|
-
var $
|
|
7
|
-
var $
|
|
8
|
-
var $
|
|
1
|
+
var $4ws95$reactariautils = require("@react-aria/utils");
|
|
2
|
+
var $4ws95$react = require("react");
|
|
3
|
+
var $4ws95$reactariaselection = require("@react-aria/selection");
|
|
4
|
+
var $4ws95$reactariainteractions = require("@react-aria/interactions");
|
|
5
|
+
var $4ws95$reactariai18n = require("@react-aria/i18n");
|
|
6
|
+
var $4ws95$reactarialabel = require("@react-aria/label");
|
|
7
|
+
var $4ws95$reactariamenu = require("@react-aria/menu");
|
|
8
|
+
var $4ws95$reactariavisuallyhidden = require("@react-aria/visually-hidden");
|
|
9
9
|
|
|
10
10
|
function $parcel$exportWildcard(dest, source) {
|
|
11
11
|
Object.keys(source).forEach(function(key) {
|
|
@@ -29,9 +29,9 @@ function $parcel$export(e, n, v, s) {
|
|
|
29
29
|
function $parcel$interopDefault(a) {
|
|
30
30
|
return a && a.__esModule ? a.default : a;
|
|
31
31
|
}
|
|
32
|
-
var $
|
|
32
|
+
var $4298c6daa5cb9767$exports = {};
|
|
33
33
|
|
|
34
|
-
$parcel$export($
|
|
34
|
+
$parcel$export($4298c6daa5cb9767$exports, "useSelect", () => $4298c6daa5cb9767$export$e64b2f635402ca43);
|
|
35
35
|
|
|
36
36
|
|
|
37
37
|
|
|
@@ -39,22 +39,22 @@ $parcel$export($8a22db5c7ccf2f11$exports, "useSelect", () => $8a22db5c7ccf2f11$e
|
|
|
39
39
|
|
|
40
40
|
|
|
41
41
|
|
|
42
|
-
function $
|
|
42
|
+
function $4298c6daa5cb9767$export$e64b2f635402ca43(props, state, ref) {
|
|
43
43
|
let { keyboardDelegate: keyboardDelegate , isDisabled: isDisabled } = props;
|
|
44
44
|
// By default, a KeyboardDelegate is provided which uses the DOM to query layout information (e.g. for page up/page down).
|
|
45
45
|
// When virtualized, the layout object will be passed in as a prop and override this.
|
|
46
|
-
let collator = $
|
|
46
|
+
let collator = $4ws95$reactariai18n.useCollator({
|
|
47
47
|
usage: 'search',
|
|
48
48
|
sensitivity: 'base'
|
|
49
49
|
});
|
|
50
|
-
let delegate = $
|
|
50
|
+
let delegate = $4ws95$react.useMemo(()=>keyboardDelegate || new $4ws95$reactariaselection.ListKeyboardDelegate(state.collection, state.disabledKeys, null, collator)
|
|
51
51
|
, [
|
|
52
52
|
keyboardDelegate,
|
|
53
53
|
state.collection,
|
|
54
54
|
state.disabledKeys,
|
|
55
55
|
collator
|
|
56
56
|
]);
|
|
57
|
-
let { menuTriggerProps: menuTriggerProps , menuProps: menuProps } = $
|
|
57
|
+
let { menuTriggerProps: menuTriggerProps , menuProps: menuProps } = $4ws95$reactariamenu.useMenuTrigger({
|
|
58
58
|
isDisabled: isDisabled,
|
|
59
59
|
type: 'listbox'
|
|
60
60
|
}, state, ref);
|
|
@@ -78,25 +78,24 @@ function $8a22db5c7ccf2f11$export$e64b2f635402ca43(props, state, ref) {
|
|
|
78
78
|
}
|
|
79
79
|
}
|
|
80
80
|
};
|
|
81
|
-
let { typeSelectProps: typeSelectProps } = $
|
|
81
|
+
let { typeSelectProps: typeSelectProps } = $4ws95$reactariaselection.useTypeSelect({
|
|
82
82
|
keyboardDelegate: delegate,
|
|
83
83
|
selectionManager: state.selectionManager,
|
|
84
84
|
onTypeSelect (key) {
|
|
85
85
|
state.setSelectedKey(key);
|
|
86
86
|
}
|
|
87
87
|
});
|
|
88
|
-
let { labelProps: labelProps , fieldProps: fieldProps , descriptionProps: descriptionProps , errorMessageProps: errorMessageProps } = $
|
|
88
|
+
let { labelProps: labelProps , fieldProps: fieldProps , descriptionProps: descriptionProps , errorMessageProps: errorMessageProps } = $4ws95$reactarialabel.useField({
|
|
89
89
|
...props,
|
|
90
90
|
labelElementType: 'span'
|
|
91
91
|
});
|
|
92
92
|
typeSelectProps.onKeyDown = typeSelectProps.onKeyDownCapture;
|
|
93
93
|
delete typeSelectProps.onKeyDownCapture;
|
|
94
|
-
let domProps = $
|
|
94
|
+
let domProps = $4ws95$reactariautils.filterDOMProps(props, {
|
|
95
95
|
labelable: true
|
|
96
96
|
});
|
|
97
|
-
let triggerProps = $
|
|
98
|
-
|
|
99
|
-
let valueId = `${triggerProps.id}-value`;
|
|
97
|
+
let triggerProps = $4ws95$reactariautils.mergeProps(typeSelectProps, menuTriggerProps, fieldProps);
|
|
98
|
+
let valueId = $4ws95$reactariautils.useId();
|
|
100
99
|
return {
|
|
101
100
|
labelProps: {
|
|
102
101
|
...labelProps,
|
|
@@ -104,13 +103,13 @@ function $8a22db5c7ccf2f11$export$e64b2f635402ca43(props, state, ref) {
|
|
|
104
103
|
if (!props.isDisabled) {
|
|
105
104
|
ref.current.focus();
|
|
106
105
|
// Show the focus ring so the user knows where focus went
|
|
107
|
-
$
|
|
106
|
+
$4ws95$reactariainteractions.setInteractionModality('keyboard');
|
|
108
107
|
}
|
|
109
108
|
}
|
|
110
109
|
},
|
|
111
|
-
triggerProps: $
|
|
110
|
+
triggerProps: $4ws95$reactariautils.mergeProps(domProps, {
|
|
112
111
|
...triggerProps,
|
|
113
|
-
onKeyDown: $
|
|
112
|
+
onKeyDown: $4ws95$reactariautils.chain(triggerProps.onKeyDown, onKeyDown, props.onKeyDown),
|
|
114
113
|
onKeyUp: props.onKeyUp,
|
|
115
114
|
'aria-labelledby': [
|
|
116
115
|
triggerProps['aria-labelledby'],
|
|
@@ -153,17 +152,17 @@ function $8a22db5c7ccf2f11$export$e64b2f635402ca43(props, state, ref) {
|
|
|
153
152
|
}
|
|
154
153
|
|
|
155
154
|
|
|
156
|
-
var $
|
|
155
|
+
var $e5f0755e372eaf29$exports = {};
|
|
157
156
|
|
|
158
|
-
$parcel$export($
|
|
159
|
-
$parcel$export($
|
|
157
|
+
$parcel$export($e5f0755e372eaf29$exports, "useHiddenSelect", () => $e5f0755e372eaf29$export$f809e80f58e251d1);
|
|
158
|
+
$parcel$export($e5f0755e372eaf29$exports, "HiddenSelect", () => $e5f0755e372eaf29$export$cbd84cdb2e668835);
|
|
160
159
|
|
|
161
160
|
|
|
162
161
|
|
|
163
|
-
function $
|
|
162
|
+
function $e5f0755e372eaf29$export$f809e80f58e251d1(props, state, triggerRef) {
|
|
164
163
|
let { autoComplete: autoComplete , name: name , isDisabled: isDisabled } = props;
|
|
165
|
-
let modality = $
|
|
166
|
-
let { visuallyHiddenProps: visuallyHiddenProps } = $
|
|
164
|
+
let modality = $4ws95$reactariainteractions.useInteractionModality();
|
|
165
|
+
let { visuallyHiddenProps: visuallyHiddenProps } = $4ws95$reactariavisuallyhidden.useVisuallyHidden();
|
|
167
166
|
// In Safari, the <select> cannot have `display: none` or `hidden` for autofill to work.
|
|
168
167
|
// In Firefox, there must be a <label> to identify the <select> whereas other browsers
|
|
169
168
|
// seem to identify it just by surrounding text.
|
|
@@ -208,22 +207,22 @@ function $c8c909ccb8cf9f2b$export$f809e80f58e251d1(props, state, triggerRef) {
|
|
|
208
207
|
}
|
|
209
208
|
};
|
|
210
209
|
}
|
|
211
|
-
function $
|
|
210
|
+
function $e5f0755e372eaf29$export$cbd84cdb2e668835(props) {
|
|
212
211
|
let { state: state , triggerRef: triggerRef , label: label , name: name , isDisabled: isDisabled } = props;
|
|
213
|
-
let { containerProps: containerProps , inputProps: inputProps , selectProps: selectProps } = $
|
|
212
|
+
let { containerProps: containerProps , inputProps: inputProps , selectProps: selectProps } = $e5f0755e372eaf29$export$f809e80f58e251d1(props, state, triggerRef);
|
|
214
213
|
// If used in a <form>, use a hidden input so the value can be submitted to a server.
|
|
215
214
|
// If the collection isn't too big, use a hidden <select> element for this so that browser
|
|
216
215
|
// autofill will work. Otherwise, use an <input type="hidden">.
|
|
217
|
-
if (state.collection.size <= 300) return(/*#__PURE__*/ ($parcel$interopDefault($
|
|
216
|
+
if (state.collection.size <= 300) return(/*#__PURE__*/ ($parcel$interopDefault($4ws95$react)).createElement("div", containerProps, /*#__PURE__*/ ($parcel$interopDefault($4ws95$react)).createElement("input", inputProps), /*#__PURE__*/ ($parcel$interopDefault($4ws95$react)).createElement("label", null, label, /*#__PURE__*/ ($parcel$interopDefault($4ws95$react)).createElement("select", selectProps, /*#__PURE__*/ ($parcel$interopDefault($4ws95$react)).createElement("option", null), [
|
|
218
217
|
...state.collection.getKeys()
|
|
219
218
|
].map((key)=>{
|
|
220
219
|
let item = state.collection.getItem(key);
|
|
221
|
-
if (item.type === 'item') return(/*#__PURE__*/ ($parcel$interopDefault($
|
|
220
|
+
if (item.type === 'item') return(/*#__PURE__*/ ($parcel$interopDefault($4ws95$react)).createElement("option", {
|
|
222
221
|
key: item.key,
|
|
223
222
|
value: item.key
|
|
224
223
|
}, item.textValue));
|
|
225
224
|
})))));
|
|
226
|
-
else if (name) return(/*#__PURE__*/ ($parcel$interopDefault($
|
|
225
|
+
else if (name) return(/*#__PURE__*/ ($parcel$interopDefault($4ws95$react)).createElement("input", {
|
|
227
226
|
type: "hidden",
|
|
228
227
|
autoComplete: selectProps.autoComplete,
|
|
229
228
|
name: name,
|
|
@@ -234,8 +233,8 @@ function $c8c909ccb8cf9f2b$export$cbd84cdb2e668835(props) {
|
|
|
234
233
|
}
|
|
235
234
|
|
|
236
235
|
|
|
237
|
-
$parcel$exportWildcard(module.exports, $
|
|
238
|
-
$parcel$exportWildcard(module.exports, $
|
|
236
|
+
$parcel$exportWildcard(module.exports, $4298c6daa5cb9767$exports);
|
|
237
|
+
$parcel$exportWildcard(module.exports, $e5f0755e372eaf29$exports);
|
|
239
238
|
|
|
240
239
|
|
|
241
240
|
//# sourceMappingURL=main.js.map
|
package/dist/main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-aria/select/src/index.ts","packages/@react-aria/select/src/useSelect.ts","packages/@react-aria/select/src/HiddenSelect.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n * \n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport * from './useSelect';\nexport * from './HiddenSelect';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaButtonProps} from '@react-types/button';\nimport {AriaListBoxOptions} from '@react-aria/listbox';\nimport {AriaSelectProps} from '@react-types/select';\nimport {chain, filterDOMProps, mergeProps} from '@react-aria/utils';\nimport {FocusEvent, HTMLAttributes, RefObject, useMemo} from 'react';\nimport {KeyboardDelegate} from '@react-types/shared';\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\ninterface AriaSelectOptions<T> extends AriaSelectProps<T> {\n /**\n * An optional keyboard delegate implementation for type to select,\n * to override the default.\n */\n keyboardDelegate?: KeyboardDelegate\n}\n\ninterface SelectAria {\n /** Props for the label element. */\n labelProps: HTMLAttributes<HTMLElement>,\n\n /** Props for the popup trigger element. */\n triggerProps: AriaButtonProps,\n\n /** Props for the element representing the selected value. */\n valueProps: HTMLAttributes<HTMLElement>,\n\n /** Props for the popup. */\n menuProps: AriaListBoxOptions<unknown>,\n\n /** Props for the select's description element, if any. */\n descriptionProps: HTMLAttributes<HTMLElement>,\n\n /** Props for the select's error message element, if any. */\n errorMessageProps: HTMLAttributes<HTMLElement>\n}\n\n/**\n * Provides the behavior and accessibility implementation for a select component.\n * A select displays a collapsible list of options and allows a user to select one of them.\n * @param props - Props for the select.\n * @param state - State for the select, as returned by `useListState`.\n */\nexport function useSelect<T>(props: AriaSelectOptions<T>, state: SelectState<T>, ref: RefObject<HTMLElement>): SelectAria {\n let {\n keyboardDelegate,\n isDisabled\n } = props;\n\n // By default, a KeyboardDelegate is provided which uses the DOM to query layout information (e.g. for page up/page down).\n // When virtualized, the layout object will be passed in as a prop and override this.\n let collator = useCollator({usage: 'search', sensitivity: 'base'});\n let delegate = useMemo(() => keyboardDelegate || new ListKeyboardDelegate(state.collection, state.disabledKeys, null, collator), [keyboardDelegate, state.collection, state.disabledKeys, collator]);\n\n let {menuTriggerProps, menuProps} = useMenuTrigger(\n {\n isDisabled,\n type: 'listbox'\n },\n state,\n ref\n );\n\n let onKeyDown = (e: KeyboardEvent) => {\n switch (e.key) {\n case 'ArrowLeft': {\n // prevent scrolling containers\n e.preventDefault();\n\n let key = state.selectedKey != null ? delegate.getKeyAbove(state.selectedKey) : delegate.getFirstKey();\n if (key) {\n state.setSelectedKey(key);\n }\n break;\n }\n case 'ArrowRight': {\n // prevent scrolling containers\n e.preventDefault();\n\n let key = state.selectedKey != null ? delegate.getKeyBelow(state.selectedKey) : delegate.getFirstKey();\n if (key) {\n state.setSelectedKey(key);\n }\n break;\n }\n }\n };\n\n let {typeSelectProps} = useTypeSelect({\n keyboardDelegate: delegate,\n selectionManager: state.selectionManager,\n onTypeSelect(key) {\n state.setSelectedKey(key);\n }\n });\n\n let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({\n ...props,\n labelElementType: 'span'\n });\n\n typeSelectProps.onKeyDown = typeSelectProps.onKeyDownCapture;\n delete typeSelectProps.onKeyDownCapture;\n\n let domProps = filterDOMProps(props, {labelable: true});\n let triggerProps = mergeProps(typeSelectProps, menuTriggerProps, fieldProps);\n\n // used to make predictable id's based on the trigger which is already generated, this aids us in testing\n let valueId = `${triggerProps.id}-value`;\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 onKeyDown: chain(triggerProps.onKeyDown, onKeyDown, props.onKeyDown),\n onKeyUp: props.onKeyUp,\n 'aria-labelledby': [\n triggerProps['aria-labelledby'],\n triggerProps['aria-label'] && !triggerProps['aria-labelledby'] ? triggerProps.id : null,\n valueId\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 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 state.setFocused(false);\n }\n }),\n valueProps: {\n id: valueId\n },\n menuProps: {\n ...menuProps,\n autoFocus: state.focusStrategy || true,\n shouldSelectOnPressUp: true,\n shouldFocusOnHover: true,\n disallowEmptySelection: true,\n onBlur: (e) => {\n if (e.currentTarget.contains(e.relatedTarget as Node)) {\n return;\n }\n\n if (props.onBlur) {\n props.onBlur(e);\n }\n state.setFocused(false);\n },\n 'aria-labelledby': [\n fieldProps['aria-labelledby'],\n triggerProps['aria-label'] && !fieldProps['aria-labelledby'] ? triggerProps.id : null\n ].filter(Boolean).join(' ')\n },\n descriptionProps,\n errorMessageProps\n };\n}\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport React, {ReactNode, RefObject} from 'react';\nimport {SelectState} from '@react-stately/select';\nimport {useInteractionModality} from '@react-aria/interactions';\nimport {useVisuallyHidden} from '@react-aria/visually-hidden';\n\ninterface 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\ninterface HiddenSelectProps<T> extends AriaHiddenSelectProps {\n /** State for the select. */\n state: SelectState<T>,\n\n /** A ref to the trigger element. */\n triggerRef: RefObject<HTMLElement>\n}\n\n/**\n * Provides the behavior and accessibility implementation for a hidden `<select>` element, which\n * can be used in combination with `useSelect` to support browser form autofill, mobile form\n * navigation, and native HTML form submission.\n */\nexport function useHiddenSelect<T>(props: AriaHiddenSelectProps, state: SelectState<T>, triggerRef: RefObject<HTMLElement>) {\n let {autoComplete, name, isDisabled} = props;\n let modality = useInteractionModality();\n let {visuallyHiddenProps} = useVisuallyHidden();\n\n // In Safari, the <select> cannot have `display: none` or `hidden` for autofill to work.\n // In Firefox, there must be a <label> to identify the <select> whereas other browsers\n // seem to identify it just by surrounding text.\n // The solution is to use <VisuallyHidden> to hide the elements, which clips the elements to a\n // 1px rectangle. In addition, we hide from screen readers with aria-hidden, and make the <select>\n // non tabbable with tabIndex={-1}.\n //\n // In mobile browsers, there are next/previous buttons above the software keyboard for navigating\n // between fields in a form. These only support native form inputs that are tabbable. In order to\n // support those, an additional hidden input is used to marshall focus to the button. It is tabbable\n // except when the button is focused, so that shift tab works properly to go to the actual previous\n // input in the form. Using the <select> for this also works, but Safari on iOS briefly flashes\n // the native menu on focus, so this isn't ideal. A font-size of 16px or greater is required to\n // prevent Safari from zooming in on the input when it is focused.\n //\n // If the current interaction modality is null, then the user hasn't interacted with the page yet.\n // In this case, we set the tabIndex to -1 on the input element so that automated accessibility\n // checkers don't throw false-positives about focusable elements inside an aria-hidden parent.\n return {\n containerProps: {\n ...visuallyHiddenProps,\n 'aria-hidden': true\n },\n inputProps: {\n type: 'text',\n tabIndex: modality == null || state.isFocused || state.isOpen ? -1 : 0,\n style: {fontSize: 16},\n onFocus: () => triggerRef.current.focus(),\n disabled: isDisabled\n },\n selectProps: {\n tabIndex: -1,\n autoComplete,\n disabled: isDisabled,\n name,\n size: state.collection.size,\n value: state.selectedKey ?? '',\n onChange: (e: React.ChangeEvent<HTMLSelectElement>) => state.setSelectedKey(e.target.value)\n }\n };\n}\n\n/**\n * Renders a hidden native `<select>` element, which can be used to support browser\n * form autofill, mobile form navigation, and native form submission.\n */\nexport function HiddenSelect<T>(props: HiddenSelectProps<T>) {\n let {state, triggerRef, label, name, isDisabled} = props;\n let {containerProps, inputProps, selectProps} = useHiddenSelect(props, state, triggerRef);\n\n // If used in a <form>, use a hidden input so the value can be submitted to a server.\n // If the collection isn't too big, use a hidden <select> element for this so that browser\n // autofill will work. Otherwise, use an <input type=\"hidden\">.\n if (state.collection.size <= 300) {\n return (\n <div {...containerProps}>\n <input {...inputProps} />\n <label>\n {label}\n <select {...selectProps}>\n <option />\n {[...state.collection.getKeys()].map(key => {\n let item = state.collection.getItem(key);\n if (item.type === 'item') {\n return (\n <option\n key={item.key}\n value={item.key}>\n {item.textValue}\n </option>\n );\n }\n })}\n </select>\n </label>\n </div>\n );\n } else if (name) {\n return (\n <input\n type=\"hidden\"\n autoComplete={selectProps.autoComplete}\n name={name}\n disabled={isDisabled}\n value={state.selectedKey} />\n );\n }\n\n return null;\n}\n"],"names":[],"version":3,"file":"main.js.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-aria/select/src/index.ts","packages/@react-aria/select/src/useSelect.ts","packages/@react-aria/select/src/HiddenSelect.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n * \n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport * from './useSelect';\nexport * from './HiddenSelect';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaButtonProps} from '@react-types/button';\nimport {AriaListBoxOptions} from '@react-aria/listbox';\nimport {AriaSelectProps} from '@react-types/select';\nimport {chain, filterDOMProps, mergeProps, useId} from '@react-aria/utils';\nimport {FocusEvent, HTMLAttributes, RefObject, useMemo} from 'react';\nimport {KeyboardDelegate} from '@react-types/shared';\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\ninterface AriaSelectOptions<T> extends AriaSelectProps<T> {\n /**\n * An optional keyboard delegate implementation for type to select,\n * to override the default.\n */\n keyboardDelegate?: KeyboardDelegate\n}\n\ninterface SelectAria {\n /** Props for the label element. */\n labelProps: HTMLAttributes<HTMLElement>,\n\n /** Props for the popup trigger element. */\n triggerProps: AriaButtonProps,\n\n /** Props for the element representing the selected value. */\n valueProps: HTMLAttributes<HTMLElement>,\n\n /** Props for the popup. */\n menuProps: AriaListBoxOptions<unknown>,\n\n /** Props for the select's description element, if any. */\n descriptionProps: HTMLAttributes<HTMLElement>,\n\n /** Props for the select's error message element, if any. */\n errorMessageProps: HTMLAttributes<HTMLElement>\n}\n\n/**\n * Provides the behavior and accessibility implementation for a select component.\n * A select displays a collapsible list of options and allows a user to select one of them.\n * @param props - Props for the select.\n * @param state - State for the select, as returned by `useListState`.\n */\nexport function useSelect<T>(props: AriaSelectOptions<T>, state: SelectState<T>, ref: RefObject<HTMLElement>): SelectAria {\n let {\n keyboardDelegate,\n isDisabled\n } = props;\n\n // By default, a KeyboardDelegate is provided which uses the DOM to query layout information (e.g. for page up/page down).\n // When virtualized, the layout object will be passed in as a prop and override this.\n let collator = useCollator({usage: 'search', sensitivity: 'base'});\n let delegate = useMemo(() => keyboardDelegate || new ListKeyboardDelegate(state.collection, state.disabledKeys, null, collator), [keyboardDelegate, state.collection, state.disabledKeys, collator]);\n\n let {menuTriggerProps, menuProps} = useMenuTrigger(\n {\n isDisabled,\n type: 'listbox'\n },\n state,\n ref\n );\n\n let onKeyDown = (e: KeyboardEvent) => {\n switch (e.key) {\n case 'ArrowLeft': {\n // prevent scrolling containers\n e.preventDefault();\n\n let key = state.selectedKey != null ? delegate.getKeyAbove(state.selectedKey) : delegate.getFirstKey();\n if (key) {\n state.setSelectedKey(key);\n }\n break;\n }\n case 'ArrowRight': {\n // prevent scrolling containers\n e.preventDefault();\n\n let key = state.selectedKey != null ? delegate.getKeyBelow(state.selectedKey) : delegate.getFirstKey();\n if (key) {\n state.setSelectedKey(key);\n }\n break;\n }\n }\n };\n\n let {typeSelectProps} = useTypeSelect({\n keyboardDelegate: delegate,\n selectionManager: state.selectionManager,\n onTypeSelect(key) {\n state.setSelectedKey(key);\n }\n });\n\n let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({\n ...props,\n labelElementType: 'span'\n });\n\n typeSelectProps.onKeyDown = typeSelectProps.onKeyDownCapture;\n delete typeSelectProps.onKeyDownCapture;\n\n let domProps = filterDOMProps(props, {labelable: true});\n let triggerProps = mergeProps(typeSelectProps, menuTriggerProps, fieldProps);\n\n let valueId = useId();\n\n return {\n labelProps: {\n ...labelProps,\n onClick: () => {\n if (!props.isDisabled) {\n ref.current.focus();\n\n // Show the focus ring so the user knows where focus went\n setInteractionModality('keyboard');\n }\n }\n },\n triggerProps: mergeProps(domProps, {\n ...triggerProps,\n onKeyDown: chain(triggerProps.onKeyDown, onKeyDown, props.onKeyDown),\n onKeyUp: props.onKeyUp,\n 'aria-labelledby': [\n triggerProps['aria-labelledby'],\n triggerProps['aria-label'] && !triggerProps['aria-labelledby'] ? triggerProps.id : null,\n valueId\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 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 state.setFocused(false);\n }\n }),\n valueProps: {\n id: valueId\n },\n menuProps: {\n ...menuProps,\n autoFocus: state.focusStrategy || true,\n shouldSelectOnPressUp: true,\n shouldFocusOnHover: true,\n disallowEmptySelection: true,\n onBlur: (e) => {\n if (e.currentTarget.contains(e.relatedTarget as Node)) {\n return;\n }\n\n if (props.onBlur) {\n props.onBlur(e);\n }\n state.setFocused(false);\n },\n 'aria-labelledby': [\n fieldProps['aria-labelledby'],\n triggerProps['aria-label'] && !fieldProps['aria-labelledby'] ? triggerProps.id : null\n ].filter(Boolean).join(' ')\n },\n descriptionProps,\n errorMessageProps\n };\n}\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport React, {ReactNode, RefObject} from 'react';\nimport {SelectState} from '@react-stately/select';\nimport {useInteractionModality} from '@react-aria/interactions';\nimport {useVisuallyHidden} from '@react-aria/visually-hidden';\n\ninterface 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\ninterface HiddenSelectProps<T> extends AriaHiddenSelectProps {\n /** State for the select. */\n state: SelectState<T>,\n\n /** A ref to the trigger element. */\n triggerRef: RefObject<HTMLElement>\n}\n\n/**\n * Provides the behavior and accessibility implementation for a hidden `<select>` element, which\n * can be used in combination with `useSelect` to support browser form autofill, mobile form\n * navigation, and native HTML form submission.\n */\nexport function useHiddenSelect<T>(props: AriaHiddenSelectProps, state: SelectState<T>, triggerRef: RefObject<HTMLElement>) {\n let {autoComplete, name, isDisabled} = props;\n let modality = useInteractionModality();\n let {visuallyHiddenProps} = useVisuallyHidden();\n\n // In Safari, the <select> cannot have `display: none` or `hidden` for autofill to work.\n // In Firefox, there must be a <label> to identify the <select> whereas other browsers\n // seem to identify it just by surrounding text.\n // The solution is to use <VisuallyHidden> to hide the elements, which clips the elements to a\n // 1px rectangle. In addition, we hide from screen readers with aria-hidden, and make the <select>\n // non tabbable with tabIndex={-1}.\n //\n // In mobile browsers, there are next/previous buttons above the software keyboard for navigating\n // between fields in a form. These only support native form inputs that are tabbable. In order to\n // support those, an additional hidden input is used to marshall focus to the button. It is tabbable\n // except when the button is focused, so that shift tab works properly to go to the actual previous\n // input in the form. Using the <select> for this also works, but Safari on iOS briefly flashes\n // the native menu on focus, so this isn't ideal. A font-size of 16px or greater is required to\n // prevent Safari from zooming in on the input when it is focused.\n //\n // If the current interaction modality is null, then the user hasn't interacted with the page yet.\n // In this case, we set the tabIndex to -1 on the input element so that automated accessibility\n // checkers don't throw false-positives about focusable elements inside an aria-hidden parent.\n return {\n containerProps: {\n ...visuallyHiddenProps,\n 'aria-hidden': true\n },\n inputProps: {\n type: 'text',\n tabIndex: modality == null || state.isFocused || state.isOpen ? -1 : 0,\n style: {fontSize: 16},\n onFocus: () => triggerRef.current.focus(),\n disabled: isDisabled\n },\n selectProps: {\n tabIndex: -1,\n autoComplete,\n disabled: isDisabled,\n name,\n size: state.collection.size,\n value: state.selectedKey ?? '',\n onChange: (e: React.ChangeEvent<HTMLSelectElement>) => state.setSelectedKey(e.target.value)\n }\n };\n}\n\n/**\n * Renders a hidden native `<select>` element, which can be used to support browser\n * form autofill, mobile form navigation, and native form submission.\n */\nexport function HiddenSelect<T>(props: HiddenSelectProps<T>) {\n let {state, triggerRef, label, name, isDisabled} = props;\n let {containerProps, inputProps, selectProps} = useHiddenSelect(props, state, triggerRef);\n\n // If used in a <form>, use a hidden input so the value can be submitted to a server.\n // If the collection isn't too big, use a hidden <select> element for this so that browser\n // autofill will work. Otherwise, use an <input type=\"hidden\">.\n if (state.collection.size <= 300) {\n return (\n <div {...containerProps}>\n <input {...inputProps} />\n <label>\n {label}\n <select {...selectProps}>\n <option />\n {[...state.collection.getKeys()].map(key => {\n let item = state.collection.getItem(key);\n if (item.type === 'item') {\n return (\n <option\n key={item.key}\n value={item.key}>\n {item.textValue}\n </option>\n );\n }\n })}\n </select>\n </label>\n </div>\n );\n } else if (name) {\n return (\n <input\n type=\"hidden\"\n autoComplete={selectProps.autoComplete}\n name={name}\n disabled={isDisabled}\n value={state.selectedKey} />\n );\n }\n\n return null;\n}\n"],"names":[],"version":3,"file":"main.js.map"}
|
package/dist/module.js
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
import {filterDOMProps as $
|
|
2
|
-
import $
|
|
3
|
-
import {ListKeyboardDelegate as $
|
|
4
|
-
import {setInteractionModality as $
|
|
5
|
-
import {useCollator as $
|
|
6
|
-
import {useField as $
|
|
7
|
-
import {useMenuTrigger as $
|
|
8
|
-
import {useVisuallyHidden as $
|
|
1
|
+
import {filterDOMProps as $4MQbd$filterDOMProps, mergeProps as $4MQbd$mergeProps, useId as $4MQbd$useId, chain as $4MQbd$chain} from "@react-aria/utils";
|
|
2
|
+
import $4MQbd$react, {useMemo as $4MQbd$useMemo} from "react";
|
|
3
|
+
import {ListKeyboardDelegate as $4MQbd$ListKeyboardDelegate, useTypeSelect as $4MQbd$useTypeSelect} from "@react-aria/selection";
|
|
4
|
+
import {setInteractionModality as $4MQbd$setInteractionModality, useInteractionModality as $4MQbd$useInteractionModality} from "@react-aria/interactions";
|
|
5
|
+
import {useCollator as $4MQbd$useCollator} from "@react-aria/i18n";
|
|
6
|
+
import {useField as $4MQbd$useField} from "@react-aria/label";
|
|
7
|
+
import {useMenuTrigger as $4MQbd$useMenuTrigger} from "@react-aria/menu";
|
|
8
|
+
import {useVisuallyHidden as $4MQbd$useVisuallyHidden} from "@react-aria/visually-hidden";
|
|
9
9
|
|
|
10
10
|
function $parcel$export(e, n, v, s) {
|
|
11
11
|
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
|
12
12
|
}
|
|
13
|
-
var $
|
|
13
|
+
var $de64f201c7565162$exports = {};
|
|
14
14
|
|
|
15
|
-
$parcel$export($
|
|
15
|
+
$parcel$export($de64f201c7565162$exports, "useSelect", () => $de64f201c7565162$export$e64b2f635402ca43);
|
|
16
16
|
|
|
17
17
|
|
|
18
18
|
|
|
@@ -20,22 +20,22 @@ $parcel$export($46ee88b7f596aa32$exports, "useSelect", () => $46ee88b7f596aa32$e
|
|
|
20
20
|
|
|
21
21
|
|
|
22
22
|
|
|
23
|
-
function $
|
|
23
|
+
function $de64f201c7565162$export$e64b2f635402ca43(props, state, ref) {
|
|
24
24
|
let { keyboardDelegate: keyboardDelegate , isDisabled: isDisabled } = props;
|
|
25
25
|
// By default, a KeyboardDelegate is provided which uses the DOM to query layout information (e.g. for page up/page down).
|
|
26
26
|
// When virtualized, the layout object will be passed in as a prop and override this.
|
|
27
|
-
let collator = $
|
|
27
|
+
let collator = $4MQbd$useCollator({
|
|
28
28
|
usage: 'search',
|
|
29
29
|
sensitivity: 'base'
|
|
30
30
|
});
|
|
31
|
-
let delegate = $
|
|
31
|
+
let delegate = $4MQbd$useMemo(()=>keyboardDelegate || new $4MQbd$ListKeyboardDelegate(state.collection, state.disabledKeys, null, collator)
|
|
32
32
|
, [
|
|
33
33
|
keyboardDelegate,
|
|
34
34
|
state.collection,
|
|
35
35
|
state.disabledKeys,
|
|
36
36
|
collator
|
|
37
37
|
]);
|
|
38
|
-
let { menuTriggerProps: menuTriggerProps , menuProps: menuProps } = $
|
|
38
|
+
let { menuTriggerProps: menuTriggerProps , menuProps: menuProps } = $4MQbd$useMenuTrigger({
|
|
39
39
|
isDisabled: isDisabled,
|
|
40
40
|
type: 'listbox'
|
|
41
41
|
}, state, ref);
|
|
@@ -59,25 +59,24 @@ function $46ee88b7f596aa32$export$e64b2f635402ca43(props, state, ref) {
|
|
|
59
59
|
}
|
|
60
60
|
}
|
|
61
61
|
};
|
|
62
|
-
let { typeSelectProps: typeSelectProps } = $
|
|
62
|
+
let { typeSelectProps: typeSelectProps } = $4MQbd$useTypeSelect({
|
|
63
63
|
keyboardDelegate: delegate,
|
|
64
64
|
selectionManager: state.selectionManager,
|
|
65
65
|
onTypeSelect (key) {
|
|
66
66
|
state.setSelectedKey(key);
|
|
67
67
|
}
|
|
68
68
|
});
|
|
69
|
-
let { labelProps: labelProps , fieldProps: fieldProps , descriptionProps: descriptionProps , errorMessageProps: errorMessageProps } = $
|
|
69
|
+
let { labelProps: labelProps , fieldProps: fieldProps , descriptionProps: descriptionProps , errorMessageProps: errorMessageProps } = $4MQbd$useField({
|
|
70
70
|
...props,
|
|
71
71
|
labelElementType: 'span'
|
|
72
72
|
});
|
|
73
73
|
typeSelectProps.onKeyDown = typeSelectProps.onKeyDownCapture;
|
|
74
74
|
delete typeSelectProps.onKeyDownCapture;
|
|
75
|
-
let domProps = $
|
|
75
|
+
let domProps = $4MQbd$filterDOMProps(props, {
|
|
76
76
|
labelable: true
|
|
77
77
|
});
|
|
78
|
-
let triggerProps = $
|
|
79
|
-
|
|
80
|
-
let valueId = `${triggerProps.id}-value`;
|
|
78
|
+
let triggerProps = $4MQbd$mergeProps(typeSelectProps, menuTriggerProps, fieldProps);
|
|
79
|
+
let valueId = $4MQbd$useId();
|
|
81
80
|
return {
|
|
82
81
|
labelProps: {
|
|
83
82
|
...labelProps,
|
|
@@ -85,13 +84,13 @@ function $46ee88b7f596aa32$export$e64b2f635402ca43(props, state, ref) {
|
|
|
85
84
|
if (!props.isDisabled) {
|
|
86
85
|
ref.current.focus();
|
|
87
86
|
// Show the focus ring so the user knows where focus went
|
|
88
|
-
$
|
|
87
|
+
$4MQbd$setInteractionModality('keyboard');
|
|
89
88
|
}
|
|
90
89
|
}
|
|
91
90
|
},
|
|
92
|
-
triggerProps: $
|
|
91
|
+
triggerProps: $4MQbd$mergeProps(domProps, {
|
|
93
92
|
...triggerProps,
|
|
94
|
-
onKeyDown: $
|
|
93
|
+
onKeyDown: $4MQbd$chain(triggerProps.onKeyDown, onKeyDown, props.onKeyDown),
|
|
95
94
|
onKeyUp: props.onKeyUp,
|
|
96
95
|
'aria-labelledby': [
|
|
97
96
|
triggerProps['aria-labelledby'],
|
|
@@ -134,17 +133,17 @@ function $46ee88b7f596aa32$export$e64b2f635402ca43(props, state, ref) {
|
|
|
134
133
|
}
|
|
135
134
|
|
|
136
135
|
|
|
137
|
-
var $
|
|
136
|
+
var $6154129a2f2e20c7$exports = {};
|
|
138
137
|
|
|
139
|
-
$parcel$export($
|
|
140
|
-
$parcel$export($
|
|
138
|
+
$parcel$export($6154129a2f2e20c7$exports, "useHiddenSelect", () => $6154129a2f2e20c7$export$f809e80f58e251d1);
|
|
139
|
+
$parcel$export($6154129a2f2e20c7$exports, "HiddenSelect", () => $6154129a2f2e20c7$export$cbd84cdb2e668835);
|
|
141
140
|
|
|
142
141
|
|
|
143
142
|
|
|
144
|
-
function $
|
|
143
|
+
function $6154129a2f2e20c7$export$f809e80f58e251d1(props, state, triggerRef) {
|
|
145
144
|
let { autoComplete: autoComplete , name: name , isDisabled: isDisabled } = props;
|
|
146
|
-
let modality = $
|
|
147
|
-
let { visuallyHiddenProps: visuallyHiddenProps } = $
|
|
145
|
+
let modality = $4MQbd$useInteractionModality();
|
|
146
|
+
let { visuallyHiddenProps: visuallyHiddenProps } = $4MQbd$useVisuallyHidden();
|
|
148
147
|
// In Safari, the <select> cannot have `display: none` or `hidden` for autofill to work.
|
|
149
148
|
// In Firefox, there must be a <label> to identify the <select> whereas other browsers
|
|
150
149
|
// seem to identify it just by surrounding text.
|
|
@@ -189,22 +188,22 @@ function $1b91d95bb091de28$export$f809e80f58e251d1(props, state, triggerRef) {
|
|
|
189
188
|
}
|
|
190
189
|
};
|
|
191
190
|
}
|
|
192
|
-
function $
|
|
191
|
+
function $6154129a2f2e20c7$export$cbd84cdb2e668835(props) {
|
|
193
192
|
let { state: state , triggerRef: triggerRef , label: label , name: name , isDisabled: isDisabled } = props;
|
|
194
|
-
let { containerProps: containerProps , inputProps: inputProps , selectProps: selectProps } = $
|
|
193
|
+
let { containerProps: containerProps , inputProps: inputProps , selectProps: selectProps } = $6154129a2f2e20c7$export$f809e80f58e251d1(props, state, triggerRef);
|
|
195
194
|
// If used in a <form>, use a hidden input so the value can be submitted to a server.
|
|
196
195
|
// If the collection isn't too big, use a hidden <select> element for this so that browser
|
|
197
196
|
// autofill will work. Otherwise, use an <input type="hidden">.
|
|
198
|
-
if (state.collection.size <= 300) return(/*#__PURE__*/ $
|
|
197
|
+
if (state.collection.size <= 300) return(/*#__PURE__*/ $4MQbd$react.createElement("div", containerProps, /*#__PURE__*/ $4MQbd$react.createElement("input", inputProps), /*#__PURE__*/ $4MQbd$react.createElement("label", null, label, /*#__PURE__*/ $4MQbd$react.createElement("select", selectProps, /*#__PURE__*/ $4MQbd$react.createElement("option", null), [
|
|
199
198
|
...state.collection.getKeys()
|
|
200
199
|
].map((key)=>{
|
|
201
200
|
let item = state.collection.getItem(key);
|
|
202
|
-
if (item.type === 'item') return(/*#__PURE__*/ $
|
|
201
|
+
if (item.type === 'item') return(/*#__PURE__*/ $4MQbd$react.createElement("option", {
|
|
203
202
|
key: item.key,
|
|
204
203
|
value: item.key
|
|
205
204
|
}, item.textValue));
|
|
206
205
|
})))));
|
|
207
|
-
else if (name) return(/*#__PURE__*/ $
|
|
206
|
+
else if (name) return(/*#__PURE__*/ $4MQbd$react.createElement("input", {
|
|
208
207
|
type: "hidden",
|
|
209
208
|
autoComplete: selectProps.autoComplete,
|
|
210
209
|
name: name,
|
|
@@ -217,5 +216,5 @@ function $1b91d95bb091de28$export$cbd84cdb2e668835(props) {
|
|
|
217
216
|
|
|
218
217
|
|
|
219
218
|
|
|
220
|
-
export {$
|
|
219
|
+
export {$de64f201c7565162$export$e64b2f635402ca43 as useSelect, $6154129a2f2e20c7$export$f809e80f58e251d1 as useHiddenSelect, $6154129a2f2e20c7$export$cbd84cdb2e668835 as HiddenSelect};
|
|
221
220
|
//# sourceMappingURL=module.js.map
|
package/dist/module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-aria/select/src/index.ts","packages/@react-aria/select/src/useSelect.ts","packages/@react-aria/select/src/HiddenSelect.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n * \n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport * from './useSelect';\nexport * from './HiddenSelect';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaButtonProps} from '@react-types/button';\nimport {AriaListBoxOptions} from '@react-aria/listbox';\nimport {AriaSelectProps} from '@react-types/select';\nimport {chain, filterDOMProps, mergeProps} from '@react-aria/utils';\nimport {FocusEvent, HTMLAttributes, RefObject, useMemo} from 'react';\nimport {KeyboardDelegate} from '@react-types/shared';\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\ninterface AriaSelectOptions<T> extends AriaSelectProps<T> {\n /**\n * An optional keyboard delegate implementation for type to select,\n * to override the default.\n */\n keyboardDelegate?: KeyboardDelegate\n}\n\ninterface SelectAria {\n /** Props for the label element. */\n labelProps: HTMLAttributes<HTMLElement>,\n\n /** Props for the popup trigger element. */\n triggerProps: AriaButtonProps,\n\n /** Props for the element representing the selected value. */\n valueProps: HTMLAttributes<HTMLElement>,\n\n /** Props for the popup. */\n menuProps: AriaListBoxOptions<unknown>,\n\n /** Props for the select's description element, if any. */\n descriptionProps: HTMLAttributes<HTMLElement>,\n\n /** Props for the select's error message element, if any. */\n errorMessageProps: HTMLAttributes<HTMLElement>\n}\n\n/**\n * Provides the behavior and accessibility implementation for a select component.\n * A select displays a collapsible list of options and allows a user to select one of them.\n * @param props - Props for the select.\n * @param state - State for the select, as returned by `useListState`.\n */\nexport function useSelect<T>(props: AriaSelectOptions<T>, state: SelectState<T>, ref: RefObject<HTMLElement>): SelectAria {\n let {\n keyboardDelegate,\n isDisabled\n } = props;\n\n // By default, a KeyboardDelegate is provided which uses the DOM to query layout information (e.g. for page up/page down).\n // When virtualized, the layout object will be passed in as a prop and override this.\n let collator = useCollator({usage: 'search', sensitivity: 'base'});\n let delegate = useMemo(() => keyboardDelegate || new ListKeyboardDelegate(state.collection, state.disabledKeys, null, collator), [keyboardDelegate, state.collection, state.disabledKeys, collator]);\n\n let {menuTriggerProps, menuProps} = useMenuTrigger(\n {\n isDisabled,\n type: 'listbox'\n },\n state,\n ref\n );\n\n let onKeyDown = (e: KeyboardEvent) => {\n switch (e.key) {\n case 'ArrowLeft': {\n // prevent scrolling containers\n e.preventDefault();\n\n let key = state.selectedKey != null ? delegate.getKeyAbove(state.selectedKey) : delegate.getFirstKey();\n if (key) {\n state.setSelectedKey(key);\n }\n break;\n }\n case 'ArrowRight': {\n // prevent scrolling containers\n e.preventDefault();\n\n let key = state.selectedKey != null ? delegate.getKeyBelow(state.selectedKey) : delegate.getFirstKey();\n if (key) {\n state.setSelectedKey(key);\n }\n break;\n }\n }\n };\n\n let {typeSelectProps} = useTypeSelect({\n keyboardDelegate: delegate,\n selectionManager: state.selectionManager,\n onTypeSelect(key) {\n state.setSelectedKey(key);\n }\n });\n\n let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({\n ...props,\n labelElementType: 'span'\n });\n\n typeSelectProps.onKeyDown = typeSelectProps.onKeyDownCapture;\n delete typeSelectProps.onKeyDownCapture;\n\n let domProps = filterDOMProps(props, {labelable: true});\n let triggerProps = mergeProps(typeSelectProps, menuTriggerProps, fieldProps);\n\n // used to make predictable id's based on the trigger which is already generated, this aids us in testing\n let valueId = `${triggerProps.id}-value`;\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 onKeyDown: chain(triggerProps.onKeyDown, onKeyDown, props.onKeyDown),\n onKeyUp: props.onKeyUp,\n 'aria-labelledby': [\n triggerProps['aria-labelledby'],\n triggerProps['aria-label'] && !triggerProps['aria-labelledby'] ? triggerProps.id : null,\n valueId\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 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 state.setFocused(false);\n }\n }),\n valueProps: {\n id: valueId\n },\n menuProps: {\n ...menuProps,\n autoFocus: state.focusStrategy || true,\n shouldSelectOnPressUp: true,\n shouldFocusOnHover: true,\n disallowEmptySelection: true,\n onBlur: (e) => {\n if (e.currentTarget.contains(e.relatedTarget as Node)) {\n return;\n }\n\n if (props.onBlur) {\n props.onBlur(e);\n }\n state.setFocused(false);\n },\n 'aria-labelledby': [\n fieldProps['aria-labelledby'],\n triggerProps['aria-label'] && !fieldProps['aria-labelledby'] ? triggerProps.id : null\n ].filter(Boolean).join(' ')\n },\n descriptionProps,\n errorMessageProps\n };\n}\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport React, {ReactNode, RefObject} from 'react';\nimport {SelectState} from '@react-stately/select';\nimport {useInteractionModality} from '@react-aria/interactions';\nimport {useVisuallyHidden} from '@react-aria/visually-hidden';\n\ninterface 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\ninterface HiddenSelectProps<T> extends AriaHiddenSelectProps {\n /** State for the select. */\n state: SelectState<T>,\n\n /** A ref to the trigger element. */\n triggerRef: RefObject<HTMLElement>\n}\n\n/**\n * Provides the behavior and accessibility implementation for a hidden `<select>` element, which\n * can be used in combination with `useSelect` to support browser form autofill, mobile form\n * navigation, and native HTML form submission.\n */\nexport function useHiddenSelect<T>(props: AriaHiddenSelectProps, state: SelectState<T>, triggerRef: RefObject<HTMLElement>) {\n let {autoComplete, name, isDisabled} = props;\n let modality = useInteractionModality();\n let {visuallyHiddenProps} = useVisuallyHidden();\n\n // In Safari, the <select> cannot have `display: none` or `hidden` for autofill to work.\n // In Firefox, there must be a <label> to identify the <select> whereas other browsers\n // seem to identify it just by surrounding text.\n // The solution is to use <VisuallyHidden> to hide the elements, which clips the elements to a\n // 1px rectangle. In addition, we hide from screen readers with aria-hidden, and make the <select>\n // non tabbable with tabIndex={-1}.\n //\n // In mobile browsers, there are next/previous buttons above the software keyboard for navigating\n // between fields in a form. These only support native form inputs that are tabbable. In order to\n // support those, an additional hidden input is used to marshall focus to the button. It is tabbable\n // except when the button is focused, so that shift tab works properly to go to the actual previous\n // input in the form. Using the <select> for this also works, but Safari on iOS briefly flashes\n // the native menu on focus, so this isn't ideal. A font-size of 16px or greater is required to\n // prevent Safari from zooming in on the input when it is focused.\n //\n // If the current interaction modality is null, then the user hasn't interacted with the page yet.\n // In this case, we set the tabIndex to -1 on the input element so that automated accessibility\n // checkers don't throw false-positives about focusable elements inside an aria-hidden parent.\n return {\n containerProps: {\n ...visuallyHiddenProps,\n 'aria-hidden': true\n },\n inputProps: {\n type: 'text',\n tabIndex: modality == null || state.isFocused || state.isOpen ? -1 : 0,\n style: {fontSize: 16},\n onFocus: () => triggerRef.current.focus(),\n disabled: isDisabled\n },\n selectProps: {\n tabIndex: -1,\n autoComplete,\n disabled: isDisabled,\n name,\n size: state.collection.size,\n value: state.selectedKey ?? '',\n onChange: (e: React.ChangeEvent<HTMLSelectElement>) => state.setSelectedKey(e.target.value)\n }\n };\n}\n\n/**\n * Renders a hidden native `<select>` element, which can be used to support browser\n * form autofill, mobile form navigation, and native form submission.\n */\nexport function HiddenSelect<T>(props: HiddenSelectProps<T>) {\n let {state, triggerRef, label, name, isDisabled} = props;\n let {containerProps, inputProps, selectProps} = useHiddenSelect(props, state, triggerRef);\n\n // If used in a <form>, use a hidden input so the value can be submitted to a server.\n // If the collection isn't too big, use a hidden <select> element for this so that browser\n // autofill will work. Otherwise, use an <input type=\"hidden\">.\n if (state.collection.size <= 300) {\n return (\n <div {...containerProps}>\n <input {...inputProps} />\n <label>\n {label}\n <select {...selectProps}>\n <option />\n {[...state.collection.getKeys()].map(key => {\n let item = state.collection.getItem(key);\n if (item.type === 'item') {\n return (\n <option\n key={item.key}\n value={item.key}>\n {item.textValue}\n </option>\n );\n }\n })}\n </select>\n </label>\n </div>\n );\n } else if (name) {\n return (\n <input\n type=\"hidden\"\n autoComplete={selectProps.autoComplete}\n name={name}\n disabled={isDisabled}\n value={state.selectedKey} />\n );\n }\n\n return null;\n}\n"],"names":[],"version":3,"file":"module.js.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-aria/select/src/index.ts","packages/@react-aria/select/src/useSelect.ts","packages/@react-aria/select/src/HiddenSelect.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n * \n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport * from './useSelect';\nexport * from './HiddenSelect';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaButtonProps} from '@react-types/button';\nimport {AriaListBoxOptions} from '@react-aria/listbox';\nimport {AriaSelectProps} from '@react-types/select';\nimport {chain, filterDOMProps, mergeProps, useId} from '@react-aria/utils';\nimport {FocusEvent, HTMLAttributes, RefObject, useMemo} from 'react';\nimport {KeyboardDelegate} from '@react-types/shared';\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\ninterface AriaSelectOptions<T> extends AriaSelectProps<T> {\n /**\n * An optional keyboard delegate implementation for type to select,\n * to override the default.\n */\n keyboardDelegate?: KeyboardDelegate\n}\n\ninterface SelectAria {\n /** Props for the label element. */\n labelProps: HTMLAttributes<HTMLElement>,\n\n /** Props for the popup trigger element. */\n triggerProps: AriaButtonProps,\n\n /** Props for the element representing the selected value. */\n valueProps: HTMLAttributes<HTMLElement>,\n\n /** Props for the popup. */\n menuProps: AriaListBoxOptions<unknown>,\n\n /** Props for the select's description element, if any. */\n descriptionProps: HTMLAttributes<HTMLElement>,\n\n /** Props for the select's error message element, if any. */\n errorMessageProps: HTMLAttributes<HTMLElement>\n}\n\n/**\n * Provides the behavior and accessibility implementation for a select component.\n * A select displays a collapsible list of options and allows a user to select one of them.\n * @param props - Props for the select.\n * @param state - State for the select, as returned by `useListState`.\n */\nexport function useSelect<T>(props: AriaSelectOptions<T>, state: SelectState<T>, ref: RefObject<HTMLElement>): SelectAria {\n let {\n keyboardDelegate,\n isDisabled\n } = props;\n\n // By default, a KeyboardDelegate is provided which uses the DOM to query layout information (e.g. for page up/page down).\n // When virtualized, the layout object will be passed in as a prop and override this.\n let collator = useCollator({usage: 'search', sensitivity: 'base'});\n let delegate = useMemo(() => keyboardDelegate || new ListKeyboardDelegate(state.collection, state.disabledKeys, null, collator), [keyboardDelegate, state.collection, state.disabledKeys, collator]);\n\n let {menuTriggerProps, menuProps} = useMenuTrigger(\n {\n isDisabled,\n type: 'listbox'\n },\n state,\n ref\n );\n\n let onKeyDown = (e: KeyboardEvent) => {\n switch (e.key) {\n case 'ArrowLeft': {\n // prevent scrolling containers\n e.preventDefault();\n\n let key = state.selectedKey != null ? delegate.getKeyAbove(state.selectedKey) : delegate.getFirstKey();\n if (key) {\n state.setSelectedKey(key);\n }\n break;\n }\n case 'ArrowRight': {\n // prevent scrolling containers\n e.preventDefault();\n\n let key = state.selectedKey != null ? delegate.getKeyBelow(state.selectedKey) : delegate.getFirstKey();\n if (key) {\n state.setSelectedKey(key);\n }\n break;\n }\n }\n };\n\n let {typeSelectProps} = useTypeSelect({\n keyboardDelegate: delegate,\n selectionManager: state.selectionManager,\n onTypeSelect(key) {\n state.setSelectedKey(key);\n }\n });\n\n let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({\n ...props,\n labelElementType: 'span'\n });\n\n typeSelectProps.onKeyDown = typeSelectProps.onKeyDownCapture;\n delete typeSelectProps.onKeyDownCapture;\n\n let domProps = filterDOMProps(props, {labelable: true});\n let triggerProps = mergeProps(typeSelectProps, menuTriggerProps, fieldProps);\n\n let valueId = useId();\n\n return {\n labelProps: {\n ...labelProps,\n onClick: () => {\n if (!props.isDisabled) {\n ref.current.focus();\n\n // Show the focus ring so the user knows where focus went\n setInteractionModality('keyboard');\n }\n }\n },\n triggerProps: mergeProps(domProps, {\n ...triggerProps,\n onKeyDown: chain(triggerProps.onKeyDown, onKeyDown, props.onKeyDown),\n onKeyUp: props.onKeyUp,\n 'aria-labelledby': [\n triggerProps['aria-labelledby'],\n triggerProps['aria-label'] && !triggerProps['aria-labelledby'] ? triggerProps.id : null,\n valueId\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 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 state.setFocused(false);\n }\n }),\n valueProps: {\n id: valueId\n },\n menuProps: {\n ...menuProps,\n autoFocus: state.focusStrategy || true,\n shouldSelectOnPressUp: true,\n shouldFocusOnHover: true,\n disallowEmptySelection: true,\n onBlur: (e) => {\n if (e.currentTarget.contains(e.relatedTarget as Node)) {\n return;\n }\n\n if (props.onBlur) {\n props.onBlur(e);\n }\n state.setFocused(false);\n },\n 'aria-labelledby': [\n fieldProps['aria-labelledby'],\n triggerProps['aria-label'] && !fieldProps['aria-labelledby'] ? triggerProps.id : null\n ].filter(Boolean).join(' ')\n },\n descriptionProps,\n errorMessageProps\n };\n}\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport React, {ReactNode, RefObject} from 'react';\nimport {SelectState} from '@react-stately/select';\nimport {useInteractionModality} from '@react-aria/interactions';\nimport {useVisuallyHidden} from '@react-aria/visually-hidden';\n\ninterface 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\ninterface HiddenSelectProps<T> extends AriaHiddenSelectProps {\n /** State for the select. */\n state: SelectState<T>,\n\n /** A ref to the trigger element. */\n triggerRef: RefObject<HTMLElement>\n}\n\n/**\n * Provides the behavior and accessibility implementation for a hidden `<select>` element, which\n * can be used in combination with `useSelect` to support browser form autofill, mobile form\n * navigation, and native HTML form submission.\n */\nexport function useHiddenSelect<T>(props: AriaHiddenSelectProps, state: SelectState<T>, triggerRef: RefObject<HTMLElement>) {\n let {autoComplete, name, isDisabled} = props;\n let modality = useInteractionModality();\n let {visuallyHiddenProps} = useVisuallyHidden();\n\n // In Safari, the <select> cannot have `display: none` or `hidden` for autofill to work.\n // In Firefox, there must be a <label> to identify the <select> whereas other browsers\n // seem to identify it just by surrounding text.\n // The solution is to use <VisuallyHidden> to hide the elements, which clips the elements to a\n // 1px rectangle. In addition, we hide from screen readers with aria-hidden, and make the <select>\n // non tabbable with tabIndex={-1}.\n //\n // In mobile browsers, there are next/previous buttons above the software keyboard for navigating\n // between fields in a form. These only support native form inputs that are tabbable. In order to\n // support those, an additional hidden input is used to marshall focus to the button. It is tabbable\n // except when the button is focused, so that shift tab works properly to go to the actual previous\n // input in the form. Using the <select> for this also works, but Safari on iOS briefly flashes\n // the native menu on focus, so this isn't ideal. A font-size of 16px or greater is required to\n // prevent Safari from zooming in on the input when it is focused.\n //\n // If the current interaction modality is null, then the user hasn't interacted with the page yet.\n // In this case, we set the tabIndex to -1 on the input element so that automated accessibility\n // checkers don't throw false-positives about focusable elements inside an aria-hidden parent.\n return {\n containerProps: {\n ...visuallyHiddenProps,\n 'aria-hidden': true\n },\n inputProps: {\n type: 'text',\n tabIndex: modality == null || state.isFocused || state.isOpen ? -1 : 0,\n style: {fontSize: 16},\n onFocus: () => triggerRef.current.focus(),\n disabled: isDisabled\n },\n selectProps: {\n tabIndex: -1,\n autoComplete,\n disabled: isDisabled,\n name,\n size: state.collection.size,\n value: state.selectedKey ?? '',\n onChange: (e: React.ChangeEvent<HTMLSelectElement>) => state.setSelectedKey(e.target.value)\n }\n };\n}\n\n/**\n * Renders a hidden native `<select>` element, which can be used to support browser\n * form autofill, mobile form navigation, and native form submission.\n */\nexport function HiddenSelect<T>(props: HiddenSelectProps<T>) {\n let {state, triggerRef, label, name, isDisabled} = props;\n let {containerProps, inputProps, selectProps} = useHiddenSelect(props, state, triggerRef);\n\n // If used in a <form>, use a hidden input so the value can be submitted to a server.\n // If the collection isn't too big, use a hidden <select> element for this so that browser\n // autofill will work. Otherwise, use an <input type=\"hidden\">.\n if (state.collection.size <= 300) {\n return (\n <div {...containerProps}>\n <input {...inputProps} />\n <label>\n {label}\n <select {...selectProps}>\n <option />\n {[...state.collection.getKeys()].map(key => {\n let item = state.collection.getItem(key);\n if (item.type === 'item') {\n return (\n <option\n key={item.key}\n value={item.key}>\n {item.textValue}\n </option>\n );\n }\n })}\n </select>\n </label>\n </div>\n );\n } else if (name) {\n return (\n <input\n type=\"hidden\"\n autoComplete={selectProps.autoComplete}\n name={name}\n disabled={isDisabled}\n value={state.selectedKey} />\n );\n }\n\n return null;\n}\n"],"names":[],"version":3,"file":"module.js.map"}
|
package/dist/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;AAyBA,4BAA4B,CAAC,CAAE,SAAQ,gBAAgB,CAAC,CAAC;IACvD;;;OAGG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAA;CACpC;AAED;IACE,mCAAmC;IACnC,UAAU,EAAE,eAAe,WAAW,CAAC,CAAC;IAExC,2CAA2C;IAC3C,YAAY,EAAE,eAAe,CAAC;IAE9B,6DAA6D;IAC7D,UAAU,EAAE,eAAe,WAAW,CAAC,CAAC;IAExC,2BAA2B;IAC3B,SAAS,EAAE,mBAAmB,OAAO,CAAC,CAAC;IAEvC,0DAA0D;IAC1D,gBAAgB,EAAE,eAAe,WAAW,CAAC,CAAC;IAE9C,4DAA4D;IAC5D,iBAAiB,EAAE,eAAe,WAAW,CAAC,CAAA;CAC/C;AAED;;;;;GAKG;AACH,0BAA0B,CAAC,EAAE,KAAK,EAAE,kBAAkB,CAAC,CAAC,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,EAAE,GAAG,EAAE,UAAU,WAAW,CAAC,GAAG,UAAU,
|
|
1
|
+
{"mappings":";;;;;;AAyBA,4BAA4B,CAAC,CAAE,SAAQ,gBAAgB,CAAC,CAAC;IACvD;;;OAGG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAA;CACpC;AAED;IACE,mCAAmC;IACnC,UAAU,EAAE,eAAe,WAAW,CAAC,CAAC;IAExC,2CAA2C;IAC3C,YAAY,EAAE,eAAe,CAAC;IAE9B,6DAA6D;IAC7D,UAAU,EAAE,eAAe,WAAW,CAAC,CAAC;IAExC,2BAA2B;IAC3B,SAAS,EAAE,mBAAmB,OAAO,CAAC,CAAC;IAEvC,0DAA0D;IAC1D,gBAAgB,EAAE,eAAe,WAAW,CAAC,CAAC;IAE9C,4DAA4D;IAC5D,iBAAiB,EAAE,eAAe,WAAW,CAAC,CAAA;CAC/C;AAED;;;;;GAKG;AACH,0BAA0B,CAAC,EAAE,KAAK,EAAE,kBAAkB,CAAC,CAAC,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,EAAE,GAAG,EAAE,UAAU,WAAW,CAAC,GAAG,UAAU,CAyIxH;ACnLD;IACE;;OAEG;IACF,YAAY,CAAC,EAAE,MAAM,CAAC;IAEvB,qCAAqC;IACrC,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,uDAAuD;IACvD,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,4BAA4B,CAAC,CAAE,SAAQ,qBAAqB;IAC1D,4BAA4B;IAC5B,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC;IAEtB,oCAAoC;IACpC,UAAU,EAAE,UAAU,WAAW,CAAC,CAAA;CACnC;AAED;;;;GAIG;AACH,gCAAgC,CAAC,EAAE,KAAK,EAAE,qBAAqB,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,EAAE,UAAU,EAAE,UAAU,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBA0CtG,MAAM,WAAW,CAAC,iBAAiB,CAAC;;EAGvD;AAED;;;GAGG;AACH,6BAA6B,CAAC,EAAE,KAAK,EAAE,kBAAkB,CAAC,CAAC,eA2C1D","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 */\n\nexport * from './useSelect';\nexport * from './HiddenSelect';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-aria/select",
|
|
3
|
-
"version": "3.6.1-nightly.
|
|
3
|
+
"version": "3.6.1-nightly.3100+da2aa7467",
|
|
4
4
|
"description": "Spectrum UI components in React",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/main.js",
|
|
@@ -18,18 +18,18 @@
|
|
|
18
18
|
},
|
|
19
19
|
"dependencies": {
|
|
20
20
|
"@babel/runtime": "^7.6.2",
|
|
21
|
-
"@react-aria/i18n": "3.0.0-nightly.
|
|
22
|
-
"@react-aria/interactions": "3.0.0-nightly.
|
|
23
|
-
"@react-aria/label": "3.0.0-nightly.
|
|
24
|
-
"@react-aria/listbox": "3.4.1-nightly.
|
|
25
|
-
"@react-aria/menu": "3.3.1-nightly.
|
|
26
|
-
"@react-aria/selection": "3.0.0-nightly.
|
|
27
|
-
"@react-aria/utils": "3.0.0-nightly.
|
|
28
|
-
"@react-aria/visually-hidden": "3.0.0-nightly.
|
|
29
|
-
"@react-stately/select": "3.1.4-nightly.
|
|
30
|
-
"@react-types/button": "3.4.2-nightly.
|
|
31
|
-
"@react-types/select": "3.5.2-nightly.
|
|
32
|
-
"@react-types/shared": "3.0.0-nightly.
|
|
21
|
+
"@react-aria/i18n": "3.0.0-nightly.1409+da2aa7467",
|
|
22
|
+
"@react-aria/interactions": "3.0.0-nightly.1409+da2aa7467",
|
|
23
|
+
"@react-aria/label": "3.0.0-nightly.1409+da2aa7467",
|
|
24
|
+
"@react-aria/listbox": "3.4.1-nightly.3100+da2aa7467",
|
|
25
|
+
"@react-aria/menu": "3.3.1-nightly.3100+da2aa7467",
|
|
26
|
+
"@react-aria/selection": "3.0.0-nightly.1409+da2aa7467",
|
|
27
|
+
"@react-aria/utils": "3.0.0-nightly.1409+da2aa7467",
|
|
28
|
+
"@react-aria/visually-hidden": "3.0.0-nightly.1409+da2aa7467",
|
|
29
|
+
"@react-stately/select": "3.1.4-nightly.3100+da2aa7467",
|
|
30
|
+
"@react-types/button": "3.4.2-nightly.3100+da2aa7467",
|
|
31
|
+
"@react-types/select": "3.5.2-nightly.3100+da2aa7467",
|
|
32
|
+
"@react-types/shared": "3.0.0-nightly.1409+da2aa7467"
|
|
33
33
|
},
|
|
34
34
|
"peerDependencies": {
|
|
35
35
|
"react": "^16.8.0 || ^17.0.0-rc.1",
|
|
@@ -38,5 +38,5 @@
|
|
|
38
38
|
"publishConfig": {
|
|
39
39
|
"access": "public"
|
|
40
40
|
},
|
|
41
|
-
"gitHead": "
|
|
41
|
+
"gitHead": "da2aa74670fbd93335ff01401ca53826b3602777"
|
|
42
42
|
}
|
package/src/useSelect.ts
CHANGED
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
import {AriaButtonProps} from '@react-types/button';
|
|
14
14
|
import {AriaListBoxOptions} from '@react-aria/listbox';
|
|
15
15
|
import {AriaSelectProps} from '@react-types/select';
|
|
16
|
-
import {chain, filterDOMProps, mergeProps} from '@react-aria/utils';
|
|
16
|
+
import {chain, filterDOMProps, mergeProps, useId} from '@react-aria/utils';
|
|
17
17
|
import {FocusEvent, HTMLAttributes, RefObject, useMemo} from 'react';
|
|
18
18
|
import {KeyboardDelegate} from '@react-types/shared';
|
|
19
19
|
import {ListKeyboardDelegate, useTypeSelect} from '@react-aria/selection';
|
|
@@ -121,8 +121,7 @@ export function useSelect<T>(props: AriaSelectOptions<T>, state: SelectState<T>,
|
|
|
121
121
|
let domProps = filterDOMProps(props, {labelable: true});
|
|
122
122
|
let triggerProps = mergeProps(typeSelectProps, menuTriggerProps, fieldProps);
|
|
123
123
|
|
|
124
|
-
|
|
125
|
-
let valueId = `${triggerProps.id}-value`;
|
|
124
|
+
let valueId = useId();
|
|
126
125
|
|
|
127
126
|
return {
|
|
128
127
|
labelProps: {
|