@react-spectrum/combobox 3.12.5-nightly.4623 → 3.12.5
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/ComboBox.main.js +31 -31
- package/dist/ComboBox.mjs +31 -31
- package/dist/ComboBox.module.js +31 -31
- package/dist/MobileComboBox.main.js +81 -81
- package/dist/MobileComboBox.mjs +81 -81
- package/dist/MobileComboBox.module.js +81 -81
- package/package.json +27 -27
package/dist/ComboBox.main.js
CHANGED
|
@@ -69,7 +69,7 @@ $parcel$export(module.exports, "ComboBox", () => $e4f518eb9b010873$export$72b969
|
|
|
69
69
|
function $e4f518eb9b010873$var$ComboBox(props, ref) {
|
|
70
70
|
props = (0, $XxzjX$reactspectrumprovider.useProviderProps)(props);
|
|
71
71
|
props = (0, $XxzjX$reactspectrumform.useFormProps)(props);
|
|
72
|
-
if (props.placeholder) console.warn(
|
|
72
|
+
if (props.placeholder) console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/ComboBox.html#help-text');
|
|
73
73
|
let isMobile = (0, $XxzjX$reactspectrumutils.useIsMobileDevice)();
|
|
74
74
|
if (isMobile) // menuTrigger=focus/manual don't apply to mobile combobox
|
|
75
75
|
return /*#__PURE__*/ (0, ($parcel$interopDefault($XxzjX$react))).createElement((0, $e514018f82d1b067$exports.MobileComboBox), {
|
|
@@ -83,9 +83,9 @@ function $e4f518eb9b010873$var$ComboBox(props, ref) {
|
|
|
83
83
|
});
|
|
84
84
|
}
|
|
85
85
|
const $e4f518eb9b010873$var$ComboBoxBase = /*#__PURE__*/ (0, ($parcel$interopDefault($XxzjX$react))).forwardRef(function ComboBoxBase(props, ref) {
|
|
86
|
-
let { menuTrigger: menuTrigger =
|
|
87
|
-
if (allowsCustomValue) formValue =
|
|
88
|
-
let stringFormatter = (0, $XxzjX$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($9e627d9ac6346a53$exports))),
|
|
86
|
+
let { menuTrigger: menuTrigger = 'input', shouldFlip: shouldFlip = true, direction: direction = 'bottom', align: align = 'start', isQuiet: isQuiet, loadingState: loadingState, onLoadMore: onLoadMore, allowsCustomValue: allowsCustomValue, menuWidth: customMenuWidth, name: name, formValue: formValue = 'text' } = props;
|
|
87
|
+
if (allowsCustomValue) formValue = 'text';
|
|
88
|
+
let stringFormatter = (0, $XxzjX$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($9e627d9ac6346a53$exports))), '@react-spectrum/combobox');
|
|
89
89
|
let isAsync = loadingState != null;
|
|
90
90
|
let popoverRef = (0, $XxzjX$react.useRef)();
|
|
91
91
|
let unwrappedPopoverRef = (0, $XxzjX$reactspectrumutils.useUnwrapDOMRef)(popoverRef);
|
|
@@ -97,14 +97,14 @@ const $e4f518eb9b010873$var$ComboBoxBase = /*#__PURE__*/ (0, ($parcel$interopDef
|
|
|
97
97
|
let inputGroupRef = (0, $XxzjX$react.useRef)();
|
|
98
98
|
let domRef = (0, $XxzjX$reactspectrumutils.useFocusableRef)(ref, inputRef);
|
|
99
99
|
let { contains: contains } = (0, $XxzjX$reactariai18n.useFilter)({
|
|
100
|
-
sensitivity:
|
|
100
|
+
sensitivity: 'base'
|
|
101
101
|
});
|
|
102
102
|
let state = (0, $XxzjX$reactstatelycombobox.useComboBoxState)({
|
|
103
103
|
...props,
|
|
104
104
|
defaultFilter: contains,
|
|
105
105
|
allowsEmptyCollection: isAsync
|
|
106
106
|
});
|
|
107
|
-
let layout = (0, $XxzjX$reactspectrumlistbox.useListBoxLayout)(state, loadingState ===
|
|
107
|
+
let layout = (0, $XxzjX$reactspectrumlistbox.useListBoxLayout)(state, loadingState === 'loadingMore');
|
|
108
108
|
let { buttonProps: buttonProps, inputProps: inputProps, listBoxProps: listBoxProps, labelProps: labelProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps, isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = (0, $XxzjX$reactariacombobox.useComboBox)({
|
|
109
109
|
...props,
|
|
110
110
|
keyboardDelegate: layout,
|
|
@@ -113,7 +113,7 @@ const $e4f518eb9b010873$var$ComboBoxBase = /*#__PURE__*/ (0, ($parcel$interopDef
|
|
|
113
113
|
listBoxRef: listBoxRef,
|
|
114
114
|
inputRef: inputRef,
|
|
115
115
|
menuTrigger: menuTrigger,
|
|
116
|
-
name: formValue ===
|
|
116
|
+
name: formValue === 'text' ? name : undefined
|
|
117
117
|
}, state);
|
|
118
118
|
// Measure the width of the inputfield and the button to inform the width of the menu (below).
|
|
119
119
|
let [menuWidth, setMenuWidth] = (0, $XxzjX$react.useState)(null);
|
|
@@ -159,17 +159,17 @@ const $e4f518eb9b010873$var$ComboBoxBase = /*#__PURE__*/ (0, ($parcel$interopDef
|
|
|
159
159
|
inputRef: inputRef,
|
|
160
160
|
triggerProps: buttonProps,
|
|
161
161
|
triggerRef: buttonRef,
|
|
162
|
-
validationState: props.validationState || (isInvalid ?
|
|
162
|
+
validationState: props.validationState || (isInvalid ? 'invalid' : null),
|
|
163
163
|
ref: inputGroupRef
|
|
164
|
-
})), name && formValue ===
|
|
164
|
+
})), name && formValue === 'key' && /*#__PURE__*/ (0, ($parcel$interopDefault($XxzjX$react))).createElement("input", {
|
|
165
165
|
type: "hidden",
|
|
166
166
|
name: name,
|
|
167
167
|
value: state.selectedKey
|
|
168
168
|
}), /*#__PURE__*/ (0, ($parcel$interopDefault($XxzjX$react))).createElement((0, $XxzjX$reactspectrumoverlays.Popover), {
|
|
169
169
|
state: state,
|
|
170
170
|
UNSAFE_style: style,
|
|
171
|
-
UNSAFE_className: (0, $XxzjX$reactspectrumutils.classNames)((0, ($parcel$interopDefault($2f86633ce5b04f1e$exports))),
|
|
172
|
-
|
|
171
|
+
UNSAFE_className: (0, $XxzjX$reactspectrumutils.classNames)((0, ($parcel$interopDefault($2f86633ce5b04f1e$exports))), 'spectrum-InputGroup-popover', {
|
|
172
|
+
'spectrum-InputGroup-popover--quiet': isQuiet
|
|
173
173
|
}),
|
|
174
174
|
ref: popoverRef,
|
|
175
175
|
triggerRef: inputGroupRef,
|
|
@@ -188,26 +188,26 @@ const $e4f518eb9b010873$var$ComboBoxBase = /*#__PURE__*/ (0, ($parcel$interopDef
|
|
|
188
188
|
layout: layout,
|
|
189
189
|
state: state,
|
|
190
190
|
shouldUseVirtualFocus: true,
|
|
191
|
-
isLoading: loadingState ===
|
|
191
|
+
isLoading: loadingState === 'loading' || loadingState === 'loadingMore',
|
|
192
192
|
onLoadMore: onLoadMore,
|
|
193
193
|
renderEmptyState: ()=>isAsync && /*#__PURE__*/ (0, ($parcel$interopDefault($XxzjX$react))).createElement("span", {
|
|
194
|
-
className: (0, $XxzjX$reactspectrumutils.classNames)((0, ($parcel$interopDefault($41fae9390a5a37fa$exports))),
|
|
195
|
-
}, loadingState ===
|
|
194
|
+
className: (0, $XxzjX$reactspectrumutils.classNames)((0, ($parcel$interopDefault($41fae9390a5a37fa$exports))), 'no-results')
|
|
195
|
+
}, loadingState === 'loading' ? stringFormatter.format('loading') : stringFormatter.format('noResults'))
|
|
196
196
|
})));
|
|
197
197
|
});
|
|
198
198
|
const $e4f518eb9b010873$var$ComboBoxInput = /*#__PURE__*/ (0, ($parcel$interopDefault($XxzjX$react))).forwardRef(function ComboBoxInput(props, ref) {
|
|
199
199
|
let { isQuiet: isQuiet, isDisabled: isDisabled, validationState: validationState, inputProps: inputProps, inputRef: inputRef, triggerProps: triggerProps, triggerRef: triggerRef, autoFocus: autoFocus, style: style, className: className, loadingState: loadingState, isOpen: isOpen, menuTrigger: menuTrigger } = props;
|
|
200
200
|
let { hoverProps: hoverProps, isHovered: isHovered } = (0, $XxzjX$reactariainteractions.useHover)({});
|
|
201
|
-
let stringFormatter = (0, $XxzjX$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($9e627d9ac6346a53$exports))),
|
|
201
|
+
let stringFormatter = (0, $XxzjX$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($9e627d9ac6346a53$exports))), '@react-spectrum/combobox');
|
|
202
202
|
let timeout = (0, $XxzjX$react.useRef)(null);
|
|
203
203
|
let [showLoading, setShowLoading] = (0, $XxzjX$react.useState)(false);
|
|
204
204
|
let loadingCircle = /*#__PURE__*/ (0, ($parcel$interopDefault($XxzjX$react))).createElement((0, $XxzjX$reactspectrumprogress.ProgressCircle), {
|
|
205
|
-
"aria-label": stringFormatter.format(
|
|
205
|
+
"aria-label": stringFormatter.format('loading'),
|
|
206
206
|
size: "S",
|
|
207
207
|
isIndeterminate: true,
|
|
208
|
-
UNSAFE_className: (0, $XxzjX$reactspectrumutils.classNames)((0, ($parcel$interopDefault($40cb3a00c193680f$exports))),
|
|
208
|
+
UNSAFE_className: (0, $XxzjX$reactspectrumutils.classNames)((0, ($parcel$interopDefault($40cb3a00c193680f$exports))), 'spectrum-Textfield-circleLoader', (0, $XxzjX$reactspectrumutils.classNames)((0, ($parcel$interopDefault($2f86633ce5b04f1e$exports))), 'spectrum-InputGroup-input-circleLoader'))
|
|
209
209
|
});
|
|
210
|
-
let isLoading = loadingState ===
|
|
210
|
+
let isLoading = loadingState === 'loading' || loadingState === 'filtering';
|
|
211
211
|
let inputValue = inputProps.value;
|
|
212
212
|
let lastInputValue = (0, $XxzjX$react.useRef)(inputValue);
|
|
213
213
|
(0, $XxzjX$react.useEffect)(()=>{
|
|
@@ -243,31 +243,31 @@ const $e4f518eb9b010873$var$ComboBoxInput = /*#__PURE__*/ (0, ($parcel$interopDe
|
|
|
243
243
|
return /*#__PURE__*/ (0, ($parcel$interopDefault($XxzjX$react))).createElement((0, $XxzjX$reactariafocus.FocusRing), {
|
|
244
244
|
within: true,
|
|
245
245
|
isTextInput: true,
|
|
246
|
-
focusClass: (0, $XxzjX$reactspectrumutils.classNames)((0, ($parcel$interopDefault($2f86633ce5b04f1e$exports))),
|
|
247
|
-
focusRingClass: (0, $XxzjX$reactspectrumutils.classNames)((0, ($parcel$interopDefault($2f86633ce5b04f1e$exports))),
|
|
246
|
+
focusClass: (0, $XxzjX$reactspectrumutils.classNames)((0, ($parcel$interopDefault($2f86633ce5b04f1e$exports))), 'is-focused'),
|
|
247
|
+
focusRingClass: (0, $XxzjX$reactspectrumutils.classNames)((0, ($parcel$interopDefault($2f86633ce5b04f1e$exports))), 'focus-ring'),
|
|
248
248
|
autoFocus: autoFocus
|
|
249
249
|
}, /*#__PURE__*/ (0, ($parcel$interopDefault($XxzjX$react))).createElement("div", {
|
|
250
250
|
...hoverProps,
|
|
251
251
|
ref: ref,
|
|
252
252
|
style: style,
|
|
253
|
-
className: (0, $XxzjX$reactspectrumutils.classNames)((0, ($parcel$interopDefault($2f86633ce5b04f1e$exports))),
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
253
|
+
className: (0, $XxzjX$reactspectrumutils.classNames)((0, ($parcel$interopDefault($2f86633ce5b04f1e$exports))), 'spectrum-InputGroup', {
|
|
254
|
+
'spectrum-InputGroup--quiet': isQuiet,
|
|
255
|
+
'is-disabled': isDisabled,
|
|
256
|
+
'spectrum-InputGroup--invalid': validationState === 'invalid' && !isDisabled,
|
|
257
|
+
'is-hovered': isHovered
|
|
258
258
|
}, className)
|
|
259
259
|
}, /*#__PURE__*/ (0, ($parcel$interopDefault($XxzjX$react))).createElement((0, $XxzjX$reactspectrumtextfield.TextFieldBase), {
|
|
260
260
|
inputProps: inputProps,
|
|
261
261
|
inputRef: inputRef,
|
|
262
|
-
UNSAFE_className: (0, $XxzjX$reactspectrumutils.classNames)((0, ($parcel$interopDefault($2f86633ce5b04f1e$exports))),
|
|
263
|
-
inputClassName: (0, $XxzjX$reactspectrumutils.classNames)((0, ($parcel$interopDefault($2f86633ce5b04f1e$exports))),
|
|
264
|
-
validationIconClassName: (0, $XxzjX$reactspectrumutils.classNames)((0, ($parcel$interopDefault($2f86633ce5b04f1e$exports))),
|
|
262
|
+
UNSAFE_className: (0, $XxzjX$reactspectrumutils.classNames)((0, ($parcel$interopDefault($2f86633ce5b04f1e$exports))), 'spectrum-InputGroup-field'),
|
|
263
|
+
inputClassName: (0, $XxzjX$reactspectrumutils.classNames)((0, ($parcel$interopDefault($2f86633ce5b04f1e$exports))), 'spectrum-InputGroup-input'),
|
|
264
|
+
validationIconClassName: (0, $XxzjX$reactspectrumutils.classNames)((0, ($parcel$interopDefault($2f86633ce5b04f1e$exports))), 'spectrum-InputGroup-input-validationIcon'),
|
|
265
265
|
isDisabled: isDisabled,
|
|
266
266
|
isQuiet: isQuiet,
|
|
267
267
|
validationState: validationState,
|
|
268
268
|
// loading circle should only be displayed if menu is open, if menuTrigger is "manual", or first time load (to stop circle from showing up when user selects an option)
|
|
269
269
|
// TODO: add special case for completionMode: complete as well
|
|
270
|
-
isLoading: showLoading && (isOpen || menuTrigger ===
|
|
270
|
+
isLoading: showLoading && (isOpen || menuTrigger === 'manual' || loadingState === 'loading'),
|
|
271
271
|
loadingIndicator: loadingState != null && loadingCircle,
|
|
272
272
|
disableFocusRing: true
|
|
273
273
|
}), /*#__PURE__*/ (0, ($parcel$interopDefault($XxzjX$react))).createElement((0, $XxzjX$reactariainteractions.PressResponder), {
|
|
@@ -276,11 +276,11 @@ const $e4f518eb9b010873$var$ComboBoxInput = /*#__PURE__*/ (0, ($parcel$interopDe
|
|
|
276
276
|
}, /*#__PURE__*/ (0, ($parcel$interopDefault($XxzjX$react))).createElement((0, $XxzjX$reactspectrumbutton.FieldButton), {
|
|
277
277
|
...triggerProps,
|
|
278
278
|
ref: triggerRef,
|
|
279
|
-
UNSAFE_className: (0, $XxzjX$reactspectrumutils.classNames)((0, ($parcel$interopDefault($2f86633ce5b04f1e$exports))),
|
|
279
|
+
UNSAFE_className: (0, $XxzjX$reactspectrumutils.classNames)((0, ($parcel$interopDefault($2f86633ce5b04f1e$exports))), 'spectrum-FieldButton'),
|
|
280
280
|
isQuiet: isQuiet,
|
|
281
281
|
validationState: validationState
|
|
282
282
|
}, /*#__PURE__*/ (0, ($parcel$interopDefault($XxzjX$react))).createElement((0, ($parcel$interopDefault($XxzjX$spectrumiconsuiChevronDownMedium))), {
|
|
283
|
-
UNSAFE_className: (0, $XxzjX$reactspectrumutils.classNames)((0, ($parcel$interopDefault($2f86633ce5b04f1e$exports))),
|
|
283
|
+
UNSAFE_className: (0, $XxzjX$reactspectrumutils.classNames)((0, ($parcel$interopDefault($2f86633ce5b04f1e$exports))), 'spectrum-Dropdown-chevron')
|
|
284
284
|
})))));
|
|
285
285
|
});
|
|
286
286
|
/**
|
package/dist/ComboBox.mjs
CHANGED
|
@@ -63,7 +63,7 @@ function $parcel$interopDefault(a) {
|
|
|
63
63
|
function $2289f375e813f187$var$ComboBox(props, ref) {
|
|
64
64
|
props = (0, $c3ZYr$useProviderProps)(props);
|
|
65
65
|
props = (0, $c3ZYr$useFormProps)(props);
|
|
66
|
-
if (props.placeholder) console.warn(
|
|
66
|
+
if (props.placeholder) console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/ComboBox.html#help-text');
|
|
67
67
|
let isMobile = (0, $c3ZYr$useIsMobileDevice)();
|
|
68
68
|
if (isMobile) // menuTrigger=focus/manual don't apply to mobile combobox
|
|
69
69
|
return /*#__PURE__*/ (0, $c3ZYr$react).createElement((0, $a1ae4cad4496428f$export$7637df911c069b4d), {
|
|
@@ -77,9 +77,9 @@ function $2289f375e813f187$var$ComboBox(props, ref) {
|
|
|
77
77
|
});
|
|
78
78
|
}
|
|
79
79
|
const $2289f375e813f187$var$ComboBoxBase = /*#__PURE__*/ (0, $c3ZYr$react).forwardRef(function ComboBoxBase(props, ref) {
|
|
80
|
-
let { menuTrigger: menuTrigger =
|
|
81
|
-
if (allowsCustomValue) formValue =
|
|
82
|
-
let stringFormatter = (0, $c3ZYr$useLocalizedStringFormatter)((0, ($parcel$interopDefault($c3ZYr$intlStringsmodulejs))),
|
|
80
|
+
let { menuTrigger: menuTrigger = 'input', shouldFlip: shouldFlip = true, direction: direction = 'bottom', align: align = 'start', isQuiet: isQuiet, loadingState: loadingState, onLoadMore: onLoadMore, allowsCustomValue: allowsCustomValue, menuWidth: customMenuWidth, name: name, formValue: formValue = 'text' } = props;
|
|
81
|
+
if (allowsCustomValue) formValue = 'text';
|
|
82
|
+
let stringFormatter = (0, $c3ZYr$useLocalizedStringFormatter)((0, ($parcel$interopDefault($c3ZYr$intlStringsmodulejs))), '@react-spectrum/combobox');
|
|
83
83
|
let isAsync = loadingState != null;
|
|
84
84
|
let popoverRef = (0, $c3ZYr$useRef)();
|
|
85
85
|
let unwrappedPopoverRef = (0, $c3ZYr$useUnwrapDOMRef)(popoverRef);
|
|
@@ -91,14 +91,14 @@ const $2289f375e813f187$var$ComboBoxBase = /*#__PURE__*/ (0, $c3ZYr$react).forwa
|
|
|
91
91
|
let inputGroupRef = (0, $c3ZYr$useRef)();
|
|
92
92
|
let domRef = (0, $c3ZYr$useFocusableRef)(ref, inputRef);
|
|
93
93
|
let { contains: contains } = (0, $c3ZYr$useFilter)({
|
|
94
|
-
sensitivity:
|
|
94
|
+
sensitivity: 'base'
|
|
95
95
|
});
|
|
96
96
|
let state = (0, $c3ZYr$useComboBoxState)({
|
|
97
97
|
...props,
|
|
98
98
|
defaultFilter: contains,
|
|
99
99
|
allowsEmptyCollection: isAsync
|
|
100
100
|
});
|
|
101
|
-
let layout = (0, $c3ZYr$useListBoxLayout)(state, loadingState ===
|
|
101
|
+
let layout = (0, $c3ZYr$useListBoxLayout)(state, loadingState === 'loadingMore');
|
|
102
102
|
let { buttonProps: buttonProps, inputProps: inputProps, listBoxProps: listBoxProps, labelProps: labelProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps, isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = (0, $c3ZYr$useComboBox)({
|
|
103
103
|
...props,
|
|
104
104
|
keyboardDelegate: layout,
|
|
@@ -107,7 +107,7 @@ const $2289f375e813f187$var$ComboBoxBase = /*#__PURE__*/ (0, $c3ZYr$react).forwa
|
|
|
107
107
|
listBoxRef: listBoxRef,
|
|
108
108
|
inputRef: inputRef,
|
|
109
109
|
menuTrigger: menuTrigger,
|
|
110
|
-
name: formValue ===
|
|
110
|
+
name: formValue === 'text' ? name : undefined
|
|
111
111
|
}, state);
|
|
112
112
|
// Measure the width of the inputfield and the button to inform the width of the menu (below).
|
|
113
113
|
let [menuWidth, setMenuWidth] = (0, $c3ZYr$useState)(null);
|
|
@@ -153,17 +153,17 @@ const $2289f375e813f187$var$ComboBoxBase = /*#__PURE__*/ (0, $c3ZYr$react).forwa
|
|
|
153
153
|
inputRef: inputRef,
|
|
154
154
|
triggerProps: buttonProps,
|
|
155
155
|
triggerRef: buttonRef,
|
|
156
|
-
validationState: props.validationState || (isInvalid ?
|
|
156
|
+
validationState: props.validationState || (isInvalid ? 'invalid' : null),
|
|
157
157
|
ref: inputGroupRef
|
|
158
|
-
})), name && formValue ===
|
|
158
|
+
})), name && formValue === 'key' && /*#__PURE__*/ (0, $c3ZYr$react).createElement("input", {
|
|
159
159
|
type: "hidden",
|
|
160
160
|
name: name,
|
|
161
161
|
value: state.selectedKey
|
|
162
162
|
}), /*#__PURE__*/ (0, $c3ZYr$react).createElement((0, $c3ZYr$Popover), {
|
|
163
163
|
state: state,
|
|
164
164
|
UNSAFE_style: style,
|
|
165
|
-
UNSAFE_className: (0, $c3ZYr$classNames)((0, ($parcel$interopDefault($c3ZYr$inputgroup_vars_cssmodulejs))),
|
|
166
|
-
|
|
165
|
+
UNSAFE_className: (0, $c3ZYr$classNames)((0, ($parcel$interopDefault($c3ZYr$inputgroup_vars_cssmodulejs))), 'spectrum-InputGroup-popover', {
|
|
166
|
+
'spectrum-InputGroup-popover--quiet': isQuiet
|
|
167
167
|
}),
|
|
168
168
|
ref: popoverRef,
|
|
169
169
|
triggerRef: inputGroupRef,
|
|
@@ -182,26 +182,26 @@ const $2289f375e813f187$var$ComboBoxBase = /*#__PURE__*/ (0, $c3ZYr$react).forwa
|
|
|
182
182
|
layout: layout,
|
|
183
183
|
state: state,
|
|
184
184
|
shouldUseVirtualFocus: true,
|
|
185
|
-
isLoading: loadingState ===
|
|
185
|
+
isLoading: loadingState === 'loading' || loadingState === 'loadingMore',
|
|
186
186
|
onLoadMore: onLoadMore,
|
|
187
187
|
renderEmptyState: ()=>isAsync && /*#__PURE__*/ (0, $c3ZYr$react).createElement("span", {
|
|
188
|
-
className: (0, $c3ZYr$classNames)((0, ($parcel$interopDefault($c3ZYr$combobox_cssmodulejs))),
|
|
189
|
-
}, loadingState ===
|
|
188
|
+
className: (0, $c3ZYr$classNames)((0, ($parcel$interopDefault($c3ZYr$combobox_cssmodulejs))), 'no-results')
|
|
189
|
+
}, loadingState === 'loading' ? stringFormatter.format('loading') : stringFormatter.format('noResults'))
|
|
190
190
|
})));
|
|
191
191
|
});
|
|
192
192
|
const $2289f375e813f187$var$ComboBoxInput = /*#__PURE__*/ (0, $c3ZYr$react).forwardRef(function ComboBoxInput(props, ref) {
|
|
193
193
|
let { isQuiet: isQuiet, isDisabled: isDisabled, validationState: validationState, inputProps: inputProps, inputRef: inputRef, triggerProps: triggerProps, triggerRef: triggerRef, autoFocus: autoFocus, style: style, className: className, loadingState: loadingState, isOpen: isOpen, menuTrigger: menuTrigger } = props;
|
|
194
194
|
let { hoverProps: hoverProps, isHovered: isHovered } = (0, $c3ZYr$useHover)({});
|
|
195
|
-
let stringFormatter = (0, $c3ZYr$useLocalizedStringFormatter)((0, ($parcel$interopDefault($c3ZYr$intlStringsmodulejs))),
|
|
195
|
+
let stringFormatter = (0, $c3ZYr$useLocalizedStringFormatter)((0, ($parcel$interopDefault($c3ZYr$intlStringsmodulejs))), '@react-spectrum/combobox');
|
|
196
196
|
let timeout = (0, $c3ZYr$useRef)(null);
|
|
197
197
|
let [showLoading, setShowLoading] = (0, $c3ZYr$useState)(false);
|
|
198
198
|
let loadingCircle = /*#__PURE__*/ (0, $c3ZYr$react).createElement((0, $c3ZYr$ProgressCircle), {
|
|
199
|
-
"aria-label": stringFormatter.format(
|
|
199
|
+
"aria-label": stringFormatter.format('loading'),
|
|
200
200
|
size: "S",
|
|
201
201
|
isIndeterminate: true,
|
|
202
|
-
UNSAFE_className: (0, $c3ZYr$classNames)((0, ($parcel$interopDefault($c3ZYr$textfield_vars_cssmodulejs))),
|
|
202
|
+
UNSAFE_className: (0, $c3ZYr$classNames)((0, ($parcel$interopDefault($c3ZYr$textfield_vars_cssmodulejs))), 'spectrum-Textfield-circleLoader', (0, $c3ZYr$classNames)((0, ($parcel$interopDefault($c3ZYr$inputgroup_vars_cssmodulejs))), 'spectrum-InputGroup-input-circleLoader'))
|
|
203
203
|
});
|
|
204
|
-
let isLoading = loadingState ===
|
|
204
|
+
let isLoading = loadingState === 'loading' || loadingState === 'filtering';
|
|
205
205
|
let inputValue = inputProps.value;
|
|
206
206
|
let lastInputValue = (0, $c3ZYr$useRef)(inputValue);
|
|
207
207
|
(0, $c3ZYr$useEffect)(()=>{
|
|
@@ -237,31 +237,31 @@ const $2289f375e813f187$var$ComboBoxInput = /*#__PURE__*/ (0, $c3ZYr$react).forw
|
|
|
237
237
|
return /*#__PURE__*/ (0, $c3ZYr$react).createElement((0, $c3ZYr$FocusRing), {
|
|
238
238
|
within: true,
|
|
239
239
|
isTextInput: true,
|
|
240
|
-
focusClass: (0, $c3ZYr$classNames)((0, ($parcel$interopDefault($c3ZYr$inputgroup_vars_cssmodulejs))),
|
|
241
|
-
focusRingClass: (0, $c3ZYr$classNames)((0, ($parcel$interopDefault($c3ZYr$inputgroup_vars_cssmodulejs))),
|
|
240
|
+
focusClass: (0, $c3ZYr$classNames)((0, ($parcel$interopDefault($c3ZYr$inputgroup_vars_cssmodulejs))), 'is-focused'),
|
|
241
|
+
focusRingClass: (0, $c3ZYr$classNames)((0, ($parcel$interopDefault($c3ZYr$inputgroup_vars_cssmodulejs))), 'focus-ring'),
|
|
242
242
|
autoFocus: autoFocus
|
|
243
243
|
}, /*#__PURE__*/ (0, $c3ZYr$react).createElement("div", {
|
|
244
244
|
...hoverProps,
|
|
245
245
|
ref: ref,
|
|
246
246
|
style: style,
|
|
247
|
-
className: (0, $c3ZYr$classNames)((0, ($parcel$interopDefault($c3ZYr$inputgroup_vars_cssmodulejs))),
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
247
|
+
className: (0, $c3ZYr$classNames)((0, ($parcel$interopDefault($c3ZYr$inputgroup_vars_cssmodulejs))), 'spectrum-InputGroup', {
|
|
248
|
+
'spectrum-InputGroup--quiet': isQuiet,
|
|
249
|
+
'is-disabled': isDisabled,
|
|
250
|
+
'spectrum-InputGroup--invalid': validationState === 'invalid' && !isDisabled,
|
|
251
|
+
'is-hovered': isHovered
|
|
252
252
|
}, className)
|
|
253
253
|
}, /*#__PURE__*/ (0, $c3ZYr$react).createElement((0, $c3ZYr$TextFieldBase), {
|
|
254
254
|
inputProps: inputProps,
|
|
255
255
|
inputRef: inputRef,
|
|
256
|
-
UNSAFE_className: (0, $c3ZYr$classNames)((0, ($parcel$interopDefault($c3ZYr$inputgroup_vars_cssmodulejs))),
|
|
257
|
-
inputClassName: (0, $c3ZYr$classNames)((0, ($parcel$interopDefault($c3ZYr$inputgroup_vars_cssmodulejs))),
|
|
258
|
-
validationIconClassName: (0, $c3ZYr$classNames)((0, ($parcel$interopDefault($c3ZYr$inputgroup_vars_cssmodulejs))),
|
|
256
|
+
UNSAFE_className: (0, $c3ZYr$classNames)((0, ($parcel$interopDefault($c3ZYr$inputgroup_vars_cssmodulejs))), 'spectrum-InputGroup-field'),
|
|
257
|
+
inputClassName: (0, $c3ZYr$classNames)((0, ($parcel$interopDefault($c3ZYr$inputgroup_vars_cssmodulejs))), 'spectrum-InputGroup-input'),
|
|
258
|
+
validationIconClassName: (0, $c3ZYr$classNames)((0, ($parcel$interopDefault($c3ZYr$inputgroup_vars_cssmodulejs))), 'spectrum-InputGroup-input-validationIcon'),
|
|
259
259
|
isDisabled: isDisabled,
|
|
260
260
|
isQuiet: isQuiet,
|
|
261
261
|
validationState: validationState,
|
|
262
262
|
// loading circle should only be displayed if menu is open, if menuTrigger is "manual", or first time load (to stop circle from showing up when user selects an option)
|
|
263
263
|
// TODO: add special case for completionMode: complete as well
|
|
264
|
-
isLoading: showLoading && (isOpen || menuTrigger ===
|
|
264
|
+
isLoading: showLoading && (isOpen || menuTrigger === 'manual' || loadingState === 'loading'),
|
|
265
265
|
loadingIndicator: loadingState != null && loadingCircle,
|
|
266
266
|
disableFocusRing: true
|
|
267
267
|
}), /*#__PURE__*/ (0, $c3ZYr$react).createElement((0, $c3ZYr$PressResponder), {
|
|
@@ -270,11 +270,11 @@ const $2289f375e813f187$var$ComboBoxInput = /*#__PURE__*/ (0, $c3ZYr$react).forw
|
|
|
270
270
|
}, /*#__PURE__*/ (0, $c3ZYr$react).createElement((0, $c3ZYr$FieldButton), {
|
|
271
271
|
...triggerProps,
|
|
272
272
|
ref: triggerRef,
|
|
273
|
-
UNSAFE_className: (0, $c3ZYr$classNames)((0, ($parcel$interopDefault($c3ZYr$inputgroup_vars_cssmodulejs))),
|
|
273
|
+
UNSAFE_className: (0, $c3ZYr$classNames)((0, ($parcel$interopDefault($c3ZYr$inputgroup_vars_cssmodulejs))), 'spectrum-FieldButton'),
|
|
274
274
|
isQuiet: isQuiet,
|
|
275
275
|
validationState: validationState
|
|
276
276
|
}, /*#__PURE__*/ (0, $c3ZYr$react).createElement((0, $c3ZYr$spectrumiconsuiChevronDownMedium), {
|
|
277
|
-
UNSAFE_className: (0, $c3ZYr$classNames)((0, ($parcel$interopDefault($c3ZYr$inputgroup_vars_cssmodulejs))),
|
|
277
|
+
UNSAFE_className: (0, $c3ZYr$classNames)((0, ($parcel$interopDefault($c3ZYr$inputgroup_vars_cssmodulejs))), 'spectrum-Dropdown-chevron')
|
|
278
278
|
})))));
|
|
279
279
|
});
|
|
280
280
|
/**
|
package/dist/ComboBox.module.js
CHANGED
|
@@ -63,7 +63,7 @@ function $parcel$interopDefault(a) {
|
|
|
63
63
|
function $2289f375e813f187$var$ComboBox(props, ref) {
|
|
64
64
|
props = (0, $c3ZYr$useProviderProps)(props);
|
|
65
65
|
props = (0, $c3ZYr$useFormProps)(props);
|
|
66
|
-
if (props.placeholder) console.warn(
|
|
66
|
+
if (props.placeholder) console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/ComboBox.html#help-text');
|
|
67
67
|
let isMobile = (0, $c3ZYr$useIsMobileDevice)();
|
|
68
68
|
if (isMobile) // menuTrigger=focus/manual don't apply to mobile combobox
|
|
69
69
|
return /*#__PURE__*/ (0, $c3ZYr$react).createElement((0, $a1ae4cad4496428f$export$7637df911c069b4d), {
|
|
@@ -77,9 +77,9 @@ function $2289f375e813f187$var$ComboBox(props, ref) {
|
|
|
77
77
|
});
|
|
78
78
|
}
|
|
79
79
|
const $2289f375e813f187$var$ComboBoxBase = /*#__PURE__*/ (0, $c3ZYr$react).forwardRef(function ComboBoxBase(props, ref) {
|
|
80
|
-
let { menuTrigger: menuTrigger =
|
|
81
|
-
if (allowsCustomValue) formValue =
|
|
82
|
-
let stringFormatter = (0, $c3ZYr$useLocalizedStringFormatter)((0, ($parcel$interopDefault($c3ZYr$intlStringsmodulejs))),
|
|
80
|
+
let { menuTrigger: menuTrigger = 'input', shouldFlip: shouldFlip = true, direction: direction = 'bottom', align: align = 'start', isQuiet: isQuiet, loadingState: loadingState, onLoadMore: onLoadMore, allowsCustomValue: allowsCustomValue, menuWidth: customMenuWidth, name: name, formValue: formValue = 'text' } = props;
|
|
81
|
+
if (allowsCustomValue) formValue = 'text';
|
|
82
|
+
let stringFormatter = (0, $c3ZYr$useLocalizedStringFormatter)((0, ($parcel$interopDefault($c3ZYr$intlStringsmodulejs))), '@react-spectrum/combobox');
|
|
83
83
|
let isAsync = loadingState != null;
|
|
84
84
|
let popoverRef = (0, $c3ZYr$useRef)();
|
|
85
85
|
let unwrappedPopoverRef = (0, $c3ZYr$useUnwrapDOMRef)(popoverRef);
|
|
@@ -91,14 +91,14 @@ const $2289f375e813f187$var$ComboBoxBase = /*#__PURE__*/ (0, $c3ZYr$react).forwa
|
|
|
91
91
|
let inputGroupRef = (0, $c3ZYr$useRef)();
|
|
92
92
|
let domRef = (0, $c3ZYr$useFocusableRef)(ref, inputRef);
|
|
93
93
|
let { contains: contains } = (0, $c3ZYr$useFilter)({
|
|
94
|
-
sensitivity:
|
|
94
|
+
sensitivity: 'base'
|
|
95
95
|
});
|
|
96
96
|
let state = (0, $c3ZYr$useComboBoxState)({
|
|
97
97
|
...props,
|
|
98
98
|
defaultFilter: contains,
|
|
99
99
|
allowsEmptyCollection: isAsync
|
|
100
100
|
});
|
|
101
|
-
let layout = (0, $c3ZYr$useListBoxLayout)(state, loadingState ===
|
|
101
|
+
let layout = (0, $c3ZYr$useListBoxLayout)(state, loadingState === 'loadingMore');
|
|
102
102
|
let { buttonProps: buttonProps, inputProps: inputProps, listBoxProps: listBoxProps, labelProps: labelProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps, isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = (0, $c3ZYr$useComboBox)({
|
|
103
103
|
...props,
|
|
104
104
|
keyboardDelegate: layout,
|
|
@@ -107,7 +107,7 @@ const $2289f375e813f187$var$ComboBoxBase = /*#__PURE__*/ (0, $c3ZYr$react).forwa
|
|
|
107
107
|
listBoxRef: listBoxRef,
|
|
108
108
|
inputRef: inputRef,
|
|
109
109
|
menuTrigger: menuTrigger,
|
|
110
|
-
name: formValue ===
|
|
110
|
+
name: formValue === 'text' ? name : undefined
|
|
111
111
|
}, state);
|
|
112
112
|
// Measure the width of the inputfield and the button to inform the width of the menu (below).
|
|
113
113
|
let [menuWidth, setMenuWidth] = (0, $c3ZYr$useState)(null);
|
|
@@ -153,17 +153,17 @@ const $2289f375e813f187$var$ComboBoxBase = /*#__PURE__*/ (0, $c3ZYr$react).forwa
|
|
|
153
153
|
inputRef: inputRef,
|
|
154
154
|
triggerProps: buttonProps,
|
|
155
155
|
triggerRef: buttonRef,
|
|
156
|
-
validationState: props.validationState || (isInvalid ?
|
|
156
|
+
validationState: props.validationState || (isInvalid ? 'invalid' : null),
|
|
157
157
|
ref: inputGroupRef
|
|
158
|
-
})), name && formValue ===
|
|
158
|
+
})), name && formValue === 'key' && /*#__PURE__*/ (0, $c3ZYr$react).createElement("input", {
|
|
159
159
|
type: "hidden",
|
|
160
160
|
name: name,
|
|
161
161
|
value: state.selectedKey
|
|
162
162
|
}), /*#__PURE__*/ (0, $c3ZYr$react).createElement((0, $c3ZYr$Popover), {
|
|
163
163
|
state: state,
|
|
164
164
|
UNSAFE_style: style,
|
|
165
|
-
UNSAFE_className: (0, $c3ZYr$classNames)((0, ($parcel$interopDefault($c3ZYr$inputgroup_vars_cssmodulejs))),
|
|
166
|
-
|
|
165
|
+
UNSAFE_className: (0, $c3ZYr$classNames)((0, ($parcel$interopDefault($c3ZYr$inputgroup_vars_cssmodulejs))), 'spectrum-InputGroup-popover', {
|
|
166
|
+
'spectrum-InputGroup-popover--quiet': isQuiet
|
|
167
167
|
}),
|
|
168
168
|
ref: popoverRef,
|
|
169
169
|
triggerRef: inputGroupRef,
|
|
@@ -182,26 +182,26 @@ const $2289f375e813f187$var$ComboBoxBase = /*#__PURE__*/ (0, $c3ZYr$react).forwa
|
|
|
182
182
|
layout: layout,
|
|
183
183
|
state: state,
|
|
184
184
|
shouldUseVirtualFocus: true,
|
|
185
|
-
isLoading: loadingState ===
|
|
185
|
+
isLoading: loadingState === 'loading' || loadingState === 'loadingMore',
|
|
186
186
|
onLoadMore: onLoadMore,
|
|
187
187
|
renderEmptyState: ()=>isAsync && /*#__PURE__*/ (0, $c3ZYr$react).createElement("span", {
|
|
188
|
-
className: (0, $c3ZYr$classNames)((0, ($parcel$interopDefault($c3ZYr$combobox_cssmodulejs))),
|
|
189
|
-
}, loadingState ===
|
|
188
|
+
className: (0, $c3ZYr$classNames)((0, ($parcel$interopDefault($c3ZYr$combobox_cssmodulejs))), 'no-results')
|
|
189
|
+
}, loadingState === 'loading' ? stringFormatter.format('loading') : stringFormatter.format('noResults'))
|
|
190
190
|
})));
|
|
191
191
|
});
|
|
192
192
|
const $2289f375e813f187$var$ComboBoxInput = /*#__PURE__*/ (0, $c3ZYr$react).forwardRef(function ComboBoxInput(props, ref) {
|
|
193
193
|
let { isQuiet: isQuiet, isDisabled: isDisabled, validationState: validationState, inputProps: inputProps, inputRef: inputRef, triggerProps: triggerProps, triggerRef: triggerRef, autoFocus: autoFocus, style: style, className: className, loadingState: loadingState, isOpen: isOpen, menuTrigger: menuTrigger } = props;
|
|
194
194
|
let { hoverProps: hoverProps, isHovered: isHovered } = (0, $c3ZYr$useHover)({});
|
|
195
|
-
let stringFormatter = (0, $c3ZYr$useLocalizedStringFormatter)((0, ($parcel$interopDefault($c3ZYr$intlStringsmodulejs))),
|
|
195
|
+
let stringFormatter = (0, $c3ZYr$useLocalizedStringFormatter)((0, ($parcel$interopDefault($c3ZYr$intlStringsmodulejs))), '@react-spectrum/combobox');
|
|
196
196
|
let timeout = (0, $c3ZYr$useRef)(null);
|
|
197
197
|
let [showLoading, setShowLoading] = (0, $c3ZYr$useState)(false);
|
|
198
198
|
let loadingCircle = /*#__PURE__*/ (0, $c3ZYr$react).createElement((0, $c3ZYr$ProgressCircle), {
|
|
199
|
-
"aria-label": stringFormatter.format(
|
|
199
|
+
"aria-label": stringFormatter.format('loading'),
|
|
200
200
|
size: "S",
|
|
201
201
|
isIndeterminate: true,
|
|
202
|
-
UNSAFE_className: (0, $c3ZYr$classNames)((0, ($parcel$interopDefault($c3ZYr$textfield_vars_cssmodulejs))),
|
|
202
|
+
UNSAFE_className: (0, $c3ZYr$classNames)((0, ($parcel$interopDefault($c3ZYr$textfield_vars_cssmodulejs))), 'spectrum-Textfield-circleLoader', (0, $c3ZYr$classNames)((0, ($parcel$interopDefault($c3ZYr$inputgroup_vars_cssmodulejs))), 'spectrum-InputGroup-input-circleLoader'))
|
|
203
203
|
});
|
|
204
|
-
let isLoading = loadingState ===
|
|
204
|
+
let isLoading = loadingState === 'loading' || loadingState === 'filtering';
|
|
205
205
|
let inputValue = inputProps.value;
|
|
206
206
|
let lastInputValue = (0, $c3ZYr$useRef)(inputValue);
|
|
207
207
|
(0, $c3ZYr$useEffect)(()=>{
|
|
@@ -237,31 +237,31 @@ const $2289f375e813f187$var$ComboBoxInput = /*#__PURE__*/ (0, $c3ZYr$react).forw
|
|
|
237
237
|
return /*#__PURE__*/ (0, $c3ZYr$react).createElement((0, $c3ZYr$FocusRing), {
|
|
238
238
|
within: true,
|
|
239
239
|
isTextInput: true,
|
|
240
|
-
focusClass: (0, $c3ZYr$classNames)((0, ($parcel$interopDefault($c3ZYr$inputgroup_vars_cssmodulejs))),
|
|
241
|
-
focusRingClass: (0, $c3ZYr$classNames)((0, ($parcel$interopDefault($c3ZYr$inputgroup_vars_cssmodulejs))),
|
|
240
|
+
focusClass: (0, $c3ZYr$classNames)((0, ($parcel$interopDefault($c3ZYr$inputgroup_vars_cssmodulejs))), 'is-focused'),
|
|
241
|
+
focusRingClass: (0, $c3ZYr$classNames)((0, ($parcel$interopDefault($c3ZYr$inputgroup_vars_cssmodulejs))), 'focus-ring'),
|
|
242
242
|
autoFocus: autoFocus
|
|
243
243
|
}, /*#__PURE__*/ (0, $c3ZYr$react).createElement("div", {
|
|
244
244
|
...hoverProps,
|
|
245
245
|
ref: ref,
|
|
246
246
|
style: style,
|
|
247
|
-
className: (0, $c3ZYr$classNames)((0, ($parcel$interopDefault($c3ZYr$inputgroup_vars_cssmodulejs))),
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
247
|
+
className: (0, $c3ZYr$classNames)((0, ($parcel$interopDefault($c3ZYr$inputgroup_vars_cssmodulejs))), 'spectrum-InputGroup', {
|
|
248
|
+
'spectrum-InputGroup--quiet': isQuiet,
|
|
249
|
+
'is-disabled': isDisabled,
|
|
250
|
+
'spectrum-InputGroup--invalid': validationState === 'invalid' && !isDisabled,
|
|
251
|
+
'is-hovered': isHovered
|
|
252
252
|
}, className)
|
|
253
253
|
}, /*#__PURE__*/ (0, $c3ZYr$react).createElement((0, $c3ZYr$TextFieldBase), {
|
|
254
254
|
inputProps: inputProps,
|
|
255
255
|
inputRef: inputRef,
|
|
256
|
-
UNSAFE_className: (0, $c3ZYr$classNames)((0, ($parcel$interopDefault($c3ZYr$inputgroup_vars_cssmodulejs))),
|
|
257
|
-
inputClassName: (0, $c3ZYr$classNames)((0, ($parcel$interopDefault($c3ZYr$inputgroup_vars_cssmodulejs))),
|
|
258
|
-
validationIconClassName: (0, $c3ZYr$classNames)((0, ($parcel$interopDefault($c3ZYr$inputgroup_vars_cssmodulejs))),
|
|
256
|
+
UNSAFE_className: (0, $c3ZYr$classNames)((0, ($parcel$interopDefault($c3ZYr$inputgroup_vars_cssmodulejs))), 'spectrum-InputGroup-field'),
|
|
257
|
+
inputClassName: (0, $c3ZYr$classNames)((0, ($parcel$interopDefault($c3ZYr$inputgroup_vars_cssmodulejs))), 'spectrum-InputGroup-input'),
|
|
258
|
+
validationIconClassName: (0, $c3ZYr$classNames)((0, ($parcel$interopDefault($c3ZYr$inputgroup_vars_cssmodulejs))), 'spectrum-InputGroup-input-validationIcon'),
|
|
259
259
|
isDisabled: isDisabled,
|
|
260
260
|
isQuiet: isQuiet,
|
|
261
261
|
validationState: validationState,
|
|
262
262
|
// loading circle should only be displayed if menu is open, if menuTrigger is "manual", or first time load (to stop circle from showing up when user selects an option)
|
|
263
263
|
// TODO: add special case for completionMode: complete as well
|
|
264
|
-
isLoading: showLoading && (isOpen || menuTrigger ===
|
|
264
|
+
isLoading: showLoading && (isOpen || menuTrigger === 'manual' || loadingState === 'loading'),
|
|
265
265
|
loadingIndicator: loadingState != null && loadingCircle,
|
|
266
266
|
disableFocusRing: true
|
|
267
267
|
}), /*#__PURE__*/ (0, $c3ZYr$react).createElement((0, $c3ZYr$PressResponder), {
|
|
@@ -270,11 +270,11 @@ const $2289f375e813f187$var$ComboBoxInput = /*#__PURE__*/ (0, $c3ZYr$react).forw
|
|
|
270
270
|
}, /*#__PURE__*/ (0, $c3ZYr$react).createElement((0, $c3ZYr$FieldButton), {
|
|
271
271
|
...triggerProps,
|
|
272
272
|
ref: triggerRef,
|
|
273
|
-
UNSAFE_className: (0, $c3ZYr$classNames)((0, ($parcel$interopDefault($c3ZYr$inputgroup_vars_cssmodulejs))),
|
|
273
|
+
UNSAFE_className: (0, $c3ZYr$classNames)((0, ($parcel$interopDefault($c3ZYr$inputgroup_vars_cssmodulejs))), 'spectrum-FieldButton'),
|
|
274
274
|
isQuiet: isQuiet,
|
|
275
275
|
validationState: validationState
|
|
276
276
|
}, /*#__PURE__*/ (0, $c3ZYr$react).createElement((0, $c3ZYr$spectrumiconsuiChevronDownMedium), {
|
|
277
|
-
UNSAFE_className: (0, $c3ZYr$classNames)((0, ($parcel$interopDefault($c3ZYr$inputgroup_vars_cssmodulejs))),
|
|
277
|
+
UNSAFE_className: (0, $c3ZYr$classNames)((0, ($parcel$interopDefault($c3ZYr$inputgroup_vars_cssmodulejs))), 'spectrum-Dropdown-chevron')
|
|
278
278
|
})))));
|
|
279
279
|
});
|
|
280
280
|
/**
|