@sustaina/shared-ui 1.32.0 → 1.33.1

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/index.js CHANGED
@@ -59,6 +59,8 @@ var modifiers = require('@dnd-kit/modifiers');
59
59
  var zod = require('zod');
60
60
  var Cropper = require('react-easy-crop');
61
61
  var reactNumberFormat = require('react-number-format');
62
+ var cmdk = require('cmdk');
63
+ var reactVirtual = require('@tanstack/react-virtual');
62
64
 
63
65
  function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
64
66
 
@@ -4251,6 +4253,25 @@ var useTruncated = ({
4251
4253
  return isTruncated;
4252
4254
  };
4253
4255
  var useTruncated_default = useTruncated;
4256
+ var useControllableState = ({
4257
+ defaultValue,
4258
+ value
4259
+ }) => {
4260
+ const [internalValue, setInternalValue] = React4__namespace.useState(value ?? defaultValue);
4261
+ React4__namespace.useEffect(() => {
4262
+ if (value !== internalValue) {
4263
+ setInternalValue(value);
4264
+ }
4265
+ }, [value]);
4266
+ const updateState = React4__namespace.useCallback((nextValue) => {
4267
+ setInternalValue(nextValue);
4268
+ }, []);
4269
+ return {
4270
+ value: internalValue,
4271
+ updateState
4272
+ };
4273
+ };
4274
+ var useControllableState_default = useControllableState;
4254
4275
  var HeaderCell = ({
4255
4276
  rootClassName,
4256
4277
  labelClassName,
@@ -9774,8 +9795,9 @@ var Navbar = ({
9774
9795
  mainButtonText && /* @__PURE__ */ jsxRuntime.jsx(
9775
9796
  Button,
9776
9797
  {
9798
+ variant: "cottonYellowDark",
9777
9799
  disabled: mainButtonDisable,
9778
- className: cn("bg-sus-secondary-1 hover:bg-sus-secondary-hover", mainButtonClassName),
9800
+ className: mainButtonClassName,
9779
9801
  size: "lg",
9780
9802
  onClick: onMainButtonClick,
9781
9803
  children: mainButtonText
@@ -10151,7 +10173,7 @@ var Truncated = ({
10151
10173
  Tooltip,
10152
10174
  {
10153
10175
  ...tooltipProps,
10154
- open,
10176
+ open: tooltipProps?.disabled ? false : open,
10155
10177
  onOpenChange: (open2) => {
10156
10178
  setOpen(isTruncated && open2);
10157
10179
  },
@@ -10435,6 +10457,551 @@ var ActionMenu = ({
10435
10457
  )
10436
10458
  ] });
10437
10459
  };
10460
+ function Dialog3({ ...props }) {
10461
+ return /* @__PURE__ */ jsxRuntime.jsx(SheetPrimitive__namespace.Root, { "data-slot": "dialog", ...props });
10462
+ }
10463
+ function DialogPortal3({ ...props }) {
10464
+ return /* @__PURE__ */ jsxRuntime.jsx(SheetPrimitive__namespace.Portal, { "data-slot": "dialog-portal", ...props });
10465
+ }
10466
+ function DialogOverlay3({ className, ...props }) {
10467
+ return /* @__PURE__ */ jsxRuntime.jsx(
10468
+ SheetPrimitive__namespace.Overlay,
10469
+ {
10470
+ "data-slot": "dialog-overlay",
10471
+ className: cn(
10472
+ "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
10473
+ className
10474
+ ),
10475
+ ...props
10476
+ }
10477
+ );
10478
+ }
10479
+ function DialogContent3({
10480
+ className,
10481
+ children,
10482
+ showCloseButton = true,
10483
+ ...props
10484
+ }) {
10485
+ return /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal3, { "data-slot": "dialog-portal", children: [
10486
+ /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay3, {}),
10487
+ /* @__PURE__ */ jsxRuntime.jsxs(
10488
+ SheetPrimitive__namespace.Content,
10489
+ {
10490
+ "data-slot": "dialog-content",
10491
+ className: cn(
10492
+ "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
10493
+ className
10494
+ ),
10495
+ ...props,
10496
+ children: [
10497
+ children,
10498
+ showCloseButton && /* @__PURE__ */ jsxRuntime.jsxs(
10499
+ SheetPrimitive__namespace.Close,
10500
+ {
10501
+ "data-slot": "dialog-close",
10502
+ className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
10503
+ children: [
10504
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {}),
10505
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
10506
+ ]
10507
+ }
10508
+ )
10509
+ ]
10510
+ }
10511
+ )
10512
+ ] });
10513
+ }
10514
+ function DialogHeader3({ className, ...props }) {
10515
+ return /* @__PURE__ */ jsxRuntime.jsx(
10516
+ "div",
10517
+ {
10518
+ "data-slot": "dialog-header",
10519
+ className: cn("flex flex-col gap-2 text-center sm:text-left", className),
10520
+ ...props
10521
+ }
10522
+ );
10523
+ }
10524
+ function DialogTitle3({ className, ...props }) {
10525
+ return /* @__PURE__ */ jsxRuntime.jsx(
10526
+ SheetPrimitive__namespace.Title,
10527
+ {
10528
+ "data-slot": "dialog-title",
10529
+ className: cn("text-lg leading-none font-semibold", className),
10530
+ ...props
10531
+ }
10532
+ );
10533
+ }
10534
+ function DialogDescription3({
10535
+ className,
10536
+ ...props
10537
+ }) {
10538
+ return /* @__PURE__ */ jsxRuntime.jsx(
10539
+ SheetPrimitive__namespace.Description,
10540
+ {
10541
+ "data-slot": "dialog-description",
10542
+ className: cn("text-muted-foreground text-sm", className),
10543
+ ...props
10544
+ }
10545
+ );
10546
+ }
10547
+ function Command({ className, ...props }) {
10548
+ return /* @__PURE__ */ jsxRuntime.jsx(
10549
+ cmdk.Command,
10550
+ {
10551
+ "data-slot": "command",
10552
+ className: cn(
10553
+ "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
10554
+ className
10555
+ ),
10556
+ ...props
10557
+ }
10558
+ );
10559
+ }
10560
+ function CommandDialog({
10561
+ title = "Command Palette",
10562
+ description = "Search for a command to run...",
10563
+ children,
10564
+ className,
10565
+ showCloseButton = true,
10566
+ ...props
10567
+ }) {
10568
+ return /* @__PURE__ */ jsxRuntime.jsxs(Dialog3, { ...props, children: [
10569
+ /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader3, { className: "sr-only", children: [
10570
+ /* @__PURE__ */ jsxRuntime.jsx(DialogTitle3, { children: title }),
10571
+ /* @__PURE__ */ jsxRuntime.jsx(DialogDescription3, { children: description })
10572
+ ] }),
10573
+ /* @__PURE__ */ jsxRuntime.jsx(DialogContent3, { className: cn("overflow-hidden p-0", className), showCloseButton, children: /* @__PURE__ */ jsxRuntime.jsx(Command, { className: "[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children }) })
10574
+ ] });
10575
+ }
10576
+ function CommandInput({ className, ...props }) {
10577
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "command-input-wrapper", className: "flex h-9 items-center gap-2 border-b px-3", children: [
10578
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SearchIcon, { className: "size-4 shrink-0 opacity-50" }),
10579
+ /* @__PURE__ */ jsxRuntime.jsx(
10580
+ cmdk.Command.Input,
10581
+ {
10582
+ "data-slot": "command-input",
10583
+ className: cn(
10584
+ "placeholder:text-sus-gray-1 flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
10585
+ className
10586
+ ),
10587
+ ...props
10588
+ }
10589
+ )
10590
+ ] });
10591
+ }
10592
+ function CommandList({ className, ...props }) {
10593
+ return /* @__PURE__ */ jsxRuntime.jsx(
10594
+ cmdk.Command.List,
10595
+ {
10596
+ "data-slot": "command-list",
10597
+ className: cn("max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto", className),
10598
+ ...props
10599
+ }
10600
+ );
10601
+ }
10602
+ function CommandEmpty({ className, ...props }) {
10603
+ return /* @__PURE__ */ jsxRuntime.jsx(
10604
+ cmdk.Command.Empty,
10605
+ {
10606
+ "data-slot": "command-empty",
10607
+ className: cn("py-6 text-center text-sm", className),
10608
+ ...props
10609
+ }
10610
+ );
10611
+ }
10612
+ function CommandGroup({ className, ...props }) {
10613
+ return /* @__PURE__ */ jsxRuntime.jsx(
10614
+ cmdk.Command.Group,
10615
+ {
10616
+ "data-slot": "command-group",
10617
+ className: cn(
10618
+ "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
10619
+ className
10620
+ ),
10621
+ ...props
10622
+ }
10623
+ );
10624
+ }
10625
+ function CommandSeparator({
10626
+ className,
10627
+ ...props
10628
+ }) {
10629
+ return /* @__PURE__ */ jsxRuntime.jsx(
10630
+ cmdk.Command.Separator,
10631
+ {
10632
+ "data-slot": "command-separator",
10633
+ className: cn("bg-border -mx-1 h-px", className),
10634
+ ...props
10635
+ }
10636
+ );
10637
+ }
10638
+ function CommandItem({ className, ...props }) {
10639
+ return /* @__PURE__ */ jsxRuntime.jsx(
10640
+ cmdk.Command.Item,
10641
+ {
10642
+ "data-slot": "command-item",
10643
+ className: cn(
10644
+ "hover:bg-[#EAF5EE] hover:text-sus-green-2 bg-white text-black relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
10645
+ "[&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
10646
+ className
10647
+ ),
10648
+ ...props
10649
+ }
10650
+ );
10651
+ }
10652
+ function CommandShortcut({ className, ...props }) {
10653
+ return /* @__PURE__ */ jsxRuntime.jsx(
10654
+ "span",
10655
+ {
10656
+ "data-slot": "command-shortcut",
10657
+ className: cn("text-muted-foreground ml-auto text-xs tracking-widest", className),
10658
+ ...props
10659
+ }
10660
+ );
10661
+ }
10662
+ var useFieldNames = ({
10663
+ fieldNames
10664
+ }) => {
10665
+ const { label: labelFieldKey = "label", value: valueFieldKey = "value" } = fieldNames || {};
10666
+ const getLabelField = React4__namespace.default.useCallback(
10667
+ (option) => {
10668
+ return option?.[labelFieldKey];
10669
+ },
10670
+ [labelFieldKey]
10671
+ );
10672
+ const getValueField = React4__namespace.default.useCallback(
10673
+ (option) => {
10674
+ return option?.[valueFieldKey];
10675
+ },
10676
+ [valueFieldKey]
10677
+ );
10678
+ return {
10679
+ getLabelField,
10680
+ getValueField
10681
+ };
10682
+ };
10683
+ var useFieldNames_default = useFieldNames;
10684
+ var ROW_HEIGHT = 32;
10685
+ var MIN_HEIGHT_EMPTY = 76;
10686
+ var VirtualizedCommand = ({
10687
+ name,
10688
+ height = 292,
10689
+ options,
10690
+ emptyContent = "No data.",
10691
+ searchPlaceholder,
10692
+ value,
10693
+ notFoundContent = "Not item found.",
10694
+ showSearch = true,
10695
+ fieldNames,
10696
+ disabledOption,
10697
+ filterOption,
10698
+ onSelect,
10699
+ labelRender,
10700
+ onBlur,
10701
+ onFocus
10702
+ }) => {
10703
+ const { getLabelField, getValueField } = useFieldNames_default({ fieldNames });
10704
+ const internalOptions = React4__namespace.useMemo(() => options ?? [], [options]);
10705
+ const [filteredOptions, setFilteredOptions] = React4__namespace.useState(internalOptions);
10706
+ const [focusedIndex, setFocusedIndex] = React4__namespace.useState(0);
10707
+ const [isKeyboardNavActive, setIsKeyboardNavActive] = React4__namespace.useState(false);
10708
+ const parentRef = React4__namespace.useRef(null);
10709
+ const virtualizer = reactVirtual.useVirtualizer({
10710
+ count: filteredOptions.length,
10711
+ getScrollElement: () => parentRef.current,
10712
+ estimateSize: () => ROW_HEIGHT,
10713
+ overscan: 2
10714
+ });
10715
+ const virtualOptions = virtualizer.getVirtualItems();
10716
+ const dynamicHeight = React4__namespace.useMemo(() => {
10717
+ const contentHeight = filteredOptions.length * ROW_HEIGHT;
10718
+ if (contentHeight <= 0) {
10719
+ return MIN_HEIGHT_EMPTY;
10720
+ }
10721
+ return Math.max(ROW_HEIGHT, Math.min(height, contentHeight));
10722
+ }, [filteredOptions.length, height]);
10723
+ const scrollToIndex = React4__namespace.useCallback(
10724
+ (index) => {
10725
+ virtualizer.scrollToIndex(index, {
10726
+ align: "center"
10727
+ });
10728
+ },
10729
+ [virtualizer]
10730
+ );
10731
+ const handleSearch = React4__namespace.useCallback(
10732
+ (search) => {
10733
+ setIsKeyboardNavActive(false);
10734
+ setFilteredOptions(
10735
+ internalOptions.filter((option) => {
10736
+ if (typeof filterOption === "function") {
10737
+ return filterOption(search, option);
10738
+ }
10739
+ const labelValue = getLabelField(option);
10740
+ return labelValue?.toString()?.toLowerCase()?.includes?.(search.toLowerCase());
10741
+ })
10742
+ );
10743
+ },
10744
+ [filterOption, getLabelField, internalOptions]
10745
+ );
10746
+ const handleKeyDown = React4__namespace.useCallback(
10747
+ (event) => {
10748
+ switch (event.key) {
10749
+ case "ArrowDown": {
10750
+ event.preventDefault();
10751
+ setIsKeyboardNavActive(true);
10752
+ setFocusedIndex((prev) => {
10753
+ const newIndex = prev === -1 ? 0 : Math.min(prev + 1, filteredOptions.length - 1);
10754
+ scrollToIndex(newIndex);
10755
+ return newIndex;
10756
+ });
10757
+ break;
10758
+ }
10759
+ case "ArrowUp": {
10760
+ event.preventDefault();
10761
+ setIsKeyboardNavActive(true);
10762
+ setFocusedIndex((prev) => {
10763
+ const newIndex = prev === -1 ? filteredOptions.length - 1 : Math.max(prev - 1, 0);
10764
+ scrollToIndex(newIndex);
10765
+ return newIndex;
10766
+ });
10767
+ break;
10768
+ }
10769
+ case "Enter": {
10770
+ event.preventDefault();
10771
+ const option = filteredOptions?.[focusedIndex];
10772
+ if (option) {
10773
+ onSelect?.(getValueField(option), option);
10774
+ }
10775
+ break;
10776
+ }
10777
+ }
10778
+ },
10779
+ [filteredOptions, focusedIndex, getValueField, onSelect, scrollToIndex]
10780
+ );
10781
+ React4__namespace.useEffect(() => {
10782
+ if (value) {
10783
+ const option = filteredOptions.find((option2) => {
10784
+ const optionValue = getValueField(option2);
10785
+ return optionValue === value;
10786
+ });
10787
+ if (option) {
10788
+ const index = filteredOptions.indexOf(option);
10789
+ setFocusedIndex(index);
10790
+ virtualizer.scrollToIndex(index, { align: "center" });
10791
+ }
10792
+ }
10793
+ }, [value, filteredOptions, virtualizer, getValueField]);
10794
+ return /* @__PURE__ */ jsxRuntime.jsxs(Command, { shouldFilter: false, onKeyDown: handleKeyDown, onFocus, onBlur, children: [
10795
+ showSearch && /* @__PURE__ */ jsxRuntime.jsx(
10796
+ CommandInput,
10797
+ {
10798
+ onValueChange: handleSearch,
10799
+ placeholder: searchPlaceholder,
10800
+ "data-testid": `command-input-${name}`
10801
+ }
10802
+ ),
10803
+ /* @__PURE__ */ jsxRuntime.jsxs(
10804
+ CommandList,
10805
+ {
10806
+ ref: parentRef,
10807
+ className: "max-h-none",
10808
+ style: {
10809
+ height: dynamicHeight,
10810
+ width: "100%",
10811
+ overflow: "auto"
10812
+ },
10813
+ onMouseDown: () => setIsKeyboardNavActive(false),
10814
+ onMouseMove: () => setIsKeyboardNavActive(false),
10815
+ children: [
10816
+ /* @__PURE__ */ jsxRuntime.jsx(CommandEmpty, { "data-testid": `command-item-empty-${name}`, children: internalOptions.length === 0 ? emptyContent : notFoundContent }),
10817
+ /* @__PURE__ */ jsxRuntime.jsx(
10818
+ CommandGroup,
10819
+ {
10820
+ style: {
10821
+ height: `${virtualizer.getTotalSize()}px`,
10822
+ width: "100%",
10823
+ position: "relative"
10824
+ },
10825
+ children: virtualOptions.map((virtualOption, index) => {
10826
+ const option = filteredOptions[virtualOption.index];
10827
+ const optionLabel = getLabelField(option);
10828
+ const optionValue = getValueField(option);
10829
+ const labelRendered = labelRender ? labelRender(filteredOptions[virtualOption.index]) : optionLabel;
10830
+ return /* @__PURE__ */ jsxRuntime.jsxs(
10831
+ CommandItem,
10832
+ {
10833
+ className: cn("absolute left-0 top-0 w-full flex items-center justify-between", {
10834
+ "bg-sus-secondary-green-3 text-sus-green-2": focusedIndex === virtualOption.index,
10835
+ "aria-selected:bg-white aria-selected:text-black pointer-events-none": isKeyboardNavActive && focusedIndex !== virtualOption.index
10836
+ }),
10837
+ style: {
10838
+ height: `${virtualOption.size}px`,
10839
+ transform: `translateY(${virtualOption.start}px)`
10840
+ },
10841
+ value: optionValue,
10842
+ onMouseEnter: () => !isKeyboardNavActive && setFocusedIndex(virtualOption.index),
10843
+ onMouseLeave: () => !isKeyboardNavActive && setFocusedIndex(-1),
10844
+ onSelect: (selectedValue) => onSelect?.(selectedValue, option),
10845
+ disabled: disabledOption?.(option),
10846
+ "data-testid": `command-item-${index}-${optionValue}`,
10847
+ children: [
10848
+ typeof labelRendered === "string" ? /* @__PURE__ */ jsxRuntime.jsx(truncated_default, { tooltipProps: { disabled: true }, children: labelRendered }) : labelRendered,
10849
+ /* @__PURE__ */ jsxRuntime.jsx(
10850
+ lucideReact.Check,
10851
+ {
10852
+ className: cn(
10853
+ "mr-2 size-2 hover:text-sus-green-2",
10854
+ value === optionValue ? "opacity-100" : "opacity-0"
10855
+ )
10856
+ }
10857
+ )
10858
+ ]
10859
+ },
10860
+ optionValue
10861
+ );
10862
+ })
10863
+ }
10864
+ )
10865
+ ]
10866
+ }
10867
+ )
10868
+ ] });
10869
+ };
10870
+ var VirtualizedCommand_default = VirtualizedCommand;
10871
+ var ComboboxInner = ({
10872
+ name,
10873
+ dropdownName,
10874
+ defaultValue,
10875
+ className,
10876
+ options,
10877
+ value,
10878
+ disabled,
10879
+ placeholder: placeholder2,
10880
+ fieldNames,
10881
+ showClear = false,
10882
+ onSelect,
10883
+ onFocus,
10884
+ onBlur,
10885
+ disabledOption,
10886
+ emptyContent,
10887
+ filterOption,
10888
+ height,
10889
+ labelRender,
10890
+ notFoundContent,
10891
+ searchPlaceholder,
10892
+ showSearch,
10893
+ ...props
10894
+ }, ref) => {
10895
+ const { getValueField } = useFieldNames_default({ fieldNames });
10896
+ const [open, setOpen] = React4__namespace.useState(false);
10897
+ const { value: selectedValue, updateState: setSelectedValue } = useControllableState_default({
10898
+ defaultValue,
10899
+ value
10900
+ });
10901
+ const renderValue = React4__namespace.useMemo(() => {
10902
+ if (!selectedValue) return placeholder2;
10903
+ const selectedOptionFound = options?.find((option) => {
10904
+ const optionValue = getValueField(option);
10905
+ return optionValue === selectedValue;
10906
+ });
10907
+ return selectedOptionFound ? getValueField(selectedOptionFound) : null;
10908
+ }, [getValueField, options, placeholder2, selectedValue]);
10909
+ const handleSelect = React4__namespace.useCallback(
10910
+ (selected, option) => {
10911
+ setSelectedValue(selected);
10912
+ setOpen(false);
10913
+ if (typeof onSelect === "function") {
10914
+ onSelect(selected, option);
10915
+ }
10916
+ },
10917
+ [onSelect, setSelectedValue]
10918
+ );
10919
+ const handleClear = React4__namespace.useCallback(
10920
+ (event) => {
10921
+ event.stopPropagation();
10922
+ setSelectedValue(void 0);
10923
+ },
10924
+ [setSelectedValue]
10925
+ );
10926
+ return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: (next) => !disabled && setOpen(next), children: [
10927
+ /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
10928
+ "button",
10929
+ {
10930
+ ref,
10931
+ name,
10932
+ type: "button",
10933
+ role: "combobox",
10934
+ "aria-expanded": open,
10935
+ className: cn(
10936
+ "flex w-full items-center justify-between gap-2 rounded-md border bg-white px-3 h-9 text-sm whitespace-nowrap shadow-xs outline-none border-input",
10937
+ "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 aria-invalid:border-destructive disabled:cursor-not-allowed disabled:opacity-50",
10938
+ "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
10939
+ "transition-all",
10940
+ className
10941
+ ),
10942
+ "data-state": open ? "open" : "closed",
10943
+ disabled,
10944
+ onFocus,
10945
+ onBlur,
10946
+ "data-testid": `combobox-trigger-${name}`,
10947
+ ...props,
10948
+ children: [
10949
+ /* @__PURE__ */ jsxRuntime.jsx(
10950
+ truncated_default,
10951
+ {
10952
+ className: cn(!selectedValue && "text-sus-gray-1"),
10953
+ tooltipProps: { disabled: true },
10954
+ children: renderValue
10955
+ }
10956
+ ),
10957
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
10958
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "size-4 opacity-50" }),
10959
+ showClear && selectedValue && /* @__PURE__ */ jsxRuntime.jsx(
10960
+ "span",
10961
+ {
10962
+ role: "button",
10963
+ className: cn(
10964
+ "inline-flex items-center justify-center p-0 cursor-pointer transition-all size-[15px]"
10965
+ ),
10966
+ onClick: handleClear,
10967
+ "data-testid": `combobox-clear-button-${name}`,
10968
+ children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "size-[15px] bg-black text-white border border-black hover:bg-[#333] rounded-full" })
10969
+ }
10970
+ )
10971
+ ] })
10972
+ ]
10973
+ }
10974
+ ) }),
10975
+ /* @__PURE__ */ jsxRuntime.jsx(
10976
+ PopoverContent,
10977
+ {
10978
+ className: "p-0 w-(--radix-popper-anchor-width) min-w-(--radix-popper-anchor-width) max-w-(--radix-popper-available-width)",
10979
+ align: "start",
10980
+ sideOffset: 4,
10981
+ children: /* @__PURE__ */ jsxRuntime.jsx(
10982
+ VirtualizedCommand_default,
10983
+ {
10984
+ name: dropdownName,
10985
+ emptyContent,
10986
+ height,
10987
+ notFoundContent,
10988
+ searchPlaceholder,
10989
+ showSearch,
10990
+ fieldNames,
10991
+ options,
10992
+ value: selectedValue,
10993
+ disabledOption,
10994
+ filterOption,
10995
+ labelRender,
10996
+ onSelect: handleSelect
10997
+ }
10998
+ )
10999
+ }
11000
+ )
11001
+ ] });
11002
+ };
11003
+ var Combobox = React4__namespace.forwardRef(ComboboxInner);
11004
+ var Combobox_default = Combobox;
10438
11005
 
