@salt-ds/lab 1.0.0-alpha.35 → 1.0.0-alpha.37
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/css/salt-lab.css +27 -159
- package/dist-cjs/calendar/internal/CalendarNavigation.js +4 -8
- package/dist-cjs/calendar/internal/CalendarNavigation.js.map +1 -1
- package/dist-cjs/combo-box/useCombobox.js.map +1 -1
- package/dist-cjs/index.js +2 -8
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/segmented-button-group/SegmentedButtonGroup.css.js +6 -0
- package/dist-cjs/segmented-button-group/SegmentedButtonGroup.css.js.map +1 -0
- package/dist-cjs/segmented-button-group/SegmentedButtonGroup.js +30 -0
- package/dist-cjs/segmented-button-group/SegmentedButtonGroup.js.map +1 -0
- package/dist-cjs/tabs-next/TabstripNext.css.js +1 -1
- package/dist-es/calendar/internal/CalendarNavigation.js +3 -7
- package/dist-es/calendar/internal/CalendarNavigation.js.map +1 -1
- package/dist-es/combo-box/useCombobox.js.map +1 -1
- package/dist-es/index.js +1 -4
- package/dist-es/index.js.map +1 -1
- package/dist-es/segmented-button-group/SegmentedButtonGroup.css.js +4 -0
- package/dist-es/segmented-button-group/SegmentedButtonGroup.css.js.map +1 -0
- package/dist-es/segmented-button-group/SegmentedButtonGroup.js +26 -0
- package/dist-es/segmented-button-group/SegmentedButtonGroup.js.map +1 -0
- package/dist-es/tabs-next/TabstripNext.css.js +1 -1
- package/dist-types/calendar/internal/CalendarNavigation.d.ts +2 -3
- package/dist-types/index.d.ts +1 -3
- package/dist-types/segmented-button-group/SegmentedButtonGroup.d.ts +4 -0
- package/dist-types/segmented-button-group/index.d.ts +1 -0
- package/package.json +2 -2
- package/dist-cjs/combo-box-next/ComboBoxNext.js +0 -338
- package/dist-cjs/combo-box-next/ComboBoxNext.js.map +0 -1
- package/dist-cjs/combo-box-next/useComboBoxNext.js +0 -68
- package/dist-cjs/combo-box-next/useComboBoxNext.js.map +0 -1
- package/dist-cjs/dropdown-next/DropdownNext.css.js +0 -6
- package/dist-cjs/dropdown-next/DropdownNext.css.js.map +0 -1
- package/dist-cjs/dropdown-next/DropdownNext.js +0 -335
- package/dist-cjs/dropdown-next/DropdownNext.js.map +0 -1
- package/dist-cjs/list-control/ListControlContext.js +0 -38
- package/dist-cjs/list-control/ListControlContext.js.map +0 -1
- package/dist-cjs/list-control/ListControlState.js +0 -192
- package/dist-cjs/list-control/ListControlState.js.map +0 -1
- package/dist-cjs/option/Option.css.js +0 -6
- package/dist-cjs/option/Option.css.js.map +0 -1
- package/dist-cjs/option/Option.js +0 -99
- package/dist-cjs/option/Option.js.map +0 -1
- package/dist-cjs/option/OptionGroup.css.js +0 -6
- package/dist-cjs/option/OptionGroup.css.js.map +0 -1
- package/dist-cjs/option/OptionGroup.js +0 -44
- package/dist-cjs/option/OptionGroup.js.map +0 -1
- package/dist-cjs/option/OptionList.css.js +0 -6
- package/dist-cjs/option/OptionList.css.js.map +0 -1
- package/dist-cjs/option/OptionList.js +0 -40
- package/dist-cjs/option/OptionList.js.map +0 -1
- package/dist-es/combo-box-next/ComboBoxNext.js +0 -334
- package/dist-es/combo-box-next/ComboBoxNext.js.map +0 -1
- package/dist-es/combo-box-next/useComboBoxNext.js +0 -64
- package/dist-es/combo-box-next/useComboBoxNext.js.map +0 -1
- package/dist-es/dropdown-next/DropdownNext.css.js +0 -4
- package/dist-es/dropdown-next/DropdownNext.css.js.map +0 -1
- package/dist-es/dropdown-next/DropdownNext.js +0 -331
- package/dist-es/dropdown-next/DropdownNext.js.map +0 -1
- package/dist-es/list-control/ListControlContext.js +0 -33
- package/dist-es/list-control/ListControlContext.js.map +0 -1
- package/dist-es/list-control/ListControlState.js +0 -187
- package/dist-es/list-control/ListControlState.js.map +0 -1
- package/dist-es/option/Option.css.js +0 -4
- package/dist-es/option/Option.css.js.map +0 -1
- package/dist-es/option/Option.js +0 -95
- package/dist-es/option/Option.js.map +0 -1
- package/dist-es/option/OptionGroup.css.js +0 -4
- package/dist-es/option/OptionGroup.css.js.map +0 -1
- package/dist-es/option/OptionGroup.js +0 -40
- package/dist-es/option/OptionGroup.js.map +0 -1
- package/dist-es/option/OptionList.css.js +0 -4
- package/dist-es/option/OptionList.css.js.map +0 -1
- package/dist-es/option/OptionList.js +0 -36
- package/dist-es/option/OptionList.js.map +0 -1
- package/dist-types/combo-box-next/ComboBoxNext.d.ts +0 -17
- package/dist-types/combo-box-next/index.d.ts +0 -1
- package/dist-types/combo-box-next/useComboBoxNext.d.ts +0 -30
- package/dist-types/dropdown-next/DropdownNext.d.ts +0 -99
- package/dist-types/dropdown-next/index.d.ts +0 -1
- package/dist-types/list-control/ListControlContext.d.ts +0 -21
- package/dist-types/list-control/ListControlState.d.ts +0 -70
- package/dist-types/option/Option.d.ts +0 -16
- package/dist-types/option/OptionGroup.d.ts +0 -12
- package/dist-types/option/OptionList.d.ts +0 -5
- package/dist-types/option/index.d.ts +0 -2
|
@@ -1,338 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
-
var React = require('react');
|
|
7
|
-
var core = require('@salt-ds/core');
|
|
8
|
-
var ListControlState = require('../list-control/ListControlState.js');
|
|
9
|
-
var ListControlContext = require('../list-control/ListControlContext.js');
|
|
10
|
-
var clsx = require('clsx');
|
|
11
|
-
var react = require('@floating-ui/react');
|
|
12
|
-
var icons = require('@salt-ds/icons');
|
|
13
|
-
var useComboBoxNext = require('./useComboBoxNext.js');
|
|
14
|
-
var OptionList = require('../option/OptionList.js');
|
|
15
|
-
|
|
16
|
-
const withBaseName = core.makePrefixer("saltComboBoxNext");
|
|
17
|
-
const ComboBoxNext = React.forwardRef(function ComboBox(props, ref) {
|
|
18
|
-
var _a, _b;
|
|
19
|
-
const {
|
|
20
|
-
children,
|
|
21
|
-
className,
|
|
22
|
-
disabled: disabledProp,
|
|
23
|
-
endAdornment,
|
|
24
|
-
readOnly: readOnlyProp,
|
|
25
|
-
multiselect,
|
|
26
|
-
onSelectionChange,
|
|
27
|
-
selected,
|
|
28
|
-
defaultSelected,
|
|
29
|
-
defaultOpen,
|
|
30
|
-
onOpenChange,
|
|
31
|
-
onChange,
|
|
32
|
-
open,
|
|
33
|
-
inputProps: inputPropsProp,
|
|
34
|
-
variant = "primary",
|
|
35
|
-
onClick,
|
|
36
|
-
onKeyDown,
|
|
37
|
-
onFocus,
|
|
38
|
-
onBlur,
|
|
39
|
-
value,
|
|
40
|
-
defaultValue,
|
|
41
|
-
valueToString = ListControlState.defaultValueToString,
|
|
42
|
-
...rest
|
|
43
|
-
} = props;
|
|
44
|
-
const {
|
|
45
|
-
a11yProps: { "aria-labelledby": formFieldLabelledBy } = {},
|
|
46
|
-
disabled: formFieldDisabled,
|
|
47
|
-
readOnly: formFieldReadOnly
|
|
48
|
-
} = core.useFormFieldProps();
|
|
49
|
-
const disabled = Boolean(disabledProp) || formFieldDisabled;
|
|
50
|
-
const readOnly = Boolean(readOnlyProp) || formFieldReadOnly;
|
|
51
|
-
const inputRef = React.useRef(null);
|
|
52
|
-
const listControl = useComboBoxNext.useComboBoxNext({
|
|
53
|
-
open,
|
|
54
|
-
defaultOpen,
|
|
55
|
-
onOpenChange,
|
|
56
|
-
multiselect,
|
|
57
|
-
defaultSelected,
|
|
58
|
-
selected,
|
|
59
|
-
onSelectionChange,
|
|
60
|
-
value,
|
|
61
|
-
defaultValue,
|
|
62
|
-
disabled,
|
|
63
|
-
readOnly,
|
|
64
|
-
valueToString
|
|
65
|
-
});
|
|
66
|
-
const {
|
|
67
|
-
activeState,
|
|
68
|
-
setActive,
|
|
69
|
-
openState,
|
|
70
|
-
setOpen,
|
|
71
|
-
openKey,
|
|
72
|
-
getOptionAtIndex,
|
|
73
|
-
getIndexOfOption,
|
|
74
|
-
getOptionsMatching,
|
|
75
|
-
options,
|
|
76
|
-
selectedState,
|
|
77
|
-
select,
|
|
78
|
-
clear,
|
|
79
|
-
focusVisibleState,
|
|
80
|
-
setFocusVisibleState,
|
|
81
|
-
focusedState,
|
|
82
|
-
setFocusedState,
|
|
83
|
-
listRef,
|
|
84
|
-
valueState,
|
|
85
|
-
setValueState
|
|
86
|
-
} = listControl;
|
|
87
|
-
const { Component: FloatingComponent } = core.useFloatingComponent();
|
|
88
|
-
const handleOpenChange = (newOpen, _event, reason) => {
|
|
89
|
-
var _a2;
|
|
90
|
-
const focusNotBlur = reason === "focus" && newOpen;
|
|
91
|
-
if (reason == "focus") {
|
|
92
|
-
setFocusedState(newOpen);
|
|
93
|
-
}
|
|
94
|
-
if (reason == "focus" && !newOpen) {
|
|
95
|
-
setFocusVisibleState(false);
|
|
96
|
-
}
|
|
97
|
-
if (readOnly || focusNotBlur)
|
|
98
|
-
return;
|
|
99
|
-
setOpen(newOpen);
|
|
100
|
-
if (newOpen) {
|
|
101
|
-
(_a2 = inputRef.current) == null ? void 0 : _a2.focus();
|
|
102
|
-
}
|
|
103
|
-
};
|
|
104
|
-
const { x, y, strategy, elements, floating, reference, context } = core.useFloatingUI({
|
|
105
|
-
open: openState && !readOnly && children != void 0,
|
|
106
|
-
onOpenChange: handleOpenChange,
|
|
107
|
-
placement: "bottom-start",
|
|
108
|
-
middleware: [
|
|
109
|
-
react.size({
|
|
110
|
-
apply({ rects, elements: elements2, availableHeight }) {
|
|
111
|
-
Object.assign(elements2.floating.style, {
|
|
112
|
-
minWidth: `${rects.reference.width}px`,
|
|
113
|
-
maxHeight: `max(calc(${availableHeight}px - var(--salt-spacing-100)), calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5))`
|
|
114
|
-
});
|
|
115
|
-
}
|
|
116
|
-
}),
|
|
117
|
-
react.flip({ fallbackStrategy: "initialPlacement" })
|
|
118
|
-
]
|
|
119
|
-
});
|
|
120
|
-
const { getReferenceProps, getFloatingProps } = react.useInteractions([
|
|
121
|
-
react.useDismiss(context),
|
|
122
|
-
react.useFocus(context),
|
|
123
|
-
react.useClick(context, { keyboardHandlers: false, toggle: false })
|
|
124
|
-
]);
|
|
125
|
-
const handleRef = core.useForkRef(reference, ref);
|
|
126
|
-
const handleButtonClick = (event) => {
|
|
127
|
-
if (!readOnly) {
|
|
128
|
-
event.stopPropagation();
|
|
129
|
-
setFocusVisibleState(false);
|
|
130
|
-
setOpen(!openState, "manual");
|
|
131
|
-
}
|
|
132
|
-
};
|
|
133
|
-
const handleButtonFocus = () => {
|
|
134
|
-
var _a2;
|
|
135
|
-
(_a2 = inputRef.current) == null ? void 0 : _a2.focus();
|
|
136
|
-
};
|
|
137
|
-
const handleKeyDown = (event) => {
|
|
138
|
-
const currentIndex = activeState ? getIndexOfOption(activeState) : -1;
|
|
139
|
-
const count = options.length - 1;
|
|
140
|
-
if (readOnly) {
|
|
141
|
-
return;
|
|
142
|
-
}
|
|
143
|
-
if (!openState) {
|
|
144
|
-
if (event.key === "ArrowDown" || event.key === "ArrowUp") {
|
|
145
|
-
setOpen(true, void 0, event.key);
|
|
146
|
-
return;
|
|
147
|
-
}
|
|
148
|
-
}
|
|
149
|
-
let newActive;
|
|
150
|
-
switch (event.key) {
|
|
151
|
-
case "ArrowDown":
|
|
152
|
-
newActive = getOptionAtIndex(Math.min(count, currentIndex + 1));
|
|
153
|
-
break;
|
|
154
|
-
case "ArrowUp":
|
|
155
|
-
newActive = getOptionAtIndex(Math.max(0, currentIndex - 1));
|
|
156
|
-
break;
|
|
157
|
-
case "Home":
|
|
158
|
-
newActive = getOptionAtIndex(0);
|
|
159
|
-
break;
|
|
160
|
-
case "End":
|
|
161
|
-
newActive = getOptionAtIndex(count);
|
|
162
|
-
break;
|
|
163
|
-
case "PageUp":
|
|
164
|
-
newActive = getOptionAtIndex(Math.max(0, currentIndex - 10));
|
|
165
|
-
break;
|
|
166
|
-
case "PageDown":
|
|
167
|
-
newActive = getOptionAtIndex(Math.min(count, currentIndex + 10));
|
|
168
|
-
break;
|
|
169
|
-
case "Enter":
|
|
170
|
-
if (openState && (activeState == null ? void 0 : activeState.disabled)) {
|
|
171
|
-
event.preventDefault();
|
|
172
|
-
return;
|
|
173
|
-
}
|
|
174
|
-
if (!openState || !activeState) {
|
|
175
|
-
return;
|
|
176
|
-
}
|
|
177
|
-
select(event, activeState);
|
|
178
|
-
if (!multiselect) {
|
|
179
|
-
event.preventDefault();
|
|
180
|
-
}
|
|
181
|
-
break;
|
|
182
|
-
case "Tab":
|
|
183
|
-
if (!multiselect && activeState) {
|
|
184
|
-
select(event, activeState);
|
|
185
|
-
}
|
|
186
|
-
break;
|
|
187
|
-
}
|
|
188
|
-
if (newActive) {
|
|
189
|
-
setFocusVisibleState(true);
|
|
190
|
-
}
|
|
191
|
-
if (newActive && (newActive == null ? void 0 : newActive.id) != (activeState == null ? void 0 : activeState.id)) {
|
|
192
|
-
event.preventDefault();
|
|
193
|
-
setActive(newActive);
|
|
194
|
-
}
|
|
195
|
-
onKeyDown == null ? void 0 : onKeyDown(event);
|
|
196
|
-
};
|
|
197
|
-
const handleFocus = (event) => {
|
|
198
|
-
setFocusedState(true);
|
|
199
|
-
onFocus == null ? void 0 : onFocus(event);
|
|
200
|
-
};
|
|
201
|
-
const handleChange = (event) => {
|
|
202
|
-
if (!openState) {
|
|
203
|
-
setOpen(true, "input");
|
|
204
|
-
}
|
|
205
|
-
if (event.target.value === "" && !multiselect) {
|
|
206
|
-
clear(event);
|
|
207
|
-
}
|
|
208
|
-
setValueState(event.target.value);
|
|
209
|
-
queueMicrotask(() => {
|
|
210
|
-
if (event.target.value !== "") {
|
|
211
|
-
const newOption = getOptionAtIndex(0);
|
|
212
|
-
if (newOption) {
|
|
213
|
-
setActive(newOption);
|
|
214
|
-
}
|
|
215
|
-
} else {
|
|
216
|
-
setActive(void 0);
|
|
217
|
-
}
|
|
218
|
-
});
|
|
219
|
-
onChange == null ? void 0 : onChange(event);
|
|
220
|
-
};
|
|
221
|
-
const handleListMouseOver = () => {
|
|
222
|
-
setFocusVisibleState(false);
|
|
223
|
-
};
|
|
224
|
-
const handleListMouseLeave = () => {
|
|
225
|
-
setActive(void 0);
|
|
226
|
-
};
|
|
227
|
-
const handleFocusInput = () => {
|
|
228
|
-
var _a2;
|
|
229
|
-
(_a2 = inputRef.current) == null ? void 0 : _a2.focus();
|
|
230
|
-
};
|
|
231
|
-
React.useEffect(() => {
|
|
232
|
-
const activeIndex = activeState ? getIndexOfOption(activeState) : -1;
|
|
233
|
-
let newActive = void 0;
|
|
234
|
-
if (activeIndex > -1) {
|
|
235
|
-
return;
|
|
236
|
-
}
|
|
237
|
-
if (!openState) {
|
|
238
|
-
setActive(void 0);
|
|
239
|
-
return;
|
|
240
|
-
}
|
|
241
|
-
if (selectedState.length > 0) {
|
|
242
|
-
newActive = getOptionsMatching(
|
|
243
|
-
(option) => option.value === selectedState[0]
|
|
244
|
-
).pop();
|
|
245
|
-
}
|
|
246
|
-
if (!newActive) {
|
|
247
|
-
if (openKey.current === "ArrowDown") {
|
|
248
|
-
newActive = getOptionAtIndex(0);
|
|
249
|
-
setFocusVisibleState(true);
|
|
250
|
-
} else if (openKey.current === "ArrowUp") {
|
|
251
|
-
newActive = getOptionAtIndex(options.length - 1);
|
|
252
|
-
setFocusVisibleState(true);
|
|
253
|
-
}
|
|
254
|
-
}
|
|
255
|
-
if (!newActive) {
|
|
256
|
-
newActive = getOptionAtIndex(0);
|
|
257
|
-
}
|
|
258
|
-
setActive(newActive);
|
|
259
|
-
}, [openState, children]);
|
|
260
|
-
const buttonId = core.useId();
|
|
261
|
-
const listId = core.useId();
|
|
262
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(ListControlContext.ListControlContext.Provider, {
|
|
263
|
-
value: listControl,
|
|
264
|
-
children: [
|
|
265
|
-
/* @__PURE__ */ jsxRuntime.jsx(core.Input, {
|
|
266
|
-
className: clsx.clsx(withBaseName(), className),
|
|
267
|
-
endAdornment: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
268
|
-
children: [
|
|
269
|
-
endAdornment,
|
|
270
|
-
!readOnly ? /* @__PURE__ */ jsxRuntime.jsx(core.Button, {
|
|
271
|
-
"aria-labelledby": clsx.clsx(buttonId, formFieldLabelledBy),
|
|
272
|
-
"aria-label": "Show options",
|
|
273
|
-
"aria-expanded": openState,
|
|
274
|
-
"aria-controls": openState ? listId : void 0,
|
|
275
|
-
"aria-haspopup": "listbox",
|
|
276
|
-
disabled,
|
|
277
|
-
variant: "secondary",
|
|
278
|
-
onClick: handleButtonClick,
|
|
279
|
-
onFocus: handleButtonFocus,
|
|
280
|
-
tabIndex: -1,
|
|
281
|
-
children: openState ? /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronUpIcon, {
|
|
282
|
-
"aria-hidden": true
|
|
283
|
-
}) : /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronDownIcon, {
|
|
284
|
-
"aria-hidden": true
|
|
285
|
-
})
|
|
286
|
-
}) : void 0
|
|
287
|
-
]
|
|
288
|
-
}),
|
|
289
|
-
onChange: handleChange,
|
|
290
|
-
role: "combobox",
|
|
291
|
-
disabled,
|
|
292
|
-
readOnly,
|
|
293
|
-
inputProps: {
|
|
294
|
-
role: "combobox",
|
|
295
|
-
"aria-expanded": openState,
|
|
296
|
-
"aria-multiselectable": multiselect,
|
|
297
|
-
"aria-controls": openState ? listId : void 0,
|
|
298
|
-
onKeyDown: handleKeyDown,
|
|
299
|
-
...inputPropsProp
|
|
300
|
-
},
|
|
301
|
-
"aria-activedescendant": activeState == null ? void 0 : activeState.id,
|
|
302
|
-
variant,
|
|
303
|
-
inputRef,
|
|
304
|
-
value: valueState,
|
|
305
|
-
ref: handleRef,
|
|
306
|
-
...getReferenceProps({
|
|
307
|
-
onBlur,
|
|
308
|
-
onFocus: handleFocus,
|
|
309
|
-
...rest
|
|
310
|
-
})
|
|
311
|
-
}),
|
|
312
|
-
/* @__PURE__ */ jsxRuntime.jsx(FloatingComponent, {
|
|
313
|
-
open: (openState || focusedState) && !readOnly && children != void 0,
|
|
314
|
-
...getFloatingProps(),
|
|
315
|
-
left: x != null ? x : 0,
|
|
316
|
-
top: y != null ? y : 0,
|
|
317
|
-
position: strategy,
|
|
318
|
-
width: (_a = elements.floating) == null ? void 0 : _a.offsetWidth,
|
|
319
|
-
height: (_b = elements.floating) == null ? void 0 : _b.offsetHeight,
|
|
320
|
-
ref: floating,
|
|
321
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(OptionList.OptionList, {
|
|
322
|
-
collapsed: !openState,
|
|
323
|
-
ref: listRef,
|
|
324
|
-
id: listId,
|
|
325
|
-
onMouseOver: handleListMouseOver,
|
|
326
|
-
onFocus: handleFocusInput,
|
|
327
|
-
onClick: handleFocusInput,
|
|
328
|
-
onMouseLeave: handleListMouseLeave,
|
|
329
|
-
tabIndex: -1,
|
|
330
|
-
children
|
|
331
|
-
})
|
|
332
|
-
})
|
|
333
|
-
]
|
|
334
|
-
});
|
|
335
|
-
});
|
|
336
|
-
|
|
337
|
-
exports.ComboBoxNext = ComboBoxNext;
|
|
338
|
-
//# sourceMappingURL=ComboBoxNext.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ComboBoxNext.js","sources":["../src/combo-box-next/ComboBoxNext.tsx"],"sourcesContent":["import {\n ChangeEvent,\n FocusEvent,\n ForwardedRef,\n forwardRef,\n KeyboardEvent,\n MouseEvent,\n ReactNode,\n Ref,\n useEffect,\n useRef,\n} from \"react\";\nimport {\n Button,\n Input,\n InputProps,\n makePrefixer,\n useFloatingComponent,\n useFloatingUI,\n UseFloatingUIProps,\n useForkRef,\n useFormFieldProps,\n useId,\n} from \"@salt-ds/core\";\nimport { defaultValueToString } from \"../list-control/ListControlState\";\nimport { ListControlContext } from \"../list-control/ListControlContext\";\nimport { clsx } from \"clsx\";\nimport {\n flip,\n size,\n useClick,\n useDismiss,\n useFocus,\n useInteractions,\n} from \"@floating-ui/react\";\nimport { ChevronDownIcon, ChevronUpIcon } from \"@salt-ds/icons\";\nimport { useComboBoxNext, UseComboBoxNextProps } from \"./useComboBoxNext\";\nimport { OptionList } from \"../option/OptionList\";\n\nexport type ComboBoxNextProps<Item = string> = {\n /**\n * The options to display in the combo box.\n */\n children?: ReactNode;\n} & UseComboBoxNextProps<Item> &\n InputProps;\n\nconst withBaseName = makePrefixer(\"saltComboBoxNext\");\n\nexport const ComboBoxNext = forwardRef(function ComboBox<Item>(\n props: ComboBoxNextProps<Item>,\n ref: ForwardedRef<HTMLDivElement>\n) {\n const {\n children,\n className,\n disabled: disabledProp,\n endAdornment,\n readOnly: readOnlyProp,\n multiselect,\n onSelectionChange,\n selected,\n defaultSelected,\n defaultOpen,\n onOpenChange,\n onChange,\n open,\n inputProps: inputPropsProp,\n variant = \"primary\",\n onClick,\n onKeyDown,\n onFocus,\n onBlur,\n value,\n defaultValue,\n valueToString = defaultValueToString,\n ...rest\n } = props;\n\n const {\n a11yProps: { \"aria-labelledby\": formFieldLabelledBy } = {},\n disabled: formFieldDisabled,\n readOnly: formFieldReadOnly,\n } = useFormFieldProps();\n\n const disabled = Boolean(disabledProp) || formFieldDisabled;\n const readOnly = Boolean(readOnlyProp) || formFieldReadOnly;\n const inputRef = useRef<HTMLInputElement>(null);\n\n const listControl = useComboBoxNext<Item>({\n open,\n defaultOpen,\n onOpenChange,\n multiselect,\n defaultSelected,\n selected,\n onSelectionChange,\n value,\n defaultValue,\n disabled,\n readOnly,\n valueToString,\n });\n\n const {\n activeState,\n setActive,\n openState,\n setOpen,\n openKey,\n getOptionAtIndex,\n getIndexOfOption,\n getOptionsMatching,\n options,\n selectedState,\n select,\n clear,\n focusVisibleState,\n setFocusVisibleState,\n focusedState,\n setFocusedState,\n listRef,\n valueState,\n setValueState,\n } = listControl;\n\n const { Component: FloatingComponent } = useFloatingComponent();\n\n const handleOpenChange: UseFloatingUIProps[\"onOpenChange\"] = (\n newOpen,\n _event,\n reason\n ) => {\n const focusNotBlur = reason === \"focus\" && newOpen;\n if (reason == \"focus\") {\n setFocusedState(newOpen);\n }\n\n if (reason == \"focus\" && !newOpen) {\n setFocusVisibleState(false);\n }\n\n if (readOnly || focusNotBlur) return;\n setOpen(newOpen);\n\n if (newOpen) {\n inputRef.current?.focus();\n }\n };\n\n const { x, y, strategy, elements, floating, reference, context } =\n useFloatingUI({\n open: openState && !readOnly && children != undefined,\n onOpenChange: handleOpenChange,\n placement: \"bottom-start\",\n middleware: [\n size({\n apply({ rects, elements, availableHeight }) {\n Object.assign(elements.floating.style, {\n minWidth: `${rects.reference.width}px`,\n maxHeight: `max(calc(${availableHeight}px - var(--salt-spacing-100)), calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5))`,\n });\n },\n }),\n flip({ fallbackStrategy: \"initialPlacement\" }),\n ],\n });\n\n const { getReferenceProps, getFloatingProps } = useInteractions([\n useDismiss(context),\n useFocus(context),\n useClick(context, { keyboardHandlers: false, toggle: false }),\n ]);\n\n const handleRef = useForkRef<HTMLDivElement>(reference, ref);\n\n const handleButtonClick = (event: MouseEvent<HTMLButtonElement>) => {\n if (!readOnly) {\n event.stopPropagation();\n setFocusVisibleState(false);\n setOpen(!openState, \"manual\");\n }\n };\n\n const handleButtonFocus = () => {\n inputRef.current?.focus();\n };\n\n const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n const currentIndex = activeState ? getIndexOfOption(activeState) : -1;\n const count = options.length - 1;\n\n if (readOnly) {\n return;\n }\n\n if (!openState) {\n if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n setOpen(true, undefined, event.key);\n return;\n }\n }\n\n let newActive;\n switch (event.key) {\n case \"ArrowDown\":\n newActive = getOptionAtIndex(Math.min(count, currentIndex + 1));\n break;\n case \"ArrowUp\":\n newActive = getOptionAtIndex(Math.max(0, currentIndex - 1));\n break;\n case \"Home\":\n newActive = getOptionAtIndex(0);\n break;\n case \"End\":\n newActive = getOptionAtIndex(count);\n break;\n case \"PageUp\":\n newActive = getOptionAtIndex(Math.max(0, currentIndex - 10));\n break;\n case \"PageDown\":\n newActive = getOptionAtIndex(Math.min(count, currentIndex + 10));\n break;\n case \"Enter\":\n if (openState && activeState?.disabled) {\n event.preventDefault();\n return;\n }\n\n if (!openState || !activeState) {\n return;\n }\n\n select(event, activeState);\n\n if (!multiselect) {\n event.preventDefault();\n }\n\n break;\n case \"Tab\":\n if (!multiselect && activeState) {\n select(event, activeState);\n }\n break;\n }\n\n if (newActive) {\n setFocusVisibleState(true);\n }\n\n if (newActive && newActive?.id != activeState?.id) {\n event.preventDefault();\n setActive(newActive);\n }\n\n onKeyDown?.(event);\n };\n\n const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n setFocusedState(true);\n onFocus?.(event);\n };\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n if (!openState) {\n setOpen(true, \"input\");\n }\n\n if (event.target.value === \"\" && !multiselect) {\n clear(event);\n }\n\n setValueState(event.target.value);\n\n // Wait for the filter to happen\n queueMicrotask(() => {\n if (event.target.value !== \"\") {\n const newOption = getOptionAtIndex(0);\n if (newOption) {\n setActive(newOption);\n }\n } else {\n setActive(undefined);\n }\n });\n onChange?.(event);\n };\n\n const handleListMouseOver = () => {\n setFocusVisibleState(false);\n };\n\n const handleListMouseLeave = () => {\n setActive(undefined);\n };\n\n const handleFocusInput = () => {\n inputRef.current?.focus();\n };\n\n useEffect(() => {\n // We check the active index because the active item may have been removed\n const activeIndex = activeState ? getIndexOfOption(activeState) : -1;\n let newActive = undefined;\n\n // If the active item is still in the list, we don't need to do anything\n if (activeIndex > -1) {\n return;\n }\n\n // If the list is closed we should clear the active item\n if (!openState) {\n setActive(undefined);\n return;\n }\n\n // If we have selected an item, we should make that the active item\n if (selectedState.length > 0) {\n newActive = getOptionsMatching(\n (option) => option.value === selectedState[0]\n ).pop();\n }\n\n // If we still don't have an active item, we should check if the list has been opened with the keyboard\n if (!newActive) {\n if (openKey.current === \"ArrowDown\") {\n newActive = getOptionAtIndex(0);\n setFocusVisibleState(true);\n } else if (openKey.current === \"ArrowUp\") {\n newActive = getOptionAtIndex(options.length - 1);\n setFocusVisibleState(true);\n }\n }\n\n // If we still don't have an active item, we should just select the first item\n if (!newActive) {\n newActive = getOptionAtIndex(0);\n }\n\n setActive(newActive);\n }, [openState, children]);\n\n const buttonId = useId();\n const listId = useId();\n\n return (\n <ListControlContext.Provider value={listControl}>\n <Input\n className={clsx(withBaseName(), className)}\n endAdornment={\n <>\n {endAdornment}\n {!readOnly ? (\n <Button\n aria-labelledby={clsx(buttonId, formFieldLabelledBy)}\n aria-label=\"Show options\"\n aria-expanded={openState}\n aria-controls={openState ? listId : undefined}\n aria-haspopup=\"listbox\"\n disabled={disabled}\n variant=\"secondary\"\n onClick={handleButtonClick}\n onFocus={handleButtonFocus}\n tabIndex={-1}\n >\n {openState ? (\n <ChevronUpIcon aria-hidden />\n ) : (\n <ChevronDownIcon aria-hidden />\n )}\n </Button>\n ) : undefined}\n </>\n }\n onChange={handleChange}\n role=\"combobox\"\n disabled={disabled}\n readOnly={readOnly}\n inputProps={{\n role: \"combobox\",\n \"aria-expanded\": openState,\n \"aria-multiselectable\": multiselect,\n \"aria-controls\": openState ? listId : undefined,\n onKeyDown: handleKeyDown,\n ...inputPropsProp,\n }}\n aria-activedescendant={activeState?.id}\n variant={variant}\n inputRef={inputRef}\n value={valueState}\n ref={handleRef}\n {...getReferenceProps({\n onBlur,\n onFocus: handleFocus,\n ...rest,\n })}\n />\n <FloatingComponent\n open={(openState || focusedState) && !readOnly && children != undefined}\n {...getFloatingProps()}\n left={x ?? 0}\n top={y ?? 0}\n position={strategy}\n width={elements.floating?.offsetWidth}\n height={elements.floating?.offsetHeight}\n ref={floating}\n >\n <OptionList\n collapsed={!openState}\n ref={listRef}\n id={listId}\n onMouseOver={handleListMouseOver}\n onFocus={handleFocusInput}\n onClick={handleFocusInput}\n onMouseLeave={handleListMouseLeave}\n tabIndex={-1}\n >\n {children}\n </OptionList>\n </FloatingComponent>\n </ListControlContext.Provider>\n );\n}) as <Item = string>(\n props: ComboBoxNextProps<Item> & { ref?: Ref<HTMLDivElement> }\n) => JSX.Element;\n"],"names":["makePrefixer","forwardRef","defaultValueToString","useFormFieldProps","useRef","useComboBoxNext","useFloatingComponent","_a","useFloatingUI","size","elements","flip","useInteractions","useDismiss","useFocus","useClick","useForkRef","useEffect","useId","jsxs","ListControlContext","jsx","Input","clsx","Fragment","Button","ChevronUpIcon","ChevronDownIcon","OptionList"],"mappings":"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"}
|
|
@@ -1,68 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var ListControlState = require('../list-control/ListControlState.js');
|
|
6
|
-
var core = require('@salt-ds/core');
|
|
7
|
-
|
|
8
|
-
function useComboBoxNext(props) {
|
|
9
|
-
const {
|
|
10
|
-
open,
|
|
11
|
-
defaultOpen,
|
|
12
|
-
onOpenChange,
|
|
13
|
-
multiselect,
|
|
14
|
-
defaultSelected,
|
|
15
|
-
selected,
|
|
16
|
-
onSelectionChange,
|
|
17
|
-
disabled,
|
|
18
|
-
readOnly,
|
|
19
|
-
valueToString,
|
|
20
|
-
value,
|
|
21
|
-
defaultValue
|
|
22
|
-
} = props;
|
|
23
|
-
const listControl = ListControlState.useListControl({
|
|
24
|
-
open,
|
|
25
|
-
defaultOpen,
|
|
26
|
-
onOpenChange,
|
|
27
|
-
multiselect,
|
|
28
|
-
defaultSelected,
|
|
29
|
-
selected,
|
|
30
|
-
onSelectionChange,
|
|
31
|
-
disabled,
|
|
32
|
-
readOnly,
|
|
33
|
-
valueToString
|
|
34
|
-
});
|
|
35
|
-
const { selectedState, getOptionsMatching, setSelectedState, setOpen } = listControl;
|
|
36
|
-
const [valueState, setValueState] = core.useControlled({
|
|
37
|
-
controlled: value,
|
|
38
|
-
default: (defaultValue != null ? defaultValue : selectedState.length === 1) ? listControl.valueToString(selectedState[0]) : defaultValue,
|
|
39
|
-
name: "ComboBoxNext",
|
|
40
|
-
state: "value"
|
|
41
|
-
});
|
|
42
|
-
const select = (event, option) => {
|
|
43
|
-
if (option.disabled || disabled || readOnly) {
|
|
44
|
-
return;
|
|
45
|
-
}
|
|
46
|
-
let newSelected = [option.value];
|
|
47
|
-
if (multiselect) {
|
|
48
|
-
if (selectedState.includes(option.value)) {
|
|
49
|
-
newSelected = selectedState.filter((item) => item !== option.value);
|
|
50
|
-
} else {
|
|
51
|
-
newSelected = selectedState.concat([option.value]);
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
setSelectedState(newSelected);
|
|
55
|
-
const newValue = getOptionsMatching(
|
|
56
|
-
(option2) => newSelected.includes(option2.value)
|
|
57
|
-
).map((option2) => listControl.valueToString(option2.value));
|
|
58
|
-
setValueState(multiselect ? "" : newValue[0]);
|
|
59
|
-
onSelectionChange == null ? void 0 : onSelectionChange(event, newSelected);
|
|
60
|
-
if (!multiselect) {
|
|
61
|
-
setOpen(false);
|
|
62
|
-
}
|
|
63
|
-
};
|
|
64
|
-
return { ...listControl, select, valueState, setValueState };
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
exports.useComboBoxNext = useComboBoxNext;
|
|
68
|
-
//# sourceMappingURL=useComboBoxNext.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useComboBoxNext.js","sources":["../src/combo-box-next/useComboBoxNext.tsx"],"sourcesContent":["import {\n useListControl,\n ListControlProps,\n} from \"../list-control/ListControlState\";\n\nimport { ComponentPropsWithoutRef, SyntheticEvent } from \"react\";\nimport { OptionValue } from \"../list-control/ListControlContext\";\nimport { useControlled } from \"@salt-ds/core\";\n\nexport type UseComboBoxNextProps<Item> = ListControlProps<Item> &\n Pick<ComponentPropsWithoutRef<\"input\">, \"value\" | \"defaultValue\">;\n\nexport function useComboBoxNext<Item>(props: UseComboBoxNextProps<Item>) {\n const {\n open,\n defaultOpen,\n onOpenChange,\n multiselect,\n defaultSelected,\n selected,\n onSelectionChange,\n disabled,\n readOnly,\n valueToString,\n value,\n defaultValue,\n } = props;\n\n const listControl = useListControl<Item>({\n open,\n defaultOpen,\n onOpenChange,\n multiselect,\n defaultSelected,\n selected,\n onSelectionChange,\n disabled,\n readOnly,\n valueToString,\n });\n\n const { selectedState, getOptionsMatching, setSelectedState, setOpen } =\n listControl;\n\n const [valueState, setValueState] = useControlled({\n controlled: value,\n default:\n defaultValue ?? selectedState.length === 1\n ? listControl.valueToString(selectedState[0])\n : defaultValue,\n name: \"ComboBoxNext\",\n state: \"value\",\n });\n\n const select = (event: SyntheticEvent, option: OptionValue<Item>) => {\n if (option.disabled || disabled || readOnly) {\n return;\n }\n\n let newSelected = [option.value];\n\n if (multiselect) {\n if (selectedState.includes(option.value)) {\n newSelected = selectedState.filter((item) => item !== option.value);\n } else {\n newSelected = selectedState.concat([option.value]);\n }\n }\n\n setSelectedState(newSelected);\n const newValue = getOptionsMatching((option) =>\n newSelected.includes(option.value)\n ).map((option) => listControl.valueToString(option.value));\n setValueState(multiselect ? \"\" : newValue[0]);\n onSelectionChange?.(event, newSelected);\n\n if (!multiselect) {\n setOpen(false);\n }\n };\n\n return { ...listControl, select, valueState, setValueState };\n}\n"],"names":["useListControl","useControlled","option"],"mappings":";;;;;;;AAYO,SAAS,gBAAsB,KAAmC,EAAA;AACvE,EAAM,MAAA;AAAA,IACJ,IAAA;AAAA,IACA,WAAA;AAAA,IACA,YAAA;AAAA,IACA,WAAA;AAAA,IACA,eAAA;AAAA,IACA,QAAA;AAAA,IACA,iBAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,aAAA;AAAA,IACA,KAAA;AAAA,IACA,YAAA;AAAA,GACE,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,cAAcA,+BAAqB,CAAA;AAAA,IACvC,IAAA;AAAA,IACA,WAAA;AAAA,IACA,YAAA;AAAA,IACA,WAAA;AAAA,IACA,eAAA;AAAA,IACA,QAAA;AAAA,IACA,iBAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,aAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,aAAA,EAAe,kBAAoB,EAAA,gBAAA,EAAkB,SAC3D,GAAA,WAAA,CAAA;AAEF,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAIC,kBAAc,CAAA;AAAA,IAChD,UAAY,EAAA,KAAA;AAAA,IACZ,OAAA,EAAA,CACE,sCAAgB,aAAc,CAAA,MAAA,KAAW,KACrC,WAAY,CAAA,aAAA,CAAc,aAAc,CAAA,CAAA,CAAE,CAC1C,GAAA,YAAA;AAAA,IACN,IAAM,EAAA,cAAA;AAAA,IACN,KAAO,EAAA,OAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAM,MAAA,MAAA,GAAS,CAAC,KAAA,EAAuB,MAA8B,KAAA;AACnE,IAAI,IAAA,MAAA,CAAO,QAAY,IAAA,QAAA,IAAY,QAAU,EAAA;AAC3C,MAAA,OAAA;AAAA,KACF;AAEA,IAAI,IAAA,WAAA,GAAc,CAAC,MAAA,CAAO,KAAK,CAAA,CAAA;AAE/B,IAAA,IAAI,WAAa,EAAA;AACf,MAAA,IAAI,aAAc,CAAA,QAAA,CAAS,MAAO,CAAA,KAAK,CAAG,EAAA;AACxC,QAAA,WAAA,GAAc,cAAc,MAAO,CAAA,CAAC,IAAS,KAAA,IAAA,KAAS,OAAO,KAAK,CAAA,CAAA;AAAA,OAC7D,MAAA;AACL,QAAA,WAAA,GAAc,aAAc,CAAA,MAAA,CAAO,CAAC,MAAA,CAAO,KAAK,CAAC,CAAA,CAAA;AAAA,OACnD;AAAA,KACF;AAEA,IAAA,gBAAA,CAAiB,WAAW,CAAA,CAAA;AAC5B,IAAA,MAAM,QAAW,GAAA,kBAAA;AAAA,MAAmB,CAACC,OAAAA,KACnC,WAAY,CAAA,QAAA,CAASA,QAAO,KAAK,CAAA;AAAA,KACnC,CAAE,IAAI,CAACA,OAAAA,KAAW,YAAY,aAAcA,CAAAA,OAAAA,CAAO,KAAK,CAAC,CAAA,CAAA;AACzD,IAAc,aAAA,CAAA,WAAA,GAAc,EAAK,GAAA,QAAA,CAAS,CAAE,CAAA,CAAA,CAAA;AAC5C,IAAA,iBAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,iBAAA,CAAoB,KAAO,EAAA,WAAA,CAAA,CAAA;AAE3B,IAAA,IAAI,CAAC,WAAa,EAAA;AAChB,MAAA,OAAA,CAAQ,KAAK,CAAA,CAAA;AAAA,KACf;AAAA,GACF,CAAA;AAEA,EAAA,OAAO,EAAE,GAAG,WAAa,EAAA,MAAA,EAAQ,YAAY,aAAc,EAAA,CAAA;AAC7D;;;;"}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var css_248z = ".saltDropdownNext {\n --dropdownNext-borderColor: var(--salt-editable-borderColor);\n --dropdownNext-color: var(--salt-content-primary-foreground);\n --dropdownNext-cursor: var(--salt-selectable-cursor-hover);\n}\n\n.saltDropdownNext {\n all: unset;\n box-sizing: border-box;\n min-width: 4em;\n width: 100%;\n background: var(--dropdownNext-background);\n cursor: var(--dropdownNext-cursor);\n min-height: var(--salt-size-base);\n border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--dropdownNext-borderColor);\n display: flex;\n align-items: center;\n padding: 0 var(--salt-spacing-100);\n gap: var(--salt-spacing-100);\n color: var(--dropdownNext-color);\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-fontWeight);\n}\n\n.saltDropdownNext:hover {\n --dropdownNext-borderColor: var(--salt-editable-borderColor-hover);\n}\n\n.saltDropdownNext:focus-visible {\n outline: var(--salt-focused-outline);\n --dropdownNext-borderColor: var(--salt-editable-borderColor-hover);\n}\n\n.saltDropdownNext-content {\n flex: 1;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n text-wrap: nowrap;\n}\n\n.saltDropdownNext-placeholder {\n color: var(--salt-content-secondary-foreground);\n font-weight: var(--salt-text-fontWeight-small);\n}\n\n.saltDropdownNext-primary {\n --dropdownNext-background: var(--salt-editable-primary-background);\n}\n\n.saltDropdownNext-secondary {\n --dropdownNext-background: var(--salt-editable-secondary-background);\n}\n\n.saltDropdownNext:disabled {\n --dropdownNext-background: var(--salt-editable-primary-background-disabled);\n --dropdownNext-borderColor: var(--salt-editable-borderColor-disabled);\n --dropdownNext-color: var(--salt-content-primary-foreground-disabled);\n --dropdownNext-cursor: var(--salt-selectable-cursor-disabled);\n}\n\n.saltDropdownNext[aria-readonly=\"true\"] {\n --dropdownNext-background: var(--salt-editable-primary-background-readonly);\n --dropdownNext-borderColor: var(--salt-editable-borderColor-readonly);\n --dropdownNext-color: var(--salt-content-primary-foreground);\n --dropdownNext-cursor: var(--salt-selectable-cursor-readonly);\n}\n\n.saltDropdownNext-error {\n --dropdownNext-background: var(--salt-status-error-background);\n --dropdownNext-borderColor: var(--salt-status-error-borderColor);\n}\n\n.saltDropdownNext-error .saltDropdownNext:focus-visible {\n outline-color: var(--salt-status-error-borderColor);\n --dropdownNext-borderColor: var(--salt-status-error-borderColor);\n}\n\n.saltDropdownNext-warning {\n --dropdownNext-background: var(--salt-status-warning-background);\n --dropdownNext-borderColor: var(--salt-status-warning-borderColor);\n}\n\n.saltDropdownNext-warning .saltDropdownNext:focus-visible {\n outline-color: var(--salt-status-warning-borderColor);\n --dropdownNext-borderColor: var(--salt-status-warning-borderColor);\n}\n\n.saltDropdownNext-success {\n --dropdownNext-background: var(--salt-status-success-background);\n --dropdownNext-borderColor: var(--salt-status-success-borderColor);\n}\n\n.saltDropdownNext-success .saltDropdownNext:focus-visible {\n outline-color: var(--salt-status-success-borderColor);\n --dropdownNext-borderColor: var(--salt-status-success-borderColor);\n}\n";
|
|
4
|
-
|
|
5
|
-
module.exports = css_248z;
|
|
6
|
-
//# sourceMappingURL=DropdownNext.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownNext.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|