@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.
@@ -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("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");
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 = "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");
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: "base"
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 === "loadingMore");
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 === "text" ? name : undefined
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 ? "invalid" : null),
162
+ validationState: props.validationState || (isInvalid ? 'invalid' : null),
163
163
  ref: inputGroupRef
164
- })), name && formValue === "key" && /*#__PURE__*/ (0, ($parcel$interopDefault($XxzjX$react))).createElement("input", {
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))), "spectrum-InputGroup-popover", {
172
- "spectrum-InputGroup-popover--quiet": isQuiet
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 === "loading" || loadingState === "loadingMore",
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))), "no-results")
195
- }, loadingState === "loading" ? stringFormatter.format("loading") : stringFormatter.format("noResults"))
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))), "@react-spectrum/combobox");
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("loading"),
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))), "spectrum-Textfield-circleLoader", (0, $XxzjX$reactspectrumutils.classNames)((0, ($parcel$interopDefault($2f86633ce5b04f1e$exports))), "spectrum-InputGroup-input-circleLoader"))
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 === "loading" || loadingState === "filtering";
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))), "is-focused"),
247
- focusRingClass: (0, $XxzjX$reactspectrumutils.classNames)((0, ($parcel$interopDefault($2f86633ce5b04f1e$exports))), "focus-ring"),
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))), "spectrum-InputGroup", {
254
- "spectrum-InputGroup--quiet": isQuiet,
255
- "is-disabled": isDisabled,
256
- "spectrum-InputGroup--invalid": validationState === "invalid" && !isDisabled,
257
- "is-hovered": isHovered
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))), "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"),
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 === "manual" || loadingState === "loading"),
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))), "spectrum-FieldButton"),
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))), "spectrum-Dropdown-chevron")
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("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");
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 = "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");
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: "base"
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 === "loadingMore");
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 === "text" ? name : undefined
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 ? "invalid" : null),
156
+ validationState: props.validationState || (isInvalid ? 'invalid' : null),
157
157
  ref: inputGroupRef
158
- })), name && formValue === "key" && /*#__PURE__*/ (0, $c3ZYr$react).createElement("input", {
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))), "spectrum-InputGroup-popover", {
166
- "spectrum-InputGroup-popover--quiet": isQuiet
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 === "loading" || loadingState === "loadingMore",
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))), "no-results")
189
- }, loadingState === "loading" ? stringFormatter.format("loading") : stringFormatter.format("noResults"))
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))), "@react-spectrum/combobox");
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("loading"),
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))), "spectrum-Textfield-circleLoader", (0, $c3ZYr$classNames)((0, ($parcel$interopDefault($c3ZYr$inputgroup_vars_cssmodulejs))), "spectrum-InputGroup-input-circleLoader"))
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 === "loading" || loadingState === "filtering";
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))), "is-focused"),
241
- focusRingClass: (0, $c3ZYr$classNames)((0, ($parcel$interopDefault($c3ZYr$inputgroup_vars_cssmodulejs))), "focus-ring"),
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))), "spectrum-InputGroup", {
248
- "spectrum-InputGroup--quiet": isQuiet,
249
- "is-disabled": isDisabled,
250
- "spectrum-InputGroup--invalid": validationState === "invalid" && !isDisabled,
251
- "is-hovered": isHovered
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))), "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"),
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 === "manual" || loadingState === "loading"),
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))), "spectrum-FieldButton"),
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))), "spectrum-Dropdown-chevron")
277
+ UNSAFE_className: (0, $c3ZYr$classNames)((0, ($parcel$interopDefault($c3ZYr$inputgroup_vars_cssmodulejs))), 'spectrum-Dropdown-chevron')
278
278
  })))));
279
279
  });
280
280
  /**
@@ -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("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");
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 = "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");
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: "base"
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 === "loadingMore");
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 === "text" ? name : undefined
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 ? "invalid" : null),
156
+ validationState: props.validationState || (isInvalid ? 'invalid' : null),
157
157
  ref: inputGroupRef
158
- })), name && formValue === "key" && /*#__PURE__*/ (0, $c3ZYr$react).createElement("input", {
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))), "spectrum-InputGroup-popover", {
166
- "spectrum-InputGroup-popover--quiet": isQuiet
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 === "loading" || loadingState === "loadingMore",
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))), "no-results")
189
- }, loadingState === "loading" ? stringFormatter.format("loading") : stringFormatter.format("noResults"))
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))), "@react-spectrum/combobox");
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("loading"),
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))), "spectrum-Textfield-circleLoader", (0, $c3ZYr$classNames)((0, ($parcel$interopDefault($c3ZYr$inputgroup_vars_cssmodulejs))), "spectrum-InputGroup-input-circleLoader"))
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 === "loading" || loadingState === "filtering";
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))), "is-focused"),
241
- focusRingClass: (0, $c3ZYr$classNames)((0, ($parcel$interopDefault($c3ZYr$inputgroup_vars_cssmodulejs))), "focus-ring"),
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))), "spectrum-InputGroup", {
248
- "spectrum-InputGroup--quiet": isQuiet,
249
- "is-disabled": isDisabled,
250
- "spectrum-InputGroup--invalid": validationState === "invalid" && !isDisabled,
251
- "is-hovered": isHovered
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))), "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"),
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 === "manual" || loadingState === "loading"),
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))), "spectrum-FieldButton"),
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))), "spectrum-Dropdown-chevron")
277
+ UNSAFE_className: (0, $c3ZYr$classNames)((0, ($parcel$interopDefault($c3ZYr$inputgroup_vars_cssmodulejs))), 'spectrum-Dropdown-chevron')
278
278
  })))));
279
279
  });
280
280
  /**