@react-aria/select 3.0.0-alpha.1 → 3.0.0-nightly-641446f65-240905

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/README.md ADDED
@@ -0,0 +1,3 @@
1
+ # @react-aria/select
2
+
3
+ This package is part of [react-spectrum](https://github.com/adobe/react-spectrum). See the repo for more details.
@@ -0,0 +1,131 @@
1
+ var $23a1e93dc7fa8653$exports = require("./useSelect.main.js");
2
+ var $ccxQv$react = require("react");
3
+ var $ccxQv$reactariautils = require("@react-aria/utils");
4
+ var $ccxQv$reactariaform = require("@react-aria/form");
5
+ var $ccxQv$reactariainteractions = require("@react-aria/interactions");
6
+ var $ccxQv$reactariavisuallyhidden = require("@react-aria/visually-hidden");
7
+
8
+
9
+ function $parcel$interopDefault(a) {
10
+ return a && a.__esModule ? a.default : a;
11
+ }
12
+
13
+ function $parcel$export(e, n, v, s) {
14
+ Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
15
+ }
16
+
17
+ $parcel$export(module.exports, "useHiddenSelect", () => $6eae0e0872a4cdd4$export$f809e80f58e251d1);
18
+ $parcel$export(module.exports, "HiddenSelect", () => $6eae0e0872a4cdd4$export$cbd84cdb2e668835);
19
+ /*
20
+ * Copyright 2020 Adobe. All rights reserved.
21
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
22
+ * you may not use this file except in compliance with the License. You may obtain a copy
23
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
24
+ *
25
+ * Unless required by applicable law or agreed to in writing, software distributed under
26
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
27
+ * OF ANY KIND, either express or implied. See the License for the specific language
28
+ * governing permissions and limitations under the License.
29
+ */
30
+
31
+
32
+
33
+
34
+
35
+ function $6eae0e0872a4cdd4$export$f809e80f58e251d1(props, state, triggerRef) {
36
+ let data = (0, $23a1e93dc7fa8653$exports.selectData).get(state) || {};
37
+ let { autoComplete: autoComplete, name: name = data.name, isDisabled: isDisabled = data.isDisabled } = props;
38
+ let { validationBehavior: validationBehavior, isRequired: isRequired } = data;
39
+ let modality = (0, $ccxQv$reactariainteractions.useInteractionModality)();
40
+ let { visuallyHiddenProps: visuallyHiddenProps } = (0, $ccxQv$reactariavisuallyhidden.useVisuallyHidden)();
41
+ (0, $ccxQv$reactariautils.useFormReset)(props.selectRef, state.selectedKey, state.setSelectedKey);
42
+ (0, $ccxQv$reactariaform.useFormValidation)({
43
+ validationBehavior: validationBehavior,
44
+ focus: ()=>triggerRef.current.focus()
45
+ }, state, props.selectRef);
46
+ var _state_selectedKey;
47
+ // In Safari, the <select> cannot have `display: none` or `hidden` for autofill to work.
48
+ // In Firefox, there must be a <label> to identify the <select> whereas other browsers
49
+ // seem to identify it just by surrounding text.
50
+ // The solution is to use <VisuallyHidden> to hide the elements, which clips the elements to a
51
+ // 1px rectangle. In addition, we hide from screen readers with aria-hidden, and make the <select>
52
+ // non tabbable with tabIndex={-1}.
53
+ //
54
+ // In mobile browsers, there are next/previous buttons above the software keyboard for navigating
55
+ // between fields in a form. These only support native form inputs that are tabbable. In order to
56
+ // support those, an additional hidden input is used to marshall focus to the button. It is tabbable
57
+ // except when the button is focused, so that shift tab works properly to go to the actual previous
58
+ // input in the form. Using the <select> for this also works, but Safari on iOS briefly flashes
59
+ // the native menu on focus, so this isn't ideal. A font-size of 16px or greater is required to
60
+ // prevent Safari from zooming in on the input when it is focused.
61
+ //
62
+ // If the current interaction modality is null, then the user hasn't interacted with the page yet.
63
+ // In this case, we set the tabIndex to -1 on the input element so that automated accessibility
64
+ // checkers don't throw false-positives about focusable elements inside an aria-hidden parent.
65
+ return {
66
+ containerProps: {
67
+ ...visuallyHiddenProps,
68
+ 'aria-hidden': true,
69
+ // @ts-ignore
70
+ ['data-react-aria-prevent-focus']: true,
71
+ // @ts-ignore
72
+ ['data-a11y-ignore']: 'aria-hidden-focus'
73
+ },
74
+ inputProps: {
75
+ type: 'text',
76
+ tabIndex: modality == null || state.isFocused || state.isOpen ? -1 : 0,
77
+ style: {
78
+ fontSize: 16
79
+ },
80
+ onFocus: ()=>triggerRef.current.focus(),
81
+ disabled: isDisabled
82
+ },
83
+ selectProps: {
84
+ tabIndex: -1,
85
+ autoComplete: autoComplete,
86
+ disabled: isDisabled,
87
+ required: validationBehavior === 'native' && isRequired,
88
+ name: name,
89
+ value: (_state_selectedKey = state.selectedKey) !== null && _state_selectedKey !== void 0 ? _state_selectedKey : '',
90
+ onChange: (e)=>state.setSelectedKey(e.target.value)
91
+ }
92
+ };
93
+ }
94
+ function $6eae0e0872a4cdd4$export$cbd84cdb2e668835(props) {
95
+ let { state: state, triggerRef: triggerRef, label: label, name: name, isDisabled: isDisabled } = props;
96
+ let selectRef = (0, $ccxQv$react.useRef)(null);
97
+ let { containerProps: containerProps, inputProps: inputProps, selectProps: selectProps } = $6eae0e0872a4cdd4$export$f809e80f58e251d1({
98
+ ...props,
99
+ selectRef: selectRef
100
+ }, state, triggerRef);
101
+ var _state_selectedKey;
102
+ // If used in a <form>, use a hidden input so the value can be submitted to a server.
103
+ // If the collection isn't too big, use a hidden <select> element for this so that browser
104
+ // autofill will work. Otherwise, use an <input type="hidden">.
105
+ if (state.collection.size <= 300) return /*#__PURE__*/ (0, ($parcel$interopDefault($ccxQv$react))).createElement("div", {
106
+ ...containerProps,
107
+ "data-testid": "hidden-select-container"
108
+ }, /*#__PURE__*/ (0, ($parcel$interopDefault($ccxQv$react))).createElement("input", inputProps), /*#__PURE__*/ (0, ($parcel$interopDefault($ccxQv$react))).createElement("label", null, label, /*#__PURE__*/ (0, ($parcel$interopDefault($ccxQv$react))).createElement("select", {
109
+ ...selectProps,
110
+ ref: selectRef
111
+ }, /*#__PURE__*/ (0, ($parcel$interopDefault($ccxQv$react))).createElement("option", null), [
112
+ ...state.collection.getKeys()
113
+ ].map((key)=>{
114
+ let item = state.collection.getItem(key);
115
+ if (item.type === 'item') return /*#__PURE__*/ (0, ($parcel$interopDefault($ccxQv$react))).createElement("option", {
116
+ key: item.key,
117
+ value: item.key
118
+ }, item.textValue);
119
+ }))));
120
+ else if (name) return /*#__PURE__*/ (0, ($parcel$interopDefault($ccxQv$react))).createElement("input", {
121
+ type: "hidden",
122
+ autoComplete: selectProps.autoComplete,
123
+ name: name,
124
+ disabled: isDisabled,
125
+ value: (_state_selectedKey = state.selectedKey) !== null && _state_selectedKey !== void 0 ? _state_selectedKey : ''
126
+ });
127
+ return null;
128
+ }
129
+
130
+
131
+ //# sourceMappingURL=HiddenSelect.main.js.map
@@ -0,0 +1 @@
1
+ {"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAwDM,SAAS,0CAAmB,KAA8B,EAAE,KAAqB,EAAE,UAA8C;IACtI,IAAI,OAAO,CAAA,GAAA,oCAAS,EAAE,GAAG,CAAC,UAAU,CAAC;IACrC,IAAI,gBAAC,YAAY,QAAE,OAAO,KAAK,IAAI,cAAE,aAAa,KAAK,UAAU,EAAC,GAAG;IACrE,IAAI,sBAAC,kBAAkB,cAAE,UAAU,EAAC,GAAG;IACvC,IAAI,WAAW,CAAA,GAAA,mDAAqB;IACpC,IAAI,uBAAC,mBAAmB,EAAC,GAAG,CAAA,GAAA,gDAAgB;IAE5C,CAAA,GAAA,kCAAW,EAAE,MAAM,SAAS,EAAE,MAAM,WAAW,EAAE,MAAM,cAAc;IACrE,CAAA,GAAA,sCAAgB,EAAE;4BAChB;QACA,OAAO,IAAM,WAAW,OAAO,CAAC,KAAK;IACvC,GAAG,OAAO,MAAM,SAAS;QA0Cd;IAxCX,wFAAwF;IACxF,sFAAsF;IACtF,gDAAgD;IAChD,8FAA8F;IAC9F,kGAAkG;IAClG,mCAAmC;IACnC,EAAE;IACF,iGAAiG;IACjG,iGAAiG;IACjG,oGAAoG;IACpG,mGAAmG;IACnG,+FAA+F;IAC/F,+FAA+F;IAC/F,kEAAkE;IAClE,EAAE;IACF,kGAAkG;IAClG,+FAA+F;IAC/F,8FAA8F;IAC9F,OAAO;QACL,gBAAgB;YACd,GAAG,mBAAmB;YACtB,eAAe;YACf,aAAa;YACb,CAAC,gCAAgC,EAAE;YACnC,aAAa;YACb,CAAC,mBAAmB,EAAE;QACxB;QACA,YAAY;YACV,MAAM;YACN,UAAU,YAAY,QAAQ,MAAM,SAAS,IAAI,MAAM,MAAM,GAAG,KAAK;YACrE,OAAO;gBAAC,UAAU;YAAE;YACpB,SAAS,IAAM,WAAW,OAAO,CAAC,KAAK;YACvC,UAAU;QACZ;QACA,aAAa;YACX,UAAU;0BACV;YACA,UAAU;YACV,UAAU,uBAAuB,YAAY;kBAC7C;YACA,OAAO,CAAA,qBAAA,MAAM,WAAW,cAAjB,gCAAA,qBAAqB;YAC5B,UAAU,CAAC,IAA4C,MAAM,cAAc,CAAC,EAAE,MAAM,CAAC,KAAK;QAC5F;IACF;AACF;AAMO,SAAS,0CAAgB,KAA2B;IACzD,IAAI,SAAC,KAAK,cAAE,UAAU,SAAE,KAAK,QAAE,IAAI,cAAE,UAAU,EAAC,GAAG;IACnD,IAAI,YAAY,CAAA,GAAA,mBAAK,EAAE;IACvB,IAAI,kBAAC,cAAc,cAAE,UAAU,eAAE,WAAW,EAAC,GAAG,0CAAgB;QAAC,GAAG,KAAK;mBAAE;IAAS,GAAG,OAAO;QAoCjF;IAlCb,qFAAqF;IACrF,0FAA0F;IAC1F,+DAA+D;IAC/D,IAAI,MAAM,UAAU,CAAC,IAAI,IAAI,KAC3B,qBACE,0DAAC;QAAK,GAAG,cAAc;QAAE,eAAY;qBACnC,0DAAC,SAAU,2BACX,0DAAC,eACE,qBACD,0DAAC;QAAQ,GAAG,WAAW;QAAE,KAAK;qBAC5B,0DAAC,iBACA;WAAI,MAAM,UAAU,CAAC,OAAO;KAAG,CAAC,GAAG,CAAC,CAAA;QACnC,IAAI,OAAO,MAAM,UAAU,CAAC,OAAO,CAAC;QACpC,IAAI,KAAK,IAAI,KAAK,QAChB,qBACE,0DAAC;YACC,KAAK,KAAK,GAAG;YACb,OAAO,KAAK,GAAG;WACd,KAAK,SAAS;IAIvB;SAKH,IAAI,MACT,qBACE,0DAAC;QACC,MAAK;QACL,cAAc,YAAY,YAAY;QACtC,MAAM;QACN,UAAU;QACV,OAAO,CAAA,qBAAA,MAAM,WAAW,cAAjB,gCAAA,qBAAqB;;IAIlC,OAAO;AACT","sources":["packages/@react-aria/select/src/HiddenSelect.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {FocusableElement, RefObject} from '@react-types/shared';\nimport React, {ReactNode, useRef} from 'react';\nimport {selectData} from './useSelect';\nimport {SelectState} from '@react-stately/select';\nimport {useFormReset} from '@react-aria/utils';\nimport {useFormValidation} from '@react-aria/form';\nimport {useInteractionModality} from '@react-aria/interactions';\nimport {useVisuallyHidden} from '@react-aria/visually-hidden';\n\nexport interface AriaHiddenSelectProps {\n /**\n * Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete).\n */\n autoComplete?: string,\n\n /** The text label for the select. */\n label?: ReactNode,\n\n /** HTML form input name. */\n name?: string,\n\n /** Sets the disabled state of the select and input. */\n isDisabled?: boolean\n}\n\nexport interface HiddenSelectProps<T> extends AriaHiddenSelectProps {\n /** State for the select. */\n state: SelectState<T>,\n\n /** A ref to the trigger element. */\n triggerRef: RefObject<FocusableElement | null>\n}\n\nexport interface AriaHiddenSelectOptions extends AriaHiddenSelectProps {\n /** A ref to the hidden `<select>` element. */\n selectRef?: RefObject<HTMLSelectElement | null>\n}\n\nexport interface HiddenSelectAria {\n /** Props for the container element. */\n containerProps: React.HTMLAttributes<FocusableElement>,\n\n /** Props for the hidden input element. */\n inputProps: React.InputHTMLAttributes<HTMLInputElement>,\n\n /** Props for the hidden select element. */\n selectProps: React.SelectHTMLAttributes<HTMLSelectElement>\n}\n\n/**\n * Provides the behavior and accessibility implementation for a hidden `<select>` element, which\n * can be used in combination with `useSelect` to support browser form autofill, mobile form\n * navigation, and native HTML form submission.\n */\nexport function useHiddenSelect<T>(props: AriaHiddenSelectOptions, state: SelectState<T>, triggerRef: RefObject<FocusableElement | null>): HiddenSelectAria {\n let data = selectData.get(state) || {};\n let {autoComplete, name = data.name, isDisabled = data.isDisabled} = props;\n let {validationBehavior, isRequired} = data;\n let modality = useInteractionModality();\n let {visuallyHiddenProps} = useVisuallyHidden();\n\n useFormReset(props.selectRef, state.selectedKey, state.setSelectedKey);\n useFormValidation({\n validationBehavior,\n focus: () => triggerRef.current.focus()\n }, state, props.selectRef);\n\n // In Safari, the <select> cannot have `display: none` or `hidden` for autofill to work.\n // In Firefox, there must be a <label> to identify the <select> whereas other browsers\n // seem to identify it just by surrounding text.\n // The solution is to use <VisuallyHidden> to hide the elements, which clips the elements to a\n // 1px rectangle. In addition, we hide from screen readers with aria-hidden, and make the <select>\n // non tabbable with tabIndex={-1}.\n //\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 // @ts-ignore\n ['data-react-aria-prevent-focus']: true,\n // @ts-ignore\n ['data-a11y-ignore']: 'aria-hidden-focus'\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 required: validationBehavior === 'native' && isRequired,\n name,\n value: state.selectedKey ?? '',\n onChange: (e: React.ChangeEvent<HTMLSelectElement>) => state.setSelectedKey(e.target.value)\n }\n };\n}\n\n/**\n * Renders a hidden native `<select>` element, which can be used to support browser\n * form autofill, mobile form navigation, and native form submission.\n */\nexport function HiddenSelect<T>(props: HiddenSelectProps<T>) {\n let {state, triggerRef, label, name, isDisabled} = props;\n let selectRef = useRef(null);\n let {containerProps, inputProps, selectProps} = useHiddenSelect({...props, selectRef}, state, triggerRef);\n\n // If used in a <form>, use a hidden input so the value can be submitted to a server.\n // If the collection isn't too big, use a hidden <select> element for this so that browser\n // autofill will work. Otherwise, use an <input type=\"hidden\">.\n if (state.collection.size <= 300) {\n return (\n <div {...containerProps} data-testid=\"hidden-select-container\">\n <input {...inputProps} />\n <label>\n {label}\n <select {...selectProps} ref={selectRef}>\n <option />\n {[...state.collection.getKeys()].map(key => {\n let item = state.collection.getItem(key);\n if (item.type === 'item') {\n return (\n <option\n key={item.key}\n value={item.key}>\n {item.textValue}\n </option>\n );\n }\n })}\n </select>\n </label>\n </div>\n );\n } else if (name) {\n return (\n <input\n type=\"hidden\"\n autoComplete={selectProps.autoComplete}\n name={name}\n disabled={isDisabled}\n value={state.selectedKey ?? ''} />\n );\n }\n\n return null;\n}\n"],"names":[],"version":3,"file":"HiddenSelect.main.js.map"}
@@ -0,0 +1,121 @@
1
+ import {selectData as $58aed456727eb0f3$export$703601b7e90536f8} from "./useSelect.mjs";
2
+ import $8BE50$react, {useRef as $8BE50$useRef} from "react";
3
+ import {useFormReset as $8BE50$useFormReset} from "@react-aria/utils";
4
+ import {useFormValidation as $8BE50$useFormValidation} from "@react-aria/form";
5
+ import {useInteractionModality as $8BE50$useInteractionModality} from "@react-aria/interactions";
6
+ import {useVisuallyHidden as $8BE50$useVisuallyHidden} from "@react-aria/visually-hidden";
7
+
8
+ /*
9
+ * Copyright 2020 Adobe. All rights reserved.
10
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
11
+ * you may not use this file except in compliance with the License. You may obtain a copy
12
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
13
+ *
14
+ * Unless required by applicable law or agreed to in writing, software distributed under
15
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
16
+ * OF ANY KIND, either express or implied. See the License for the specific language
17
+ * governing permissions and limitations under the License.
18
+ */
19
+
20
+
21
+
22
+
23
+
24
+ function $bdd25dc72710631f$export$f809e80f58e251d1(props, state, triggerRef) {
25
+ let data = (0, $58aed456727eb0f3$export$703601b7e90536f8).get(state) || {};
26
+ let { autoComplete: autoComplete, name: name = data.name, isDisabled: isDisabled = data.isDisabled } = props;
27
+ let { validationBehavior: validationBehavior, isRequired: isRequired } = data;
28
+ let modality = (0, $8BE50$useInteractionModality)();
29
+ let { visuallyHiddenProps: visuallyHiddenProps } = (0, $8BE50$useVisuallyHidden)();
30
+ (0, $8BE50$useFormReset)(props.selectRef, state.selectedKey, state.setSelectedKey);
31
+ (0, $8BE50$useFormValidation)({
32
+ validationBehavior: validationBehavior,
33
+ focus: ()=>triggerRef.current.focus()
34
+ }, state, props.selectRef);
35
+ var _state_selectedKey;
36
+ // In Safari, the <select> cannot have `display: none` or `hidden` for autofill to work.
37
+ // In Firefox, there must be a <label> to identify the <select> whereas other browsers
38
+ // seem to identify it just by surrounding text.
39
+ // The solution is to use <VisuallyHidden> to hide the elements, which clips the elements to a
40
+ // 1px rectangle. In addition, we hide from screen readers with aria-hidden, and make the <select>
41
+ // non tabbable with tabIndex={-1}.
42
+ //
43
+ // In mobile browsers, there are next/previous buttons above the software keyboard for navigating
44
+ // between fields in a form. These only support native form inputs that are tabbable. In order to
45
+ // support those, an additional hidden input is used to marshall focus to the button. It is tabbable
46
+ // except when the button is focused, so that shift tab works properly to go to the actual previous
47
+ // input in the form. Using the <select> for this also works, but Safari on iOS briefly flashes
48
+ // the native menu on focus, so this isn't ideal. A font-size of 16px or greater is required to
49
+ // prevent Safari from zooming in on the input when it is focused.
50
+ //
51
+ // If the current interaction modality is null, then the user hasn't interacted with the page yet.
52
+ // In this case, we set the tabIndex to -1 on the input element so that automated accessibility
53
+ // checkers don't throw false-positives about focusable elements inside an aria-hidden parent.
54
+ return {
55
+ containerProps: {
56
+ ...visuallyHiddenProps,
57
+ 'aria-hidden': true,
58
+ // @ts-ignore
59
+ ['data-react-aria-prevent-focus']: true,
60
+ // @ts-ignore
61
+ ['data-a11y-ignore']: 'aria-hidden-focus'
62
+ },
63
+ inputProps: {
64
+ type: 'text',
65
+ tabIndex: modality == null || state.isFocused || state.isOpen ? -1 : 0,
66
+ style: {
67
+ fontSize: 16
68
+ },
69
+ onFocus: ()=>triggerRef.current.focus(),
70
+ disabled: isDisabled
71
+ },
72
+ selectProps: {
73
+ tabIndex: -1,
74
+ autoComplete: autoComplete,
75
+ disabled: isDisabled,
76
+ required: validationBehavior === 'native' && isRequired,
77
+ name: name,
78
+ value: (_state_selectedKey = state.selectedKey) !== null && _state_selectedKey !== void 0 ? _state_selectedKey : '',
79
+ onChange: (e)=>state.setSelectedKey(e.target.value)
80
+ }
81
+ };
82
+ }
83
+ function $bdd25dc72710631f$export$cbd84cdb2e668835(props) {
84
+ let { state: state, triggerRef: triggerRef, label: label, name: name, isDisabled: isDisabled } = props;
85
+ let selectRef = (0, $8BE50$useRef)(null);
86
+ let { containerProps: containerProps, inputProps: inputProps, selectProps: selectProps } = $bdd25dc72710631f$export$f809e80f58e251d1({
87
+ ...props,
88
+ selectRef: selectRef
89
+ }, state, triggerRef);
90
+ var _state_selectedKey;
91
+ // If used in a <form>, use a hidden input so the value can be submitted to a server.
92
+ // If the collection isn't too big, use a hidden <select> element for this so that browser
93
+ // autofill will work. Otherwise, use an <input type="hidden">.
94
+ if (state.collection.size <= 300) return /*#__PURE__*/ (0, $8BE50$react).createElement("div", {
95
+ ...containerProps,
96
+ "data-testid": "hidden-select-container"
97
+ }, /*#__PURE__*/ (0, $8BE50$react).createElement("input", inputProps), /*#__PURE__*/ (0, $8BE50$react).createElement("label", null, label, /*#__PURE__*/ (0, $8BE50$react).createElement("select", {
98
+ ...selectProps,
99
+ ref: selectRef
100
+ }, /*#__PURE__*/ (0, $8BE50$react).createElement("option", null), [
101
+ ...state.collection.getKeys()
102
+ ].map((key)=>{
103
+ let item = state.collection.getItem(key);
104
+ if (item.type === 'item') return /*#__PURE__*/ (0, $8BE50$react).createElement("option", {
105
+ key: item.key,
106
+ value: item.key
107
+ }, item.textValue);
108
+ }))));
109
+ else if (name) return /*#__PURE__*/ (0, $8BE50$react).createElement("input", {
110
+ type: "hidden",
111
+ autoComplete: selectProps.autoComplete,
112
+ name: name,
113
+ disabled: isDisabled,
114
+ value: (_state_selectedKey = state.selectedKey) !== null && _state_selectedKey !== void 0 ? _state_selectedKey : ''
115
+ });
116
+ return null;
117
+ }
118
+
119
+
120
+ export {$bdd25dc72710631f$export$f809e80f58e251d1 as useHiddenSelect, $bdd25dc72710631f$export$cbd84cdb2e668835 as HiddenSelect};
121
+ //# sourceMappingURL=HiddenSelect.module.js.map
@@ -0,0 +1,121 @@
1
+ import {selectData as $58aed456727eb0f3$export$703601b7e90536f8} from "./useSelect.module.js";
2
+ import $8BE50$react, {useRef as $8BE50$useRef} from "react";
3
+ import {useFormReset as $8BE50$useFormReset} from "@react-aria/utils";
4
+ import {useFormValidation as $8BE50$useFormValidation} from "@react-aria/form";
5
+ import {useInteractionModality as $8BE50$useInteractionModality} from "@react-aria/interactions";
6
+ import {useVisuallyHidden as $8BE50$useVisuallyHidden} from "@react-aria/visually-hidden";
7
+
8
+ /*
9
+ * Copyright 2020 Adobe. All rights reserved.
10
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
11
+ * you may not use this file except in compliance with the License. You may obtain a copy
12
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
13
+ *
14
+ * Unless required by applicable law or agreed to in writing, software distributed under
15
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
16
+ * OF ANY KIND, either express or implied. See the License for the specific language
17
+ * governing permissions and limitations under the License.
18
+ */
19
+
20
+
21
+
22
+
23
+
24
+ function $bdd25dc72710631f$export$f809e80f58e251d1(props, state, triggerRef) {
25
+ let data = (0, $58aed456727eb0f3$export$703601b7e90536f8).get(state) || {};
26
+ let { autoComplete: autoComplete, name: name = data.name, isDisabled: isDisabled = data.isDisabled } = props;
27
+ let { validationBehavior: validationBehavior, isRequired: isRequired } = data;
28
+ let modality = (0, $8BE50$useInteractionModality)();
29
+ let { visuallyHiddenProps: visuallyHiddenProps } = (0, $8BE50$useVisuallyHidden)();
30
+ (0, $8BE50$useFormReset)(props.selectRef, state.selectedKey, state.setSelectedKey);
31
+ (0, $8BE50$useFormValidation)({
32
+ validationBehavior: validationBehavior,
33
+ focus: ()=>triggerRef.current.focus()
34
+ }, state, props.selectRef);
35
+ var _state_selectedKey;
36
+ // In Safari, the <select> cannot have `display: none` or `hidden` for autofill to work.
37
+ // In Firefox, there must be a <label> to identify the <select> whereas other browsers
38
+ // seem to identify it just by surrounding text.
39
+ // The solution is to use <VisuallyHidden> to hide the elements, which clips the elements to a
40
+ // 1px rectangle. In addition, we hide from screen readers with aria-hidden, and make the <select>
41
+ // non tabbable with tabIndex={-1}.
42
+ //
43
+ // In mobile browsers, there are next/previous buttons above the software keyboard for navigating
44
+ // between fields in a form. These only support native form inputs that are tabbable. In order to
45
+ // support those, an additional hidden input is used to marshall focus to the button. It is tabbable
46
+ // except when the button is focused, so that shift tab works properly to go to the actual previous
47
+ // input in the form. Using the <select> for this also works, but Safari on iOS briefly flashes
48
+ // the native menu on focus, so this isn't ideal. A font-size of 16px or greater is required to
49
+ // prevent Safari from zooming in on the input when it is focused.
50
+ //
51
+ // If the current interaction modality is null, then the user hasn't interacted with the page yet.
52
+ // In this case, we set the tabIndex to -1 on the input element so that automated accessibility
53
+ // checkers don't throw false-positives about focusable elements inside an aria-hidden parent.
54
+ return {
55
+ containerProps: {
56
+ ...visuallyHiddenProps,
57
+ 'aria-hidden': true,
58
+ // @ts-ignore
59
+ ['data-react-aria-prevent-focus']: true,
60
+ // @ts-ignore
61
+ ['data-a11y-ignore']: 'aria-hidden-focus'
62
+ },
63
+ inputProps: {
64
+ type: 'text',
65
+ tabIndex: modality == null || state.isFocused || state.isOpen ? -1 : 0,
66
+ style: {
67
+ fontSize: 16
68
+ },
69
+ onFocus: ()=>triggerRef.current.focus(),
70
+ disabled: isDisabled
71
+ },
72
+ selectProps: {
73
+ tabIndex: -1,
74
+ autoComplete: autoComplete,
75
+ disabled: isDisabled,
76
+ required: validationBehavior === 'native' && isRequired,
77
+ name: name,
78
+ value: (_state_selectedKey = state.selectedKey) !== null && _state_selectedKey !== void 0 ? _state_selectedKey : '',
79
+ onChange: (e)=>state.setSelectedKey(e.target.value)
80
+ }
81
+ };
82
+ }
83
+ function $bdd25dc72710631f$export$cbd84cdb2e668835(props) {
84
+ let { state: state, triggerRef: triggerRef, label: label, name: name, isDisabled: isDisabled } = props;
85
+ let selectRef = (0, $8BE50$useRef)(null);
86
+ let { containerProps: containerProps, inputProps: inputProps, selectProps: selectProps } = $bdd25dc72710631f$export$f809e80f58e251d1({
87
+ ...props,
88
+ selectRef: selectRef
89
+ }, state, triggerRef);
90
+ var _state_selectedKey;
91
+ // If used in a <form>, use a hidden input so the value can be submitted to a server.
92
+ // If the collection isn't too big, use a hidden <select> element for this so that browser
93
+ // autofill will work. Otherwise, use an <input type="hidden">.
94
+ if (state.collection.size <= 300) return /*#__PURE__*/ (0, $8BE50$react).createElement("div", {
95
+ ...containerProps,
96
+ "data-testid": "hidden-select-container"
97
+ }, /*#__PURE__*/ (0, $8BE50$react).createElement("input", inputProps), /*#__PURE__*/ (0, $8BE50$react).createElement("label", null, label, /*#__PURE__*/ (0, $8BE50$react).createElement("select", {
98
+ ...selectProps,
99
+ ref: selectRef
100
+ }, /*#__PURE__*/ (0, $8BE50$react).createElement("option", null), [
101
+ ...state.collection.getKeys()
102
+ ].map((key)=>{
103
+ let item = state.collection.getItem(key);
104
+ if (item.type === 'item') return /*#__PURE__*/ (0, $8BE50$react).createElement("option", {
105
+ key: item.key,
106
+ value: item.key
107
+ }, item.textValue);
108
+ }))));
109
+ else if (name) return /*#__PURE__*/ (0, $8BE50$react).createElement("input", {
110
+ type: "hidden",
111
+ autoComplete: selectProps.autoComplete,
112
+ name: name,
113
+ disabled: isDisabled,
114
+ value: (_state_selectedKey = state.selectedKey) !== null && _state_selectedKey !== void 0 ? _state_selectedKey : ''
115
+ });
116
+ return null;
117
+ }
118
+
119
+
120
+ export {$bdd25dc72710631f$export$f809e80f58e251d1 as useHiddenSelect, $bdd25dc72710631f$export$cbd84cdb2e668835 as HiddenSelect};
121
+ //# sourceMappingURL=HiddenSelect.module.js.map
@@ -0,0 +1 @@
1
+ {"mappings":";;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAwDM,SAAS,0CAAmB,KAA8B,EAAE,KAAqB,EAAE,UAA8C;IACtI,IAAI,OAAO,CAAA,GAAA,yCAAS,EAAE,GAAG,CAAC,UAAU,CAAC;IACrC,IAAI,gBAAC,YAAY,QAAE,OAAO,KAAK,IAAI,cAAE,aAAa,KAAK,UAAU,EAAC,GAAG;IACrE,IAAI,sBAAC,kBAAkB,cAAE,UAAU,EAAC,GAAG;IACvC,IAAI,WAAW,CAAA,GAAA,6BAAqB;IACpC,IAAI,uBAAC,mBAAmB,EAAC,GAAG,CAAA,GAAA,wBAAgB;IAE5C,CAAA,GAAA,mBAAW,EAAE,MAAM,SAAS,EAAE,MAAM,WAAW,EAAE,MAAM,cAAc;IACrE,CAAA,GAAA,wBAAgB,EAAE;4BAChB;QACA,OAAO,IAAM,WAAW,OAAO,CAAC,KAAK;IACvC,GAAG,OAAO,MAAM,SAAS;QA0Cd;IAxCX,wFAAwF;IACxF,sFAAsF;IACtF,gDAAgD;IAChD,8FAA8F;IAC9F,kGAAkG;IAClG,mCAAmC;IACnC,EAAE;IACF,iGAAiG;IACjG,iGAAiG;IACjG,oGAAoG;IACpG,mGAAmG;IACnG,+FAA+F;IAC/F,+FAA+F;IAC/F,kEAAkE;IAClE,EAAE;IACF,kGAAkG;IAClG,+FAA+F;IAC/F,8FAA8F;IAC9F,OAAO;QACL,gBAAgB;YACd,GAAG,mBAAmB;YACtB,eAAe;YACf,aAAa;YACb,CAAC,gCAAgC,EAAE;YACnC,aAAa;YACb,CAAC,mBAAmB,EAAE;QACxB;QACA,YAAY;YACV,MAAM;YACN,UAAU,YAAY,QAAQ,MAAM,SAAS,IAAI,MAAM,MAAM,GAAG,KAAK;YACrE,OAAO;gBAAC,UAAU;YAAE;YACpB,SAAS,IAAM,WAAW,OAAO,CAAC,KAAK;YACvC,UAAU;QACZ;QACA,aAAa;YACX,UAAU;0BACV;YACA,UAAU;YACV,UAAU,uBAAuB,YAAY;kBAC7C;YACA,OAAO,CAAA,qBAAA,MAAM,WAAW,cAAjB,gCAAA,qBAAqB;YAC5B,UAAU,CAAC,IAA4C,MAAM,cAAc,CAAC,EAAE,MAAM,CAAC,KAAK;QAC5F;IACF;AACF;AAMO,SAAS,0CAAgB,KAA2B;IACzD,IAAI,SAAC,KAAK,cAAE,UAAU,SAAE,KAAK,QAAE,IAAI,cAAE,UAAU,EAAC,GAAG;IACnD,IAAI,YAAY,CAAA,GAAA,aAAK,EAAE;IACvB,IAAI,kBAAC,cAAc,cAAE,UAAU,eAAE,WAAW,EAAC,GAAG,0CAAgB;QAAC,GAAG,KAAK;mBAAE;IAAS,GAAG,OAAO;QAoCjF;IAlCb,qFAAqF;IACrF,0FAA0F;IAC1F,+DAA+D;IAC/D,IAAI,MAAM,UAAU,CAAC,IAAI,IAAI,KAC3B,qBACE,gCAAC;QAAK,GAAG,cAAc;QAAE,eAAY;qBACnC,gCAAC,SAAU,2BACX,gCAAC,eACE,qBACD,gCAAC;QAAQ,GAAG,WAAW;QAAE,KAAK;qBAC5B,gCAAC,iBACA;WAAI,MAAM,UAAU,CAAC,OAAO;KAAG,CAAC,GAAG,CAAC,CAAA;QACnC,IAAI,OAAO,MAAM,UAAU,CAAC,OAAO,CAAC;QACpC,IAAI,KAAK,IAAI,KAAK,QAChB,qBACE,gCAAC;YACC,KAAK,KAAK,GAAG;YACb,OAAO,KAAK,GAAG;WACd,KAAK,SAAS;IAIvB;SAKH,IAAI,MACT,qBACE,gCAAC;QACC,MAAK;QACL,cAAc,YAAY,YAAY;QACtC,MAAM;QACN,UAAU;QACV,OAAO,CAAA,qBAAA,MAAM,WAAW,cAAjB,gCAAA,qBAAqB;;IAIlC,OAAO;AACT","sources":["packages/@react-aria/select/src/HiddenSelect.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {FocusableElement, RefObject} from '@react-types/shared';\nimport React, {ReactNode, useRef} from 'react';\nimport {selectData} from './useSelect';\nimport {SelectState} from '@react-stately/select';\nimport {useFormReset} from '@react-aria/utils';\nimport {useFormValidation} from '@react-aria/form';\nimport {useInteractionModality} from '@react-aria/interactions';\nimport {useVisuallyHidden} from '@react-aria/visually-hidden';\n\nexport interface AriaHiddenSelectProps {\n /**\n * Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete).\n */\n autoComplete?: string,\n\n /** The text label for the select. */\n label?: ReactNode,\n\n /** HTML form input name. */\n name?: string,\n\n /** Sets the disabled state of the select and input. */\n isDisabled?: boolean\n}\n\nexport interface HiddenSelectProps<T> extends AriaHiddenSelectProps {\n /** State for the select. */\n state: SelectState<T>,\n\n /** A ref to the trigger element. */\n triggerRef: RefObject<FocusableElement | null>\n}\n\nexport interface AriaHiddenSelectOptions extends AriaHiddenSelectProps {\n /** A ref to the hidden `<select>` element. */\n selectRef?: RefObject<HTMLSelectElement | null>\n}\n\nexport interface HiddenSelectAria {\n /** Props for the container element. */\n containerProps: React.HTMLAttributes<FocusableElement>,\n\n /** Props for the hidden input element. */\n inputProps: React.InputHTMLAttributes<HTMLInputElement>,\n\n /** Props for the hidden select element. */\n selectProps: React.SelectHTMLAttributes<HTMLSelectElement>\n}\n\n/**\n * Provides the behavior and accessibility implementation for a hidden `<select>` element, which\n * can be used in combination with `useSelect` to support browser form autofill, mobile form\n * navigation, and native HTML form submission.\n */\nexport function useHiddenSelect<T>(props: AriaHiddenSelectOptions, state: SelectState<T>, triggerRef: RefObject<FocusableElement | null>): HiddenSelectAria {\n let data = selectData.get(state) || {};\n let {autoComplete, name = data.name, isDisabled = data.isDisabled} = props;\n let {validationBehavior, isRequired} = data;\n let modality = useInteractionModality();\n let {visuallyHiddenProps} = useVisuallyHidden();\n\n useFormReset(props.selectRef, state.selectedKey, state.setSelectedKey);\n useFormValidation({\n validationBehavior,\n focus: () => triggerRef.current.focus()\n }, state, props.selectRef);\n\n // In Safari, the <select> cannot have `display: none` or `hidden` for autofill to work.\n // In Firefox, there must be a <label> to identify the <select> whereas other browsers\n // seem to identify it just by surrounding text.\n // The solution is to use <VisuallyHidden> to hide the elements, which clips the elements to a\n // 1px rectangle. In addition, we hide from screen readers with aria-hidden, and make the <select>\n // non tabbable with tabIndex={-1}.\n //\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 // @ts-ignore\n ['data-react-aria-prevent-focus']: true,\n // @ts-ignore\n ['data-a11y-ignore']: 'aria-hidden-focus'\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 required: validationBehavior === 'native' && isRequired,\n name,\n value: state.selectedKey ?? '',\n onChange: (e: React.ChangeEvent<HTMLSelectElement>) => state.setSelectedKey(e.target.value)\n }\n };\n}\n\n/**\n * Renders a hidden native `<select>` element, which can be used to support browser\n * form autofill, mobile form navigation, and native form submission.\n */\nexport function HiddenSelect<T>(props: HiddenSelectProps<T>) {\n let {state, triggerRef, label, name, isDisabled} = props;\n let selectRef = useRef(null);\n let {containerProps, inputProps, selectProps} = useHiddenSelect({...props, selectRef}, state, triggerRef);\n\n // If used in a <form>, use a hidden input so the value can be submitted to a server.\n // If the collection isn't too big, use a hidden <select> element for this so that browser\n // autofill will work. Otherwise, use an <input type=\"hidden\">.\n if (state.collection.size <= 300) {\n return (\n <div {...containerProps} data-testid=\"hidden-select-container\">\n <input {...inputProps} />\n <label>\n {label}\n <select {...selectProps} ref={selectRef}>\n <option />\n {[...state.collection.getKeys()].map(key => {\n let item = state.collection.getItem(key);\n if (item.type === 'item') {\n return (\n <option\n key={item.key}\n value={item.key}>\n {item.textValue}\n </option>\n );\n }\n })}\n </select>\n </label>\n </div>\n );\n } else if (name) {\n return (\n <input\n type=\"hidden\"\n autoComplete={selectProps.autoComplete}\n name={name}\n disabled={isDisabled}\n value={state.selectedKey ?? ''} />\n );\n }\n\n return null;\n}\n"],"names":[],"version":3,"file":"HiddenSelect.module.js.map"}
@@ -0,0 +1,19 @@
1
+ import {useSelect as $58aed456727eb0f3$export$e64b2f635402ca43} from "./useSelect.mjs";
2
+ import {HiddenSelect as $bdd25dc72710631f$export$cbd84cdb2e668835, useHiddenSelect as $bdd25dc72710631f$export$f809e80f58e251d1} from "./HiddenSelect.mjs";
3
+
4
+ /*
5
+ * Copyright 2020 Adobe. All rights reserved.
6
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
7
+ * you may not use this file except in compliance with the License. You may obtain a copy
8
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
9
+ *
10
+ * Unless required by applicable law or agreed to in writing, software distributed under
11
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
12
+ * OF ANY KIND, either express or implied. See the License for the specific language
13
+ * governing permissions and limitations under the License.
14
+ */
15
+
16
+
17
+
18
+ export {$58aed456727eb0f3$export$e64b2f635402ca43 as useSelect, $bdd25dc72710631f$export$f809e80f58e251d1 as useHiddenSelect, $bdd25dc72710631f$export$cbd84cdb2e668835 as HiddenSelect};
19
+ //# sourceMappingURL=module.js.map
package/dist/main.js CHANGED
@@ -1,60 +1,26 @@
1
- var _babelRuntimeHelpersObjectSpread = $parcel$interopDefault(require("@babel/runtime/helpers/objectSpread2"));
1
+ var $23a1e93dc7fa8653$exports = require("./useSelect.main.js");
2
+ var $6eae0e0872a4cdd4$exports = require("./HiddenSelect.main.js");
2
3
 
3
- var _temp = require("@react-aria/utils");
4
4
 
5
- var mergeProps = _temp.mergeProps;
6
- var useId = _temp.useId;
7
-
8
- var useLabel = require("@react-aria/label").useLabel;
9
-
10
- var useMenuTrigger = require("@react-aria/menu").useMenuTrigger;
11
-
12
- var useTypeSelect = require("@react-aria/selection").useTypeSelect;
13
-
14
- function $parcel$interopDefault(a) {
15
- return a && a.__esModule ? a.default : a;
5
+ function $parcel$export(e, n, v, s) {
6
+ Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
16
7
  }
17
8
 
18
- function useSelect(props, state) {
19
- var triggerRef = props.triggerRef,
20
- keyboardDelegate = props.keyboardDelegate;
9
+ $parcel$export(module.exports, "useSelect", () => $23a1e93dc7fa8653$exports.useSelect);
10
+ $parcel$export(module.exports, "useHiddenSelect", () => $6eae0e0872a4cdd4$exports.useHiddenSelect);
11
+ $parcel$export(module.exports, "HiddenSelect", () => $6eae0e0872a4cdd4$exports.HiddenSelect);
12
+ /*
13
+ * Copyright 2020 Adobe. All rights reserved.
14
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
15
+ * you may not use this file except in compliance with the License. You may obtain a copy
16
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
17
+ *
18
+ * Unless required by applicable law or agreed to in writing, software distributed under
19
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
20
+ * OF ANY KIND, either express or implied. See the License for the specific language
21
+ * governing permissions and limitations under the License.
22
+ */
21
23
 
22
- var _useMenuTrigger = useMenuTrigger({
23
- ref: triggerRef,
24
- type: 'listbox'
25
- }, state),
26
- menuTriggerProps = _useMenuTrigger.menuTriggerProps,
27
- menuProps = _useMenuTrigger.menuProps;
28
24
 
29
- var _useTypeSelect = useTypeSelect({
30
- keyboardDelegate: keyboardDelegate,
31
- selectionManager: state.selectionManager,
32
- onTypeSelect: function onTypeSelect(key) {
33
- state.setSelectedKey(key);
34
- }
35
- }),
36
- typeSelectProps = _useTypeSelect.typeSelectProps;
37
-
38
- var _useLabel = useLabel(_babelRuntimeHelpersObjectSpread({}, props, {
39
- labelElementType: 'span'
40
- })),
41
- labelProps = _useLabel.labelProps,
42
- fieldProps = _useLabel.fieldProps;
43
-
44
- var triggerProps = mergeProps(mergeProps(menuTriggerProps, fieldProps), typeSelectProps);
45
- var valueId = useId();
46
- return {
47
- labelProps: labelProps,
48
- triggerProps: _babelRuntimeHelpersObjectSpread({}, triggerProps, {
49
- 'aria-labelledby': [triggerProps['aria-labelledby'], triggerProps['aria-label'] ? triggerProps.id : null, valueId].filter(Boolean).join(' ')
50
- }),
51
- valueProps: {
52
- id: valueId
53
- },
54
- menuProps: _babelRuntimeHelpersObjectSpread({}, menuProps, {
55
- 'aria-labelledby': [fieldProps['aria-labelledby'], triggerProps['aria-label'] ? triggerProps.id : null].filter(Boolean).join(' ')
56
- })
57
- };
58
- }
59
25
 
60
- exports.useSelect = useSelect;
26
+ //# sourceMappingURL=main.js.map
@@ -0,0 +1 @@
1
+ {"mappings":";;;;;;;;;;;AAAA;;;;;;;;;;CAUC","sources":["packages/@react-aria/select/src/index.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 */\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":"main.js.map"}
package/dist/module.js CHANGED
@@ -1,49 +1,19 @@
1
- import _babelRuntimeHelpersEsmObjectSpread from "@babel/runtime/helpers/esm/objectSpread2";
2
- import { mergeProps, useId } from "@react-aria/utils";
3
- import { useLabel } from "@react-aria/label";
4
- import { useMenuTrigger } from "@react-aria/menu";
5
- import { useTypeSelect } from "@react-aria/selection";
6
- export function useSelect(props, state) {
7
- let {
8
- triggerRef,
9
- keyboardDelegate
10
- } = props;
11
- let {
12
- menuTriggerProps,
13
- menuProps
14
- } = useMenuTrigger({
15
- ref: triggerRef,
16
- type: 'listbox'
17
- }, state);
18
- let {
19
- typeSelectProps
20
- } = useTypeSelect({
21
- keyboardDelegate: keyboardDelegate,
22
- selectionManager: state.selectionManager,
1
+ import {useSelect as $58aed456727eb0f3$export$e64b2f635402ca43} from "./useSelect.module.js";
2
+ import {HiddenSelect as $bdd25dc72710631f$export$cbd84cdb2e668835, useHiddenSelect as $bdd25dc72710631f$export$f809e80f58e251d1} from "./HiddenSelect.module.js";
23
3
 
24
- onTypeSelect(key) {
25
- state.setSelectedKey(key);
26
- }
4
+ /*
5
+ * Copyright 2020 Adobe. All rights reserved.
6
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
7
+ * you may not use this file except in compliance with the License. You may obtain a copy
8
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
9
+ *
10
+ * Unless required by applicable law or agreed to in writing, software distributed under
11
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
12
+ * OF ANY KIND, either express or implied. See the License for the specific language
13
+ * governing permissions and limitations under the License.
14
+ */
27
15
 
28
- });
29
- let {
30
- labelProps,
31
- fieldProps
32
- } = useLabel(_babelRuntimeHelpersEsmObjectSpread({}, props, {
33
- labelElementType: 'span'
34
- }));
35
- let triggerProps = mergeProps(mergeProps(menuTriggerProps, fieldProps), typeSelectProps);
36
- let valueId = useId();
37
- return {
38
- labelProps,
39
- triggerProps: _babelRuntimeHelpersEsmObjectSpread({}, triggerProps, {
40
- 'aria-labelledby': [triggerProps['aria-labelledby'], triggerProps['aria-label'] ? triggerProps.id : null, valueId].filter(Boolean).join(' ')
41
- }),
42
- valueProps: {
43
- id: valueId
44
- },
45
- menuProps: _babelRuntimeHelpersEsmObjectSpread({}, menuProps, {
46
- 'aria-labelledby': [fieldProps['aria-labelledby'], triggerProps['aria-label'] ? triggerProps.id : null].filter(Boolean).join(' ')
47
- })
48
- };
49
- }
16
+
17
+
18
+ export {$58aed456727eb0f3$export$e64b2f635402ca43 as useSelect, $bdd25dc72710631f$export$f809e80f58e251d1 as useHiddenSelect, $bdd25dc72710631f$export$cbd84cdb2e668835 as HiddenSelect};
19
+ //# sourceMappingURL=module.js.map
@@ -0,0 +1 @@
1
+ {"mappings":";;;AAAA;;;;;;;;;;CAUC","sources":["packages/@react-aria/select/src/index.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 */\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":"module.js.map"}