@postxl/ui-components 1.4.2 → 1.5.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.ts +556 -337
- package/dist/index.js +1879 -549
- package/dist/index.js.map +1 -1
- package/package.json +2 -1
package/dist/index.js
CHANGED
|
@@ -2,6 +2,13 @@ import { clsx } from "clsx";
|
|
|
2
2
|
import { twMerge } from "tailwind-merge";
|
|
3
3
|
import * as AccordionPrimitive from "@radix-ui/react-accordion";
|
|
4
4
|
import { ArrowLeftIcon, ArrowRightIcon, CalendarIcon, CaretSortIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleIcon, Cross1Icon, Cross2Icon, DotFilledIcon, DotsHorizontalIcon, DoubleArrowLeftIcon, DoubleArrowRightIcon, DragHandleDots2Icon, EnterFullScreenIcon, MagnifyingGlassIcon } from "@radix-ui/react-icons";
|
|
5
|
+
import * as React$59 from "react";
|
|
6
|
+
import * as React$58 from "react";
|
|
7
|
+
import * as React$57 from "react";
|
|
8
|
+
import * as React$56 from "react";
|
|
9
|
+
import * as React$55 from "react";
|
|
10
|
+
import * as React$54 from "react";
|
|
11
|
+
import * as React$53 from "react";
|
|
5
12
|
import * as React$52 from "react";
|
|
6
13
|
import * as React$51 from "react";
|
|
7
14
|
import * as React$50 from "react";
|
|
@@ -63,7 +70,7 @@ import * as AvatarPrimitive from "@radix-ui/react-avatar";
|
|
|
63
70
|
import { DayPicker, getDefaultClassNames } from "react-day-picker";
|
|
64
71
|
import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
|
|
65
72
|
import useEmblaCarousel from "embla-carousel-react";
|
|
66
|
-
import { BaselineIcon, BookmarkIcon, CalendarIcon as CalendarIcon$1, CheckIcon as CheckIcon$1, CheckSquareIcon, ChevronDownIcon as ChevronDownIcon$1, ChevronRightIcon as ChevronRightIcon$1, ChevronUpIcon as ChevronUpIcon$1, CircleCheckIcon, CopyIcon, EraserIcon, EyeIcon, EyeOffIcon, FilterX, GlobeIcon, GripHorizontalIcon, HashIcon, ListChecksIcon, ListIcon, ListTreeIcon, MessageSquareIcon, MinusIcon, PanelLeftIcon, PencilIcon, PinIcon, PinOffIcon, PlusIcon, SaveIcon, Settings2Icon, SquareIcon, TagIcon, TextInitialIcon, Trash2Icon, TrashIcon, XIcon } from "lucide-react";
|
|
73
|
+
import { BaselineIcon, BookmarkIcon, CalendarIcon as CalendarIcon$1, Check, CheckIcon as CheckIcon$1, CheckSquareIcon, ChevronDownIcon as ChevronDownIcon$1, ChevronRightIcon as ChevronRightIcon$1, ChevronUpIcon as ChevronUpIcon$1, CircleCheckIcon, CopyIcon, DownloadIcon, EraserIcon, EyeIcon, EyeOffIcon, FilterX, GlobeIcon, GripHorizontalIcon, HashIcon, ListChecksIcon, ListIcon, ListTreeIcon, MessageSquareIcon, MinusIcon, PanelLeftIcon, PanelRightIcon, PencilIcon, PinIcon, PinOffIcon, PlusIcon, SaveIcon, Settings2Icon, SquareIcon, TagIcon, TextInitialIcon, Trash2Icon, TrashIcon, XIcon } from "lucide-react";
|
|
67
74
|
import * as CollapsePrimitive from "@radix-ui/react-collapsible";
|
|
68
75
|
import { Command as Command$1 } from "cmdk";
|
|
69
76
|
import * as DialogPrimitive from "@radix-ui/react-dialog";
|
|
@@ -90,6 +97,7 @@ import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
|
|
|
90
97
|
import * as ResizablePrimitive from "react-resizable-panels";
|
|
91
98
|
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
|
|
92
99
|
import * as SliderPrimitive from "@radix-ui/react-slider";
|
|
100
|
+
import { useDirection } from "@radix-ui/react-direction";
|
|
93
101
|
import * as SwitchPrimitives from "@radix-ui/react-switch";
|
|
94
102
|
import * as TabsPrimitive from "@radix-ui/react-tabs";
|
|
95
103
|
import * as TogglePrimitive from "@radix-ui/react-toggle";
|
|
@@ -118,13 +126,13 @@ function testId(baseId, suffix) {
|
|
|
118
126
|
//#endregion
|
|
119
127
|
//#region src/accordion/accordion.tsx
|
|
120
128
|
const Accordion = AccordionPrimitive.Root;
|
|
121
|
-
const AccordionItem = React$
|
|
129
|
+
const AccordionItem = React$59.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Item, {
|
|
122
130
|
ref,
|
|
123
131
|
className: cn("border-b", className),
|
|
124
132
|
...props
|
|
125
133
|
}));
|
|
126
134
|
AccordionItem.displayName = "AccordionItem";
|
|
127
|
-
const AccordionTrigger = React$
|
|
135
|
+
const AccordionTrigger = React$59.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Header, {
|
|
128
136
|
className: "flex",
|
|
129
137
|
children: /* @__PURE__ */ jsxs(AccordionPrimitive.Trigger, {
|
|
130
138
|
ref,
|
|
@@ -134,7 +142,7 @@ const AccordionTrigger = React$52.forwardRef(({ className, children,...props },
|
|
|
134
142
|
})
|
|
135
143
|
}));
|
|
136
144
|
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
|
|
137
|
-
const AccordionContent = React$
|
|
145
|
+
const AccordionContent = React$59.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Content, {
|
|
138
146
|
ref,
|
|
139
147
|
className: "overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
|
|
140
148
|
...props,
|
|
@@ -154,21 +162,21 @@ const alertVariants = cva("relative w-full rounded-lg border px-4 py-3 text-sm [
|
|
|
154
162
|
} },
|
|
155
163
|
defaultVariants: { variant: "default" }
|
|
156
164
|
});
|
|
157
|
-
const Alert = React$
|
|
165
|
+
const Alert = React$58.forwardRef(({ className, variant,...props }, ref) => /* @__PURE__ */ jsx("div", {
|
|
158
166
|
ref,
|
|
159
167
|
role: "alert",
|
|
160
168
|
className: cn(alertVariants({ variant }), className),
|
|
161
169
|
...props
|
|
162
170
|
}));
|
|
163
171
|
Alert.displayName = "Alert";
|
|
164
|
-
const AlertTitle = React$
|
|
172
|
+
const AlertTitle = React$58.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsx("h5", {
|
|
165
173
|
ref,
|
|
166
174
|
className: cn("mb-1 font-medium leading-none tracking-tight", className),
|
|
167
175
|
...props,
|
|
168
176
|
children
|
|
169
177
|
}));
|
|
170
178
|
AlertTitle.displayName = "AlertTitle";
|
|
171
|
-
const AlertDescription = React$
|
|
179
|
+
const AlertDescription = React$58.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
|
|
172
180
|
ref,
|
|
173
181
|
className: cn("text-sm [&_p]:leading-relaxed", className),
|
|
174
182
|
...props
|
|
@@ -228,13 +236,13 @@ function Button({ className, variant, size, asChild = false, __e2e_test_id__,...
|
|
|
228
236
|
const AlertDialog = AlertDialogPrimitive.Root;
|
|
229
237
|
const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
|
|
230
238
|
const AlertDialogPortal = AlertDialogPrimitive.Portal;
|
|
231
|
-
const AlertDialogOverlay = React$
|
|
239
|
+
const AlertDialogOverlay = React$57.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Overlay, {
|
|
232
240
|
className: cn("fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className),
|
|
233
241
|
...props,
|
|
234
242
|
ref
|
|
235
243
|
}));
|
|
236
244
|
AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
|
|
237
|
-
const AlertDialogContent = React$
|
|
245
|
+
const AlertDialogContent = React$57.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [/* @__PURE__ */ jsx(AlertDialogOverlay, {}), /* @__PURE__ */ jsx(AlertDialogPrimitive.Content, {
|
|
238
246
|
ref,
|
|
239
247
|
className: cn("fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg", className),
|
|
240
248
|
...props
|
|
@@ -250,25 +258,25 @@ const AlertDialogFooter = ({ className,...props }) => /* @__PURE__ */ jsx("div",
|
|
|
250
258
|
...props
|
|
251
259
|
});
|
|
252
260
|
AlertDialogFooter.displayName = "AlertDialogFooter";
|
|
253
|
-
const AlertDialogTitle = React$
|
|
261
|
+
const AlertDialogTitle = React$57.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Title, {
|
|
254
262
|
ref,
|
|
255
263
|
className: cn("text-lg font-semibold", className),
|
|
256
264
|
...props
|
|
257
265
|
}));
|
|
258
266
|
AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
|
|
259
|
-
const AlertDialogDescription = React$
|
|
267
|
+
const AlertDialogDescription = React$57.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Description, {
|
|
260
268
|
ref,
|
|
261
269
|
className: cn("text-sm text-muted-foreground", className),
|
|
262
270
|
...props
|
|
263
271
|
}));
|
|
264
272
|
AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
|
|
265
|
-
const AlertDialogAction = React$
|
|
273
|
+
const AlertDialogAction = React$57.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Action, {
|
|
266
274
|
ref,
|
|
267
275
|
className: cn(buttonVariants(), className),
|
|
268
276
|
...props
|
|
269
277
|
}));
|
|
270
278
|
AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
|
|
271
|
-
const AlertDialogCancel = React$
|
|
279
|
+
const AlertDialogCancel = React$57.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Cancel, {
|
|
272
280
|
ref,
|
|
273
281
|
className: cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className),
|
|
274
282
|
...props
|
|
@@ -277,19 +285,19 @@ AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
|
|
|
277
285
|
|
|
278
286
|
//#endregion
|
|
279
287
|
//#region src/avatar/avatar.tsx
|
|
280
|
-
const Avatar = React$
|
|
288
|
+
const Avatar = React$56.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AvatarPrimitive.Root, {
|
|
281
289
|
ref,
|
|
282
290
|
className: cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className),
|
|
283
291
|
...props
|
|
284
292
|
}));
|
|
285
293
|
Avatar.displayName = AvatarPrimitive.Root.displayName;
|
|
286
|
-
const AvatarImage = React$
|
|
294
|
+
const AvatarImage = React$56.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AvatarPrimitive.Image, {
|
|
287
295
|
ref,
|
|
288
296
|
className: cn("aspect-square h-full w-full", className),
|
|
289
297
|
...props
|
|
290
298
|
}));
|
|
291
299
|
AvatarImage.displayName = AvatarPrimitive.Image.displayName;
|
|
292
|
-
const AvatarFallback = React$
|
|
300
|
+
const AvatarFallback = React$56.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AvatarPrimitive.Fallback, {
|
|
293
301
|
ref,
|
|
294
302
|
className: cn("flex h-full w-full items-center justify-center rounded-full bg-muted", className),
|
|
295
303
|
...props
|
|
@@ -335,25 +343,25 @@ function Badge({ className, variant, size, asChild = false,...props }) {
|
|
|
335
343
|
|
|
336
344
|
//#endregion
|
|
337
345
|
//#region src/breadcrumb/breadcrumb.tsx
|
|
338
|
-
const Breadcrumb = React$
|
|
346
|
+
const Breadcrumb = React$55.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx("nav", {
|
|
339
347
|
ref,
|
|
340
348
|
"aria-label": "breadcrumb",
|
|
341
349
|
...props
|
|
342
350
|
}));
|
|
343
351
|
Breadcrumb.displayName = "Breadcrumb";
|
|
344
|
-
const BreadcrumbList = React$
|
|
352
|
+
const BreadcrumbList = React$55.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("ol", {
|
|
345
353
|
ref,
|
|
346
354
|
className: cn("flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5", className),
|
|
347
355
|
...props
|
|
348
356
|
}));
|
|
349
357
|
BreadcrumbList.displayName = "BreadcrumbList";
|
|
350
|
-
const BreadcrumbItem = React$
|
|
358
|
+
const BreadcrumbItem = React$55.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("li", {
|
|
351
359
|
ref,
|
|
352
360
|
className: cn("inline-flex items-center gap-1.5", className),
|
|
353
361
|
...props
|
|
354
362
|
}));
|
|
355
363
|
BreadcrumbItem.displayName = "BreadcrumbItem";
|
|
356
|
-
const BreadcrumbLink = React$
|
|
364
|
+
const BreadcrumbLink = React$55.forwardRef(({ asChild, className,...props }, ref) => {
|
|
357
365
|
const Comp = asChild ? Slot : "a";
|
|
358
366
|
return /* @__PURE__ */ jsx(Comp, {
|
|
359
367
|
ref,
|
|
@@ -362,7 +370,7 @@ const BreadcrumbLink = React$48.forwardRef(({ asChild, className,...props }, ref
|
|
|
362
370
|
});
|
|
363
371
|
});
|
|
364
372
|
BreadcrumbLink.displayName = "BreadcrumbLink";
|
|
365
|
-
const BreadcrumbPage = React$
|
|
373
|
+
const BreadcrumbPage = React$55.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("span", {
|
|
366
374
|
ref,
|
|
367
375
|
"aria-disabled": "true",
|
|
368
376
|
"aria-current": "page",
|
|
@@ -392,8 +400,8 @@ BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
|
|
|
392
400
|
//#region src/calendar/calendar.tsx
|
|
393
401
|
function Calendar({ className, classNames, showOutsideDays = true, captionLayout = "label", buttonVariant = "ghost", showYearNavigation = false, formatters, components, __e2e_test_id__,...props }) {
|
|
394
402
|
const defaultClassNames = getDefaultClassNames();
|
|
395
|
-
const [rangeSelectionStep, setRangeSelectionStep] = React$
|
|
396
|
-
const handleDayClick = React$
|
|
403
|
+
const [rangeSelectionStep, setRangeSelectionStep] = React$54.useState("from");
|
|
404
|
+
const handleDayClick = React$54.useCallback((day, modifiers, e) => {
|
|
397
405
|
if (props.mode === "range") {
|
|
398
406
|
const range = props.selected;
|
|
399
407
|
if (rangeSelectionStep === "from") {
|
|
@@ -423,8 +431,8 @@ function Calendar({ className, classNames, showOutsideDays = true, captionLayout
|
|
|
423
431
|
fromMonth = props.startMonth ?? new Date(nowYear - 100, 0);
|
|
424
432
|
toMonth = props.endMonth ?? new Date(nowYear + 100, 11);
|
|
425
433
|
}
|
|
426
|
-
const [currentMonth, setCurrentMonth] = React$
|
|
427
|
-
React$
|
|
434
|
+
const [currentMonth, setCurrentMonth] = React$54.useState(props.defaultMonth ?? props.month ?? new Date());
|
|
435
|
+
React$54.useEffect(() => {
|
|
428
436
|
if (props.month) setCurrentMonth(props.month);
|
|
429
437
|
}, [props.month]);
|
|
430
438
|
const addMonths = (date, months) => {
|
|
@@ -568,8 +576,8 @@ function Calendar({ className, classNames, showOutsideDays = true, captionLayout
|
|
|
568
576
|
}
|
|
569
577
|
function CalendarDayButton({ className, day, modifiers,...props }) {
|
|
570
578
|
const defaultClassNames = getDefaultClassNames();
|
|
571
|
-
const ref = React$
|
|
572
|
-
React$
|
|
579
|
+
const ref = React$54.useRef(null);
|
|
580
|
+
React$54.useEffect(() => {
|
|
573
581
|
if (modifiers.focused) ref.current?.focus();
|
|
574
582
|
}, [modifiers.focused]);
|
|
575
583
|
return /* @__PURE__ */ jsx(Button, {
|
|
@@ -588,38 +596,38 @@ function CalendarDayButton({ className, day, modifiers,...props }) {
|
|
|
588
596
|
|
|
589
597
|
//#endregion
|
|
590
598
|
//#region src/card/card.tsx
|
|
591
|
-
const Card = React$
|
|
599
|
+
const Card = React$53.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
|
|
592
600
|
ref,
|
|
593
601
|
className: cn("rounded-xl border bg-card text-card-foreground shadow", className),
|
|
594
602
|
...props
|
|
595
603
|
}));
|
|
596
604
|
Card.displayName = "Card";
|
|
597
|
-
const CardHeader = React$
|
|
605
|
+
const CardHeader = React$53.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
|
|
598
606
|
ref,
|
|
599
607
|
className: cn("flex flex-col space-y-1.5 p-6", className),
|
|
600
608
|
...props
|
|
601
609
|
}));
|
|
602
610
|
CardHeader.displayName = "CardHeader";
|
|
603
|
-
const CardTitle = React$
|
|
611
|
+
const CardTitle = React$53.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsx("h3", {
|
|
604
612
|
ref,
|
|
605
613
|
className: cn("font-semibold leading-none tracking-tight", className),
|
|
606
614
|
...props,
|
|
607
615
|
children
|
|
608
616
|
}));
|
|
609
617
|
CardTitle.displayName = "CardTitle";
|
|
610
|
-
const CardDescription = React$
|
|
618
|
+
const CardDescription = React$53.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("p", {
|
|
611
619
|
ref,
|
|
612
620
|
className: cn("text-sm text-muted-foreground", className),
|
|
613
621
|
...props
|
|
614
622
|
}));
|
|
615
623
|
CardDescription.displayName = "CardDescription";
|
|
616
|
-
const CardContent = React$
|
|
624
|
+
const CardContent = React$53.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
|
|
617
625
|
ref,
|
|
618
626
|
className: cn("p-6 pt-0", className),
|
|
619
627
|
...props
|
|
620
628
|
}));
|
|
621
629
|
CardContent.displayName = "CardContent";
|
|
622
|
-
const CardFooter = React$
|
|
630
|
+
const CardFooter = React$53.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
|
|
623
631
|
ref,
|
|
624
632
|
className: cn("flex items-center p-6 pt-0", className),
|
|
625
633
|
...props
|
|
@@ -630,7 +638,7 @@ CardFooter.displayName = "CardFooter";
|
|
|
630
638
|
//#region src/card-hover/card-hover.tsx
|
|
631
639
|
const HoverCard = HoverCardPrimitive.Root;
|
|
632
640
|
const HoverCardTrigger = HoverCardPrimitive.Trigger;
|
|
633
|
-
const HoverCardContent = React$
|
|
641
|
+
const HoverCardContent = React$52.forwardRef(({ className, align = "center", sideOffset = 4,...props }, ref) => /* @__PURE__ */ jsx(HoverCardPrimitive.Content, {
|
|
634
642
|
ref,
|
|
635
643
|
align,
|
|
636
644
|
sideOffset,
|
|
@@ -641,31 +649,31 @@ HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
|
|
|
641
649
|
|
|
642
650
|
//#endregion
|
|
643
651
|
//#region src/carousel/carousel.tsx
|
|
644
|
-
const CarouselContext = React$
|
|
652
|
+
const CarouselContext = React$51.createContext(null);
|
|
645
653
|
function useCarousel() {
|
|
646
|
-
const context = React$
|
|
654
|
+
const context = React$51.useContext(CarouselContext);
|
|
647
655
|
if (!context) throw new Error("useCarousel must be used within a <Carousel />");
|
|
648
656
|
return context;
|
|
649
657
|
}
|
|
650
|
-
const Carousel = React$
|
|
658
|
+
const Carousel = React$51.forwardRef(({ orientation = "horizontal", opts, setApi, plugins, className, children,...props }, ref) => {
|
|
651
659
|
const [carouselRef, api] = useEmblaCarousel({
|
|
652
660
|
...opts,
|
|
653
661
|
axis: orientation === "horizontal" ? "x" : "y"
|
|
654
662
|
}, plugins);
|
|
655
|
-
const [canScrollPrev, setCanScrollPrev] = React$
|
|
656
|
-
const [canScrollNext, setCanScrollNext] = React$
|
|
657
|
-
const onSelect = React$
|
|
663
|
+
const [canScrollPrev, setCanScrollPrev] = React$51.useState(false);
|
|
664
|
+
const [canScrollNext, setCanScrollNext] = React$51.useState(false);
|
|
665
|
+
const onSelect = React$51.useCallback(() => {
|
|
658
666
|
if (!api) return;
|
|
659
667
|
setCanScrollPrev(api.canScrollPrev());
|
|
660
668
|
setCanScrollNext(api.canScrollNext());
|
|
661
669
|
}, [api]);
|
|
662
|
-
const scrollPrev = React$
|
|
670
|
+
const scrollPrev = React$51.useCallback(() => {
|
|
663
671
|
api?.scrollPrev();
|
|
664
672
|
}, [api]);
|
|
665
|
-
const scrollNext = React$
|
|
673
|
+
const scrollNext = React$51.useCallback(() => {
|
|
666
674
|
api?.scrollNext();
|
|
667
675
|
}, [api]);
|
|
668
|
-
const handleKeyDown = React$
|
|
676
|
+
const handleKeyDown = React$51.useCallback((event) => {
|
|
669
677
|
if (event.key === "ArrowLeft") {
|
|
670
678
|
event.preventDefault();
|
|
671
679
|
scrollPrev();
|
|
@@ -674,11 +682,11 @@ const Carousel = React$44.forwardRef(({ orientation = "horizontal", opts, setApi
|
|
|
674
682
|
scrollNext();
|
|
675
683
|
}
|
|
676
684
|
}, [scrollPrev, scrollNext]);
|
|
677
|
-
React$
|
|
685
|
+
React$51.useEffect(() => {
|
|
678
686
|
if (!api || !setApi) return;
|
|
679
687
|
setApi(api);
|
|
680
688
|
}, [api, setApi]);
|
|
681
|
-
React$
|
|
689
|
+
React$51.useEffect(() => {
|
|
682
690
|
if (!api) return;
|
|
683
691
|
onSelect();
|
|
684
692
|
api.on("reInit", onSelect);
|
|
@@ -719,7 +727,7 @@ const Carousel = React$44.forwardRef(({ orientation = "horizontal", opts, setApi
|
|
|
719
727
|
});
|
|
720
728
|
});
|
|
721
729
|
Carousel.displayName = "Carousel";
|
|
722
|
-
const CarouselContent = React$
|
|
730
|
+
const CarouselContent = React$51.forwardRef(({ className,...props }, ref) => {
|
|
723
731
|
const { carouselRef, orientation } = useCarousel();
|
|
724
732
|
return /* @__PURE__ */ jsx("div", {
|
|
725
733
|
ref: carouselRef,
|
|
@@ -732,7 +740,7 @@ const CarouselContent = React$44.forwardRef(({ className,...props }, ref) => {
|
|
|
732
740
|
});
|
|
733
741
|
});
|
|
734
742
|
CarouselContent.displayName = "CarouselContent";
|
|
735
|
-
const CarouselItem = React$
|
|
743
|
+
const CarouselItem = React$51.forwardRef(({ className,...props }, ref) => {
|
|
736
744
|
const { orientation } = useCarousel();
|
|
737
745
|
return /* @__PURE__ */ jsx("div", {
|
|
738
746
|
ref,
|
|
@@ -742,7 +750,7 @@ const CarouselItem = React$44.forwardRef(({ className,...props }, ref) => {
|
|
|
742
750
|
});
|
|
743
751
|
});
|
|
744
752
|
CarouselItem.displayName = "CarouselItem";
|
|
745
|
-
const CarouselPrevious = React$
|
|
753
|
+
const CarouselPrevious = React$51.forwardRef(({ className, variant = "outline", size = "icon",...props }, ref) => {
|
|
746
754
|
const { orientation, scrollPrev, canScrollPrev } = useCarousel();
|
|
747
755
|
return /* @__PURE__ */ jsxs(Button, {
|
|
748
756
|
ref,
|
|
@@ -759,7 +767,7 @@ const CarouselPrevious = React$44.forwardRef(({ className, variant = "outline",
|
|
|
759
767
|
});
|
|
760
768
|
});
|
|
761
769
|
CarouselPrevious.displayName = "CarouselPrevious";
|
|
762
|
-
const CarouselNext = React$
|
|
770
|
+
const CarouselNext = React$51.forwardRef(({ className, variant = "outline", size = "icon",...props }, ref) => {
|
|
763
771
|
const { orientation, scrollNext, canScrollNext } = useCarousel();
|
|
764
772
|
return /* @__PURE__ */ jsxs(Button, {
|
|
765
773
|
ref,
|
|
@@ -1209,7 +1217,7 @@ function DialogDescription({ className,...props }) {
|
|
|
1209
1217
|
|
|
1210
1218
|
//#endregion
|
|
1211
1219
|
//#region src/command-palette/command-palette.tsx
|
|
1212
|
-
const CommandPalette = React$
|
|
1220
|
+
const CommandPalette = React$50.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1, {
|
|
1213
1221
|
ref,
|
|
1214
1222
|
className: cn("flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground", className),
|
|
1215
1223
|
...props
|
|
@@ -1227,7 +1235,7 @@ const CommandPaletteDialog = ({ children,...props }) => {
|
|
|
1227
1235
|
})
|
|
1228
1236
|
});
|
|
1229
1237
|
};
|
|
1230
|
-
const CommandPaletteInput = React$
|
|
1238
|
+
const CommandPaletteInput = React$50.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsxs("div", {
|
|
1231
1239
|
className: "flex items-center border-b px-3",
|
|
1232
1240
|
"data-cmdk-input-wrapper": "",
|
|
1233
1241
|
children: [/* @__PURE__ */ jsx(MagnifyingGlassIcon, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }), /* @__PURE__ */ jsx(Command$1.Input, {
|
|
@@ -1237,31 +1245,31 @@ const CommandPaletteInput = React$43.forwardRef(({ className,...props }, ref) =>
|
|
|
1237
1245
|
})]
|
|
1238
1246
|
}));
|
|
1239
1247
|
CommandPaletteInput.displayName = Command$1.Input.displayName;
|
|
1240
|
-
const CommandPaletteList = React$
|
|
1248
|
+
const CommandPaletteList = React$50.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1.List, {
|
|
1241
1249
|
ref,
|
|
1242
1250
|
className: cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className),
|
|
1243
1251
|
...props
|
|
1244
1252
|
}));
|
|
1245
1253
|
CommandPaletteList.displayName = Command$1.List.displayName;
|
|
1246
|
-
const CommandPaletteEmpty = React$
|
|
1254
|
+
const CommandPaletteEmpty = React$50.forwardRef((props, ref) => /* @__PURE__ */ jsx(Command$1.Empty, {
|
|
1247
1255
|
ref,
|
|
1248
1256
|
className: "py-6 text-center text-sm",
|
|
1249
1257
|
...props
|
|
1250
1258
|
}));
|
|
1251
1259
|
CommandPaletteEmpty.displayName = Command$1.Empty.displayName;
|
|
1252
|
-
const CommandPaletteGroup = React$
|
|
1260
|
+
const CommandPaletteGroup = React$50.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1.Group, {
|
|
1253
1261
|
ref,
|
|
1254
1262
|
className: cn("overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground", className),
|
|
1255
1263
|
...props
|
|
1256
1264
|
}));
|
|
1257
1265
|
CommandPaletteGroup.displayName = Command$1.Group.displayName;
|
|
1258
|
-
const CommandPaletteSeparator = React$
|
|
1266
|
+
const CommandPaletteSeparator = React$50.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1.Separator, {
|
|
1259
1267
|
ref,
|
|
1260
1268
|
className: cn("-mx-1 h-px bg-border", className),
|
|
1261
1269
|
...props
|
|
1262
1270
|
}));
|
|
1263
1271
|
CommandPaletteSeparator.displayName = Command$1.Separator.displayName;
|
|
1264
|
-
const CommandPaletteItem = React$
|
|
1272
|
+
const CommandPaletteItem = React$50.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1.Item, {
|
|
1265
1273
|
ref,
|
|
1266
1274
|
className: cn("relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50", className),
|
|
1267
1275
|
...props
|
|
@@ -1337,8 +1345,8 @@ const frameworks = [
|
|
|
1337
1345
|
}
|
|
1338
1346
|
];
|
|
1339
1347
|
function ComboboxDemo() {
|
|
1340
|
-
const [open, setOpen] = React$
|
|
1341
|
-
const [value, setValue] = React$
|
|
1348
|
+
const [open, setOpen] = React$49.useState(false);
|
|
1349
|
+
const [value, setValue] = React$49.useState("");
|
|
1342
1350
|
return /* @__PURE__ */ jsxs(Popover, {
|
|
1343
1351
|
open,
|
|
1344
1352
|
onOpenChange: setOpen,
|
|
@@ -1578,32 +1586,32 @@ const ContextMenuGroup = ContextMenuPrimitive.Group;
|
|
|
1578
1586
|
const ContextMenuPortal = ContextMenuPrimitive.Portal;
|
|
1579
1587
|
const ContextMenuSub = ContextMenuPrimitive.Sub;
|
|
1580
1588
|
const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
|
|
1581
|
-
const ContextMenuSubTrigger = React$
|
|
1589
|
+
const ContextMenuSubTrigger = React$48.forwardRef(({ className, inset, children,...props }, ref) => /* @__PURE__ */ jsxs(ContextMenuPrimitive.SubTrigger, {
|
|
1582
1590
|
ref,
|
|
1583
1591
|
className: cn("flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground", inset && "pl-8", className),
|
|
1584
1592
|
...props,
|
|
1585
1593
|
children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto h-4 w-4" })]
|
|
1586
1594
|
}));
|
|
1587
1595
|
ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
|
|
1588
|
-
const ContextMenuSubContent = React$
|
|
1596
|
+
const ContextMenuSubContent = React$48.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.SubContent, {
|
|
1589
1597
|
ref,
|
|
1590
1598
|
className: cn("z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className),
|
|
1591
1599
|
...props
|
|
1592
1600
|
}));
|
|
1593
1601
|
ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
|
|
1594
|
-
const ContextMenuContent = React$
|
|
1602
|
+
const ContextMenuContent = React$48.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(ContextMenuPrimitive.Content, {
|
|
1595
1603
|
ref,
|
|
1596
1604
|
className: cn("z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className),
|
|
1597
1605
|
...props
|
|
1598
1606
|
}) }));
|
|
1599
1607
|
ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
|
|
1600
|
-
const ContextMenuItem = React$
|
|
1608
|
+
const ContextMenuItem = React$48.forwardRef(({ className, inset,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Item, {
|
|
1601
1609
|
ref,
|
|
1602
1610
|
className: cn("relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", inset && "pl-8", className),
|
|
1603
1611
|
...props
|
|
1604
1612
|
}));
|
|
1605
1613
|
ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
|
|
1606
|
-
const ContextMenuCheckboxItem = React$
|
|
1614
|
+
const ContextMenuCheckboxItem = React$48.forwardRef(({ className, children, checked,...props }, ref) => /* @__PURE__ */ jsxs(ContextMenuPrimitive.CheckboxItem, {
|
|
1607
1615
|
ref,
|
|
1608
1616
|
className: cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className),
|
|
1609
1617
|
checked,
|
|
@@ -1614,7 +1622,7 @@ const ContextMenuCheckboxItem = React$41.forwardRef(({ className, children, chec
|
|
|
1614
1622
|
}), children]
|
|
1615
1623
|
}));
|
|
1616
1624
|
ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
|
|
1617
|
-
const ContextMenuRadioItem = React$
|
|
1625
|
+
const ContextMenuRadioItem = React$48.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsxs(ContextMenuPrimitive.RadioItem, {
|
|
1618
1626
|
ref,
|
|
1619
1627
|
className: cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className),
|
|
1620
1628
|
...props,
|
|
@@ -1624,13 +1632,13 @@ const ContextMenuRadioItem = React$41.forwardRef(({ className, children,...props
|
|
|
1624
1632
|
}), children]
|
|
1625
1633
|
}));
|
|
1626
1634
|
ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
|
|
1627
|
-
const ContextMenuLabel = React$
|
|
1635
|
+
const ContextMenuLabel = React$48.forwardRef(({ className, inset,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Label, {
|
|
1628
1636
|
ref,
|
|
1629
1637
|
className: cn("px-2 py-1.5 text-sm font-semibold text-foreground", inset && "pl-8", className),
|
|
1630
1638
|
...props
|
|
1631
1639
|
}));
|
|
1632
1640
|
ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
|
|
1633
|
-
const ContextMenuSeparator = React$
|
|
1641
|
+
const ContextMenuSeparator = React$48.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Separator, {
|
|
1634
1642
|
ref,
|
|
1635
1643
|
className: cn("-mx-1 my-1 h-px bg-border", className),
|
|
1636
1644
|
...props
|
|
@@ -1775,7 +1783,7 @@ function DropdownMenuSubContent({ className,...props }) {
|
|
|
1775
1783
|
const TooltipProvider = TooltipPrimitive.Provider;
|
|
1776
1784
|
const Tooltip = TooltipPrimitive.Root;
|
|
1777
1785
|
const TooltipTrigger = TooltipPrimitive.Trigger;
|
|
1778
|
-
const TooltipContent = React$
|
|
1786
|
+
const TooltipContent = React$47.forwardRef(({ className, sideOffset = 4,...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Content, {
|
|
1779
1787
|
ref,
|
|
1780
1788
|
sideOffset,
|
|
1781
1789
|
className: cn("z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className),
|
|
@@ -2260,7 +2268,7 @@ const inputVariants = cva("file:text-foreground placeholder:text-muted-foregroun
|
|
|
2260
2268
|
} },
|
|
2261
2269
|
defaultVariants: { variant: "default" }
|
|
2262
2270
|
});
|
|
2263
|
-
const Input = React$
|
|
2271
|
+
const Input = React$46.forwardRef(({ className, type, variant, __e2e_test_id__, onEnter, wrapperClassName,...props }, ref) => {
|
|
2264
2272
|
const input = /* @__PURE__ */ jsx("input", {
|
|
2265
2273
|
type,
|
|
2266
2274
|
"data-slot": "input",
|
|
@@ -2342,10 +2350,10 @@ const numberInputWrapperVariants = cva("border-input bg-background grid grid-col
|
|
|
2342
2350
|
} },
|
|
2343
2351
|
defaultVariants: { variant: "default" }
|
|
2344
2352
|
});
|
|
2345
|
-
const NumberInput = React$
|
|
2346
|
-
const [isFocused, setIsFocused] = React$
|
|
2347
|
-
const [inputString, setInputString] = React$
|
|
2348
|
-
const intlFormatter = React$
|
|
2353
|
+
const NumberInput = React$45.forwardRef(({ className, wrapperClassName, prefix, suffix, variant, showSpinButtons = false, __e2e_test_id__, onEnter, onChange, format: format$1, value: controlledValue,...props }, ref) => {
|
|
2354
|
+
const [isFocused, setIsFocused] = React$45.useState(false);
|
|
2355
|
+
const [inputString, setInputString] = React$45.useState("");
|
|
2356
|
+
const intlFormatter = React$45.useMemo(() => {
|
|
2349
2357
|
if (!format$1 || typeof format$1 === "function") return void 0;
|
|
2350
2358
|
return new Intl.NumberFormat(format$1.locale, format$1.options);
|
|
2351
2359
|
}, [format$1]);
|
|
@@ -2392,7 +2400,7 @@ const NumberInput = React$38.forwardRef(({ className, wrapperClassName, prefix,
|
|
|
2392
2400
|
setInputString("");
|
|
2393
2401
|
props.onBlur?.(e);
|
|
2394
2402
|
};
|
|
2395
|
-
const displayValue = React$
|
|
2403
|
+
const displayValue = React$45.useMemo(() => {
|
|
2396
2404
|
if (isFocused && format$1) {
|
|
2397
2405
|
if (inputString !== "") return inputString;
|
|
2398
2406
|
if (controlledValue !== void 0) {
|
|
@@ -2469,20 +2477,20 @@ function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFoc
|
|
|
2469
2477
|
const rowOriginal = cell?.row?.original ?? {};
|
|
2470
2478
|
const colCellMeta = cell?.column?.columnDef?.meta;
|
|
2471
2479
|
const align = colCellMeta?.align ?? "left";
|
|
2472
|
-
const editableResolver = React$
|
|
2480
|
+
const editableResolver = React$44.useMemo(() => {
|
|
2473
2481
|
const v = colCellMeta?.editable;
|
|
2474
2482
|
if (v === void 0) return () => true;
|
|
2475
2483
|
return typeof v === "function" ? v : () => Boolean(v);
|
|
2476
2484
|
}, [colCellMeta?.editable]);
|
|
2477
2485
|
const isEditable = editableResolver(rowOriginal);
|
|
2478
|
-
const classNameResolver = React$
|
|
2486
|
+
const classNameResolver = React$44.useMemo(() => {
|
|
2479
2487
|
const v = colCellMeta?.className;
|
|
2480
2488
|
return typeof v === "function" ? v : () => v;
|
|
2481
2489
|
}, [colCellMeta?.className]);
|
|
2482
2490
|
const colCellClassName = classNameResolver(rowOriginal);
|
|
2483
2491
|
const isSearchMatch = meta?.getIsSearchMatch?.(rowIndex, columnId) ?? false;
|
|
2484
2492
|
const isActiveSearchMatch = meta?.getIsActiveSearchMatch?.(rowIndex, columnId) ?? false;
|
|
2485
|
-
const onClick = React$
|
|
2493
|
+
const onClick = React$44.useCallback((event) => {
|
|
2486
2494
|
if (!isEditing) {
|
|
2487
2495
|
event.preventDefault();
|
|
2488
2496
|
onClickProp?.(event);
|
|
@@ -2495,7 +2503,7 @@ function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFoc
|
|
|
2495
2503
|
isEditing,
|
|
2496
2504
|
onClickProp
|
|
2497
2505
|
]);
|
|
2498
|
-
const onContextMenu = React$
|
|
2506
|
+
const onContextMenu = React$44.useCallback((event) => {
|
|
2499
2507
|
if (!isEditing) meta?.onCellContextMenu?.(rowIndex, columnId, event);
|
|
2500
2508
|
}, [
|
|
2501
2509
|
meta,
|
|
@@ -2503,7 +2511,7 @@ function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFoc
|
|
|
2503
2511
|
columnId,
|
|
2504
2512
|
isEditing
|
|
2505
2513
|
]);
|
|
2506
|
-
const onMouseDown = React$
|
|
2514
|
+
const onMouseDown = React$44.useCallback((event) => {
|
|
2507
2515
|
if (!isEditing) meta?.onCellMouseDown?.(rowIndex, columnId, event);
|
|
2508
2516
|
}, [
|
|
2509
2517
|
meta,
|
|
@@ -2511,7 +2519,7 @@ function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFoc
|
|
|
2511
2519
|
columnId,
|
|
2512
2520
|
isEditing
|
|
2513
2521
|
]);
|
|
2514
|
-
const onMouseEnter = React$
|
|
2522
|
+
const onMouseEnter = React$44.useCallback((event) => {
|
|
2515
2523
|
if (!isEditing) meta?.onCellMouseEnter?.(rowIndex, columnId, event);
|
|
2516
2524
|
}, [
|
|
2517
2525
|
meta,
|
|
@@ -2519,10 +2527,10 @@ function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFoc
|
|
|
2519
2527
|
columnId,
|
|
2520
2528
|
isEditing
|
|
2521
2529
|
]);
|
|
2522
|
-
const onMouseUp = React$
|
|
2530
|
+
const onMouseUp = React$44.useCallback(() => {
|
|
2523
2531
|
if (!isEditing) meta?.onCellMouseUp?.();
|
|
2524
2532
|
}, [meta, isEditing]);
|
|
2525
|
-
const onDoubleClick = React$
|
|
2533
|
+
const onDoubleClick = React$44.useCallback((event) => {
|
|
2526
2534
|
if (!isEditing) {
|
|
2527
2535
|
event.preventDefault();
|
|
2528
2536
|
if (isEditable) meta?.onCellDoubleClick?.(rowIndex, columnId);
|
|
@@ -2534,7 +2542,7 @@ function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFoc
|
|
|
2534
2542
|
isEditing,
|
|
2535
2543
|
isEditable
|
|
2536
2544
|
]);
|
|
2537
|
-
const onKeyDown = React$
|
|
2545
|
+
const onKeyDown = React$44.useCallback((event) => {
|
|
2538
2546
|
onKeyDownProp?.(event);
|
|
2539
2547
|
if (event.defaultPrevented) return;
|
|
2540
2548
|
if (event.key === "ArrowUp" || event.key === "ArrowDown" || event.key === "ArrowLeft" || event.key === "ArrowRight" || event.key === "Home" || event.key === "End" || event.key === "PageUp" || event.key === "PageDown" || event.key === "Enter" || event.key === "Tab") return;
|
|
@@ -2748,22 +2756,22 @@ function HierarchyItem({ option, selectedValue, expandedIds, onToggleExpand, onS
|
|
|
2748
2756
|
}
|
|
2749
2757
|
function HierarchyCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSelected }) {
|
|
2750
2758
|
const initialValue = cell.getValue();
|
|
2751
|
-
const [value, setValue] = React$
|
|
2752
|
-
const [open, setOpen] = React$
|
|
2753
|
-
const [searchValue, setSearchValue] = React$
|
|
2754
|
-
const containerRef = React$
|
|
2755
|
-
const inputRef = React$
|
|
2759
|
+
const [value, setValue] = React$43.useState(initialValue);
|
|
2760
|
+
const [open, setOpen] = React$43.useState(false);
|
|
2761
|
+
const [searchValue, setSearchValue] = React$43.useState("");
|
|
2762
|
+
const containerRef = React$43.useRef(null);
|
|
2763
|
+
const inputRef = React$43.useRef(null);
|
|
2756
2764
|
const meta = table.options.meta;
|
|
2757
2765
|
const cellOpts = cell.column.columnDef.meta?.cell;
|
|
2758
2766
|
const sideOffset = -(containerRef.current?.clientHeight ?? 0);
|
|
2759
2767
|
const options = cellOpts?.variant === "hierarchy" ? cellOpts.options : [];
|
|
2760
|
-
const [expandedIds, setExpandedIds] = React$
|
|
2761
|
-
const labelMap = React$
|
|
2762
|
-
const displayLabel = React$
|
|
2768
|
+
const [expandedIds, setExpandedIds] = React$43.useState(() => getInitialExpandedIds(options, initialValue));
|
|
2769
|
+
const labelMap = React$43.useMemo(() => buildLabelMap(options), [options]);
|
|
2770
|
+
const displayLabel = React$43.useMemo(() => {
|
|
2763
2771
|
if (!value) return "";
|
|
2764
2772
|
return labelMap.get(value) ?? value;
|
|
2765
2773
|
}, [value, labelMap]);
|
|
2766
|
-
const toggleExpand = React$
|
|
2774
|
+
const toggleExpand = React$43.useCallback((id) => {
|
|
2767
2775
|
setExpandedIds((prev) => {
|
|
2768
2776
|
const next = new Set(prev);
|
|
2769
2777
|
if (next.has(id)) next.delete(id);
|
|
@@ -2771,7 +2779,7 @@ function HierarchyCell({ cell, table, rowIndex, columnId, isFocused, isEditing,
|
|
|
2771
2779
|
return next;
|
|
2772
2780
|
});
|
|
2773
2781
|
}, []);
|
|
2774
|
-
const onOptionSelect = React$
|
|
2782
|
+
const onOptionSelect = React$43.useCallback((option) => {
|
|
2775
2783
|
const newValue = option.id;
|
|
2776
2784
|
setValue(newValue);
|
|
2777
2785
|
meta?.onDataUpdate?.({
|
|
@@ -2786,18 +2794,18 @@ function HierarchyCell({ cell, table, rowIndex, columnId, isFocused, isEditing,
|
|
|
2786
2794
|
rowIndex,
|
|
2787
2795
|
columnId
|
|
2788
2796
|
]);
|
|
2789
|
-
const onOpenChange = React$
|
|
2797
|
+
const onOpenChange = React$43.useCallback((isOpen) => {
|
|
2790
2798
|
setOpen(isOpen);
|
|
2791
2799
|
if (!isOpen) {
|
|
2792
2800
|
setSearchValue("");
|
|
2793
2801
|
meta?.onCellEditingStop?.();
|
|
2794
2802
|
}
|
|
2795
2803
|
}, [meta]);
|
|
2796
|
-
const onOpenAutoFocus = React$
|
|
2804
|
+
const onOpenAutoFocus = React$43.useCallback((event) => {
|
|
2797
2805
|
event.preventDefault();
|
|
2798
2806
|
inputRef.current?.focus();
|
|
2799
2807
|
}, []);
|
|
2800
|
-
const onWrapperKeyDown = React$
|
|
2808
|
+
const onWrapperKeyDown = React$43.useCallback((event) => {
|
|
2801
2809
|
if (isEditing) {
|
|
2802
2810
|
if (event.key === "Escape") {
|
|
2803
2811
|
event.preventDefault();
|
|
@@ -2817,10 +2825,10 @@ function HierarchyCell({ cell, table, rowIndex, columnId, isFocused, isEditing,
|
|
|
2817
2825
|
initialValue,
|
|
2818
2826
|
meta
|
|
2819
2827
|
]);
|
|
2820
|
-
React$
|
|
2828
|
+
React$43.useEffect(() => {
|
|
2821
2829
|
setValue(initialValue);
|
|
2822
2830
|
}, [initialValue]);
|
|
2823
|
-
React$
|
|
2831
|
+
React$43.useEffect(() => {
|
|
2824
2832
|
if (value) {
|
|
2825
2833
|
const ancestors = getAncestorIds(options, value);
|
|
2826
2834
|
if (ancestors && ancestors.length > 0) setExpandedIds((prev) => {
|
|
@@ -2830,7 +2838,7 @@ function HierarchyCell({ cell, table, rowIndex, columnId, isFocused, isEditing,
|
|
|
2830
2838
|
});
|
|
2831
2839
|
}
|
|
2832
2840
|
}, [value, options]);
|
|
2833
|
-
React$
|
|
2841
|
+
React$43.useEffect(() => {
|
|
2834
2842
|
if (isEditing && !open) setOpen(true);
|
|
2835
2843
|
if (isFocused && !isEditing && !meta?.searchOpen && !meta?.isScrolling && containerRef.current) containerRef.current.focus();
|
|
2836
2844
|
}, [
|
|
@@ -2928,9 +2936,9 @@ function EditorFooter({ count, onApply, onCancel }) {
|
|
|
2928
2936
|
});
|
|
2929
2937
|
}
|
|
2930
2938
|
function BulkEditShortText({ columnId, selectedRowIndices, onApply, onCancel }) {
|
|
2931
|
-
const [value, setValue] = React$
|
|
2932
|
-
const inputRef = React$
|
|
2933
|
-
const handleApply = React$
|
|
2939
|
+
const [value, setValue] = React$42.useState("");
|
|
2940
|
+
const inputRef = React$42.useRef(null);
|
|
2941
|
+
const handleApply = React$42.useCallback(() => {
|
|
2934
2942
|
onApply(selectedRowIndices.map((rowIndex) => ({
|
|
2935
2943
|
rowIndex,
|
|
2936
2944
|
columnId,
|
|
@@ -2942,14 +2950,14 @@ function BulkEditShortText({ columnId, selectedRowIndices, onApply, onCancel })
|
|
|
2942
2950
|
value,
|
|
2943
2951
|
onApply
|
|
2944
2952
|
]);
|
|
2945
|
-
const onKeyDown = React$
|
|
2953
|
+
const onKeyDown = React$42.useCallback((e) => {
|
|
2946
2954
|
stopGridKeys(e);
|
|
2947
2955
|
if (e.key === "Enter") {
|
|
2948
2956
|
e.preventDefault();
|
|
2949
2957
|
handleApply();
|
|
2950
2958
|
}
|
|
2951
2959
|
}, [handleApply]);
|
|
2952
|
-
React$
|
|
2960
|
+
React$42.useEffect(() => {
|
|
2953
2961
|
inputRef.current?.focus();
|
|
2954
2962
|
}, []);
|
|
2955
2963
|
return /* @__PURE__ */ jsxs("div", {
|
|
@@ -2971,9 +2979,9 @@ function BulkEditShortText({ columnId, selectedRowIndices, onApply, onCancel })
|
|
|
2971
2979
|
});
|
|
2972
2980
|
}
|
|
2973
2981
|
function BulkEditLongText({ columnId, selectedRowIndices, onApply, onCancel }) {
|
|
2974
|
-
const [value, setValue] = React$
|
|
2975
|
-
const textareaRef = React$
|
|
2976
|
-
const handleApply = React$
|
|
2982
|
+
const [value, setValue] = React$42.useState("");
|
|
2983
|
+
const textareaRef = React$42.useRef(null);
|
|
2984
|
+
const handleApply = React$42.useCallback(() => {
|
|
2977
2985
|
onApply(selectedRowIndices.map((rowIndex) => ({
|
|
2978
2986
|
rowIndex,
|
|
2979
2987
|
columnId,
|
|
@@ -2985,14 +2993,14 @@ function BulkEditLongText({ columnId, selectedRowIndices, onApply, onCancel }) {
|
|
|
2985
2993
|
value,
|
|
2986
2994
|
onApply
|
|
2987
2995
|
]);
|
|
2988
|
-
const onKeyDown = React$
|
|
2996
|
+
const onKeyDown = React$42.useCallback((e) => {
|
|
2989
2997
|
stopGridKeys(e);
|
|
2990
2998
|
if ((e.ctrlKey || e.metaKey) && e.key === "Enter") {
|
|
2991
2999
|
e.preventDefault();
|
|
2992
3000
|
handleApply();
|
|
2993
3001
|
}
|
|
2994
3002
|
}, [handleApply]);
|
|
2995
|
-
React$
|
|
3003
|
+
React$42.useEffect(() => {
|
|
2996
3004
|
textareaRef.current?.focus();
|
|
2997
3005
|
}, []);
|
|
2998
3006
|
return /* @__PURE__ */ jsxs("div", {
|
|
@@ -3015,12 +3023,12 @@ function BulkEditLongText({ columnId, selectedRowIndices, onApply, onCancel }) {
|
|
|
3015
3023
|
});
|
|
3016
3024
|
}
|
|
3017
3025
|
function BulkEditNumber({ cell, columnId, selectedRowIndices, onApply, onCancel }) {
|
|
3018
|
-
const [value, setValue] = React$
|
|
3019
|
-
const inputRef = React$
|
|
3026
|
+
const [value, setValue] = React$42.useState(void 0);
|
|
3027
|
+
const inputRef = React$42.useRef(null);
|
|
3020
3028
|
const { min, max, step, prefix, suffix } = cell.variant === "number" ? cell : {};
|
|
3021
3029
|
const stringPrefix = typeof prefix === "string" ? prefix : void 0;
|
|
3022
3030
|
const stringSuffix = typeof suffix === "string" ? suffix : void 0;
|
|
3023
|
-
const handleApply = React$
|
|
3031
|
+
const handleApply = React$42.useCallback(() => {
|
|
3024
3032
|
const numValue = value ?? null;
|
|
3025
3033
|
onApply(selectedRowIndices.map((rowIndex) => ({
|
|
3026
3034
|
rowIndex,
|
|
@@ -3033,14 +3041,14 @@ function BulkEditNumber({ cell, columnId, selectedRowIndices, onApply, onCancel
|
|
|
3033
3041
|
value,
|
|
3034
3042
|
onApply
|
|
3035
3043
|
]);
|
|
3036
|
-
const onKeyDown = React$
|
|
3044
|
+
const onKeyDown = React$42.useCallback((e) => {
|
|
3037
3045
|
stopGridKeys(e);
|
|
3038
3046
|
if (e.key === "Enter") {
|
|
3039
3047
|
e.preventDefault();
|
|
3040
3048
|
handleApply();
|
|
3041
3049
|
}
|
|
3042
3050
|
}, [handleApply]);
|
|
3043
|
-
React$
|
|
3051
|
+
React$42.useEffect(() => {
|
|
3044
3052
|
inputRef.current?.focus();
|
|
3045
3053
|
}, []);
|
|
3046
3054
|
return /* @__PURE__ */ jsxs("div", {
|
|
@@ -3069,8 +3077,8 @@ function BulkEditNumber({ cell, columnId, selectedRowIndices, onApply, onCancel
|
|
|
3069
3077
|
}
|
|
3070
3078
|
function BulkEditSelect({ cell, columnId, selectedRowIndices, onApply, onCancel }) {
|
|
3071
3079
|
const { options: arrayOptions, optionsMap, optionsRenderer } = cell.variant === "select" ? cell : {};
|
|
3072
|
-
const inputRef = React$
|
|
3073
|
-
const options = React$
|
|
3080
|
+
const inputRef = React$42.useRef(null);
|
|
3081
|
+
const options = React$42.useMemo(() => {
|
|
3074
3082
|
if (arrayOptions) return arrayOptions.map((opt) => ({
|
|
3075
3083
|
value: opt.value,
|
|
3076
3084
|
data: opt.label
|
|
@@ -3081,7 +3089,7 @@ function BulkEditSelect({ cell, columnId, selectedRowIndices, onApply, onCancel
|
|
|
3081
3089
|
}));
|
|
3082
3090
|
return [];
|
|
3083
3091
|
}, [arrayOptions, optionsMap]);
|
|
3084
|
-
const handleSelect = React$
|
|
3092
|
+
const handleSelect = React$42.useCallback((newValue) => {
|
|
3085
3093
|
onApply(selectedRowIndices.map((rowIndex) => ({
|
|
3086
3094
|
rowIndex,
|
|
3087
3095
|
columnId,
|
|
@@ -3092,7 +3100,7 @@ function BulkEditSelect({ cell, columnId, selectedRowIndices, onApply, onCancel
|
|
|
3092
3100
|
columnId,
|
|
3093
3101
|
onApply
|
|
3094
3102
|
]);
|
|
3095
|
-
React$
|
|
3103
|
+
React$42.useEffect(() => {
|
|
3096
3104
|
inputRef.current?.focus();
|
|
3097
3105
|
}, []);
|
|
3098
3106
|
return /* @__PURE__ */ jsxs("div", {
|
|
@@ -3116,10 +3124,10 @@ function BulkEditSelect({ cell, columnId, selectedRowIndices, onApply, onCancel
|
|
|
3116
3124
|
}
|
|
3117
3125
|
function BulkEditMultiSelect({ cell, columnId, selectedRowIndices, onApply, onCancel }) {
|
|
3118
3126
|
const { options: arrayOptions, optionsMap } = cell.variant === "multi-select" ? cell : {};
|
|
3119
|
-
const [selectedValues, setSelectedValues] = React$
|
|
3120
|
-
const [searchValue, setSearchValue] = React$
|
|
3121
|
-
const inputRef = React$
|
|
3122
|
-
const options = React$
|
|
3127
|
+
const [selectedValues, setSelectedValues] = React$42.useState([]);
|
|
3128
|
+
const [searchValue, setSearchValue] = React$42.useState("");
|
|
3129
|
+
const inputRef = React$42.useRef(null);
|
|
3130
|
+
const options = React$42.useMemo(() => {
|
|
3123
3131
|
if (arrayOptions) return arrayOptions;
|
|
3124
3132
|
if (optionsMap) return Array.from(optionsMap.entries()).map(([id, label]) => ({
|
|
3125
3133
|
value: id,
|
|
@@ -3127,12 +3135,12 @@ function BulkEditMultiSelect({ cell, columnId, selectedRowIndices, onApply, onCa
|
|
|
3127
3135
|
}));
|
|
3128
3136
|
return [];
|
|
3129
3137
|
}, [arrayOptions, optionsMap]);
|
|
3130
|
-
const toggleValue = React$
|
|
3138
|
+
const toggleValue = React$42.useCallback((value) => {
|
|
3131
3139
|
setSelectedValues((prev) => prev.includes(value) ? prev.filter((v) => v !== value) : [...prev, value]);
|
|
3132
3140
|
setSearchValue("");
|
|
3133
3141
|
queueMicrotask(() => inputRef.current?.focus());
|
|
3134
3142
|
}, []);
|
|
3135
|
-
const handleApply = React$
|
|
3143
|
+
const handleApply = React$42.useCallback(() => {
|
|
3136
3144
|
onApply(selectedRowIndices.map((rowIndex) => ({
|
|
3137
3145
|
rowIndex,
|
|
3138
3146
|
columnId,
|
|
@@ -3144,7 +3152,7 @@ function BulkEditMultiSelect({ cell, columnId, selectedRowIndices, onApply, onCa
|
|
|
3144
3152
|
selectedValues,
|
|
3145
3153
|
onApply
|
|
3146
3154
|
]);
|
|
3147
|
-
React$
|
|
3155
|
+
React$42.useEffect(() => {
|
|
3148
3156
|
inputRef.current?.focus();
|
|
3149
3157
|
}, []);
|
|
3150
3158
|
return /* @__PURE__ */ jsxs("div", {
|
|
@@ -3210,7 +3218,7 @@ function BulkEditMultiSelect({ cell, columnId, selectedRowIndices, onApply, onCa
|
|
|
3210
3218
|
});
|
|
3211
3219
|
}
|
|
3212
3220
|
function BulkEditCheckbox({ columnId, selectedRowIndices, onApply, onCancel }) {
|
|
3213
|
-
const setAll = React$
|
|
3221
|
+
const setAll = React$42.useCallback((val) => {
|
|
3214
3222
|
onApply(selectedRowIndices.map((rowIndex) => ({
|
|
3215
3223
|
rowIndex,
|
|
3216
3224
|
columnId,
|
|
@@ -3247,10 +3255,10 @@ function BulkEditCheckbox({ columnId, selectedRowIndices, onApply, onCancel }) {
|
|
|
3247
3255
|
}
|
|
3248
3256
|
function BulkEditHierarchy({ cell, columnId, selectedRowIndices, onApply, onCancel }) {
|
|
3249
3257
|
const options = cell.variant === "hierarchy" ? cell.options : [];
|
|
3250
|
-
const inputRef = React$
|
|
3251
|
-
const [searchValue, setSearchValue] = React$
|
|
3252
|
-
const [expandedIds, setExpandedIds] = React$
|
|
3253
|
-
const toggleExpand = React$
|
|
3258
|
+
const inputRef = React$42.useRef(null);
|
|
3259
|
+
const [searchValue, setSearchValue] = React$42.useState("");
|
|
3260
|
+
const [expandedIds, setExpandedIds] = React$42.useState(() => getInitialExpandedIds(options, null));
|
|
3261
|
+
const toggleExpand = React$42.useCallback((id) => {
|
|
3254
3262
|
setExpandedIds((prev) => {
|
|
3255
3263
|
const next = new Set(prev);
|
|
3256
3264
|
if (next.has(id)) next.delete(id);
|
|
@@ -3258,7 +3266,7 @@ function BulkEditHierarchy({ cell, columnId, selectedRowIndices, onApply, onCanc
|
|
|
3258
3266
|
return next;
|
|
3259
3267
|
});
|
|
3260
3268
|
}, []);
|
|
3261
|
-
const handleSelect = React$
|
|
3269
|
+
const handleSelect = React$42.useCallback((option) => {
|
|
3262
3270
|
onApply(selectedRowIndices.map((rowIndex) => ({
|
|
3263
3271
|
rowIndex,
|
|
3264
3272
|
columnId,
|
|
@@ -3269,7 +3277,7 @@ function BulkEditHierarchy({ cell, columnId, selectedRowIndices, onApply, onCanc
|
|
|
3269
3277
|
columnId,
|
|
3270
3278
|
onApply
|
|
3271
3279
|
]);
|
|
3272
|
-
React$
|
|
3280
|
+
React$42.useEffect(() => {
|
|
3273
3281
|
inputRef.current?.focus();
|
|
3274
3282
|
}, []);
|
|
3275
3283
|
return /* @__PURE__ */ jsxs("div", {
|
|
@@ -3300,7 +3308,7 @@ function BulkEditHierarchy({ cell, columnId, selectedRowIndices, onApply, onCanc
|
|
|
3300
3308
|
});
|
|
3301
3309
|
}
|
|
3302
3310
|
function BulkEditDate({ columnId, selectedRowIndices, onApply, onCancel }) {
|
|
3303
|
-
const onDateSelect = React$
|
|
3311
|
+
const onDateSelect = React$42.useCallback((date) => {
|
|
3304
3312
|
if (!date) return;
|
|
3305
3313
|
const year = date.getFullYear();
|
|
3306
3314
|
const month = String(date.getMonth() + 1).padStart(2, "0");
|
|
@@ -3332,28 +3340,28 @@ function BulkEditDate({ columnId, selectedRowIndices, onApply, onCancel }) {
|
|
|
3332
3340
|
});
|
|
3333
3341
|
}
|
|
3334
3342
|
function BulkEditPopover({ table, cell, columnId, open, onOpenChange, children }) {
|
|
3335
|
-
const selectedRowIndices = React$
|
|
3343
|
+
const selectedRowIndices = React$42.useMemo(() => {
|
|
3336
3344
|
if (!open) return [];
|
|
3337
3345
|
const allRows = table.getRowModel().rows;
|
|
3338
3346
|
const indices = [];
|
|
3339
3347
|
for (let i = 0; i < allRows.length; i++) if (allRows[i].getIsSelected()) indices.push(i);
|
|
3340
3348
|
return indices;
|
|
3341
3349
|
}, [open, table]);
|
|
3342
|
-
React$
|
|
3350
|
+
React$42.useEffect(() => {
|
|
3343
3351
|
if (open && selectedRowIndices.length === 0) onOpenChange(false);
|
|
3344
3352
|
}, [
|
|
3345
3353
|
open,
|
|
3346
3354
|
selectedRowIndices.length,
|
|
3347
3355
|
onOpenChange
|
|
3348
3356
|
]);
|
|
3349
|
-
const onApply = React$
|
|
3357
|
+
const onApply = React$42.useCallback((updates) => {
|
|
3350
3358
|
table.options.meta?.onDataUpdate?.(updates);
|
|
3351
3359
|
onOpenChange(false);
|
|
3352
3360
|
}, [table, onOpenChange]);
|
|
3353
|
-
const onCancel = React$
|
|
3361
|
+
const onCancel = React$42.useCallback(() => {
|
|
3354
3362
|
onOpenChange(false);
|
|
3355
3363
|
}, [onOpenChange]);
|
|
3356
|
-
const onOpenAutoFocus = React$
|
|
3364
|
+
const onOpenAutoFocus = React$42.useCallback((e) => {
|
|
3357
3365
|
e.preventDefault();
|
|
3358
3366
|
}, []);
|
|
3359
3367
|
const editorProps = {
|
|
@@ -3363,7 +3371,7 @@ function BulkEditPopover({ table, cell, columnId, open, onOpenChange, children }
|
|
|
3363
3371
|
onApply,
|
|
3364
3372
|
onCancel
|
|
3365
3373
|
};
|
|
3366
|
-
const editor = React$
|
|
3374
|
+
const editor = React$42.useMemo(() => {
|
|
3367
3375
|
switch (cell.variant) {
|
|
3368
3376
|
case "short-text": return /* @__PURE__ */ jsx(BulkEditShortText, { ...editorProps });
|
|
3369
3377
|
case "long-text": return /* @__PURE__ */ jsx(BulkEditLongText, { ...editorProps });
|
|
@@ -3437,12 +3445,16 @@ function getColumnVariant(variant) {
|
|
|
3437
3445
|
icon: CalendarIcon$1,
|
|
3438
3446
|
label: "Date"
|
|
3439
3447
|
};
|
|
3448
|
+
case "download-file": return {
|
|
3449
|
+
icon: DownloadIcon,
|
|
3450
|
+
label: "File download"
|
|
3451
|
+
};
|
|
3440
3452
|
default: return null;
|
|
3441
3453
|
}
|
|
3442
3454
|
}
|
|
3443
3455
|
function DataGridColumnHeader({ header, table, className, onPointerDown,...props }) {
|
|
3444
|
-
const [open, setOpen] = React$
|
|
3445
|
-
const [bulkEditOpen, setBulkEditOpen] = React$
|
|
3456
|
+
const [open, setOpen] = React$41.useState(false);
|
|
3457
|
+
const [bulkEditOpen, setBulkEditOpen] = React$41.useState(false);
|
|
3446
3458
|
const column = header.column;
|
|
3447
3459
|
const label = column.columnDef.meta?.label ? column.columnDef.meta.label : typeof column.columnDef.header === "string" ? column.columnDef.header : column.id;
|
|
3448
3460
|
const isAnyColumnResizing = table.getState().columnSizingInfo.isResizingColumn;
|
|
@@ -3451,13 +3463,13 @@ function DataGridColumnHeader({ header, table, className, onPointerDown,...props
|
|
|
3451
3463
|
const enableBulkEdit = column.columnDef.meta?.enableBulkEdit ?? false;
|
|
3452
3464
|
const selectedRowCount = Object.keys(table.getState().rowSelection).length;
|
|
3453
3465
|
const showBulkEdit = enableBulkEdit && selectedRowCount > 1 && cellVariant != null && EditableCellVariantsSet.has(cellVariant?.variant);
|
|
3454
|
-
React$
|
|
3466
|
+
React$41.useEffect(() => {
|
|
3455
3467
|
if (!showBulkEdit) setBulkEditOpen(false);
|
|
3456
3468
|
}, [showBulkEdit]);
|
|
3457
3469
|
const pinnedPosition = column.getIsPinned();
|
|
3458
3470
|
const isPinnedLeft = pinnedPosition === "left";
|
|
3459
3471
|
const isPinnedRight = pinnedPosition === "right";
|
|
3460
|
-
const onSortingChange = React$
|
|
3472
|
+
const onSortingChange = React$41.useCallback((direction) => {
|
|
3461
3473
|
table.setSorting((prev) => {
|
|
3462
3474
|
const existingSortIndex = prev.findIndex((sort) => sort.id === column.id);
|
|
3463
3475
|
const newSort = {
|
|
@@ -3471,19 +3483,19 @@ function DataGridColumnHeader({ header, table, className, onPointerDown,...props
|
|
|
3471
3483
|
} else return [...prev, newSort];
|
|
3472
3484
|
});
|
|
3473
3485
|
}, [column.id, table]);
|
|
3474
|
-
const onSortRemove = React$
|
|
3486
|
+
const onSortRemove = React$41.useCallback(() => {
|
|
3475
3487
|
table.setSorting((prev) => prev.filter((sort) => sort.id !== column.id));
|
|
3476
3488
|
}, [column.id, table]);
|
|
3477
|
-
const onLeftPin = React$
|
|
3489
|
+
const onLeftPin = React$41.useCallback(() => {
|
|
3478
3490
|
column.pin("left");
|
|
3479
3491
|
}, [column]);
|
|
3480
|
-
const onRightPin = React$
|
|
3492
|
+
const onRightPin = React$41.useCallback(() => {
|
|
3481
3493
|
column.pin("right");
|
|
3482
3494
|
}, [column]);
|
|
3483
|
-
const onUnpin = React$
|
|
3495
|
+
const onUnpin = React$41.useCallback(() => {
|
|
3484
3496
|
column.pin(false);
|
|
3485
3497
|
}, [column]);
|
|
3486
|
-
const onTriggerPointerDown = React$
|
|
3498
|
+
const onTriggerPointerDown = React$41.useCallback((event) => {
|
|
3487
3499
|
onPointerDown?.(event);
|
|
3488
3500
|
if (event.defaultPrevented) return;
|
|
3489
3501
|
if (event.button !== 0) return;
|
|
@@ -3610,7 +3622,7 @@ function DataGridColumnHeader({ header, table, className, onPointerDown,...props
|
|
|
3610
3622
|
})
|
|
3611
3623
|
] });
|
|
3612
3624
|
}
|
|
3613
|
-
const DataGridColumnResizer = React$
|
|
3625
|
+
const DataGridColumnResizer = React$41.memo(DataGridColumnResizerImpl, (prev, next) => {
|
|
3614
3626
|
const prevColumn = prev.header.column;
|
|
3615
3627
|
const nextColumn = next.header.column;
|
|
3616
3628
|
if (prevColumn.getIsResizing() !== nextColumn.getIsResizing() || prevColumn.getSize() !== nextColumn.getSize()) return false;
|
|
@@ -3619,7 +3631,7 @@ const DataGridColumnResizer = React$34.memo(DataGridColumnResizerImpl, (prev, ne
|
|
|
3619
3631
|
});
|
|
3620
3632
|
function DataGridColumnResizerImpl({ header, table, label }) {
|
|
3621
3633
|
const defaultColumnDef = table._getDefaultColumnDef();
|
|
3622
|
-
const onDoubleClick = React$
|
|
3634
|
+
const onDoubleClick = React$41.useCallback(() => {
|
|
3623
3635
|
header.column.resetSize();
|
|
3624
3636
|
}, [header.column]);
|
|
3625
3637
|
return /* @__PURE__ */ jsx("div", {
|
|
@@ -3728,7 +3740,7 @@ function DataGridContextMenu({ table }) {
|
|
|
3728
3740
|
onRowsDelete
|
|
3729
3741
|
});
|
|
3730
3742
|
}
|
|
3731
|
-
const ContextMenu$1 = React$
|
|
3743
|
+
const ContextMenu$1 = React$40.memo(ContextMenuImpl, (prev, next) => {
|
|
3732
3744
|
if (prev.contextMenu.open !== next.contextMenu.open) return false;
|
|
3733
3745
|
if (!next.contextMenu.open) return true;
|
|
3734
3746
|
if (prev.contextMenu.x !== next.contextMenu.x) return false;
|
|
@@ -3739,7 +3751,7 @@ const ContextMenu$1 = React$33.memo(ContextMenuImpl, (prev, next) => {
|
|
|
3739
3751
|
return true;
|
|
3740
3752
|
});
|
|
3741
3753
|
function ContextMenuImpl({ table, dataGridRef, contextMenu, onContextMenuOpenChange, selectionState, onDataUpdate, onRowsDelete }) {
|
|
3742
|
-
const triggerStyle = React$
|
|
3754
|
+
const triggerStyle = React$40.useMemo(() => ({
|
|
3743
3755
|
position: "fixed",
|
|
3744
3756
|
left: `${contextMenu.x}px`,
|
|
3745
3757
|
top: `${contextMenu.y}px`,
|
|
@@ -3752,11 +3764,11 @@ function ContextMenuImpl({ table, dataGridRef, contextMenu, onContextMenuOpenCha
|
|
|
3752
3764
|
pointerEvents: "none",
|
|
3753
3765
|
opacity: 0
|
|
3754
3766
|
}), [contextMenu.x, contextMenu.y]);
|
|
3755
|
-
const onCloseAutoFocus = React$
|
|
3767
|
+
const onCloseAutoFocus = React$40.useCallback((event) => {
|
|
3756
3768
|
event.preventDefault();
|
|
3757
3769
|
dataGridRef?.current?.focus();
|
|
3758
3770
|
}, [dataGridRef]);
|
|
3759
|
-
const onCopy = React$
|
|
3771
|
+
const onCopy = React$40.useCallback(async () => {
|
|
3760
3772
|
if (!selectionState?.selectedCells || selectionState.selectedCells.size === 0) return;
|
|
3761
3773
|
const rows = table.getRowModel().rows;
|
|
3762
3774
|
const columnIds = [];
|
|
@@ -3795,7 +3807,7 @@ function ContextMenuImpl({ table, dataGridRef, contextMenu, onContextMenuOpenCha
|
|
|
3795
3807
|
await navigator.clipboard.writeText(tsvData);
|
|
3796
3808
|
toast$1.success(`${selectionState.selectedCells.size} cell${selectionState.selectedCells.size !== 1 ? "s" : ""} copied`);
|
|
3797
3809
|
}, [table, selectionState]);
|
|
3798
|
-
const canClear = React$
|
|
3810
|
+
const canClear = React$40.useMemo(() => {
|
|
3799
3811
|
if (!selectionState?.selectedCells || selectionState.selectedCells.size === 0) return false;
|
|
3800
3812
|
const visibleCols = table.getVisibleLeafColumns();
|
|
3801
3813
|
const rows = table.getRowModel().rows;
|
|
@@ -3812,7 +3824,7 @@ function ContextMenuImpl({ table, dataGridRef, contextMenu, onContextMenuOpenCha
|
|
|
3812
3824
|
}
|
|
3813
3825
|
return true;
|
|
3814
3826
|
}, [selectionState, table]);
|
|
3815
|
-
const onClear = React$
|
|
3827
|
+
const onClear = React$40.useCallback(() => {
|
|
3816
3828
|
if (!selectionState?.selectedCells || selectionState.selectedCells.size === 0) return;
|
|
3817
3829
|
if (!canClear) return;
|
|
3818
3830
|
const updates = [];
|
|
@@ -3831,7 +3843,7 @@ function ContextMenuImpl({ table, dataGridRef, contextMenu, onContextMenuOpenCha
|
|
|
3831
3843
|
selectionState,
|
|
3832
3844
|
canClear
|
|
3833
3845
|
]);
|
|
3834
|
-
const onDelete = React$
|
|
3846
|
+
const onDelete = React$40.useCallback(async () => {
|
|
3835
3847
|
if (!selectionState?.selectedCells || selectionState.selectedCells.size === 0) return;
|
|
3836
3848
|
const rowIndices = new Set();
|
|
3837
3849
|
for (const cellKey of selectionState.selectedCells) {
|
|
@@ -3908,12 +3920,12 @@ function composeRefs(...refs) {
|
|
|
3908
3920
|
* Accepts callback refs and RefObject(s)
|
|
3909
3921
|
*/
|
|
3910
3922
|
function useComposedRefs(...refs) {
|
|
3911
|
-
return React$
|
|
3923
|
+
return React$39.useCallback(composeRefs(...refs), refs);
|
|
3912
3924
|
}
|
|
3913
3925
|
|
|
3914
3926
|
//#endregion
|
|
3915
3927
|
//#region src/data-grid/data-grid-row.tsx
|
|
3916
|
-
const DataGridRow = React$
|
|
3928
|
+
const DataGridRow = React$38.memo(DataGridRowImpl, (prev, next) => {
|
|
3917
3929
|
if (prev.row.id !== next.row.id) return false;
|
|
3918
3930
|
if (prev.row.original !== next.row.original) return false;
|
|
3919
3931
|
const prevRowIndex = prev.virtualRowIndex;
|
|
@@ -3945,7 +3957,7 @@ function DataGridRowImpl({ row, virtualRowIndex, virtualStart, rowVirtualizer, r
|
|
|
3945
3957
|
}
|
|
3946
3958
|
});
|
|
3947
3959
|
const isRowSelected = row.getIsSelected();
|
|
3948
|
-
const handleRowClick = React$
|
|
3960
|
+
const handleRowClick = React$38.useCallback((event) => {
|
|
3949
3961
|
const target = event.target;
|
|
3950
3962
|
if (target.closest("input, button, [role=\"checkbox\"]")) return;
|
|
3951
3963
|
if (event.detail === 1) onRowClick?.(virtualRowIndex);
|
|
@@ -3974,7 +3986,7 @@ function DataGridRowImpl({ row, virtualRowIndex, virtualStart, rowVirtualizer, r
|
|
|
3974
3986
|
"data-highlighted": isCellFocused ? "" : void 0,
|
|
3975
3987
|
"data-slot": "grid-cell",
|
|
3976
3988
|
tabIndex: -1,
|
|
3977
|
-
className: cn({ "border-r": cell.column.id !== "select" }),
|
|
3989
|
+
className: cn("shrink-0 overflow-hidden", { "border-r": cell.column.id !== "select" }),
|
|
3978
3990
|
style: {
|
|
3979
3991
|
...getCommonPinningStyles({ column: cell.column }),
|
|
3980
3992
|
width: `calc(var(--col-${cell.column.id}-size) * 1px)`
|
|
@@ -3995,20 +4007,20 @@ function DataGridRowImpl({ row, virtualRowIndex, virtualStart, rowVirtualizer, r
|
|
|
3995
4007
|
* prop or avoid re-executing effects when passed as a dependency
|
|
3996
4008
|
*/
|
|
3997
4009
|
function useCallbackRef(callback) {
|
|
3998
|
-
const callbackRef = React$
|
|
3999
|
-
React$
|
|
4010
|
+
const callbackRef = React$37.useRef(callback);
|
|
4011
|
+
React$37.useEffect(() => {
|
|
4000
4012
|
callbackRef.current = callback;
|
|
4001
4013
|
});
|
|
4002
|
-
return React$
|
|
4014
|
+
return React$37.useMemo(() => (...args) => callbackRef.current?.(...args), []);
|
|
4003
4015
|
}
|
|
4004
4016
|
|
|
4005
4017
|
//#endregion
|
|
4006
4018
|
//#region src/hooks/use-debounced-callback.ts
|
|
4007
4019
|
function useDebouncedCallback(callback, delay) {
|
|
4008
4020
|
const handleCallback = useCallbackRef(callback);
|
|
4009
|
-
const debounceTimerRef = React$
|
|
4010
|
-
React$
|
|
4011
|
-
const setValue = React$
|
|
4021
|
+
const debounceTimerRef = React$36.useRef(0);
|
|
4022
|
+
React$36.useEffect(() => () => window.clearTimeout(debounceTimerRef.current), []);
|
|
4023
|
+
const setValue = React$36.useCallback((...args) => {
|
|
4012
4024
|
window.clearTimeout(debounceTimerRef.current);
|
|
4013
4025
|
debounceTimerRef.current = window.setTimeout(() => handleCallback(...args), delay);
|
|
4014
4026
|
}, [handleCallback, delay]);
|
|
@@ -4017,7 +4029,7 @@ function useDebouncedCallback(callback, delay) {
|
|
|
4017
4029
|
|
|
4018
4030
|
//#endregion
|
|
4019
4031
|
//#region src/data-grid/data-grid-search.tsx
|
|
4020
|
-
const DataGridSearch = React$
|
|
4032
|
+
const DataGridSearch = React$35.memo(DataGridSearchImpl, (prev, next) => {
|
|
4021
4033
|
if (prev.searchOpen !== next.searchOpen) return false;
|
|
4022
4034
|
if (!next.searchOpen) return true;
|
|
4023
4035
|
if (prev.searchQuery !== next.searchQuery || prev.matchIndex !== next.matchIndex) return false;
|
|
@@ -4031,13 +4043,13 @@ const DataGridSearch = React$28.memo(DataGridSearchImpl, (prev, next) => {
|
|
|
4031
4043
|
return true;
|
|
4032
4044
|
});
|
|
4033
4045
|
function DataGridSearchImpl({ searchMatches, matchIndex, searchOpen, onSearchOpenChange, searchQuery, onSearchQueryChange, onSearch, onNavigateToNextMatch, onNavigateToPrevMatch }) {
|
|
4034
|
-
const inputRef = React$
|
|
4035
|
-
React$
|
|
4046
|
+
const inputRef = React$35.useRef(null);
|
|
4047
|
+
React$35.useEffect(() => {
|
|
4036
4048
|
if (searchOpen) requestAnimationFrame(() => {
|
|
4037
4049
|
inputRef.current?.focus();
|
|
4038
4050
|
});
|
|
4039
4051
|
}, [searchOpen]);
|
|
4040
|
-
React$
|
|
4052
|
+
React$35.useEffect(() => {
|
|
4041
4053
|
if (!searchOpen) return;
|
|
4042
4054
|
function onEscape(event) {
|
|
4043
4055
|
if (event.key === "Escape") {
|
|
@@ -4048,7 +4060,7 @@ function DataGridSearchImpl({ searchMatches, matchIndex, searchOpen, onSearchOpe
|
|
|
4048
4060
|
document.addEventListener("keydown", onEscape);
|
|
4049
4061
|
return () => document.removeEventListener("keydown", onEscape);
|
|
4050
4062
|
}, [searchOpen, onSearchOpenChange]);
|
|
4051
|
-
const onKeyDown = React$
|
|
4063
|
+
const onKeyDown = React$35.useCallback((event) => {
|
|
4052
4064
|
event.stopPropagation();
|
|
4053
4065
|
if (event.key === "Enter") {
|
|
4054
4066
|
event.preventDefault();
|
|
@@ -4059,20 +4071,20 @@ function DataGridSearchImpl({ searchMatches, matchIndex, searchOpen, onSearchOpe
|
|
|
4059
4071
|
const debouncedSearch = useDebouncedCallback((query) => {
|
|
4060
4072
|
onSearch(query);
|
|
4061
4073
|
}, 150);
|
|
4062
|
-
const onChange = React$
|
|
4074
|
+
const onChange = React$35.useCallback((event) => {
|
|
4063
4075
|
const value = event.target.value;
|
|
4064
4076
|
onSearchQueryChange(value);
|
|
4065
4077
|
debouncedSearch(value);
|
|
4066
4078
|
}, [onSearchQueryChange, debouncedSearch]);
|
|
4067
|
-
const onTriggerPointerDown = React$
|
|
4079
|
+
const onTriggerPointerDown = React$35.useCallback((event) => {
|
|
4068
4080
|
const target = event.target;
|
|
4069
4081
|
if (!(target instanceof HTMLElement)) return;
|
|
4070
4082
|
if (target.hasPointerCapture(event.pointerId)) target.releasePointerCapture(event.pointerId);
|
|
4071
4083
|
if (event.button === 0 && event.ctrlKey === false && event.pointerType === "mouse" && !(event.target instanceof HTMLInputElement)) event.preventDefault();
|
|
4072
4084
|
}, []);
|
|
4073
|
-
const onPrevMatchPointerDown = React$
|
|
4074
|
-
const onNextMatchPointerDown = React$
|
|
4075
|
-
const onClose = React$
|
|
4085
|
+
const onPrevMatchPointerDown = React$35.useCallback((event) => onTriggerPointerDown(event), [onTriggerPointerDown]);
|
|
4086
|
+
const onNextMatchPointerDown = React$35.useCallback((event) => onTriggerPointerDown(event), [onTriggerPointerDown]);
|
|
4087
|
+
const onClose = React$35.useCallback(() => {
|
|
4076
4088
|
onSearchOpenChange(false);
|
|
4077
4089
|
}, [onSearchOpenChange]);
|
|
4078
4090
|
if (!searchOpen) return null;
|
|
@@ -4153,15 +4165,15 @@ function DataGrid({ dataGridRef, headerRef, rowMapRef, footerRef, table, rowVirt
|
|
|
4153
4165
|
const visibleColumnIds = table.getVisibleLeafColumns().map((c) => c.id).join(",");
|
|
4154
4166
|
const pinningState = table.getState().columnPinning;
|
|
4155
4167
|
const columnPinningKey = `${(pinningState.left ?? []).join(",")}|${(pinningState.right ?? []).join(",")}`;
|
|
4156
|
-
const prevVisibleColumnIdsRef = React$
|
|
4168
|
+
const prevVisibleColumnIdsRef = React$34.useRef(visibleColumnIds);
|
|
4157
4169
|
if (prevVisibleColumnIdsRef.current !== visibleColumnIds) {
|
|
4158
4170
|
rowMapRef.current.clear();
|
|
4159
4171
|
prevVisibleColumnIdsRef.current = visibleColumnIds;
|
|
4160
4172
|
}
|
|
4161
|
-
const onGridContextMenu = React$
|
|
4173
|
+
const onGridContextMenu = React$34.useCallback((event) => {
|
|
4162
4174
|
event.preventDefault();
|
|
4163
4175
|
}, []);
|
|
4164
|
-
const onAddRowKeyDown = React$
|
|
4176
|
+
const onAddRowKeyDown = React$34.useCallback(async (event) => {
|
|
4165
4177
|
if (!onRowAdd) return;
|
|
4166
4178
|
if (event.key === "Enter" || event.key === "") {
|
|
4167
4179
|
event.preventDefault();
|
|
@@ -4218,7 +4230,7 @@ function DataGrid({ dataGridRef, headerRef, rowMapRef, footerRef, table, rowVirt
|
|
|
4218
4230
|
"aria-sort": currentSort?.desc === false ? "ascending" : currentSort?.desc === true ? "descending" : isSortable ? "none" : void 0,
|
|
4219
4231
|
"data-slot": "grid-header-cell",
|
|
4220
4232
|
tabIndex: -1,
|
|
4221
|
-
className: cn("relative", { "border-r": header.column.id !== "select" }),
|
|
4233
|
+
className: cn("relative shrink-0", { "border-r": header.column.id !== "select" }),
|
|
4222
4234
|
style: {
|
|
4223
4235
|
...getCommonPinningStyles({ column: header.column }),
|
|
4224
4236
|
width: `calc(var(--header-${header.id}-size) * 1px)`
|
|
@@ -4248,7 +4260,7 @@ function DataGrid({ dataGridRef, headerRef, rowMapRef, footerRef, table, rowVirt
|
|
|
4248
4260
|
transform: `translateY(${virtualItem.start}px)`
|
|
4249
4261
|
},
|
|
4250
4262
|
children: table.getVisibleLeafColumns().map((col) => /* @__PURE__ */ jsx("div", {
|
|
4251
|
-
className: "px-3",
|
|
4263
|
+
className: "shrink-0 px-3",
|
|
4252
4264
|
style: { width: `calc(var(--col-${col.id}-size) * 1px)` },
|
|
4253
4265
|
children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" })
|
|
4254
4266
|
}, col.id))
|
|
@@ -4313,17 +4325,17 @@ function DataGrid({ dataGridRef, headerRef, rowMapRef, footerRef, table, rowVirt
|
|
|
4313
4325
|
function CheckboxCell({ cell, table, rowIndex, columnId, isFocused, isSelected }) {
|
|
4314
4326
|
const cellValue = cell.getValue();
|
|
4315
4327
|
const cellValueAsBoolean = Boolean(cellValue);
|
|
4316
|
-
const [value, setValue] = React$
|
|
4317
|
-
const containerRef = React$
|
|
4328
|
+
const [value, setValue] = React$33.useState(cellValueAsBoolean);
|
|
4329
|
+
const containerRef = React$33.useRef(null);
|
|
4318
4330
|
const meta = table.options.meta;
|
|
4319
4331
|
const colMeta = cell.column.columnDef.meta;
|
|
4320
|
-
const editableResolver = React$
|
|
4332
|
+
const editableResolver = React$33.useMemo(() => {
|
|
4321
4333
|
const v = colMeta?.editable;
|
|
4322
4334
|
if (v === void 0) return () => true;
|
|
4323
4335
|
return typeof v === "function" ? v : () => Boolean(v);
|
|
4324
4336
|
}, [colMeta?.editable]);
|
|
4325
4337
|
const isEditable = editableResolver(cell.row.original);
|
|
4326
|
-
const onCheckedChange = React$
|
|
4338
|
+
const onCheckedChange = React$33.useCallback((checked) => {
|
|
4327
4339
|
setValue(checked);
|
|
4328
4340
|
meta?.onDataUpdate?.({
|
|
4329
4341
|
rowIndex,
|
|
@@ -4335,7 +4347,7 @@ function CheckboxCell({ cell, table, rowIndex, columnId, isFocused, isSelected }
|
|
|
4335
4347
|
rowIndex,
|
|
4336
4348
|
columnId
|
|
4337
4349
|
]);
|
|
4338
|
-
const onWrapperKeyDown = React$
|
|
4350
|
+
const onWrapperKeyDown = React$33.useCallback((event) => {
|
|
4339
4351
|
if (!isEditable) return;
|
|
4340
4352
|
if (isFocused && (event.key === "" || event.key === "Enter")) {
|
|
4341
4353
|
event.preventDefault();
|
|
@@ -4348,17 +4360,17 @@ function CheckboxCell({ cell, table, rowIndex, columnId, isFocused, isSelected }
|
|
|
4348
4360
|
onCheckedChange,
|
|
4349
4361
|
isEditable
|
|
4350
4362
|
]);
|
|
4351
|
-
React$
|
|
4363
|
+
React$33.useEffect(() => {
|
|
4352
4364
|
setValue(cellValueAsBoolean);
|
|
4353
4365
|
}, [cellValueAsBoolean]);
|
|
4354
|
-
React$
|
|
4366
|
+
React$33.useEffect(() => {
|
|
4355
4367
|
if (isFocused && !meta?.searchOpen && !meta?.isScrolling && containerRef.current) containerRef.current.focus();
|
|
4356
4368
|
}, [
|
|
4357
4369
|
isFocused,
|
|
4358
4370
|
meta?.searchOpen,
|
|
4359
4371
|
meta?.isScrolling
|
|
4360
4372
|
]);
|
|
4361
|
-
const onWrapperClick = React$
|
|
4373
|
+
const onWrapperClick = React$33.useCallback((event) => {
|
|
4362
4374
|
if (!isEditable) return;
|
|
4363
4375
|
if (isFocused) {
|
|
4364
4376
|
event.preventDefault();
|
|
@@ -4371,13 +4383,13 @@ function CheckboxCell({ cell, table, rowIndex, columnId, isFocused, isSelected }
|
|
|
4371
4383
|
onCheckedChange,
|
|
4372
4384
|
isEditable
|
|
4373
4385
|
]);
|
|
4374
|
-
const onCheckboxClick = React$
|
|
4386
|
+
const onCheckboxClick = React$33.useCallback((event) => {
|
|
4375
4387
|
event.stopPropagation();
|
|
4376
4388
|
}, []);
|
|
4377
|
-
const onCheckboxMouseDown = React$
|
|
4389
|
+
const onCheckboxMouseDown = React$33.useCallback((event) => {
|
|
4378
4390
|
event.stopPropagation();
|
|
4379
4391
|
}, []);
|
|
4380
|
-
const onCheckboxDoubleClick = React$
|
|
4392
|
+
const onCheckboxDoubleClick = React$33.useCallback((event) => {
|
|
4381
4393
|
event.stopPropagation();
|
|
4382
4394
|
}, []);
|
|
4383
4395
|
return /* @__PURE__ */ jsx(DataGridCellWrapper, {
|
|
@@ -4432,20 +4444,20 @@ function formatDateToISOString(date) {
|
|
|
4432
4444
|
}
|
|
4433
4445
|
function DateCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSelected }) {
|
|
4434
4446
|
const initialValue = cell.getValue();
|
|
4435
|
-
const [value, setValue] = React$
|
|
4436
|
-
const [open, setOpen] = React$
|
|
4437
|
-
const containerRef = React$
|
|
4438
|
-
const hasStoppedRef = React$
|
|
4447
|
+
const [value, setValue] = React$32.useState(parseToLocalDate(initialValue));
|
|
4448
|
+
const [open, setOpen] = React$32.useState(false);
|
|
4449
|
+
const containerRef = React$32.useRef(null);
|
|
4450
|
+
const hasStoppedRef = React$32.useRef(false);
|
|
4439
4451
|
const meta = table.options.meta;
|
|
4440
|
-
const prevInitialValueRef = React$
|
|
4452
|
+
const prevInitialValueRef = React$32.useRef(initialValue);
|
|
4441
4453
|
if (initialValue !== prevInitialValueRef.current) {
|
|
4442
4454
|
prevInitialValueRef.current = initialValue;
|
|
4443
4455
|
setValue(parseToLocalDate(initialValue));
|
|
4444
4456
|
}
|
|
4445
|
-
React$
|
|
4457
|
+
React$32.useEffect(() => {
|
|
4446
4458
|
if (isEditing) hasStoppedRef.current = false;
|
|
4447
4459
|
}, [isEditing]);
|
|
4448
|
-
const onDateSelect = React$
|
|
4460
|
+
const onDateSelect = React$32.useCallback((date) => {
|
|
4449
4461
|
if (!date) return;
|
|
4450
4462
|
setValue(date);
|
|
4451
4463
|
meta?.onDataUpdate?.({
|
|
@@ -4461,14 +4473,14 @@ function DateCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSel
|
|
|
4461
4473
|
rowIndex,
|
|
4462
4474
|
columnId
|
|
4463
4475
|
]);
|
|
4464
|
-
const onOpenChange = React$
|
|
4476
|
+
const onOpenChange = React$32.useCallback((isOpen) => {
|
|
4465
4477
|
setOpen(isOpen);
|
|
4466
4478
|
if (!isOpen && isEditing && !hasStoppedRef.current) {
|
|
4467
4479
|
hasStoppedRef.current = true;
|
|
4468
4480
|
meta?.onCellEditingStop?.();
|
|
4469
4481
|
}
|
|
4470
4482
|
}, [isEditing, meta]);
|
|
4471
|
-
const onWrapperKeyDown = React$
|
|
4483
|
+
const onWrapperKeyDown = React$32.useCallback((event) => {
|
|
4472
4484
|
if (isEditing) {
|
|
4473
4485
|
if (event.key === "Escape") {
|
|
4474
4486
|
event.preventDefault();
|
|
@@ -4488,10 +4500,10 @@ function DateCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSel
|
|
|
4488
4500
|
initialValue,
|
|
4489
4501
|
meta
|
|
4490
4502
|
]);
|
|
4491
|
-
React$
|
|
4503
|
+
React$32.useEffect(() => {
|
|
4492
4504
|
setOpen(isEditing);
|
|
4493
4505
|
}, [isEditing]);
|
|
4494
|
-
React$
|
|
4506
|
+
React$32.useEffect(() => {
|
|
4495
4507
|
if (isFocused && !isEditing && !meta?.searchOpen && !meta?.isScrolling && containerRef.current) containerRef.current.focus();
|
|
4496
4508
|
}, [
|
|
4497
4509
|
isFocused,
|
|
@@ -4539,11 +4551,52 @@ function DateCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSel
|
|
|
4539
4551
|
});
|
|
4540
4552
|
}
|
|
4541
4553
|
|
|
4554
|
+
//#endregion
|
|
4555
|
+
//#region src/data-grid/cell-variants/download-file-cell.tsx
|
|
4556
|
+
function DownloadFileCell({ cell, table, rowIndex, columnId, isEditing, isFocused, isSelected }) {
|
|
4557
|
+
const cellOpts = cell.column.columnDef.meta?.cell;
|
|
4558
|
+
const downloadCellOpts = cellOpts?.variant === "download-file" ? cellOpts : void 0;
|
|
4559
|
+
const cellValue = cell.getValue();
|
|
4560
|
+
const row = cell.row.original;
|
|
4561
|
+
const resolvedUrl = downloadCellOpts?.getUrl?.(cellValue, row) ?? (typeof cellValue === "string" ? cellValue : void 0);
|
|
4562
|
+
const resolvedFileName = typeof downloadCellOpts?.fileName === "function" ? downloadCellOpts.fileName(row, cellValue) : downloadCellOpts?.fileName;
|
|
4563
|
+
const label = downloadCellOpts?.label ?? "Download";
|
|
4564
|
+
return /* @__PURE__ */ jsx(DataGridCellWrapper, {
|
|
4565
|
+
cell,
|
|
4566
|
+
table,
|
|
4567
|
+
rowIndex,
|
|
4568
|
+
columnId,
|
|
4569
|
+
isEditing,
|
|
4570
|
+
isFocused,
|
|
4571
|
+
isSelected,
|
|
4572
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
4573
|
+
"data-slot": "grid-cell-content",
|
|
4574
|
+
className: "size-full overflow-hidden outline-none",
|
|
4575
|
+
children: resolvedUrl ? /* @__PURE__ */ jsx(Button, {
|
|
4576
|
+
asChild: true,
|
|
4577
|
+
variant: "ghost",
|
|
4578
|
+
size: "sm",
|
|
4579
|
+
className: "h-7 gap-1 px-2",
|
|
4580
|
+
children: /* @__PURE__ */ jsxs("a", {
|
|
4581
|
+
href: resolvedUrl,
|
|
4582
|
+
download: resolvedFileName,
|
|
4583
|
+
target: "_blank",
|
|
4584
|
+
rel: "noreferrer",
|
|
4585
|
+
children: [/* @__PURE__ */ jsx(DownloadIcon, { className: "size-3.5" }), label]
|
|
4586
|
+
})
|
|
4587
|
+
}) : /* @__PURE__ */ jsx("span", {
|
|
4588
|
+
className: "text-muted-foreground",
|
|
4589
|
+
children: "-"
|
|
4590
|
+
})
|
|
4591
|
+
})
|
|
4592
|
+
});
|
|
4593
|
+
}
|
|
4594
|
+
|
|
4542
4595
|
//#endregion
|
|
4543
4596
|
//#region src/data-grid/cell-variants/gantt-cell.tsx
|
|
4544
4597
|
function GanttCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSelected }) {
|
|
4545
4598
|
const initialValue = cell.getValue();
|
|
4546
|
-
const containerRef = React$
|
|
4599
|
+
const containerRef = React$31.useRef(null);
|
|
4547
4600
|
const cellOpts = cell.column.columnDef.meta?.cell;
|
|
4548
4601
|
const ts = cellOpts?.dateRangeFrom ?? cellOpts?.timelineStart;
|
|
4549
4602
|
const te = cellOpts?.dateRangeTo ?? cellOpts?.timelineEnd;
|
|
@@ -4582,19 +4635,19 @@ function GanttCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSe
|
|
|
4582
4635
|
//#region src/data-grid/cell-variants/long-text-cell.tsx
|
|
4583
4636
|
function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSelected }) {
|
|
4584
4637
|
const initialValue = cell.getValue();
|
|
4585
|
-
const [value, setValue] = React$
|
|
4586
|
-
const [open, setOpen] = React$
|
|
4587
|
-
const textareaRef = React$
|
|
4588
|
-
const containerRef = React$
|
|
4589
|
-
const hasSubmittedRef = React$
|
|
4638
|
+
const [value, setValue] = React$30.useState(initialValue ?? "");
|
|
4639
|
+
const [open, setOpen] = React$30.useState(false);
|
|
4640
|
+
const textareaRef = React$30.useRef(null);
|
|
4641
|
+
const containerRef = React$30.useRef(null);
|
|
4642
|
+
const hasSubmittedRef = React$30.useRef(false);
|
|
4590
4643
|
const meta = table.options.meta;
|
|
4591
4644
|
const sideOffset = -(containerRef.current?.clientHeight ?? 0);
|
|
4592
|
-
const prevInitialValueRef = React$
|
|
4645
|
+
const prevInitialValueRef = React$30.useRef(initialValue);
|
|
4593
4646
|
if (initialValue !== prevInitialValueRef.current) {
|
|
4594
4647
|
prevInitialValueRef.current = initialValue;
|
|
4595
4648
|
setValue(initialValue ?? "");
|
|
4596
4649
|
}
|
|
4597
|
-
React$
|
|
4650
|
+
React$30.useEffect(() => {
|
|
4598
4651
|
if (isEditing) hasSubmittedRef.current = false;
|
|
4599
4652
|
}, [isEditing]);
|
|
4600
4653
|
const debouncedSave = useDebouncedCallback((newValue) => {
|
|
@@ -4604,7 +4657,7 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
|
|
|
4604
4657
|
value: newValue
|
|
4605
4658
|
});
|
|
4606
4659
|
}, 300);
|
|
4607
|
-
const onSave = React$
|
|
4660
|
+
const onSave = React$30.useCallback(() => {
|
|
4608
4661
|
if (hasSubmittedRef.current) return;
|
|
4609
4662
|
hasSubmittedRef.current = true;
|
|
4610
4663
|
if (value !== initialValue) meta?.onDataUpdate?.({
|
|
@@ -4621,7 +4674,7 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
|
|
|
4621
4674
|
rowIndex,
|
|
4622
4675
|
columnId
|
|
4623
4676
|
]);
|
|
4624
|
-
const onCancel = React$
|
|
4677
|
+
const onCancel = React$30.useCallback(() => {
|
|
4625
4678
|
if (hasSubmittedRef.current) return;
|
|
4626
4679
|
hasSubmittedRef.current = true;
|
|
4627
4680
|
setValue(initialValue ?? "");
|
|
@@ -4638,12 +4691,12 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
|
|
|
4638
4691
|
rowIndex,
|
|
4639
4692
|
columnId
|
|
4640
4693
|
]);
|
|
4641
|
-
const onChange = React$
|
|
4694
|
+
const onChange = React$30.useCallback((event) => {
|
|
4642
4695
|
const newValue = event.target.value;
|
|
4643
4696
|
setValue(newValue);
|
|
4644
4697
|
debouncedSave(newValue);
|
|
4645
4698
|
}, [debouncedSave]);
|
|
4646
|
-
const onOpenChange = React$
|
|
4699
|
+
const onOpenChange = React$30.useCallback((isOpen) => {
|
|
4647
4700
|
setOpen(isOpen);
|
|
4648
4701
|
if (!isOpen && !hasSubmittedRef.current) {
|
|
4649
4702
|
hasSubmittedRef.current = true;
|
|
@@ -4661,7 +4714,7 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
|
|
|
4661
4714
|
rowIndex,
|
|
4662
4715
|
columnId
|
|
4663
4716
|
]);
|
|
4664
|
-
const onOpenAutoFocus = React$
|
|
4717
|
+
const onOpenAutoFocus = React$30.useCallback((event) => {
|
|
4665
4718
|
event.preventDefault();
|
|
4666
4719
|
if (textareaRef.current) {
|
|
4667
4720
|
textareaRef.current.focus();
|
|
@@ -4669,7 +4722,7 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
|
|
|
4669
4722
|
textareaRef.current.setSelectionRange(length, length);
|
|
4670
4723
|
}
|
|
4671
4724
|
}, []);
|
|
4672
|
-
const onWrapperKeyDown = React$
|
|
4725
|
+
const onWrapperKeyDown = React$30.useCallback((event) => {
|
|
4673
4726
|
if (isEditing && !open) {
|
|
4674
4727
|
if (event.key === "Escape") {
|
|
4675
4728
|
event.preventDefault();
|
|
@@ -4695,7 +4748,7 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
|
|
|
4695
4748
|
rowIndex,
|
|
4696
4749
|
columnId
|
|
4697
4750
|
]);
|
|
4698
|
-
const onTextareaKeyDown = React$
|
|
4751
|
+
const onTextareaKeyDown = React$30.useCallback((event) => {
|
|
4699
4752
|
if (event.key === "Escape") {
|
|
4700
4753
|
event.preventDefault();
|
|
4701
4754
|
onCancel();
|
|
@@ -4705,7 +4758,7 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
|
|
|
4705
4758
|
}
|
|
4706
4759
|
event.stopPropagation();
|
|
4707
4760
|
}, [onCancel, onSave]);
|
|
4708
|
-
const onTextareaBlur = React$
|
|
4761
|
+
const onTextareaBlur = React$30.useCallback(() => {
|
|
4709
4762
|
if (hasSubmittedRef.current) return;
|
|
4710
4763
|
hasSubmittedRef.current = true;
|
|
4711
4764
|
if (value !== initialValue) meta?.onDataUpdate?.({
|
|
@@ -4722,7 +4775,7 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
|
|
|
4722
4775
|
rowIndex,
|
|
4723
4776
|
columnId
|
|
4724
4777
|
]);
|
|
4725
|
-
React$
|
|
4778
|
+
React$30.useEffect(() => {
|
|
4726
4779
|
if (isEditing && !open) setOpen(true);
|
|
4727
4780
|
if (isFocused && !isEditing && !meta?.searchOpen && !meta?.isScrolling && containerRef.current) containerRef.current.focus();
|
|
4728
4781
|
}, [
|
|
@@ -4775,26 +4828,26 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
|
|
|
4775
4828
|
//#endregion
|
|
4776
4829
|
//#region src/data-grid/cell-variants/multi-select-cell.tsx
|
|
4777
4830
|
function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSelected }) {
|
|
4778
|
-
const cellValue = React$
|
|
4831
|
+
const cellValue = React$29.useMemo(() => cell.getValue() ?? [], [cell]);
|
|
4779
4832
|
const cellId = `${rowIndex}-${columnId}`;
|
|
4780
|
-
const prevCellIdRef = React$
|
|
4781
|
-
const [selectedValues, setSelectedValues] = React$
|
|
4782
|
-
const [open, setOpen] = React$
|
|
4783
|
-
const [searchValue, setSearchValue] = React$
|
|
4784
|
-
const containerRef = React$
|
|
4785
|
-
const inputRef = React$
|
|
4833
|
+
const prevCellIdRef = React$29.useRef(cellId);
|
|
4834
|
+
const [selectedValues, setSelectedValues] = React$29.useState(cellValue);
|
|
4835
|
+
const [open, setOpen] = React$29.useState(false);
|
|
4836
|
+
const [searchValue, setSearchValue] = React$29.useState("");
|
|
4837
|
+
const containerRef = React$29.useRef(null);
|
|
4838
|
+
const inputRef = React$29.useRef(null);
|
|
4786
4839
|
const meta = table.options.meta;
|
|
4787
4840
|
const cellOpts = cell.column.columnDef.meta?.cell;
|
|
4788
4841
|
const sideOffset = -(containerRef.current?.clientHeight ?? 0);
|
|
4789
4842
|
const arrayOptions = cellOpts?.variant === "multi-select" ? cellOpts.options : void 0;
|
|
4790
4843
|
const optionsMap = cellOpts?.variant === "multi-select" ? cellOpts.optionsMap : void 0;
|
|
4791
|
-
const arrayOptionsLabelMap = React$
|
|
4792
|
-
const getLabel = React$
|
|
4844
|
+
const arrayOptionsLabelMap = React$29.useMemo(() => arrayOptions ? new Map(arrayOptions.map((opt) => [opt.value, opt.label])) : null, [arrayOptions]);
|
|
4845
|
+
const getLabel = React$29.useCallback((val) => {
|
|
4793
4846
|
if (optionsMap) return optionsMap.get(val) ?? val;
|
|
4794
4847
|
if (arrayOptionsLabelMap) return arrayOptionsLabelMap.get(val) ?? val;
|
|
4795
4848
|
return val;
|
|
4796
4849
|
}, [optionsMap, arrayOptionsLabelMap]);
|
|
4797
|
-
const options = React$
|
|
4850
|
+
const options = React$29.useMemo(() => {
|
|
4798
4851
|
if (!isEditing) return [];
|
|
4799
4852
|
if (arrayOptions) return arrayOptions;
|
|
4800
4853
|
if (optionsMap) return Array.from(optionsMap.entries()).map(([id, label]) => ({
|
|
@@ -4813,10 +4866,10 @@ function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing
|
|
|
4813
4866
|
setOpen(false);
|
|
4814
4867
|
setSearchValue("");
|
|
4815
4868
|
}
|
|
4816
|
-
React$
|
|
4869
|
+
React$29.useEffect(() => {
|
|
4817
4870
|
setSelectedValues(cellValue);
|
|
4818
4871
|
}, [cellValue]);
|
|
4819
|
-
const onValueChange = React$
|
|
4872
|
+
const onValueChange = React$29.useCallback((value) => {
|
|
4820
4873
|
const newValues = selectedValues.includes(value) ? selectedValues.filter((v) => v !== value) : [...selectedValues, value];
|
|
4821
4874
|
setSelectedValues(newValues);
|
|
4822
4875
|
meta?.onDataUpdate?.({
|
|
@@ -4832,7 +4885,7 @@ function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing
|
|
|
4832
4885
|
rowIndex,
|
|
4833
4886
|
columnId
|
|
4834
4887
|
]);
|
|
4835
|
-
const removeValue = React$
|
|
4888
|
+
const removeValue = React$29.useCallback((valueToRemove, event) => {
|
|
4836
4889
|
event?.stopPropagation();
|
|
4837
4890
|
event?.preventDefault();
|
|
4838
4891
|
const newValues = selectedValues.filter((v) => v !== valueToRemove);
|
|
@@ -4849,7 +4902,7 @@ function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing
|
|
|
4849
4902
|
rowIndex,
|
|
4850
4903
|
columnId
|
|
4851
4904
|
]);
|
|
4852
|
-
const clearAll = React$
|
|
4905
|
+
const clearAll = React$29.useCallback(() => {
|
|
4853
4906
|
setSelectedValues([]);
|
|
4854
4907
|
meta?.onDataUpdate?.({
|
|
4855
4908
|
rowIndex,
|
|
@@ -4862,18 +4915,18 @@ function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing
|
|
|
4862
4915
|
rowIndex,
|
|
4863
4916
|
columnId
|
|
4864
4917
|
]);
|
|
4865
|
-
const onOpenChange = React$
|
|
4918
|
+
const onOpenChange = React$29.useCallback((isOpen) => {
|
|
4866
4919
|
setOpen(isOpen);
|
|
4867
4920
|
if (!isOpen) {
|
|
4868
4921
|
setSearchValue("");
|
|
4869
4922
|
meta?.onCellEditingStop?.();
|
|
4870
4923
|
}
|
|
4871
4924
|
}, [meta]);
|
|
4872
|
-
const onOpenAutoFocus = React$
|
|
4925
|
+
const onOpenAutoFocus = React$29.useCallback((event) => {
|
|
4873
4926
|
event.preventDefault();
|
|
4874
4927
|
inputRef.current?.focus();
|
|
4875
4928
|
}, []);
|
|
4876
|
-
const onWrapperKeyDown = React$
|
|
4929
|
+
const onWrapperKeyDown = React$29.useCallback((event) => {
|
|
4877
4930
|
if (isEditing) {
|
|
4878
4931
|
if (event.key === "Escape") {
|
|
4879
4932
|
event.preventDefault();
|
|
@@ -4893,7 +4946,7 @@ function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing
|
|
|
4893
4946
|
cellValue,
|
|
4894
4947
|
meta
|
|
4895
4948
|
]);
|
|
4896
|
-
const onInputKeyDown = React$
|
|
4949
|
+
const onInputKeyDown = React$29.useCallback((event) => {
|
|
4897
4950
|
if (event.key === "Backspace" && searchValue === "" && selectedValues.length > 0) {
|
|
4898
4951
|
event.preventDefault();
|
|
4899
4952
|
const lastValue = selectedValues.at(-1);
|
|
@@ -4905,7 +4958,7 @@ function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing
|
|
|
4905
4958
|
selectedValues,
|
|
4906
4959
|
removeValue
|
|
4907
4960
|
]);
|
|
4908
|
-
React$
|
|
4961
|
+
React$29.useEffect(() => {
|
|
4909
4962
|
if (isEditing && !open) setOpen(true);
|
|
4910
4963
|
if (isFocused && !isEditing && !meta?.searchOpen && !meta?.isScrolling && containerRef.current) containerRef.current.focus();
|
|
4911
4964
|
}, [
|
|
@@ -4915,7 +4968,7 @@ function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing
|
|
|
4915
4968
|
meta?.searchOpen,
|
|
4916
4969
|
meta?.isScrolling
|
|
4917
4970
|
]);
|
|
4918
|
-
React$
|
|
4971
|
+
React$29.useEffect(() => {
|
|
4919
4972
|
if (open && inputRef.current) setTimeout(() => inputRef.current?.focus(), 0);
|
|
4920
4973
|
}, [open]);
|
|
4921
4974
|
const displayLabels = selectedValues.map(getLabel).filter(Boolean);
|
|
@@ -5016,19 +5069,19 @@ function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing
|
|
|
5016
5069
|
//#region src/data-grid/cell-variants/number-cell.tsx
|
|
5017
5070
|
function NumberCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSelected }) {
|
|
5018
5071
|
const initialValue = cell.getValue();
|
|
5019
|
-
const inputRef = React$
|
|
5020
|
-
const containerRef = React$
|
|
5072
|
+
const inputRef = React$28.useRef(null);
|
|
5073
|
+
const containerRef = React$28.useRef(null);
|
|
5021
5074
|
const meta = table.options.meta;
|
|
5022
5075
|
const colMeta = cell.column.columnDef.meta;
|
|
5023
5076
|
const cellOptions = colMeta?.cell;
|
|
5024
|
-
const editableResolver = React$
|
|
5077
|
+
const editableResolver = React$28.useMemo(() => {
|
|
5025
5078
|
const v = colMeta?.editable;
|
|
5026
5079
|
if (v === void 0) return () => true;
|
|
5027
5080
|
return typeof v === "function" ? v : () => Boolean(v);
|
|
5028
5081
|
}, [colMeta?.editable]);
|
|
5029
5082
|
const isEditable = editableResolver(cell.row.original);
|
|
5030
5083
|
const { min, max, step, prefix, suffix, fallbackValue = "" } = cellOptions?.variant === "number" ? cellOptions : {};
|
|
5031
|
-
const resolvedPrefix = React$
|
|
5084
|
+
const resolvedPrefix = React$28.useMemo(() => {
|
|
5032
5085
|
if (typeof prefix === "function") return prefix(cell.row.original, initialValue);
|
|
5033
5086
|
return prefix ?? null;
|
|
5034
5087
|
}, [
|
|
@@ -5036,7 +5089,7 @@ function NumberCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
|
|
|
5036
5089
|
cell.row.original,
|
|
5037
5090
|
initialValue
|
|
5038
5091
|
]);
|
|
5039
|
-
const resolvedSuffix = React$
|
|
5092
|
+
const resolvedSuffix = React$28.useMemo(() => {
|
|
5040
5093
|
if (typeof suffix === "function") return suffix(cell.row.original, initialValue);
|
|
5041
5094
|
return suffix ?? null;
|
|
5042
5095
|
}, [
|
|
@@ -5044,12 +5097,12 @@ function NumberCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
|
|
|
5044
5097
|
cell.row.original,
|
|
5045
5098
|
initialValue
|
|
5046
5099
|
]);
|
|
5047
|
-
const [editValue, setEditValue] = React$
|
|
5048
|
-
const hasSubmittedRef = React$
|
|
5049
|
-
React$
|
|
5100
|
+
const [editValue, setEditValue] = React$28.useState(initialValue !== null && initialValue !== void 0 ? String(initialValue) : "");
|
|
5101
|
+
const hasSubmittedRef = React$28.useRef(false);
|
|
5102
|
+
React$28.useEffect(() => {
|
|
5050
5103
|
if (isEditing) hasSubmittedRef.current = false;
|
|
5051
5104
|
}, [isEditing]);
|
|
5052
|
-
const onBlur = React$
|
|
5105
|
+
const onBlur = React$28.useCallback(() => {
|
|
5053
5106
|
if (hasSubmittedRef.current) return;
|
|
5054
5107
|
const numValue = editValue === "" ? null : Number(editValue);
|
|
5055
5108
|
if (numValue !== initialValue) meta?.onDataUpdate?.({
|
|
@@ -5065,13 +5118,13 @@ function NumberCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
|
|
|
5065
5118
|
initialValue,
|
|
5066
5119
|
editValue
|
|
5067
5120
|
]);
|
|
5068
|
-
const onChange = React$
|
|
5121
|
+
const onChange = React$28.useCallback((event) => {
|
|
5069
5122
|
setEditValue(event.target.value);
|
|
5070
5123
|
}, []);
|
|
5071
|
-
const parseNumValue = React$
|
|
5124
|
+
const parseNumValue = React$28.useCallback(() => {
|
|
5072
5125
|
return editValue === "" ? null : Number(editValue);
|
|
5073
5126
|
}, [editValue]);
|
|
5074
|
-
const saveAndStop = React$
|
|
5127
|
+
const saveAndStop = React$28.useCallback((options) => {
|
|
5075
5128
|
hasSubmittedRef.current = true;
|
|
5076
5129
|
const numValue = parseNumValue();
|
|
5077
5130
|
meta?.onDataUpdate?.({
|
|
@@ -5086,7 +5139,7 @@ function NumberCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
|
|
|
5086
5139
|
rowIndex,
|
|
5087
5140
|
columnId
|
|
5088
5141
|
]);
|
|
5089
|
-
const handleEditingKeyDown = React$
|
|
5142
|
+
const handleEditingKeyDown = React$28.useCallback((event) => {
|
|
5090
5143
|
if (event.key === "Enter") {
|
|
5091
5144
|
event.preventDefault();
|
|
5092
5145
|
saveAndStop({ moveToNextRow: true });
|
|
@@ -5105,12 +5158,12 @@ function NumberCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
|
|
|
5105
5158
|
initialValue,
|
|
5106
5159
|
meta
|
|
5107
5160
|
]);
|
|
5108
|
-
const handleFocusedKeyDown = React$
|
|
5161
|
+
const handleFocusedKeyDown = React$28.useCallback((event) => {
|
|
5109
5162
|
if (!isEditable) return;
|
|
5110
5163
|
if (event.key === "Backspace") setEditValue("");
|
|
5111
5164
|
else if (event.key.length === 1 && !event.ctrlKey && !event.metaKey) setEditValue(event.key);
|
|
5112
5165
|
}, [isEditable]);
|
|
5113
|
-
const onWrapperKeyDown = React$
|
|
5166
|
+
const onWrapperKeyDown = React$28.useCallback((event) => {
|
|
5114
5167
|
if (isEditing) handleEditingKeyDown(event);
|
|
5115
5168
|
else if (isFocused) handleFocusedKeyDown(event);
|
|
5116
5169
|
}, [
|
|
@@ -5119,10 +5172,10 @@ function NumberCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
|
|
|
5119
5172
|
handleEditingKeyDown,
|
|
5120
5173
|
handleFocusedKeyDown
|
|
5121
5174
|
]);
|
|
5122
|
-
React$
|
|
5175
|
+
React$28.useEffect(() => {
|
|
5123
5176
|
setEditValue(initialValue !== null && initialValue !== void 0 ? String(initialValue) : "");
|
|
5124
5177
|
}, [initialValue]);
|
|
5125
|
-
React$
|
|
5178
|
+
React$28.useEffect(() => {
|
|
5126
5179
|
if (isEditing && inputRef.current) {
|
|
5127
5180
|
inputRef.current.focus();
|
|
5128
5181
|
inputRef.current.select();
|
|
@@ -5169,7 +5222,7 @@ function NumberCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
|
|
|
5169
5222
|
//#endregion
|
|
5170
5223
|
//#region src/data-grid/cell-variants/react-node-cell.tsx
|
|
5171
5224
|
function ReactNodeCell({ cell, table, rowIndex, columnId, isFocused, isSelected, isEditing }) {
|
|
5172
|
-
const containerRef = React$
|
|
5225
|
+
const containerRef = React$27.useRef(null);
|
|
5173
5226
|
const cellOpts = cell.column.columnDef.meta?.cell;
|
|
5174
5227
|
const renderFn = cellOpts?.variant === "react-node" ? cellOpts.render : void 0;
|
|
5175
5228
|
const children = renderFn ? renderFn({
|
|
@@ -5199,17 +5252,17 @@ function ReactNodeCell({ cell, table, rowIndex, columnId, isFocused, isSelected,
|
|
|
5199
5252
|
//#region src/data-grid/cell-variants/select-cell.tsx
|
|
5200
5253
|
function SelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSelected }) {
|
|
5201
5254
|
const initialValue = cell.getValue();
|
|
5202
|
-
const [value, setValue] = React$
|
|
5203
|
-
const [open, setOpen] = React$
|
|
5204
|
-
const containerRef = React$
|
|
5205
|
-
const inputRef = React$
|
|
5255
|
+
const [value, setValue] = React$26.useState(initialValue);
|
|
5256
|
+
const [open, setOpen] = React$26.useState(false);
|
|
5257
|
+
const containerRef = React$26.useRef(null);
|
|
5258
|
+
const inputRef = React$26.useRef(null);
|
|
5206
5259
|
const meta = table.options.meta;
|
|
5207
5260
|
const cellOpts = cell.column.columnDef.meta?.cell;
|
|
5208
5261
|
const hasSearch = (cellOpts?.variant === "select" && cellOpts?.hasSearch) ?? false;
|
|
5209
5262
|
const sideOffset = -(inputRef.current?.clientHeight ?? 0);
|
|
5210
5263
|
const { options: arrayOptions, optionsMap, optionsRenderer } = cellOpts?.variant === "select" ? cellOpts : {};
|
|
5211
|
-
const arrayOptionsLabelMap = React$
|
|
5212
|
-
const displayLabel = React$
|
|
5264
|
+
const arrayOptionsLabelMap = React$26.useMemo(() => arrayOptions ? new Map(arrayOptions.map((opt) => [opt.value, opt.label])) : null, [arrayOptions]);
|
|
5265
|
+
const displayLabel = React$26.useMemo(() => {
|
|
5213
5266
|
if (optionsMap) {
|
|
5214
5267
|
const data = optionsMap.get(value ?? "");
|
|
5215
5268
|
if (optionsRenderer) return optionsRenderer(data, "cell");
|
|
@@ -5223,7 +5276,7 @@ function SelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
|
|
|
5223
5276
|
arrayOptionsLabelMap,
|
|
5224
5277
|
optionsRenderer
|
|
5225
5278
|
]);
|
|
5226
|
-
const options = React$
|
|
5279
|
+
const options = React$26.useMemo(() => {
|
|
5227
5280
|
if (!isEditing) return [];
|
|
5228
5281
|
if (arrayOptions) return arrayOptions.map((opt) => ({
|
|
5229
5282
|
value: opt.value,
|
|
@@ -5239,7 +5292,7 @@ function SelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
|
|
|
5239
5292
|
arrayOptions,
|
|
5240
5293
|
optionsMap
|
|
5241
5294
|
]);
|
|
5242
|
-
const onValueChange = React$
|
|
5295
|
+
const onValueChange = React$26.useCallback((newValue) => {
|
|
5243
5296
|
setValue(newValue);
|
|
5244
5297
|
meta?.onDataUpdate?.({
|
|
5245
5298
|
rowIndex,
|
|
@@ -5252,15 +5305,15 @@ function SelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
|
|
|
5252
5305
|
rowIndex,
|
|
5253
5306
|
columnId
|
|
5254
5307
|
]);
|
|
5255
|
-
const onOpenChange = React$
|
|
5308
|
+
const onOpenChange = React$26.useCallback((isOpen) => {
|
|
5256
5309
|
setOpen(isOpen);
|
|
5257
5310
|
if (!isOpen) meta?.onCellEditingStop?.();
|
|
5258
5311
|
}, [meta]);
|
|
5259
|
-
const onOpenAutoFocus = React$
|
|
5312
|
+
const onOpenAutoFocus = React$26.useCallback((event) => {
|
|
5260
5313
|
event.preventDefault();
|
|
5261
5314
|
inputRef.current?.focus();
|
|
5262
5315
|
}, []);
|
|
5263
|
-
const onWrapperKeyDown = React$
|
|
5316
|
+
const onWrapperKeyDown = React$26.useCallback((event) => {
|
|
5264
5317
|
if (isEditing) {
|
|
5265
5318
|
if (event.key === "Escape") {
|
|
5266
5319
|
event.preventDefault();
|
|
@@ -5278,10 +5331,10 @@ function SelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
|
|
|
5278
5331
|
initialValue,
|
|
5279
5332
|
meta
|
|
5280
5333
|
]);
|
|
5281
|
-
React$
|
|
5334
|
+
React$26.useEffect(() => {
|
|
5282
5335
|
setValue(initialValue);
|
|
5283
5336
|
}, [initialValue]);
|
|
5284
|
-
React$
|
|
5337
|
+
React$26.useEffect(() => {
|
|
5285
5338
|
if (isEditing && !open) setOpen(true);
|
|
5286
5339
|
if (isFocused && !isEditing && !meta?.searchOpen && !meta?.isScrolling && containerRef.current) containerRef.current.focus();
|
|
5287
5340
|
}, [
|
|
@@ -5366,22 +5419,22 @@ function SelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
|
|
|
5366
5419
|
//#region src/data-grid/cell-variants/short-text-cell.tsx
|
|
5367
5420
|
function ShortTextCell({ cell, table, rowIndex, columnId, isEditing, isFocused, isSelected }) {
|
|
5368
5421
|
const initialValue = cell.getValue();
|
|
5369
|
-
const [value, setValue] = React$
|
|
5370
|
-
const inputRef = React$
|
|
5371
|
-
const containerRef = React$
|
|
5372
|
-
const hasSubmittedRef = React$
|
|
5422
|
+
const [value, setValue] = React$25.useState(initialValue);
|
|
5423
|
+
const inputRef = React$25.useRef(null);
|
|
5424
|
+
const containerRef = React$25.useRef(null);
|
|
5425
|
+
const hasSubmittedRef = React$25.useRef(false);
|
|
5373
5426
|
const meta = table.options.meta;
|
|
5374
5427
|
const colMeta = cell.column.columnDef.meta;
|
|
5375
|
-
const editableResolver = React$
|
|
5428
|
+
const editableResolver = React$25.useMemo(() => {
|
|
5376
5429
|
const v = colMeta?.editable;
|
|
5377
5430
|
if (v === void 0) return () => true;
|
|
5378
5431
|
return typeof v === "function" ? v : () => Boolean(v);
|
|
5379
5432
|
}, [colMeta?.editable]);
|
|
5380
5433
|
const isEditable = editableResolver(cell.row.original);
|
|
5381
|
-
React$
|
|
5434
|
+
React$25.useEffect(() => {
|
|
5382
5435
|
if (isEditing) hasSubmittedRef.current = false;
|
|
5383
5436
|
}, [isEditing]);
|
|
5384
|
-
const onBlur = React$
|
|
5437
|
+
const onBlur = React$25.useCallback(() => {
|
|
5385
5438
|
if (hasSubmittedRef.current) return;
|
|
5386
5439
|
const currentValue = inputRef.current?.value ?? "";
|
|
5387
5440
|
const normalizedInitial = initialValue ?? "";
|
|
@@ -5397,10 +5450,10 @@ function ShortTextCell({ cell, table, rowIndex, columnId, isEditing, isFocused,
|
|
|
5397
5450
|
columnId,
|
|
5398
5451
|
initialValue
|
|
5399
5452
|
]);
|
|
5400
|
-
const onChange = React$
|
|
5453
|
+
const onChange = React$25.useCallback((event) => {
|
|
5401
5454
|
setValue(event.target.value);
|
|
5402
5455
|
}, []);
|
|
5403
|
-
const handleEditingKeyDown = React$
|
|
5456
|
+
const handleEditingKeyDown = React$25.useCallback((event) => {
|
|
5404
5457
|
if (event.key === "Enter") {
|
|
5405
5458
|
event.preventDefault();
|
|
5406
5459
|
hasSubmittedRef.current = true;
|
|
@@ -5434,13 +5487,13 @@ function ShortTextCell({ cell, table, rowIndex, columnId, isEditing, isFocused,
|
|
|
5434
5487
|
rowIndex,
|
|
5435
5488
|
columnId
|
|
5436
5489
|
]);
|
|
5437
|
-
const handleFocusedKeyDown = React$
|
|
5490
|
+
const handleFocusedKeyDown = React$25.useCallback((event) => {
|
|
5438
5491
|
if (event.key.length === 1 && !event.ctrlKey && !event.metaKey) {
|
|
5439
5492
|
if (!isEditable) return;
|
|
5440
5493
|
setValue(event.key);
|
|
5441
5494
|
}
|
|
5442
5495
|
}, [isEditable]);
|
|
5443
|
-
const onWrapperKeyDown = React$
|
|
5496
|
+
const onWrapperKeyDown = React$25.useCallback((event) => {
|
|
5444
5497
|
if (isEditing) handleEditingKeyDown(event);
|
|
5445
5498
|
else if (isFocused) handleFocusedKeyDown(event);
|
|
5446
5499
|
}, [
|
|
@@ -5449,10 +5502,10 @@ function ShortTextCell({ cell, table, rowIndex, columnId, isEditing, isFocused,
|
|
|
5449
5502
|
handleEditingKeyDown,
|
|
5450
5503
|
handleFocusedKeyDown
|
|
5451
5504
|
]);
|
|
5452
|
-
React$
|
|
5505
|
+
React$25.useEffect(() => {
|
|
5453
5506
|
setValue(initialValue);
|
|
5454
5507
|
}, [initialValue]);
|
|
5455
|
-
React$
|
|
5508
|
+
React$25.useEffect(() => {
|
|
5456
5509
|
if (isEditing && inputRef.current) {
|
|
5457
5510
|
inputRef.current.focus();
|
|
5458
5511
|
inputRef.current.setSelectionRange(inputRef.current.value.length, inputRef.current.value.length);
|
|
@@ -5576,6 +5629,15 @@ function DataGridCell({ cell, table }) {
|
|
|
5576
5629
|
isFocused,
|
|
5577
5630
|
isSelected
|
|
5578
5631
|
});
|
|
5632
|
+
case "download-file": return /* @__PURE__ */ jsx(DownloadFileCell, {
|
|
5633
|
+
cell,
|
|
5634
|
+
table,
|
|
5635
|
+
rowIndex,
|
|
5636
|
+
columnId,
|
|
5637
|
+
isEditing,
|
|
5638
|
+
isFocused,
|
|
5639
|
+
isSelected
|
|
5640
|
+
});
|
|
5579
5641
|
case "react-node": return /* @__PURE__ */ jsx(ReactNodeCell, {
|
|
5580
5642
|
cell,
|
|
5581
5643
|
table,
|
|
@@ -5608,7 +5670,7 @@ function DataGridCell({ cell, table }) {
|
|
|
5608
5670
|
|
|
5609
5671
|
//#endregion
|
|
5610
5672
|
//#region src/separator/separator.tsx
|
|
5611
|
-
const Separator = React$
|
|
5673
|
+
const Separator = React$24.forwardRef(({ className, orientation = "horizontal", decorative = true,...props }, ref) => /* @__PURE__ */ jsx(SeparatorPrimitive.Root, {
|
|
5612
5674
|
ref,
|
|
5613
5675
|
decorative,
|
|
5614
5676
|
orientation,
|
|
@@ -5620,22 +5682,22 @@ Separator.displayName = SeparatorPrimitive.Root.displayName;
|
|
|
5620
5682
|
//#endregion
|
|
5621
5683
|
//#region src/data-grid/data-grid-view-menu.tsx
|
|
5622
5684
|
function DataGridViewMenu({ table, savedViews, activeViewId, currentUserId, isAdmin, onApplyView, onSaveView, onUpdateView, onRenameView, onDeleteView, onClearView,...props }) {
|
|
5623
|
-
const viewableColumns = React$
|
|
5624
|
-
const [order, setOrder] = React$
|
|
5685
|
+
const viewableColumns = React$23.useMemo(() => table.getAllColumns().filter((column) => typeof column.accessorFn !== "undefined"), [table]);
|
|
5686
|
+
const [order, setOrder] = React$23.useState(() => {
|
|
5625
5687
|
const stateOrder = table.getState().columnOrder ?? [];
|
|
5626
5688
|
if (stateOrder && stateOrder.length > 0) return stateOrder;
|
|
5627
5689
|
return table.getAllColumns().map((c) => c.id);
|
|
5628
5690
|
});
|
|
5629
|
-
const [searchQuery, setSearchQuery] = React$
|
|
5630
|
-
const [isDragging, setIsDragging] = React$
|
|
5631
|
-
const [insertionIndex, setInsertionIndex] = React$
|
|
5632
|
-
const [isCreating, setIsCreating] = React$
|
|
5633
|
-
const [newViewName, setNewViewName] = React$
|
|
5634
|
-
const [newViewGlobal, setNewViewGlobal] = React$
|
|
5635
|
-
const [renamingViewId, setRenamingViewId] = React$
|
|
5636
|
-
const [renameValue, setRenameValue] = React$
|
|
5637
|
-
const [deletingViewId, setDeletingViewId] = React$
|
|
5638
|
-
const [updatingViewId, setUpdatingViewId] = React$
|
|
5691
|
+
const [searchQuery, setSearchQuery] = React$23.useState("");
|
|
5692
|
+
const [isDragging, setIsDragging] = React$23.useState(false);
|
|
5693
|
+
const [insertionIndex, setInsertionIndex] = React$23.useState(null);
|
|
5694
|
+
const [isCreating, setIsCreating] = React$23.useState(false);
|
|
5695
|
+
const [newViewName, setNewViewName] = React$23.useState("");
|
|
5696
|
+
const [newViewGlobal, setNewViewGlobal] = React$23.useState(false);
|
|
5697
|
+
const [renamingViewId, setRenamingViewId] = React$23.useState(null);
|
|
5698
|
+
const [renameValue, setRenameValue] = React$23.useState("");
|
|
5699
|
+
const [deletingViewId, setDeletingViewId] = React$23.useState(null);
|
|
5700
|
+
const [updatingViewId, setUpdatingViewId] = React$23.useState(null);
|
|
5639
5701
|
function resetAllStates() {
|
|
5640
5702
|
setIsCreating(false);
|
|
5641
5703
|
setNewViewName("");
|
|
@@ -5646,7 +5708,7 @@ function DataGridViewMenu({ table, savedViews, activeViewId, currentUserId, isAd
|
|
|
5646
5708
|
setSearchQuery("");
|
|
5647
5709
|
}
|
|
5648
5710
|
const tableColumnOrder = table.getState().columnOrder;
|
|
5649
|
-
React$
|
|
5711
|
+
React$23.useEffect(() => {
|
|
5650
5712
|
const stateOrder = tableColumnOrder ?? [];
|
|
5651
5713
|
if (stateOrder && stateOrder.length > 0) {
|
|
5652
5714
|
setOrder(stateOrder);
|
|
@@ -5654,8 +5716,8 @@ function DataGridViewMenu({ table, savedViews, activeViewId, currentUserId, isAd
|
|
|
5654
5716
|
}
|
|
5655
5717
|
setOrder(table.getAllColumns().map((c) => c.id));
|
|
5656
5718
|
}, [table, tableColumnOrder]);
|
|
5657
|
-
const visibleSet = React$
|
|
5658
|
-
const orderedColumns = React$
|
|
5719
|
+
const visibleSet = React$23.useMemo(() => new Set(viewableColumns.map((c) => c.id)), [viewableColumns]);
|
|
5720
|
+
const orderedColumns = React$23.useMemo(() => {
|
|
5659
5721
|
const ordered = [];
|
|
5660
5722
|
for (const id of order) {
|
|
5661
5723
|
const col = viewableColumns.find((c) => c.id === id);
|
|
@@ -5668,12 +5730,12 @@ function DataGridViewMenu({ table, savedViews, activeViewId, currentUserId, isAd
|
|
|
5668
5730
|
viewableColumns,
|
|
5669
5731
|
table
|
|
5670
5732
|
]);
|
|
5671
|
-
const draggingRef = React$
|
|
5672
|
-
const groupRef = React$
|
|
5673
|
-
const getBaseOrder = React$
|
|
5733
|
+
const draggingRef = React$23.useRef(null);
|
|
5734
|
+
const groupRef = React$23.useRef(null);
|
|
5735
|
+
const getBaseOrder = React$23.useCallback(() => {
|
|
5674
5736
|
return table.getState().columnOrder && table.getState().columnOrder.length ? table.getState().columnOrder.slice() : table.getAllColumns().map((c) => c.id);
|
|
5675
5737
|
}, [table]);
|
|
5676
|
-
const computeInsertionIndex = React$
|
|
5738
|
+
const computeInsertionIndex = React$23.useCallback((clientY) => {
|
|
5677
5739
|
const baseOrder = getBaseOrder();
|
|
5678
5740
|
const el = groupRef.current;
|
|
5679
5741
|
if (!el) return baseOrder.length;
|
|
@@ -5695,7 +5757,7 @@ function DataGridViewMenu({ table, savedViews, activeViewId, currentUserId, isAd
|
|
|
5695
5757
|
setIsDragging(false);
|
|
5696
5758
|
setInsertionIndex(null);
|
|
5697
5759
|
}
|
|
5698
|
-
const doDrop = React$
|
|
5760
|
+
const doDrop = React$23.useCallback((dragId, toIndex) => {
|
|
5699
5761
|
const baseOrder = table.getState().columnOrder && table.getState().columnOrder.length ? table.getState().columnOrder.slice() : table.getAllColumns().map((c) => c.id);
|
|
5700
5762
|
const fromIndex = baseOrder.indexOf(dragId);
|
|
5701
5763
|
if (fromIndex === -1) {
|
|
@@ -5712,7 +5774,7 @@ function DataGridViewMenu({ table, savedViews, activeViewId, currentUserId, isAd
|
|
|
5712
5774
|
setOrder(copy.filter((id) => visibleSet.has(id)));
|
|
5713
5775
|
onDragEnd();
|
|
5714
5776
|
}, [table, visibleSet]);
|
|
5715
|
-
const startPointerDrag = React$
|
|
5777
|
+
const startPointerDrag = React$23.useCallback((e, id) => {
|
|
5716
5778
|
e.preventDefault();
|
|
5717
5779
|
draggingRef.current = id;
|
|
5718
5780
|
setIsDragging(true);
|
|
@@ -5745,7 +5807,7 @@ function DataGridViewMenu({ table, savedViews, activeViewId, currentUserId, isAd
|
|
|
5745
5807
|
if (fromIndex < targetIndex) insertAt = targetIndex - 1;
|
|
5746
5808
|
return insertAt === fromIndex;
|
|
5747
5809
|
}
|
|
5748
|
-
const dragFromHandle = React$
|
|
5810
|
+
const dragFromHandle = React$23.useRef(false);
|
|
5749
5811
|
function resetTableView() {
|
|
5750
5812
|
const defaultOrder = table.getAllColumns().map((c) => c.id);
|
|
5751
5813
|
try {
|
|
@@ -5768,7 +5830,7 @@ function DataGridViewMenu({ table, savedViews, activeViewId, currentUserId, isAd
|
|
|
5768
5830
|
} catch (_) {}
|
|
5769
5831
|
}
|
|
5770
5832
|
}
|
|
5771
|
-
const sortedViews = React$
|
|
5833
|
+
const sortedViews = React$23.useMemo(() => {
|
|
5772
5834
|
if (!savedViews || savedViews.length === 0) return savedViews;
|
|
5773
5835
|
return [...savedViews].sort((a, b) => {
|
|
5774
5836
|
if (a.isGlobal !== b.isGlobal) return a.isGlobal ? -1 : 1;
|
|
@@ -6084,7 +6146,7 @@ function DataGridViewMenu({ table, savedViews, activeViewId, currentUserId, isAd
|
|
|
6084
6146
|
const currentBase = table.getState().columnOrder && table.getState().columnOrder.length ? table.getState().columnOrder.slice() : table.getAllColumns().map((c) => c.id);
|
|
6085
6147
|
const pos = currentBase.indexOf(column.id);
|
|
6086
6148
|
const isHideable = column.getCanHide();
|
|
6087
|
-
return /* @__PURE__ */ jsxs(React$
|
|
6149
|
+
return /* @__PURE__ */ jsxs(React$23.Fragment, { children: [/* @__PURE__ */ jsxs(CommandItem, {
|
|
6088
6150
|
value: column.id,
|
|
6089
6151
|
"data-col-id": column.id,
|
|
6090
6152
|
className: cn("flex items-center gap-2 px-2 py-1 rounded", !isDragging ? "data-[selected=true]:bg-accent" : "data-[selected=true]:bg-transparent cursor-grabbing", draggingRef.current === column.id && isDragging && "bg-accent data-[selected=true]:bg-accent"),
|
|
@@ -6206,33 +6268,33 @@ const MIN_COLUMN_SIZE = 60;
|
|
|
6206
6268
|
const MAX_COLUMN_SIZE = 800;
|
|
6207
6269
|
const SEARCH_SHORTCUT_KEY = "f";
|
|
6208
6270
|
const NON_NAVIGABLE_COLUMN_IDS = ["select", "actions"];
|
|
6209
|
-
const useIsomorphicLayoutEffect = typeof window !== "undefined" ? React$
|
|
6210
|
-
function useLazyRef(fn) {
|
|
6211
|
-
const ref = React$
|
|
6271
|
+
const useIsomorphicLayoutEffect$1 = typeof window !== "undefined" ? React$22.useLayoutEffect : React$22.useEffect;
|
|
6272
|
+
function useLazyRef$1(fn) {
|
|
6273
|
+
const ref = React$22.useRef(null);
|
|
6212
6274
|
if (ref.current === null) ref.current = fn();
|
|
6213
6275
|
return ref;
|
|
6214
6276
|
}
|
|
6215
|
-
function useAsRef(data) {
|
|
6216
|
-
const ref = React$
|
|
6217
|
-
useIsomorphicLayoutEffect(() => {
|
|
6277
|
+
function useAsRef$1(data) {
|
|
6278
|
+
const ref = React$22.useRef(data);
|
|
6279
|
+
useIsomorphicLayoutEffect$1(() => {
|
|
6218
6280
|
ref.current = data;
|
|
6219
6281
|
});
|
|
6220
6282
|
return ref;
|
|
6221
6283
|
}
|
|
6222
|
-
function useStore(store, selector) {
|
|
6223
|
-
const getSnapshot = React$
|
|
6224
|
-
return React$
|
|
6284
|
+
function useStore$1(store, selector) {
|
|
6285
|
+
const getSnapshot = React$22.useCallback(() => selector(store.getState()), [store, selector]);
|
|
6286
|
+
return React$22.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
|
|
6225
6287
|
}
|
|
6226
6288
|
function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRowsDelete: onRowsDeleteProp, onCellFocus: onCellFocusProp, onRowClick: onRowClickProp, highlightedRowIndex, rowHeight: rowHeightProp = DEFAULT_ROW_HEIGHT, overscan = OVERSCAN, initialState, autoFocus = false, enableColumnSelection = false, enableSearch = false, manualSorting, sorting: externalSorting, onSortingChange: externalOnSortingChange, onLoadMore, loadMoreThreshold = 25, totalRowCount, persistColumnState = false,...dataGridProps }) {
|
|
6227
|
-
const dataGridRef = React$
|
|
6228
|
-
const tableRef = React$
|
|
6229
|
-
const rowVirtualizerRef = React$
|
|
6230
|
-
const headerRef = React$
|
|
6231
|
-
const rowMapRef = React$
|
|
6232
|
-
const footerRef = React$
|
|
6233
|
-
const dataGridPropsRef = useAsRef(dataGridProps);
|
|
6234
|
-
const listenersRef = useLazyRef(() => new Set());
|
|
6235
|
-
const stateRef = useLazyRef(() => {
|
|
6289
|
+
const dataGridRef = React$22.useRef(null);
|
|
6290
|
+
const tableRef = React$22.useRef(null);
|
|
6291
|
+
const rowVirtualizerRef = React$22.useRef(null);
|
|
6292
|
+
const headerRef = React$22.useRef(null);
|
|
6293
|
+
const rowMapRef = React$22.useRef(new Map());
|
|
6294
|
+
const footerRef = React$22.useRef(null);
|
|
6295
|
+
const dataGridPropsRef = useAsRef$1(dataGridProps);
|
|
6296
|
+
const listenersRef = useLazyRef$1(() => new Set());
|
|
6297
|
+
const stateRef = useLazyRef$1(() => {
|
|
6236
6298
|
return {
|
|
6237
6299
|
sorting: initialState?.sorting ?? [],
|
|
6238
6300
|
rowHeight: rowHeightProp,
|
|
@@ -6257,7 +6319,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
6257
6319
|
isScrolling: false
|
|
6258
6320
|
};
|
|
6259
6321
|
});
|
|
6260
|
-
const store = React$
|
|
6322
|
+
const store = React$22.useMemo(() => {
|
|
6261
6323
|
let isBatching = false;
|
|
6262
6324
|
let pendingNotification = false;
|
|
6263
6325
|
return {
|
|
@@ -6301,43 +6363,43 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
6301
6363
|
}
|
|
6302
6364
|
};
|
|
6303
6365
|
}, [listenersRef, stateRef]);
|
|
6304
|
-
React$
|
|
6366
|
+
React$22.useEffect(() => {
|
|
6305
6367
|
store.setState("rowHeight", rowHeightProp);
|
|
6306
6368
|
}, [rowHeightProp, store]);
|
|
6307
|
-
const focusedCell = useStore(store, (state) => state.focusedCell);
|
|
6308
|
-
const editingCell = useStore(store, (state) => state.editingCell);
|
|
6309
|
-
const selectionState = useStore(store, (state) => state.selectionState);
|
|
6310
|
-
const searchQuery = useStore(store, (state) => state.searchQuery);
|
|
6311
|
-
const searchMatches = useStore(store, (state) => state.searchMatches);
|
|
6312
|
-
const matchIndex = useStore(store, (state) => state.matchIndex);
|
|
6313
|
-
const searchOpen = useStore(store, (state) => state.searchOpen);
|
|
6314
|
-
const sorting = useStore(store, (state) => state.sorting);
|
|
6315
|
-
const rowSelection = useStore(store, (state) => state.rowSelection);
|
|
6316
|
-
const contextMenu = useStore(store, (state) => state.contextMenu);
|
|
6317
|
-
const rowHeight = useStore(store, (state) => state.rowHeight);
|
|
6318
|
-
const isScrolling = useStore(store, (state) => state.isScrolling);
|
|
6369
|
+
const focusedCell = useStore$1(store, (state) => state.focusedCell);
|
|
6370
|
+
const editingCell = useStore$1(store, (state) => state.editingCell);
|
|
6371
|
+
const selectionState = useStore$1(store, (state) => state.selectionState);
|
|
6372
|
+
const searchQuery = useStore$1(store, (state) => state.searchQuery);
|
|
6373
|
+
const searchMatches = useStore$1(store, (state) => state.searchMatches);
|
|
6374
|
+
const matchIndex = useStore$1(store, (state) => state.matchIndex);
|
|
6375
|
+
const searchOpen = useStore$1(store, (state) => state.searchOpen);
|
|
6376
|
+
const sorting = useStore$1(store, (state) => state.sorting);
|
|
6377
|
+
const rowSelection = useStore$1(store, (state) => state.rowSelection);
|
|
6378
|
+
const contextMenu = useStore$1(store, (state) => state.contextMenu);
|
|
6379
|
+
const rowHeight = useStore$1(store, (state) => state.rowHeight);
|
|
6380
|
+
const isScrolling = useStore$1(store, (state) => state.isScrolling);
|
|
6319
6381
|
const rowHeightValue = getRowHeightValue(rowHeight);
|
|
6320
|
-
const columnIds = React$
|
|
6382
|
+
const columnIds = React$22.useMemo(() => {
|
|
6321
6383
|
return columns.map((c) => {
|
|
6322
6384
|
if (c.id) return c.id;
|
|
6323
6385
|
if ("accessorKey" in c) return c.accessorKey;
|
|
6324
6386
|
return void 0;
|
|
6325
6387
|
}).filter((id) => Boolean(id));
|
|
6326
6388
|
}, [columns]);
|
|
6327
|
-
const columnDefsVersionRef = React$
|
|
6328
|
-
const prevColumnsRef = React$
|
|
6389
|
+
const columnDefsVersionRef = React$22.useRef(0);
|
|
6390
|
+
const prevColumnsRef = React$22.useRef(columns);
|
|
6329
6391
|
if (prevColumnsRef.current !== columns) {
|
|
6330
6392
|
prevColumnsRef.current = columns;
|
|
6331
6393
|
columnDefsVersionRef.current += 1;
|
|
6332
6394
|
}
|
|
6333
6395
|
const columnDefsVersion = columnDefsVersionRef.current;
|
|
6334
|
-
const storageKey = React$
|
|
6396
|
+
const storageKey = React$22.useMemo(() => {
|
|
6335
6397
|
if (!persistColumnState || typeof window === "undefined") return void 0;
|
|
6336
6398
|
const path = globalThis.location?.pathname ?? "unknown";
|
|
6337
6399
|
const cols = columnIds.join("|");
|
|
6338
6400
|
return `pxl.dataGrid:${path}:${cols}`;
|
|
6339
6401
|
}, [columnIds, persistColumnState]);
|
|
6340
|
-
const persistedState = React$
|
|
6402
|
+
const persistedState = React$22.useMemo(() => {
|
|
6341
6403
|
if (!storageKey) return void 0;
|
|
6342
6404
|
try {
|
|
6343
6405
|
const raw = localStorage.getItem(storageKey);
|
|
@@ -6348,7 +6410,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
6348
6410
|
return void 0;
|
|
6349
6411
|
}
|
|
6350
6412
|
}, [storageKey]);
|
|
6351
|
-
const mergedInitialState = React$
|
|
6413
|
+
const mergedInitialState = React$22.useMemo(() => {
|
|
6352
6414
|
const base = { ...initialState ?? {} };
|
|
6353
6415
|
if (persistedState) try {
|
|
6354
6416
|
if (persistedState.columnOrder) base.columnOrder = persistedState.columnOrder;
|
|
@@ -6357,12 +6419,12 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
6357
6419
|
} catch (_) {}
|
|
6358
6420
|
return base;
|
|
6359
6421
|
}, [initialState, persistedState]);
|
|
6360
|
-
const getNavigableColumnIds = React$
|
|
6422
|
+
const getNavigableColumnIds = React$22.useCallback(() => {
|
|
6361
6423
|
const t = tableRef.current;
|
|
6362
6424
|
if (t) return t.getVisibleLeafColumns().map((c) => c.id).filter((c) => !NON_NAVIGABLE_COLUMN_IDS.includes(c));
|
|
6363
6425
|
return columnIds.filter((c) => !NON_NAVIGABLE_COLUMN_IDS.includes(c));
|
|
6364
6426
|
}, [columnIds]);
|
|
6365
|
-
const onDataUpdate = React$
|
|
6427
|
+
const onDataUpdate = React$22.useCallback((updates) => {
|
|
6366
6428
|
const updateArray = Array.isArray(updates) ? updates : [updates];
|
|
6367
6429
|
if (updateArray.length === 0) return;
|
|
6368
6430
|
const currentTable = tableRef.current;
|
|
@@ -6410,10 +6472,10 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
6410
6472
|
});
|
|
6411
6473
|
onDataChange?.(newData);
|
|
6412
6474
|
}, [data, onDataChange]);
|
|
6413
|
-
const getIsCellSelected = React$
|
|
6475
|
+
const getIsCellSelected = React$22.useCallback((rowIndex, columnId) => {
|
|
6414
6476
|
return selectionState.selectedCells.has(getCellKey(rowIndex, columnId));
|
|
6415
6477
|
}, [selectionState.selectedCells]);
|
|
6416
|
-
const clearSelection = React$
|
|
6478
|
+
const clearSelection = React$22.useCallback(() => {
|
|
6417
6479
|
store.batch(() => {
|
|
6418
6480
|
store.setState("selectionState", {
|
|
6419
6481
|
selectedCells: new Set(),
|
|
@@ -6423,7 +6485,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
6423
6485
|
store.setState("rowSelection", {});
|
|
6424
6486
|
});
|
|
6425
6487
|
}, [store]);
|
|
6426
|
-
const selectAll = React$
|
|
6488
|
+
const selectAll = React$22.useCallback(() => {
|
|
6427
6489
|
const allCells = new Set();
|
|
6428
6490
|
const currentTable = tableRef.current;
|
|
6429
6491
|
const rows = currentTable?.getRowModel().rows ?? [];
|
|
@@ -6450,7 +6512,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
6450
6512
|
data.length,
|
|
6451
6513
|
store
|
|
6452
6514
|
]);
|
|
6453
|
-
const selectColumn = React$
|
|
6515
|
+
const selectColumn = React$22.useCallback((columnId) => {
|
|
6454
6516
|
const currentTable = tableRef.current;
|
|
6455
6517
|
const rows = currentTable?.getRowModel().rows ?? [];
|
|
6456
6518
|
const rowCount = rows.length ?? data.length;
|
|
@@ -6472,7 +6534,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
6472
6534
|
isSelecting: false
|
|
6473
6535
|
});
|
|
6474
6536
|
}, [data.length, store]);
|
|
6475
|
-
const selectRange = React$
|
|
6537
|
+
const selectRange = React$22.useCallback((start, end, isSelecting = false) => {
|
|
6476
6538
|
const visibleCols = getNavigableColumnIds();
|
|
6477
6539
|
const startColIndex = visibleCols.indexOf(start.columnId);
|
|
6478
6540
|
const endColIndex = visibleCols.indexOf(end.columnId);
|
|
@@ -6494,7 +6556,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
6494
6556
|
isSelecting
|
|
6495
6557
|
});
|
|
6496
6558
|
}, [getNavigableColumnIds, store]);
|
|
6497
|
-
const focusCell = React$
|
|
6559
|
+
const focusCell = React$22.useCallback((rowIndex, columnId) => {
|
|
6498
6560
|
store.batch(() => {
|
|
6499
6561
|
store.setState("focusedCell", {
|
|
6500
6562
|
rowIndex,
|
|
@@ -6510,7 +6572,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
6510
6572
|
if (currentState.searchOpen) return;
|
|
6511
6573
|
if (dataGridRef.current && document.activeElement !== dataGridRef.current) dataGridRef.current.focus();
|
|
6512
6574
|
}, [store, onCellFocusProp]);
|
|
6513
|
-
const onRowsDelete = React$
|
|
6575
|
+
const onRowsDelete = React$22.useCallback(async (rowIndices) => {
|
|
6514
6576
|
if (!onRowsDeleteProp || rowIndices.length === 0) return;
|
|
6515
6577
|
const currentTable = tableRef.current;
|
|
6516
6578
|
const rows = currentTable?.getRowModel().rows;
|
|
@@ -6562,7 +6624,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
6562
6624
|
const debouncedRowClick = useDebouncedCallback((rowIndex) => {
|
|
6563
6625
|
onRowClickProp?.(rowIndex);
|
|
6564
6626
|
}, 300);
|
|
6565
|
-
const navigateCell = React$
|
|
6627
|
+
const navigateCell = React$22.useCallback((direction) => {
|
|
6566
6628
|
const currentState = store.getState();
|
|
6567
6629
|
if (!currentState.focusedCell) return;
|
|
6568
6630
|
const { rowIndex, columnId } = currentState.focusedCell;
|
|
@@ -6692,7 +6754,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
6692
6754
|
onRowClickProp,
|
|
6693
6755
|
debouncedRowClick
|
|
6694
6756
|
]);
|
|
6695
|
-
const onCellEditingStart = React$
|
|
6757
|
+
const onCellEditingStart = React$22.useCallback((rowIndex, columnId) => {
|
|
6696
6758
|
const col = tableRef.current?.getColumn(columnId);
|
|
6697
6759
|
const editable = col?.columnDef?.meta?.editable;
|
|
6698
6760
|
if (editable === false) return;
|
|
@@ -6711,7 +6773,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
6711
6773
|
});
|
|
6712
6774
|
});
|
|
6713
6775
|
}, [store]);
|
|
6714
|
-
const onCellEditingStop = React$
|
|
6776
|
+
const onCellEditingStop = React$22.useCallback((opts) => {
|
|
6715
6777
|
const currentState = store.getState();
|
|
6716
6778
|
const currentEditing = currentState.editingCell;
|
|
6717
6779
|
store.setState("editingCell", null);
|
|
@@ -6737,7 +6799,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
6737
6799
|
focusCell,
|
|
6738
6800
|
navigateCell
|
|
6739
6801
|
]);
|
|
6740
|
-
const onSearchOpenChange = React$
|
|
6802
|
+
const onSearchOpenChange = React$22.useCallback((open) => {
|
|
6741
6803
|
if (open) {
|
|
6742
6804
|
store.setState("searchOpen", true);
|
|
6743
6805
|
return;
|
|
@@ -6756,7 +6818,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
6756
6818
|
});
|
|
6757
6819
|
if (dataGridRef.current && document.activeElement !== dataGridRef.current) dataGridRef.current.focus();
|
|
6758
6820
|
}, [store]);
|
|
6759
|
-
const onSearch = React$
|
|
6821
|
+
const onSearch = React$22.useCallback((query) => {
|
|
6760
6822
|
if (!query.trim()) {
|
|
6761
6823
|
store.batch(() => {
|
|
6762
6824
|
store.setState("searchMatches", []);
|
|
@@ -6791,8 +6853,8 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
6791
6853
|
rowVirtualizerRef.current?.scrollToIndex(firstMatch.rowIndex, { align: "center" });
|
|
6792
6854
|
}
|
|
6793
6855
|
}, [columnIds, store]);
|
|
6794
|
-
const onSearchQueryChange = React$
|
|
6795
|
-
const onNavigateToPrevMatch = React$
|
|
6856
|
+
const onSearchQueryChange = React$22.useCallback((query) => store.setState("searchQuery", query), [store]);
|
|
6857
|
+
const onNavigateToPrevMatch = React$22.useCallback(() => {
|
|
6796
6858
|
const currentState = store.getState();
|
|
6797
6859
|
if (currentState.searchMatches.length === 0) return;
|
|
6798
6860
|
const prevIndex = currentState.matchIndex - 1 < 0 ? currentState.searchMatches.length - 1 : currentState.matchIndex - 1;
|
|
@@ -6807,7 +6869,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
6807
6869
|
});
|
|
6808
6870
|
}
|
|
6809
6871
|
}, [store, focusCell]);
|
|
6810
|
-
const onNavigateToNextMatch = React$
|
|
6872
|
+
const onNavigateToNextMatch = React$22.useCallback(() => {
|
|
6811
6873
|
const currentState = store.getState();
|
|
6812
6874
|
if (currentState.searchMatches.length === 0) return;
|
|
6813
6875
|
const nextIndex = (currentState.matchIndex + 1) % currentState.searchMatches.length;
|
|
@@ -6822,15 +6884,15 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
6822
6884
|
});
|
|
6823
6885
|
}
|
|
6824
6886
|
}, [store, focusCell]);
|
|
6825
|
-
const getIsSearchMatch = React$
|
|
6887
|
+
const getIsSearchMatch = React$22.useCallback((rowIndex, columnId) => {
|
|
6826
6888
|
return searchMatches.some((match) => match.rowIndex === rowIndex && match.columnId === columnId);
|
|
6827
6889
|
}, [searchMatches]);
|
|
6828
|
-
const getIsActiveSearchMatch = React$
|
|
6890
|
+
const getIsActiveSearchMatch = React$22.useCallback((rowIndex, columnId) => {
|
|
6829
6891
|
if (matchIndex < 0) return false;
|
|
6830
6892
|
const currentMatch = searchMatches[matchIndex];
|
|
6831
6893
|
return currentMatch?.rowIndex === rowIndex && currentMatch?.columnId === columnId;
|
|
6832
6894
|
}, [searchMatches, matchIndex]);
|
|
6833
|
-
const blurCell = React$
|
|
6895
|
+
const blurCell = React$22.useCallback(() => {
|
|
6834
6896
|
const currentState = store.getState();
|
|
6835
6897
|
if (currentState.editingCell && document.activeElement instanceof HTMLElement) document.activeElement.blur();
|
|
6836
6898
|
store.batch(() => {
|
|
@@ -6838,7 +6900,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
6838
6900
|
store.setState("editingCell", null);
|
|
6839
6901
|
});
|
|
6840
6902
|
}, [store]);
|
|
6841
|
-
const onCellClick = React$
|
|
6903
|
+
const onCellClick = React$22.useCallback((rowIndex, columnId, event) => {
|
|
6842
6904
|
if (event?.button === 2) return;
|
|
6843
6905
|
const currentState = store.getState();
|
|
6844
6906
|
const currentFocused = currentState.focusedCell;
|
|
@@ -6886,11 +6948,11 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
6886
6948
|
selectRange,
|
|
6887
6949
|
clearSelection
|
|
6888
6950
|
]);
|
|
6889
|
-
const onCellDoubleClick = React$
|
|
6951
|
+
const onCellDoubleClick = React$22.useCallback((rowIndex, columnId, event) => {
|
|
6890
6952
|
if (event?.defaultPrevented) return;
|
|
6891
6953
|
onCellEditingStart(rowIndex, columnId);
|
|
6892
6954
|
}, [onCellEditingStart]);
|
|
6893
|
-
const onCellMouseDown = React$
|
|
6955
|
+
const onCellMouseDown = React$22.useCallback((rowIndex, columnId, event) => {
|
|
6894
6956
|
if (event.button === 2) return;
|
|
6895
6957
|
event.preventDefault();
|
|
6896
6958
|
if (!event.ctrlKey && !event.metaKey && !event.shiftKey) store.batch(() => {
|
|
@@ -6911,7 +6973,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
6911
6973
|
store.setState("rowSelection", {});
|
|
6912
6974
|
});
|
|
6913
6975
|
}, [store]);
|
|
6914
|
-
const onCellMouseEnter = React$
|
|
6976
|
+
const onCellMouseEnter = React$22.useCallback((rowIndex, columnId, _event) => {
|
|
6915
6977
|
const currentState = store.getState();
|
|
6916
6978
|
if (currentState.selectionState.isSelecting && currentState.selectionState.selectionRange) {
|
|
6917
6979
|
const start = currentState.selectionState.selectionRange.start;
|
|
@@ -6927,14 +6989,14 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
6927
6989
|
selectRange,
|
|
6928
6990
|
focusCell
|
|
6929
6991
|
]);
|
|
6930
|
-
const onCellMouseUp = React$
|
|
6992
|
+
const onCellMouseUp = React$22.useCallback(() => {
|
|
6931
6993
|
const currentState = store.getState();
|
|
6932
6994
|
store.setState("selectionState", {
|
|
6933
6995
|
...currentState.selectionState,
|
|
6934
6996
|
isSelecting: false
|
|
6935
6997
|
});
|
|
6936
6998
|
}, [store]);
|
|
6937
|
-
const onCellContextMenu = React$
|
|
6999
|
+
const onCellContextMenu = React$22.useCallback((rowIndex, columnId, event) => {
|
|
6938
7000
|
event.preventDefault();
|
|
6939
7001
|
event.stopPropagation();
|
|
6940
7002
|
const currentState = store.getState();
|
|
@@ -6966,7 +7028,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
6966
7028
|
y: event.clientY
|
|
6967
7029
|
});
|
|
6968
7030
|
}, [store]);
|
|
6969
|
-
const onContextMenuOpenChange = React$
|
|
7031
|
+
const onContextMenuOpenChange = React$22.useCallback((open) => {
|
|
6970
7032
|
if (!open) {
|
|
6971
7033
|
const currentMenu = store.getState().contextMenu;
|
|
6972
7034
|
store.setState("contextMenu", {
|
|
@@ -6976,7 +7038,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
6976
7038
|
});
|
|
6977
7039
|
}
|
|
6978
7040
|
}, [store]);
|
|
6979
|
-
const onDataGridKeyDown = React$
|
|
7041
|
+
const onDataGridKeyDown = React$22.useCallback((event) => {
|
|
6980
7042
|
const currentState = store.getState();
|
|
6981
7043
|
const { key, ctrlKey, metaKey, shiftKey } = event;
|
|
6982
7044
|
const isCtrlPressed = ctrlKey || metaKey;
|
|
@@ -7135,7 +7197,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
7135
7197
|
enableSearch,
|
|
7136
7198
|
onCellEditingStart
|
|
7137
7199
|
]);
|
|
7138
|
-
const onSortingChange = React$
|
|
7200
|
+
const onSortingChange = React$22.useCallback((updater) => {
|
|
7139
7201
|
if (manualSorting && externalOnSortingChange) externalOnSortingChange(updater);
|
|
7140
7202
|
else {
|
|
7141
7203
|
const currentState = store.getState();
|
|
@@ -7147,7 +7209,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
7147
7209
|
manualSorting,
|
|
7148
7210
|
externalOnSortingChange
|
|
7149
7211
|
]);
|
|
7150
|
-
const onRowSelectionChange = React$
|
|
7212
|
+
const onRowSelectionChange = React$22.useCallback((updater) => {
|
|
7151
7213
|
const currentState = store.getState();
|
|
7152
7214
|
const newRowSelection = typeof updater === "function" ? updater(currentState.rowSelection) : updater;
|
|
7153
7215
|
const selectedRows = Object.keys(newRowSelection).filter((key) => newRowSelection[key]);
|
|
@@ -7169,7 +7231,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
7169
7231
|
store.setState("editingCell", null);
|
|
7170
7232
|
});
|
|
7171
7233
|
}, [store, columnIds]);
|
|
7172
|
-
const onRowSelect = React$
|
|
7234
|
+
const onRowSelect = React$22.useCallback((rowIndex, selected, shiftKey) => {
|
|
7173
7235
|
const currentState = store.getState();
|
|
7174
7236
|
const rows = tableRef.current?.getRowModel().rows ?? [];
|
|
7175
7237
|
const currentRow = rows[rowIndex];
|
|
@@ -7189,12 +7251,12 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
7189
7251
|
});
|
|
7190
7252
|
store.setState("lastClickedRowIndex", rowIndex);
|
|
7191
7253
|
}, [store, onRowSelectionChange]);
|
|
7192
|
-
const onRowHeightChange = React$
|
|
7254
|
+
const onRowHeightChange = React$22.useCallback((updater) => {
|
|
7193
7255
|
const currentState = store.getState();
|
|
7194
7256
|
const newRowHeight = typeof updater === "function" ? updater(currentState.rowHeight) : updater;
|
|
7195
7257
|
store.setState("rowHeight", newRowHeight);
|
|
7196
7258
|
}, [store]);
|
|
7197
|
-
const onColumnClick = React$
|
|
7259
|
+
const onColumnClick = React$22.useCallback((columnId) => {
|
|
7198
7260
|
if (!enableColumnSelection) {
|
|
7199
7261
|
clearSelection();
|
|
7200
7262
|
return;
|
|
@@ -7205,13 +7267,13 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
7205
7267
|
selectColumn,
|
|
7206
7268
|
clearSelection
|
|
7207
7269
|
]);
|
|
7208
|
-
const defaultColumn = React$
|
|
7270
|
+
const defaultColumn = React$22.useMemo(() => ({
|
|
7209
7271
|
cell: DataGridCell,
|
|
7210
7272
|
minSize: MIN_COLUMN_SIZE,
|
|
7211
7273
|
maxSize: MAX_COLUMN_SIZE
|
|
7212
7274
|
}), []);
|
|
7213
7275
|
const effectiveSorting = manualSorting && externalSorting ? externalSorting : sorting;
|
|
7214
|
-
const tableOptions = React$
|
|
7276
|
+
const tableOptions = React$22.useMemo(() => ({
|
|
7215
7277
|
...dataGridPropsRef.current,
|
|
7216
7278
|
data,
|
|
7217
7279
|
columns,
|
|
@@ -7303,7 +7365,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
7303
7365
|
if (!tableRef.current) tableRef.current = table;
|
|
7304
7366
|
const columnSizing = table.getState().columnSizing;
|
|
7305
7367
|
const columnVisibility = table.getState().columnVisibility;
|
|
7306
|
-
const columnSizeVars = React$
|
|
7368
|
+
const columnSizeVars = React$22.useMemo(() => {
|
|
7307
7369
|
const headers = table.getFlatHeaders();
|
|
7308
7370
|
const colSizes = {};
|
|
7309
7371
|
for (const header of headers) {
|
|
@@ -7345,7 +7407,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
7345
7407
|
}
|
|
7346
7408
|
});
|
|
7347
7409
|
if (!rowVirtualizerRef.current) rowVirtualizerRef.current = rowVirtualizer;
|
|
7348
|
-
const onScrollToRow = React$
|
|
7410
|
+
const onScrollToRow = React$22.useCallback((opts) => {
|
|
7349
7411
|
const rowIndex = opts?.rowIndex ?? 0;
|
|
7350
7412
|
const columnId = opts?.columnId;
|
|
7351
7413
|
rowVirtualizer.scrollToIndex(rowIndex, { align: "center" });
|
|
@@ -7369,7 +7431,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
7369
7431
|
getNavigableColumnIds,
|
|
7370
7432
|
store
|
|
7371
7433
|
]);
|
|
7372
|
-
const onRowAdd = React$
|
|
7434
|
+
const onRowAdd = React$22.useCallback(async (event) => {
|
|
7373
7435
|
if (!onRowAddProp) return;
|
|
7374
7436
|
const result = await onRowAddProp(event);
|
|
7375
7437
|
if (event?.defaultPrevented || result === null) return;
|
|
@@ -7385,7 +7447,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
7385
7447
|
}
|
|
7386
7448
|
onScrollToRow({ rowIndex: rows.length });
|
|
7387
7449
|
}, [onRowAddProp, onScrollToRow]);
|
|
7388
|
-
useIsomorphicLayoutEffect(() => {
|
|
7450
|
+
useIsomorphicLayoutEffect$1(() => {
|
|
7389
7451
|
if (!storageKey) return;
|
|
7390
7452
|
try {
|
|
7391
7453
|
const state = table.getState();
|
|
@@ -7402,7 +7464,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
7402
7464
|
table.getState().columnVisibility,
|
|
7403
7465
|
table.getState().columnPinning
|
|
7404
7466
|
]);
|
|
7405
|
-
const searchState = React$
|
|
7467
|
+
const searchState = React$22.useMemo(() => {
|
|
7406
7468
|
if (!enableSearch) return void 0;
|
|
7407
7469
|
return {
|
|
7408
7470
|
searchMatches,
|
|
@@ -7427,7 +7489,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
7427
7489
|
onNavigateToNextMatch,
|
|
7428
7490
|
onNavigateToPrevMatch
|
|
7429
7491
|
]);
|
|
7430
|
-
React$
|
|
7492
|
+
React$22.useEffect(() => {
|
|
7431
7493
|
const dataGridElement = dataGridRef.current;
|
|
7432
7494
|
if (!dataGridElement) return;
|
|
7433
7495
|
dataGridElement.addEventListener("keydown", onDataGridKeyDown);
|
|
@@ -7435,7 +7497,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
7435
7497
|
dataGridElement.removeEventListener("keydown", onDataGridKeyDown);
|
|
7436
7498
|
};
|
|
7437
7499
|
}, [onDataGridKeyDown]);
|
|
7438
|
-
React$
|
|
7500
|
+
React$22.useEffect(() => {
|
|
7439
7501
|
function onGlobalKeyDown(event) {
|
|
7440
7502
|
const dataGridElement = dataGridRef.current;
|
|
7441
7503
|
if (!dataGridElement) return;
|
|
@@ -7479,7 +7541,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
7479
7541
|
store,
|
|
7480
7542
|
clearSelection
|
|
7481
7543
|
]);
|
|
7482
|
-
React$
|
|
7544
|
+
React$22.useEffect(() => {
|
|
7483
7545
|
const currentState = store.getState();
|
|
7484
7546
|
if (autoFocus && data.length > 0 && columns.length > 0 && !currentState.focusedCell) {
|
|
7485
7547
|
const _nav = getNavigableColumnIds();
|
|
@@ -7505,7 +7567,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
7505
7567
|
getNavigableColumnIds,
|
|
7506
7568
|
focusCell
|
|
7507
7569
|
]);
|
|
7508
|
-
React$
|
|
7570
|
+
React$22.useEffect(() => {
|
|
7509
7571
|
function onOutsideClick(event) {
|
|
7510
7572
|
if (event.button === 2) return;
|
|
7511
7573
|
if (dataGridRef.current && !dataGridRef.current.contains(event.target)) {
|
|
@@ -7527,7 +7589,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
7527
7589
|
blurCell,
|
|
7528
7590
|
clearSelection
|
|
7529
7591
|
]);
|
|
7530
|
-
React$
|
|
7592
|
+
React$22.useEffect(() => {
|
|
7531
7593
|
function onCleanup() {
|
|
7532
7594
|
document.removeEventListener("selectstart", preventSelection);
|
|
7533
7595
|
document.removeEventListener("contextmenu", preventContextMenu);
|
|
@@ -7552,7 +7614,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
7552
7614
|
onUnsubscribe();
|
|
7553
7615
|
};
|
|
7554
7616
|
}, [store]);
|
|
7555
|
-
useIsomorphicLayoutEffect(() => {
|
|
7617
|
+
useIsomorphicLayoutEffect$1(() => {
|
|
7556
7618
|
const rafId = requestAnimationFrame(() => {
|
|
7557
7619
|
rowVirtualizer.measure();
|
|
7558
7620
|
});
|
|
@@ -7587,7 +7649,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
7587
7649
|
//#endregion
|
|
7588
7650
|
//#region src/date-picker/date-picker.tsx
|
|
7589
7651
|
function DatePickerDemo() {
|
|
7590
|
-
const [date, setDate] = React$
|
|
7652
|
+
const [date, setDate] = React$21.useState();
|
|
7591
7653
|
return /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
|
|
7592
7654
|
asChild: true,
|
|
7593
7655
|
children: /* @__PURE__ */ jsxs(Button, {
|
|
@@ -7617,13 +7679,13 @@ Drawer.displayName = "Drawer";
|
|
|
7617
7679
|
const DrawerTrigger = Drawer$1.Trigger;
|
|
7618
7680
|
const DrawerPortal = Drawer$1.Portal;
|
|
7619
7681
|
const DrawerClose = Drawer$1.Close;
|
|
7620
|
-
const DrawerOverlay = React$
|
|
7682
|
+
const DrawerOverlay = React$20.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Drawer$1.Overlay, {
|
|
7621
7683
|
ref,
|
|
7622
7684
|
className: cn("fixed inset-0 z-50 bg-black/80", className),
|
|
7623
7685
|
...props
|
|
7624
7686
|
}));
|
|
7625
7687
|
DrawerOverlay.displayName = Drawer$1.Overlay.displayName;
|
|
7626
|
-
const DrawerContent = React$
|
|
7688
|
+
const DrawerContent = React$20.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsxs(DrawerPortal, { children: [/* @__PURE__ */ jsx(DrawerOverlay, {}), /* @__PURE__ */ jsxs(Drawer$1.Content, {
|
|
7627
7689
|
ref,
|
|
7628
7690
|
className: cn("fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background", className),
|
|
7629
7691
|
...props,
|
|
@@ -7640,13 +7702,13 @@ const DrawerFooter = ({ className,...props }) => /* @__PURE__ */ jsx("div", {
|
|
|
7640
7702
|
...props
|
|
7641
7703
|
});
|
|
7642
7704
|
DrawerFooter.displayName = "DrawerFooter";
|
|
7643
|
-
const DrawerTitle = React$
|
|
7705
|
+
const DrawerTitle = React$20.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Drawer$1.Title, {
|
|
7644
7706
|
ref,
|
|
7645
7707
|
className: cn("text-lg font-semibold leading-none tracking-tight", className),
|
|
7646
7708
|
...props
|
|
7647
7709
|
}));
|
|
7648
7710
|
DrawerTitle.displayName = Drawer$1.Title.displayName;
|
|
7649
|
-
const DrawerDescription = React$
|
|
7711
|
+
const DrawerDescription = React$20.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Drawer$1.Description, {
|
|
7650
7712
|
ref,
|
|
7651
7713
|
className: cn("text-sm text-muted-foreground", className),
|
|
7652
7714
|
...props
|
|
@@ -7776,8 +7838,8 @@ function FieldError({ className, children, errors,...props }) {
|
|
|
7776
7838
|
//#endregion
|
|
7777
7839
|
//#region src/hooks/use-is-mobile.ts
|
|
7778
7840
|
function useIsMobile(mobileBreakpoint = 768) {
|
|
7779
|
-
const [isMobile, setIsMobile] = React$
|
|
7780
|
-
React$
|
|
7841
|
+
const [isMobile, setIsMobile] = React$19.useState(false);
|
|
7842
|
+
React$19.useEffect(() => {
|
|
7781
7843
|
const mql = globalThis.matchMedia(`(max-width: ${mobileBreakpoint - 1}px)`);
|
|
7782
7844
|
const onChange = () => {
|
|
7783
7845
|
setIsMobile(globalThis.innerWidth < mobileBreakpoint);
|
|
@@ -7921,36 +7983,36 @@ const coordinateGetter = (event, { context }) => {
|
|
|
7921
7983
|
}
|
|
7922
7984
|
return void 0;
|
|
7923
7985
|
};
|
|
7924
|
-
const ROOT_NAME = "Kanban";
|
|
7986
|
+
const ROOT_NAME$1 = "Kanban";
|
|
7925
7987
|
const BOARD_NAME = "KanbanBoard";
|
|
7926
7988
|
const COLUMN_NAME = "KanbanColumn";
|
|
7927
7989
|
const COLUMN_HANDLE_NAME = "KanbanColumnHandle";
|
|
7928
|
-
const ITEM_NAME = "KanbanItem";
|
|
7990
|
+
const ITEM_NAME$1 = "KanbanItem";
|
|
7929
7991
|
const ITEM_HANDLE_NAME = "KanbanItemHandle";
|
|
7930
7992
|
const OVERLAY_NAME = "KanbanOverlay";
|
|
7931
|
-
const KanbanContext = React$
|
|
7993
|
+
const KanbanContext = React$18.createContext(null);
|
|
7932
7994
|
function useKanbanContext(consumerName) {
|
|
7933
|
-
const context = React$
|
|
7934
|
-
if (!context) throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``);
|
|
7995
|
+
const context = React$18.useContext(KanbanContext);
|
|
7996
|
+
if (!context) throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME$1}\``);
|
|
7935
7997
|
return context;
|
|
7936
7998
|
}
|
|
7937
7999
|
function KanbanRoot(props) {
|
|
7938
8000
|
const { value, onValueChange, modifiers, strategy = verticalListSortingStrategy, orientation = "horizontal", onMove, getItemValue: getItemValueProp, accessibility, flatCursor = false,...kanbanProps } = props;
|
|
7939
|
-
const id = React$
|
|
7940
|
-
const [activeId, setActiveId] = React$
|
|
7941
|
-
const lastOverIdRef = React$
|
|
7942
|
-
const hasMovedRef = React$
|
|
8001
|
+
const id = React$18.useId();
|
|
8002
|
+
const [activeId, setActiveId] = React$18.useState(null);
|
|
8003
|
+
const lastOverIdRef = React$18.useRef(null);
|
|
8004
|
+
const hasMovedRef = React$18.useRef(false);
|
|
7943
8005
|
const sensors = useSensors(useSensor(MouseSensor), useSensor(TouchSensor), useSensor(KeyboardSensor, { coordinateGetter }));
|
|
7944
|
-
const getItemValue = React$
|
|
8006
|
+
const getItemValue = React$18.useCallback((item) => {
|
|
7945
8007
|
if (typeof item === "object" && !getItemValueProp) throw new Error("`getItemValue` is required when using array of objects");
|
|
7946
8008
|
return getItemValueProp ? getItemValueProp(item) : item;
|
|
7947
8009
|
}, [getItemValueProp]);
|
|
7948
|
-
const getColumn = React$
|
|
8010
|
+
const getColumn = React$18.useCallback((id$1) => {
|
|
7949
8011
|
if (id$1 in value) return id$1;
|
|
7950
8012
|
for (const [columnId, items] of Object.entries(value)) if (items.some((item) => getItemValue(item) === id$1)) return columnId;
|
|
7951
8013
|
return null;
|
|
7952
8014
|
}, [value, getItemValue]);
|
|
7953
|
-
const collisionDetection = React$
|
|
8015
|
+
const collisionDetection = React$18.useCallback((args) => {
|
|
7954
8016
|
if (activeId && activeId in value) return closestCenter({
|
|
7955
8017
|
...args,
|
|
7956
8018
|
droppableContainers: args.droppableContainers.filter((container) => container.id in value)
|
|
@@ -7979,12 +8041,12 @@ function KanbanRoot(props) {
|
|
|
7979
8041
|
value,
|
|
7980
8042
|
getItemValue
|
|
7981
8043
|
]);
|
|
7982
|
-
const onDragStart = React$
|
|
8044
|
+
const onDragStart = React$18.useCallback((event) => {
|
|
7983
8045
|
kanbanProps.onDragStart?.(event);
|
|
7984
8046
|
if (event.activatorEvent.defaultPrevented) return;
|
|
7985
8047
|
setActiveId(event.active.id);
|
|
7986
8048
|
}, [kanbanProps]);
|
|
7987
|
-
const onDragOver = React$
|
|
8049
|
+
const onDragOver = React$18.useCallback((event) => {
|
|
7988
8050
|
kanbanProps.onDragOver?.(event);
|
|
7989
8051
|
if (event.activatorEvent.defaultPrevented) return;
|
|
7990
8052
|
const { active, over } = event;
|
|
@@ -8025,7 +8087,7 @@ function KanbanRoot(props) {
|
|
|
8025
8087
|
getItemValue,
|
|
8026
8088
|
onValueChange
|
|
8027
8089
|
]);
|
|
8028
|
-
const onDragEnd = React$
|
|
8090
|
+
const onDragEnd = React$18.useCallback((event) => {
|
|
8029
8091
|
kanbanProps.onDragEnd?.(event);
|
|
8030
8092
|
if (event.activatorEvent.defaultPrevented) return;
|
|
8031
8093
|
const { active, over } = event;
|
|
@@ -8088,13 +8150,13 @@ function KanbanRoot(props) {
|
|
|
8088
8150
|
getColumn,
|
|
8089
8151
|
getItemValue
|
|
8090
8152
|
]);
|
|
8091
|
-
const onDragCancel = React$
|
|
8153
|
+
const onDragCancel = React$18.useCallback((event) => {
|
|
8092
8154
|
kanbanProps.onDragCancel?.(event);
|
|
8093
8155
|
if (event.activatorEvent.defaultPrevented) return;
|
|
8094
8156
|
setActiveId(null);
|
|
8095
8157
|
hasMovedRef.current = false;
|
|
8096
8158
|
}, [kanbanProps]);
|
|
8097
|
-
const announcements = React$
|
|
8159
|
+
const announcements = React$18.useMemo(() => ({
|
|
8098
8160
|
onDragStart({ active }) {
|
|
8099
8161
|
const isColumn = active.id in value;
|
|
8100
8162
|
const itemType = isColumn ? "column" : "item";
|
|
@@ -8157,7 +8219,7 @@ function KanbanRoot(props) {
|
|
|
8157
8219
|
getColumn,
|
|
8158
8220
|
getItemValue
|
|
8159
8221
|
]);
|
|
8160
|
-
const contextValue = React$
|
|
8222
|
+
const contextValue = React$18.useMemo(() => ({
|
|
8161
8223
|
id,
|
|
8162
8224
|
items: value,
|
|
8163
8225
|
modifiers,
|
|
@@ -8202,11 +8264,11 @@ function KanbanRoot(props) {
|
|
|
8202
8264
|
})
|
|
8203
8265
|
});
|
|
8204
8266
|
}
|
|
8205
|
-
const KanbanBoardContext = React$
|
|
8267
|
+
const KanbanBoardContext = React$18.createContext(false);
|
|
8206
8268
|
function KanbanBoard(props) {
|
|
8207
8269
|
const { asChild, className, ref,...boardProps } = props;
|
|
8208
8270
|
const context = useKanbanContext(BOARD_NAME);
|
|
8209
|
-
const columns = React$
|
|
8271
|
+
const columns = React$18.useMemo(() => {
|
|
8210
8272
|
return Object.keys(context.items);
|
|
8211
8273
|
}, [context.items]);
|
|
8212
8274
|
const BoardPrimitive = asChild ? Slot : "div";
|
|
@@ -8226,9 +8288,9 @@ function KanbanBoard(props) {
|
|
|
8226
8288
|
})
|
|
8227
8289
|
});
|
|
8228
8290
|
}
|
|
8229
|
-
const KanbanColumnContext = React$
|
|
8291
|
+
const KanbanColumnContext = React$18.createContext(null);
|
|
8230
8292
|
function useKanbanColumnContext(consumerName) {
|
|
8231
|
-
const context = React$
|
|
8293
|
+
const context = React$18.useContext(KanbanColumnContext);
|
|
8232
8294
|
if (!context) throw new Error(`\`${consumerName}\` must be used within \`${COLUMN_NAME}\``);
|
|
8233
8295
|
return context;
|
|
8234
8296
|
}
|
|
@@ -8238,10 +8300,10 @@ const animateLayoutChanges = (args) => defaultAnimateLayoutChanges({
|
|
|
8238
8300
|
});
|
|
8239
8301
|
function KanbanColumn(props) {
|
|
8240
8302
|
const { value, asChild, asHandle, disabled, className, style, ref,...columnProps } = props;
|
|
8241
|
-
const id = React$
|
|
8303
|
+
const id = React$18.useId();
|
|
8242
8304
|
const context = useKanbanContext(COLUMN_NAME);
|
|
8243
|
-
const inBoard = React$
|
|
8244
|
-
const inOverlay = React$
|
|
8305
|
+
const inBoard = React$18.useContext(KanbanBoardContext);
|
|
8306
|
+
const inOverlay = React$18.useContext(KanbanOverlayContext);
|
|
8245
8307
|
if (!inBoard && !inOverlay) throw new Error(`\`${COLUMN_NAME}\` must be used within \`${BOARD_NAME}\` or \`${OVERLAY_NAME}\``);
|
|
8246
8308
|
if (value === "") throw new Error(`\`${COLUMN_NAME}\` value cannot be an empty string`);
|
|
8247
8309
|
const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging } = useSortable({
|
|
@@ -8253,7 +8315,7 @@ function KanbanColumn(props) {
|
|
|
8253
8315
|
if (disabled) return;
|
|
8254
8316
|
setNodeRef(node);
|
|
8255
8317
|
});
|
|
8256
|
-
const composedStyle = React$
|
|
8318
|
+
const composedStyle = React$18.useMemo(() => {
|
|
8257
8319
|
return {
|
|
8258
8320
|
transform: CSS.Transform.toString(transform),
|
|
8259
8321
|
transition,
|
|
@@ -8264,11 +8326,11 @@ function KanbanColumn(props) {
|
|
|
8264
8326
|
transition,
|
|
8265
8327
|
style
|
|
8266
8328
|
]);
|
|
8267
|
-
const items = React$
|
|
8329
|
+
const items = React$18.useMemo(() => {
|
|
8268
8330
|
const items$1 = context.items[value] ?? [];
|
|
8269
8331
|
return items$1.map((item) => context.getItemValue(item));
|
|
8270
8332
|
}, [context, value]);
|
|
8271
|
-
const columnContext = React$
|
|
8333
|
+
const columnContext = React$18.useMemo(() => ({
|
|
8272
8334
|
id,
|
|
8273
8335
|
attributes,
|
|
8274
8336
|
listeners,
|
|
@@ -8335,29 +8397,29 @@ function KanbanColumnHandle(props) {
|
|
|
8335
8397
|
disabled: isDisabled
|
|
8336
8398
|
});
|
|
8337
8399
|
}
|
|
8338
|
-
const KanbanItemContext = React$
|
|
8400
|
+
const KanbanItemContext = React$18.createContext(null);
|
|
8339
8401
|
function useKanbanItemContext(consumerName) {
|
|
8340
|
-
const context = React$
|
|
8341
|
-
if (!context) throw new Error(`\`${consumerName}\` must be used within \`${ITEM_NAME}\``);
|
|
8402
|
+
const context = React$18.useContext(KanbanItemContext);
|
|
8403
|
+
if (!context) throw new Error(`\`${consumerName}\` must be used within \`${ITEM_NAME$1}\``);
|
|
8342
8404
|
return context;
|
|
8343
8405
|
}
|
|
8344
8406
|
function KanbanItem(props) {
|
|
8345
8407
|
const { value, style, asHandle, asChild, disabled, className, ref,...itemProps } = props;
|
|
8346
|
-
const id = React$
|
|
8347
|
-
const context = useKanbanContext(ITEM_NAME);
|
|
8348
|
-
const inBoard = React$
|
|
8349
|
-
const inOverlay = React$
|
|
8350
|
-
if (!inBoard && !inOverlay) throw new Error(`\`${ITEM_NAME}\` must be used within \`${BOARD_NAME}\``);
|
|
8408
|
+
const id = React$18.useId();
|
|
8409
|
+
const context = useKanbanContext(ITEM_NAME$1);
|
|
8410
|
+
const inBoard = React$18.useContext(KanbanBoardContext);
|
|
8411
|
+
const inOverlay = React$18.useContext(KanbanOverlayContext);
|
|
8412
|
+
if (!inBoard && !inOverlay) throw new Error(`\`${ITEM_NAME$1}\` must be used within \`${BOARD_NAME}\``);
|
|
8351
8413
|
const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging } = useSortable({
|
|
8352
8414
|
id: value,
|
|
8353
8415
|
disabled
|
|
8354
8416
|
});
|
|
8355
|
-
if (value === "") throw new Error(`\`${ITEM_NAME}\` value cannot be an empty string`);
|
|
8417
|
+
if (value === "") throw new Error(`\`${ITEM_NAME$1}\` value cannot be an empty string`);
|
|
8356
8418
|
const composedRef = useComposedRefs(ref, (node) => {
|
|
8357
8419
|
if (disabled) return;
|
|
8358
8420
|
setNodeRef(node);
|
|
8359
8421
|
});
|
|
8360
|
-
const composedStyle = React$
|
|
8422
|
+
const composedStyle = React$18.useMemo(() => {
|
|
8361
8423
|
return {
|
|
8362
8424
|
transform: CSS.Transform.toString(transform),
|
|
8363
8425
|
transition,
|
|
@@ -8368,7 +8430,7 @@ function KanbanItem(props) {
|
|
|
8368
8430
|
transition,
|
|
8369
8431
|
style
|
|
8370
8432
|
]);
|
|
8371
|
-
const itemContext = React$
|
|
8433
|
+
const itemContext = React$18.useMemo(() => ({
|
|
8372
8434
|
id,
|
|
8373
8435
|
attributes,
|
|
8374
8436
|
listeners,
|
|
@@ -8431,13 +8493,13 @@ function KanbanItemHandle(props) {
|
|
|
8431
8493
|
disabled: isDisabled
|
|
8432
8494
|
});
|
|
8433
8495
|
}
|
|
8434
|
-
const KanbanOverlayContext = React$
|
|
8496
|
+
const KanbanOverlayContext = React$18.createContext(false);
|
|
8435
8497
|
const dropAnimation = { sideEffects: defaultDropAnimationSideEffects({ styles: { active: { opacity: "0.4" } } }) };
|
|
8436
8498
|
function KanbanOverlay(props) {
|
|
8437
8499
|
const { container: containerProp, children,...overlayProps } = props;
|
|
8438
8500
|
const context = useKanbanContext(OVERLAY_NAME);
|
|
8439
|
-
const [mounted, setMounted] = React$
|
|
8440
|
-
React$
|
|
8501
|
+
const [mounted, setMounted] = React$18.useState(false);
|
|
8502
|
+
React$18.useLayoutEffect(() => setMounted(true), []);
|
|
8441
8503
|
const container = containerProp ?? (mounted ? globalThis.document?.body : null);
|
|
8442
8504
|
if (!container) return null;
|
|
8443
8505
|
const variant = context.activeId && context.activeId in context.items ? "column" : "item";
|
|
@@ -8573,32 +8635,32 @@ const MenubarGroup = MenubarPrimitive.Group;
|
|
|
8573
8635
|
const MenubarPortal = MenubarPrimitive.Portal;
|
|
8574
8636
|
const MenubarSub = MenubarPrimitive.Sub;
|
|
8575
8637
|
const MenubarRadioGroup = MenubarPrimitive.RadioGroup;
|
|
8576
|
-
const Menubar = React$
|
|
8638
|
+
const Menubar = React$17.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(MenubarPrimitive.Root, {
|
|
8577
8639
|
ref,
|
|
8578
8640
|
className: cn("flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm", className),
|
|
8579
8641
|
...props
|
|
8580
8642
|
}));
|
|
8581
8643
|
Menubar.displayName = MenubarPrimitive.Root.displayName;
|
|
8582
|
-
const MenubarTrigger = React$
|
|
8644
|
+
const MenubarTrigger = React$17.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(MenubarPrimitive.Trigger, {
|
|
8583
8645
|
ref,
|
|
8584
8646
|
className: cn("flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground", className),
|
|
8585
8647
|
...props
|
|
8586
8648
|
}));
|
|
8587
8649
|
MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;
|
|
8588
|
-
const MenubarSubTrigger = React$
|
|
8650
|
+
const MenubarSubTrigger = React$17.forwardRef(({ className, inset, children,...props }, ref) => /* @__PURE__ */ jsxs(MenubarPrimitive.SubTrigger, {
|
|
8589
8651
|
ref,
|
|
8590
8652
|
className: cn("flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground", inset && "pl-8", className),
|
|
8591
8653
|
...props,
|
|
8592
8654
|
children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto h-4 w-4" })]
|
|
8593
8655
|
}));
|
|
8594
8656
|
MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
|
|
8595
|
-
const MenubarSubContent = React$
|
|
8657
|
+
const MenubarSubContent = React$17.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(MenubarPrimitive.SubContent, {
|
|
8596
8658
|
ref,
|
|
8597
8659
|
className: cn("z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className),
|
|
8598
8660
|
...props
|
|
8599
8661
|
}));
|
|
8600
8662
|
MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
|
|
8601
|
-
const MenubarContent = React$
|
|
8663
|
+
const MenubarContent = React$17.forwardRef(({ className, align = "start", alignOffset = -4, sideOffset = 8,...props }, ref) => /* @__PURE__ */ jsx(MenubarPrimitive.Portal, { children: /* @__PURE__ */ jsx(MenubarPrimitive.Content, {
|
|
8602
8664
|
ref,
|
|
8603
8665
|
align,
|
|
8604
8666
|
alignOffset,
|
|
@@ -8607,13 +8669,13 @@ const MenubarContent = React$10.forwardRef(({ className, align = "start", alignO
|
|
|
8607
8669
|
...props
|
|
8608
8670
|
}) }));
|
|
8609
8671
|
MenubarContent.displayName = MenubarPrimitive.Content.displayName;
|
|
8610
|
-
const MenubarItem = React$
|
|
8672
|
+
const MenubarItem = React$17.forwardRef(({ className, inset,...props }, ref) => /* @__PURE__ */ jsx(MenubarPrimitive.Item, {
|
|
8611
8673
|
ref,
|
|
8612
8674
|
className: cn("relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", inset && "pl-8", className),
|
|
8613
8675
|
...props
|
|
8614
8676
|
}));
|
|
8615
8677
|
MenubarItem.displayName = MenubarPrimitive.Item.displayName;
|
|
8616
|
-
const MenubarCheckboxItem = React$
|
|
8678
|
+
const MenubarCheckboxItem = React$17.forwardRef(({ className, children, checked,...props }, ref) => /* @__PURE__ */ jsxs(MenubarPrimitive.CheckboxItem, {
|
|
8617
8679
|
ref,
|
|
8618
8680
|
className: cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className),
|
|
8619
8681
|
checked,
|
|
@@ -8624,7 +8686,7 @@ const MenubarCheckboxItem = React$10.forwardRef(({ className, children, checked,
|
|
|
8624
8686
|
}), children]
|
|
8625
8687
|
}));
|
|
8626
8688
|
MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName;
|
|
8627
|
-
const MenubarRadioItem = React$
|
|
8689
|
+
const MenubarRadioItem = React$17.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsxs(MenubarPrimitive.RadioItem, {
|
|
8628
8690
|
ref,
|
|
8629
8691
|
className: cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className),
|
|
8630
8692
|
...props,
|
|
@@ -8634,13 +8696,13 @@ const MenubarRadioItem = React$10.forwardRef(({ className, children,...props },
|
|
|
8634
8696
|
}), children]
|
|
8635
8697
|
}));
|
|
8636
8698
|
MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName;
|
|
8637
|
-
const MenubarLabel = React$
|
|
8699
|
+
const MenubarLabel = React$17.forwardRef(({ className, inset,...props }, ref) => /* @__PURE__ */ jsx(MenubarPrimitive.Label, {
|
|
8638
8700
|
ref,
|
|
8639
8701
|
className: cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className),
|
|
8640
8702
|
...props
|
|
8641
8703
|
}));
|
|
8642
8704
|
MenubarLabel.displayName = MenubarPrimitive.Label.displayName;
|
|
8643
|
-
const MenubarSeparator = React$
|
|
8705
|
+
const MenubarSeparator = React$17.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(MenubarPrimitive.Separator, {
|
|
8644
8706
|
ref,
|
|
8645
8707
|
className: cn("-mx-1 my-1 h-px bg-muted", className),
|
|
8646
8708
|
...props
|
|
@@ -8789,13 +8851,13 @@ const Pagination = ({ className,...props }) => /* @__PURE__ */ jsx("nav", {
|
|
|
8789
8851
|
...props
|
|
8790
8852
|
});
|
|
8791
8853
|
Pagination.displayName = "Pagination";
|
|
8792
|
-
const PaginationContent = React$
|
|
8854
|
+
const PaginationContent = React$16.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("ul", {
|
|
8793
8855
|
ref,
|
|
8794
8856
|
className: cn("flex flex-row items-center gap-1", className),
|
|
8795
8857
|
...props
|
|
8796
8858
|
}));
|
|
8797
8859
|
PaginationContent.displayName = "PaginationContent";
|
|
8798
|
-
const PaginationItem = React$
|
|
8860
|
+
const PaginationItem = React$16.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("li", {
|
|
8799
8861
|
ref,
|
|
8800
8862
|
className: cn("", className),
|
|
8801
8863
|
...props
|
|
@@ -8917,7 +8979,7 @@ const ResizableHandle = ({ withHandle, className,...props }) => /* @__PURE__ */
|
|
|
8917
8979
|
|
|
8918
8980
|
//#endregion
|
|
8919
8981
|
//#region src/scroll-area/scroll-area.tsx
|
|
8920
|
-
const ScrollArea = React$
|
|
8982
|
+
const ScrollArea = React$15.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsxs(ScrollAreaPrimitive.Root, {
|
|
8921
8983
|
ref,
|
|
8922
8984
|
className: cn("relative overflow-hidden", className),
|
|
8923
8985
|
...props,
|
|
@@ -8931,7 +8993,7 @@ const ScrollArea = React$8.forwardRef(({ className, children,...props }, ref) =>
|
|
|
8931
8993
|
]
|
|
8932
8994
|
}));
|
|
8933
8995
|
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
|
|
8934
|
-
const ScrollBar = React$
|
|
8996
|
+
const ScrollBar = React$15.forwardRef(({ className, orientation = "vertical",...props }, ref) => /* @__PURE__ */ jsx(ScrollAreaPrimitive.ScrollAreaScrollbar, {
|
|
8935
8997
|
ref,
|
|
8936
8998
|
orientation,
|
|
8937
8999
|
className: cn("flex touch-none select-none transition-colors", orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]", orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]", className),
|
|
@@ -8946,7 +9008,7 @@ const Sheet = SheetPrimitive.Root;
|
|
|
8946
9008
|
const SheetTrigger = SheetPrimitive.Trigger;
|
|
8947
9009
|
const SheetClose = SheetPrimitive.Close;
|
|
8948
9010
|
const SheetPortal = SheetPrimitive.Portal;
|
|
8949
|
-
const SheetOverlay = React$
|
|
9011
|
+
const SheetOverlay = React$14.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(SheetPrimitive.Overlay, {
|
|
8950
9012
|
className: cn("fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className),
|
|
8951
9013
|
...props,
|
|
8952
9014
|
ref
|
|
@@ -8961,7 +9023,7 @@ const sheetVariants = cva("fixed z-50 gap-4 bg-background p-6 shadow-lg transiti
|
|
|
8961
9023
|
} },
|
|
8962
9024
|
defaultVariants: { side: "right" }
|
|
8963
9025
|
});
|
|
8964
|
-
const SheetContent = React$
|
|
9026
|
+
const SheetContent = React$14.forwardRef(({ side = "right", className, children, __e2e_test_id__,...props }, ref) => /* @__PURE__ */ jsxs(SheetPortal, { children: [/* @__PURE__ */ jsx(SheetOverlay, {}), /* @__PURE__ */ jsxs(SheetPrimitive.Content, {
|
|
8965
9027
|
ref,
|
|
8966
9028
|
className: cn(sheetVariants({ side }), className),
|
|
8967
9029
|
"data-test-id": __e2e_test_id__,
|
|
@@ -8986,13 +9048,13 @@ const SheetFooter = ({ className,...props }) => /* @__PURE__ */ jsx("div", {
|
|
|
8986
9048
|
...props
|
|
8987
9049
|
});
|
|
8988
9050
|
SheetFooter.displayName = "SheetFooter";
|
|
8989
|
-
const SheetTitle = React$
|
|
9051
|
+
const SheetTitle = React$14.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(SheetPrimitive.Title, {
|
|
8990
9052
|
ref,
|
|
8991
9053
|
className: cn("text-lg font-semibold text-foreground", className),
|
|
8992
9054
|
...props
|
|
8993
9055
|
}));
|
|
8994
9056
|
SheetTitle.displayName = SheetPrimitive.Title.displayName;
|
|
8995
|
-
const SheetDescription = React$
|
|
9057
|
+
const SheetDescription = React$14.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(SheetPrimitive.Description, {
|
|
8996
9058
|
ref,
|
|
8997
9059
|
className: cn("text-sm text-muted-foreground", className),
|
|
8998
9060
|
...props
|
|
@@ -9000,105 +9062,316 @@ const SheetDescription = React$7.forwardRef(({ className,...props }, ref) => /*
|
|
|
9000
9062
|
SheetDescription.displayName = SheetPrimitive.Description.displayName;
|
|
9001
9063
|
|
|
9002
9064
|
//#endregion
|
|
9003
|
-
//#region src/sidebar/sidebar.tsx
|
|
9065
|
+
//#region src/sidebar/sidebar-context-provider.tsx
|
|
9004
9066
|
const SIDEBAR_WIDTH = "16rem";
|
|
9005
9067
|
const SIDEBAR_WIDTH_MOBILE = "18rem";
|
|
9006
9068
|
const SIDEBAR_WIDTH_ICON = "3rem";
|
|
9007
9069
|
const SIDEBAR_KEYBOARD_SHORTCUT = "b";
|
|
9070
|
+
const SIDEBAR_KEYBOARD_SHORTCUT_RIGHT = ".";
|
|
9008
9071
|
const SIDEBAR_MIN_WIDTH = 200;
|
|
9009
9072
|
const SIDEBAR_MAX_WIDTH = 600;
|
|
9010
|
-
|
|
9011
|
-
|
|
9012
|
-
|
|
9013
|
-
|
|
9014
|
-
|
|
9015
|
-
|
|
9073
|
+
/**
|
|
9074
|
+
* Internal store context. Exported for use by `Sidebar` component in the same
|
|
9075
|
+
* package to build per-sidebar resize contexts.
|
|
9076
|
+
*/
|
|
9077
|
+
const SidebarContext = React$13.createContext(null);
|
|
9078
|
+
/**
|
|
9079
|
+
* Context that identifies which sidebar a component belongs to.
|
|
9080
|
+
* Set by `<Sidebar sidebarId="...">`, consumed by `useSidebar()`.
|
|
9081
|
+
*/
|
|
9082
|
+
const SidebarIdContext = React$13.createContext("default");
|
|
9083
|
+
/**
|
|
9084
|
+
* Returns the state and controls for a specific sidebar.
|
|
9085
|
+
*
|
|
9086
|
+
* @param sidebarId - Optional explicit sidebar ID. Falls back to the nearest
|
|
9087
|
+
* `SidebarIdContext` (set by the parent `<Sidebar>`), then to `"default"`.
|
|
9088
|
+
*/
|
|
9089
|
+
function useSidebar(sidebarId) {
|
|
9090
|
+
const store = React$13.useContext(SidebarContext);
|
|
9091
|
+
const ctxId = React$13.useContext(SidebarIdContext);
|
|
9092
|
+
const id = sidebarId ?? ctxId;
|
|
9093
|
+
if (!store) throw new Error("useSidebar must be used within a SidebarProvider.");
|
|
9094
|
+
const open = store.openStates[id] ?? store.defaultOpen;
|
|
9095
|
+
const openMobile = store.mobileStates[id] ?? false;
|
|
9096
|
+
const width = store.widthStates[id];
|
|
9097
|
+
const { isMobile, isResizing } = store;
|
|
9098
|
+
const registry = store.sidebarRegistry[id];
|
|
9099
|
+
const minWidth = registry?.minWidth ?? store.providerMinWidth;
|
|
9100
|
+
const maxWidth = registry?.maxWidth ?? store.providerMaxWidth;
|
|
9101
|
+
const setOpen = React$13.useCallback((value) => store.setOpen(id, value), [store.setOpen, id]);
|
|
9102
|
+
const setOpenMobile = React$13.useCallback((value) => store.setOpenMobile(id, value), [store.setOpenMobile, id]);
|
|
9103
|
+
const setWidth = React$13.useCallback((value) => store.setWidth(id, value), [store.setWidth, id]);
|
|
9104
|
+
const toggleSidebar = React$13.useCallback(() => {
|
|
9105
|
+
if (store.isMobile) store.setOpenMobile(id, !(store.mobileStates[id] ?? false));
|
|
9106
|
+
else store.setOpen(id, !(store.openStates[id] ?? store.defaultOpen));
|
|
9107
|
+
}, [store, id]);
|
|
9108
|
+
const state = open ? "expanded" : "collapsed";
|
|
9109
|
+
return React$13.useMemo(() => ({
|
|
9110
|
+
state,
|
|
9111
|
+
open,
|
|
9112
|
+
setOpen,
|
|
9113
|
+
openMobile,
|
|
9114
|
+
setOpenMobile,
|
|
9115
|
+
isMobile,
|
|
9116
|
+
toggleSidebar,
|
|
9117
|
+
width,
|
|
9118
|
+
setWidth,
|
|
9119
|
+
isResizing,
|
|
9120
|
+
minWidth,
|
|
9121
|
+
maxWidth
|
|
9122
|
+
}), [
|
|
9123
|
+
state,
|
|
9124
|
+
open,
|
|
9125
|
+
setOpen,
|
|
9126
|
+
openMobile,
|
|
9127
|
+
setOpenMobile,
|
|
9128
|
+
isMobile,
|
|
9129
|
+
toggleSidebar,
|
|
9130
|
+
width,
|
|
9131
|
+
setWidth,
|
|
9132
|
+
isResizing,
|
|
9133
|
+
minWidth,
|
|
9134
|
+
maxWidth
|
|
9135
|
+
]);
|
|
9016
9136
|
}
|
|
9017
|
-
|
|
9137
|
+
/**
|
|
9138
|
+
* Returns a list of all registered sidebars with their IDs and sides.
|
|
9139
|
+
*/
|
|
9140
|
+
function useRegisteredSidebars() {
|
|
9141
|
+
const store = React$13.useContext(SidebarContext);
|
|
9142
|
+
if (!store) throw new Error("useRegisteredSidebars must be used within a SidebarProvider.");
|
|
9143
|
+
return React$13.useMemo(() => Object.entries(store.sidebarRegistry).map(([sidebarId, entry]) => ({
|
|
9144
|
+
sidebarId,
|
|
9145
|
+
side: entry.side
|
|
9146
|
+
})), [store.sidebarRegistry]);
|
|
9147
|
+
}
|
|
9148
|
+
function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, width: widthProp, onWidthChange, minWidth = SIDEBAR_MIN_WIDTH, maxWidth = SIDEBAR_MAX_WIDTH, storageKey, defaultOpenSidebars, defaultWidths, keyboardShortcuts, className, style, children,...props }) {
|
|
9018
9149
|
const isMobile = useIsMobile();
|
|
9019
|
-
const [
|
|
9020
|
-
const
|
|
9021
|
-
|
|
9022
|
-
|
|
9023
|
-
|
|
9024
|
-
|
|
9025
|
-
|
|
9026
|
-
|
|
9027
|
-
|
|
9028
|
-
|
|
9029
|
-
|
|
9150
|
+
const [isResizing, setIsResizing] = React$13.useState(false);
|
|
9151
|
+
const storedRef = React$13.useRef(null);
|
|
9152
|
+
if (storedRef.current === null && storageKey) try {
|
|
9153
|
+
storedRef.current = JSON.parse(localStorage.getItem(storageKey) ?? "{}");
|
|
9154
|
+
} catch {
|
|
9155
|
+
storedRef.current = {};
|
|
9156
|
+
}
|
|
9157
|
+
const [openStates, setOpenStates] = React$13.useState(() => {
|
|
9158
|
+
const states = { default: defaultOpen };
|
|
9159
|
+
if (defaultOpenSidebars) Object.assign(states, defaultOpenSidebars);
|
|
9160
|
+
if (storedRef.current) {
|
|
9161
|
+
for (const [id, data] of Object.entries(storedRef.current)) if (data && typeof data === "object" && "open" in data) states[id] = data.open;
|
|
9162
|
+
}
|
|
9163
|
+
return states;
|
|
9164
|
+
});
|
|
9165
|
+
const [mobileStates, setMobileStates] = React$13.useState({});
|
|
9166
|
+
React$13.useEffect(() => {
|
|
9167
|
+
if (openProp !== void 0) setOpenStates((prev) => prev["default"] === openProp ? prev : {
|
|
9168
|
+
...prev,
|
|
9169
|
+
default: openProp
|
|
9170
|
+
});
|
|
9171
|
+
}, [openProp]);
|
|
9172
|
+
const effectiveOpenStates = React$13.useMemo(() => {
|
|
9173
|
+
if (openProp !== void 0) return {
|
|
9174
|
+
...openStates,
|
|
9175
|
+
default: openProp
|
|
9176
|
+
};
|
|
9177
|
+
return openStates;
|
|
9178
|
+
}, [openStates, openProp]);
|
|
9179
|
+
const [widthStates, setWidthStates] = React$13.useState(() => {
|
|
9180
|
+
const states = {};
|
|
9181
|
+
if (widthProp !== void 0) states["default"] = widthProp;
|
|
9182
|
+
if (defaultWidths) Object.assign(states, defaultWidths);
|
|
9183
|
+
if (storedRef.current) {
|
|
9184
|
+
for (const [id, data] of Object.entries(storedRef.current)) if (data && typeof data === "object" && typeof data.width === "number") states[id] = data.width;
|
|
9185
|
+
}
|
|
9186
|
+
return states;
|
|
9187
|
+
});
|
|
9188
|
+
React$13.useEffect(() => {
|
|
9189
|
+
if (widthProp !== void 0) setWidthStates((prev) => prev["default"] === widthProp ? prev : {
|
|
9190
|
+
...prev,
|
|
9191
|
+
default: widthProp
|
|
9192
|
+
});
|
|
9193
|
+
}, [widthProp]);
|
|
9194
|
+
const effectiveWidthStates = React$13.useMemo(() => {
|
|
9195
|
+
if (widthProp !== void 0) return {
|
|
9196
|
+
...widthStates,
|
|
9197
|
+
default: widthProp
|
|
9198
|
+
};
|
|
9199
|
+
return widthStates;
|
|
9200
|
+
}, [widthStates, widthProp]);
|
|
9201
|
+
React$13.useEffect(() => {
|
|
9202
|
+
if (!storageKey) return;
|
|
9203
|
+
const toStore = {};
|
|
9204
|
+
const allIds = new Set([...Object.keys(openStates), ...Object.keys(widthStates)]);
|
|
9205
|
+
for (const id of allIds) toStore[id] = {
|
|
9206
|
+
open: openStates[id] ?? defaultOpen,
|
|
9207
|
+
...widthStates[id] === void 0 ? {} : { width: widthStates[id] }
|
|
9208
|
+
};
|
|
9209
|
+
localStorage.setItem(storageKey, JSON.stringify(toStore));
|
|
9030
9210
|
}, [
|
|
9031
|
-
|
|
9032
|
-
|
|
9033
|
-
|
|
9211
|
+
storageKey,
|
|
9212
|
+
openStates,
|
|
9213
|
+
widthStates,
|
|
9214
|
+
defaultOpen
|
|
9034
9215
|
]);
|
|
9035
|
-
React$
|
|
9216
|
+
const setOpen = React$13.useCallback((id, open) => {
|
|
9217
|
+
if (id === "default" && setOpenProp) setOpenProp(open);
|
|
9218
|
+
setOpenStates((prev) => ({
|
|
9219
|
+
...prev,
|
|
9220
|
+
[id]: open
|
|
9221
|
+
}));
|
|
9222
|
+
}, [setOpenProp]);
|
|
9223
|
+
const setOpenMobile = React$13.useCallback((id, open) => {
|
|
9224
|
+
setMobileStates((prev) => ({
|
|
9225
|
+
...prev,
|
|
9226
|
+
[id]: open
|
|
9227
|
+
}));
|
|
9228
|
+
}, []);
|
|
9229
|
+
const setWidth = React$13.useCallback((id, width) => {
|
|
9230
|
+
if (id === "default" && onWidthChange) onWidthChange(width);
|
|
9231
|
+
setWidthStates((prev) => ({
|
|
9232
|
+
...prev,
|
|
9233
|
+
[id]: width
|
|
9234
|
+
}));
|
|
9235
|
+
}, [onWidthChange]);
|
|
9236
|
+
const [sidebarRegistry, setSidebarRegistry] = React$13.useState({});
|
|
9237
|
+
const registerSidebar = React$13.useCallback((id, config) => {
|
|
9238
|
+
setSidebarRegistry((prev) => {
|
|
9239
|
+
const existing = prev[id];
|
|
9240
|
+
if (existing && existing.side === config.side && existing.minWidth === config.minWidth && existing.maxWidth === config.maxWidth) return prev;
|
|
9241
|
+
return {
|
|
9242
|
+
...prev,
|
|
9243
|
+
[id]: config
|
|
9244
|
+
};
|
|
9245
|
+
});
|
|
9246
|
+
}, []);
|
|
9247
|
+
const unregisterSidebar = React$13.useCallback((id) => {
|
|
9248
|
+
setSidebarRegistry((prev) => {
|
|
9249
|
+
const { [id]: _,...rest } = prev;
|
|
9250
|
+
return rest;
|
|
9251
|
+
});
|
|
9252
|
+
}, []);
|
|
9253
|
+
const effectiveOpenStatesRef = React$13.useRef(effectiveOpenStates);
|
|
9254
|
+
effectiveOpenStatesRef.current = effectiveOpenStates;
|
|
9255
|
+
const resolvedShortcuts = React$13.useMemo(() => {
|
|
9256
|
+
if (keyboardShortcuts === false) return {};
|
|
9257
|
+
return keyboardShortcuts ?? { [SIDEBAR_KEYBOARD_SHORTCUT]: "default" };
|
|
9258
|
+
}, [keyboardShortcuts]);
|
|
9259
|
+
React$13.useEffect(() => {
|
|
9260
|
+
const entries = Object.entries(resolvedShortcuts);
|
|
9261
|
+
if (entries.length === 0) return;
|
|
9036
9262
|
const handleKeyDown = (event) => {
|
|
9037
|
-
if (
|
|
9263
|
+
if (!(event.metaKey || event.ctrlKey)) return;
|
|
9264
|
+
for (const [key, sidebarId] of entries) if (event.key === key) {
|
|
9038
9265
|
event.preventDefault();
|
|
9039
|
-
|
|
9266
|
+
if (isMobile) setMobileStates((prev) => ({
|
|
9267
|
+
...prev,
|
|
9268
|
+
[sidebarId]: !(prev[sidebarId] ?? false)
|
|
9269
|
+
}));
|
|
9270
|
+
else {
|
|
9271
|
+
const currentOpen = effectiveOpenStatesRef.current[sidebarId] ?? defaultOpen;
|
|
9272
|
+
setOpen(sidebarId, !currentOpen);
|
|
9273
|
+
}
|
|
9274
|
+
return;
|
|
9040
9275
|
}
|
|
9041
9276
|
};
|
|
9042
9277
|
globalThis.addEventListener("keydown", handleKeyDown);
|
|
9043
9278
|
return () => globalThis.removeEventListener("keydown", handleKeyDown);
|
|
9044
|
-
}, [
|
|
9045
|
-
|
|
9046
|
-
const contextValue = React$6.useMemo(() => ({
|
|
9047
|
-
state,
|
|
9048
|
-
open,
|
|
9049
|
-
setOpen,
|
|
9279
|
+
}, [
|
|
9280
|
+
resolvedShortcuts,
|
|
9050
9281
|
isMobile,
|
|
9051
|
-
|
|
9282
|
+
defaultOpen,
|
|
9283
|
+
setOpen
|
|
9284
|
+
]);
|
|
9285
|
+
const storeValue = React$13.useMemo(() => ({
|
|
9286
|
+
openStates: effectiveOpenStates,
|
|
9287
|
+
mobileStates,
|
|
9288
|
+
widthStates: effectiveWidthStates,
|
|
9289
|
+
sidebarRegistry,
|
|
9290
|
+
setOpen,
|
|
9052
9291
|
setOpenMobile,
|
|
9053
|
-
|
|
9054
|
-
|
|
9055
|
-
|
|
9292
|
+
setWidth,
|
|
9293
|
+
registerSidebar,
|
|
9294
|
+
unregisterSidebar,
|
|
9295
|
+
isMobile,
|
|
9296
|
+
defaultOpen,
|
|
9297
|
+
isResizing,
|
|
9298
|
+
setIsResizing,
|
|
9299
|
+
providerMinWidth: minWidth,
|
|
9300
|
+
providerMaxWidth: maxWidth
|
|
9056
9301
|
}), [
|
|
9057
|
-
|
|
9058
|
-
|
|
9302
|
+
effectiveOpenStates,
|
|
9303
|
+
mobileStates,
|
|
9304
|
+
effectiveWidthStates,
|
|
9305
|
+
sidebarRegistry,
|
|
9059
9306
|
setOpen,
|
|
9060
|
-
isMobile,
|
|
9061
|
-
openMobile,
|
|
9062
9307
|
setOpenMobile,
|
|
9063
|
-
|
|
9064
|
-
|
|
9065
|
-
|
|
9308
|
+
setWidth,
|
|
9309
|
+
registerSidebar,
|
|
9310
|
+
unregisterSidebar,
|
|
9311
|
+
isMobile,
|
|
9312
|
+
defaultOpen,
|
|
9313
|
+
isResizing,
|
|
9314
|
+
minWidth,
|
|
9315
|
+
maxWidth
|
|
9066
9316
|
]);
|
|
9067
|
-
const
|
|
9317
|
+
const defaultWidth = effectiveWidthStates["default"];
|
|
9318
|
+
const sidebarWidthValue = defaultWidth ? `${defaultWidth}px` : SIDEBAR_WIDTH;
|
|
9068
9319
|
return /* @__PURE__ */ jsx(SidebarContext.Provider, {
|
|
9069
|
-
value:
|
|
9070
|
-
children: /* @__PURE__ */ jsx(
|
|
9071
|
-
|
|
9072
|
-
|
|
9073
|
-
|
|
9074
|
-
|
|
9075
|
-
|
|
9076
|
-
|
|
9077
|
-
|
|
9078
|
-
|
|
9079
|
-
|
|
9080
|
-
|
|
9081
|
-
|
|
9082
|
-
style: {
|
|
9083
|
-
"--sidebar-width": sidebarWidthValue,
|
|
9084
|
-
"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
|
|
9085
|
-
...style
|
|
9086
|
-
},
|
|
9087
|
-
className: cn("group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full", className),
|
|
9088
|
-
...props,
|
|
9089
|
-
children
|
|
9090
|
-
})
|
|
9320
|
+
value: storeValue,
|
|
9321
|
+
children: /* @__PURE__ */ jsx(TooltipProvider, {
|
|
9322
|
+
delayDuration: 0,
|
|
9323
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
9324
|
+
"data-slot": "sidebar-wrapper",
|
|
9325
|
+
style: {
|
|
9326
|
+
"--sidebar-width": sidebarWidthValue,
|
|
9327
|
+
"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
|
|
9328
|
+
...style
|
|
9329
|
+
},
|
|
9330
|
+
className: cn("group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full", className),
|
|
9331
|
+
...props,
|
|
9332
|
+
children
|
|
9091
9333
|
})
|
|
9092
9334
|
})
|
|
9093
9335
|
});
|
|
9094
9336
|
}
|
|
9095
|
-
|
|
9096
|
-
|
|
9337
|
+
|
|
9338
|
+
//#endregion
|
|
9339
|
+
//#region src/sidebar/sidebar.tsx
|
|
9340
|
+
function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas", sidebarId = "default", minWidth, maxWidth, className, children,...props }) {
|
|
9341
|
+
const { isMobile, state, openMobile, setOpenMobile, width, isResizing } = useSidebar(sidebarId);
|
|
9342
|
+
const store = React$12.useContext(SidebarContext);
|
|
9343
|
+
const storeRef = React$12.useRef(store);
|
|
9344
|
+
storeRef.current = store;
|
|
9345
|
+
const effectiveMinWidth = minWidth ?? store?.providerMinWidth ?? SIDEBAR_MIN_WIDTH;
|
|
9346
|
+
const effectiveMaxWidth = maxWidth ?? store?.providerMaxWidth ?? SIDEBAR_MAX_WIDTH;
|
|
9347
|
+
React$12.useEffect(() => {
|
|
9348
|
+
storeRef.current?.registerSidebar(sidebarId, {
|
|
9349
|
+
side,
|
|
9350
|
+
minWidth: effectiveMinWidth,
|
|
9351
|
+
maxWidth: effectiveMaxWidth
|
|
9352
|
+
});
|
|
9353
|
+
return () => storeRef.current?.unregisterSidebar(sidebarId);
|
|
9354
|
+
}, [
|
|
9355
|
+
sidebarId,
|
|
9356
|
+
side,
|
|
9357
|
+
effectiveMinWidth,
|
|
9358
|
+
effectiveMaxWidth
|
|
9359
|
+
]);
|
|
9360
|
+
const sidebarWidthValue = width ? `${width}px` : SIDEBAR_WIDTH;
|
|
9361
|
+
const sidebarStyle = {
|
|
9362
|
+
"--sidebar-width": sidebarWidthValue,
|
|
9363
|
+
"--sidebar-width-icon": SIDEBAR_WIDTH_ICON
|
|
9364
|
+
};
|
|
9365
|
+
const wrappedChildren = /* @__PURE__ */ jsx(SidebarIdContext.Provider, {
|
|
9366
|
+
value: sidebarId,
|
|
9367
|
+
children
|
|
9368
|
+
});
|
|
9097
9369
|
if (collapsible === "none") return /* @__PURE__ */ jsx("div", {
|
|
9098
9370
|
"data-slot": "sidebar",
|
|
9371
|
+
style: sidebarStyle,
|
|
9099
9372
|
className: cn("bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col", className),
|
|
9100
9373
|
...props,
|
|
9101
|
-
children
|
|
9374
|
+
children: wrappedChildren
|
|
9102
9375
|
});
|
|
9103
9376
|
if (isMobile) return /* @__PURE__ */ jsx(Sheet, {
|
|
9104
9377
|
open: openMobile,
|
|
@@ -9116,12 +9389,13 @@ function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas"
|
|
|
9116
9389
|
children: [/* @__PURE__ */ jsx(SheetTitle, { children: "Sidebar" }), /* @__PURE__ */ jsx(SheetDescription, { children: "Displays the mobile sidebar." })]
|
|
9117
9390
|
}), /* @__PURE__ */ jsx("div", {
|
|
9118
9391
|
className: "flex h-full w-full flex-col",
|
|
9119
|
-
children
|
|
9392
|
+
children: wrappedChildren
|
|
9120
9393
|
})]
|
|
9121
9394
|
})
|
|
9122
9395
|
});
|
|
9123
9396
|
return /* @__PURE__ */ jsxs("div", {
|
|
9124
9397
|
className: "group peer text-sidebar-foreground hidden md:block",
|
|
9398
|
+
style: sidebarStyle,
|
|
9125
9399
|
"data-state": state,
|
|
9126
9400
|
"data-collapsible": state === "collapsed" ? collapsible : "",
|
|
9127
9401
|
"data-variant": variant,
|
|
@@ -9145,14 +9419,19 @@ function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas"
|
|
|
9145
9419
|
"data-sidebar": "sidebar",
|
|
9146
9420
|
"data-slot": "sidebar-inner",
|
|
9147
9421
|
className: "bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm",
|
|
9148
|
-
children
|
|
9422
|
+
children: wrappedChildren
|
|
9149
9423
|
})
|
|
9150
9424
|
})]
|
|
9151
9425
|
});
|
|
9152
9426
|
}
|
|
9153
|
-
function SidebarTrigger({ className, onClick,...props }) {
|
|
9154
|
-
const { toggleSidebar } = useSidebar();
|
|
9155
|
-
|
|
9427
|
+
function SidebarTrigger({ className, onClick, sidebarId, children,...props }) {
|
|
9428
|
+
const { toggleSidebar } = useSidebar(sidebarId);
|
|
9429
|
+
const store = React$12.useContext(SidebarContext);
|
|
9430
|
+
const ctxId = React$12.useContext(SidebarIdContext);
|
|
9431
|
+
const resolvedId = sidebarId ?? ctxId;
|
|
9432
|
+
const side = store?.sidebarRegistry[resolvedId]?.side;
|
|
9433
|
+
const Icon = side === "right" ? PanelRightIcon : PanelLeftIcon;
|
|
9434
|
+
return /* @__PURE__ */ jsx(Button, {
|
|
9156
9435
|
"data-sidebar": "trigger",
|
|
9157
9436
|
"data-slot": "sidebar-trigger",
|
|
9158
9437
|
variant: "ghost",
|
|
@@ -9163,24 +9442,25 @@ function SidebarTrigger({ className, onClick,...props }) {
|
|
|
9163
9442
|
toggleSidebar();
|
|
9164
9443
|
},
|
|
9165
9444
|
...props,
|
|
9166
|
-
children: [/* @__PURE__ */ jsx(
|
|
9445
|
+
children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Icon, {}), /* @__PURE__ */ jsx("span", {
|
|
9167
9446
|
className: "sr-only",
|
|
9168
9447
|
children: "Toggle Sidebar"
|
|
9169
|
-
})]
|
|
9448
|
+
})] })
|
|
9170
9449
|
});
|
|
9171
9450
|
}
|
|
9172
9451
|
function SidebarRail({ className,...props }) {
|
|
9173
|
-
const { toggleSidebar } = useSidebar();
|
|
9174
|
-
const
|
|
9175
|
-
const startXRef = React$
|
|
9176
|
-
const hasDraggedRef = React$
|
|
9177
|
-
const
|
|
9178
|
-
const
|
|
9179
|
-
|
|
9452
|
+
const { toggleSidebar, setWidth, minWidth, maxWidth } = useSidebar();
|
|
9453
|
+
const store = React$12.useContext(SidebarContext);
|
|
9454
|
+
const startXRef = React$12.useRef(0);
|
|
9455
|
+
const hasDraggedRef = React$12.useRef(false);
|
|
9456
|
+
const sidebarId = React$12.useContext(SidebarIdContext);
|
|
9457
|
+
const isResizable = !!store?.sidebarRegistry[sidebarId];
|
|
9458
|
+
const handleMouseDown = React$12.useCallback((e) => {
|
|
9459
|
+
if (!isResizable) return;
|
|
9180
9460
|
e.preventDefault();
|
|
9181
9461
|
startXRef.current = e.clientX;
|
|
9182
9462
|
hasDraggedRef.current = false;
|
|
9183
|
-
|
|
9463
|
+
store?.setIsResizing(true);
|
|
9184
9464
|
const sidebarEl = e.target.closest("[data-slot=\"sidebar-container\"]");
|
|
9185
9465
|
const sidebarLeft = sidebarEl?.getBoundingClientRect().left ?? 0;
|
|
9186
9466
|
const side = e.target.closest("[data-side]")?.getAttribute("data-side");
|
|
@@ -9191,10 +9471,10 @@ function SidebarRail({ className,...props }) {
|
|
|
9191
9471
|
const sidebarRight = sidebarEl?.getBoundingClientRect().right ?? globalThis.innerWidth;
|
|
9192
9472
|
newWidth = sidebarRight - moveEvent.clientX;
|
|
9193
9473
|
} else newWidth = moveEvent.clientX - sidebarLeft;
|
|
9194
|
-
if (newWidth >=
|
|
9474
|
+
if (newWidth >= minWidth && newWidth <= maxWidth) setWidth(newWidth);
|
|
9195
9475
|
};
|
|
9196
9476
|
const handleMouseUp = () => {
|
|
9197
|
-
|
|
9477
|
+
store?.setIsResizing(false);
|
|
9198
9478
|
document.removeEventListener("mousemove", handleMouseMove);
|
|
9199
9479
|
document.removeEventListener("mouseup", handleMouseUp);
|
|
9200
9480
|
document.body.style.cursor = "";
|
|
@@ -9204,8 +9484,14 @@ function SidebarRail({ className,...props }) {
|
|
|
9204
9484
|
document.addEventListener("mouseup", handleMouseUp);
|
|
9205
9485
|
document.body.style.cursor = "col-resize";
|
|
9206
9486
|
document.body.style.userSelect = "none";
|
|
9207
|
-
}, [
|
|
9208
|
-
|
|
9487
|
+
}, [
|
|
9488
|
+
isResizable,
|
|
9489
|
+
store,
|
|
9490
|
+
setWidth,
|
|
9491
|
+
minWidth,
|
|
9492
|
+
maxWidth
|
|
9493
|
+
]);
|
|
9494
|
+
const handleClick = React$12.useCallback(() => {
|
|
9209
9495
|
if (hasDraggedRef.current) return;
|
|
9210
9496
|
toggleSidebar();
|
|
9211
9497
|
}, [toggleSidebar]);
|
|
@@ -9440,6 +9726,271 @@ function SidebarMenuSubButton({ asChild = false, size = "md", isActive = false,
|
|
|
9440
9726
|
});
|
|
9441
9727
|
}
|
|
9442
9728
|
|
|
9729
|
+
//#endregion
|
|
9730
|
+
//#region src/sidebar/sidebar-tab-context-provider.tsx
|
|
9731
|
+
const SidebarTabsContext = React$11.createContext(null);
|
|
9732
|
+
function SidebarTabsProvider({ children }) {
|
|
9733
|
+
const [tabsMap, setTabsMap] = React$11.useState({});
|
|
9734
|
+
const [activeTab, setActiveTabState] = React$11.useState({});
|
|
9735
|
+
const register = React$11.useCallback((side, tab) => {
|
|
9736
|
+
setTabsMap((prev) => {
|
|
9737
|
+
const next = new Map(prev[side]);
|
|
9738
|
+
next.set(tab.id, tab);
|
|
9739
|
+
return {
|
|
9740
|
+
...prev,
|
|
9741
|
+
[side]: next
|
|
9742
|
+
};
|
|
9743
|
+
});
|
|
9744
|
+
setActiveTabState((prev) => {
|
|
9745
|
+
if (prev[side] === void 0 || prev[side] === null) return {
|
|
9746
|
+
...prev,
|
|
9747
|
+
[side]: tab.id
|
|
9748
|
+
};
|
|
9749
|
+
return prev;
|
|
9750
|
+
});
|
|
9751
|
+
}, []);
|
|
9752
|
+
const unregister = React$11.useCallback((side, tabId) => {
|
|
9753
|
+
setTabsMap((prev) => {
|
|
9754
|
+
const next = new Map(prev[side]);
|
|
9755
|
+
next.delete(tabId);
|
|
9756
|
+
return {
|
|
9757
|
+
...prev,
|
|
9758
|
+
[side]: next
|
|
9759
|
+
};
|
|
9760
|
+
});
|
|
9761
|
+
setActiveTabState((prev) => {
|
|
9762
|
+
if (prev[side] === tabId) return {
|
|
9763
|
+
...prev,
|
|
9764
|
+
[side]: null
|
|
9765
|
+
};
|
|
9766
|
+
return prev;
|
|
9767
|
+
});
|
|
9768
|
+
}, []);
|
|
9769
|
+
const setActiveTab = React$11.useCallback((side, tabId) => {
|
|
9770
|
+
setActiveTabState((prev) => {
|
|
9771
|
+
if (prev[side] === tabId) return prev;
|
|
9772
|
+
return {
|
|
9773
|
+
...prev,
|
|
9774
|
+
[side]: tabId
|
|
9775
|
+
};
|
|
9776
|
+
});
|
|
9777
|
+
}, []);
|
|
9778
|
+
const sortedTabs = React$11.useMemo(() => {
|
|
9779
|
+
const sort = (map) => [...map.values()].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
|
|
9780
|
+
const result = {};
|
|
9781
|
+
for (const [side, map] of Object.entries(tabsMap)) result[side] = sort(map);
|
|
9782
|
+
return result;
|
|
9783
|
+
}, [tabsMap]);
|
|
9784
|
+
const value = React$11.useMemo(() => ({
|
|
9785
|
+
tabs: sortedTabs,
|
|
9786
|
+
activeTab,
|
|
9787
|
+
register,
|
|
9788
|
+
unregister,
|
|
9789
|
+
setActiveTab
|
|
9790
|
+
}), [
|
|
9791
|
+
sortedTabs,
|
|
9792
|
+
activeTab,
|
|
9793
|
+
register,
|
|
9794
|
+
unregister,
|
|
9795
|
+
setActiveTab
|
|
9796
|
+
]);
|
|
9797
|
+
return /* @__PURE__ */ jsx(SidebarTabsContext.Provider, {
|
|
9798
|
+
value,
|
|
9799
|
+
children
|
|
9800
|
+
});
|
|
9801
|
+
}
|
|
9802
|
+
function useSidebarTabs(side) {
|
|
9803
|
+
const ctx = React$11.useContext(SidebarTabsContext);
|
|
9804
|
+
if (!ctx) throw new Error("useSidebarTabs must be used within a SidebarTabsProvider.");
|
|
9805
|
+
const boundSetActiveTab = React$11.useCallback((tabId) => {
|
|
9806
|
+
if (side) ctx.setActiveTab(side, tabId);
|
|
9807
|
+
}, [ctx.setActiveTab, side]);
|
|
9808
|
+
const boundResult = React$11.useMemo(() => side ? {
|
|
9809
|
+
tabs: ctx.tabs[side] ?? [],
|
|
9810
|
+
activeTab: ctx.activeTab[side] ?? null,
|
|
9811
|
+
setActiveTab: boundSetActiveTab
|
|
9812
|
+
} : null, [
|
|
9813
|
+
side,
|
|
9814
|
+
ctx.tabs,
|
|
9815
|
+
ctx.activeTab,
|
|
9816
|
+
boundSetActiveTab
|
|
9817
|
+
]);
|
|
9818
|
+
if (side) return boundResult;
|
|
9819
|
+
return ctx;
|
|
9820
|
+
}
|
|
9821
|
+
|
|
9822
|
+
//#endregion
|
|
9823
|
+
//#region src/sidebar/sidebar-tab.tsx
|
|
9824
|
+
function SidebarTab({ side, id, icon, label, render, order }) {
|
|
9825
|
+
const ctx = React$10.useContext(SidebarTabsContext);
|
|
9826
|
+
if (!ctx) throw new Error("SidebarTab must be used within a SidebarTabsProvider.");
|
|
9827
|
+
const { register, unregister } = ctx;
|
|
9828
|
+
const renderRef = React$10.useRef(render);
|
|
9829
|
+
renderRef.current = render;
|
|
9830
|
+
const iconRef = React$10.useRef(icon);
|
|
9831
|
+
iconRef.current = icon;
|
|
9832
|
+
const stableRender = React$10.useCallback(() => renderRef.current(), []);
|
|
9833
|
+
React$10.useEffect(() => {
|
|
9834
|
+
register(side, {
|
|
9835
|
+
id,
|
|
9836
|
+
icon: iconRef.current,
|
|
9837
|
+
label,
|
|
9838
|
+
render: stableRender,
|
|
9839
|
+
order
|
|
9840
|
+
});
|
|
9841
|
+
return () => unregister(side, id);
|
|
9842
|
+
}, [
|
|
9843
|
+
side,
|
|
9844
|
+
id,
|
|
9845
|
+
label,
|
|
9846
|
+
order,
|
|
9847
|
+
register,
|
|
9848
|
+
unregister,
|
|
9849
|
+
stableRender
|
|
9850
|
+
]);
|
|
9851
|
+
return null;
|
|
9852
|
+
}
|
|
9853
|
+
function DynamicTabbedSidebar({ side, orientation = "horizontal", collapsible = "offcanvas", className,...sidebarProps }) {
|
|
9854
|
+
const ctx = React$10.useContext(SidebarTabsContext);
|
|
9855
|
+
if (!ctx) throw new Error("DynamicTabbedSidebar must be used within a SidebarTabsProvider.");
|
|
9856
|
+
const { setActiveTab } = ctx;
|
|
9857
|
+
const tabs = ctx.tabs[side] ?? [];
|
|
9858
|
+
const activeTabId = ctx.activeTab[side] ?? null;
|
|
9859
|
+
const activeTab = tabs.find((t) => t.id === activeTabId);
|
|
9860
|
+
React$10.useEffect(() => {
|
|
9861
|
+
if (tabs.length > 0 && tabs[0] && !activeTab) setActiveTab(side, tabs[0].id);
|
|
9862
|
+
}, [
|
|
9863
|
+
tabs,
|
|
9864
|
+
activeTab,
|
|
9865
|
+
side,
|
|
9866
|
+
setActiveTab
|
|
9867
|
+
]);
|
|
9868
|
+
const isVertical = orientation === "vertical";
|
|
9869
|
+
const effectiveCollapsible = isVertical && collapsible === "offcanvas" ? "icon" : collapsible;
|
|
9870
|
+
return /* @__PURE__ */ jsxs(Sidebar, {
|
|
9871
|
+
side,
|
|
9872
|
+
sidebarId: side,
|
|
9873
|
+
collapsible: effectiveCollapsible,
|
|
9874
|
+
className,
|
|
9875
|
+
...sidebarProps,
|
|
9876
|
+
children: [/* @__PURE__ */ jsx(TabbedSidebarContent, {
|
|
9877
|
+
side,
|
|
9878
|
+
tabs,
|
|
9879
|
+
activeTabId,
|
|
9880
|
+
activeTab,
|
|
9881
|
+
isVertical,
|
|
9882
|
+
collapsible: effectiveCollapsible
|
|
9883
|
+
}), /* @__PURE__ */ jsx(SidebarRail, {})]
|
|
9884
|
+
});
|
|
9885
|
+
}
|
|
9886
|
+
function TabbedSidebarContent({ side, tabs, activeTabId, activeTab, isVertical, collapsible }) {
|
|
9887
|
+
const { state } = useSidebar(side);
|
|
9888
|
+
const isCollapsed = state === "collapsed";
|
|
9889
|
+
const isIconCollapsible = collapsible === "icon";
|
|
9890
|
+
if (isCollapsed && isIconCollapsible) return /* @__PURE__ */ jsx("div", {
|
|
9891
|
+
className: "flex h-full flex-col",
|
|
9892
|
+
children: /* @__PURE__ */ jsx(VerticalTabBar, {
|
|
9893
|
+
side,
|
|
9894
|
+
tabs,
|
|
9895
|
+
activeTabId
|
|
9896
|
+
})
|
|
9897
|
+
});
|
|
9898
|
+
if (isVertical) return /* @__PURE__ */ jsxs("div", {
|
|
9899
|
+
className: "flex h-full flex-row",
|
|
9900
|
+
children: [/* @__PURE__ */ jsx(VerticalTabBar, {
|
|
9901
|
+
side,
|
|
9902
|
+
tabs,
|
|
9903
|
+
activeTabId
|
|
9904
|
+
}), /* @__PURE__ */ jsx("div", {
|
|
9905
|
+
className: "flex min-w-0 flex-1 flex-col",
|
|
9906
|
+
children: /* @__PURE__ */ jsx(SidebarContent, { children: activeTab?.render() })
|
|
9907
|
+
})]
|
|
9908
|
+
});
|
|
9909
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
9910
|
+
className: "flex h-full flex-col",
|
|
9911
|
+
children: [
|
|
9912
|
+
/* @__PURE__ */ jsx(HorizontalTabBar, {
|
|
9913
|
+
side,
|
|
9914
|
+
tabs,
|
|
9915
|
+
activeTabId
|
|
9916
|
+
}),
|
|
9917
|
+
tabs.length > 0 && /* @__PURE__ */ jsx(SidebarSeparator, {}),
|
|
9918
|
+
/* @__PURE__ */ jsx("div", {
|
|
9919
|
+
className: "flex min-w-0 flex-1 flex-col",
|
|
9920
|
+
children: /* @__PURE__ */ jsx(SidebarContent, { children: activeTab?.render() })
|
|
9921
|
+
})
|
|
9922
|
+
]
|
|
9923
|
+
});
|
|
9924
|
+
}
|
|
9925
|
+
function HorizontalTabBar({ side, tabs, activeTabId }) {
|
|
9926
|
+
const ctx = React$10.useContext(SidebarTabsContext);
|
|
9927
|
+
const { state, toggleSidebar } = useSidebar(side);
|
|
9928
|
+
if (tabs.length === 0) return null;
|
|
9929
|
+
const handleTabClick = (tabId) => {
|
|
9930
|
+
if (state === "collapsed") {
|
|
9931
|
+
ctx.setActiveTab(side, tabId);
|
|
9932
|
+
toggleSidebar();
|
|
9933
|
+
} else if (tabId === activeTabId) toggleSidebar();
|
|
9934
|
+
else ctx.setActiveTab(side, tabId);
|
|
9935
|
+
};
|
|
9936
|
+
return /* @__PURE__ */ jsx(SidebarHeader, { children: /* @__PURE__ */ jsx("div", {
|
|
9937
|
+
className: "flex w-full items-center gap-0.5 rounded-md bg-muted p-1",
|
|
9938
|
+
role: "tablist",
|
|
9939
|
+
children: tabs.map((tab) => {
|
|
9940
|
+
const Icon = tab.icon;
|
|
9941
|
+
const isActive = tab.id === activeTabId;
|
|
9942
|
+
return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
|
|
9943
|
+
asChild: true,
|
|
9944
|
+
children: /* @__PURE__ */ jsx("button", {
|
|
9945
|
+
role: "tab",
|
|
9946
|
+
"aria-selected": isActive,
|
|
9947
|
+
className: cn("flex flex-1 items-center justify-center rounded-sm p-1.5 transition-colors", isActive ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"),
|
|
9948
|
+
onClick: () => handleTabClick(tab.id),
|
|
9949
|
+
children: /* @__PURE__ */ jsx(Icon, { className: "size-4" })
|
|
9950
|
+
})
|
|
9951
|
+
}), /* @__PURE__ */ jsx(TooltipContent, {
|
|
9952
|
+
side: "bottom",
|
|
9953
|
+
children: tab.label
|
|
9954
|
+
})] }, tab.id);
|
|
9955
|
+
})
|
|
9956
|
+
}) });
|
|
9957
|
+
}
|
|
9958
|
+
function VerticalTabBar({ side, tabs, activeTabId }) {
|
|
9959
|
+
const ctx = React$10.useContext(SidebarTabsContext);
|
|
9960
|
+
const { state, toggleSidebar } = useSidebar(side);
|
|
9961
|
+
const isCollapsed = state === "collapsed";
|
|
9962
|
+
if (tabs.length === 0) return null;
|
|
9963
|
+
const handleTabClick = (tabId) => {
|
|
9964
|
+
if (isCollapsed) {
|
|
9965
|
+
ctx.setActiveTab(side, tabId);
|
|
9966
|
+
toggleSidebar();
|
|
9967
|
+
} else if (tabId === activeTabId) toggleSidebar();
|
|
9968
|
+
else ctx.setActiveTab(side, tabId);
|
|
9969
|
+
};
|
|
9970
|
+
return /* @__PURE__ */ jsx("div", {
|
|
9971
|
+
className: "flex flex-col gap-1 border-r border-sidebar-border p-1",
|
|
9972
|
+
role: "tablist",
|
|
9973
|
+
children: tabs.map((tab) => {
|
|
9974
|
+
const Icon = tab.icon;
|
|
9975
|
+
const isActive = tab.id === activeTabId;
|
|
9976
|
+
return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
|
|
9977
|
+
asChild: true,
|
|
9978
|
+
children: /* @__PURE__ */ jsx("button", {
|
|
9979
|
+
role: "tab",
|
|
9980
|
+
"aria-selected": isActive,
|
|
9981
|
+
className: cn("size-9 flex items-center justify-center rounded-md transition-colors", isActive ? "bg-sidebar-accent text-sidebar-accent-foreground" : "text-muted-foreground hover:text-foreground hover:bg-sidebar-accent/50"),
|
|
9982
|
+
onClick: () => handleTabClick(tab.id),
|
|
9983
|
+
children: /* @__PURE__ */ jsx(Icon, { className: "size-4" })
|
|
9984
|
+
})
|
|
9985
|
+
}), /* @__PURE__ */ jsx(TooltipContent, {
|
|
9986
|
+
side: side === "left" ? "right" : "left",
|
|
9987
|
+
hidden: state === "expanded",
|
|
9988
|
+
children: tab.label
|
|
9989
|
+
})] }, tab.id);
|
|
9990
|
+
})
|
|
9991
|
+
});
|
|
9992
|
+
}
|
|
9993
|
+
|
|
9443
9994
|
//#endregion
|
|
9444
9995
|
//#region src/slicer/slicer.tsx
|
|
9445
9996
|
/**
|
|
@@ -9722,7 +10273,7 @@ const knobVariants = cva("bg-background block size-4 shrink-0 rounded-full borde
|
|
|
9722
10273
|
defaultVariants: { knobVariant: "default" }
|
|
9723
10274
|
});
|
|
9724
10275
|
function Slider({ className, defaultValue, value, min = 0, max = 100, sliderVariant, knobVariant, knobSize,...props }) {
|
|
9725
|
-
const _values = React$
|
|
10276
|
+
const _values = React$9.useMemo(() => {
|
|
9726
10277
|
if (Array.isArray(value)) return value;
|
|
9727
10278
|
else if (Array.isArray(defaultValue)) return defaultValue;
|
|
9728
10279
|
return [min, max];
|
|
@@ -9755,6 +10306,785 @@ function Slider({ className, defaultValue, value, min = 0, max = 100, sliderVari
|
|
|
9755
10306
|
});
|
|
9756
10307
|
}
|
|
9757
10308
|
|
|
10309
|
+
//#endregion
|
|
10310
|
+
//#region src/hooks/use-isomorphic-layout-effect.ts
|
|
10311
|
+
const useIsomorphicLayoutEffect = typeof window !== "undefined" ? React$8.useLayoutEffect : React$8.useEffect;
|
|
10312
|
+
|
|
10313
|
+
//#endregion
|
|
10314
|
+
//#region src/hooks/use-as-ref.ts
|
|
10315
|
+
function useAsRef(props) {
|
|
10316
|
+
const ref = React$7.useRef(props);
|
|
10317
|
+
useIsomorphicLayoutEffect(() => {
|
|
10318
|
+
ref.current = props;
|
|
10319
|
+
});
|
|
10320
|
+
return ref;
|
|
10321
|
+
}
|
|
10322
|
+
|
|
10323
|
+
//#endregion
|
|
10324
|
+
//#region src/hooks/use-lazy-ref.ts
|
|
10325
|
+
function useLazyRef(fn) {
|
|
10326
|
+
const ref = React$6.useRef(null);
|
|
10327
|
+
if (ref.current === null) ref.current = fn();
|
|
10328
|
+
return ref;
|
|
10329
|
+
}
|
|
10330
|
+
|
|
10331
|
+
//#endregion
|
|
10332
|
+
//#region src/stepper/stepper.tsx
|
|
10333
|
+
const ROOT_NAME = "Stepper";
|
|
10334
|
+
const LIST_NAME = "StepperList";
|
|
10335
|
+
const ITEM_NAME = "StepperItem";
|
|
10336
|
+
const TRIGGER_NAME = "StepperTrigger";
|
|
10337
|
+
const INDICATOR_NAME = "StepperIndicator";
|
|
10338
|
+
const SEPARATOR_NAME = "StepperSeparator";
|
|
10339
|
+
const TITLE_NAME = "StepperTitle";
|
|
10340
|
+
const DESCRIPTION_NAME = "StepperDescription";
|
|
10341
|
+
const CONTENT_NAME = "StepperContent";
|
|
10342
|
+
const PREV_NAME = "StepperPrev";
|
|
10343
|
+
const NEXT_NAME = "StepperNext";
|
|
10344
|
+
const ENTRY_FOCUS = "stepperFocusGroup.onEntryFocus";
|
|
10345
|
+
const EVENT_OPTIONS = {
|
|
10346
|
+
bubbles: false,
|
|
10347
|
+
cancelable: true
|
|
10348
|
+
};
|
|
10349
|
+
const ARROW_KEYS = [
|
|
10350
|
+
"ArrowUp",
|
|
10351
|
+
"ArrowDown",
|
|
10352
|
+
"ArrowLeft",
|
|
10353
|
+
"ArrowRight"
|
|
10354
|
+
];
|
|
10355
|
+
function getId(id, variant, value) {
|
|
10356
|
+
return `${id}-${variant}-${value}`;
|
|
10357
|
+
}
|
|
10358
|
+
const MAP_KEY_TO_FOCUS_INTENT = {
|
|
10359
|
+
ArrowLeft: "prev",
|
|
10360
|
+
ArrowUp: "prev",
|
|
10361
|
+
ArrowRight: "next",
|
|
10362
|
+
ArrowDown: "next",
|
|
10363
|
+
PageUp: "first",
|
|
10364
|
+
Home: "first",
|
|
10365
|
+
PageDown: "last",
|
|
10366
|
+
End: "last"
|
|
10367
|
+
};
|
|
10368
|
+
function getDirectionAwareKey(key, dir) {
|
|
10369
|
+
if (dir !== "rtl") return key;
|
|
10370
|
+
return key === "ArrowLeft" ? "ArrowRight" : key === "ArrowRight" ? "ArrowLeft" : key;
|
|
10371
|
+
}
|
|
10372
|
+
function getFocusIntent(event, dir, orientation) {
|
|
10373
|
+
const key = getDirectionAwareKey(event.key, dir);
|
|
10374
|
+
if (orientation === "horizontal" && ["ArrowUp", "ArrowDown"].includes(key)) return void 0;
|
|
10375
|
+
if (orientation === "vertical" && ["ArrowLeft", "ArrowRight"].includes(key)) return void 0;
|
|
10376
|
+
return MAP_KEY_TO_FOCUS_INTENT[key];
|
|
10377
|
+
}
|
|
10378
|
+
function focusFirst(candidates, preventScroll = false) {
|
|
10379
|
+
const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
|
|
10380
|
+
for (const candidateRef of candidates) {
|
|
10381
|
+
const candidate = candidateRef.current;
|
|
10382
|
+
if (!candidate) continue;
|
|
10383
|
+
if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;
|
|
10384
|
+
candidate.focus({ preventScroll });
|
|
10385
|
+
if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return;
|
|
10386
|
+
}
|
|
10387
|
+
}
|
|
10388
|
+
function wrapArray(array, startIndex) {
|
|
10389
|
+
return array.map((_, index) => array[(startIndex + index) % array.length]);
|
|
10390
|
+
}
|
|
10391
|
+
function getDataState(value, itemValue, stepState, steps, variant = "item") {
|
|
10392
|
+
const stepKeys = Array.from(steps.keys());
|
|
10393
|
+
const currentIndex = stepKeys.indexOf(itemValue);
|
|
10394
|
+
if (stepState?.completed) return "completed";
|
|
10395
|
+
if (value === itemValue) return variant === "separator" ? "inactive" : "active";
|
|
10396
|
+
if (value) {
|
|
10397
|
+
const activeIndex = stepKeys.indexOf(value);
|
|
10398
|
+
if (activeIndex > currentIndex) return "completed";
|
|
10399
|
+
}
|
|
10400
|
+
return "inactive";
|
|
10401
|
+
}
|
|
10402
|
+
const StoreContext = React$5.createContext(null);
|
|
10403
|
+
function useStoreContext(consumerName) {
|
|
10404
|
+
const context = React$5.useContext(StoreContext);
|
|
10405
|
+
if (!context) throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``);
|
|
10406
|
+
return context;
|
|
10407
|
+
}
|
|
10408
|
+
function useStore(selector) {
|
|
10409
|
+
const store = useStoreContext("useStore");
|
|
10410
|
+
const getSnapshot = React$5.useCallback(() => selector(store.getState()), [store, selector]);
|
|
10411
|
+
return React$5.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
|
|
10412
|
+
}
|
|
10413
|
+
const StepperContext = React$5.createContext(null);
|
|
10414
|
+
function useStepperContext(consumerName) {
|
|
10415
|
+
const context = React$5.useContext(StepperContext);
|
|
10416
|
+
if (!context) throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``);
|
|
10417
|
+
return context;
|
|
10418
|
+
}
|
|
10419
|
+
function Stepper(props) {
|
|
10420
|
+
const { value, defaultValue, onValueChange, onValueComplete, onValueAdd, onValueRemove, onValidate, dir: dirProp, orientation = "horizontal", activationMode = "automatic", asChild, disabled = false, nonInteractive = false, loop = false, className, id,...rootProps } = props;
|
|
10421
|
+
const listenersRef = useLazyRef(() => new Set());
|
|
10422
|
+
const stateRef = useLazyRef(() => ({
|
|
10423
|
+
steps: new Map(),
|
|
10424
|
+
value: value ?? defaultValue ?? ""
|
|
10425
|
+
}));
|
|
10426
|
+
const propsRef = useAsRef({
|
|
10427
|
+
onValueChange,
|
|
10428
|
+
onValueComplete,
|
|
10429
|
+
onValueAdd,
|
|
10430
|
+
onValueRemove,
|
|
10431
|
+
onValidate
|
|
10432
|
+
});
|
|
10433
|
+
const store = React$5.useMemo(() => {
|
|
10434
|
+
return {
|
|
10435
|
+
subscribe: (cb) => {
|
|
10436
|
+
listenersRef.current.add(cb);
|
|
10437
|
+
return () => listenersRef.current.delete(cb);
|
|
10438
|
+
},
|
|
10439
|
+
getState: () => stateRef.current,
|
|
10440
|
+
setState: (key, value$1) => {
|
|
10441
|
+
if (Object.is(stateRef.current[key], value$1)) return;
|
|
10442
|
+
if (key === "value" && typeof value$1 === "string") {
|
|
10443
|
+
stateRef.current.value = value$1;
|
|
10444
|
+
propsRef.current.onValueChange?.(value$1);
|
|
10445
|
+
} else stateRef.current[key] = value$1;
|
|
10446
|
+
store.notify();
|
|
10447
|
+
},
|
|
10448
|
+
setStateWithValidation: async (value$1, direction) => {
|
|
10449
|
+
if (!propsRef.current.onValidate) {
|
|
10450
|
+
store.setState("value", value$1);
|
|
10451
|
+
return true;
|
|
10452
|
+
}
|
|
10453
|
+
try {
|
|
10454
|
+
const isValid = await propsRef.current.onValidate(value$1, direction);
|
|
10455
|
+
if (isValid) store.setState("value", value$1);
|
|
10456
|
+
return isValid;
|
|
10457
|
+
} catch {
|
|
10458
|
+
return false;
|
|
10459
|
+
}
|
|
10460
|
+
},
|
|
10461
|
+
hasValidation: () => !!propsRef.current.onValidate,
|
|
10462
|
+
addStep: (value$1, completed, disabled$1) => {
|
|
10463
|
+
const newStep = {
|
|
10464
|
+
value: value$1,
|
|
10465
|
+
completed,
|
|
10466
|
+
disabled: disabled$1
|
|
10467
|
+
};
|
|
10468
|
+
stateRef.current.steps.set(value$1, newStep);
|
|
10469
|
+
propsRef.current.onValueAdd?.(value$1);
|
|
10470
|
+
store.notify();
|
|
10471
|
+
},
|
|
10472
|
+
removeStep: (value$1) => {
|
|
10473
|
+
stateRef.current.steps.delete(value$1);
|
|
10474
|
+
propsRef.current.onValueRemove?.(value$1);
|
|
10475
|
+
store.notify();
|
|
10476
|
+
},
|
|
10477
|
+
setStep: (value$1, completed, disabled$1) => {
|
|
10478
|
+
const step = stateRef.current.steps.get(value$1);
|
|
10479
|
+
if (step) {
|
|
10480
|
+
const updatedStep = {
|
|
10481
|
+
...step,
|
|
10482
|
+
completed,
|
|
10483
|
+
disabled: disabled$1
|
|
10484
|
+
};
|
|
10485
|
+
stateRef.current.steps.set(value$1, updatedStep);
|
|
10486
|
+
if (completed !== step.completed) propsRef.current.onValueComplete?.(value$1, completed);
|
|
10487
|
+
store.notify();
|
|
10488
|
+
}
|
|
10489
|
+
},
|
|
10490
|
+
notify: () => {
|
|
10491
|
+
for (const cb of listenersRef.current) cb();
|
|
10492
|
+
}
|
|
10493
|
+
};
|
|
10494
|
+
}, [
|
|
10495
|
+
listenersRef,
|
|
10496
|
+
stateRef,
|
|
10497
|
+
propsRef
|
|
10498
|
+
]);
|
|
10499
|
+
useIsomorphicLayoutEffect(() => {
|
|
10500
|
+
if (value !== void 0) store.setState("value", value);
|
|
10501
|
+
}, [value]);
|
|
10502
|
+
const dir = useDirection(dirProp);
|
|
10503
|
+
const instanceId = React$5.useId();
|
|
10504
|
+
const rootId = id ?? instanceId;
|
|
10505
|
+
const contextValue = React$5.useMemo(() => ({
|
|
10506
|
+
rootId,
|
|
10507
|
+
dir,
|
|
10508
|
+
orientation,
|
|
10509
|
+
activationMode,
|
|
10510
|
+
disabled,
|
|
10511
|
+
nonInteractive,
|
|
10512
|
+
loop
|
|
10513
|
+
}), [
|
|
10514
|
+
rootId,
|
|
10515
|
+
dir,
|
|
10516
|
+
orientation,
|
|
10517
|
+
activationMode,
|
|
10518
|
+
disabled,
|
|
10519
|
+
nonInteractive,
|
|
10520
|
+
loop
|
|
10521
|
+
]);
|
|
10522
|
+
const RootPrimitive = asChild ? Slot : "div";
|
|
10523
|
+
return /* @__PURE__ */ jsx(StoreContext.Provider, {
|
|
10524
|
+
value: store,
|
|
10525
|
+
children: /* @__PURE__ */ jsx(StepperContext.Provider, {
|
|
10526
|
+
value: contextValue,
|
|
10527
|
+
children: /* @__PURE__ */ jsx(RootPrimitive, {
|
|
10528
|
+
id: rootId,
|
|
10529
|
+
"data-disabled": disabled ? "" : void 0,
|
|
10530
|
+
"data-orientation": orientation,
|
|
10531
|
+
"data-slot": "stepper",
|
|
10532
|
+
dir,
|
|
10533
|
+
...rootProps,
|
|
10534
|
+
className: cn("flex gap-6", orientation === "horizontal" ? "w-full flex-col" : "flex-row", className)
|
|
10535
|
+
})
|
|
10536
|
+
})
|
|
10537
|
+
});
|
|
10538
|
+
}
|
|
10539
|
+
const FocusContext = React$5.createContext(null);
|
|
10540
|
+
function useFocusContext(consumerName) {
|
|
10541
|
+
const context = React$5.useContext(FocusContext);
|
|
10542
|
+
if (!context) throw new Error(`\`${consumerName}\` must be used within \`FocusProvider\``);
|
|
10543
|
+
return context;
|
|
10544
|
+
}
|
|
10545
|
+
function StepperList(props) {
|
|
10546
|
+
const { asChild, onBlur: onBlurProp, onFocus: onFocusProp, onMouseDown: onMouseDownProp, className, children, ref,...listProps } = props;
|
|
10547
|
+
const context = useStepperContext(LIST_NAME);
|
|
10548
|
+
const orientation = context.orientation;
|
|
10549
|
+
const currentValue = useStore((state) => state.value);
|
|
10550
|
+
const propsRef = useAsRef({
|
|
10551
|
+
onBlur: onBlurProp,
|
|
10552
|
+
onFocus: onFocusProp,
|
|
10553
|
+
onMouseDown: onMouseDownProp
|
|
10554
|
+
});
|
|
10555
|
+
const [tabStopId, setTabStopId] = React$5.useState(null);
|
|
10556
|
+
const [isTabbingBackOut, setIsTabbingBackOut] = React$5.useState(false);
|
|
10557
|
+
const [focusableItemCount, setFocusableItemCount] = React$5.useState(0);
|
|
10558
|
+
const isClickFocusRef = React$5.useRef(false);
|
|
10559
|
+
const itemsRef = React$5.useRef(new Map());
|
|
10560
|
+
const listRef = React$5.useRef(null);
|
|
10561
|
+
const composedRef = useComposedRefs(ref, listRef);
|
|
10562
|
+
const onItemFocus = React$5.useCallback((tabStopId$1) => {
|
|
10563
|
+
setTabStopId(tabStopId$1);
|
|
10564
|
+
}, []);
|
|
10565
|
+
const onItemShiftTab = React$5.useCallback(() => {
|
|
10566
|
+
setIsTabbingBackOut(true);
|
|
10567
|
+
}, []);
|
|
10568
|
+
const onFocusableItemAdd = React$5.useCallback(() => {
|
|
10569
|
+
setFocusableItemCount((prevCount) => prevCount + 1);
|
|
10570
|
+
}, []);
|
|
10571
|
+
const onFocusableItemRemove = React$5.useCallback(() => {
|
|
10572
|
+
setFocusableItemCount((prevCount) => prevCount - 1);
|
|
10573
|
+
}, []);
|
|
10574
|
+
const onItemRegister = React$5.useCallback((item) => {
|
|
10575
|
+
itemsRef.current.set(item.id, item);
|
|
10576
|
+
}, []);
|
|
10577
|
+
const onItemUnregister = React$5.useCallback((id) => {
|
|
10578
|
+
itemsRef.current.delete(id);
|
|
10579
|
+
}, []);
|
|
10580
|
+
const getItems = React$5.useCallback(() => {
|
|
10581
|
+
return Array.from(itemsRef.current.values()).filter((item) => item.ref.current).sort((a, b) => {
|
|
10582
|
+
const elementA = a.ref.current;
|
|
10583
|
+
const elementB = b.ref.current;
|
|
10584
|
+
if (!elementA || !elementB) return 0;
|
|
10585
|
+
const position = elementA.compareDocumentPosition(elementB);
|
|
10586
|
+
if (position & Node.DOCUMENT_POSITION_FOLLOWING) return -1;
|
|
10587
|
+
if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1;
|
|
10588
|
+
return 0;
|
|
10589
|
+
});
|
|
10590
|
+
}, []);
|
|
10591
|
+
const onBlur = React$5.useCallback((event) => {
|
|
10592
|
+
propsRef.current.onBlur?.(event);
|
|
10593
|
+
if (event.defaultPrevented) return;
|
|
10594
|
+
setIsTabbingBackOut(false);
|
|
10595
|
+
}, [propsRef]);
|
|
10596
|
+
const onFocus = React$5.useCallback((event) => {
|
|
10597
|
+
propsRef.current.onFocus?.(event);
|
|
10598
|
+
if (event.defaultPrevented) return;
|
|
10599
|
+
const isKeyboardFocus = !isClickFocusRef.current;
|
|
10600
|
+
if (event.target === event.currentTarget && isKeyboardFocus && !isTabbingBackOut) {
|
|
10601
|
+
const entryFocusEvent = new CustomEvent(ENTRY_FOCUS, EVENT_OPTIONS);
|
|
10602
|
+
event.currentTarget.dispatchEvent(entryFocusEvent);
|
|
10603
|
+
if (!entryFocusEvent.defaultPrevented) {
|
|
10604
|
+
const items = Array.from(itemsRef.current.values()).filter((item) => !item.disabled);
|
|
10605
|
+
const selectedItem = currentValue ? items.find((item) => item.value === currentValue) : void 0;
|
|
10606
|
+
const activeItem = items.find((item) => item.active);
|
|
10607
|
+
const currentItem = items.find((item) => item.id === tabStopId);
|
|
10608
|
+
const candidateItems = [
|
|
10609
|
+
selectedItem,
|
|
10610
|
+
activeItem,
|
|
10611
|
+
currentItem,
|
|
10612
|
+
...items
|
|
10613
|
+
].filter(Boolean);
|
|
10614
|
+
const candidateRefs = candidateItems.map((item) => item.ref);
|
|
10615
|
+
focusFirst(candidateRefs, false);
|
|
10616
|
+
}
|
|
10617
|
+
}
|
|
10618
|
+
isClickFocusRef.current = false;
|
|
10619
|
+
}, [
|
|
10620
|
+
propsRef,
|
|
10621
|
+
isTabbingBackOut,
|
|
10622
|
+
currentValue,
|
|
10623
|
+
tabStopId
|
|
10624
|
+
]);
|
|
10625
|
+
const onMouseDown = React$5.useCallback((event) => {
|
|
10626
|
+
propsRef.current.onMouseDown?.(event);
|
|
10627
|
+
if (event.defaultPrevented) return;
|
|
10628
|
+
isClickFocusRef.current = true;
|
|
10629
|
+
}, [propsRef]);
|
|
10630
|
+
const focusContextValue = React$5.useMemo(() => ({
|
|
10631
|
+
tabStopId,
|
|
10632
|
+
onItemFocus,
|
|
10633
|
+
onItemShiftTab,
|
|
10634
|
+
onFocusableItemAdd,
|
|
10635
|
+
onFocusableItemRemove,
|
|
10636
|
+
onItemRegister,
|
|
10637
|
+
onItemUnregister,
|
|
10638
|
+
getItems
|
|
10639
|
+
}), [
|
|
10640
|
+
tabStopId,
|
|
10641
|
+
onItemFocus,
|
|
10642
|
+
onItemShiftTab,
|
|
10643
|
+
onFocusableItemAdd,
|
|
10644
|
+
onFocusableItemRemove,
|
|
10645
|
+
onItemRegister,
|
|
10646
|
+
onItemUnregister,
|
|
10647
|
+
getItems
|
|
10648
|
+
]);
|
|
10649
|
+
const ListPrimitive = asChild ? Slot : "div";
|
|
10650
|
+
return /* @__PURE__ */ jsx(FocusContext.Provider, {
|
|
10651
|
+
value: focusContextValue,
|
|
10652
|
+
children: /* @__PURE__ */ jsx(ListPrimitive, {
|
|
10653
|
+
role: "tablist",
|
|
10654
|
+
"aria-orientation": orientation,
|
|
10655
|
+
"data-orientation": orientation,
|
|
10656
|
+
"data-slot": "stepper-list",
|
|
10657
|
+
dir: context.dir,
|
|
10658
|
+
tabIndex: isTabbingBackOut || focusableItemCount === 0 ? -1 : 0,
|
|
10659
|
+
...listProps,
|
|
10660
|
+
ref: composedRef,
|
|
10661
|
+
className: cn("flex outline-none", orientation === "horizontal" ? "flex-row items-center" : "flex-col items-start", className),
|
|
10662
|
+
onBlur,
|
|
10663
|
+
onFocus,
|
|
10664
|
+
onMouseDown,
|
|
10665
|
+
children
|
|
10666
|
+
})
|
|
10667
|
+
});
|
|
10668
|
+
}
|
|
10669
|
+
const StepperItemContext = React$5.createContext(null);
|
|
10670
|
+
function useStepperItemContext(consumerName) {
|
|
10671
|
+
const context = React$5.useContext(StepperItemContext);
|
|
10672
|
+
if (!context) throw new Error(`\`${consumerName}\` must be used within \`${ITEM_NAME}\``);
|
|
10673
|
+
return context;
|
|
10674
|
+
}
|
|
10675
|
+
function StepperItem(props) {
|
|
10676
|
+
const { value: itemValue, completed = false, disabled = false, asChild, className, children, ref,...itemProps } = props;
|
|
10677
|
+
const context = useStepperContext(ITEM_NAME);
|
|
10678
|
+
const store = useStoreContext(ITEM_NAME);
|
|
10679
|
+
const orientation = context.orientation;
|
|
10680
|
+
const value = useStore((state) => state.value);
|
|
10681
|
+
useIsomorphicLayoutEffect(() => {
|
|
10682
|
+
store.addStep(itemValue, completed, disabled);
|
|
10683
|
+
return () => {
|
|
10684
|
+
store.removeStep(itemValue);
|
|
10685
|
+
};
|
|
10686
|
+
}, [
|
|
10687
|
+
itemValue,
|
|
10688
|
+
completed,
|
|
10689
|
+
disabled
|
|
10690
|
+
]);
|
|
10691
|
+
useIsomorphicLayoutEffect(() => {
|
|
10692
|
+
store.setStep(itemValue, completed, disabled);
|
|
10693
|
+
}, [
|
|
10694
|
+
itemValue,
|
|
10695
|
+
completed,
|
|
10696
|
+
disabled
|
|
10697
|
+
]);
|
|
10698
|
+
const stepState = useStore((state) => state.steps.get(itemValue));
|
|
10699
|
+
const steps = useStore((state) => state.steps);
|
|
10700
|
+
const dataState = getDataState(value, itemValue, stepState, steps);
|
|
10701
|
+
const itemContextValue = React$5.useMemo(() => ({
|
|
10702
|
+
value: itemValue,
|
|
10703
|
+
stepState
|
|
10704
|
+
}), [itemValue, stepState]);
|
|
10705
|
+
const ItemPrimitive = asChild ? Slot : "div";
|
|
10706
|
+
return /* @__PURE__ */ jsx(StepperItemContext.Provider, {
|
|
10707
|
+
value: itemContextValue,
|
|
10708
|
+
children: /* @__PURE__ */ jsx(ItemPrimitive, {
|
|
10709
|
+
"data-disabled": stepState?.disabled ? "" : void 0,
|
|
10710
|
+
"data-orientation": orientation,
|
|
10711
|
+
"data-state": dataState,
|
|
10712
|
+
"data-slot": "stepper-item",
|
|
10713
|
+
dir: context.dir,
|
|
10714
|
+
...itemProps,
|
|
10715
|
+
ref,
|
|
10716
|
+
className: cn("relative flex not-last:flex-1 items-center", orientation === "horizontal" ? "flex-row" : "flex-col", className),
|
|
10717
|
+
children
|
|
10718
|
+
})
|
|
10719
|
+
});
|
|
10720
|
+
}
|
|
10721
|
+
function StepperTrigger(props) {
|
|
10722
|
+
const { asChild, onClick: onClickProp, onFocus: onFocusProp, onKeyDown: onKeyDownProp, onMouseDown: onMouseDownProp, disabled, className, ref,...triggerProps } = props;
|
|
10723
|
+
const context = useStepperContext(TRIGGER_NAME);
|
|
10724
|
+
const itemContext = useStepperItemContext(TRIGGER_NAME);
|
|
10725
|
+
const itemValue = itemContext.value;
|
|
10726
|
+
const store = useStoreContext(TRIGGER_NAME);
|
|
10727
|
+
const focusContext = useFocusContext(TRIGGER_NAME);
|
|
10728
|
+
const value = useStore((state) => state.value);
|
|
10729
|
+
const steps = useStore((state) => state.steps);
|
|
10730
|
+
const stepState = useStore((state) => state.steps.get(itemValue));
|
|
10731
|
+
const propsRef = useAsRef({
|
|
10732
|
+
onClick: onClickProp,
|
|
10733
|
+
onFocus: onFocusProp,
|
|
10734
|
+
onKeyDown: onKeyDownProp,
|
|
10735
|
+
onMouseDown: onMouseDownProp
|
|
10736
|
+
});
|
|
10737
|
+
const activationMode = context.activationMode;
|
|
10738
|
+
const orientation = context.orientation;
|
|
10739
|
+
const loop = context.loop;
|
|
10740
|
+
const stepIndex = Array.from(steps.keys()).indexOf(itemValue);
|
|
10741
|
+
const stepPosition = stepIndex + 1;
|
|
10742
|
+
const stepCount = steps.size;
|
|
10743
|
+
const triggerId = getId(context.rootId, "trigger", itemValue);
|
|
10744
|
+
const contentId = getId(context.rootId, "content", itemValue);
|
|
10745
|
+
const titleId = getId(context.rootId, "title", itemValue);
|
|
10746
|
+
const descriptionId = getId(context.rootId, "description", itemValue);
|
|
10747
|
+
const isDisabled = disabled || stepState?.disabled || context.disabled;
|
|
10748
|
+
const isActive = value === itemValue;
|
|
10749
|
+
const isTabStop = focusContext.tabStopId === triggerId;
|
|
10750
|
+
const dataState = getDataState(value, itemValue, stepState, steps);
|
|
10751
|
+
const triggerRef = React$5.useRef(null);
|
|
10752
|
+
const composedRef = useComposedRefs(ref, triggerRef);
|
|
10753
|
+
const isArrowKeyPressedRef = React$5.useRef(false);
|
|
10754
|
+
const isMouseClickRef = React$5.useRef(false);
|
|
10755
|
+
React$5.useEffect(() => {
|
|
10756
|
+
function onKeyDown$1(event) {
|
|
10757
|
+
if (ARROW_KEYS.includes(event.key)) isArrowKeyPressedRef.current = true;
|
|
10758
|
+
}
|
|
10759
|
+
function onKeyUp() {
|
|
10760
|
+
isArrowKeyPressedRef.current = false;
|
|
10761
|
+
}
|
|
10762
|
+
document.addEventListener("keydown", onKeyDown$1);
|
|
10763
|
+
document.addEventListener("keyup", onKeyUp);
|
|
10764
|
+
return () => {
|
|
10765
|
+
document.removeEventListener("keydown", onKeyDown$1);
|
|
10766
|
+
document.removeEventListener("keyup", onKeyUp);
|
|
10767
|
+
};
|
|
10768
|
+
}, []);
|
|
10769
|
+
useIsomorphicLayoutEffect(() => {
|
|
10770
|
+
focusContext.onItemRegister({
|
|
10771
|
+
id: triggerId,
|
|
10772
|
+
ref: triggerRef,
|
|
10773
|
+
value: itemValue,
|
|
10774
|
+
active: isTabStop,
|
|
10775
|
+
disabled: !!isDisabled
|
|
10776
|
+
});
|
|
10777
|
+
if (!isDisabled) focusContext.onFocusableItemAdd();
|
|
10778
|
+
return () => {
|
|
10779
|
+
focusContext.onItemUnregister(triggerId);
|
|
10780
|
+
if (!isDisabled) focusContext.onFocusableItemRemove();
|
|
10781
|
+
};
|
|
10782
|
+
}, [
|
|
10783
|
+
focusContext,
|
|
10784
|
+
triggerId,
|
|
10785
|
+
itemValue,
|
|
10786
|
+
isTabStop,
|
|
10787
|
+
isDisabled
|
|
10788
|
+
]);
|
|
10789
|
+
const onClick = React$5.useCallback(async (event) => {
|
|
10790
|
+
propsRef.current.onClick?.(event);
|
|
10791
|
+
if (event.defaultPrevented) return;
|
|
10792
|
+
if (!isDisabled && !context.nonInteractive) {
|
|
10793
|
+
const currentStepIndex = Array.from(steps.keys()).indexOf(value ?? "");
|
|
10794
|
+
const targetStepIndex = Array.from(steps.keys()).indexOf(itemValue);
|
|
10795
|
+
const direction = targetStepIndex > currentStepIndex ? "next" : "prev";
|
|
10796
|
+
await store.setStateWithValidation(itemValue, direction);
|
|
10797
|
+
}
|
|
10798
|
+
}, [
|
|
10799
|
+
isDisabled,
|
|
10800
|
+
context.nonInteractive,
|
|
10801
|
+
store,
|
|
10802
|
+
itemValue,
|
|
10803
|
+
value,
|
|
10804
|
+
steps,
|
|
10805
|
+
propsRef
|
|
10806
|
+
]);
|
|
10807
|
+
const onFocus = React$5.useCallback(async (event) => {
|
|
10808
|
+
propsRef.current.onFocus?.(event);
|
|
10809
|
+
if (event.defaultPrevented) return;
|
|
10810
|
+
focusContext.onItemFocus(triggerId);
|
|
10811
|
+
const isKeyboardFocus = !isMouseClickRef.current;
|
|
10812
|
+
if (!isActive && !isDisabled && activationMode !== "manual" && !context.nonInteractive && isKeyboardFocus) {
|
|
10813
|
+
const currentStepIndex = Array.from(steps.keys()).indexOf(value || "");
|
|
10814
|
+
const targetStepIndex = Array.from(steps.keys()).indexOf(itemValue);
|
|
10815
|
+
const direction = targetStepIndex > currentStepIndex ? "next" : "prev";
|
|
10816
|
+
await store.setStateWithValidation(itemValue, direction);
|
|
10817
|
+
}
|
|
10818
|
+
isMouseClickRef.current = false;
|
|
10819
|
+
}, [
|
|
10820
|
+
focusContext,
|
|
10821
|
+
triggerId,
|
|
10822
|
+
activationMode,
|
|
10823
|
+
isActive,
|
|
10824
|
+
isDisabled,
|
|
10825
|
+
context.nonInteractive,
|
|
10826
|
+
store,
|
|
10827
|
+
itemValue,
|
|
10828
|
+
value,
|
|
10829
|
+
steps,
|
|
10830
|
+
propsRef
|
|
10831
|
+
]);
|
|
10832
|
+
const onKeyDown = React$5.useCallback(async (event) => {
|
|
10833
|
+
propsRef.current.onKeyDown?.(event);
|
|
10834
|
+
if (event.defaultPrevented) return;
|
|
10835
|
+
if (event.key === "Enter" && context.nonInteractive) {
|
|
10836
|
+
event.preventDefault();
|
|
10837
|
+
return;
|
|
10838
|
+
}
|
|
10839
|
+
if ((event.key === "Enter" || event.key === " ") && activationMode === "manual" && !context.nonInteractive) {
|
|
10840
|
+
event.preventDefault();
|
|
10841
|
+
if (!isDisabled && triggerRef.current) triggerRef.current.click();
|
|
10842
|
+
return;
|
|
10843
|
+
}
|
|
10844
|
+
if (event.key === "Tab" && event.shiftKey) {
|
|
10845
|
+
focusContext.onItemShiftTab();
|
|
10846
|
+
return;
|
|
10847
|
+
}
|
|
10848
|
+
if (event.target !== event.currentTarget) return;
|
|
10849
|
+
const focusIntent = getFocusIntent(event, context.dir, orientation);
|
|
10850
|
+
if (focusIntent !== void 0) {
|
|
10851
|
+
if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) return;
|
|
10852
|
+
event.preventDefault();
|
|
10853
|
+
const items = focusContext.getItems().filter((item) => !item.disabled);
|
|
10854
|
+
let candidateRefs = items.map((item) => item.ref);
|
|
10855
|
+
if (focusIntent === "last") candidateRefs.reverse();
|
|
10856
|
+
else if (focusIntent === "prev" || focusIntent === "next") {
|
|
10857
|
+
if (focusIntent === "prev") candidateRefs.reverse();
|
|
10858
|
+
const currentIndex = candidateRefs.findIndex((ref$1) => ref$1.current === event.currentTarget);
|
|
10859
|
+
candidateRefs = loop ? wrapArray(candidateRefs, currentIndex + 1) : candidateRefs.slice(currentIndex + 1);
|
|
10860
|
+
}
|
|
10861
|
+
if (store.hasValidation() && candidateRefs.length > 0) {
|
|
10862
|
+
const nextRef = candidateRefs[0];
|
|
10863
|
+
const nextElement = nextRef?.current;
|
|
10864
|
+
const nextItem = items.find((item) => item.ref.current === nextElement);
|
|
10865
|
+
if (nextItem && nextItem.value !== itemValue) {
|
|
10866
|
+
const currentStepIndex = Array.from(steps.keys()).indexOf(value || "");
|
|
10867
|
+
const targetStepIndex = Array.from(steps.keys()).indexOf(nextItem.value);
|
|
10868
|
+
const direction = targetStepIndex > currentStepIndex ? "next" : "prev";
|
|
10869
|
+
if (direction === "next") {
|
|
10870
|
+
const isValid = await store.setStateWithValidation(nextItem.value, direction);
|
|
10871
|
+
if (!isValid) return;
|
|
10872
|
+
} else store.setState("value", nextItem.value);
|
|
10873
|
+
queueMicrotask(() => nextElement?.focus());
|
|
10874
|
+
return;
|
|
10875
|
+
}
|
|
10876
|
+
}
|
|
10877
|
+
queueMicrotask(() => focusFirst(candidateRefs));
|
|
10878
|
+
}
|
|
10879
|
+
}, [
|
|
10880
|
+
focusContext,
|
|
10881
|
+
context.nonInteractive,
|
|
10882
|
+
context.dir,
|
|
10883
|
+
activationMode,
|
|
10884
|
+
orientation,
|
|
10885
|
+
loop,
|
|
10886
|
+
isDisabled,
|
|
10887
|
+
store,
|
|
10888
|
+
propsRef,
|
|
10889
|
+
itemValue,
|
|
10890
|
+
value,
|
|
10891
|
+
steps
|
|
10892
|
+
]);
|
|
10893
|
+
const onMouseDown = React$5.useCallback((event) => {
|
|
10894
|
+
propsRef.current.onMouseDown?.(event);
|
|
10895
|
+
if (event.defaultPrevented) return;
|
|
10896
|
+
isMouseClickRef.current = true;
|
|
10897
|
+
if (isDisabled) event.preventDefault();
|
|
10898
|
+
else focusContext.onItemFocus(triggerId);
|
|
10899
|
+
}, [
|
|
10900
|
+
focusContext,
|
|
10901
|
+
triggerId,
|
|
10902
|
+
isDisabled,
|
|
10903
|
+
propsRef
|
|
10904
|
+
]);
|
|
10905
|
+
const TriggerPrimitive = asChild ? Slot : "button";
|
|
10906
|
+
return /* @__PURE__ */ jsx(TriggerPrimitive, {
|
|
10907
|
+
id: triggerId,
|
|
10908
|
+
role: "tab",
|
|
10909
|
+
type: "button",
|
|
10910
|
+
"aria-controls": contentId,
|
|
10911
|
+
"aria-current": isActive ? "step" : void 0,
|
|
10912
|
+
"aria-describedby": `${titleId} ${descriptionId}`,
|
|
10913
|
+
"aria-posinset": stepPosition,
|
|
10914
|
+
"aria-selected": isActive,
|
|
10915
|
+
"aria-setsize": stepCount,
|
|
10916
|
+
"data-disabled": isDisabled ? "" : void 0,
|
|
10917
|
+
"data-state": dataState,
|
|
10918
|
+
"data-slot": "stepper-trigger",
|
|
10919
|
+
disabled: isDisabled,
|
|
10920
|
+
tabIndex: isTabStop ? 0 : -1,
|
|
10921
|
+
...triggerProps,
|
|
10922
|
+
ref: composedRef,
|
|
10923
|
+
className: cn("inline-flex items-center justify-center gap-3 rounded-md text-left outline-none transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", "not-has-data-[slot=description]:rounded-full not-has-data-[slot=title]:rounded-full", className),
|
|
10924
|
+
onClick,
|
|
10925
|
+
onFocus,
|
|
10926
|
+
onKeyDown,
|
|
10927
|
+
onMouseDown
|
|
10928
|
+
});
|
|
10929
|
+
}
|
|
10930
|
+
function StepperIndicator(props) {
|
|
10931
|
+
const { className, children, asChild, ref,...indicatorProps } = props;
|
|
10932
|
+
const context = useStepperContext(INDICATOR_NAME);
|
|
10933
|
+
const itemContext = useStepperItemContext(INDICATOR_NAME);
|
|
10934
|
+
const value = useStore((state) => state.value);
|
|
10935
|
+
const itemValue = itemContext.value;
|
|
10936
|
+
const stepState = useStore((state) => state.steps.get(itemValue));
|
|
10937
|
+
const steps = useStore((state) => state.steps);
|
|
10938
|
+
const stepPosition = Array.from(steps.keys()).indexOf(itemValue) + 1;
|
|
10939
|
+
const dataState = getDataState(value, itemValue, stepState, steps);
|
|
10940
|
+
const IndicatorPrimitive = asChild ? Slot : "div";
|
|
10941
|
+
return /* @__PURE__ */ jsx(IndicatorPrimitive, {
|
|
10942
|
+
"data-state": dataState,
|
|
10943
|
+
"data-slot": "stepper-indicator",
|
|
10944
|
+
dir: context.dir,
|
|
10945
|
+
...indicatorProps,
|
|
10946
|
+
ref,
|
|
10947
|
+
className: cn("flex size-7 shrink-0 items-center justify-center rounded-full border-2 border-muted bg-background font-medium text-muted-foreground text-sm transition-colors data-[state=active]:border-primary data-[state=completed]:border-primary data-[state=active]:bg-primary data-[state=completed]:bg-primary data-[state=active]:text-primary-foreground data-[state=completed]:text-primary-foreground", className),
|
|
10948
|
+
children: typeof children === "function" ? children(dataState) : children ? children : dataState === "completed" ? /* @__PURE__ */ jsx(Check, { className: "size-4" }) : stepPosition
|
|
10949
|
+
});
|
|
10950
|
+
}
|
|
10951
|
+
function StepperSeparator(props) {
|
|
10952
|
+
const { className, asChild, forceMount = false, ref,...separatorProps } = props;
|
|
10953
|
+
const context = useStepperContext(SEPARATOR_NAME);
|
|
10954
|
+
const itemContext = useStepperItemContext(SEPARATOR_NAME);
|
|
10955
|
+
const value = useStore((state) => state.value);
|
|
10956
|
+
const steps = useStore((state) => state.steps);
|
|
10957
|
+
const orientation = context.orientation;
|
|
10958
|
+
const stepIndex = Array.from(steps.keys()).indexOf(itemContext.value);
|
|
10959
|
+
const isLastStep = stepIndex === steps.size - 1;
|
|
10960
|
+
if (isLastStep && !forceMount) return null;
|
|
10961
|
+
const dataState = getDataState(value, itemContext.value, itemContext.stepState, steps, "separator");
|
|
10962
|
+
const SeparatorPrimitive$1 = asChild ? Slot : "div";
|
|
10963
|
+
return /* @__PURE__ */ jsx(SeparatorPrimitive$1, {
|
|
10964
|
+
role: "separator",
|
|
10965
|
+
"aria-hidden": "true",
|
|
10966
|
+
"aria-orientation": orientation,
|
|
10967
|
+
"data-orientation": orientation,
|
|
10968
|
+
"data-state": dataState,
|
|
10969
|
+
"data-slot": "stepper-separator",
|
|
10970
|
+
dir: context.dir,
|
|
10971
|
+
...separatorProps,
|
|
10972
|
+
ref,
|
|
10973
|
+
className: cn("bg-border transition-colors data-[state=active]:bg-primary data-[state=completed]:bg-primary", orientation === "horizontal" ? "h-px flex-1" : "h-10 w-px", className)
|
|
10974
|
+
});
|
|
10975
|
+
}
|
|
10976
|
+
function StepperTitle(props) {
|
|
10977
|
+
const { className, asChild, ref,...titleProps } = props;
|
|
10978
|
+
const context = useStepperContext(TITLE_NAME);
|
|
10979
|
+
const itemContext = useStepperItemContext(TITLE_NAME);
|
|
10980
|
+
const titleId = getId(context.rootId, "title", itemContext.value);
|
|
10981
|
+
const TitlePrimitive = asChild ? Slot : "span";
|
|
10982
|
+
return /* @__PURE__ */ jsx(TitlePrimitive, {
|
|
10983
|
+
id: titleId,
|
|
10984
|
+
"data-slot": "title",
|
|
10985
|
+
dir: context.dir,
|
|
10986
|
+
...titleProps,
|
|
10987
|
+
ref,
|
|
10988
|
+
className: cn("font-medium text-sm", className)
|
|
10989
|
+
});
|
|
10990
|
+
}
|
|
10991
|
+
function StepperDescription(props) {
|
|
10992
|
+
const { className, asChild, ref,...descriptionProps } = props;
|
|
10993
|
+
const context = useStepperContext(DESCRIPTION_NAME);
|
|
10994
|
+
const itemContext = useStepperItemContext(DESCRIPTION_NAME);
|
|
10995
|
+
const descriptionId = getId(context.rootId, "description", itemContext.value);
|
|
10996
|
+
const DescriptionPrimitive = asChild ? Slot : "span";
|
|
10997
|
+
return /* @__PURE__ */ jsx(DescriptionPrimitive, {
|
|
10998
|
+
id: descriptionId,
|
|
10999
|
+
"data-slot": "description",
|
|
11000
|
+
dir: context.dir,
|
|
11001
|
+
...descriptionProps,
|
|
11002
|
+
ref,
|
|
11003
|
+
className: cn("text-muted-foreground text-xs", className)
|
|
11004
|
+
});
|
|
11005
|
+
}
|
|
11006
|
+
function StepperContent(props) {
|
|
11007
|
+
const { value: valueProp, asChild, forceMount = false, ref, className,...contentProps } = props;
|
|
11008
|
+
const context = useStepperContext(CONTENT_NAME);
|
|
11009
|
+
const value = useStore((state) => state.value);
|
|
11010
|
+
const contentId = getId(context.rootId, "content", valueProp);
|
|
11011
|
+
const triggerId = getId(context.rootId, "trigger", valueProp);
|
|
11012
|
+
if (valueProp !== value && !forceMount) return null;
|
|
11013
|
+
const ContentPrimitive = asChild ? Slot : "div";
|
|
11014
|
+
return /* @__PURE__ */ jsx(ContentPrimitive, {
|
|
11015
|
+
id: contentId,
|
|
11016
|
+
role: "tabpanel",
|
|
11017
|
+
"aria-labelledby": triggerId,
|
|
11018
|
+
"data-slot": "stepper-content",
|
|
11019
|
+
dir: context.dir,
|
|
11020
|
+
...contentProps,
|
|
11021
|
+
ref,
|
|
11022
|
+
className: cn("flex-1 outline-none", className)
|
|
11023
|
+
});
|
|
11024
|
+
}
|
|
11025
|
+
function StepperPrev(props) {
|
|
11026
|
+
const { asChild, onClick: onClickProp, disabled,...prevProps } = props;
|
|
11027
|
+
const store = useStoreContext(PREV_NAME);
|
|
11028
|
+
const value = useStore((state) => state.value);
|
|
11029
|
+
const steps = useStore((state) => state.steps);
|
|
11030
|
+
const propsRef = useAsRef({ onClick: onClickProp });
|
|
11031
|
+
const stepKeys = Array.from(steps.keys());
|
|
11032
|
+
const currentIndex = value ? stepKeys.indexOf(value) : -1;
|
|
11033
|
+
const isDisabled = disabled || currentIndex <= 0;
|
|
11034
|
+
const onClick = React$5.useCallback((event) => {
|
|
11035
|
+
propsRef.current.onClick?.(event);
|
|
11036
|
+
if (event.defaultPrevented || isDisabled) return;
|
|
11037
|
+
const prevIndex = Math.max(currentIndex - 1, 0);
|
|
11038
|
+
const prevStepValue = stepKeys[prevIndex];
|
|
11039
|
+
if (prevStepValue) store.setState("value", prevStepValue);
|
|
11040
|
+
}, [
|
|
11041
|
+
propsRef,
|
|
11042
|
+
isDisabled,
|
|
11043
|
+
currentIndex,
|
|
11044
|
+
stepKeys,
|
|
11045
|
+
store
|
|
11046
|
+
]);
|
|
11047
|
+
const PrevPrimitive = asChild ? Slot : "button";
|
|
11048
|
+
return /* @__PURE__ */ jsx(PrevPrimitive, {
|
|
11049
|
+
type: "button",
|
|
11050
|
+
"data-slot": "stepper-prev",
|
|
11051
|
+
disabled: isDisabled,
|
|
11052
|
+
...prevProps,
|
|
11053
|
+
onClick
|
|
11054
|
+
});
|
|
11055
|
+
}
|
|
11056
|
+
function StepperNext(props) {
|
|
11057
|
+
const { asChild, onClick: onClickProp, disabled,...nextProps } = props;
|
|
11058
|
+
const store = useStoreContext(NEXT_NAME);
|
|
11059
|
+
const value = useStore((state) => state.value);
|
|
11060
|
+
const steps = useStore((state) => state.steps);
|
|
11061
|
+
const propsRef = useAsRef({ onClick: onClickProp });
|
|
11062
|
+
const stepKeys = Array.from(steps.keys());
|
|
11063
|
+
const currentIndex = value ? stepKeys.indexOf(value) : -1;
|
|
11064
|
+
const isDisabled = disabled || currentIndex >= stepKeys.length - 1;
|
|
11065
|
+
const onClick = React$5.useCallback(async (event) => {
|
|
11066
|
+
propsRef.current.onClick?.(event);
|
|
11067
|
+
if (event.defaultPrevented || isDisabled) return;
|
|
11068
|
+
const nextIndex = Math.min(currentIndex + 1, stepKeys.length - 1);
|
|
11069
|
+
const nextStepValue = stepKeys[nextIndex];
|
|
11070
|
+
if (nextStepValue) await store.setStateWithValidation(nextStepValue, "next");
|
|
11071
|
+
}, [
|
|
11072
|
+
propsRef,
|
|
11073
|
+
isDisabled,
|
|
11074
|
+
currentIndex,
|
|
11075
|
+
stepKeys,
|
|
11076
|
+
store
|
|
11077
|
+
]);
|
|
11078
|
+
const NextPrimitive = asChild ? Slot : "button";
|
|
11079
|
+
return /* @__PURE__ */ jsx(NextPrimitive, {
|
|
11080
|
+
type: "button",
|
|
11081
|
+
"data-slot": "stepper-next",
|
|
11082
|
+
disabled: isDisabled,
|
|
11083
|
+
...nextProps,
|
|
11084
|
+
onClick
|
|
11085
|
+
});
|
|
11086
|
+
}
|
|
11087
|
+
|
|
9758
11088
|
//#endregion
|
|
9759
11089
|
//#region src/switch/switch.tsx
|
|
9760
11090
|
const Switch = React$4.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(SwitchPrimitives.Root, {
|
|
@@ -10039,5 +11369,5 @@ const TreeView = React$1.forwardRef(({ data, onNodeSelect, onGroupSelect, onTogg
|
|
|
10039
11369
|
TreeView.displayName = "TreeView";
|
|
10040
11370
|
|
|
10041
11371
|
//#endregion
|
|
10042
|
-
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, Avatar, AvatarFallback, AvatarImage, Badge, KanbanBoard as Board, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, CalendarDayButton, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Checkbox, CheckboxCell, Collapse, CollapseContent, CollapseTrigger, KanbanColumn as Column, KanbanColumnHandle as ColumnHandle, ComboboxDemo, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandPalette, CommandPaletteDialog, CommandPaletteEmpty, CommandPaletteGroup, CommandPaletteInput, CommandPaletteItem, CommandPaletteList, CommandPaletteSeparator, CommandPaletteShortcut, CommandSeparator, CommandShortcut, CommentCreate, CommentList, CommentThread, ContentFrame, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataGrid, DataGridCell, DataGridCellWrapper, DataGridColumnHeader, DataGridContextMenu, DataGridRow, DataGridSearch, DataGridViewMenu, DateCell, DatePickerDemo, DeferredInput, DeferredNumberInput, DeferredTextarea, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, GanttCell, GanttTimeline, GanttTimerangePicker, HeaderComponents, HierarchyCell, HierarchyItem, HoverCard, HoverCardContent, HoverCardTrigger, InfoCard, Input, KanbanItem as Item, KanbanItemHandle as ItemHandle, KanbanRoot as Kanban, KanbanBoard, KanbanColumn, KanbanColumnHandle, KanbanItem, KanbanItemHandle, KanbanOverlay, Label, Loader, LongTextCell, MarkValueRenderer, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Modal, MultiSelectCell, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NumberCell, NumberInput, KanbanOverlay as Overlay, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ReactNodeCell, ResizableHandle, ResizablePanel, ResizablePanelGroup, KanbanRoot as Root, ScrollArea, ScrollBar, Select, SelectCell, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, ShortTextCell, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slicer, SlicerHierarchyItem, Slider, Spinner, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TreeBranch, TreeView, badgeVariants, buildLabelMap, buttonVariants, checkboxVariants, cn, commandInputVariants, createSelectColumn, findOptionById, getAllDescendantIds, getAllDescendantValues, getAllIds, getAncestorIds, getCellKey, getCommonPinningStyles, getInitialExpandedIds, getLabelPath, getLineCount, getRowHeightValue, inputVariants, isoToLocalDate, knobVariants, matchesSearch, navigationMenuTriggerStyle, parseCellKey, sliderVariants, testId, toast, toggleVariants, useCallbackRef, useDataGrid, useDebouncedCallback, useIsMobile, useSidebar };
|
|
11372
|
+
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, Avatar, AvatarFallback, AvatarImage, Badge, KanbanBoard as Board, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, CalendarDayButton, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Checkbox, CheckboxCell, Collapse, CollapseContent, CollapseTrigger, KanbanColumn as Column, KanbanColumnHandle as ColumnHandle, ComboboxDemo, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandPalette, CommandPaletteDialog, CommandPaletteEmpty, CommandPaletteGroup, CommandPaletteInput, CommandPaletteItem, CommandPaletteList, CommandPaletteSeparator, CommandPaletteShortcut, CommandSeparator, CommandShortcut, CommentCreate, CommentList, CommentThread, ContentFrame, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataGrid, DataGridCell, DataGridCellWrapper, DataGridColumnHeader, DataGridContextMenu, DataGridRow, DataGridSearch, DataGridViewMenu, DateCell, DatePickerDemo, DeferredInput, DeferredNumberInput, DeferredTextarea, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DynamicTabbedSidebar, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, GanttCell, GanttTimeline, GanttTimerangePicker, HeaderComponents, HierarchyCell, HierarchyItem, HoverCard, HoverCardContent, HoverCardTrigger, InfoCard, Input, KanbanItem as Item, KanbanItemHandle as ItemHandle, KanbanRoot as Kanban, KanbanBoard, KanbanColumn, KanbanColumnHandle, KanbanItem, KanbanItemHandle, KanbanOverlay, Label, Loader, LongTextCell, MarkValueRenderer, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Modal, MultiSelectCell, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NumberCell, NumberInput, KanbanOverlay as Overlay, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ReactNodeCell, ResizableHandle, ResizablePanel, ResizablePanelGroup, KanbanRoot as Root, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_KEYBOARD_SHORTCUT_RIGHT, SIDEBAR_MAX_WIDTH, SIDEBAR_MIN_WIDTH, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON, SIDEBAR_WIDTH_MOBILE, ScrollArea, ScrollBar, Select, SelectCell, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, ShortTextCell, Sidebar, SidebarContent, SidebarContext, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarIdContext, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTab, SidebarTabsContext, SidebarTabsProvider, SidebarTrigger, Skeleton, Slicer, SlicerHierarchyItem, Slider, Spinner, Stepper, StepperContent, StepperDescription, StepperIndicator, StepperItem, StepperList, StepperNext, StepperPrev, StepperSeparator, StepperTitle, StepperTrigger, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TreeBranch, TreeView, badgeVariants, buildLabelMap, buttonVariants, checkboxVariants, cn, commandInputVariants, createSelectColumn, findOptionById, getAllDescendantIds, getAllDescendantValues, getAllIds, getAncestorIds, getCellKey, getCommonPinningStyles, getInitialExpandedIds, getLabelPath, getLineCount, getRowHeightValue, inputVariants, isoToLocalDate, knobVariants, matchesSearch, navigationMenuTriggerStyle, parseCellKey, sliderVariants, testId, toast, toggleVariants, useCallbackRef, useDataGrid, useDebouncedCallback, useIsMobile, useRegisteredSidebars, useSidebar, useSidebarTabs, useStore as useStepper };
|
|
10043
11373
|
//# sourceMappingURL=index.js.map
|