@sustaina/shared-ui 1.32.0 → 1.33.0
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 +83 -17
- package/dist/index.d.ts +83 -17
- package/dist/index.js +549 -2
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +539 -4
- package/dist/index.mjs.map +1 -1
- package/package.json +4 -2
package/dist/index.mjs
CHANGED
|
@@ -4,7 +4,7 @@ import { twMerge } from 'tailwind-merge';
|
|
|
4
4
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
5
5
|
import * as React4 from 'react';
|
|
6
6
|
import React4__default, { forwardRef, useRef, useMemo, useCallback, useState, isValidElement, useEffect, useLayoutEffect, createElement } from 'react';
|
|
7
|
-
import { CircleX, Undo, Redo, Bold, Italic, Underline, Strikethrough, Code, Pilcrow, Heading1, Heading2, Heading3, List as List$1, ListOrdered, Quote, CodeSquare, Link, Link2Off, Image as Image$1, AlignLeft, AlignCenter, AlignRight, CircleHelp, XIcon, ChevronRight, CheckIcon, Triangle, CalendarIcon,
|
|
7
|
+
import { CircleX, Undo, Redo, Bold, Italic, Underline, Strikethrough, Code, Pilcrow, Heading1, Heading2, Heading3, List as List$1, ListOrdered, Quote, CodeSquare, Link, Link2Off, Image as Image$1, AlignLeft, AlignCenter, AlignRight, CircleHelp, ChevronDown, X, Check, XIcon, SearchIcon, ChevronRight, CheckIcon, Triangle, CalendarIcon, Search, ChevronUp, PanelLeftIcon, Minimize2, Maximize2, Plus, ChevronLeft, CircleUserRound, MoreVertical, Bug, GripVertical, Info, CircleMinus, Minus } from 'lucide-react';
|
|
8
8
|
import { createPortal } from 'react-dom';
|
|
9
9
|
import * as SelectPrimitive from '@radix-ui/react-select';
|
|
10
10
|
import { useForm, FormProvider, Controller, useFormContext, useFormState, useFieldArray, useWatch } from 'react-hook-form';
|
|
@@ -58,6 +58,8 @@ import { restrictToParentElement, restrictToVerticalAxis } from '@dnd-kit/modifi
|
|
|
58
58
|
import { z } from 'zod';
|
|
59
59
|
import Cropper from 'react-easy-crop';
|
|
60
60
|
import { NumericFormat } from 'react-number-format';
|
|
61
|
+
import { Command as Command$1 } from 'cmdk';
|
|
62
|
+
import { useVirtualizer } from '@tanstack/react-virtual';
|
|
61
63
|
|
|
62
64
|
var __defProp = Object.defineProperty;
|
|
63
65
|
var __export = (target, all) => {
|
|
@@ -4211,6 +4213,25 @@ var useTruncated = ({
|
|
|
4211
4213
|
return isTruncated;
|
|
4212
4214
|
};
|
|
4213
4215
|
var useTruncated_default = useTruncated;
|
|
4216
|
+
var useControllableState = ({
|
|
4217
|
+
defaultValue,
|
|
4218
|
+
value
|
|
4219
|
+
}) => {
|
|
4220
|
+
const [internalValue, setInternalValue] = React4.useState(value ?? defaultValue);
|
|
4221
|
+
React4.useEffect(() => {
|
|
4222
|
+
if (value !== internalValue) {
|
|
4223
|
+
setInternalValue(value);
|
|
4224
|
+
}
|
|
4225
|
+
}, [value]);
|
|
4226
|
+
const updateState = React4.useCallback((nextValue) => {
|
|
4227
|
+
setInternalValue(nextValue);
|
|
4228
|
+
}, []);
|
|
4229
|
+
return {
|
|
4230
|
+
value: internalValue,
|
|
4231
|
+
updateState
|
|
4232
|
+
};
|
|
4233
|
+
};
|
|
4234
|
+
var useControllableState_default = useControllableState;
|
|
4214
4235
|
var HeaderCell = ({
|
|
4215
4236
|
rootClassName,
|
|
4216
4237
|
labelClassName,
|
|
@@ -9734,8 +9755,9 @@ var Navbar = ({
|
|
|
9734
9755
|
mainButtonText && /* @__PURE__ */ jsx(
|
|
9735
9756
|
Button,
|
|
9736
9757
|
{
|
|
9758
|
+
variant: "cottonYellowDark",
|
|
9737
9759
|
disabled: mainButtonDisable,
|
|
9738
|
-
className:
|
|
9760
|
+
className: mainButtonClassName,
|
|
9739
9761
|
size: "lg",
|
|
9740
9762
|
onClick: onMainButtonClick,
|
|
9741
9763
|
children: mainButtonText
|
|
@@ -10111,7 +10133,7 @@ var Truncated = ({
|
|
|
10111
10133
|
Tooltip,
|
|
10112
10134
|
{
|
|
10113
10135
|
...tooltipProps,
|
|
10114
|
-
open,
|
|
10136
|
+
open: tooltipProps?.disabled ? false : open,
|
|
10115
10137
|
onOpenChange: (open2) => {
|
|
10116
10138
|
setOpen(isTruncated && open2);
|
|
10117
10139
|
},
|
|
@@ -10395,7 +10417,520 @@ var ActionMenu = ({
|
|
|
10395
10417
|
)
|
|
10396
10418
|
] });
|
|
10397
10419
|
};
|
|
10420
|
+
function Dialog3({ ...props }) {
|
|
10421
|
+
return /* @__PURE__ */ jsx(SheetPrimitive.Root, { "data-slot": "dialog", ...props });
|
|
10422
|
+
}
|
|
10423
|
+
function DialogPortal3({ ...props }) {
|
|
10424
|
+
return /* @__PURE__ */ jsx(SheetPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
|
|
10425
|
+
}
|
|
10426
|
+
function DialogOverlay3({ className, ...props }) {
|
|
10427
|
+
return /* @__PURE__ */ jsx(
|
|
10428
|
+
SheetPrimitive.Overlay,
|
|
10429
|
+
{
|
|
10430
|
+
"data-slot": "dialog-overlay",
|
|
10431
|
+
className: cn(
|
|
10432
|
+
"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",
|
|
10433
|
+
className
|
|
10434
|
+
),
|
|
10435
|
+
...props
|
|
10436
|
+
}
|
|
10437
|
+
);
|
|
10438
|
+
}
|
|
10439
|
+
function DialogContent3({
|
|
10440
|
+
className,
|
|
10441
|
+
children,
|
|
10442
|
+
showCloseButton = true,
|
|
10443
|
+
...props
|
|
10444
|
+
}) {
|
|
10445
|
+
return /* @__PURE__ */ jsxs(DialogPortal3, { "data-slot": "dialog-portal", children: [
|
|
10446
|
+
/* @__PURE__ */ jsx(DialogOverlay3, {}),
|
|
10447
|
+
/* @__PURE__ */ jsxs(
|
|
10448
|
+
SheetPrimitive.Content,
|
|
10449
|
+
{
|
|
10450
|
+
"data-slot": "dialog-content",
|
|
10451
|
+
className: cn(
|
|
10452
|
+
"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",
|
|
10453
|
+
className
|
|
10454
|
+
),
|
|
10455
|
+
...props,
|
|
10456
|
+
children: [
|
|
10457
|
+
children,
|
|
10458
|
+
showCloseButton && /* @__PURE__ */ jsxs(
|
|
10459
|
+
SheetPrimitive.Close,
|
|
10460
|
+
{
|
|
10461
|
+
"data-slot": "dialog-close",
|
|
10462
|
+
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",
|
|
10463
|
+
children: [
|
|
10464
|
+
/* @__PURE__ */ jsx(XIcon, {}),
|
|
10465
|
+
/* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
|
|
10466
|
+
]
|
|
10467
|
+
}
|
|
10468
|
+
)
|
|
10469
|
+
]
|
|
10470
|
+
}
|
|
10471
|
+
)
|
|
10472
|
+
] });
|
|
10473
|
+
}
|
|
10474
|
+
function DialogHeader3({ className, ...props }) {
|
|
10475
|
+
return /* @__PURE__ */ jsx(
|
|
10476
|
+
"div",
|
|
10477
|
+
{
|
|
10478
|
+
"data-slot": "dialog-header",
|
|
10479
|
+
className: cn("flex flex-col gap-2 text-center sm:text-left", className),
|
|
10480
|
+
...props
|
|
10481
|
+
}
|
|
10482
|
+
);
|
|
10483
|
+
}
|
|
10484
|
+
function DialogTitle3({ className, ...props }) {
|
|
10485
|
+
return /* @__PURE__ */ jsx(
|
|
10486
|
+
SheetPrimitive.Title,
|
|
10487
|
+
{
|
|
10488
|
+
"data-slot": "dialog-title",
|
|
10489
|
+
className: cn("text-lg leading-none font-semibold", className),
|
|
10490
|
+
...props
|
|
10491
|
+
}
|
|
10492
|
+
);
|
|
10493
|
+
}
|
|
10494
|
+
function DialogDescription3({
|
|
10495
|
+
className,
|
|
10496
|
+
...props
|
|
10497
|
+
}) {
|
|
10498
|
+
return /* @__PURE__ */ jsx(
|
|
10499
|
+
SheetPrimitive.Description,
|
|
10500
|
+
{
|
|
10501
|
+
"data-slot": "dialog-description",
|
|
10502
|
+
className: cn("text-muted-foreground text-sm", className),
|
|
10503
|
+
...props
|
|
10504
|
+
}
|
|
10505
|
+
);
|
|
10506
|
+
}
|
|
10507
|
+
function Command({ className, ...props }) {
|
|
10508
|
+
return /* @__PURE__ */ jsx(
|
|
10509
|
+
Command$1,
|
|
10510
|
+
{
|
|
10511
|
+
"data-slot": "command",
|
|
10512
|
+
className: cn(
|
|
10513
|
+
"bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
|
|
10514
|
+
className
|
|
10515
|
+
),
|
|
10516
|
+
...props
|
|
10517
|
+
}
|
|
10518
|
+
);
|
|
10519
|
+
}
|
|
10520
|
+
function CommandDialog({
|
|
10521
|
+
title = "Command Palette",
|
|
10522
|
+
description = "Search for a command to run...",
|
|
10523
|
+
children,
|
|
10524
|
+
className,
|
|
10525
|
+
showCloseButton = true,
|
|
10526
|
+
...props
|
|
10527
|
+
}) {
|
|
10528
|
+
return /* @__PURE__ */ jsxs(Dialog3, { ...props, children: [
|
|
10529
|
+
/* @__PURE__ */ jsxs(DialogHeader3, { className: "sr-only", children: [
|
|
10530
|
+
/* @__PURE__ */ jsx(DialogTitle3, { children: title }),
|
|
10531
|
+
/* @__PURE__ */ jsx(DialogDescription3, { children: description })
|
|
10532
|
+
] }),
|
|
10533
|
+
/* @__PURE__ */ jsx(DialogContent3, { className: cn("overflow-hidden p-0", className), showCloseButton, children: /* @__PURE__ */ 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 }) })
|
|
10534
|
+
] });
|
|
10535
|
+
}
|
|
10536
|
+
function CommandInput({ className, ...props }) {
|
|
10537
|
+
return /* @__PURE__ */ jsxs("div", { "data-slot": "command-input-wrapper", className: "flex h-9 items-center gap-2 border-b px-3", children: [
|
|
10538
|
+
/* @__PURE__ */ jsx(SearchIcon, { className: "size-4 shrink-0 opacity-50" }),
|
|
10539
|
+
/* @__PURE__ */ jsx(
|
|
10540
|
+
Command$1.Input,
|
|
10541
|
+
{
|
|
10542
|
+
"data-slot": "command-input",
|
|
10543
|
+
className: cn(
|
|
10544
|
+
"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",
|
|
10545
|
+
className
|
|
10546
|
+
),
|
|
10547
|
+
...props
|
|
10548
|
+
}
|
|
10549
|
+
)
|
|
10550
|
+
] });
|
|
10551
|
+
}
|
|
10552
|
+
function CommandList({ className, ...props }) {
|
|
10553
|
+
return /* @__PURE__ */ jsx(
|
|
10554
|
+
Command$1.List,
|
|
10555
|
+
{
|
|
10556
|
+
"data-slot": "command-list",
|
|
10557
|
+
className: cn("max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto", className),
|
|
10558
|
+
...props
|
|
10559
|
+
}
|
|
10560
|
+
);
|
|
10561
|
+
}
|
|
10562
|
+
function CommandEmpty({ className, ...props }) {
|
|
10563
|
+
return /* @__PURE__ */ jsx(
|
|
10564
|
+
Command$1.Empty,
|
|
10565
|
+
{
|
|
10566
|
+
"data-slot": "command-empty",
|
|
10567
|
+
className: cn("py-6 text-center text-sm", className),
|
|
10568
|
+
...props
|
|
10569
|
+
}
|
|
10570
|
+
);
|
|
10571
|
+
}
|
|
10572
|
+
function CommandGroup({ className, ...props }) {
|
|
10573
|
+
return /* @__PURE__ */ jsx(
|
|
10574
|
+
Command$1.Group,
|
|
10575
|
+
{
|
|
10576
|
+
"data-slot": "command-group",
|
|
10577
|
+
className: cn(
|
|
10578
|
+
"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",
|
|
10579
|
+
className
|
|
10580
|
+
),
|
|
10581
|
+
...props
|
|
10582
|
+
}
|
|
10583
|
+
);
|
|
10584
|
+
}
|
|
10585
|
+
function CommandSeparator({
|
|
10586
|
+
className,
|
|
10587
|
+
...props
|
|
10588
|
+
}) {
|
|
10589
|
+
return /* @__PURE__ */ jsx(
|
|
10590
|
+
Command$1.Separator,
|
|
10591
|
+
{
|
|
10592
|
+
"data-slot": "command-separator",
|
|
10593
|
+
className: cn("bg-border -mx-1 h-px", className),
|
|
10594
|
+
...props
|
|
10595
|
+
}
|
|
10596
|
+
);
|
|
10597
|
+
}
|
|
10598
|
+
function CommandItem({ className, ...props }) {
|
|
10599
|
+
return /* @__PURE__ */ jsx(
|
|
10600
|
+
Command$1.Item,
|
|
10601
|
+
{
|
|
10602
|
+
"data-slot": "command-item",
|
|
10603
|
+
className: cn(
|
|
10604
|
+
"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",
|
|
10605
|
+
"[&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
10606
|
+
className
|
|
10607
|
+
),
|
|
10608
|
+
...props
|
|
10609
|
+
}
|
|
10610
|
+
);
|
|
10611
|
+
}
|
|
10612
|
+
function CommandShortcut({ className, ...props }) {
|
|
10613
|
+
return /* @__PURE__ */ jsx(
|
|
10614
|
+
"span",
|
|
10615
|
+
{
|
|
10616
|
+
"data-slot": "command-shortcut",
|
|
10617
|
+
className: cn("text-muted-foreground ml-auto text-xs tracking-widest", className),
|
|
10618
|
+
...props
|
|
10619
|
+
}
|
|
10620
|
+
);
|
|
10621
|
+
}
|
|
10622
|
+
var useFieldNames = ({
|
|
10623
|
+
fieldNames
|
|
10624
|
+
}) => {
|
|
10625
|
+
const { label: labelFieldKey = "label", value: valueFieldKey = "value" } = fieldNames || {};
|
|
10626
|
+
const getLabelField = React4__default.useCallback(
|
|
10627
|
+
(option) => {
|
|
10628
|
+
return option?.[labelFieldKey];
|
|
10629
|
+
},
|
|
10630
|
+
[labelFieldKey]
|
|
10631
|
+
);
|
|
10632
|
+
const getValueField = React4__default.useCallback(
|
|
10633
|
+
(option) => {
|
|
10634
|
+
return option?.[valueFieldKey];
|
|
10635
|
+
},
|
|
10636
|
+
[valueFieldKey]
|
|
10637
|
+
);
|
|
10638
|
+
return {
|
|
10639
|
+
getLabelField,
|
|
10640
|
+
getValueField
|
|
10641
|
+
};
|
|
10642
|
+
};
|
|
10643
|
+
var useFieldNames_default = useFieldNames;
|
|
10644
|
+
var ROW_HEIGHT = 32;
|
|
10645
|
+
var MIN_HEIGHT_EMPTY = 76;
|
|
10646
|
+
var VirtualizedCommand = ({
|
|
10647
|
+
height = 292,
|
|
10648
|
+
options,
|
|
10649
|
+
emptyContent = "No data.",
|
|
10650
|
+
searchPlaceholder,
|
|
10651
|
+
value,
|
|
10652
|
+
notFoundContent = "Not item found.",
|
|
10653
|
+
showSearch = true,
|
|
10654
|
+
fieldNames,
|
|
10655
|
+
disabledOption,
|
|
10656
|
+
filterOption,
|
|
10657
|
+
onSelect,
|
|
10658
|
+
labelRender,
|
|
10659
|
+
onBlur,
|
|
10660
|
+
onFocus
|
|
10661
|
+
}) => {
|
|
10662
|
+
const { getLabelField, getValueField } = useFieldNames_default({ fieldNames });
|
|
10663
|
+
const internalOptions = React4.useMemo(() => options ?? [], [options]);
|
|
10664
|
+
const [filteredOptions, setFilteredOptions] = React4.useState(internalOptions);
|
|
10665
|
+
const [focusedIndex, setFocusedIndex] = React4.useState(0);
|
|
10666
|
+
const [isKeyboardNavActive, setIsKeyboardNavActive] = React4.useState(false);
|
|
10667
|
+
const parentRef = React4.useRef(null);
|
|
10668
|
+
const virtualizer = useVirtualizer({
|
|
10669
|
+
count: filteredOptions.length,
|
|
10670
|
+
getScrollElement: () => parentRef.current,
|
|
10671
|
+
estimateSize: () => ROW_HEIGHT,
|
|
10672
|
+
overscan: 2
|
|
10673
|
+
});
|
|
10674
|
+
const virtualOptions = virtualizer.getVirtualItems();
|
|
10675
|
+
const dynamicHeight = React4.useMemo(() => {
|
|
10676
|
+
const contentHeight = filteredOptions.length * ROW_HEIGHT;
|
|
10677
|
+
if (contentHeight <= 0) {
|
|
10678
|
+
return MIN_HEIGHT_EMPTY;
|
|
10679
|
+
}
|
|
10680
|
+
return Math.max(ROW_HEIGHT, Math.min(height, contentHeight));
|
|
10681
|
+
}, [filteredOptions.length, height]);
|
|
10682
|
+
const scrollToIndex = React4.useCallback(
|
|
10683
|
+
(index) => {
|
|
10684
|
+
virtualizer.scrollToIndex(index, {
|
|
10685
|
+
align: "center"
|
|
10686
|
+
});
|
|
10687
|
+
},
|
|
10688
|
+
[virtualizer]
|
|
10689
|
+
);
|
|
10690
|
+
const handleSearch = React4.useCallback(
|
|
10691
|
+
(search) => {
|
|
10692
|
+
setIsKeyboardNavActive(false);
|
|
10693
|
+
setFilteredOptions(
|
|
10694
|
+
internalOptions.filter((option) => {
|
|
10695
|
+
if (typeof filterOption === "function") {
|
|
10696
|
+
return filterOption(search, option);
|
|
10697
|
+
}
|
|
10698
|
+
const labelValue = getLabelField(option);
|
|
10699
|
+
return labelValue?.toString()?.toLowerCase()?.includes?.(search.toLowerCase());
|
|
10700
|
+
})
|
|
10701
|
+
);
|
|
10702
|
+
},
|
|
10703
|
+
[filterOption, getLabelField, internalOptions]
|
|
10704
|
+
);
|
|
10705
|
+
const handleKeyDown = React4.useCallback(
|
|
10706
|
+
(event) => {
|
|
10707
|
+
switch (event.key) {
|
|
10708
|
+
case "ArrowDown": {
|
|
10709
|
+
event.preventDefault();
|
|
10710
|
+
setIsKeyboardNavActive(true);
|
|
10711
|
+
setFocusedIndex((prev) => {
|
|
10712
|
+
const newIndex = prev === -1 ? 0 : Math.min(prev + 1, filteredOptions.length - 1);
|
|
10713
|
+
scrollToIndex(newIndex);
|
|
10714
|
+
return newIndex;
|
|
10715
|
+
});
|
|
10716
|
+
break;
|
|
10717
|
+
}
|
|
10718
|
+
case "ArrowUp": {
|
|
10719
|
+
event.preventDefault();
|
|
10720
|
+
setIsKeyboardNavActive(true);
|
|
10721
|
+
setFocusedIndex((prev) => {
|
|
10722
|
+
const newIndex = prev === -1 ? filteredOptions.length - 1 : Math.max(prev - 1, 0);
|
|
10723
|
+
scrollToIndex(newIndex);
|
|
10724
|
+
return newIndex;
|
|
10725
|
+
});
|
|
10726
|
+
break;
|
|
10727
|
+
}
|
|
10728
|
+
case "Enter": {
|
|
10729
|
+
event.preventDefault();
|
|
10730
|
+
const option = filteredOptions?.[focusedIndex];
|
|
10731
|
+
if (option) {
|
|
10732
|
+
onSelect?.(getValueField(option), option);
|
|
10733
|
+
}
|
|
10734
|
+
break;
|
|
10735
|
+
}
|
|
10736
|
+
}
|
|
10737
|
+
},
|
|
10738
|
+
[filteredOptions, focusedIndex, getValueField, onSelect, scrollToIndex]
|
|
10739
|
+
);
|
|
10740
|
+
React4.useEffect(() => {
|
|
10741
|
+
if (value) {
|
|
10742
|
+
const option = filteredOptions.find((option2) => {
|
|
10743
|
+
const optionValue = getValueField(option2);
|
|
10744
|
+
return optionValue === value;
|
|
10745
|
+
});
|
|
10746
|
+
if (option) {
|
|
10747
|
+
const index = filteredOptions.indexOf(option);
|
|
10748
|
+
setFocusedIndex(index);
|
|
10749
|
+
virtualizer.scrollToIndex(index, { align: "center" });
|
|
10750
|
+
}
|
|
10751
|
+
}
|
|
10752
|
+
}, [value, filteredOptions, virtualizer, getValueField]);
|
|
10753
|
+
return /* @__PURE__ */ jsxs(Command, { shouldFilter: false, onKeyDown: handleKeyDown, onFocus, onBlur, children: [
|
|
10754
|
+
showSearch && /* @__PURE__ */ jsx(CommandInput, { onValueChange: handleSearch, placeholder: searchPlaceholder }),
|
|
10755
|
+
/* @__PURE__ */ jsxs(
|
|
10756
|
+
CommandList,
|
|
10757
|
+
{
|
|
10758
|
+
ref: parentRef,
|
|
10759
|
+
className: "max-h-none",
|
|
10760
|
+
style: {
|
|
10761
|
+
height: dynamicHeight,
|
|
10762
|
+
width: "100%",
|
|
10763
|
+
overflow: "auto"
|
|
10764
|
+
},
|
|
10765
|
+
onMouseDown: () => setIsKeyboardNavActive(false),
|
|
10766
|
+
onMouseMove: () => setIsKeyboardNavActive(false),
|
|
10767
|
+
children: [
|
|
10768
|
+
/* @__PURE__ */ jsx(CommandEmpty, { children: internalOptions.length === 0 ? emptyContent : notFoundContent }),
|
|
10769
|
+
/* @__PURE__ */ jsx(
|
|
10770
|
+
CommandGroup,
|
|
10771
|
+
{
|
|
10772
|
+
style: {
|
|
10773
|
+
height: `${virtualizer.getTotalSize()}px`,
|
|
10774
|
+
width: "100%",
|
|
10775
|
+
position: "relative"
|
|
10776
|
+
},
|
|
10777
|
+
children: virtualOptions.map((virtualOption) => {
|
|
10778
|
+
const option = filteredOptions[virtualOption.index];
|
|
10779
|
+
const optionLabel = getLabelField(option);
|
|
10780
|
+
const optionValue = getValueField(option);
|
|
10781
|
+
const labelRendered = labelRender ? labelRender(filteredOptions[virtualOption.index]) : optionLabel;
|
|
10782
|
+
return /* @__PURE__ */ jsxs(
|
|
10783
|
+
CommandItem,
|
|
10784
|
+
{
|
|
10785
|
+
className: cn("absolute left-0 top-0 w-full flex items-center justify-between", {
|
|
10786
|
+
"bg-sus-secondary-green-3 text-sus-green-2": focusedIndex === virtualOption.index,
|
|
10787
|
+
"aria-selected:bg-white aria-selected:text-black pointer-events-none": isKeyboardNavActive && focusedIndex !== virtualOption.index
|
|
10788
|
+
}),
|
|
10789
|
+
style: {
|
|
10790
|
+
height: `${virtualOption.size}px`,
|
|
10791
|
+
transform: `translateY(${virtualOption.start}px)`
|
|
10792
|
+
},
|
|
10793
|
+
value: optionValue,
|
|
10794
|
+
onMouseEnter: () => !isKeyboardNavActive && setFocusedIndex(virtualOption.index),
|
|
10795
|
+
onMouseLeave: () => !isKeyboardNavActive && setFocusedIndex(-1),
|
|
10796
|
+
onSelect: (selectedValue) => onSelect?.(selectedValue, option),
|
|
10797
|
+
disabled: disabledOption?.(option),
|
|
10798
|
+
children: [
|
|
10799
|
+
typeof labelRendered === "string" ? /* @__PURE__ */ jsx(truncated_default, { tooltipProps: { disabled: true }, children: labelRendered }) : labelRendered,
|
|
10800
|
+
/* @__PURE__ */ jsx(
|
|
10801
|
+
Check,
|
|
10802
|
+
{
|
|
10803
|
+
className: cn(
|
|
10804
|
+
"mr-2 size-2 hover:text-sus-green-2",
|
|
10805
|
+
value === optionValue ? "opacity-100" : "opacity-0"
|
|
10806
|
+
)
|
|
10807
|
+
}
|
|
10808
|
+
)
|
|
10809
|
+
]
|
|
10810
|
+
},
|
|
10811
|
+
optionValue
|
|
10812
|
+
);
|
|
10813
|
+
})
|
|
10814
|
+
}
|
|
10815
|
+
)
|
|
10816
|
+
]
|
|
10817
|
+
}
|
|
10818
|
+
)
|
|
10819
|
+
] });
|
|
10820
|
+
};
|
|
10821
|
+
var VirtualizedCommand_default = VirtualizedCommand;
|
|
10822
|
+
var ComboboxInner = ({
|
|
10823
|
+
defaultValue,
|
|
10824
|
+
className,
|
|
10825
|
+
options,
|
|
10826
|
+
value,
|
|
10827
|
+
disabled,
|
|
10828
|
+
placeholder: placeholder2 = "placeholder",
|
|
10829
|
+
fieldNames,
|
|
10830
|
+
showClear = false,
|
|
10831
|
+
onSelect,
|
|
10832
|
+
onFocus,
|
|
10833
|
+
onBlur,
|
|
10834
|
+
...virtualizedCommandProps
|
|
10835
|
+
}, ref) => {
|
|
10836
|
+
const { getValueField } = useFieldNames_default({ fieldNames });
|
|
10837
|
+
const [open, setOpen] = React4.useState(false);
|
|
10838
|
+
const { value: selectedValue, updateState: setSelectedValue } = useControllableState_default({
|
|
10839
|
+
defaultValue,
|
|
10840
|
+
value
|
|
10841
|
+
});
|
|
10842
|
+
const renderValue = React4.useMemo(() => {
|
|
10843
|
+
if (!selectedValue) return placeholder2;
|
|
10844
|
+
const selectedOptionFound = options?.find((option) => {
|
|
10845
|
+
const optionValue = getValueField(option);
|
|
10846
|
+
return optionValue === selectedValue;
|
|
10847
|
+
});
|
|
10848
|
+
return selectedOptionFound ? getValueField(selectedOptionFound) : null;
|
|
10849
|
+
}, [getValueField, options, placeholder2, selectedValue]);
|
|
10850
|
+
const handleSelect = React4.useCallback(
|
|
10851
|
+
(selected, option) => {
|
|
10852
|
+
setSelectedValue(selected);
|
|
10853
|
+
setOpen(false);
|
|
10854
|
+
if (typeof onSelect === "function") {
|
|
10855
|
+
onSelect(selected, option);
|
|
10856
|
+
}
|
|
10857
|
+
},
|
|
10858
|
+
[onSelect, setSelectedValue]
|
|
10859
|
+
);
|
|
10860
|
+
const handleClear = React4.useCallback(
|
|
10861
|
+
(event) => {
|
|
10862
|
+
event.stopPropagation();
|
|
10863
|
+
setSelectedValue(void 0);
|
|
10864
|
+
},
|
|
10865
|
+
[setSelectedValue]
|
|
10866
|
+
);
|
|
10867
|
+
return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: (next) => !disabled && setOpen(next), children: [
|
|
10868
|
+
/* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
|
|
10869
|
+
"button",
|
|
10870
|
+
{
|
|
10871
|
+
ref,
|
|
10872
|
+
type: "button",
|
|
10873
|
+
role: "combobox",
|
|
10874
|
+
"aria-expanded": open,
|
|
10875
|
+
className: cn(
|
|
10876
|
+
"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",
|
|
10877
|
+
"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",
|
|
10878
|
+
"transition-all",
|
|
10879
|
+
className
|
|
10880
|
+
),
|
|
10881
|
+
"data-state": open ? "open" : "closed",
|
|
10882
|
+
disabled,
|
|
10883
|
+
onFocus,
|
|
10884
|
+
onBlur,
|
|
10885
|
+
children: [
|
|
10886
|
+
/* @__PURE__ */ jsx(
|
|
10887
|
+
truncated_default,
|
|
10888
|
+
{
|
|
10889
|
+
className: cn(!selectedValue && "text-sus-gray-1"),
|
|
10890
|
+
tooltipProps: { disabled: true },
|
|
10891
|
+
children: renderValue
|
|
10892
|
+
}
|
|
10893
|
+
),
|
|
10894
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
|
|
10895
|
+
/* @__PURE__ */ jsx(ChevronDown, { className: "size-4 opacity-50" }),
|
|
10896
|
+
showClear && selectedValue && /* @__PURE__ */ jsx(
|
|
10897
|
+
"span",
|
|
10898
|
+
{
|
|
10899
|
+
role: "button",
|
|
10900
|
+
className: cn(
|
|
10901
|
+
"inline-flex items-center justify-center p-0 cursor-pointer transition-all size-[15px]"
|
|
10902
|
+
),
|
|
10903
|
+
onClick: handleClear,
|
|
10904
|
+
children: /* @__PURE__ */ jsx(X, { className: "size-[15px] bg-black text-white border border-black hover:bg-[#333] rounded-full" })
|
|
10905
|
+
}
|
|
10906
|
+
)
|
|
10907
|
+
] })
|
|
10908
|
+
]
|
|
10909
|
+
}
|
|
10910
|
+
) }),
|
|
10911
|
+
/* @__PURE__ */ jsx(
|
|
10912
|
+
PopoverContent,
|
|
10913
|
+
{
|
|
10914
|
+
className: "p-0 w-(--radix-popper-anchor-width) min-w-(--radix-popper-anchor-width) max-w-(--radix-popper-available-width)",
|
|
10915
|
+
align: "start",
|
|
10916
|
+
sideOffset: 4,
|
|
10917
|
+
children: /* @__PURE__ */ jsx(
|
|
10918
|
+
VirtualizedCommand_default,
|
|
10919
|
+
{
|
|
10920
|
+
...virtualizedCommandProps,
|
|
10921
|
+
fieldNames,
|
|
10922
|
+
options,
|
|
10923
|
+
value: selectedValue,
|
|
10924
|
+
onSelect: handleSelect
|
|
10925
|
+
}
|
|
10926
|
+
)
|
|
10927
|
+
}
|
|
10928
|
+
)
|
|
10929
|
+
] });
|
|
10930
|
+
};
|
|
10931
|
+
var Combobox = React4.forwardRef(ComboboxInner);
|
|
10932
|
+
var Combobox_default = Combobox;
|
|
10398
10933
|
|
|
10399
|
-
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActionMenu, AdvanceSearch_default as AdvanceSearch, arrow_default as ArrowIcon, Button, Checkbox, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, CropperModal, CropperModalError, DIALOG_ALERT_I18N_SUBNAMESPACE, DIALOG_ALERT_TEMPLATES, DataTable_default as DataTable, DatePicker2 as DatePicker, Dialog, DialogAlert, DialogAlertProvider, DialogContent, DialogDescription, DialogFooter, DialogTitle, DialogTrigger, ErrorCompression, ErrorCreateCanvas, ErrorGeneratingBlob, ErrorInvalidSVG, ErrorSVGExceedSize, filters_default as FiltersIcon, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, FormulaEditor, GridSettingsModal_default as GridSettingsModal, HeaderCell_default as HeaderCell, Image2 as Image, Input, InputNumber_default as InputNumber, Label2 as Label, List_default as List, container_default as ListContainer, header_default as ListHeader, table_default as ListTable, LookupSelect, MonthPicker2 as MonthPicker, navbar_default as Navbar, not_found_default as NotFoundIcon, Popover, PopoverAnchor, PopoverArrow, PopoverContent, PopoverTrigger, PreventPageLeave_default as PreventPageLeave, RadioGroupItem, RadioGroupRoot, RadioLabel, RichText, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator2 as Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarLayout, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Spinner, calendar_default as SuiCalendarIcon, calendar2_default as SuiCalendarIcon2, check_default as SuiCheckIcon, dots_vertical_default as SuiDotsVerticalIcon, empty_data_default as SuiEmptyDataIcon, expand_default as SuiExpandIcon, filter_default as SuiFilterIcon, setting_default as SuiSettingIcon, triangle_down_default as SuiTriangleDownIcon, warning_default as SuiWarningIcon, Switch, Textarea, Tooltip2 as Tooltip, TooltipArrow, TooltipContent2 as TooltipContent, TooltipProvider2 as TooltipProvider, TooltipTrigger2 as TooltipTrigger, truncated_default as Truncated, ui_exports as UI, booleanToSelectValue, buildPrefixMap, buttonVariants, cn, compareAlphanumeric, debounce, defaultOperatorShortcuts, defaultOperators, formatISODate, getDialogAlertControls, inputVariants, isDefined, isEmptyObject, isValidParentheses, mapTokensToOutput, parseFormula, parseFormulaToToken, resetVisibleTableState, selectValueToBoolean, spinnerVariants, splitOperators, stripNullishObject, throttle, tokenizeFormulaString, useFormField, useGridSettingsStore_default as useGridSettingsStore, useHover_default as useHover, useIntersectionObserver_default as useIntersectionObserver, useMediaQuery_default as useMediaQuery, usePreventPageLeave_default as usePreventPageLeave, usePreventPageLeaveStore_default as usePreventPageLeaveStore, useScreenSize_default as useScreenSize, useSidebar, useTruncated_default as useTruncated, validateTokenPrefixes };
|
|
10934
|
+
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActionMenu, AdvanceSearch_default as AdvanceSearch, arrow_default as ArrowIcon, Button, Checkbox, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, Combobox_default as Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CropperModal, CropperModalError, DIALOG_ALERT_I18N_SUBNAMESPACE, DIALOG_ALERT_TEMPLATES, DataTable_default as DataTable, DatePicker2 as DatePicker, Dialog, DialogAlert, DialogAlertProvider, DialogContent, DialogDescription, DialogFooter, DialogTitle, DialogTrigger, ErrorCompression, ErrorCreateCanvas, ErrorGeneratingBlob, ErrorInvalidSVG, ErrorSVGExceedSize, filters_default as FiltersIcon, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, FormulaEditor, GridSettingsModal_default as GridSettingsModal, HeaderCell_default as HeaderCell, Image2 as Image, Input, InputNumber_default as InputNumber, Label2 as Label, List_default as List, container_default as ListContainer, header_default as ListHeader, table_default as ListTable, LookupSelect, MonthPicker2 as MonthPicker, navbar_default as Navbar, not_found_default as NotFoundIcon, Popover, PopoverAnchor, PopoverArrow, PopoverContent, PopoverTrigger, PreventPageLeave_default as PreventPageLeave, RadioGroupItem, RadioGroupRoot, RadioLabel, RichText, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator2 as Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarLayout, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Spinner, calendar_default as SuiCalendarIcon, calendar2_default as SuiCalendarIcon2, check_default as SuiCheckIcon, dots_vertical_default as SuiDotsVerticalIcon, empty_data_default as SuiEmptyDataIcon, expand_default as SuiExpandIcon, filter_default as SuiFilterIcon, setting_default as SuiSettingIcon, triangle_down_default as SuiTriangleDownIcon, warning_default as SuiWarningIcon, Switch, Textarea, Tooltip2 as Tooltip, TooltipArrow, TooltipContent2 as TooltipContent, TooltipProvider2 as TooltipProvider, TooltipTrigger2 as TooltipTrigger, truncated_default as Truncated, ui_exports as UI, VirtualizedCommand_default as VirtualizedCommand, booleanToSelectValue, buildPrefixMap, buttonVariants, cn, compareAlphanumeric, debounce, defaultOperatorShortcuts, defaultOperators, formatISODate, getDialogAlertControls, inputVariants, isDefined, isEmptyObject, isValidParentheses, mapTokensToOutput, parseFormula, parseFormulaToToken, resetVisibleTableState, selectValueToBoolean, spinnerVariants, splitOperators, stripNullishObject, throttle, tokenizeFormulaString, useControllableState_default as useControllableState, useFormField, useGridSettingsStore_default as useGridSettingsStore, useHover_default as useHover, useIntersectionObserver_default as useIntersectionObserver, useMediaQuery_default as useMediaQuery, usePreventPageLeave_default as usePreventPageLeave, usePreventPageLeaveStore_default as usePreventPageLeaveStore, useScreenSize_default as useScreenSize, useSidebar, useTruncated_default as useTruncated, validateTokenPrefixes };
|
|
10400
10935
|
//# sourceMappingURL=index.mjs.map
|
|
10401
10936
|
//# sourceMappingURL=index.mjs.map
|