@react-aria/combobox 3.9.1-nightly.4623 → 3.9.1
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/useComboBox.main.js +38 -38
- package/dist/useComboBox.mjs +38 -38
- package/dist/useComboBox.module.js +38 -38
- package/package.json +16 -16
package/dist/useComboBox.main.js
CHANGED
|
@@ -46,9 +46,9 @@ $parcel$export(module.exports, "useComboBox", () => $242452271d1e4c0e$export$8c1
|
|
|
46
46
|
function $242452271d1e4c0e$export$8c18d1b4f7232bbf(props, state) {
|
|
47
47
|
let { buttonRef: buttonRef, popoverRef: popoverRef, inputRef: inputRef, listBoxRef: listBoxRef, keyboardDelegate: keyboardDelegate, shouldFocusWrap: // completionMode = 'suggest',
|
|
48
48
|
shouldFocusWrap, isReadOnly: isReadOnly, isDisabled: isDisabled } = props;
|
|
49
|
-
let stringFormatter = (0, $BGXP4$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($8d1e5da058b86bb9$exports))),
|
|
49
|
+
let stringFormatter = (0, $BGXP4$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($8d1e5da058b86bb9$exports))), '@react-aria/combobox');
|
|
50
50
|
let { menuTriggerProps: menuTriggerProps, menuProps: menuProps } = (0, $BGXP4$reactariamenu.useMenuTrigger)({
|
|
51
|
-
type:
|
|
51
|
+
type: 'listbox',
|
|
52
52
|
isDisabled: isDisabled || isReadOnly
|
|
53
53
|
}, state, buttonRef);
|
|
54
54
|
// Set listbox id so it can be used when calling getItemId later
|
|
@@ -78,13 +78,13 @@ function $242452271d1e4c0e$export$8c18d1b4f7232bbf(props, state) {
|
|
|
78
78
|
// For textfield specific keydown operations
|
|
79
79
|
let onKeyDown = (e)=>{
|
|
80
80
|
switch(e.key){
|
|
81
|
-
case
|
|
82
|
-
case
|
|
81
|
+
case 'Enter':
|
|
82
|
+
case 'Tab':
|
|
83
83
|
// Prevent form submission if menu is open since we may be selecting a option
|
|
84
|
-
if (state.isOpen && e.key ===
|
|
84
|
+
if (state.isOpen && e.key === 'Enter') e.preventDefault();
|
|
85
85
|
// If the focused item is a link, trigger opening it. Items that are links are not selectable.
|
|
86
86
|
if (state.isOpen && state.selectionManager.focusedKey != null && state.selectionManager.isLink(state.selectionManager.focusedKey)) {
|
|
87
|
-
if (e.key ===
|
|
87
|
+
if (e.key === 'Enter') {
|
|
88
88
|
let item = listBoxRef.current.querySelector(`[data-key="${CSS.escape(state.selectionManager.focusedKey.toString())}"]`);
|
|
89
89
|
if (item instanceof HTMLAnchorElement) {
|
|
90
90
|
let collectionItem = state.collection.getItem(state.selectionManager.focusedKey);
|
|
@@ -94,18 +94,18 @@ function $242452271d1e4c0e$export$8c18d1b4f7232bbf(props, state) {
|
|
|
94
94
|
state.close();
|
|
95
95
|
} else state.commit();
|
|
96
96
|
break;
|
|
97
|
-
case
|
|
98
|
-
if (state.selectedKey !== null || state.inputValue ===
|
|
97
|
+
case 'Escape':
|
|
98
|
+
if (state.selectedKey !== null || state.inputValue === '' || props.allowsCustomValue) e.continuePropagation();
|
|
99
99
|
state.revert();
|
|
100
100
|
break;
|
|
101
|
-
case
|
|
102
|
-
state.open(
|
|
101
|
+
case 'ArrowDown':
|
|
102
|
+
state.open('first', 'manual');
|
|
103
103
|
break;
|
|
104
|
-
case
|
|
105
|
-
state.open(
|
|
104
|
+
case 'ArrowUp':
|
|
105
|
+
state.open('last', 'manual');
|
|
106
106
|
break;
|
|
107
|
-
case
|
|
108
|
-
case
|
|
107
|
+
case 'ArrowLeft':
|
|
108
|
+
case 'ArrowRight':
|
|
109
109
|
state.selectionManager.setFocusedKey(null);
|
|
110
110
|
break;
|
|
111
111
|
}
|
|
@@ -132,33 +132,33 @@ function $242452271d1e4c0e$export$8c18d1b4f7232bbf(props, state) {
|
|
|
132
132
|
onBlur: onBlur,
|
|
133
133
|
value: state.inputValue,
|
|
134
134
|
onFocus: onFocus,
|
|
135
|
-
autoComplete:
|
|
135
|
+
autoComplete: 'off',
|
|
136
136
|
validate: undefined,
|
|
137
137
|
[(0, $BGXP4$reactstatelyform.privateValidationStateProp)]: state
|
|
138
138
|
}, inputRef);
|
|
139
139
|
// Press handlers for the ComboBox button
|
|
140
140
|
let onPress = (e)=>{
|
|
141
|
-
if (e.pointerType ===
|
|
141
|
+
if (e.pointerType === 'touch') {
|
|
142
142
|
// Focus the input field in case it isn't focused yet
|
|
143
143
|
inputRef.current.focus();
|
|
144
|
-
state.toggle(null,
|
|
144
|
+
state.toggle(null, 'manual');
|
|
145
145
|
}
|
|
146
146
|
};
|
|
147
147
|
let onPressStart = (e)=>{
|
|
148
|
-
if (e.pointerType !==
|
|
148
|
+
if (e.pointerType !== 'touch') {
|
|
149
149
|
inputRef.current.focus();
|
|
150
|
-
state.toggle(e.pointerType ===
|
|
150
|
+
state.toggle(e.pointerType === 'keyboard' || e.pointerType === 'virtual' ? 'first' : null, 'manual');
|
|
151
151
|
}
|
|
152
152
|
};
|
|
153
153
|
let triggerLabelProps = (0, $BGXP4$reactariautils.useLabels)({
|
|
154
154
|
id: menuTriggerProps.id,
|
|
155
|
-
|
|
156
|
-
|
|
155
|
+
'aria-label': stringFormatter.format('buttonLabel'),
|
|
156
|
+
'aria-labelledby': props['aria-labelledby'] || labelProps.id
|
|
157
157
|
});
|
|
158
158
|
let listBoxProps = (0, $BGXP4$reactariautils.useLabels)({
|
|
159
159
|
id: menuProps.id,
|
|
160
|
-
|
|
161
|
-
|
|
160
|
+
'aria-label': stringFormatter.format('listboxLabel'),
|
|
161
|
+
'aria-labelledby': props['aria-labelledby'] || labelProps.id
|
|
162
162
|
});
|
|
163
163
|
// If a touch happens on direct center of ComboBox input, might be virtual click from iPad so open ComboBox menu
|
|
164
164
|
let lastEventTime = (0, $BGXP4$react.useRef)(0);
|
|
@@ -177,7 +177,7 @@ function $242452271d1e4c0e$export$8c18d1b4f7232bbf(props, state) {
|
|
|
177
177
|
if (touch.clientX === centerX && touch.clientY === centerY) {
|
|
178
178
|
e.preventDefault();
|
|
179
179
|
inputRef.current.focus();
|
|
180
|
-
state.toggle(null,
|
|
180
|
+
state.toggle(null, 'manual');
|
|
181
181
|
lastEventTime.current = e.timeStamp;
|
|
182
182
|
}
|
|
183
183
|
};
|
|
@@ -195,14 +195,14 @@ function $242452271d1e4c0e$export$8c18d1b4f7232bbf(props, state) {
|
|
|
195
195
|
if ((0, $BGXP4$reactariautils.isAppleDevice)() && focusedItem != null && itemKey !== lastItem.current) {
|
|
196
196
|
let isSelected = state.selectionManager.isSelected(itemKey);
|
|
197
197
|
let section = sectionKey != null ? state.collection.getItem(sectionKey) : null;
|
|
198
|
-
let sectionTitle = (section === null || section === void 0 ? void 0 : section[
|
|
199
|
-
let announcement = stringFormatter.format(
|
|
198
|
+
let sectionTitle = (section === null || section === void 0 ? void 0 : section['aria-label']) || (typeof (section === null || section === void 0 ? void 0 : section.rendered) === 'string' ? section.rendered : '') || '';
|
|
199
|
+
let announcement = stringFormatter.format('focusAnnouncement', {
|
|
200
200
|
isGroupChange: section && sectionKey !== lastSection.current,
|
|
201
201
|
groupTitle: sectionTitle,
|
|
202
202
|
groupCount: section ? [
|
|
203
203
|
...(0, $BGXP4$reactstatelycollections.getChildNodes)(section, state.collection)
|
|
204
204
|
].length : 0,
|
|
205
|
-
optionText: focusedItem[
|
|
205
|
+
optionText: focusedItem['aria-label'] || focusedItem.textValue || '',
|
|
206
206
|
isSelected: isSelected
|
|
207
207
|
});
|
|
208
208
|
(0, $BGXP4$reactarialiveannouncer.announce)(announcement);
|
|
@@ -220,7 +220,7 @@ function $242452271d1e4c0e$export$8c18d1b4f7232bbf(props, state) {
|
|
|
220
220
|
// The exception is VoiceOver since this isn't included in the message above.
|
|
221
221
|
let didOpenWithoutFocusedItem = state.isOpen !== lastOpen.current && (state.selectionManager.focusedKey == null || (0, $BGXP4$reactariautils.isAppleDevice)());
|
|
222
222
|
if (state.isOpen && (didOpenWithoutFocusedItem || optionCount !== lastSize.current)) {
|
|
223
|
-
let announcement = stringFormatter.format(
|
|
223
|
+
let announcement = stringFormatter.format('countAnnouncement', {
|
|
224
224
|
optionCount: optionCount
|
|
225
225
|
});
|
|
226
226
|
(0, $BGXP4$reactarialiveannouncer.announce)(announcement);
|
|
@@ -232,8 +232,8 @@ function $242452271d1e4c0e$export$8c18d1b4f7232bbf(props, state) {
|
|
|
232
232
|
let lastSelectedKey = (0, $BGXP4$react.useRef)(state.selectedKey);
|
|
233
233
|
(0, $BGXP4$react.useEffect)(()=>{
|
|
234
234
|
if ((0, $BGXP4$reactariautils.isAppleDevice)() && state.isFocused && state.selectedItem && state.selectedKey !== lastSelectedKey.current) {
|
|
235
|
-
let optionText = state.selectedItem[
|
|
236
|
-
let announcement = stringFormatter.format(
|
|
235
|
+
let optionText = state.selectedItem['aria-label'] || state.selectedItem.textValue || '';
|
|
236
|
+
let announcement = stringFormatter.format('selectedAnnouncement', {
|
|
237
237
|
optionText: optionText
|
|
238
238
|
});
|
|
239
239
|
(0, $BGXP4$reactarialiveannouncer.announce)(announcement);
|
|
@@ -261,24 +261,24 @@ function $242452271d1e4c0e$export$8c18d1b4f7232bbf(props, state) {
|
|
|
261
261
|
isDisabled: isDisabled || isReadOnly
|
|
262
262
|
},
|
|
263
263
|
inputProps: (0, $BGXP4$reactariautils.mergeProps)(inputProps, {
|
|
264
|
-
role:
|
|
265
|
-
|
|
266
|
-
|
|
264
|
+
role: 'combobox',
|
|
265
|
+
'aria-expanded': menuTriggerProps['aria-expanded'],
|
|
266
|
+
'aria-controls': state.isOpen ? menuProps.id : undefined,
|
|
267
267
|
// TODO: readd proper logic for completionMode = complete (aria-autocomplete: both)
|
|
268
|
-
|
|
269
|
-
|
|
268
|
+
'aria-autocomplete': 'list',
|
|
269
|
+
'aria-activedescendant': focusedItem ? (0, $BGXP4$reactarialistbox.getItemId)(state, focusedItem.key) : undefined,
|
|
270
270
|
onTouchEnd: onTouchEnd,
|
|
271
271
|
// This disable's iOS's autocorrect suggestions, since the combo box provides its own suggestions.
|
|
272
|
-
autoCorrect:
|
|
272
|
+
autoCorrect: 'off',
|
|
273
273
|
// This disable's the macOS Safari spell check auto corrections.
|
|
274
|
-
spellCheck:
|
|
274
|
+
spellCheck: 'false'
|
|
275
275
|
}),
|
|
276
276
|
listBoxProps: (0, $BGXP4$reactariautils.mergeProps)(menuProps, listBoxProps, {
|
|
277
277
|
autoFocus: state.focusStrategy,
|
|
278
278
|
shouldUseVirtualFocus: true,
|
|
279
279
|
shouldSelectOnPressUp: true,
|
|
280
280
|
shouldFocusOnHover: true,
|
|
281
|
-
linkBehavior:
|
|
281
|
+
linkBehavior: 'selection'
|
|
282
282
|
}),
|
|
283
283
|
descriptionProps: descriptionProps,
|
|
284
284
|
errorMessageProps: errorMessageProps,
|
package/dist/useComboBox.mjs
CHANGED
|
@@ -40,9 +40,9 @@ function $parcel$interopDefault(a) {
|
|
|
40
40
|
function $c350ade66beef0af$export$8c18d1b4f7232bbf(props, state) {
|
|
41
41
|
let { buttonRef: buttonRef, popoverRef: popoverRef, inputRef: inputRef, listBoxRef: listBoxRef, keyboardDelegate: keyboardDelegate, shouldFocusWrap: // completionMode = 'suggest',
|
|
42
42
|
shouldFocusWrap, isReadOnly: isReadOnly, isDisabled: isDisabled } = props;
|
|
43
|
-
let stringFormatter = (0, $dShfP$useLocalizedStringFormatter)((0, ($parcel$interopDefault($dShfP$intlStringsmodulejs))),
|
|
43
|
+
let stringFormatter = (0, $dShfP$useLocalizedStringFormatter)((0, ($parcel$interopDefault($dShfP$intlStringsmodulejs))), '@react-aria/combobox');
|
|
44
44
|
let { menuTriggerProps: menuTriggerProps, menuProps: menuProps } = (0, $dShfP$useMenuTrigger)({
|
|
45
|
-
type:
|
|
45
|
+
type: 'listbox',
|
|
46
46
|
isDisabled: isDisabled || isReadOnly
|
|
47
47
|
}, state, buttonRef);
|
|
48
48
|
// Set listbox id so it can be used when calling getItemId later
|
|
@@ -72,13 +72,13 @@ function $c350ade66beef0af$export$8c18d1b4f7232bbf(props, state) {
|
|
|
72
72
|
// For textfield specific keydown operations
|
|
73
73
|
let onKeyDown = (e)=>{
|
|
74
74
|
switch(e.key){
|
|
75
|
-
case
|
|
76
|
-
case
|
|
75
|
+
case 'Enter':
|
|
76
|
+
case 'Tab':
|
|
77
77
|
// Prevent form submission if menu is open since we may be selecting a option
|
|
78
|
-
if (state.isOpen && e.key ===
|
|
78
|
+
if (state.isOpen && e.key === 'Enter') e.preventDefault();
|
|
79
79
|
// If the focused item is a link, trigger opening it. Items that are links are not selectable.
|
|
80
80
|
if (state.isOpen && state.selectionManager.focusedKey != null && state.selectionManager.isLink(state.selectionManager.focusedKey)) {
|
|
81
|
-
if (e.key ===
|
|
81
|
+
if (e.key === 'Enter') {
|
|
82
82
|
let item = listBoxRef.current.querySelector(`[data-key="${CSS.escape(state.selectionManager.focusedKey.toString())}"]`);
|
|
83
83
|
if (item instanceof HTMLAnchorElement) {
|
|
84
84
|
let collectionItem = state.collection.getItem(state.selectionManager.focusedKey);
|
|
@@ -88,18 +88,18 @@ function $c350ade66beef0af$export$8c18d1b4f7232bbf(props, state) {
|
|
|
88
88
|
state.close();
|
|
89
89
|
} else state.commit();
|
|
90
90
|
break;
|
|
91
|
-
case
|
|
92
|
-
if (state.selectedKey !== null || state.inputValue ===
|
|
91
|
+
case 'Escape':
|
|
92
|
+
if (state.selectedKey !== null || state.inputValue === '' || props.allowsCustomValue) e.continuePropagation();
|
|
93
93
|
state.revert();
|
|
94
94
|
break;
|
|
95
|
-
case
|
|
96
|
-
state.open(
|
|
95
|
+
case 'ArrowDown':
|
|
96
|
+
state.open('first', 'manual');
|
|
97
97
|
break;
|
|
98
|
-
case
|
|
99
|
-
state.open(
|
|
98
|
+
case 'ArrowUp':
|
|
99
|
+
state.open('last', 'manual');
|
|
100
100
|
break;
|
|
101
|
-
case
|
|
102
|
-
case
|
|
101
|
+
case 'ArrowLeft':
|
|
102
|
+
case 'ArrowRight':
|
|
103
103
|
state.selectionManager.setFocusedKey(null);
|
|
104
104
|
break;
|
|
105
105
|
}
|
|
@@ -126,33 +126,33 @@ function $c350ade66beef0af$export$8c18d1b4f7232bbf(props, state) {
|
|
|
126
126
|
onBlur: onBlur,
|
|
127
127
|
value: state.inputValue,
|
|
128
128
|
onFocus: onFocus,
|
|
129
|
-
autoComplete:
|
|
129
|
+
autoComplete: 'off',
|
|
130
130
|
validate: undefined,
|
|
131
131
|
[(0, $dShfP$privateValidationStateProp)]: state
|
|
132
132
|
}, inputRef);
|
|
133
133
|
// Press handlers for the ComboBox button
|
|
134
134
|
let onPress = (e)=>{
|
|
135
|
-
if (e.pointerType ===
|
|
135
|
+
if (e.pointerType === 'touch') {
|
|
136
136
|
// Focus the input field in case it isn't focused yet
|
|
137
137
|
inputRef.current.focus();
|
|
138
|
-
state.toggle(null,
|
|
138
|
+
state.toggle(null, 'manual');
|
|
139
139
|
}
|
|
140
140
|
};
|
|
141
141
|
let onPressStart = (e)=>{
|
|
142
|
-
if (e.pointerType !==
|
|
142
|
+
if (e.pointerType !== 'touch') {
|
|
143
143
|
inputRef.current.focus();
|
|
144
|
-
state.toggle(e.pointerType ===
|
|
144
|
+
state.toggle(e.pointerType === 'keyboard' || e.pointerType === 'virtual' ? 'first' : null, 'manual');
|
|
145
145
|
}
|
|
146
146
|
};
|
|
147
147
|
let triggerLabelProps = (0, $dShfP$useLabels)({
|
|
148
148
|
id: menuTriggerProps.id,
|
|
149
|
-
|
|
150
|
-
|
|
149
|
+
'aria-label': stringFormatter.format('buttonLabel'),
|
|
150
|
+
'aria-labelledby': props['aria-labelledby'] || labelProps.id
|
|
151
151
|
});
|
|
152
152
|
let listBoxProps = (0, $dShfP$useLabels)({
|
|
153
153
|
id: menuProps.id,
|
|
154
|
-
|
|
155
|
-
|
|
154
|
+
'aria-label': stringFormatter.format('listboxLabel'),
|
|
155
|
+
'aria-labelledby': props['aria-labelledby'] || labelProps.id
|
|
156
156
|
});
|
|
157
157
|
// If a touch happens on direct center of ComboBox input, might be virtual click from iPad so open ComboBox menu
|
|
158
158
|
let lastEventTime = (0, $dShfP$useRef)(0);
|
|
@@ -171,7 +171,7 @@ function $c350ade66beef0af$export$8c18d1b4f7232bbf(props, state) {
|
|
|
171
171
|
if (touch.clientX === centerX && touch.clientY === centerY) {
|
|
172
172
|
e.preventDefault();
|
|
173
173
|
inputRef.current.focus();
|
|
174
|
-
state.toggle(null,
|
|
174
|
+
state.toggle(null, 'manual');
|
|
175
175
|
lastEventTime.current = e.timeStamp;
|
|
176
176
|
}
|
|
177
177
|
};
|
|
@@ -189,14 +189,14 @@ function $c350ade66beef0af$export$8c18d1b4f7232bbf(props, state) {
|
|
|
189
189
|
if ((0, $dShfP$isAppleDevice)() && focusedItem != null && itemKey !== lastItem.current) {
|
|
190
190
|
let isSelected = state.selectionManager.isSelected(itemKey);
|
|
191
191
|
let section = sectionKey != null ? state.collection.getItem(sectionKey) : null;
|
|
192
|
-
let sectionTitle = (section === null || section === void 0 ? void 0 : section[
|
|
193
|
-
let announcement = stringFormatter.format(
|
|
192
|
+
let sectionTitle = (section === null || section === void 0 ? void 0 : section['aria-label']) || (typeof (section === null || section === void 0 ? void 0 : section.rendered) === 'string' ? section.rendered : '') || '';
|
|
193
|
+
let announcement = stringFormatter.format('focusAnnouncement', {
|
|
194
194
|
isGroupChange: section && sectionKey !== lastSection.current,
|
|
195
195
|
groupTitle: sectionTitle,
|
|
196
196
|
groupCount: section ? [
|
|
197
197
|
...(0, $dShfP$getChildNodes)(section, state.collection)
|
|
198
198
|
].length : 0,
|
|
199
|
-
optionText: focusedItem[
|
|
199
|
+
optionText: focusedItem['aria-label'] || focusedItem.textValue || '',
|
|
200
200
|
isSelected: isSelected
|
|
201
201
|
});
|
|
202
202
|
(0, $dShfP$announce)(announcement);
|
|
@@ -214,7 +214,7 @@ function $c350ade66beef0af$export$8c18d1b4f7232bbf(props, state) {
|
|
|
214
214
|
// The exception is VoiceOver since this isn't included in the message above.
|
|
215
215
|
let didOpenWithoutFocusedItem = state.isOpen !== lastOpen.current && (state.selectionManager.focusedKey == null || (0, $dShfP$isAppleDevice)());
|
|
216
216
|
if (state.isOpen && (didOpenWithoutFocusedItem || optionCount !== lastSize.current)) {
|
|
217
|
-
let announcement = stringFormatter.format(
|
|
217
|
+
let announcement = stringFormatter.format('countAnnouncement', {
|
|
218
218
|
optionCount: optionCount
|
|
219
219
|
});
|
|
220
220
|
(0, $dShfP$announce)(announcement);
|
|
@@ -226,8 +226,8 @@ function $c350ade66beef0af$export$8c18d1b4f7232bbf(props, state) {
|
|
|
226
226
|
let lastSelectedKey = (0, $dShfP$useRef)(state.selectedKey);
|
|
227
227
|
(0, $dShfP$useEffect)(()=>{
|
|
228
228
|
if ((0, $dShfP$isAppleDevice)() && state.isFocused && state.selectedItem && state.selectedKey !== lastSelectedKey.current) {
|
|
229
|
-
let optionText = state.selectedItem[
|
|
230
|
-
let announcement = stringFormatter.format(
|
|
229
|
+
let optionText = state.selectedItem['aria-label'] || state.selectedItem.textValue || '';
|
|
230
|
+
let announcement = stringFormatter.format('selectedAnnouncement', {
|
|
231
231
|
optionText: optionText
|
|
232
232
|
});
|
|
233
233
|
(0, $dShfP$announce)(announcement);
|
|
@@ -255,24 +255,24 @@ function $c350ade66beef0af$export$8c18d1b4f7232bbf(props, state) {
|
|
|
255
255
|
isDisabled: isDisabled || isReadOnly
|
|
256
256
|
},
|
|
257
257
|
inputProps: (0, $dShfP$mergeProps)(inputProps, {
|
|
258
|
-
role:
|
|
259
|
-
|
|
260
|
-
|
|
258
|
+
role: 'combobox',
|
|
259
|
+
'aria-expanded': menuTriggerProps['aria-expanded'],
|
|
260
|
+
'aria-controls': state.isOpen ? menuProps.id : undefined,
|
|
261
261
|
// TODO: readd proper logic for completionMode = complete (aria-autocomplete: both)
|
|
262
|
-
|
|
263
|
-
|
|
262
|
+
'aria-autocomplete': 'list',
|
|
263
|
+
'aria-activedescendant': focusedItem ? (0, $dShfP$getItemId)(state, focusedItem.key) : undefined,
|
|
264
264
|
onTouchEnd: onTouchEnd,
|
|
265
265
|
// This disable's iOS's autocorrect suggestions, since the combo box provides its own suggestions.
|
|
266
|
-
autoCorrect:
|
|
266
|
+
autoCorrect: 'off',
|
|
267
267
|
// This disable's the macOS Safari spell check auto corrections.
|
|
268
|
-
spellCheck:
|
|
268
|
+
spellCheck: 'false'
|
|
269
269
|
}),
|
|
270
270
|
listBoxProps: (0, $dShfP$mergeProps)(menuProps, listBoxProps, {
|
|
271
271
|
autoFocus: state.focusStrategy,
|
|
272
272
|
shouldUseVirtualFocus: true,
|
|
273
273
|
shouldSelectOnPressUp: true,
|
|
274
274
|
shouldFocusOnHover: true,
|
|
275
|
-
linkBehavior:
|
|
275
|
+
linkBehavior: 'selection'
|
|
276
276
|
}),
|
|
277
277
|
descriptionProps: descriptionProps,
|
|
278
278
|
errorMessageProps: errorMessageProps,
|
|
@@ -40,9 +40,9 @@ function $parcel$interopDefault(a) {
|
|
|
40
40
|
function $c350ade66beef0af$export$8c18d1b4f7232bbf(props, state) {
|
|
41
41
|
let { buttonRef: buttonRef, popoverRef: popoverRef, inputRef: inputRef, listBoxRef: listBoxRef, keyboardDelegate: keyboardDelegate, shouldFocusWrap: // completionMode = 'suggest',
|
|
42
42
|
shouldFocusWrap, isReadOnly: isReadOnly, isDisabled: isDisabled } = props;
|
|
43
|
-
let stringFormatter = (0, $dShfP$useLocalizedStringFormatter)((0, ($parcel$interopDefault($dShfP$intlStringsmodulejs))),
|
|
43
|
+
let stringFormatter = (0, $dShfP$useLocalizedStringFormatter)((0, ($parcel$interopDefault($dShfP$intlStringsmodulejs))), '@react-aria/combobox');
|
|
44
44
|
let { menuTriggerProps: menuTriggerProps, menuProps: menuProps } = (0, $dShfP$useMenuTrigger)({
|
|
45
|
-
type:
|
|
45
|
+
type: 'listbox',
|
|
46
46
|
isDisabled: isDisabled || isReadOnly
|
|
47
47
|
}, state, buttonRef);
|
|
48
48
|
// Set listbox id so it can be used when calling getItemId later
|
|
@@ -72,13 +72,13 @@ function $c350ade66beef0af$export$8c18d1b4f7232bbf(props, state) {
|
|
|
72
72
|
// For textfield specific keydown operations
|
|
73
73
|
let onKeyDown = (e)=>{
|
|
74
74
|
switch(e.key){
|
|
75
|
-
case
|
|
76
|
-
case
|
|
75
|
+
case 'Enter':
|
|
76
|
+
case 'Tab':
|
|
77
77
|
// Prevent form submission if menu is open since we may be selecting a option
|
|
78
|
-
if (state.isOpen && e.key ===
|
|
78
|
+
if (state.isOpen && e.key === 'Enter') e.preventDefault();
|
|
79
79
|
// If the focused item is a link, trigger opening it. Items that are links are not selectable.
|
|
80
80
|
if (state.isOpen && state.selectionManager.focusedKey != null && state.selectionManager.isLink(state.selectionManager.focusedKey)) {
|
|
81
|
-
if (e.key ===
|
|
81
|
+
if (e.key === 'Enter') {
|
|
82
82
|
let item = listBoxRef.current.querySelector(`[data-key="${CSS.escape(state.selectionManager.focusedKey.toString())}"]`);
|
|
83
83
|
if (item instanceof HTMLAnchorElement) {
|
|
84
84
|
let collectionItem = state.collection.getItem(state.selectionManager.focusedKey);
|
|
@@ -88,18 +88,18 @@ function $c350ade66beef0af$export$8c18d1b4f7232bbf(props, state) {
|
|
|
88
88
|
state.close();
|
|
89
89
|
} else state.commit();
|
|
90
90
|
break;
|
|
91
|
-
case
|
|
92
|
-
if (state.selectedKey !== null || state.inputValue ===
|
|
91
|
+
case 'Escape':
|
|
92
|
+
if (state.selectedKey !== null || state.inputValue === '' || props.allowsCustomValue) e.continuePropagation();
|
|
93
93
|
state.revert();
|
|
94
94
|
break;
|
|
95
|
-
case
|
|
96
|
-
state.open(
|
|
95
|
+
case 'ArrowDown':
|
|
96
|
+
state.open('first', 'manual');
|
|
97
97
|
break;
|
|
98
|
-
case
|
|
99
|
-
state.open(
|
|
98
|
+
case 'ArrowUp':
|
|
99
|
+
state.open('last', 'manual');
|
|
100
100
|
break;
|
|
101
|
-
case
|
|
102
|
-
case
|
|
101
|
+
case 'ArrowLeft':
|
|
102
|
+
case 'ArrowRight':
|
|
103
103
|
state.selectionManager.setFocusedKey(null);
|
|
104
104
|
break;
|
|
105
105
|
}
|
|
@@ -126,33 +126,33 @@ function $c350ade66beef0af$export$8c18d1b4f7232bbf(props, state) {
|
|
|
126
126
|
onBlur: onBlur,
|
|
127
127
|
value: state.inputValue,
|
|
128
128
|
onFocus: onFocus,
|
|
129
|
-
autoComplete:
|
|
129
|
+
autoComplete: 'off',
|
|
130
130
|
validate: undefined,
|
|
131
131
|
[(0, $dShfP$privateValidationStateProp)]: state
|
|
132
132
|
}, inputRef);
|
|
133
133
|
// Press handlers for the ComboBox button
|
|
134
134
|
let onPress = (e)=>{
|
|
135
|
-
if (e.pointerType ===
|
|
135
|
+
if (e.pointerType === 'touch') {
|
|
136
136
|
// Focus the input field in case it isn't focused yet
|
|
137
137
|
inputRef.current.focus();
|
|
138
|
-
state.toggle(null,
|
|
138
|
+
state.toggle(null, 'manual');
|
|
139
139
|
}
|
|
140
140
|
};
|
|
141
141
|
let onPressStart = (e)=>{
|
|
142
|
-
if (e.pointerType !==
|
|
142
|
+
if (e.pointerType !== 'touch') {
|
|
143
143
|
inputRef.current.focus();
|
|
144
|
-
state.toggle(e.pointerType ===
|
|
144
|
+
state.toggle(e.pointerType === 'keyboard' || e.pointerType === 'virtual' ? 'first' : null, 'manual');
|
|
145
145
|
}
|
|
146
146
|
};
|
|
147
147
|
let triggerLabelProps = (0, $dShfP$useLabels)({
|
|
148
148
|
id: menuTriggerProps.id,
|
|
149
|
-
|
|
150
|
-
|
|
149
|
+
'aria-label': stringFormatter.format('buttonLabel'),
|
|
150
|
+
'aria-labelledby': props['aria-labelledby'] || labelProps.id
|
|
151
151
|
});
|
|
152
152
|
let listBoxProps = (0, $dShfP$useLabels)({
|
|
153
153
|
id: menuProps.id,
|
|
154
|
-
|
|
155
|
-
|
|
154
|
+
'aria-label': stringFormatter.format('listboxLabel'),
|
|
155
|
+
'aria-labelledby': props['aria-labelledby'] || labelProps.id
|
|
156
156
|
});
|
|
157
157
|
// If a touch happens on direct center of ComboBox input, might be virtual click from iPad so open ComboBox menu
|
|
158
158
|
let lastEventTime = (0, $dShfP$useRef)(0);
|
|
@@ -171,7 +171,7 @@ function $c350ade66beef0af$export$8c18d1b4f7232bbf(props, state) {
|
|
|
171
171
|
if (touch.clientX === centerX && touch.clientY === centerY) {
|
|
172
172
|
e.preventDefault();
|
|
173
173
|
inputRef.current.focus();
|
|
174
|
-
state.toggle(null,
|
|
174
|
+
state.toggle(null, 'manual');
|
|
175
175
|
lastEventTime.current = e.timeStamp;
|
|
176
176
|
}
|
|
177
177
|
};
|
|
@@ -189,14 +189,14 @@ function $c350ade66beef0af$export$8c18d1b4f7232bbf(props, state) {
|
|
|
189
189
|
if ((0, $dShfP$isAppleDevice)() && focusedItem != null && itemKey !== lastItem.current) {
|
|
190
190
|
let isSelected = state.selectionManager.isSelected(itemKey);
|
|
191
191
|
let section = sectionKey != null ? state.collection.getItem(sectionKey) : null;
|
|
192
|
-
let sectionTitle = (section === null || section === void 0 ? void 0 : section[
|
|
193
|
-
let announcement = stringFormatter.format(
|
|
192
|
+
let sectionTitle = (section === null || section === void 0 ? void 0 : section['aria-label']) || (typeof (section === null || section === void 0 ? void 0 : section.rendered) === 'string' ? section.rendered : '') || '';
|
|
193
|
+
let announcement = stringFormatter.format('focusAnnouncement', {
|
|
194
194
|
isGroupChange: section && sectionKey !== lastSection.current,
|
|
195
195
|
groupTitle: sectionTitle,
|
|
196
196
|
groupCount: section ? [
|
|
197
197
|
...(0, $dShfP$getChildNodes)(section, state.collection)
|
|
198
198
|
].length : 0,
|
|
199
|
-
optionText: focusedItem[
|
|
199
|
+
optionText: focusedItem['aria-label'] || focusedItem.textValue || '',
|
|
200
200
|
isSelected: isSelected
|
|
201
201
|
});
|
|
202
202
|
(0, $dShfP$announce)(announcement);
|
|
@@ -214,7 +214,7 @@ function $c350ade66beef0af$export$8c18d1b4f7232bbf(props, state) {
|
|
|
214
214
|
// The exception is VoiceOver since this isn't included in the message above.
|
|
215
215
|
let didOpenWithoutFocusedItem = state.isOpen !== lastOpen.current && (state.selectionManager.focusedKey == null || (0, $dShfP$isAppleDevice)());
|
|
216
216
|
if (state.isOpen && (didOpenWithoutFocusedItem || optionCount !== lastSize.current)) {
|
|
217
|
-
let announcement = stringFormatter.format(
|
|
217
|
+
let announcement = stringFormatter.format('countAnnouncement', {
|
|
218
218
|
optionCount: optionCount
|
|
219
219
|
});
|
|
220
220
|
(0, $dShfP$announce)(announcement);
|
|
@@ -226,8 +226,8 @@ function $c350ade66beef0af$export$8c18d1b4f7232bbf(props, state) {
|
|
|
226
226
|
let lastSelectedKey = (0, $dShfP$useRef)(state.selectedKey);
|
|
227
227
|
(0, $dShfP$useEffect)(()=>{
|
|
228
228
|
if ((0, $dShfP$isAppleDevice)() && state.isFocused && state.selectedItem && state.selectedKey !== lastSelectedKey.current) {
|
|
229
|
-
let optionText = state.selectedItem[
|
|
230
|
-
let announcement = stringFormatter.format(
|
|
229
|
+
let optionText = state.selectedItem['aria-label'] || state.selectedItem.textValue || '';
|
|
230
|
+
let announcement = stringFormatter.format('selectedAnnouncement', {
|
|
231
231
|
optionText: optionText
|
|
232
232
|
});
|
|
233
233
|
(0, $dShfP$announce)(announcement);
|
|
@@ -255,24 +255,24 @@ function $c350ade66beef0af$export$8c18d1b4f7232bbf(props, state) {
|
|
|
255
255
|
isDisabled: isDisabled || isReadOnly
|
|
256
256
|
},
|
|
257
257
|
inputProps: (0, $dShfP$mergeProps)(inputProps, {
|
|
258
|
-
role:
|
|
259
|
-
|
|
260
|
-
|
|
258
|
+
role: 'combobox',
|
|
259
|
+
'aria-expanded': menuTriggerProps['aria-expanded'],
|
|
260
|
+
'aria-controls': state.isOpen ? menuProps.id : undefined,
|
|
261
261
|
// TODO: readd proper logic for completionMode = complete (aria-autocomplete: both)
|
|
262
|
-
|
|
263
|
-
|
|
262
|
+
'aria-autocomplete': 'list',
|
|
263
|
+
'aria-activedescendant': focusedItem ? (0, $dShfP$getItemId)(state, focusedItem.key) : undefined,
|
|
264
264
|
onTouchEnd: onTouchEnd,
|
|
265
265
|
// This disable's iOS's autocorrect suggestions, since the combo box provides its own suggestions.
|
|
266
|
-
autoCorrect:
|
|
266
|
+
autoCorrect: 'off',
|
|
267
267
|
// This disable's the macOS Safari spell check auto corrections.
|
|
268
|
-
spellCheck:
|
|
268
|
+
spellCheck: 'false'
|
|
269
269
|
}),
|
|
270
270
|
listBoxProps: (0, $dShfP$mergeProps)(menuProps, listBoxProps, {
|
|
271
271
|
autoFocus: state.focusStrategy,
|
|
272
272
|
shouldUseVirtualFocus: true,
|
|
273
273
|
shouldSelectOnPressUp: true,
|
|
274
274
|
shouldFocusOnHover: true,
|
|
275
|
-
linkBehavior:
|
|
275
|
+
linkBehavior: 'selection'
|
|
276
276
|
}),
|
|
277
277
|
descriptionProps: descriptionProps,
|
|
278
278
|
errorMessageProps: errorMessageProps,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-aria/combobox",
|
|
3
|
-
"version": "3.9.1
|
|
3
|
+
"version": "3.9.1",
|
|
4
4
|
"description": "Spectrum UI components in React",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/main.js",
|
|
@@ -22,20 +22,20 @@
|
|
|
22
22
|
"url": "https://github.com/adobe/react-spectrum"
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@react-aria/i18n": "3.
|
|
26
|
-
"@react-aria/listbox": "3.12.1
|
|
27
|
-
"@react-aria/live-announcer": "3.
|
|
28
|
-
"@react-aria/menu": "3.14.1
|
|
29
|
-
"@react-aria/overlays": "3.
|
|
30
|
-
"@react-aria/selection": "3.
|
|
31
|
-
"@react-aria/textfield": "3.
|
|
32
|
-
"@react-aria/utils": "3.
|
|
33
|
-
"@react-stately/collections": "3.
|
|
34
|
-
"@react-stately/combobox": "3.8.4
|
|
35
|
-
"@react-stately/form": "3.0.3
|
|
36
|
-
"@react-types/button": "3.9.4
|
|
37
|
-
"@react-types/combobox": "3.11.1
|
|
38
|
-
"@react-types/shared": "3.
|
|
25
|
+
"@react-aria/i18n": "^3.11.1",
|
|
26
|
+
"@react-aria/listbox": "^3.12.1",
|
|
27
|
+
"@react-aria/live-announcer": "^3.3.4",
|
|
28
|
+
"@react-aria/menu": "^3.14.1",
|
|
29
|
+
"@react-aria/overlays": "^3.22.1",
|
|
30
|
+
"@react-aria/selection": "^3.18.1",
|
|
31
|
+
"@react-aria/textfield": "^3.14.5",
|
|
32
|
+
"@react-aria/utils": "^3.24.1",
|
|
33
|
+
"@react-stately/collections": "^3.10.7",
|
|
34
|
+
"@react-stately/combobox": "^3.8.4",
|
|
35
|
+
"@react-stately/form": "^3.0.3",
|
|
36
|
+
"@react-types/button": "^3.9.4",
|
|
37
|
+
"@react-types/combobox": "^3.11.1",
|
|
38
|
+
"@react-types/shared": "^3.23.1",
|
|
39
39
|
"@swc/helpers": "^0.5.0"
|
|
40
40
|
},
|
|
41
41
|
"peerDependencies": {
|
|
@@ -45,5 +45,5 @@
|
|
|
45
45
|
"publishConfig": {
|
|
46
46
|
"access": "public"
|
|
47
47
|
},
|
|
48
|
-
"gitHead": "
|
|
48
|
+
"gitHead": "b77d7d594dff4dcfb5359bffbcfd18142b146433"
|
|
49
49
|
}
|