@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.d.mts +86 -17
- package/dist/index.d.ts +86 -17
- package/dist/index.js +581 -2
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +571 -4
- package/dist/index.mjs.map +1 -1
- package/package.json +4 -2
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:
|
|
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;
|