@react-aria/select 3.8.5-nightly.3696 → 3.8.5-nightly.3705
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/import.mjs +244 -0
- package/package.json +19 -14
package/dist/import.mjs
ADDED
|
@@ -0,0 +1,244 @@
|
|
|
1
|
+
import {filterDOMProps as $thkiX$filterDOMProps, mergeProps as $thkiX$mergeProps, useId as $thkiX$useId, chain as $thkiX$chain} from "@react-aria/utils";
|
|
2
|
+
import $thkiX$react, {useMemo as $thkiX$useMemo} from "react";
|
|
3
|
+
import {ListKeyboardDelegate as $thkiX$ListKeyboardDelegate, useTypeSelect as $thkiX$useTypeSelect} from "@react-aria/selection";
|
|
4
|
+
import {setInteractionModality as $thkiX$setInteractionModality, useInteractionModality as $thkiX$useInteractionModality} from "@react-aria/interactions";
|
|
5
|
+
import {useCollator as $thkiX$useCollator} from "@react-aria/i18n";
|
|
6
|
+
import {useField as $thkiX$useField} from "@react-aria/label";
|
|
7
|
+
import {useMenuTrigger as $thkiX$useMenuTrigger} from "@react-aria/menu";
|
|
8
|
+
import {useVisuallyHidden as $thkiX$useVisuallyHidden} from "@react-aria/visually-hidden";
|
|
9
|
+
|
|
10
|
+
/*
|
|
11
|
+
* Copyright 2020 Adobe. All rights reserved.
|
|
12
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
13
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
14
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
15
|
+
*
|
|
16
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
17
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
18
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
19
|
+
* governing permissions and limitations under the License.
|
|
20
|
+
*/ /*
|
|
21
|
+
* Copyright 2020 Adobe. All rights reserved.
|
|
22
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
23
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
24
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
25
|
+
*
|
|
26
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
27
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
28
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
29
|
+
* governing permissions and limitations under the License.
|
|
30
|
+
*/
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
function $58aed456727eb0f3$export$e64b2f635402ca43(props, state, ref) {
|
|
38
|
+
let { keyboardDelegate: keyboardDelegate , isDisabled: isDisabled } = props;
|
|
39
|
+
// By default, a KeyboardDelegate is provided which uses the DOM to query layout information (e.g. for page up/page down).
|
|
40
|
+
// When virtualized, the layout object will be passed in as a prop and override this.
|
|
41
|
+
let collator = (0, $thkiX$useCollator)({
|
|
42
|
+
usage: "search",
|
|
43
|
+
sensitivity: "base"
|
|
44
|
+
});
|
|
45
|
+
let delegate = (0, $thkiX$useMemo)(()=>keyboardDelegate || new (0, $thkiX$ListKeyboardDelegate)(state.collection, state.disabledKeys, null, collator), [
|
|
46
|
+
keyboardDelegate,
|
|
47
|
+
state.collection,
|
|
48
|
+
state.disabledKeys,
|
|
49
|
+
collator
|
|
50
|
+
]);
|
|
51
|
+
let { menuTriggerProps: menuTriggerProps , menuProps: menuProps } = (0, $thkiX$useMenuTrigger)({
|
|
52
|
+
isDisabled: isDisabled,
|
|
53
|
+
type: "listbox"
|
|
54
|
+
}, state, ref);
|
|
55
|
+
let onKeyDown = (e)=>{
|
|
56
|
+
switch(e.key){
|
|
57
|
+
case "ArrowLeft":
|
|
58
|
+
{
|
|
59
|
+
// prevent scrolling containers
|
|
60
|
+
e.preventDefault();
|
|
61
|
+
let key = state.selectedKey != null ? delegate.getKeyAbove(state.selectedKey) : delegate.getFirstKey();
|
|
62
|
+
if (key) state.setSelectedKey(key);
|
|
63
|
+
break;
|
|
64
|
+
}
|
|
65
|
+
case "ArrowRight":
|
|
66
|
+
{
|
|
67
|
+
// prevent scrolling containers
|
|
68
|
+
e.preventDefault();
|
|
69
|
+
let key1 = state.selectedKey != null ? delegate.getKeyBelow(state.selectedKey) : delegate.getFirstKey();
|
|
70
|
+
if (key1) state.setSelectedKey(key1);
|
|
71
|
+
break;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
};
|
|
75
|
+
let { typeSelectProps: typeSelectProps } = (0, $thkiX$useTypeSelect)({
|
|
76
|
+
keyboardDelegate: delegate,
|
|
77
|
+
selectionManager: state.selectionManager,
|
|
78
|
+
onTypeSelect (key) {
|
|
79
|
+
state.setSelectedKey(key);
|
|
80
|
+
}
|
|
81
|
+
});
|
|
82
|
+
let { labelProps: labelProps , fieldProps: fieldProps , descriptionProps: descriptionProps , errorMessageProps: errorMessageProps } = (0, $thkiX$useField)({
|
|
83
|
+
...props,
|
|
84
|
+
labelElementType: "span"
|
|
85
|
+
});
|
|
86
|
+
typeSelectProps.onKeyDown = typeSelectProps.onKeyDownCapture;
|
|
87
|
+
delete typeSelectProps.onKeyDownCapture;
|
|
88
|
+
let domProps = (0, $thkiX$filterDOMProps)(props, {
|
|
89
|
+
labelable: true
|
|
90
|
+
});
|
|
91
|
+
let triggerProps = (0, $thkiX$mergeProps)(typeSelectProps, menuTriggerProps, fieldProps);
|
|
92
|
+
let valueId = (0, $thkiX$useId)();
|
|
93
|
+
return {
|
|
94
|
+
labelProps: {
|
|
95
|
+
...labelProps,
|
|
96
|
+
onClick: ()=>{
|
|
97
|
+
if (!props.isDisabled) {
|
|
98
|
+
ref.current.focus();
|
|
99
|
+
// Show the focus ring so the user knows where focus went
|
|
100
|
+
(0, $thkiX$setInteractionModality)("keyboard");
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
},
|
|
104
|
+
triggerProps: (0, $thkiX$mergeProps)(domProps, {
|
|
105
|
+
...triggerProps,
|
|
106
|
+
isDisabled: isDisabled,
|
|
107
|
+
onKeyDown: (0, $thkiX$chain)(triggerProps.onKeyDown, onKeyDown, props.onKeyDown),
|
|
108
|
+
onKeyUp: props.onKeyUp,
|
|
109
|
+
"aria-labelledby": [
|
|
110
|
+
triggerProps["aria-labelledby"],
|
|
111
|
+
triggerProps["aria-label"] && !triggerProps["aria-labelledby"] ? triggerProps.id : null,
|
|
112
|
+
valueId
|
|
113
|
+
].filter(Boolean).join(" "),
|
|
114
|
+
onFocus (e) {
|
|
115
|
+
if (state.isFocused) return;
|
|
116
|
+
if (props.onFocus) props.onFocus(e);
|
|
117
|
+
if (props.onFocusChange) props.onFocusChange(true);
|
|
118
|
+
state.setFocused(true);
|
|
119
|
+
},
|
|
120
|
+
onBlur (e) {
|
|
121
|
+
if (state.isOpen) return;
|
|
122
|
+
if (props.onBlur) props.onBlur(e);
|
|
123
|
+
if (props.onFocusChange) props.onFocusChange(false);
|
|
124
|
+
state.setFocused(false);
|
|
125
|
+
}
|
|
126
|
+
}),
|
|
127
|
+
valueProps: {
|
|
128
|
+
id: valueId
|
|
129
|
+
},
|
|
130
|
+
menuProps: {
|
|
131
|
+
...menuProps,
|
|
132
|
+
autoFocus: state.focusStrategy || true,
|
|
133
|
+
shouldSelectOnPressUp: true,
|
|
134
|
+
shouldFocusOnHover: true,
|
|
135
|
+
disallowEmptySelection: true,
|
|
136
|
+
onBlur: (e)=>{
|
|
137
|
+
if (e.currentTarget.contains(e.relatedTarget)) return;
|
|
138
|
+
if (props.onBlur) props.onBlur(e);
|
|
139
|
+
if (props.onFocusChange) props.onFocusChange(false);
|
|
140
|
+
state.setFocused(false);
|
|
141
|
+
},
|
|
142
|
+
"aria-labelledby": [
|
|
143
|
+
fieldProps["aria-labelledby"],
|
|
144
|
+
triggerProps["aria-label"] && !fieldProps["aria-labelledby"] ? triggerProps.id : null
|
|
145
|
+
].filter(Boolean).join(" ")
|
|
146
|
+
},
|
|
147
|
+
descriptionProps: descriptionProps,
|
|
148
|
+
errorMessageProps: errorMessageProps
|
|
149
|
+
};
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
|
|
153
|
+
/*
|
|
154
|
+
* Copyright 2020 Adobe. All rights reserved.
|
|
155
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
156
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
157
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
158
|
+
*
|
|
159
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
160
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
161
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
162
|
+
* governing permissions and limitations under the License.
|
|
163
|
+
*/
|
|
164
|
+
|
|
165
|
+
|
|
166
|
+
function $bdd25dc72710631f$export$f809e80f58e251d1(props, state, triggerRef) {
|
|
167
|
+
let { autoComplete: autoComplete , name: name , isDisabled: isDisabled } = props;
|
|
168
|
+
let modality = (0, $thkiX$useInteractionModality)();
|
|
169
|
+
let { visuallyHiddenProps: visuallyHiddenProps } = (0, $thkiX$useVisuallyHidden)();
|
|
170
|
+
var _state_selectedKey;
|
|
171
|
+
// In Safari, the <select> cannot have `display: none` or `hidden` for autofill to work.
|
|
172
|
+
// In Firefox, there must be a <label> to identify the <select> whereas other browsers
|
|
173
|
+
// seem to identify it just by surrounding text.
|
|
174
|
+
// The solution is to use <VisuallyHidden> to hide the elements, which clips the elements to a
|
|
175
|
+
// 1px rectangle. In addition, we hide from screen readers with aria-hidden, and make the <select>
|
|
176
|
+
// non tabbable with tabIndex={-1}.
|
|
177
|
+
//
|
|
178
|
+
// In mobile browsers, there are next/previous buttons above the software keyboard for navigating
|
|
179
|
+
// between fields in a form. These only support native form inputs that are tabbable. In order to
|
|
180
|
+
// support those, an additional hidden input is used to marshall focus to the button. It is tabbable
|
|
181
|
+
// except when the button is focused, so that shift tab works properly to go to the actual previous
|
|
182
|
+
// input in the form. Using the <select> for this also works, but Safari on iOS briefly flashes
|
|
183
|
+
// the native menu on focus, so this isn't ideal. A font-size of 16px or greater is required to
|
|
184
|
+
// prevent Safari from zooming in on the input when it is focused.
|
|
185
|
+
//
|
|
186
|
+
// If the current interaction modality is null, then the user hasn't interacted with the page yet.
|
|
187
|
+
// In this case, we set the tabIndex to -1 on the input element so that automated accessibility
|
|
188
|
+
// checkers don't throw false-positives about focusable elements inside an aria-hidden parent.
|
|
189
|
+
return {
|
|
190
|
+
containerProps: {
|
|
191
|
+
...visuallyHiddenProps,
|
|
192
|
+
"aria-hidden": true
|
|
193
|
+
},
|
|
194
|
+
inputProps: {
|
|
195
|
+
type: "text",
|
|
196
|
+
tabIndex: modality == null || state.isFocused || state.isOpen ? -1 : 0,
|
|
197
|
+
style: {
|
|
198
|
+
fontSize: 16
|
|
199
|
+
},
|
|
200
|
+
onFocus: ()=>triggerRef.current.focus(),
|
|
201
|
+
disabled: isDisabled
|
|
202
|
+
},
|
|
203
|
+
selectProps: {
|
|
204
|
+
tabIndex: -1,
|
|
205
|
+
autoComplete: autoComplete,
|
|
206
|
+
disabled: isDisabled,
|
|
207
|
+
name: name,
|
|
208
|
+
size: state.collection.size,
|
|
209
|
+
value: (_state_selectedKey = state.selectedKey) !== null && _state_selectedKey !== void 0 ? _state_selectedKey : "",
|
|
210
|
+
onChange: (e)=>state.setSelectedKey(e.target.value)
|
|
211
|
+
}
|
|
212
|
+
};
|
|
213
|
+
}
|
|
214
|
+
function $bdd25dc72710631f$export$cbd84cdb2e668835(props) {
|
|
215
|
+
let { state: state , triggerRef: triggerRef , label: label , name: name , isDisabled: isDisabled } = props;
|
|
216
|
+
let { containerProps: containerProps , inputProps: inputProps , selectProps: selectProps } = $bdd25dc72710631f$export$f809e80f58e251d1(props, state, triggerRef);
|
|
217
|
+
var _state_selectedKey;
|
|
218
|
+
// If used in a <form>, use a hidden input so the value can be submitted to a server.
|
|
219
|
+
// If the collection isn't too big, use a hidden <select> element for this so that browser
|
|
220
|
+
// autofill will work. Otherwise, use an <input type="hidden">.
|
|
221
|
+
if (state.collection.size <= 300) return /*#__PURE__*/ (0, $thkiX$react).createElement("div", containerProps, /*#__PURE__*/ (0, $thkiX$react).createElement("input", inputProps), /*#__PURE__*/ (0, $thkiX$react).createElement("label", null, label, /*#__PURE__*/ (0, $thkiX$react).createElement("select", selectProps, /*#__PURE__*/ (0, $thkiX$react).createElement("option", null), [
|
|
222
|
+
...state.collection.getKeys()
|
|
223
|
+
].map((key)=>{
|
|
224
|
+
let item = state.collection.getItem(key);
|
|
225
|
+
if (item.type === "item") return /*#__PURE__*/ (0, $thkiX$react).createElement("option", {
|
|
226
|
+
key: item.key,
|
|
227
|
+
value: item.key
|
|
228
|
+
}, item.textValue);
|
|
229
|
+
}))));
|
|
230
|
+
else if (name) return /*#__PURE__*/ (0, $thkiX$react).createElement("input", {
|
|
231
|
+
type: "hidden",
|
|
232
|
+
autoComplete: selectProps.autoComplete,
|
|
233
|
+
name: name,
|
|
234
|
+
disabled: isDisabled,
|
|
235
|
+
value: (_state_selectedKey = state.selectedKey) !== null && _state_selectedKey !== void 0 ? _state_selectedKey : ""
|
|
236
|
+
});
|
|
237
|
+
return null;
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
|
|
241
|
+
|
|
242
|
+
|
|
243
|
+
export {$58aed456727eb0f3$export$e64b2f635402ca43 as useSelect, $bdd25dc72710631f$export$f809e80f58e251d1 as useHiddenSelect, $bdd25dc72710631f$export$cbd84cdb2e668835 as HiddenSelect};
|
|
244
|
+
//# sourceMappingURL=module.js.map
|
package/package.json
CHANGED
|
@@ -1,10 +1,15 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-aria/select",
|
|
3
|
-
"version": "3.8.5-nightly.
|
|
3
|
+
"version": "3.8.5-nightly.3705+93b3c951e",
|
|
4
4
|
"description": "Spectrum UI components in React",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/main.js",
|
|
7
7
|
"module": "dist/module.js",
|
|
8
|
+
"exports": {
|
|
9
|
+
"types": "./dist/types.d.ts",
|
|
10
|
+
"import": "./dist/import.mjs",
|
|
11
|
+
"require": "./dist/main.js"
|
|
12
|
+
},
|
|
8
13
|
"types": "dist/types.d.ts",
|
|
9
14
|
"source": "src/index.ts",
|
|
10
15
|
"files": [
|
|
@@ -17,18 +22,18 @@
|
|
|
17
22
|
"url": "https://github.com/adobe/react-spectrum"
|
|
18
23
|
},
|
|
19
24
|
"dependencies": {
|
|
20
|
-
"@react-aria/i18n": "3.0.0-nightly.
|
|
21
|
-
"@react-aria/interactions": "3.0.0-nightly.
|
|
22
|
-
"@react-aria/label": "3.0.0-nightly.
|
|
23
|
-
"@react-aria/listbox": "3.7.3-nightly.
|
|
24
|
-
"@react-aria/menu": "3.7.2-nightly.
|
|
25
|
-
"@react-aria/selection": "3.0.0-nightly.
|
|
26
|
-
"@react-aria/utils": "3.0.0-nightly.
|
|
27
|
-
"@react-aria/visually-hidden": "3.0.0-nightly.
|
|
28
|
-
"@react-stately/select": "3.3.5-nightly.
|
|
29
|
-
"@react-types/button": "3.7.1-nightly.
|
|
30
|
-
"@react-types/select": "3.6.6-nightly.
|
|
31
|
-
"@react-types/shared": "3.0.0-nightly.
|
|
25
|
+
"@react-aria/i18n": "3.0.0-nightly.2005+93b3c951e",
|
|
26
|
+
"@react-aria/interactions": "3.0.0-nightly.2005+93b3c951e",
|
|
27
|
+
"@react-aria/label": "3.0.0-nightly.2005+93b3c951e",
|
|
28
|
+
"@react-aria/listbox": "3.7.3-nightly.3705+93b3c951e",
|
|
29
|
+
"@react-aria/menu": "3.7.2-nightly.3705+93b3c951e",
|
|
30
|
+
"@react-aria/selection": "3.0.0-nightly.2005+93b3c951e",
|
|
31
|
+
"@react-aria/utils": "3.0.0-nightly.2005+93b3c951e",
|
|
32
|
+
"@react-aria/visually-hidden": "3.0.0-nightly.2005+93b3c951e",
|
|
33
|
+
"@react-stately/select": "3.3.5-nightly.3705+93b3c951e",
|
|
34
|
+
"@react-types/button": "3.7.1-nightly.3705+93b3c951e",
|
|
35
|
+
"@react-types/select": "3.6.6-nightly.3705+93b3c951e",
|
|
36
|
+
"@react-types/shared": "3.0.0-nightly.2005+93b3c951e",
|
|
32
37
|
"@swc/helpers": "^0.4.14"
|
|
33
38
|
},
|
|
34
39
|
"peerDependencies": {
|
|
@@ -38,5 +43,5 @@
|
|
|
38
43
|
"publishConfig": {
|
|
39
44
|
"access": "public"
|
|
40
45
|
},
|
|
41
|
-
"gitHead": "
|
|
46
|
+
"gitHead": "93b3c951eb784b14183f9988f2d188b34de8f42d"
|
|
42
47
|
}
|