@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.
Files changed (53) hide show
  1. package/dist/{Combobox-DriZMj4f.js → Combobox-NgubHftk.js} +2 -2
  2. package/dist/{Combobox-DriZMj4f.js.map → Combobox-NgubHftk.js.map} +1 -1
  3. package/dist/{Select-N5Ten-tn.js → Select-ZWR0HFCa.js} +253 -85
  4. package/dist/Select-ZWR0HFCa.js.map +1 -0
  5. package/dist/{SelectFieldWrapper-D98IWsW5.js → SelectFieldWrapper-D370CD4o.js} +8 -1
  6. package/dist/SelectFieldWrapper-D370CD4o.js.map +1 -0
  7. package/dist/{TreeSelect-DMbr7J2H.js → TreeSelect-rrTHwY42.js} +2 -2
  8. package/dist/{TreeSelect-DMbr7J2H.js.map → TreeSelect-rrTHwY42.js.map} +1 -1
  9. package/dist/cjs/{Combobox-BE8LT4yq.js → Combobox-PAGcNUr6.js} +2 -2
  10. package/dist/cjs/{Combobox-BE8LT4yq.js.map → Combobox-PAGcNUr6.js.map} +1 -1
  11. package/dist/cjs/{Select-CGG3J9NS.js → Select-VQCROyX1.js} +252 -84
  12. package/dist/cjs/Select-VQCROyX1.js.map +1 -0
  13. package/dist/cjs/{SelectFieldWrapper-BLVvwUcK.js → SelectFieldWrapper-CIh_atln.js} +8 -1
  14. package/dist/cjs/SelectFieldWrapper-CIh_atln.js.map +1 -0
  15. package/dist/cjs/{TreeSelect-3APPRsqr.js → TreeSelect-DDQx8FPS.js} +2 -2
  16. package/dist/cjs/{TreeSelect-3APPRsqr.js.map → TreeSelect-DDQx8FPS.js.map} +1 -1
  17. package/dist/cjs/components/Select.js +4 -4
  18. package/dist/cjs/components/TreeSelect.js +2 -2
  19. package/dist/cjs/components/index.js +4 -4
  20. package/dist/cjs/formik/Select.js +4 -4
  21. package/dist/cjs/formik/TreeSelect.js +2 -2
  22. package/dist/cjs/formik/index.js +5 -5
  23. package/dist/cjs/index.js +4 -4
  24. package/dist/cjs/primitives/AlertDialog.js +6 -38
  25. package/dist/cjs/primitives/AlertDialog.js.map +1 -1
  26. package/dist/cjs/primitives/Combobox.js +2 -2
  27. package/dist/cjs/primitives/index.js +1 -1
  28. package/dist/components/Select/MultiSelectCombobox.types.d.ts +6 -0
  29. package/dist/components/Select/SelectAnchor.d.ts +19 -1
  30. package/dist/components/Select/SelectCombobox.types.d.ts +12 -2
  31. package/dist/components/Select/SelectFieldWrapper.d.ts +7 -1
  32. package/dist/components/Select/constants.d.ts +1 -0
  33. package/dist/components/Select/hooks/useCreatableItems.d.ts +3 -1
  34. package/dist/components/Select/hooks/useMultiSelectState.d.ts +7 -1
  35. package/dist/components/Select/hooks/useSelectState.d.ts +7 -1
  36. package/dist/components/Select/types.d.ts +23 -0
  37. package/dist/components/Select/utils.d.ts +13 -0
  38. package/dist/components/Select.js +4 -4
  39. package/dist/components/TreeSelect.js +2 -2
  40. package/dist/components/index.js +4 -4
  41. package/dist/formik/Select.js +4 -4
  42. package/dist/formik/TreeSelect.js +2 -2
  43. package/dist/formik/index.js +5 -5
  44. package/dist/index.js +4 -4
  45. package/dist/primitives/AlertDialog.js +6 -38
  46. package/dist/primitives/AlertDialog.js.map +1 -1
  47. package/dist/primitives/Combobox.js +2 -2
  48. package/dist/primitives/index.js +1 -1
  49. package/package.json +1 -1
  50. package/dist/Select-N5Ten-tn.js.map +0 -1
  51. package/dist/SelectFieldWrapper-D98IWsW5.js.map +0 -1
  52. package/dist/cjs/Select-CGG3J9NS.js.map +0 -1
  53. 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-BLVvwUcK.js');
6
+ var SelectFieldWrapper = require('./SelectFieldWrapper-CIh_atln.js');
7
7
  var utils = require('./utils-BhM0B89p.js');
8
- var primitives_Combobox = require('./Combobox-BE8LT4yq.js');
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
- setInputValue(value);
130
- onAsyncInputChange?.(value);
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
- setInputValueState(value);
353
- if (opt.isAsync) opt.handleAsyncInputChange(value);
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
- ({ isSearchable, className, dataTestId, children }, ref) => {
662
- if (isSearchable) {
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
- render: (props) => /* @__PURE__ */ jsxRuntime.jsx(
734
+ ...id ? { id } : {},
735
+ render: ({ ref: baseUiRef, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
678
736
  "div",
679
737
  {
680
738
  ...props,
681
- ref,
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
- ...isCreatable || isAsync ? { onInputValueChange: handleInputValueChange } : {},
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: setAnchorEl,
755
- isSearchable,
835
+ ref: setTriggerEl,
756
836
  dataTestId: testIdPrefix,
757
- className: !isSearchable ? "cursor-pointer" : void 0,
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
- !isSearchable && (currentValue ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: renderTrigger(currentValue) }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate text-muted-foreground", children: placeholder })),
769
- /* @__PURE__ */ jsxRuntime.jsx(
770
- primitives_Combobox.ComboboxChipsInput,
771
- {
772
- ref,
773
- id,
774
- placeholder: isSearchable && !currentValue ? placeholder : void 0,
775
- "aria-invalid": !!error || void 0,
776
- "aria-describedby": ariaDescribedBy,
777
- "aria-required": required || void 0,
778
- className: utils.cn(
779
- sizeConfig.input,
780
- !isSearchable && "w-0 min-w-0 overflow-hidden p-0 opacity-0"
781
- ),
782
- disabled: isDisabled,
783
- ...testIdPrefix ? { "data-testid": `${testIdPrefix}-select-input` } : {}
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
- isSearchable ? /* @__PURE__ */ jsxRuntime.jsx(
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.jsx(primitives_Combobox.ComboboxContent, { anchor: anchorEl, ...contentProps, children: /* @__PURE__ */ jsxRuntime.jsx(
821
- MultiSelectDropdown,
822
- {
823
- ...dropdownProps,
824
- renderOption,
825
- testIdPrefix,
826
- children
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: setAnchorEl,
894
- isSearchable,
895
- className: !isSearchable ? "cursor-pointer" : void 0,
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: isSearchable && selectedValues.length === 0 ? placeholder : void 0,
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.jsx(primitives_Combobox.ComboboxContent, { anchor: anchorEl, ...contentProps, children: /* @__PURE__ */ jsxRuntime.jsx(
940
- MultiSelectDropdown,
941
- {
942
- ...dropdownProps,
943
- renderOption,
944
- testIdPrefix,
945
- children
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: props.isSearchable ?? true,
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-CGG3J9NS.js.map
1367
+ //# sourceMappingURL=Select-VQCROyX1.js.map