10439
11006
  exports.Accordion = Accordion;
10440
11007
  exports.AccordionContent = AccordionContent;
@@ -10448,6 +11015,16 @@ exports.Checkbox = Checkbox;
10448
11015
  exports.Collapsible = Collapsible;
10449
11016
  exports.CollapsibleContent = CollapsibleContent2;
10450
11017
  exports.CollapsibleTrigger = CollapsibleTrigger2;
11018
+ exports.Combobox = Combobox_default;
11019
+ exports.Command = Command;
11020
+ exports.CommandDialog = CommandDialog;
11021
+ exports.CommandEmpty = CommandEmpty;
11022
+ exports.CommandGroup = CommandGroup;
11023
+ exports.CommandInput = CommandInput;
11024
+ exports.CommandItem = CommandItem;
11025
+ exports.CommandList = CommandList;
11026
+ exports.CommandSeparator = CommandSeparator;
11027
+ exports.CommandShortcut = CommandShortcut;
10451
11028
  exports.CropperModal = CropperModal;
10452
11029
  exports.CropperModalError = CropperModalError;
10453
11030
  exports.DIALOG_ALERT_I18N_SUBNAMESPACE = DIALOG_ALERT_I18N_SUBNAMESPACE;
@@ -10564,6 +11141,7 @@ exports.TooltipProvider = TooltipProvider2;
10564
11141
  exports.TooltipTrigger = TooltipTrigger2;
10565
11142
  exports.Truncated = truncated_default;
10566
11143
  exports.UI = ui_exports;
11144
+ exports.VirtualizedCommand = VirtualizedCommand_default;
10567
11145
  exports.booleanToSelectValue = booleanToSelectValue;
10568
11146
  exports.buildPrefixMap = buildPrefixMap;
10569
11147
  exports.buttonVariants = buttonVariants;
@@ -10588,6 +11166,7 @@ exports.splitOperators = splitOperators;
10588
11166
  exports.stripNullishObject = stripNullishObject;
10589
11167
  exports.throttle = throttle;
10590
11168
  exports.tokenizeFormulaString = tokenizeFormulaString;
11169
+ exports.useControllableState = useControllableState_default;
10591
11170
  exports.useFormField = useFormField;
10592
11171
  exports.useGridSettingsStore = useGridSettingsStore_default;
10593
11172
  exports.useHover = useHover_default;