@bigbinary/neeto-atoms 1.0.104 → 1.0.105
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-DriZMj4f.js → Combobox-NgubHftk.js} +2 -2
- package/dist/{Combobox-DriZMj4f.js.map → Combobox-NgubHftk.js.map} +1 -1
- package/dist/{Select-N5Ten-tn.js → Select-ZWR0HFCa.js} +253 -85
- package/dist/Select-ZWR0HFCa.js.map +1 -0
- package/dist/{SelectFieldWrapper-D98IWsW5.js → SelectFieldWrapper-D370CD4o.js} +8 -1
- package/dist/SelectFieldWrapper-D370CD4o.js.map +1 -0
- package/dist/{TreeSelect-DMbr7J2H.js → TreeSelect-rrTHwY42.js} +2 -2
- package/dist/{TreeSelect-DMbr7J2H.js.map → TreeSelect-rrTHwY42.js.map} +1 -1
- package/dist/cjs/{Combobox-BE8LT4yq.js → Combobox-PAGcNUr6.js} +2 -2
- package/dist/cjs/{Combobox-BE8LT4yq.js.map → Combobox-PAGcNUr6.js.map} +1 -1
- package/dist/cjs/{Select-CGG3J9NS.js → Select-VQCROyX1.js} +252 -84
- package/dist/cjs/Select-VQCROyX1.js.map +1 -0
- package/dist/cjs/{SelectFieldWrapper-BLVvwUcK.js → SelectFieldWrapper-CIh_atln.js} +8 -1
- package/dist/cjs/SelectFieldWrapper-CIh_atln.js.map +1 -0
- package/dist/cjs/{TreeSelect-3APPRsqr.js → TreeSelect-DDQx8FPS.js} +2 -2
- package/dist/cjs/{TreeSelect-3APPRsqr.js.map → TreeSelect-DDQx8FPS.js.map} +1 -1
- package/dist/cjs/components/Select.js +4 -4
- package/dist/cjs/components/TreeSelect.js +2 -2
- package/dist/cjs/components/index.js +4 -4
- package/dist/cjs/formik/Select.js +4 -4
- package/dist/cjs/formik/TreeSelect.js +2 -2
- package/dist/cjs/formik/index.js +5 -5
- package/dist/cjs/index.js +4 -4
- package/dist/cjs/primitives/AlertDialog.js +6 -38
- package/dist/cjs/primitives/AlertDialog.js.map +1 -1
- package/dist/cjs/primitives/Combobox.js +2 -2
- package/dist/cjs/primitives/index.js +1 -1
- package/dist/components/Select/MultiSelectCombobox.types.d.ts +6 -0
- package/dist/components/Select/SelectAnchor.d.ts +19 -1
- package/dist/components/Select/SelectCombobox.types.d.ts +12 -2
- package/dist/components/Select/SelectFieldWrapper.d.ts +7 -1
- package/dist/components/Select/constants.d.ts +1 -0
- package/dist/components/Select/hooks/useCreatableItems.d.ts +3 -1
- package/dist/components/Select/hooks/useMultiSelectState.d.ts +7 -1
- package/dist/components/Select/hooks/useSelectState.d.ts +7 -1
- package/dist/components/Select/types.d.ts +23 -0
- package/dist/components/Select/utils.d.ts +13 -0
- package/dist/components/Select.js +4 -4
- package/dist/components/TreeSelect.js +2 -2
- package/dist/components/index.js +4 -4
- package/dist/formik/Select.js +4 -4
- package/dist/formik/TreeSelect.js +2 -2
- package/dist/formik/index.js +5 -5
- package/dist/index.js +4 -4
- package/dist/primitives/AlertDialog.js +6 -38
- package/dist/primitives/AlertDialog.js.map +1 -1
- package/dist/primitives/Combobox.js +2 -2
- package/dist/primitives/index.js +1 -1
- package/package.json +1 -1
- package/dist/Select-N5Ten-tn.js.map +0 -1
- package/dist/SelectFieldWrapper-D98IWsW5.js.map +0 -1
- package/dist/cjs/Select-CGG3J9NS.js.map +0 -1
- package/dist/cjs/SelectFieldWrapper-BLVvwUcK.js.map +0 -1
|
@@ -3,9 +3,9 @@
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var fieldIds = require('./fieldIds-DiVU6GVS.js');
|
|
6
|
-
var SelectFieldWrapper = require('./SelectFieldWrapper-
|
|
6
|
+
var SelectFieldWrapper = require('./SelectFieldWrapper-CIh_atln.js');
|
|
7
7
|
var utils = require('./utils-BhM0B89p.js');
|
|
8
|
-
var primitives_Combobox = require('./Combobox-
|
|
8
|
+
var primitives_Combobox = require('./Combobox-PAGcNUr6.js');
|
|
9
9
|
var primitives_Spinner = require('./primitives/Spinner.js');
|
|
10
10
|
var x = require('./x-Brw3FJst.js');
|
|
11
11
|
var chevronDown = require('./chevron-down-CPsWSS51.js');
|
|
@@ -110,6 +110,28 @@ function useLazyLoadSentinel({
|
|
|
110
110
|
return sentinelRef;
|
|
111
111
|
}
|
|
112
112
|
|
|
113
|
+
const INPUT_CHANGE_REASON = "input-change";
|
|
114
|
+
const SIZE_CONFIG = {
|
|
115
|
+
small: {
|
|
116
|
+
chips: "min-h-8 md:min-h-7 text-base md:text-xs gap-0.5 px-1 py-0.5",
|
|
117
|
+
input: "text-base md:text-xs",
|
|
118
|
+
chip: "h-4.5 text-[0.6875rem] px-1",
|
|
119
|
+
icon: "size-3.5"
|
|
120
|
+
},
|
|
121
|
+
medium: {
|
|
122
|
+
chips: "min-h-8 text-base md:text-sm gap-1 px-2.5 py-1",
|
|
123
|
+
input: "text-base md:text-sm",
|
|
124
|
+
chip: "h-5.25 text-xs px-1.5",
|
|
125
|
+
icon: "size-4"
|
|
126
|
+
},
|
|
127
|
+
large: {
|
|
128
|
+
chips: "min-h-10 text-base md:text-sm gap-1 px-2.5 py-1.5",
|
|
129
|
+
input: "text-base md:text-sm",
|
|
130
|
+
chip: "h-6 text-xs px-2",
|
|
131
|
+
icon: "size-5"
|
|
132
|
+
}
|
|
133
|
+
};
|
|
134
|
+
|
|
113
135
|
const CREATE_PREFIX = "__create__:";
|
|
114
136
|
const isCreateValue = (val) => typeof val === "string" && val.startsWith(CREATE_PREFIX);
|
|
115
137
|
function useCreatableItems({
|
|
@@ -125,9 +147,11 @@ function useCreatableItems({
|
|
|
125
147
|
}) {
|
|
126
148
|
const [inputValue, setInputValue] = React.useState("");
|
|
127
149
|
const handleInputValueChange = React.useCallback(
|
|
128
|
-
(value) => {
|
|
129
|
-
|
|
130
|
-
|
|
150
|
+
(value, details) => {
|
|
151
|
+
const isTyping = details?.reason === INPUT_CHANGE_REASON;
|
|
152
|
+
const nextValue = isTyping ? value : "";
|
|
153
|
+
setInputValue(nextValue);
|
|
154
|
+
if (isTyping) onAsyncInputChange?.(nextValue);
|
|
131
155
|
},
|
|
132
156
|
[onAsyncInputChange]
|
|
133
157
|
);
|
|
@@ -186,6 +210,13 @@ function isOptionGroup(opt) {
|
|
|
186
210
|
return "options" in opt && Array.isArray(opt.options);
|
|
187
211
|
}
|
|
188
212
|
|
|
213
|
+
function assignRef(ref, element) {
|
|
214
|
+
if (typeof ref === "function") {
|
|
215
|
+
ref(element);
|
|
216
|
+
} else if (ref) {
|
|
217
|
+
ref.current = element;
|
|
218
|
+
}
|
|
219
|
+
}
|
|
189
220
|
function normalizeOption(option, getValue, getLabel) {
|
|
190
221
|
if (!getValue && !getLabel) return option;
|
|
191
222
|
return {
|
|
@@ -221,6 +252,16 @@ function toBaseUiItems(options) {
|
|
|
221
252
|
}
|
|
222
253
|
return options.map((o) => o.value);
|
|
223
254
|
}
|
|
255
|
+
function resolveIsSearchable({
|
|
256
|
+
isSearchable,
|
|
257
|
+
searchThreshold,
|
|
258
|
+
optionCount,
|
|
259
|
+
isCountKnown
|
|
260
|
+
}) {
|
|
261
|
+
if (!isSearchable) return false;
|
|
262
|
+
if (searchThreshold === void 0 || !isCountKnown) return true;
|
|
263
|
+
return optionCount >= searchThreshold;
|
|
264
|
+
}
|
|
224
265
|
function computeEffectiveItems(children, baseUiItems, showCreateOption, isGrouped, trimmedInput) {
|
|
225
266
|
if (children) return void 0;
|
|
226
267
|
const createValue = showCreateOption ? `${CREATE_PREFIX}${trimmedInput}` : null;
|
|
@@ -268,27 +309,6 @@ function useMultiSelectOptions(props) {
|
|
|
268
309
|
};
|
|
269
310
|
}
|
|
270
311
|
|
|
271
|
-
const SIZE_CONFIG = {
|
|
272
|
-
small: {
|
|
273
|
-
chips: "min-h-8 md:min-h-7 text-base md:text-xs gap-0.5 px-1 py-0.5",
|
|
274
|
-
input: "text-base md:text-xs",
|
|
275
|
-
chip: "h-4.5 text-[0.6875rem] px-1",
|
|
276
|
-
icon: "size-3.5"
|
|
277
|
-
},
|
|
278
|
-
medium: {
|
|
279
|
-
chips: "min-h-8 text-base md:text-sm gap-1 px-2.5 py-1",
|
|
280
|
-
input: "text-base md:text-sm",
|
|
281
|
-
chip: "h-5.25 text-xs px-1.5",
|
|
282
|
-
icon: "size-4"
|
|
283
|
-
},
|
|
284
|
-
large: {
|
|
285
|
-
chips: "min-h-10 text-base md:text-sm gap-1 px-2.5 py-1.5",
|
|
286
|
-
input: "text-base md:text-sm",
|
|
287
|
-
chip: "h-6 text-xs px-2",
|
|
288
|
-
icon: "size-5"
|
|
289
|
-
}
|
|
290
|
-
};
|
|
291
|
-
|
|
292
312
|
const defaultFormatCreateLabel$1 = (v) => `Create "${v}"`;
|
|
293
313
|
function useSelectState(props) {
|
|
294
314
|
const {
|
|
@@ -309,7 +329,11 @@ function useSelectState(props) {
|
|
|
309
329
|
isClearable = false,
|
|
310
330
|
isDisabled = false,
|
|
311
331
|
required = false,
|
|
312
|
-
isSearchable = true,
|
|
332
|
+
isSearchable: isSearchableProp = true,
|
|
333
|
+
searchPosition = "trigger",
|
|
334
|
+
searchPlaceholder = "Search...",
|
|
335
|
+
searchThreshold,
|
|
336
|
+
isAsyncLoadOptionEnabled = false,
|
|
313
337
|
autoHighlight = true,
|
|
314
338
|
onOpenChange,
|
|
315
339
|
children
|
|
@@ -319,6 +343,7 @@ function useSelectState(props) {
|
|
|
319
343
|
const id = idProp ?? generatedId;
|
|
320
344
|
const errorId = `error_${id}`;
|
|
321
345
|
const helpTextId = `helpText_${id}`;
|
|
346
|
+
const labelId = `label_${id}`;
|
|
322
347
|
const sizeConfig = SIZE_CONFIG[size];
|
|
323
348
|
const isControlled = valueProp !== void 0;
|
|
324
349
|
const [internalValue, setInternalValue] = React.useState(
|
|
@@ -348,9 +373,11 @@ function useSelectState(props) {
|
|
|
348
373
|
const [inputValue, setInputValueState] = React.useState("");
|
|
349
374
|
const trimmedInput = inputValue.trim();
|
|
350
375
|
const combinedHandleInputValueChange = React.useCallback(
|
|
351
|
-
(value) => {
|
|
352
|
-
|
|
353
|
-
|
|
376
|
+
(value, details) => {
|
|
377
|
+
const isTyping = details?.reason === INPUT_CHANGE_REASON;
|
|
378
|
+
const nextValue = isTyping ? value : "";
|
|
379
|
+
setInputValueState(nextValue);
|
|
380
|
+
if (isTyping && opt.isAsync) opt.handleAsyncInputChange(nextValue);
|
|
354
381
|
},
|
|
355
382
|
[opt.isAsync, opt.handleAsyncInputChange]
|
|
356
383
|
);
|
|
@@ -400,6 +427,12 @@ function useSelectState(props) {
|
|
|
400
427
|
);
|
|
401
428
|
const testIdPrefix = fieldIds.buildTestIdPrefix(dataTestId, label);
|
|
402
429
|
const showClearButton = isClearable && !!currentValue && !isDisabled;
|
|
430
|
+
const isSearchable = resolveIsSearchable({
|
|
431
|
+
isSearchable: isSearchableProp,
|
|
432
|
+
searchThreshold,
|
|
433
|
+
optionCount: opt.flatOptions.length,
|
|
434
|
+
isCountKnown: !opt.isAsync && !isCreatable && !isAsyncLoadOptionEnabled
|
|
435
|
+
});
|
|
403
436
|
const flatOptionsMap = React.useMemo(
|
|
404
437
|
() => new Map(opt.flatOptions.map((o) => [o.value, o])),
|
|
405
438
|
[opt.flatOptions]
|
|
@@ -438,6 +471,7 @@ function useSelectState(props) {
|
|
|
438
471
|
id,
|
|
439
472
|
errorId,
|
|
440
473
|
helpTextId,
|
|
474
|
+
labelId,
|
|
441
475
|
sizeConfig,
|
|
442
476
|
isControlled,
|
|
443
477
|
currentValue,
|
|
@@ -460,6 +494,9 @@ function useSelectState(props) {
|
|
|
460
494
|
isDisabled,
|
|
461
495
|
required,
|
|
462
496
|
isSearchable,
|
|
497
|
+
searchPosition,
|
|
498
|
+
searchPlaceholder,
|
|
499
|
+
inputValue,
|
|
463
500
|
autoHighlight,
|
|
464
501
|
onOpenChange,
|
|
465
502
|
isClearable
|
|
@@ -482,6 +519,11 @@ function useMultiSelectState(props) {
|
|
|
482
519
|
onCreateOption,
|
|
483
520
|
formatCreateLabel = defaultFormatCreateLabel,
|
|
484
521
|
formatOptionLabel,
|
|
522
|
+
isSearchable: isSearchableProp = true,
|
|
523
|
+
searchPosition = "trigger",
|
|
524
|
+
searchPlaceholder = "Search...",
|
|
525
|
+
searchThreshold,
|
|
526
|
+
isAsyncLoadOptionEnabled = false,
|
|
485
527
|
children
|
|
486
528
|
} = props;
|
|
487
529
|
const opt = useMultiSelectOptions(props);
|
|
@@ -489,7 +531,14 @@ function useMultiSelectState(props) {
|
|
|
489
531
|
const id = idProp ?? generatedId;
|
|
490
532
|
const errorId = `error_${id}`;
|
|
491
533
|
const helpTextId = `helpText_${id}`;
|
|
534
|
+
const labelId = `label_${id}`;
|
|
492
535
|
const sizeConfig = SIZE_CONFIG[size];
|
|
536
|
+
const isSearchable = resolveIsSearchable({
|
|
537
|
+
isSearchable: isSearchableProp,
|
|
538
|
+
searchThreshold,
|
|
539
|
+
optionCount: opt.flatOptions.length,
|
|
540
|
+
isCountKnown: !opt.isAsync && !isCreatable && !isAsyncLoadOptionEnabled
|
|
541
|
+
});
|
|
493
542
|
const isControlled = valueProp !== void 0;
|
|
494
543
|
const [internalValue, setInternalValue] = React.useState(
|
|
495
544
|
defaultValue ?? []
|
|
@@ -554,9 +603,13 @@ function useMultiSelectState(props) {
|
|
|
554
603
|
id,
|
|
555
604
|
errorId,
|
|
556
605
|
helpTextId,
|
|
606
|
+
labelId,
|
|
557
607
|
sizeConfig,
|
|
558
608
|
isControlled,
|
|
559
609
|
selectedValues,
|
|
610
|
+
isSearchable,
|
|
611
|
+
searchPosition,
|
|
612
|
+
searchPlaceholder,
|
|
560
613
|
effectiveItems,
|
|
561
614
|
creatableFilter,
|
|
562
615
|
handleInputValueChange,
|
|
@@ -657,9 +710,12 @@ function MultiSelectDropdown({
|
|
|
657
710
|
);
|
|
658
711
|
}
|
|
659
712
|
|
|
713
|
+
const omitUndefined = (props) => Object.fromEntries(
|
|
714
|
+
Object.entries(props).filter(([, value]) => value !== void 0)
|
|
715
|
+
);
|
|
660
716
|
const SelectAnchor = React.forwardRef(
|
|
661
|
-
({
|
|
662
|
-
if (
|
|
717
|
+
({ renderAsTrigger, className, dataTestId, triggerFieldProps, children }, ref) => {
|
|
718
|
+
if (!renderAsTrigger) {
|
|
663
719
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
664
720
|
"div",
|
|
665
721
|
{
|
|
@@ -670,15 +726,21 @@ const SelectAnchor = React.forwardRef(
|
|
|
670
726
|
}
|
|
671
727
|
);
|
|
672
728
|
}
|
|
729
|
+
const { id, ...ariaProps } = triggerFieldProps ?? {};
|
|
673
730
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
674
731
|
primitives_Combobox.ComboboxTrigger$1,
|
|
675
732
|
{
|
|
676
733
|
nativeButton: false,
|
|
677
|
-
|
|
734
|
+
...id ? { id } : {},
|
|
735
|
+
render: ({ ref: baseUiRef, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
678
736
|
"div",
|
|
679
737
|
{
|
|
680
738
|
...props,
|
|
681
|
-
|
|
739
|
+
...omitUndefined(ariaProps),
|
|
740
|
+
ref: (element) => {
|
|
741
|
+
assignRef(baseUiRef, element);
|
|
742
|
+
assignRef(ref, element);
|
|
743
|
+
},
|
|
682
744
|
className,
|
|
683
745
|
...dataTestId ? { "data-testid": dataTestId } : {}
|
|
684
746
|
}
|
|
@@ -694,11 +756,15 @@ const SelectCombobox = React.forwardRef(
|
|
|
694
756
|
({
|
|
695
757
|
name,
|
|
696
758
|
id,
|
|
759
|
+
labelId,
|
|
697
760
|
effectiveItems,
|
|
698
761
|
labelForValue,
|
|
699
762
|
renderOption,
|
|
700
763
|
renderTrigger,
|
|
701
764
|
isSearchable,
|
|
765
|
+
searchPosition,
|
|
766
|
+
searchPlaceholder,
|
|
767
|
+
inputValue,
|
|
702
768
|
isAsync,
|
|
703
769
|
isCreatable,
|
|
704
770
|
creatableFilter,
|
|
@@ -722,6 +788,20 @@ const SelectCombobox = React.forwardRef(
|
|
|
722
788
|
children
|
|
723
789
|
}, ref) => {
|
|
724
790
|
const [anchorEl, setAnchorEl] = React.useState(null);
|
|
791
|
+
const isContentSearch = isSearchable && searchPosition === "content";
|
|
792
|
+
const renderTriggerInput = searchPosition !== "content";
|
|
793
|
+
const isTriggerSearch = isSearchable && renderTriggerInput;
|
|
794
|
+
const useTriggerAnchor = !isTriggerSearch;
|
|
795
|
+
const showValue = !!currentValue && (!isTriggerSearch || inputValue === "");
|
|
796
|
+
const showPlaceholder = !currentValue && !isTriggerSearch;
|
|
797
|
+
const setTriggerEl = React.useCallback(
|
|
798
|
+
(element) => {
|
|
799
|
+
setAnchorEl(element);
|
|
800
|
+
if (renderTriggerInput) return;
|
|
801
|
+
assignRef(ref, element);
|
|
802
|
+
},
|
|
803
|
+
[ref, renderTriggerInput]
|
|
804
|
+
);
|
|
725
805
|
const handleClearClick = React.useCallback(
|
|
726
806
|
(event) => {
|
|
727
807
|
event.stopPropagation();
|
|
@@ -743,7 +823,8 @@ const SelectCombobox = React.forwardRef(
|
|
|
743
823
|
} : {},
|
|
744
824
|
value: currentValue,
|
|
745
825
|
onValueChange: handleValueChange,
|
|
746
|
-
|
|
826
|
+
inputValue,
|
|
827
|
+
onInputValueChange: handleInputValueChange,
|
|
747
828
|
onOpenChange,
|
|
748
829
|
disabled: isDisabled,
|
|
749
830
|
autoHighlight,
|
|
@@ -751,10 +832,17 @@ const SelectCombobox = React.forwardRef(
|
|
|
751
832
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
752
833
|
SelectAnchor,
|
|
753
834
|
{
|
|
754
|
-
ref:
|
|
755
|
-
isSearchable,
|
|
835
|
+
ref: setTriggerEl,
|
|
756
836
|
dataTestId: testIdPrefix,
|
|
757
|
-
|
|
837
|
+
renderAsTrigger: useTriggerAnchor,
|
|
838
|
+
className: useTriggerAnchor ? "cursor-pointer" : void 0,
|
|
839
|
+
triggerFieldProps: renderTriggerInput ? void 0 : {
|
|
840
|
+
id,
|
|
841
|
+
"aria-labelledby": labelId,
|
|
842
|
+
"aria-describedby": ariaDescribedBy,
|
|
843
|
+
"aria-required": required || void 0,
|
|
844
|
+
"aria-invalid": !!error || void 0
|
|
845
|
+
},
|
|
758
846
|
children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
759
847
|
primitives_Combobox.ComboboxChips,
|
|
760
848
|
{
|
|
@@ -765,24 +853,28 @@ const SelectCombobox = React.forwardRef(
|
|
|
765
853
|
),
|
|
766
854
|
...testIdPrefix ? { "data-testid": `${testIdPrefix}-select-container` } : {},
|
|
767
855
|
children: [
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
856
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid min-w-0 flex-1 items-center [&>*]:col-start-1 [&>*]:row-start-1", children: [
|
|
857
|
+
showValue && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: renderTrigger(currentValue) }),
|
|
858
|
+
showPlaceholder && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate text-muted-foreground", children: placeholder }),
|
|
859
|
+
renderTriggerInput && /* @__PURE__ */ jsxRuntime.jsx(
|
|
860
|
+
primitives_Combobox.ComboboxChipsInput,
|
|
861
|
+
{
|
|
862
|
+
ref,
|
|
863
|
+
id,
|
|
864
|
+
placeholder: isTriggerSearch && !currentValue ? placeholder : void 0,
|
|
865
|
+
"aria-invalid": !!error || void 0,
|
|
866
|
+
"aria-describedby": ariaDescribedBy,
|
|
867
|
+
"aria-required": required || void 0,
|
|
868
|
+
className: utils.cn(
|
|
869
|
+
sizeConfig.input,
|
|
870
|
+
"w-full min-w-0",
|
|
871
|
+
!isSearchable && "w-0 overflow-hidden p-0 opacity-0"
|
|
872
|
+
),
|
|
873
|
+
disabled: isDisabled,
|
|
874
|
+
...testIdPrefix ? { "data-testid": `${testIdPrefix}-select-input` } : {}
|
|
875
|
+
}
|
|
876
|
+
)
|
|
877
|
+
] }),
|
|
786
878
|
showClearButton && /* @__PURE__ */ jsxRuntime.jsx(
|
|
787
879
|
"button",
|
|
788
880
|
{
|
|
@@ -794,7 +886,7 @@ const SelectCombobox = React.forwardRef(
|
|
|
794
886
|
children: /* @__PURE__ */ jsxRuntime.jsx(x.X, { className: sizeConfig.icon })
|
|
795
887
|
}
|
|
796
888
|
),
|
|
797
|
-
|
|
889
|
+
isTriggerSearch ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
798
890
|
primitives_Combobox.ComboboxTrigger,
|
|
799
891
|
{
|
|
800
892
|
className: utils.cn(
|
|
@@ -817,15 +909,26 @@ const SelectCombobox = React.forwardRef(
|
|
|
817
909
|
)
|
|
818
910
|
}
|
|
819
911
|
),
|
|
820
|
-
/* @__PURE__ */ jsxRuntime.
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
912
|
+
/* @__PURE__ */ jsxRuntime.jsxs(primitives_Combobox.ComboboxContent, { anchor: anchorEl, ...contentProps, children: [
|
|
913
|
+
isContentSearch && /* @__PURE__ */ jsxRuntime.jsx(
|
|
914
|
+
primitives_Combobox.ComboboxInput,
|
|
915
|
+
{
|
|
916
|
+
showTrigger: false,
|
|
917
|
+
placeholder: searchPlaceholder,
|
|
918
|
+
...labelId ? { "aria-labelledby": labelId } : { "aria-label": searchPlaceholder },
|
|
919
|
+
...testIdPrefix ? { "data-testid": `${testIdPrefix}-select-input` } : {}
|
|
920
|
+
}
|
|
921
|
+
),
|
|
922
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
923
|
+
MultiSelectDropdown,
|
|
924
|
+
{
|
|
925
|
+
...dropdownProps,
|
|
926
|
+
renderOption,
|
|
927
|
+
testIdPrefix,
|
|
928
|
+
children
|
|
929
|
+
}
|
|
930
|
+
)
|
|
931
|
+
] })
|
|
829
932
|
]
|
|
830
933
|
}
|
|
831
934
|
)
|
|
@@ -838,10 +941,13 @@ const MultiSelectCombobox = React.forwardRef(
|
|
|
838
941
|
({
|
|
839
942
|
name,
|
|
840
943
|
id,
|
|
944
|
+
labelId,
|
|
841
945
|
effectiveItems,
|
|
842
946
|
labelForValue,
|
|
843
947
|
renderOption,
|
|
844
948
|
isSearchable,
|
|
949
|
+
searchPosition,
|
|
950
|
+
searchPlaceholder,
|
|
845
951
|
isAsync,
|
|
846
952
|
isCreatable,
|
|
847
953
|
creatableFilter,
|
|
@@ -868,6 +974,18 @@ const MultiSelectCombobox = React.forwardRef(
|
|
|
868
974
|
children
|
|
869
975
|
}, ref) => {
|
|
870
976
|
const [anchorEl, setAnchorEl] = React.useState(null);
|
|
977
|
+
const isContentSearch = isSearchable && searchPosition === "content";
|
|
978
|
+
const renderTriggerInput = searchPosition !== "content";
|
|
979
|
+
const isTriggerSearch = isSearchable && renderTriggerInput;
|
|
980
|
+
const useTriggerAnchor = !isTriggerSearch;
|
|
981
|
+
const setTriggerEl = React.useCallback(
|
|
982
|
+
(element) => {
|
|
983
|
+
setAnchorEl(element);
|
|
984
|
+
if (renderTriggerInput) return;
|
|
985
|
+
assignRef(ref, element);
|
|
986
|
+
},
|
|
987
|
+
[ref, renderTriggerInput]
|
|
988
|
+
);
|
|
871
989
|
return (
|
|
872
990
|
// @ts-expect-error — conditional spread creates a union that TS cannot narrow to the Combobox discriminated-union props
|
|
873
991
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
@@ -890,9 +1008,16 @@ const MultiSelectCombobox = React.forwardRef(
|
|
|
890
1008
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
891
1009
|
SelectAnchor,
|
|
892
1010
|
{
|
|
893
|
-
ref:
|
|
894
|
-
|
|
895
|
-
className:
|
|
1011
|
+
ref: setTriggerEl,
|
|
1012
|
+
renderAsTrigger: useTriggerAnchor,
|
|
1013
|
+
className: useTriggerAnchor ? "cursor-pointer" : void 0,
|
|
1014
|
+
triggerFieldProps: renderTriggerInput ? void 0 : {
|
|
1015
|
+
id,
|
|
1016
|
+
"aria-labelledby": labelId,
|
|
1017
|
+
"aria-describedby": ariaDescribedBy,
|
|
1018
|
+
"aria-required": required || void 0,
|
|
1019
|
+
"aria-invalid": !!error || void 0
|
|
1020
|
+
},
|
|
896
1021
|
children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
897
1022
|
primitives_Combobox.ComboboxChips,
|
|
898
1023
|
{
|
|
@@ -904,22 +1029,23 @@ const MultiSelectCombobox = React.forwardRef(
|
|
|
904
1029
|
),
|
|
905
1030
|
...testIdPrefix ? { "data-testid": `${testIdPrefix}-select-container` } : {},
|
|
906
1031
|
children: [
|
|
907
|
-
selectedValues.map((val) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
1032
|
+
selectedValues.map((val, index) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
908
1033
|
primitives_Combobox.ComboboxChip,
|
|
909
1034
|
{
|
|
910
1035
|
className: sizeConfig.chip,
|
|
911
1036
|
showRemove: !hideChipRemove,
|
|
1037
|
+
...renderTriggerInput || isDisabled ? {} : { tabIndex: index === 0 ? 0 : -1 },
|
|
912
1038
|
...testIdPrefix ? { "data-testid": `${testIdPrefix}-chip` } : {},
|
|
913
1039
|
children: renderOption(val)
|
|
914
1040
|
},
|
|
915
1041
|
val
|
|
916
1042
|
)),
|
|
917
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1043
|
+
renderTriggerInput ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
918
1044
|
primitives_Combobox.ComboboxChipsInput,
|
|
919
1045
|
{
|
|
920
1046
|
ref,
|
|
921
1047
|
id,
|
|
922
|
-
placeholder:
|
|
1048
|
+
placeholder: isTriggerSearch && selectedValues.length === 0 ? placeholder : void 0,
|
|
923
1049
|
"aria-invalid": !!error || void 0,
|
|
924
1050
|
"aria-describedby": ariaDescribedBy,
|
|
925
1051
|
"aria-required": required || void 0,
|
|
@@ -930,21 +1056,44 @@ const MultiSelectCombobox = React.forwardRef(
|
|
|
930
1056
|
disabled: isDisabled,
|
|
931
1057
|
...testIdPrefix ? { "data-testid": `${testIdPrefix}-select-input` } : {}
|
|
932
1058
|
}
|
|
933
|
-
)
|
|
1059
|
+
) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
1060
|
+
selectedValues.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate text-muted-foreground", children: placeholder }),
|
|
1061
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1062
|
+
chevronDown.ChevronDown,
|
|
1063
|
+
{
|
|
1064
|
+
"aria-hidden": true,
|
|
1065
|
+
className: utils.cn(
|
|
1066
|
+
"pointer-events-none ms-auto shrink-0 text-muted-foreground",
|
|
1067
|
+
sizeConfig.icon
|
|
1068
|
+
)
|
|
1069
|
+
}
|
|
1070
|
+
)
|
|
1071
|
+
] })
|
|
934
1072
|
]
|
|
935
1073
|
}
|
|
936
1074
|
)
|
|
937
1075
|
}
|
|
938
1076
|
),
|
|
939
|
-
/* @__PURE__ */ jsxRuntime.
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
|
|
1077
|
+
/* @__PURE__ */ jsxRuntime.jsxs(primitives_Combobox.ComboboxContent, { anchor: anchorEl, ...contentProps, children: [
|
|
1078
|
+
isContentSearch && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1079
|
+
primitives_Combobox.ComboboxInput,
|
|
1080
|
+
{
|
|
1081
|
+
showTrigger: false,
|
|
1082
|
+
placeholder: searchPlaceholder,
|
|
1083
|
+
...labelId ? { "aria-labelledby": labelId } : { "aria-label": searchPlaceholder },
|
|
1084
|
+
...testIdPrefix ? { "data-testid": `${testIdPrefix}-select-input` } : {}
|
|
1085
|
+
}
|
|
1086
|
+
),
|
|
1087
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1088
|
+
MultiSelectDropdown,
|
|
1089
|
+
{
|
|
1090
|
+
...dropdownProps,
|
|
1091
|
+
renderOption,
|
|
1092
|
+
testIdPrefix,
|
|
1093
|
+
children
|
|
1094
|
+
}
|
|
1095
|
+
)
|
|
1096
|
+
] })
|
|
948
1097
|
]
|
|
949
1098
|
}
|
|
950
1099
|
)
|
|
@@ -962,6 +1111,7 @@ const SingleSelectInner = React.forwardRef(
|
|
|
962
1111
|
helpText,
|
|
963
1112
|
errorId,
|
|
964
1113
|
helpTextId,
|
|
1114
|
+
labelId,
|
|
965
1115
|
isDisabled,
|
|
966
1116
|
required,
|
|
967
1117
|
testIdPrefix,
|
|
@@ -970,6 +1120,9 @@ const SingleSelectInner = React.forwardRef(
|
|
|
970
1120
|
renderOption,
|
|
971
1121
|
renderTrigger,
|
|
972
1122
|
isSearchable,
|
|
1123
|
+
searchPosition,
|
|
1124
|
+
searchPlaceholder,
|
|
1125
|
+
inputValue,
|
|
973
1126
|
isAsync,
|
|
974
1127
|
creatableFilter,
|
|
975
1128
|
isControlled,
|
|
@@ -1003,17 +1156,23 @@ const SingleSelectInner = React.forwardRef(
|
|
|
1003
1156
|
testIdPrefix,
|
|
1004
1157
|
labelProps: props.labelProps,
|
|
1005
1158
|
className: props.className,
|
|
1159
|
+
labelId,
|
|
1160
|
+
focusTargetOnLabelClick: searchPosition === "content",
|
|
1006
1161
|
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1007
1162
|
SelectCombobox,
|
|
1008
1163
|
{
|
|
1009
1164
|
ref,
|
|
1010
1165
|
name: props.name,
|
|
1011
1166
|
id,
|
|
1167
|
+
labelId: label ? labelId : void 0,
|
|
1012
1168
|
effectiveItems,
|
|
1013
1169
|
labelForValue,
|
|
1014
1170
|
renderOption,
|
|
1015
1171
|
renderTrigger,
|
|
1016
1172
|
isSearchable,
|
|
1173
|
+
searchPosition,
|
|
1174
|
+
searchPlaceholder,
|
|
1175
|
+
inputValue,
|
|
1017
1176
|
isAsync,
|
|
1018
1177
|
isCreatable: props.isCreatable ?? false,
|
|
1019
1178
|
creatableFilter,
|
|
@@ -1065,10 +1224,14 @@ const MultiSelectInner = React.forwardRef(
|
|
|
1065
1224
|
helpText,
|
|
1066
1225
|
errorId,
|
|
1067
1226
|
helpTextId,
|
|
1227
|
+
labelId,
|
|
1068
1228
|
testIdPrefix,
|
|
1069
1229
|
effectiveItems,
|
|
1070
1230
|
labelForValue,
|
|
1071
1231
|
renderOption,
|
|
1232
|
+
isSearchable,
|
|
1233
|
+
searchPosition,
|
|
1234
|
+
searchPlaceholder,
|
|
1072
1235
|
isAsync,
|
|
1073
1236
|
creatableFilter,
|
|
1074
1237
|
isControlled,
|
|
@@ -1100,16 +1263,21 @@ const MultiSelectInner = React.forwardRef(
|
|
|
1100
1263
|
testIdPrefix,
|
|
1101
1264
|
labelProps: props.labelProps,
|
|
1102
1265
|
className: props.className,
|
|
1266
|
+
labelId,
|
|
1267
|
+
focusTargetOnLabelClick: searchPosition === "content",
|
|
1103
1268
|
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1104
1269
|
MultiSelectCombobox,
|
|
1105
1270
|
{
|
|
1106
1271
|
ref,
|
|
1107
1272
|
name: props.name,
|
|
1108
1273
|
id,
|
|
1274
|
+
labelId: label ? labelId : void 0,
|
|
1109
1275
|
effectiveItems,
|
|
1110
1276
|
labelForValue,
|
|
1111
1277
|
renderOption,
|
|
1112
|
-
isSearchable
|
|
1278
|
+
isSearchable,
|
|
1279
|
+
searchPosition,
|
|
1280
|
+
searchPlaceholder,
|
|
1113
1281
|
isAsync,
|
|
1114
1282
|
isCreatable: props.isCreatable ?? false,
|
|
1115
1283
|
creatableFilter,
|
|
@@ -1196,4 +1364,4 @@ const Select = React.forwardRef((props, ref) => {
|
|
|
1196
1364
|
Select.displayName = "Select";
|
|
1197
1365
|
|
|
1198
1366
|
exports.Select = Select;
|
|
1199
|
-
//# sourceMappingURL=Select-
|
|
1367
|
+
//# sourceMappingURL=Select-VQCROyX1.js.map
|