@postxl/ui-components 1.0.1 → 1.0.3
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 +513 -347
- package/dist/index.js +713 -312
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -2,6 +2,8 @@ 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, CopyIcon, Cross1Icon, Cross2Icon, DotFilledIcon, DotsHorizontalIcon, DoubleArrowLeftIcon, DoubleArrowRightIcon, DragHandleDots2Icon, DragHandleHorizontalIcon, EnterFullScreenIcon, EraserIcon, MagnifyingGlassIcon, MixerHorizontalIcon, PlusIcon, TrashIcon } from "@radix-ui/react-icons";
|
|
5
|
+
import * as React$46 from "react";
|
|
6
|
+
import * as React$45 from "react";
|
|
5
7
|
import * as React$44 from "react";
|
|
6
8
|
import * as React$43 from "react";
|
|
7
9
|
import * as React$42 from "react";
|
|
@@ -55,7 +57,7 @@ import * as AvatarPrimitive from "@radix-ui/react-avatar";
|
|
|
55
57
|
import { DayPicker, getDefaultClassNames } from "react-day-picker";
|
|
56
58
|
import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
|
|
57
59
|
import useEmblaCarousel from "embla-carousel-react";
|
|
58
|
-
import { BaselineIcon, CalendarIcon as CalendarIcon$1, CheckSquareIcon, ChevronDownIcon as ChevronDownIcon$1, ChevronUpIcon as ChevronUpIcon$1, EyeOffIcon, HashIcon, ListChecksIcon, ListIcon, PinIcon, PinOffIcon, SquareIcon, TextInitialIcon, XIcon } from "lucide-react";
|
|
60
|
+
import { BaselineIcon, CalendarIcon as CalendarIcon$1, CheckSquareIcon, ChevronDownIcon as ChevronDownIcon$1, ChevronUpIcon as ChevronUpIcon$1, EyeOffIcon, HashIcon, ListChecksIcon, ListIcon, PanelLeftIcon, PinIcon, PinOffIcon, SquareIcon, TextInitialIcon, XIcon } from "lucide-react";
|
|
59
61
|
import * as CollapsePrimitive from "@radix-ui/react-collapsible";
|
|
60
62
|
import { Command as Command$1 } from "cmdk";
|
|
61
63
|
import * as DialogPrimitive from "@radix-ui/react-dialog";
|
|
@@ -91,13 +93,13 @@ function cn(...inputs) {
|
|
|
91
93
|
//#endregion
|
|
92
94
|
//#region src/accordion/accordion.tsx
|
|
93
95
|
const Accordion = AccordionPrimitive.Root;
|
|
94
|
-
const AccordionItem = React$
|
|
96
|
+
const AccordionItem = React$46.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Item, {
|
|
95
97
|
ref,
|
|
96
98
|
className: cn("border-b", className),
|
|
97
99
|
...props
|
|
98
100
|
}));
|
|
99
101
|
AccordionItem.displayName = "AccordionItem";
|
|
100
|
-
const AccordionTrigger = React$
|
|
102
|
+
const AccordionTrigger = React$46.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Header, {
|
|
101
103
|
className: "flex",
|
|
102
104
|
children: /* @__PURE__ */ jsxs(AccordionPrimitive.Trigger, {
|
|
103
105
|
ref,
|
|
@@ -107,7 +109,7 @@ const AccordionTrigger = React$44.forwardRef(({ className, children,...props },
|
|
|
107
109
|
})
|
|
108
110
|
}));
|
|
109
111
|
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
|
|
110
|
-
const AccordionContent = React$
|
|
112
|
+
const AccordionContent = React$46.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Content, {
|
|
111
113
|
ref,
|
|
112
114
|
className: "overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
|
|
113
115
|
...props,
|
|
@@ -127,21 +129,21 @@ const alertVariants = cva("relative w-full rounded-lg border px-4 py-3 text-sm [
|
|
|
127
129
|
} },
|
|
128
130
|
defaultVariants: { variant: "default" }
|
|
129
131
|
});
|
|
130
|
-
const Alert = React$
|
|
132
|
+
const Alert = React$45.forwardRef(({ className, variant,...props }, ref) => /* @__PURE__ */ jsx("div", {
|
|
131
133
|
ref,
|
|
132
134
|
role: "alert",
|
|
133
135
|
className: cn(alertVariants({ variant }), className),
|
|
134
136
|
...props
|
|
135
137
|
}));
|
|
136
138
|
Alert.displayName = "Alert";
|
|
137
|
-
const AlertTitle = React$
|
|
139
|
+
const AlertTitle = React$45.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsx("h5", {
|
|
138
140
|
ref,
|
|
139
141
|
className: cn("mb-1 font-medium leading-none tracking-tight", className),
|
|
140
142
|
...props,
|
|
141
143
|
children
|
|
142
144
|
}));
|
|
143
145
|
AlertTitle.displayName = "AlertTitle";
|
|
144
|
-
const AlertDescription = React$
|
|
146
|
+
const AlertDescription = React$45.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
|
|
145
147
|
ref,
|
|
146
148
|
className: cn("text-sm [&_p]:leading-relaxed", className),
|
|
147
149
|
...props
|
|
@@ -200,13 +202,13 @@ function Button({ className, variant, size, asChild = false, __e2e_test_id__,...
|
|
|
200
202
|
const AlertDialog = AlertDialogPrimitive.Root;
|
|
201
203
|
const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
|
|
202
204
|
const AlertDialogPortal = AlertDialogPrimitive.Portal;
|
|
203
|
-
const AlertDialogOverlay = React$
|
|
205
|
+
const AlertDialogOverlay = React$44.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Overlay, {
|
|
204
206
|
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),
|
|
205
207
|
...props,
|
|
206
208
|
ref
|
|
207
209
|
}));
|
|
208
210
|
AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
|
|
209
|
-
const AlertDialogContent = React$
|
|
211
|
+
const AlertDialogContent = React$44.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [/* @__PURE__ */ jsx(AlertDialogOverlay, {}), /* @__PURE__ */ jsx(AlertDialogPrimitive.Content, {
|
|
210
212
|
ref,
|
|
211
213
|
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),
|
|
212
214
|
...props
|
|
@@ -222,25 +224,25 @@ const AlertDialogFooter = ({ className,...props }) => /* @__PURE__ */ jsx("div",
|
|
|
222
224
|
...props
|
|
223
225
|
});
|
|
224
226
|
AlertDialogFooter.displayName = "AlertDialogFooter";
|
|
225
|
-
const AlertDialogTitle = React$
|
|
227
|
+
const AlertDialogTitle = React$44.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Title, {
|
|
226
228
|
ref,
|
|
227
229
|
className: cn("text-lg font-semibold", className),
|
|
228
230
|
...props
|
|
229
231
|
}));
|
|
230
232
|
AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
|
|
231
|
-
const AlertDialogDescription = React$
|
|
233
|
+
const AlertDialogDescription = React$44.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Description, {
|
|
232
234
|
ref,
|
|
233
235
|
className: cn("text-sm text-muted-foreground", className),
|
|
234
236
|
...props
|
|
235
237
|
}));
|
|
236
238
|
AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
|
|
237
|
-
const AlertDialogAction = React$
|
|
239
|
+
const AlertDialogAction = React$44.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Action, {
|
|
238
240
|
ref,
|
|
239
241
|
className: cn(buttonVariants(), className),
|
|
240
242
|
...props
|
|
241
243
|
}));
|
|
242
244
|
AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
|
|
243
|
-
const AlertDialogCancel = React$
|
|
245
|
+
const AlertDialogCancel = React$44.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Cancel, {
|
|
244
246
|
ref,
|
|
245
247
|
className: cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className),
|
|
246
248
|
...props
|
|
@@ -249,19 +251,19 @@ AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
|
|
|
249
251
|
|
|
250
252
|
//#endregion
|
|
251
253
|
//#region src/avatar/avatar.tsx
|
|
252
|
-
const Avatar = React$
|
|
254
|
+
const Avatar = React$43.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AvatarPrimitive.Root, {
|
|
253
255
|
ref,
|
|
254
256
|
className: cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className),
|
|
255
257
|
...props
|
|
256
258
|
}));
|
|
257
259
|
Avatar.displayName = AvatarPrimitive.Root.displayName;
|
|
258
|
-
const AvatarImage = React$
|
|
260
|
+
const AvatarImage = React$43.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AvatarPrimitive.Image, {
|
|
259
261
|
ref,
|
|
260
262
|
className: cn("aspect-square h-full w-full", className),
|
|
261
263
|
...props
|
|
262
264
|
}));
|
|
263
265
|
AvatarImage.displayName = AvatarPrimitive.Image.displayName;
|
|
264
|
-
const AvatarFallback = React$
|
|
266
|
+
const AvatarFallback = React$43.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AvatarPrimitive.Fallback, {
|
|
265
267
|
ref,
|
|
266
268
|
className: cn("flex h-full w-full items-center justify-center rounded-full bg-muted", className),
|
|
267
269
|
...props
|
|
@@ -307,25 +309,25 @@ function Badge({ className, variant, size, asChild = false,...props }) {
|
|
|
307
309
|
|
|
308
310
|
//#endregion
|
|
309
311
|
//#region src/breadcrumb/breadcrumb.tsx
|
|
310
|
-
const Breadcrumb = React$
|
|
312
|
+
const Breadcrumb = React$42.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx("nav", {
|
|
311
313
|
ref,
|
|
312
314
|
"aria-label": "breadcrumb",
|
|
313
315
|
...props
|
|
314
316
|
}));
|
|
315
317
|
Breadcrumb.displayName = "Breadcrumb";
|
|
316
|
-
const BreadcrumbList = React$
|
|
318
|
+
const BreadcrumbList = React$42.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("ol", {
|
|
317
319
|
ref,
|
|
318
320
|
className: cn("flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5", className),
|
|
319
321
|
...props
|
|
320
322
|
}));
|
|
321
323
|
BreadcrumbList.displayName = "BreadcrumbList";
|
|
322
|
-
const BreadcrumbItem = React$
|
|
324
|
+
const BreadcrumbItem = React$42.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("li", {
|
|
323
325
|
ref,
|
|
324
326
|
className: cn("inline-flex items-center gap-1.5", className),
|
|
325
327
|
...props
|
|
326
328
|
}));
|
|
327
329
|
BreadcrumbItem.displayName = "BreadcrumbItem";
|
|
328
|
-
const BreadcrumbLink = React$
|
|
330
|
+
const BreadcrumbLink = React$42.forwardRef(({ asChild, className,...props }, ref) => {
|
|
329
331
|
const Comp = asChild ? Slot : "a";
|
|
330
332
|
return /* @__PURE__ */ jsx(Comp, {
|
|
331
333
|
ref,
|
|
@@ -334,7 +336,7 @@ const BreadcrumbLink = React$40.forwardRef(({ asChild, className,...props }, ref
|
|
|
334
336
|
});
|
|
335
337
|
});
|
|
336
338
|
BreadcrumbLink.displayName = "BreadcrumbLink";
|
|
337
|
-
const BreadcrumbPage = React$
|
|
339
|
+
const BreadcrumbPage = React$42.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("span", {
|
|
338
340
|
ref,
|
|
339
341
|
"aria-disabled": "true",
|
|
340
342
|
"aria-current": "page",
|
|
@@ -364,8 +366,8 @@ BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
|
|
|
364
366
|
//#region src/calendar/calendar.tsx
|
|
365
367
|
function Calendar({ className, classNames, showOutsideDays = true, captionLayout = "label", buttonVariant = "ghost", showYearNavigation = false, formatters, components,...props }) {
|
|
366
368
|
const defaultClassNames = getDefaultClassNames();
|
|
367
|
-
const [rangeSelectionStep, setRangeSelectionStep] = React$
|
|
368
|
-
const handleDayClick = React$
|
|
369
|
+
const [rangeSelectionStep, setRangeSelectionStep] = React$41.useState("from");
|
|
370
|
+
const handleDayClick = React$41.useCallback((day, modifiers, e) => {
|
|
369
371
|
if (props.mode === "range") {
|
|
370
372
|
const range = props.selected;
|
|
371
373
|
if (rangeSelectionStep === "from") {
|
|
@@ -395,8 +397,8 @@ function Calendar({ className, classNames, showOutsideDays = true, captionLayout
|
|
|
395
397
|
fromMonth = props.startMonth ?? new Date(nowYear - 100, 0);
|
|
396
398
|
toMonth = props.endMonth ?? new Date(nowYear + 100, 11);
|
|
397
399
|
}
|
|
398
|
-
const [currentMonth, setCurrentMonth] = React$
|
|
399
|
-
React$
|
|
400
|
+
const [currentMonth, setCurrentMonth] = React$41.useState(props.defaultMonth ?? props.month ?? new Date());
|
|
401
|
+
React$41.useEffect(() => {
|
|
400
402
|
if (props.month) setCurrentMonth(props.month);
|
|
401
403
|
}, [props.month]);
|
|
402
404
|
const addMonths = (date, months) => {
|
|
@@ -535,8 +537,8 @@ function Calendar({ className, classNames, showOutsideDays = true, captionLayout
|
|
|
535
537
|
}
|
|
536
538
|
function CalendarDayButton({ className, day, modifiers,...props }) {
|
|
537
539
|
const defaultClassNames = getDefaultClassNames();
|
|
538
|
-
const ref = React$
|
|
539
|
-
React$
|
|
540
|
+
const ref = React$41.useRef(null);
|
|
541
|
+
React$41.useEffect(() => {
|
|
540
542
|
if (modifiers.focused) ref.current?.focus();
|
|
541
543
|
}, [modifiers.focused]);
|
|
542
544
|
return /* @__PURE__ */ jsx(Button, {
|
|
@@ -555,38 +557,38 @@ function CalendarDayButton({ className, day, modifiers,...props }) {
|
|
|
555
557
|
|
|
556
558
|
//#endregion
|
|
557
559
|
//#region src/card/card.tsx
|
|
558
|
-
const Card = React$
|
|
560
|
+
const Card = React$40.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
|
|
559
561
|
ref,
|
|
560
562
|
className: cn("rounded-xl border bg-card text-card-foreground shadow", className),
|
|
561
563
|
...props
|
|
562
564
|
}));
|
|
563
565
|
Card.displayName = "Card";
|
|
564
|
-
const CardHeader = React$
|
|
566
|
+
const CardHeader = React$40.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
|
|
565
567
|
ref,
|
|
566
568
|
className: cn("flex flex-col space-y-1.5 p-6", className),
|
|
567
569
|
...props
|
|
568
570
|
}));
|
|
569
571
|
CardHeader.displayName = "CardHeader";
|
|
570
|
-
const CardTitle = React$
|
|
572
|
+
const CardTitle = React$40.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsx("h3", {
|
|
571
573
|
ref,
|
|
572
574
|
className: cn("font-semibold leading-none tracking-tight", className),
|
|
573
575
|
...props,
|
|
574
576
|
children
|
|
575
577
|
}));
|
|
576
578
|
CardTitle.displayName = "CardTitle";
|
|
577
|
-
const CardDescription = React$
|
|
579
|
+
const CardDescription = React$40.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("p", {
|
|
578
580
|
ref,
|
|
579
581
|
className: cn("text-sm text-muted-foreground", className),
|
|
580
582
|
...props
|
|
581
583
|
}));
|
|
582
584
|
CardDescription.displayName = "CardDescription";
|
|
583
|
-
const CardContent = React$
|
|
585
|
+
const CardContent = React$40.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
|
|
584
586
|
ref,
|
|
585
587
|
className: cn("p-6 pt-0", className),
|
|
586
588
|
...props
|
|
587
589
|
}));
|
|
588
590
|
CardContent.displayName = "CardContent";
|
|
589
|
-
const CardFooter = React$
|
|
591
|
+
const CardFooter = React$40.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
|
|
590
592
|
ref,
|
|
591
593
|
className: cn("flex items-center p-6 pt-0", className),
|
|
592
594
|
...props
|
|
@@ -597,7 +599,7 @@ CardFooter.displayName = "CardFooter";
|
|
|
597
599
|
//#region src/card-hover/card-hover.tsx
|
|
598
600
|
const HoverCard = HoverCardPrimitive.Root;
|
|
599
601
|
const HoverCardTrigger = HoverCardPrimitive.Trigger;
|
|
600
|
-
const HoverCardContent = React$
|
|
602
|
+
const HoverCardContent = React$39.forwardRef(({ className, align = "center", sideOffset = 4,...props }, ref) => /* @__PURE__ */ jsx(HoverCardPrimitive.Content, {
|
|
601
603
|
ref,
|
|
602
604
|
align,
|
|
603
605
|
sideOffset,
|
|
@@ -608,31 +610,31 @@ HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
|
|
|
608
610
|
|
|
609
611
|
//#endregion
|
|
610
612
|
//#region src/carousel/carousel.tsx
|
|
611
|
-
const CarouselContext = React$
|
|
613
|
+
const CarouselContext = React$38.createContext(null);
|
|
612
614
|
function useCarousel() {
|
|
613
|
-
const context = React$
|
|
615
|
+
const context = React$38.useContext(CarouselContext);
|
|
614
616
|
if (!context) throw new Error("useCarousel must be used within a <Carousel />");
|
|
615
617
|
return context;
|
|
616
618
|
}
|
|
617
|
-
const Carousel = React$
|
|
619
|
+
const Carousel = React$38.forwardRef(({ orientation = "horizontal", opts, setApi, plugins, className, children,...props }, ref) => {
|
|
618
620
|
const [carouselRef, api] = useEmblaCarousel({
|
|
619
621
|
...opts,
|
|
620
622
|
axis: orientation === "horizontal" ? "x" : "y"
|
|
621
623
|
}, plugins);
|
|
622
|
-
const [canScrollPrev, setCanScrollPrev] = React$
|
|
623
|
-
const [canScrollNext, setCanScrollNext] = React$
|
|
624
|
-
const onSelect = React$
|
|
624
|
+
const [canScrollPrev, setCanScrollPrev] = React$38.useState(false);
|
|
625
|
+
const [canScrollNext, setCanScrollNext] = React$38.useState(false);
|
|
626
|
+
const onSelect = React$38.useCallback(() => {
|
|
625
627
|
if (!api) return;
|
|
626
628
|
setCanScrollPrev(api.canScrollPrev());
|
|
627
629
|
setCanScrollNext(api.canScrollNext());
|
|
628
630
|
}, [api]);
|
|
629
|
-
const scrollPrev = React$
|
|
631
|
+
const scrollPrev = React$38.useCallback(() => {
|
|
630
632
|
api?.scrollPrev();
|
|
631
633
|
}, [api]);
|
|
632
|
-
const scrollNext = React$
|
|
634
|
+
const scrollNext = React$38.useCallback(() => {
|
|
633
635
|
api?.scrollNext();
|
|
634
636
|
}, [api]);
|
|
635
|
-
const handleKeyDown = React$
|
|
637
|
+
const handleKeyDown = React$38.useCallback((event) => {
|
|
636
638
|
if (event.key === "ArrowLeft") {
|
|
637
639
|
event.preventDefault();
|
|
638
640
|
scrollPrev();
|
|
@@ -641,11 +643,11 @@ const Carousel = React$36.forwardRef(({ orientation = "horizontal", opts, setApi
|
|
|
641
643
|
scrollNext();
|
|
642
644
|
}
|
|
643
645
|
}, [scrollPrev, scrollNext]);
|
|
644
|
-
React$
|
|
646
|
+
React$38.useEffect(() => {
|
|
645
647
|
if (!api || !setApi) return;
|
|
646
648
|
setApi(api);
|
|
647
649
|
}, [api, setApi]);
|
|
648
|
-
React$
|
|
650
|
+
React$38.useEffect(() => {
|
|
649
651
|
if (!api) return;
|
|
650
652
|
onSelect();
|
|
651
653
|
api.on("reInit", onSelect);
|
|
@@ -686,7 +688,7 @@ const Carousel = React$36.forwardRef(({ orientation = "horizontal", opts, setApi
|
|
|
686
688
|
});
|
|
687
689
|
});
|
|
688
690
|
Carousel.displayName = "Carousel";
|
|
689
|
-
const CarouselContent = React$
|
|
691
|
+
const CarouselContent = React$38.forwardRef(({ className,...props }, ref) => {
|
|
690
692
|
const { carouselRef, orientation } = useCarousel();
|
|
691
693
|
return /* @__PURE__ */ jsx("div", {
|
|
692
694
|
ref: carouselRef,
|
|
@@ -699,7 +701,7 @@ const CarouselContent = React$36.forwardRef(({ className,...props }, ref) => {
|
|
|
699
701
|
});
|
|
700
702
|
});
|
|
701
703
|
CarouselContent.displayName = "CarouselContent";
|
|
702
|
-
const CarouselItem = React$
|
|
704
|
+
const CarouselItem = React$38.forwardRef(({ className,...props }, ref) => {
|
|
703
705
|
const { orientation } = useCarousel();
|
|
704
706
|
return /* @__PURE__ */ jsx("div", {
|
|
705
707
|
ref,
|
|
@@ -709,7 +711,7 @@ const CarouselItem = React$36.forwardRef(({ className,...props }, ref) => {
|
|
|
709
711
|
});
|
|
710
712
|
});
|
|
711
713
|
CarouselItem.displayName = "CarouselItem";
|
|
712
|
-
const CarouselPrevious = React$
|
|
714
|
+
const CarouselPrevious = React$38.forwardRef(({ className, variant = "outline", size = "icon",...props }, ref) => {
|
|
713
715
|
const { orientation, scrollPrev, canScrollPrev } = useCarousel();
|
|
714
716
|
return /* @__PURE__ */ jsxs(Button, {
|
|
715
717
|
ref,
|
|
@@ -726,7 +728,7 @@ const CarouselPrevious = React$36.forwardRef(({ className, variant = "outline",
|
|
|
726
728
|
});
|
|
727
729
|
});
|
|
728
730
|
CarouselPrevious.displayName = "CarouselPrevious";
|
|
729
|
-
const CarouselNext = React$
|
|
731
|
+
const CarouselNext = React$38.forwardRef(({ className, variant = "outline", size = "icon",...props }, ref) => {
|
|
730
732
|
const { orientation, scrollNext, canScrollNext } = useCarousel();
|
|
731
733
|
return /* @__PURE__ */ jsxs(Button, {
|
|
732
734
|
ref,
|
|
@@ -910,7 +912,7 @@ function DialogDescription({ className,...props }) {
|
|
|
910
912
|
|
|
911
913
|
//#endregion
|
|
912
914
|
//#region src/command-palette/command-palette.tsx
|
|
913
|
-
const CommandPalette = React$
|
|
915
|
+
const CommandPalette = React$37.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1, {
|
|
914
916
|
ref,
|
|
915
917
|
className: cn("flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground", className),
|
|
916
918
|
...props
|
|
@@ -928,7 +930,7 @@ const CommandPaletteDialog = ({ children,...props }) => {
|
|
|
928
930
|
})
|
|
929
931
|
});
|
|
930
932
|
};
|
|
931
|
-
const CommandPaletteInput = React$
|
|
933
|
+
const CommandPaletteInput = React$37.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsxs("div", {
|
|
932
934
|
className: "flex items-center border-b px-3",
|
|
933
935
|
"data-cmdk-input-wrapper": "",
|
|
934
936
|
children: [/* @__PURE__ */ jsx(MagnifyingGlassIcon, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }), /* @__PURE__ */ jsx(Command$1.Input, {
|
|
@@ -938,31 +940,31 @@ const CommandPaletteInput = React$35.forwardRef(({ className,...props }, ref) =>
|
|
|
938
940
|
})]
|
|
939
941
|
}));
|
|
940
942
|
CommandPaletteInput.displayName = Command$1.Input.displayName;
|
|
941
|
-
const CommandPaletteList = React$
|
|
943
|
+
const CommandPaletteList = React$37.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1.List, {
|
|
942
944
|
ref,
|
|
943
945
|
className: cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className),
|
|
944
946
|
...props
|
|
945
947
|
}));
|
|
946
948
|
CommandPaletteList.displayName = Command$1.List.displayName;
|
|
947
|
-
const CommandPaletteEmpty = React$
|
|
949
|
+
const CommandPaletteEmpty = React$37.forwardRef((props, ref) => /* @__PURE__ */ jsx(Command$1.Empty, {
|
|
948
950
|
ref,
|
|
949
951
|
className: "py-6 text-center text-sm",
|
|
950
952
|
...props
|
|
951
953
|
}));
|
|
952
954
|
CommandPaletteEmpty.displayName = Command$1.Empty.displayName;
|
|
953
|
-
const CommandPaletteGroup = React$
|
|
955
|
+
const CommandPaletteGroup = React$37.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1.Group, {
|
|
954
956
|
ref,
|
|
955
957
|
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),
|
|
956
958
|
...props
|
|
957
959
|
}));
|
|
958
960
|
CommandPaletteGroup.displayName = Command$1.Group.displayName;
|
|
959
|
-
const CommandPaletteSeparator = React$
|
|
961
|
+
const CommandPaletteSeparator = React$37.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1.Separator, {
|
|
960
962
|
ref,
|
|
961
963
|
className: cn("-mx-1 h-px bg-border", className),
|
|
962
964
|
...props
|
|
963
965
|
}));
|
|
964
966
|
CommandPaletteSeparator.displayName = Command$1.Separator.displayName;
|
|
965
|
-
const CommandPaletteItem = React$
|
|
967
|
+
const CommandPaletteItem = React$37.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1.Item, {
|
|
966
968
|
ref,
|
|
967
969
|
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),
|
|
968
970
|
...props
|
|
@@ -1038,8 +1040,8 @@ const frameworks = [
|
|
|
1038
1040
|
}
|
|
1039
1041
|
];
|
|
1040
1042
|
function ComboboxDemo() {
|
|
1041
|
-
const [open, setOpen] = React$
|
|
1042
|
-
const [value, setValue] = React$
|
|
1043
|
+
const [open, setOpen] = React$36.useState(false);
|
|
1044
|
+
const [value, setValue] = React$36.useState("");
|
|
1043
1045
|
return /* @__PURE__ */ jsxs(Popover, {
|
|
1044
1046
|
open,
|
|
1045
1047
|
onOpenChange: setOpen,
|
|
@@ -1279,32 +1281,32 @@ const ContextMenuGroup = ContextMenuPrimitive.Group;
|
|
|
1279
1281
|
const ContextMenuPortal = ContextMenuPrimitive.Portal;
|
|
1280
1282
|
const ContextMenuSub = ContextMenuPrimitive.Sub;
|
|
1281
1283
|
const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
|
|
1282
|
-
const ContextMenuSubTrigger = React$
|
|
1284
|
+
const ContextMenuSubTrigger = React$35.forwardRef(({ className, inset, children,...props }, ref) => /* @__PURE__ */ jsxs(ContextMenuPrimitive.SubTrigger, {
|
|
1283
1285
|
ref,
|
|
1284
1286
|
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),
|
|
1285
1287
|
...props,
|
|
1286
1288
|
children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto h-4 w-4" })]
|
|
1287
1289
|
}));
|
|
1288
1290
|
ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
|
|
1289
|
-
const ContextMenuSubContent = React$
|
|
1291
|
+
const ContextMenuSubContent = React$35.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.SubContent, {
|
|
1290
1292
|
ref,
|
|
1291
1293
|
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),
|
|
1292
1294
|
...props
|
|
1293
1295
|
}));
|
|
1294
1296
|
ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
|
|
1295
|
-
const ContextMenuContent = React$
|
|
1297
|
+
const ContextMenuContent = React$35.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(ContextMenuPrimitive.Content, {
|
|
1296
1298
|
ref,
|
|
1297
1299
|
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),
|
|
1298
1300
|
...props
|
|
1299
1301
|
}) }));
|
|
1300
1302
|
ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
|
|
1301
|
-
const ContextMenuItem = React$
|
|
1303
|
+
const ContextMenuItem = React$35.forwardRef(({ className, inset,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Item, {
|
|
1302
1304
|
ref,
|
|
1303
1305
|
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),
|
|
1304
1306
|
...props
|
|
1305
1307
|
}));
|
|
1306
1308
|
ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
|
|
1307
|
-
const ContextMenuCheckboxItem = React$
|
|
1309
|
+
const ContextMenuCheckboxItem = React$35.forwardRef(({ className, children, checked,...props }, ref) => /* @__PURE__ */ jsxs(ContextMenuPrimitive.CheckboxItem, {
|
|
1308
1310
|
ref,
|
|
1309
1311
|
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),
|
|
1310
1312
|
checked,
|
|
@@ -1315,7 +1317,7 @@ const ContextMenuCheckboxItem = React$33.forwardRef(({ className, children, chec
|
|
|
1315
1317
|
}), children]
|
|
1316
1318
|
}));
|
|
1317
1319
|
ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
|
|
1318
|
-
const ContextMenuRadioItem = React$
|
|
1320
|
+
const ContextMenuRadioItem = React$35.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsxs(ContextMenuPrimitive.RadioItem, {
|
|
1319
1321
|
ref,
|
|
1320
1322
|
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),
|
|
1321
1323
|
...props,
|
|
@@ -1325,13 +1327,13 @@ const ContextMenuRadioItem = React$33.forwardRef(({ className, children,...props
|
|
|
1325
1327
|
}), children]
|
|
1326
1328
|
}));
|
|
1327
1329
|
ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
|
|
1328
|
-
const ContextMenuLabel = React$
|
|
1330
|
+
const ContextMenuLabel = React$35.forwardRef(({ className, inset,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Label, {
|
|
1329
1331
|
ref,
|
|
1330
1332
|
className: cn("px-2 py-1.5 text-sm font-semibold text-foreground", inset && "pl-8", className),
|
|
1331
1333
|
...props
|
|
1332
1334
|
}));
|
|
1333
1335
|
ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
|
|
1334
|
-
const ContextMenuSeparator = React$
|
|
1336
|
+
const ContextMenuSeparator = React$35.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Separator, {
|
|
1335
1337
|
ref,
|
|
1336
1338
|
className: cn("-mx-1 my-1 h-px bg-border", className),
|
|
1337
1339
|
...props
|
|
@@ -1467,7 +1469,7 @@ function DropdownMenuSubContent({ className,...props }) {
|
|
|
1467
1469
|
const TooltipProvider = TooltipPrimitive.Provider;
|
|
1468
1470
|
const Tooltip = TooltipPrimitive.Root;
|
|
1469
1471
|
const TooltipTrigger = TooltipPrimitive.Trigger;
|
|
1470
|
-
const TooltipContent = React$
|
|
1472
|
+
const TooltipContent = React$34.forwardRef(({ className, sideOffset = 4,...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Content, {
|
|
1471
1473
|
ref,
|
|
1472
1474
|
sideOffset,
|
|
1473
1475
|
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),
|
|
@@ -1674,14 +1676,14 @@ const GanttTimerangePicker = ({ initialDateFrom, initialDateTo, onRangeChange, t
|
|
|
1674
1676
|
} : void 0);
|
|
1675
1677
|
const [isOpen, setIsOpen] = useState(false);
|
|
1676
1678
|
const [selectedPreset, setSelectedPreset] = useState(void 0);
|
|
1677
|
-
const [isSmallScreen, setIsSmallScreen] = useState(globalThis.
|
|
1679
|
+
const [isSmallScreen, setIsSmallScreen] = useState(globalThis.innerWidth === void 0 ? false : globalThis.innerWidth < 960);
|
|
1678
1680
|
useEffect(() => {
|
|
1679
1681
|
const handleResize = () => {
|
|
1680
|
-
setIsSmallScreen(globalThis.
|
|
1682
|
+
setIsSmallScreen(globalThis.innerWidth < 960);
|
|
1681
1683
|
};
|
|
1682
|
-
globalThis.
|
|
1684
|
+
globalThis.addEventListener("resize", handleResize);
|
|
1683
1685
|
return () => {
|
|
1684
|
-
globalThis.
|
|
1686
|
+
globalThis.removeEventListener("resize", handleResize);
|
|
1685
1687
|
};
|
|
1686
1688
|
}, []);
|
|
1687
1689
|
const getPresetRange = (presetName, timelineStart$1, timelineEnd$1) => {
|
|
@@ -1974,7 +1976,7 @@ function getColumnVariant(variant) {
|
|
|
1974
1976
|
}
|
|
1975
1977
|
}
|
|
1976
1978
|
function DataGridColumnHeader({ header, table, className, onPointerDown,...props }) {
|
|
1977
|
-
const [open, setOpen] = React$
|
|
1979
|
+
const [open, setOpen] = React$33.useState(false);
|
|
1978
1980
|
const column = header.column;
|
|
1979
1981
|
const label = column.columnDef.meta?.label ? column.columnDef.meta.label : typeof column.columnDef.header === "string" ? column.columnDef.header : column.id;
|
|
1980
1982
|
const isAnyColumnResizing = table.getState().columnSizingInfo.isResizingColumn;
|
|
@@ -1983,7 +1985,7 @@ function DataGridColumnHeader({ header, table, className, onPointerDown,...props
|
|
|
1983
1985
|
const pinnedPosition = column.getIsPinned();
|
|
1984
1986
|
const isPinnedLeft = pinnedPosition === "left";
|
|
1985
1987
|
const isPinnedRight = pinnedPosition === "right";
|
|
1986
|
-
const onSortingChange = React$
|
|
1988
|
+
const onSortingChange = React$33.useCallback((direction) => {
|
|
1987
1989
|
table.setSorting((prev) => {
|
|
1988
1990
|
const existingSortIndex = prev.findIndex((sort) => sort.id === column.id);
|
|
1989
1991
|
const newSort = {
|
|
@@ -1997,19 +1999,19 @@ function DataGridColumnHeader({ header, table, className, onPointerDown,...props
|
|
|
1997
1999
|
} else return [...prev, newSort];
|
|
1998
2000
|
});
|
|
1999
2001
|
}, [column.id, table]);
|
|
2000
|
-
const onSortRemove = React$
|
|
2002
|
+
const onSortRemove = React$33.useCallback(() => {
|
|
2001
2003
|
table.setSorting((prev) => prev.filter((sort) => sort.id !== column.id));
|
|
2002
2004
|
}, [column.id, table]);
|
|
2003
|
-
const onLeftPin = React$
|
|
2005
|
+
const onLeftPin = React$33.useCallback(() => {
|
|
2004
2006
|
column.pin("left");
|
|
2005
2007
|
}, [column]);
|
|
2006
|
-
const onRightPin = React$
|
|
2008
|
+
const onRightPin = React$33.useCallback(() => {
|
|
2007
2009
|
column.pin("right");
|
|
2008
2010
|
}, [column]);
|
|
2009
|
-
const onUnpin = React$
|
|
2011
|
+
const onUnpin = React$33.useCallback(() => {
|
|
2010
2012
|
column.pin(false);
|
|
2011
2013
|
}, [column]);
|
|
2012
|
-
const onTriggerPointerDown = React$
|
|
2014
|
+
const onTriggerPointerDown = React$33.useCallback((event) => {
|
|
2013
2015
|
onPointerDown?.(event);
|
|
2014
2016
|
if (event.defaultPrevented) return;
|
|
2015
2017
|
if (event.button !== 0) return;
|
|
@@ -2121,7 +2123,7 @@ function DataGridColumnHeader({ header, table, className, onPointerDown,...props
|
|
|
2121
2123
|
})
|
|
2122
2124
|
] });
|
|
2123
2125
|
}
|
|
2124
|
-
const DataGridColumnResizer = React$
|
|
2126
|
+
const DataGridColumnResizer = React$33.memo(DataGridColumnResizerImpl, (prev, next) => {
|
|
2125
2127
|
const prevColumn = prev.header.column;
|
|
2126
2128
|
const nextColumn = next.header.column;
|
|
2127
2129
|
if (prevColumn.getIsResizing() !== nextColumn.getIsResizing() || prevColumn.getSize() !== nextColumn.getSize()) return false;
|
|
@@ -2130,7 +2132,7 @@ const DataGridColumnResizer = React$31.memo(DataGridColumnResizerImpl, (prev, ne
|
|
|
2130
2132
|
});
|
|
2131
2133
|
function DataGridColumnResizerImpl({ header, table, label }) {
|
|
2132
2134
|
const defaultColumnDef = table._getDefaultColumnDef();
|
|
2133
|
-
const onDoubleClick = React$
|
|
2135
|
+
const onDoubleClick = React$33.useCallback(() => {
|
|
2134
2136
|
header.column.resetSize();
|
|
2135
2137
|
}, [header.column]);
|
|
2136
2138
|
return /* @__PURE__ */ jsx("div", {
|
|
@@ -2239,7 +2241,7 @@ function DataGridContextMenu({ table }) {
|
|
|
2239
2241
|
onRowsDelete
|
|
2240
2242
|
});
|
|
2241
2243
|
}
|
|
2242
|
-
const ContextMenu$1 = React$
|
|
2244
|
+
const ContextMenu$1 = React$32.memo(ContextMenuImpl, (prev, next) => {
|
|
2243
2245
|
if (prev.contextMenu.open !== next.contextMenu.open) return false;
|
|
2244
2246
|
if (!next.contextMenu.open) return true;
|
|
2245
2247
|
if (prev.contextMenu.x !== next.contextMenu.x) return false;
|
|
@@ -2250,7 +2252,7 @@ const ContextMenu$1 = React$30.memo(ContextMenuImpl, (prev, next) => {
|
|
|
2250
2252
|
return true;
|
|
2251
2253
|
});
|
|
2252
2254
|
function ContextMenuImpl({ table, dataGridRef, contextMenu, onContextMenuOpenChange, selectionState, onDataUpdate, onRowsDelete }) {
|
|
2253
|
-
const triggerStyle = React$
|
|
2255
|
+
const triggerStyle = React$32.useMemo(() => ({
|
|
2254
2256
|
position: "fixed",
|
|
2255
2257
|
left: `${contextMenu.x}px`,
|
|
2256
2258
|
top: `${contextMenu.y}px`,
|
|
@@ -2263,11 +2265,11 @@ function ContextMenuImpl({ table, dataGridRef, contextMenu, onContextMenuOpenCha
|
|
|
2263
2265
|
pointerEvents: "none",
|
|
2264
2266
|
opacity: 0
|
|
2265
2267
|
}), [contextMenu.x, contextMenu.y]);
|
|
2266
|
-
const onCloseAutoFocus = React$
|
|
2268
|
+
const onCloseAutoFocus = React$32.useCallback((event) => {
|
|
2267
2269
|
event.preventDefault();
|
|
2268
2270
|
dataGridRef?.current?.focus();
|
|
2269
2271
|
}, [dataGridRef]);
|
|
2270
|
-
const onCopy = React$
|
|
2272
|
+
const onCopy = React$32.useCallback(async () => {
|
|
2271
2273
|
if (!selectionState?.selectedCells || selectionState.selectedCells.size === 0) return;
|
|
2272
2274
|
const rows = table.getRowModel().rows;
|
|
2273
2275
|
const columnIds = [];
|
|
@@ -2306,7 +2308,7 @@ function ContextMenuImpl({ table, dataGridRef, contextMenu, onContextMenuOpenCha
|
|
|
2306
2308
|
await navigator.clipboard.writeText(tsvData);
|
|
2307
2309
|
toast$1.success(`${selectionState.selectedCells.size} cell${selectionState.selectedCells.size !== 1 ? "s" : ""} copied`);
|
|
2308
2310
|
}, [table, selectionState]);
|
|
2309
|
-
const canClear = React$
|
|
2311
|
+
const canClear = React$32.useMemo(() => {
|
|
2310
2312
|
if (!selectionState?.selectedCells || selectionState.selectedCells.size === 0) return false;
|
|
2311
2313
|
const visibleCols = table.getVisibleLeafColumns();
|
|
2312
2314
|
const rows = table.getRowModel().rows;
|
|
@@ -2323,7 +2325,7 @@ function ContextMenuImpl({ table, dataGridRef, contextMenu, onContextMenuOpenCha
|
|
|
2323
2325
|
}
|
|
2324
2326
|
return true;
|
|
2325
2327
|
}, [selectionState, table]);
|
|
2326
|
-
const onClear = React$
|
|
2328
|
+
const onClear = React$32.useCallback(() => {
|
|
2327
2329
|
if (!selectionState?.selectedCells || selectionState.selectedCells.size === 0) return;
|
|
2328
2330
|
if (!canClear) return;
|
|
2329
2331
|
const updates = [];
|
|
@@ -2342,7 +2344,7 @@ function ContextMenuImpl({ table, dataGridRef, contextMenu, onContextMenuOpenCha
|
|
|
2342
2344
|
selectionState,
|
|
2343
2345
|
canClear
|
|
2344
2346
|
]);
|
|
2345
|
-
const onDelete = React$
|
|
2347
|
+
const onDelete = React$32.useCallback(async () => {
|
|
2346
2348
|
if (!selectionState?.selectedCells || selectionState.selectedCells.size === 0) return;
|
|
2347
2349
|
const rowIndices = new Set();
|
|
2348
2350
|
for (const cellKey of selectionState.selectedCells) {
|
|
@@ -2419,12 +2421,12 @@ function composeRefs(...refs) {
|
|
|
2419
2421
|
* Accepts callback refs and RefObject(s)
|
|
2420
2422
|
*/
|
|
2421
2423
|
function useComposedRefs(...refs) {
|
|
2422
|
-
return React$
|
|
2424
|
+
return React$31.useCallback(composeRefs(...refs), refs);
|
|
2423
2425
|
}
|
|
2424
2426
|
|
|
2425
2427
|
//#endregion
|
|
2426
2428
|
//#region src/data-grid/data-grid-row.tsx
|
|
2427
|
-
const DataGridRow = React$
|
|
2429
|
+
const DataGridRow = React$30.memo(DataGridRowImpl, (prev, next) => {
|
|
2428
2430
|
if (prev.row.id !== next.row.id) return false;
|
|
2429
2431
|
if (prev.row.original !== next.row.original) return false;
|
|
2430
2432
|
const prevRowIndex = prev.virtualRowIndex;
|
|
@@ -2516,20 +2518,20 @@ function Input({ className, type, variant, __e2e_test_id__, onEnter,...props })
|
|
|
2516
2518
|
* prop or avoid re-executing effects when passed as a dependency
|
|
2517
2519
|
*/
|
|
2518
2520
|
function useCallbackRef(callback) {
|
|
2519
|
-
const callbackRef = React$
|
|
2520
|
-
React$
|
|
2521
|
+
const callbackRef = React$29.useRef(callback);
|
|
2522
|
+
React$29.useEffect(() => {
|
|
2521
2523
|
callbackRef.current = callback;
|
|
2522
2524
|
});
|
|
2523
|
-
return React$
|
|
2525
|
+
return React$29.useMemo(() => (...args) => callbackRef.current?.(...args), []);
|
|
2524
2526
|
}
|
|
2525
2527
|
|
|
2526
2528
|
//#endregion
|
|
2527
2529
|
//#region src/data-grid/hooks/use-debounced-callback.ts
|
|
2528
2530
|
function useDebouncedCallback(callback, delay) {
|
|
2529
2531
|
const handleCallback = useCallbackRef(callback);
|
|
2530
|
-
const debounceTimerRef = React$
|
|
2531
|
-
React$
|
|
2532
|
-
const setValue = React$
|
|
2532
|
+
const debounceTimerRef = React$28.useRef(0);
|
|
2533
|
+
React$28.useEffect(() => () => window.clearTimeout(debounceTimerRef.current), []);
|
|
2534
|
+
const setValue = React$28.useCallback((...args) => {
|
|
2533
2535
|
window.clearTimeout(debounceTimerRef.current);
|
|
2534
2536
|
debounceTimerRef.current = window.setTimeout(() => handleCallback(...args), delay);
|
|
2535
2537
|
}, [handleCallback, delay]);
|
|
@@ -2538,7 +2540,7 @@ function useDebouncedCallback(callback, delay) {
|
|
|
2538
2540
|
|
|
2539
2541
|
//#endregion
|
|
2540
2542
|
//#region src/data-grid/data-grid-search.tsx
|
|
2541
|
-
const DataGridSearch = React$
|
|
2543
|
+
const DataGridSearch = React$27.memo(DataGridSearchImpl, (prev, next) => {
|
|
2542
2544
|
if (prev.searchOpen !== next.searchOpen) return false;
|
|
2543
2545
|
if (!next.searchOpen) return true;
|
|
2544
2546
|
if (prev.searchQuery !== next.searchQuery || prev.matchIndex !== next.matchIndex) return false;
|
|
@@ -2552,13 +2554,13 @@ const DataGridSearch = React$25.memo(DataGridSearchImpl, (prev, next) => {
|
|
|
2552
2554
|
return true;
|
|
2553
2555
|
});
|
|
2554
2556
|
function DataGridSearchImpl({ searchMatches, matchIndex, searchOpen, onSearchOpenChange, searchQuery, onSearchQueryChange, onSearch, onNavigateToNextMatch, onNavigateToPrevMatch }) {
|
|
2555
|
-
const inputRef = React$
|
|
2556
|
-
React$
|
|
2557
|
+
const inputRef = React$27.useRef(null);
|
|
2558
|
+
React$27.useEffect(() => {
|
|
2557
2559
|
if (searchOpen) requestAnimationFrame(() => {
|
|
2558
2560
|
inputRef.current?.focus();
|
|
2559
2561
|
});
|
|
2560
2562
|
}, [searchOpen]);
|
|
2561
|
-
React$
|
|
2563
|
+
React$27.useEffect(() => {
|
|
2562
2564
|
if (!searchOpen) return;
|
|
2563
2565
|
function onEscape(event) {
|
|
2564
2566
|
if (event.key === "Escape") {
|
|
@@ -2569,7 +2571,7 @@ function DataGridSearchImpl({ searchMatches, matchIndex, searchOpen, onSearchOpe
|
|
|
2569
2571
|
document.addEventListener("keydown", onEscape);
|
|
2570
2572
|
return () => document.removeEventListener("keydown", onEscape);
|
|
2571
2573
|
}, [searchOpen, onSearchOpenChange]);
|
|
2572
|
-
const onKeyDown = React$
|
|
2574
|
+
const onKeyDown = React$27.useCallback((event) => {
|
|
2573
2575
|
event.stopPropagation();
|
|
2574
2576
|
if (event.key === "Enter") {
|
|
2575
2577
|
event.preventDefault();
|
|
@@ -2580,20 +2582,20 @@ function DataGridSearchImpl({ searchMatches, matchIndex, searchOpen, onSearchOpe
|
|
|
2580
2582
|
const debouncedSearch = useDebouncedCallback((query) => {
|
|
2581
2583
|
onSearch(query);
|
|
2582
2584
|
}, 150);
|
|
2583
|
-
const onChange = React$
|
|
2585
|
+
const onChange = React$27.useCallback((event) => {
|
|
2584
2586
|
const value = event.target.value;
|
|
2585
2587
|
onSearchQueryChange(value);
|
|
2586
2588
|
debouncedSearch(value);
|
|
2587
2589
|
}, [onSearchQueryChange, debouncedSearch]);
|
|
2588
|
-
const onTriggerPointerDown = React$
|
|
2590
|
+
const onTriggerPointerDown = React$27.useCallback((event) => {
|
|
2589
2591
|
const target = event.target;
|
|
2590
2592
|
if (!(target instanceof HTMLElement)) return;
|
|
2591
2593
|
if (target.hasPointerCapture(event.pointerId)) target.releasePointerCapture(event.pointerId);
|
|
2592
2594
|
if (event.button === 0 && event.ctrlKey === false && event.pointerType === "mouse" && !(event.target instanceof HTMLInputElement)) event.preventDefault();
|
|
2593
2595
|
}, []);
|
|
2594
|
-
const onPrevMatchPointerDown = React$
|
|
2595
|
-
const onNextMatchPointerDown = React$
|
|
2596
|
-
const onClose = React$
|
|
2596
|
+
const onPrevMatchPointerDown = React$27.useCallback((event) => onTriggerPointerDown(event), [onTriggerPointerDown]);
|
|
2597
|
+
const onNextMatchPointerDown = React$27.useCallback((event) => onTriggerPointerDown(event), [onTriggerPointerDown]);
|
|
2598
|
+
const onClose = React$27.useCallback(() => {
|
|
2597
2599
|
onSearchOpenChange(false);
|
|
2598
2600
|
}, [onSearchOpenChange]);
|
|
2599
2601
|
if (!searchOpen) return null;
|
|
@@ -2666,10 +2668,10 @@ function DataGrid({ dataGridRef, headerRef, rowMapRef, footerRef, table, rowVirt
|
|
|
2666
2668
|
const meta = table.options.meta;
|
|
2667
2669
|
const rowHeight = meta?.rowHeight ?? "short";
|
|
2668
2670
|
const focusedCell = meta?.focusedCell ?? null;
|
|
2669
|
-
const onGridContextMenu = React$
|
|
2671
|
+
const onGridContextMenu = React$26.useCallback((event) => {
|
|
2670
2672
|
event.preventDefault();
|
|
2671
2673
|
}, []);
|
|
2672
|
-
const onAddRowKeyDown = React$
|
|
2674
|
+
const onAddRowKeyDown = React$26.useCallback(async (event) => {
|
|
2673
2675
|
if (!onRowAdd) return;
|
|
2674
2676
|
if (event.key === "Enter" || event.key === "") {
|
|
2675
2677
|
event.preventDefault();
|
|
@@ -2804,20 +2806,20 @@ function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFoc
|
|
|
2804
2806
|
const rowOriginal = cell?.row?.original ?? {};
|
|
2805
2807
|
const colCellMeta = cell?.column?.columnDef?.meta;
|
|
2806
2808
|
const align = colCellMeta?.align ?? "left";
|
|
2807
|
-
const editableResolver = React$
|
|
2809
|
+
const editableResolver = React$25.useMemo(() => {
|
|
2808
2810
|
const v = colCellMeta?.editable;
|
|
2809
2811
|
if (v === void 0) return () => true;
|
|
2810
2812
|
return typeof v === "function" ? v : () => Boolean(v);
|
|
2811
2813
|
}, [colCellMeta?.editable]);
|
|
2812
2814
|
const isEditable = editableResolver(rowOriginal);
|
|
2813
|
-
const classNameResolver = React$
|
|
2815
|
+
const classNameResolver = React$25.useMemo(() => {
|
|
2814
2816
|
const v = colCellMeta?.className;
|
|
2815
2817
|
return typeof v === "function" ? v : () => v;
|
|
2816
2818
|
}, [colCellMeta?.className]);
|
|
2817
2819
|
const colCellClassName = classNameResolver(rowOriginal);
|
|
2818
2820
|
const isSearchMatch = meta?.getIsSearchMatch?.(rowIndex, columnId) ?? false;
|
|
2819
2821
|
const isActiveSearchMatch = meta?.getIsActiveSearchMatch?.(rowIndex, columnId) ?? false;
|
|
2820
|
-
const onClick = React$
|
|
2822
|
+
const onClick = React$25.useCallback((event) => {
|
|
2821
2823
|
if (!isEditing) {
|
|
2822
2824
|
event.preventDefault();
|
|
2823
2825
|
onClickProp?.(event);
|
|
@@ -2834,7 +2836,7 @@ function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFoc
|
|
|
2834
2836
|
onClickProp,
|
|
2835
2837
|
isEditable
|
|
2836
2838
|
]);
|
|
2837
|
-
const onContextMenu = React$
|
|
2839
|
+
const onContextMenu = React$25.useCallback((event) => {
|
|
2838
2840
|
if (!isEditing) meta?.onCellContextMenu?.(rowIndex, columnId, event);
|
|
2839
2841
|
}, [
|
|
2840
2842
|
meta,
|
|
@@ -2842,7 +2844,7 @@ function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFoc
|
|
|
2842
2844
|
columnId,
|
|
2843
2845
|
isEditing
|
|
2844
2846
|
]);
|
|
2845
|
-
const onMouseDown = React$
|
|
2847
|
+
const onMouseDown = React$25.useCallback((event) => {
|
|
2846
2848
|
if (!isEditing) meta?.onCellMouseDown?.(rowIndex, columnId, event);
|
|
2847
2849
|
}, [
|
|
2848
2850
|
meta,
|
|
@@ -2850,7 +2852,7 @@ function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFoc
|
|
|
2850
2852
|
columnId,
|
|
2851
2853
|
isEditing
|
|
2852
2854
|
]);
|
|
2853
|
-
const onMouseEnter = React$
|
|
2855
|
+
const onMouseEnter = React$25.useCallback((event) => {
|
|
2854
2856
|
if (!isEditing) meta?.onCellMouseEnter?.(rowIndex, columnId, event);
|
|
2855
2857
|
}, [
|
|
2856
2858
|
meta,
|
|
@@ -2858,10 +2860,10 @@ function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFoc
|
|
|
2858
2860
|
columnId,
|
|
2859
2861
|
isEditing
|
|
2860
2862
|
]);
|
|
2861
|
-
const onMouseUp = React$
|
|
2863
|
+
const onMouseUp = React$25.useCallback(() => {
|
|
2862
2864
|
if (!isEditing) meta?.onCellMouseUp?.();
|
|
2863
2865
|
}, [meta, isEditing]);
|
|
2864
|
-
const onDoubleClick = React$
|
|
2866
|
+
const onDoubleClick = React$25.useCallback((event) => {
|
|
2865
2867
|
if (!isEditing) {
|
|
2866
2868
|
event.preventDefault();
|
|
2867
2869
|
if (isEditable) meta?.onCellDoubleClick?.(rowIndex, columnId);
|
|
@@ -2873,7 +2875,7 @@ function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFoc
|
|
|
2873
2875
|
isEditing,
|
|
2874
2876
|
isEditable
|
|
2875
2877
|
]);
|
|
2876
|
-
const onKeyDown = React$
|
|
2878
|
+
const onKeyDown = React$25.useCallback((event) => {
|
|
2877
2879
|
onKeyDownProp?.(event);
|
|
2878
2880
|
if (event.defaultPrevented) return;
|
|
2879
2881
|
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 === "Tab") return;
|
|
@@ -2943,17 +2945,17 @@ function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFoc
|
|
|
2943
2945
|
//#region src/data-grid/cell-variants/checkbox-cell.tsx
|
|
2944
2946
|
function CheckboxCell({ cell, table, rowIndex, columnId, isFocused, isSelected }) {
|
|
2945
2947
|
const initialValue = cell.getValue();
|
|
2946
|
-
const [value, setValue] = React$
|
|
2947
|
-
const containerRef = React$
|
|
2948
|
+
const [value, setValue] = React$24.useState(Boolean(initialValue));
|
|
2949
|
+
const containerRef = React$24.useRef(null);
|
|
2948
2950
|
const meta = table.options.meta;
|
|
2949
2951
|
const colMeta = cell.column.columnDef.meta;
|
|
2950
|
-
const editableResolver = React$
|
|
2952
|
+
const editableResolver = React$24.useMemo(() => {
|
|
2951
2953
|
const v = colMeta?.editable;
|
|
2952
2954
|
if (v === void 0) return () => true;
|
|
2953
2955
|
return typeof v === "function" ? v : () => Boolean(v);
|
|
2954
2956
|
}, [colMeta?.editable]);
|
|
2955
2957
|
const isEditable = editableResolver(cell.row.original);
|
|
2956
|
-
const onCheckedChange = React$
|
|
2958
|
+
const onCheckedChange = React$24.useCallback((checked) => {
|
|
2957
2959
|
setValue(checked);
|
|
2958
2960
|
meta?.onDataUpdate?.({
|
|
2959
2961
|
rowIndex,
|
|
@@ -2965,7 +2967,7 @@ function CheckboxCell({ cell, table, rowIndex, columnId, isFocused, isSelected }
|
|
|
2965
2967
|
rowIndex,
|
|
2966
2968
|
columnId
|
|
2967
2969
|
]);
|
|
2968
|
-
const onWrapperKeyDown = React$
|
|
2970
|
+
const onWrapperKeyDown = React$24.useCallback((event) => {
|
|
2969
2971
|
if (!isEditable) return;
|
|
2970
2972
|
if (isFocused && (event.key === "" || event.key === "Enter")) {
|
|
2971
2973
|
event.preventDefault();
|
|
@@ -2978,17 +2980,17 @@ function CheckboxCell({ cell, table, rowIndex, columnId, isFocused, isSelected }
|
|
|
2978
2980
|
onCheckedChange,
|
|
2979
2981
|
isEditable
|
|
2980
2982
|
]);
|
|
2981
|
-
React$
|
|
2983
|
+
React$24.useEffect(() => {
|
|
2982
2984
|
setValue(Boolean(initialValue));
|
|
2983
2985
|
}, [initialValue]);
|
|
2984
|
-
React$
|
|
2986
|
+
React$24.useEffect(() => {
|
|
2985
2987
|
if (isFocused && !meta?.searchOpen && !meta?.isScrolling && containerRef.current) containerRef.current.focus();
|
|
2986
2988
|
}, [
|
|
2987
2989
|
isFocused,
|
|
2988
2990
|
meta?.searchOpen,
|
|
2989
2991
|
meta?.isScrolling
|
|
2990
2992
|
]);
|
|
2991
|
-
const onWrapperClick = React$
|
|
2993
|
+
const onWrapperClick = React$24.useCallback((event) => {
|
|
2992
2994
|
if (!isEditable) return;
|
|
2993
2995
|
if (isFocused) {
|
|
2994
2996
|
event.preventDefault();
|
|
@@ -3001,13 +3003,13 @@ function CheckboxCell({ cell, table, rowIndex, columnId, isFocused, isSelected }
|
|
|
3001
3003
|
onCheckedChange,
|
|
3002
3004
|
isEditable
|
|
3003
3005
|
]);
|
|
3004
|
-
const onCheckboxClick = React$
|
|
3006
|
+
const onCheckboxClick = React$24.useCallback((event) => {
|
|
3005
3007
|
event.stopPropagation();
|
|
3006
3008
|
}, []);
|
|
3007
|
-
const onCheckboxMouseDown = React$
|
|
3009
|
+
const onCheckboxMouseDown = React$24.useCallback((event) => {
|
|
3008
3010
|
event.stopPropagation();
|
|
3009
3011
|
}, []);
|
|
3010
|
-
const onCheckboxDoubleClick = React$
|
|
3012
|
+
const onCheckboxDoubleClick = React$24.useCallback((event) => {
|
|
3011
3013
|
event.stopPropagation();
|
|
3012
3014
|
}, []);
|
|
3013
3015
|
return /* @__PURE__ */ jsx(DataGridCellWrapper, {
|
|
@@ -3062,16 +3064,16 @@ function formatDateToISOString(date) {
|
|
|
3062
3064
|
}
|
|
3063
3065
|
function DateCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSelected }) {
|
|
3064
3066
|
const initialValue = cell.getValue();
|
|
3065
|
-
const [value, setValue] = React$
|
|
3066
|
-
const [open, setOpen] = React$
|
|
3067
|
-
const containerRef = React$
|
|
3067
|
+
const [value, setValue] = React$23.useState(parseToLocalDate(initialValue));
|
|
3068
|
+
const [open, setOpen] = React$23.useState(false);
|
|
3069
|
+
const containerRef = React$23.useRef(null);
|
|
3068
3070
|
const meta = table.options.meta;
|
|
3069
|
-
const prevInitialValueRef = React$
|
|
3071
|
+
const prevInitialValueRef = React$23.useRef(initialValue);
|
|
3070
3072
|
if (initialValue !== prevInitialValueRef.current) {
|
|
3071
3073
|
prevInitialValueRef.current = initialValue;
|
|
3072
3074
|
setValue(parseToLocalDate(initialValue));
|
|
3073
3075
|
}
|
|
3074
|
-
const onDateSelect = React$
|
|
3076
|
+
const onDateSelect = React$23.useCallback((date) => {
|
|
3075
3077
|
if (!date) return;
|
|
3076
3078
|
setValue(date);
|
|
3077
3079
|
meta?.onDataUpdate?.({
|
|
@@ -3086,11 +3088,11 @@ function DateCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSel
|
|
|
3086
3088
|
rowIndex,
|
|
3087
3089
|
columnId
|
|
3088
3090
|
]);
|
|
3089
|
-
const onOpenChange = React$
|
|
3091
|
+
const onOpenChange = React$23.useCallback((isOpen) => {
|
|
3090
3092
|
setOpen(isOpen);
|
|
3091
3093
|
if (!isOpen && isEditing) meta?.onCellEditingStop?.();
|
|
3092
3094
|
}, [isEditing, meta]);
|
|
3093
|
-
const onWrapperKeyDown = React$
|
|
3095
|
+
const onWrapperKeyDown = React$23.useCallback((event) => {
|
|
3094
3096
|
if (isEditing) {
|
|
3095
3097
|
if (event.key === "Escape") {
|
|
3096
3098
|
event.preventDefault();
|
|
@@ -3107,10 +3109,10 @@ function DateCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSel
|
|
|
3107
3109
|
initialValue,
|
|
3108
3110
|
meta
|
|
3109
3111
|
]);
|
|
3110
|
-
React$
|
|
3112
|
+
React$23.useEffect(() => {
|
|
3111
3113
|
setOpen(isEditing);
|
|
3112
3114
|
}, [isEditing]);
|
|
3113
|
-
React$
|
|
3115
|
+
React$23.useEffect(() => {
|
|
3114
3116
|
if (isFocused && !isEditing && !meta?.searchOpen && !meta?.isScrolling && containerRef.current) containerRef.current.focus();
|
|
3115
3117
|
}, [
|
|
3116
3118
|
isFocused,
|
|
@@ -3162,7 +3164,7 @@ function DateCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSel
|
|
|
3162
3164
|
//#region src/data-grid/cell-variants/gantt-cell.tsx
|
|
3163
3165
|
function GanttCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSelected }) {
|
|
3164
3166
|
const initialValue = cell.getValue();
|
|
3165
|
-
const containerRef = React$
|
|
3167
|
+
const containerRef = React$22.useRef(null);
|
|
3166
3168
|
const cellOpts = cell.column.columnDef.meta?.cell;
|
|
3167
3169
|
const ts = cellOpts?.dateRangeFrom ?? cellOpts?.timelineStart;
|
|
3168
3170
|
const te = cellOpts?.dateRangeTo ?? cellOpts?.timelineEnd;
|
|
@@ -3221,13 +3223,13 @@ function Textarea({ className, variant, __e2e_test_id__,...props }) {
|
|
|
3221
3223
|
//#region src/data-grid/cell-variants/long-text-cell.tsx
|
|
3222
3224
|
function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSelected }) {
|
|
3223
3225
|
const initialValue = cell.getValue();
|
|
3224
|
-
const [value, setValue] = React$
|
|
3225
|
-
const [open, setOpen] = React$
|
|
3226
|
-
const textareaRef = React$
|
|
3227
|
-
const containerRef = React$
|
|
3226
|
+
const [value, setValue] = React$21.useState(initialValue ?? "");
|
|
3227
|
+
const [open, setOpen] = React$21.useState(false);
|
|
3228
|
+
const textareaRef = React$21.useRef(null);
|
|
3229
|
+
const containerRef = React$21.useRef(null);
|
|
3228
3230
|
const meta = table.options.meta;
|
|
3229
3231
|
const sideOffset = -(containerRef.current?.clientHeight ?? 0);
|
|
3230
|
-
const prevInitialValueRef = React$
|
|
3232
|
+
const prevInitialValueRef = React$21.useRef(initialValue);
|
|
3231
3233
|
if (initialValue !== prevInitialValueRef.current) {
|
|
3232
3234
|
prevInitialValueRef.current = initialValue;
|
|
3233
3235
|
setValue(initialValue ?? "");
|
|
@@ -3239,7 +3241,7 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
|
|
|
3239
3241
|
value: newValue
|
|
3240
3242
|
});
|
|
3241
3243
|
}, 300);
|
|
3242
|
-
const onSave = React$
|
|
3244
|
+
const onSave = React$21.useCallback(() => {
|
|
3243
3245
|
if (value !== initialValue) meta?.onDataUpdate?.({
|
|
3244
3246
|
rowIndex,
|
|
3245
3247
|
columnId,
|
|
@@ -3254,7 +3256,7 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
|
|
|
3254
3256
|
rowIndex,
|
|
3255
3257
|
columnId
|
|
3256
3258
|
]);
|
|
3257
|
-
const onCancel = React$
|
|
3259
|
+
const onCancel = React$21.useCallback(() => {
|
|
3258
3260
|
setValue(initialValue ?? "");
|
|
3259
3261
|
meta?.onDataUpdate?.({
|
|
3260
3262
|
rowIndex,
|
|
@@ -3269,12 +3271,12 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
|
|
|
3269
3271
|
rowIndex,
|
|
3270
3272
|
columnId
|
|
3271
3273
|
]);
|
|
3272
|
-
const onChange = React$
|
|
3274
|
+
const onChange = React$21.useCallback((event) => {
|
|
3273
3275
|
const newValue = event.target.value;
|
|
3274
3276
|
setValue(newValue);
|
|
3275
3277
|
debouncedSave(newValue);
|
|
3276
3278
|
}, [debouncedSave]);
|
|
3277
|
-
const onOpenChange = React$
|
|
3279
|
+
const onOpenChange = React$21.useCallback((isOpen) => {
|
|
3278
3280
|
setOpen(isOpen);
|
|
3279
3281
|
if (!isOpen) {
|
|
3280
3282
|
if (value !== initialValue) meta?.onDataUpdate?.({
|
|
@@ -3291,7 +3293,7 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
|
|
|
3291
3293
|
rowIndex,
|
|
3292
3294
|
columnId
|
|
3293
3295
|
]);
|
|
3294
|
-
const onOpenAutoFocus = React$
|
|
3296
|
+
const onOpenAutoFocus = React$21.useCallback((event) => {
|
|
3295
3297
|
event.preventDefault();
|
|
3296
3298
|
if (textareaRef.current) {
|
|
3297
3299
|
textareaRef.current.focus();
|
|
@@ -3299,7 +3301,7 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
|
|
|
3299
3301
|
textareaRef.current.setSelectionRange(length, length);
|
|
3300
3302
|
}
|
|
3301
3303
|
}, []);
|
|
3302
|
-
const onWrapperKeyDown = React$
|
|
3304
|
+
const onWrapperKeyDown = React$21.useCallback((event) => {
|
|
3303
3305
|
if (isEditing && !open) {
|
|
3304
3306
|
if (event.key === "Escape") {
|
|
3305
3307
|
event.preventDefault();
|
|
@@ -3323,7 +3325,7 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
|
|
|
3323
3325
|
rowIndex,
|
|
3324
3326
|
columnId
|
|
3325
3327
|
]);
|
|
3326
|
-
const onTextareaKeyDown = React$
|
|
3328
|
+
const onTextareaKeyDown = React$21.useCallback((event) => {
|
|
3327
3329
|
if (event.key === "Escape") {
|
|
3328
3330
|
event.preventDefault();
|
|
3329
3331
|
onCancel();
|
|
@@ -3333,7 +3335,7 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
|
|
|
3333
3335
|
}
|
|
3334
3336
|
event.stopPropagation();
|
|
3335
3337
|
}, [onCancel, onSave]);
|
|
3336
|
-
const onTextareaBlur = React$
|
|
3338
|
+
const onTextareaBlur = React$21.useCallback(() => {
|
|
3337
3339
|
if (value !== initialValue) meta?.onDataUpdate?.({
|
|
3338
3340
|
rowIndex,
|
|
3339
3341
|
columnId,
|
|
@@ -3348,7 +3350,7 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
|
|
|
3348
3350
|
rowIndex,
|
|
3349
3351
|
columnId
|
|
3350
3352
|
]);
|
|
3351
|
-
React$
|
|
3353
|
+
React$21.useEffect(() => {
|
|
3352
3354
|
if (isEditing && !open) setOpen(true);
|
|
3353
3355
|
if (isFocused && !isEditing && !meta?.searchOpen && !meta?.isScrolling && containerRef.current) containerRef.current.focus();
|
|
3354
3356
|
}, [
|
|
@@ -3401,14 +3403,14 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
|
|
|
3401
3403
|
//#endregion
|
|
3402
3404
|
//#region src/data-grid/cell-variants/multi-select-cell.tsx
|
|
3403
3405
|
function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSelected }) {
|
|
3404
|
-
const cellValue = React$
|
|
3406
|
+
const cellValue = React$20.useMemo(() => cell.getValue() ?? [], [cell]);
|
|
3405
3407
|
const cellId = `${rowIndex}-${columnId}`;
|
|
3406
|
-
const prevCellIdRef = React$
|
|
3407
|
-
const [selectedValues, setSelectedValues] = React$
|
|
3408
|
-
const [open, setOpen] = React$
|
|
3409
|
-
const [searchValue, setSearchValue] = React$
|
|
3410
|
-
const containerRef = React$
|
|
3411
|
-
const inputRef = React$
|
|
3408
|
+
const prevCellIdRef = React$20.useRef(cellId);
|
|
3409
|
+
const [selectedValues, setSelectedValues] = React$20.useState(cellValue);
|
|
3410
|
+
const [open, setOpen] = React$20.useState(false);
|
|
3411
|
+
const [searchValue, setSearchValue] = React$20.useState("");
|
|
3412
|
+
const containerRef = React$20.useRef(null);
|
|
3413
|
+
const inputRef = React$20.useRef(null);
|
|
3412
3414
|
const meta = table.options.meta;
|
|
3413
3415
|
const cellOpts = cell.column.columnDef.meta?.cell;
|
|
3414
3416
|
const options = cellOpts?.variant === "multi-select" ? cellOpts.options : [];
|
|
@@ -3419,7 +3421,7 @@ function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing
|
|
|
3419
3421
|
setOpen(false);
|
|
3420
3422
|
setSearchValue("");
|
|
3421
3423
|
}
|
|
3422
|
-
const onValueChange = React$
|
|
3424
|
+
const onValueChange = React$20.useCallback((value) => {
|
|
3423
3425
|
const newValues = selectedValues.includes(value) ? selectedValues.filter((v) => v !== value) : [...selectedValues, value];
|
|
3424
3426
|
setSelectedValues(newValues);
|
|
3425
3427
|
meta?.onDataUpdate?.({
|
|
@@ -3435,7 +3437,7 @@ function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing
|
|
|
3435
3437
|
rowIndex,
|
|
3436
3438
|
columnId
|
|
3437
3439
|
]);
|
|
3438
|
-
const removeValue = React$
|
|
3440
|
+
const removeValue = React$20.useCallback((valueToRemove, event) => {
|
|
3439
3441
|
event?.stopPropagation();
|
|
3440
3442
|
event?.preventDefault();
|
|
3441
3443
|
const newValues = selectedValues.filter((v) => v !== valueToRemove);
|
|
@@ -3452,7 +3454,7 @@ function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing
|
|
|
3452
3454
|
rowIndex,
|
|
3453
3455
|
columnId
|
|
3454
3456
|
]);
|
|
3455
|
-
const clearAll = React$
|
|
3457
|
+
const clearAll = React$20.useCallback(() => {
|
|
3456
3458
|
setSelectedValues([]);
|
|
3457
3459
|
meta?.onDataUpdate?.({
|
|
3458
3460
|
rowIndex,
|
|
@@ -3465,18 +3467,18 @@ function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing
|
|
|
3465
3467
|
rowIndex,
|
|
3466
3468
|
columnId
|
|
3467
3469
|
]);
|
|
3468
|
-
const onOpenChange = React$
|
|
3470
|
+
const onOpenChange = React$20.useCallback((isOpen) => {
|
|
3469
3471
|
setOpen(isOpen);
|
|
3470
3472
|
if (!isOpen) {
|
|
3471
3473
|
setSearchValue("");
|
|
3472
3474
|
meta?.onCellEditingStop?.();
|
|
3473
3475
|
}
|
|
3474
3476
|
}, [meta]);
|
|
3475
|
-
const onOpenAutoFocus = React$
|
|
3477
|
+
const onOpenAutoFocus = React$20.useCallback((event) => {
|
|
3476
3478
|
event.preventDefault();
|
|
3477
3479
|
inputRef.current?.focus();
|
|
3478
3480
|
}, []);
|
|
3479
|
-
const onWrapperKeyDown = React$
|
|
3481
|
+
const onWrapperKeyDown = React$20.useCallback((event) => {
|
|
3480
3482
|
if (isEditing) {
|
|
3481
3483
|
if (event.key === "Escape") {
|
|
3482
3484
|
event.preventDefault();
|
|
@@ -3496,7 +3498,7 @@ function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing
|
|
|
3496
3498
|
cellValue,
|
|
3497
3499
|
meta
|
|
3498
3500
|
]);
|
|
3499
|
-
const onInputKeyDown = React$
|
|
3501
|
+
const onInputKeyDown = React$20.useCallback((event) => {
|
|
3500
3502
|
if (event.key === "Backspace" && searchValue === "" && selectedValues.length > 0) {
|
|
3501
3503
|
event.preventDefault();
|
|
3502
3504
|
const lastValue = selectedValues.at(-1);
|
|
@@ -3508,7 +3510,7 @@ function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing
|
|
|
3508
3510
|
selectedValues,
|
|
3509
3511
|
removeValue
|
|
3510
3512
|
]);
|
|
3511
|
-
React$
|
|
3513
|
+
React$20.useEffect(() => {
|
|
3512
3514
|
if (isEditing && !open) setOpen(true);
|
|
3513
3515
|
if (isFocused && !isEditing && !meta?.searchOpen && !meta?.isScrolling && containerRef.current) containerRef.current.focus();
|
|
3514
3516
|
}, [
|
|
@@ -3518,7 +3520,7 @@ function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing
|
|
|
3518
3520
|
meta?.searchOpen,
|
|
3519
3521
|
meta?.isScrolling
|
|
3520
3522
|
]);
|
|
3521
|
-
React$
|
|
3523
|
+
React$20.useEffect(() => {
|
|
3522
3524
|
if (open && inputRef.current) setTimeout(() => inputRef.current?.focus(), 0);
|
|
3523
3525
|
}, [open]);
|
|
3524
3526
|
const displayLabels = selectedValues.map((val) => options.find((opt) => opt.value === val)?.label ?? val).filter(Boolean);
|
|
@@ -3623,20 +3625,20 @@ function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing
|
|
|
3623
3625
|
//#region src/data-grid/cell-variants/number-cell.tsx
|
|
3624
3626
|
function NumberCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSelected }) {
|
|
3625
3627
|
const initialValue = cell.getValue();
|
|
3626
|
-
const inputRef = React$
|
|
3627
|
-
const containerRef = React$
|
|
3628
|
+
const inputRef = React$19.useRef(null);
|
|
3629
|
+
const containerRef = React$19.useRef(null);
|
|
3628
3630
|
const meta = table.options.meta;
|
|
3629
3631
|
const colMeta = cell.column.columnDef.meta;
|
|
3630
3632
|
const cellOptions = colMeta?.cell;
|
|
3631
|
-
const editableResolver = React$
|
|
3633
|
+
const editableResolver = React$19.useMemo(() => {
|
|
3632
3634
|
const v = colMeta?.editable;
|
|
3633
3635
|
if (v === void 0) return () => true;
|
|
3634
3636
|
return typeof v === "function" ? v : () => Boolean(v);
|
|
3635
3637
|
}, [colMeta?.editable]);
|
|
3636
3638
|
const isEditable = editableResolver(cell.row.original);
|
|
3637
3639
|
const { min, max, step, prefix = "", suffix = "", fallbackValue = "" } = cellOptions?.variant === "number" ? cellOptions : {};
|
|
3638
|
-
const [editValue, setEditValue] = React$
|
|
3639
|
-
const onBlur = React$
|
|
3640
|
+
const [editValue, setEditValue] = React$19.useState(initialValue !== null && initialValue !== void 0 ? String(initialValue) : "");
|
|
3641
|
+
const onBlur = React$19.useCallback(() => {
|
|
3640
3642
|
const numValue = editValue === "" ? null : Number(editValue);
|
|
3641
3643
|
if (numValue !== initialValue) meta?.onDataUpdate?.({
|
|
3642
3644
|
rowIndex,
|
|
@@ -3651,13 +3653,13 @@ function NumberCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
|
|
|
3651
3653
|
initialValue,
|
|
3652
3654
|
editValue
|
|
3653
3655
|
]);
|
|
3654
|
-
const onChange = React$
|
|
3656
|
+
const onChange = React$19.useCallback((event) => {
|
|
3655
3657
|
setEditValue(event.target.value);
|
|
3656
3658
|
}, []);
|
|
3657
|
-
const parseNumValue = React$
|
|
3659
|
+
const parseNumValue = React$19.useCallback(() => {
|
|
3658
3660
|
return editValue === "" ? null : Number(editValue);
|
|
3659
3661
|
}, [editValue]);
|
|
3660
|
-
const saveAndStop = React$
|
|
3662
|
+
const saveAndStop = React$19.useCallback((options) => {
|
|
3661
3663
|
const numValue = parseNumValue();
|
|
3662
3664
|
if (numValue !== initialValue) meta?.onDataUpdate?.({
|
|
3663
3665
|
rowIndex,
|
|
@@ -3672,7 +3674,7 @@ function NumberCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
|
|
|
3672
3674
|
rowIndex,
|
|
3673
3675
|
columnId
|
|
3674
3676
|
]);
|
|
3675
|
-
const handleEditingKeyDown = React$
|
|
3677
|
+
const handleEditingKeyDown = React$19.useCallback((event) => {
|
|
3676
3678
|
if (event.key === "Enter") {
|
|
3677
3679
|
event.preventDefault();
|
|
3678
3680
|
saveAndStop({ moveToNextRow: true });
|
|
@@ -3685,12 +3687,12 @@ function NumberCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
|
|
|
3685
3687
|
inputRef.current?.blur();
|
|
3686
3688
|
}
|
|
3687
3689
|
}, [saveAndStop, initialValue]);
|
|
3688
|
-
const handleFocusedKeyDown = React$
|
|
3690
|
+
const handleFocusedKeyDown = React$19.useCallback((event) => {
|
|
3689
3691
|
if (!isEditable) return;
|
|
3690
3692
|
if (event.key === "Backspace") setEditValue("");
|
|
3691
3693
|
else if (event.key.length === 1 && !event.ctrlKey && !event.metaKey) setEditValue(event.key);
|
|
3692
3694
|
}, [isEditable]);
|
|
3693
|
-
const onWrapperKeyDown = React$
|
|
3695
|
+
const onWrapperKeyDown = React$19.useCallback((event) => {
|
|
3694
3696
|
if (isEditing) handleEditingKeyDown(event);
|
|
3695
3697
|
else if (isFocused) handleFocusedKeyDown(event);
|
|
3696
3698
|
}, [
|
|
@@ -3699,10 +3701,10 @@ function NumberCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
|
|
|
3699
3701
|
handleEditingKeyDown,
|
|
3700
3702
|
handleFocusedKeyDown
|
|
3701
3703
|
]);
|
|
3702
|
-
React$
|
|
3704
|
+
React$19.useEffect(() => {
|
|
3703
3705
|
setEditValue(initialValue !== null && initialValue !== void 0 ? String(initialValue) : "");
|
|
3704
3706
|
}, [initialValue]);
|
|
3705
|
-
React$
|
|
3707
|
+
React$19.useEffect(() => {
|
|
3706
3708
|
if (isEditing && inputRef.current) {
|
|
3707
3709
|
inputRef.current.focus();
|
|
3708
3710
|
inputRef.current.select();
|
|
@@ -3750,7 +3752,7 @@ function NumberCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
|
|
|
3750
3752
|
//#region src/data-grid/cell-variants/react-node-cell.tsx
|
|
3751
3753
|
function ReactNodeCell({ cell, table, rowIndex, columnId, isFocused, isSelected }) {
|
|
3752
3754
|
const children = cell.getValue();
|
|
3753
|
-
const containerRef = React$
|
|
3755
|
+
const containerRef = React$18.useRef(null);
|
|
3754
3756
|
return /* @__PURE__ */ jsx(DataGridCellWrapper, {
|
|
3755
3757
|
ref: containerRef,
|
|
3756
3758
|
cell,
|
|
@@ -3769,16 +3771,16 @@ function ReactNodeCell({ cell, table, rowIndex, columnId, isFocused, isSelected
|
|
|
3769
3771
|
//#region src/data-grid/cell-variants/select-cell.tsx
|
|
3770
3772
|
function SelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSelected }) {
|
|
3771
3773
|
const initialValue = cell.getValue();
|
|
3772
|
-
const [value, setValue] = React$
|
|
3773
|
-
const [open, setOpen] = React$
|
|
3774
|
-
const containerRef = React$
|
|
3775
|
-
const inputRef = React$
|
|
3774
|
+
const [value, setValue] = React$17.useState(initialValue);
|
|
3775
|
+
const [open, setOpen] = React$17.useState(false);
|
|
3776
|
+
const containerRef = React$17.useRef(null);
|
|
3777
|
+
const inputRef = React$17.useRef(null);
|
|
3776
3778
|
const meta = table.options.meta;
|
|
3777
3779
|
const cellOpts = cell.column.columnDef.meta?.cell;
|
|
3778
3780
|
const options = cellOpts?.variant === "select" ? cellOpts.options : [];
|
|
3779
3781
|
const hasSearch = (cellOpts?.variant === "select" && cellOpts?.hasSearch) ?? false;
|
|
3780
3782
|
const sideOffset = -(inputRef.current?.clientHeight ?? 0);
|
|
3781
|
-
const onValueChange = React$
|
|
3783
|
+
const onValueChange = React$17.useCallback((newValue) => {
|
|
3782
3784
|
setValue(newValue);
|
|
3783
3785
|
meta?.onDataUpdate?.({
|
|
3784
3786
|
rowIndex,
|
|
@@ -3791,15 +3793,15 @@ function SelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
|
|
|
3791
3793
|
rowIndex,
|
|
3792
3794
|
columnId
|
|
3793
3795
|
]);
|
|
3794
|
-
const onOpenChange = React$
|
|
3796
|
+
const onOpenChange = React$17.useCallback((isOpen) => {
|
|
3795
3797
|
setOpen(isOpen);
|
|
3796
3798
|
if (!isOpen) meta?.onCellEditingStop?.();
|
|
3797
3799
|
}, [meta]);
|
|
3798
|
-
const onOpenAutoFocus = React$
|
|
3800
|
+
const onOpenAutoFocus = React$17.useCallback((event) => {
|
|
3799
3801
|
event.preventDefault();
|
|
3800
3802
|
inputRef.current?.focus();
|
|
3801
3803
|
}, []);
|
|
3802
|
-
const onWrapperKeyDown = React$
|
|
3804
|
+
const onWrapperKeyDown = React$17.useCallback((event) => {
|
|
3803
3805
|
if (isEditing) {
|
|
3804
3806
|
if (event.key === "Escape") {
|
|
3805
3807
|
event.preventDefault();
|
|
@@ -3817,10 +3819,10 @@ function SelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
|
|
|
3817
3819
|
initialValue,
|
|
3818
3820
|
meta
|
|
3819
3821
|
]);
|
|
3820
|
-
React$
|
|
3822
|
+
React$17.useEffect(() => {
|
|
3821
3823
|
setValue(initialValue);
|
|
3822
3824
|
}, [initialValue]);
|
|
3823
|
-
React$
|
|
3825
|
+
React$17.useEffect(() => {
|
|
3824
3826
|
if (isEditing && !open) setOpen(true);
|
|
3825
3827
|
if (isFocused && !isEditing && !meta?.searchOpen && !meta?.isScrolling && containerRef.current) containerRef.current.focus();
|
|
3826
3828
|
}, [
|
|
@@ -3905,18 +3907,18 @@ function SelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
|
|
|
3905
3907
|
//#region src/data-grid/cell-variants/short-text-cell.tsx
|
|
3906
3908
|
function ShortTextCell({ cell, table, rowIndex, columnId, isEditing, isFocused, isSelected }) {
|
|
3907
3909
|
const initialValue = cell.getValue();
|
|
3908
|
-
const [value, setValue] = React$
|
|
3909
|
-
const inputRef = React$
|
|
3910
|
-
const containerRef = React$
|
|
3910
|
+
const [value, setValue] = React$16.useState(initialValue);
|
|
3911
|
+
const inputRef = React$16.useRef(null);
|
|
3912
|
+
const containerRef = React$16.useRef(null);
|
|
3911
3913
|
const meta = table.options.meta;
|
|
3912
3914
|
const colMeta = cell.column.columnDef.meta;
|
|
3913
|
-
const editableResolver = React$
|
|
3915
|
+
const editableResolver = React$16.useMemo(() => {
|
|
3914
3916
|
const v = colMeta?.editable;
|
|
3915
3917
|
if (v === void 0) return () => true;
|
|
3916
3918
|
return typeof v === "function" ? v : () => Boolean(v);
|
|
3917
3919
|
}, [colMeta?.editable]);
|
|
3918
3920
|
const isEditable = editableResolver(cell.row.original);
|
|
3919
|
-
const onBlur = React$
|
|
3921
|
+
const onBlur = React$16.useCallback(() => {
|
|
3920
3922
|
const currentValue = inputRef.current?.value ?? "";
|
|
3921
3923
|
if (currentValue !== initialValue) meta?.onDataUpdate?.({
|
|
3922
3924
|
rowIndex,
|
|
@@ -3930,10 +3932,10 @@ function ShortTextCell({ cell, table, rowIndex, columnId, isEditing, isFocused,
|
|
|
3930
3932
|
columnId,
|
|
3931
3933
|
initialValue
|
|
3932
3934
|
]);
|
|
3933
|
-
const onChange = React$
|
|
3935
|
+
const onChange = React$16.useCallback((event) => {
|
|
3934
3936
|
setValue(event.target.value);
|
|
3935
3937
|
}, []);
|
|
3936
|
-
const handleEditingKeyDown = React$
|
|
3938
|
+
const handleEditingKeyDown = React$16.useCallback((event) => {
|
|
3937
3939
|
if (event.key === "Enter") {
|
|
3938
3940
|
event.preventDefault();
|
|
3939
3941
|
const currentValue = inputRef.current?.value ?? "";
|
|
@@ -3963,13 +3965,13 @@ function ShortTextCell({ cell, table, rowIndex, columnId, isEditing, isFocused,
|
|
|
3963
3965
|
rowIndex,
|
|
3964
3966
|
columnId
|
|
3965
3967
|
]);
|
|
3966
|
-
const handleFocusedKeyDown = React$
|
|
3968
|
+
const handleFocusedKeyDown = React$16.useCallback((event) => {
|
|
3967
3969
|
if (event.key.length === 1 && !event.ctrlKey && !event.metaKey) {
|
|
3968
3970
|
if (!isEditable) return;
|
|
3969
3971
|
setValue(event.key);
|
|
3970
3972
|
}
|
|
3971
3973
|
}, [isEditable]);
|
|
3972
|
-
const onWrapperKeyDown = React$
|
|
3974
|
+
const onWrapperKeyDown = React$16.useCallback((event) => {
|
|
3973
3975
|
if (isEditing) handleEditingKeyDown(event);
|
|
3974
3976
|
else if (isFocused) handleFocusedKeyDown(event);
|
|
3975
3977
|
}, [
|
|
@@ -3978,10 +3980,10 @@ function ShortTextCell({ cell, table, rowIndex, columnId, isEditing, isFocused,
|
|
|
3978
3980
|
handleEditingKeyDown,
|
|
3979
3981
|
handleFocusedKeyDown
|
|
3980
3982
|
]);
|
|
3981
|
-
React$
|
|
3983
|
+
React$16.useEffect(() => {
|
|
3982
3984
|
setValue(initialValue);
|
|
3983
3985
|
}, [initialValue]);
|
|
3984
|
-
React$
|
|
3986
|
+
React$16.useEffect(() => {
|
|
3985
3987
|
if (isEditing && inputRef.current) {
|
|
3986
3988
|
inputRef.current.focus();
|
|
3987
3989
|
inputRef.current.setSelectionRange(inputRef.current.value.length, inputRef.current.value.length);
|
|
@@ -4129,16 +4131,16 @@ function DataGridCell({ cell, table }) {
|
|
|
4129
4131
|
//#endregion
|
|
4130
4132
|
//#region src/data-grid/data-grid-view-menu.tsx
|
|
4131
4133
|
function DataGridViewMenu({ table,...props }) {
|
|
4132
|
-
const viewableColumns = React$
|
|
4133
|
-
const [order, setOrder] = React$
|
|
4134
|
+
const viewableColumns = React$15.useMemo(() => table.getAllColumns().filter((column) => typeof column.accessorFn !== "undefined"), [table]);
|
|
4135
|
+
const [order, setOrder] = React$15.useState(() => {
|
|
4134
4136
|
const stateOrder = table.getState().columnOrder ?? [];
|
|
4135
4137
|
if (stateOrder && stateOrder.length > 0) return stateOrder;
|
|
4136
4138
|
return table.getAllColumns().map((c) => c.id);
|
|
4137
4139
|
});
|
|
4138
|
-
const [searchQuery, setSearchQuery] = React$
|
|
4139
|
-
const [isDragging, setIsDragging] = React$
|
|
4140
|
-
const [insertionIndex, setInsertionIndex] = React$
|
|
4141
|
-
React$
|
|
4140
|
+
const [searchQuery, setSearchQuery] = React$15.useState("");
|
|
4141
|
+
const [isDragging, setIsDragging] = React$15.useState(false);
|
|
4142
|
+
const [insertionIndex, setInsertionIndex] = React$15.useState(null);
|
|
4143
|
+
React$15.useEffect(() => {
|
|
4142
4144
|
const stateOrder = table.getState().columnOrder ?? [];
|
|
4143
4145
|
if (stateOrder && stateOrder.length > 0) {
|
|
4144
4146
|
setOrder(stateOrder);
|
|
@@ -4146,8 +4148,8 @@ function DataGridViewMenu({ table,...props }) {
|
|
|
4146
4148
|
}
|
|
4147
4149
|
setOrder(table.getAllColumns().map((c) => c.id));
|
|
4148
4150
|
}, [table]);
|
|
4149
|
-
const visibleSet = React$
|
|
4150
|
-
const orderedColumns = React$
|
|
4151
|
+
const visibleSet = React$15.useMemo(() => new Set(viewableColumns.map((c) => c.id)), [viewableColumns]);
|
|
4152
|
+
const orderedColumns = React$15.useMemo(() => {
|
|
4151
4153
|
const ordered = [];
|
|
4152
4154
|
for (const id of order) {
|
|
4153
4155
|
const col = viewableColumns.find((c) => c.id === id);
|
|
@@ -4160,12 +4162,12 @@ function DataGridViewMenu({ table,...props }) {
|
|
|
4160
4162
|
viewableColumns,
|
|
4161
4163
|
table
|
|
4162
4164
|
]);
|
|
4163
|
-
const draggingRef = React$
|
|
4164
|
-
const groupRef = React$
|
|
4165
|
-
const getBaseOrder = React$
|
|
4165
|
+
const draggingRef = React$15.useRef(null);
|
|
4166
|
+
const groupRef = React$15.useRef(null);
|
|
4167
|
+
const getBaseOrder = React$15.useCallback(() => {
|
|
4166
4168
|
return table.getState().columnOrder && table.getState().columnOrder.length ? table.getState().columnOrder.slice() : table.getAllColumns().map((c) => c.id);
|
|
4167
4169
|
}, [table]);
|
|
4168
|
-
const computeInsertionIndex = React$
|
|
4170
|
+
const computeInsertionIndex = React$15.useCallback((clientY) => {
|
|
4169
4171
|
const baseOrder = getBaseOrder();
|
|
4170
4172
|
const el = groupRef.current;
|
|
4171
4173
|
if (!el) return baseOrder.length;
|
|
@@ -4187,7 +4189,7 @@ function DataGridViewMenu({ table,...props }) {
|
|
|
4187
4189
|
setIsDragging(false);
|
|
4188
4190
|
setInsertionIndex(null);
|
|
4189
4191
|
}
|
|
4190
|
-
const doDrop = React$
|
|
4192
|
+
const doDrop = React$15.useCallback((dragId, toIndex) => {
|
|
4191
4193
|
const baseOrder = table.getState().columnOrder && table.getState().columnOrder.length ? table.getState().columnOrder.slice() : table.getAllColumns().map((c) => c.id);
|
|
4192
4194
|
const fromIndex = baseOrder.indexOf(dragId);
|
|
4193
4195
|
if (fromIndex === -1) {
|
|
@@ -4204,7 +4206,7 @@ function DataGridViewMenu({ table,...props }) {
|
|
|
4204
4206
|
setOrder(copy.filter((id) => visibleSet.has(id)));
|
|
4205
4207
|
onDragEnd();
|
|
4206
4208
|
}, [table, visibleSet]);
|
|
4207
|
-
const startPointerDrag = React$
|
|
4209
|
+
const startPointerDrag = React$15.useCallback((e, id) => {
|
|
4208
4210
|
e.preventDefault();
|
|
4209
4211
|
draggingRef.current = id;
|
|
4210
4212
|
setIsDragging(true);
|
|
@@ -4214,8 +4216,8 @@ function DataGridViewMenu({ table,...props }) {
|
|
|
4214
4216
|
setInsertionIndex(idx);
|
|
4215
4217
|
};
|
|
4216
4218
|
const onUp = (ev) => {
|
|
4217
|
-
|
|
4218
|
-
|
|
4219
|
+
globalThis.removeEventListener("pointermove", onMove);
|
|
4220
|
+
globalThis.removeEventListener("pointerup", onUp);
|
|
4219
4221
|
const dragId = draggingRef.current;
|
|
4220
4222
|
const toIndex = computeInsertionIndex(ev.clientY);
|
|
4221
4223
|
if (dragId) doDrop(dragId, toIndex);
|
|
@@ -4223,8 +4225,8 @@ function DataGridViewMenu({ table,...props }) {
|
|
|
4223
4225
|
setIsDragging(false);
|
|
4224
4226
|
setInsertionIndex(null);
|
|
4225
4227
|
};
|
|
4226
|
-
|
|
4227
|
-
|
|
4228
|
+
globalThis.addEventListener("pointermove", onMove);
|
|
4229
|
+
globalThis.addEventListener("pointerup", onUp);
|
|
4228
4230
|
}, [computeInsertionIndex, doDrop]);
|
|
4229
4231
|
function insertionWouldBeNoOp(targetIndex) {
|
|
4230
4232
|
if (targetIndex === null) return false;
|
|
@@ -4237,7 +4239,7 @@ function DataGridViewMenu({ table,...props }) {
|
|
|
4237
4239
|
if (fromIndex < targetIndex) insertAt = targetIndex - 1;
|
|
4238
4240
|
return insertAt === fromIndex;
|
|
4239
4241
|
}
|
|
4240
|
-
const dragFromHandle = React$
|
|
4242
|
+
const dragFromHandle = React$15.useRef(false);
|
|
4241
4243
|
function resetTableView() {
|
|
4242
4244
|
const defaultOrder = table.getAllColumns().map((c) => c.id);
|
|
4243
4245
|
try {
|
|
@@ -4245,7 +4247,7 @@ function DataGridViewMenu({ table,...props }) {
|
|
|
4245
4247
|
} finally {
|
|
4246
4248
|
try {
|
|
4247
4249
|
if (typeof window !== "undefined") {
|
|
4248
|
-
const path =
|
|
4250
|
+
const path = globalThis.location?.pathname ?? "unknown";
|
|
4249
4251
|
const prefix = `pxl.dataGrid:${path}:`;
|
|
4250
4252
|
const keys = [];
|
|
4251
4253
|
for (let i = 0; i < localStorage.length; i++) {
|
|
@@ -4284,7 +4286,7 @@ function DataGridViewMenu({ table,...props }) {
|
|
|
4284
4286
|
const currentBase = table.getState().columnOrder && table.getState().columnOrder.length ? table.getState().columnOrder.slice() : table.getAllColumns().map((c) => c.id);
|
|
4285
4287
|
const pos = currentBase.indexOf(column.id);
|
|
4286
4288
|
const isHideable = column.getCanHide();
|
|
4287
|
-
return /* @__PURE__ */ jsxs(React$
|
|
4289
|
+
return /* @__PURE__ */ jsxs(React$15.Fragment, { children: [/* @__PURE__ */ jsxs(CommandItem, {
|
|
4288
4290
|
value: column.id,
|
|
4289
4291
|
"data-col-id": column.id,
|
|
4290
4292
|
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"),
|
|
@@ -4344,30 +4346,30 @@ const MIN_COLUMN_SIZE = 60;
|
|
|
4344
4346
|
const MAX_COLUMN_SIZE = 800;
|
|
4345
4347
|
const SEARCH_SHORTCUT_KEY = "f";
|
|
4346
4348
|
const NON_NAVIGABLE_COLUMN_IDS = ["select", "actions"];
|
|
4347
|
-
const useIsomorphicLayoutEffect = typeof window !== "undefined" ? React$
|
|
4349
|
+
const useIsomorphicLayoutEffect = typeof window !== "undefined" ? React$14.useLayoutEffect : React$14.useEffect;
|
|
4348
4350
|
function useLazyRef(fn) {
|
|
4349
|
-
const ref = React$
|
|
4351
|
+
const ref = React$14.useRef(null);
|
|
4350
4352
|
if (ref.current === null) ref.current = fn();
|
|
4351
4353
|
return ref;
|
|
4352
4354
|
}
|
|
4353
4355
|
function useAsRef(data) {
|
|
4354
|
-
const ref = React$
|
|
4356
|
+
const ref = React$14.useRef(data);
|
|
4355
4357
|
useIsomorphicLayoutEffect(() => {
|
|
4356
4358
|
ref.current = data;
|
|
4357
4359
|
});
|
|
4358
4360
|
return ref;
|
|
4359
4361
|
}
|
|
4360
4362
|
function useStore(store, selector) {
|
|
4361
|
-
const getSnapshot = React$
|
|
4362
|
-
return React$
|
|
4363
|
+
const getSnapshot = React$14.useCallback(() => selector(store.getState()), [store, selector]);
|
|
4364
|
+
return React$14.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
|
|
4363
4365
|
}
|
|
4364
4366
|
function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRowsDelete: onRowsDeleteProp, onCellFocus: onCellFocusProp, rowHeight: rowHeightProp = DEFAULT_ROW_HEIGHT, overscan = OVERSCAN, initialState, autoFocus = false, enableColumnSelection = false, enableSearch = false,...dataGridProps }) {
|
|
4365
|
-
const dataGridRef = React$
|
|
4366
|
-
const tableRef = React$
|
|
4367
|
-
const rowVirtualizerRef = React$
|
|
4368
|
-
const headerRef = React$
|
|
4369
|
-
const rowMapRef = React$
|
|
4370
|
-
const footerRef = React$
|
|
4367
|
+
const dataGridRef = React$14.useRef(null);
|
|
4368
|
+
const tableRef = React$14.useRef(null);
|
|
4369
|
+
const rowVirtualizerRef = React$14.useRef(null);
|
|
4370
|
+
const headerRef = React$14.useRef(null);
|
|
4371
|
+
const rowMapRef = React$14.useRef(new Map());
|
|
4372
|
+
const footerRef = React$14.useRef(null);
|
|
4371
4373
|
const dataGridPropsRef = useAsRef(dataGridProps);
|
|
4372
4374
|
const listenersRef = useLazyRef(() => new Set());
|
|
4373
4375
|
const stateRef = useLazyRef(() => {
|
|
@@ -4395,7 +4397,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
4395
4397
|
isScrolling: false
|
|
4396
4398
|
};
|
|
4397
4399
|
});
|
|
4398
|
-
const store = React$
|
|
4400
|
+
const store = React$14.useMemo(() => {
|
|
4399
4401
|
let isBatching = false;
|
|
4400
4402
|
let pendingNotification = false;
|
|
4401
4403
|
return {
|
|
@@ -4439,7 +4441,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
4439
4441
|
}
|
|
4440
4442
|
};
|
|
4441
4443
|
}, [listenersRef, stateRef]);
|
|
4442
|
-
React$
|
|
4444
|
+
React$14.useEffect(() => {
|
|
4443
4445
|
store.setState("rowHeight", rowHeightProp);
|
|
4444
4446
|
}, [rowHeightProp, store]);
|
|
4445
4447
|
const focusedCell = useStore(store, (state) => state.focusedCell);
|
|
@@ -4455,20 +4457,20 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
4455
4457
|
const rowHeight = useStore(store, (state) => state.rowHeight);
|
|
4456
4458
|
const isScrolling = useStore(store, (state) => state.isScrolling);
|
|
4457
4459
|
const rowHeightValue = getRowHeightValue(rowHeight);
|
|
4458
|
-
const columnIds = React$
|
|
4460
|
+
const columnIds = React$14.useMemo(() => {
|
|
4459
4461
|
return columns.map((c) => {
|
|
4460
4462
|
if (c.id) return c.id;
|
|
4461
4463
|
if ("accessorKey" in c) return c.accessorKey;
|
|
4462
4464
|
return void 0;
|
|
4463
4465
|
}).filter((id) => Boolean(id));
|
|
4464
4466
|
}, [columns]);
|
|
4465
|
-
const storageKey = React$
|
|
4467
|
+
const storageKey = React$14.useMemo(() => {
|
|
4466
4468
|
if (typeof window === "undefined") return void 0;
|
|
4467
|
-
const path =
|
|
4469
|
+
const path = globalThis.location?.pathname ?? "unknown";
|
|
4468
4470
|
const cols = columnIds.join("|");
|
|
4469
4471
|
return `pxl.dataGrid:${path}:${cols}`;
|
|
4470
4472
|
}, [columnIds]);
|
|
4471
|
-
const persistedState = React$
|
|
4473
|
+
const persistedState = React$14.useMemo(() => {
|
|
4472
4474
|
if (!storageKey) return void 0;
|
|
4473
4475
|
try {
|
|
4474
4476
|
const raw = localStorage.getItem(storageKey);
|
|
@@ -4479,7 +4481,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
4479
4481
|
return void 0;
|
|
4480
4482
|
}
|
|
4481
4483
|
}, [storageKey]);
|
|
4482
|
-
const mergedInitialState = React$
|
|
4484
|
+
const mergedInitialState = React$14.useMemo(() => {
|
|
4483
4485
|
const base = { ...initialState ?? {} };
|
|
4484
4486
|
if (persistedState) try {
|
|
4485
4487
|
if (persistedState.columnOrder) base.columnOrder = persistedState.columnOrder;
|
|
@@ -4488,12 +4490,12 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
4488
4490
|
} catch (_) {}
|
|
4489
4491
|
return base;
|
|
4490
4492
|
}, [initialState, persistedState]);
|
|
4491
|
-
const getNavigableColumnIds = React$
|
|
4493
|
+
const getNavigableColumnIds = React$14.useCallback(() => {
|
|
4492
4494
|
const t = tableRef.current;
|
|
4493
4495
|
if (t) return t.getVisibleLeafColumns().map((c) => c.id).filter((c) => !NON_NAVIGABLE_COLUMN_IDS.includes(c));
|
|
4494
4496
|
return columnIds.filter((c) => !NON_NAVIGABLE_COLUMN_IDS.includes(c));
|
|
4495
4497
|
}, [columnIds]);
|
|
4496
|
-
const onDataUpdate = React$
|
|
4498
|
+
const onDataUpdate = React$14.useCallback((updates) => {
|
|
4497
4499
|
const updateArray = Array.isArray(updates) ? updates : [updates];
|
|
4498
4500
|
if (updateArray.length === 0) return;
|
|
4499
4501
|
const currentTable = tableRef.current;
|
|
@@ -4532,10 +4534,10 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
4532
4534
|
});
|
|
4533
4535
|
onDataChange?.(newData);
|
|
4534
4536
|
}, [data, onDataChange]);
|
|
4535
|
-
const getIsCellSelected = React$
|
|
4537
|
+
const getIsCellSelected = React$14.useCallback((rowIndex, columnId) => {
|
|
4536
4538
|
return selectionState.selectedCells.has(getCellKey(rowIndex, columnId));
|
|
4537
4539
|
}, [selectionState.selectedCells]);
|
|
4538
|
-
const clearSelection = React$
|
|
4540
|
+
const clearSelection = React$14.useCallback(() => {
|
|
4539
4541
|
store.batch(() => {
|
|
4540
4542
|
store.setState("selectionState", {
|
|
4541
4543
|
selectedCells: new Set(),
|
|
@@ -4545,7 +4547,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
4545
4547
|
store.setState("rowSelection", {});
|
|
4546
4548
|
});
|
|
4547
4549
|
}, [store]);
|
|
4548
|
-
const selectAll = React$
|
|
4550
|
+
const selectAll = React$14.useCallback(() => {
|
|
4549
4551
|
const allCells = new Set();
|
|
4550
4552
|
const currentTable = tableRef.current;
|
|
4551
4553
|
const rows = currentTable?.getRowModel().rows ?? [];
|
|
@@ -4572,7 +4574,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
4572
4574
|
data.length,
|
|
4573
4575
|
store
|
|
4574
4576
|
]);
|
|
4575
|
-
const selectColumn = React$
|
|
4577
|
+
const selectColumn = React$14.useCallback((columnId) => {
|
|
4576
4578
|
const currentTable = tableRef.current;
|
|
4577
4579
|
const rows = currentTable?.getRowModel().rows ?? [];
|
|
4578
4580
|
const rowCount = rows.length ?? data.length;
|
|
@@ -4594,7 +4596,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
4594
4596
|
isSelecting: false
|
|
4595
4597
|
});
|
|
4596
4598
|
}, [data.length, store]);
|
|
4597
|
-
const selectRange = React$
|
|
4599
|
+
const selectRange = React$14.useCallback((start, end, isSelecting = false) => {
|
|
4598
4600
|
const visibleCols = getNavigableColumnIds();
|
|
4599
4601
|
const startColIndex = visibleCols.indexOf(start.columnId);
|
|
4600
4602
|
const endColIndex = visibleCols.indexOf(end.columnId);
|
|
@@ -4616,7 +4618,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
4616
4618
|
isSelecting
|
|
4617
4619
|
});
|
|
4618
4620
|
}, [getNavigableColumnIds, store]);
|
|
4619
|
-
const focusCell = React$
|
|
4621
|
+
const focusCell = React$14.useCallback((rowIndex, columnId) => {
|
|
4620
4622
|
store.batch(() => {
|
|
4621
4623
|
store.setState("focusedCell", {
|
|
4622
4624
|
rowIndex,
|
|
@@ -4632,7 +4634,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
4632
4634
|
if (currentState.searchOpen) return;
|
|
4633
4635
|
if (dataGridRef.current && document.activeElement !== dataGridRef.current) dataGridRef.current.focus();
|
|
4634
4636
|
}, [store, onCellFocusProp]);
|
|
4635
|
-
const onRowsDelete = React$
|
|
4637
|
+
const onRowsDelete = React$14.useCallback(async (rowIndices) => {
|
|
4636
4638
|
if (!onRowsDeleteProp || rowIndices.length === 0) return;
|
|
4637
4639
|
const currentTable = tableRef.current;
|
|
4638
4640
|
const rows = currentTable?.getRowModel().rows;
|
|
@@ -4671,7 +4673,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
4671
4673
|
getNavigableColumnIds,
|
|
4672
4674
|
focusCell
|
|
4673
4675
|
]);
|
|
4674
|
-
const navigateCell = React$
|
|
4676
|
+
const navigateCell = React$14.useCallback((direction) => {
|
|
4675
4677
|
const currentState = store.getState();
|
|
4676
4678
|
if (!currentState.focusedCell) return;
|
|
4677
4679
|
const { rowIndex, columnId } = currentState.focusedCell;
|
|
@@ -4797,7 +4799,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
4797
4799
|
data.length,
|
|
4798
4800
|
rowHeightValue
|
|
4799
4801
|
]);
|
|
4800
|
-
const onCellEditingStart = React$
|
|
4802
|
+
const onCellEditingStart = React$14.useCallback((rowIndex, columnId) => {
|
|
4801
4803
|
store.batch(() => {
|
|
4802
4804
|
store.setState("focusedCell", {
|
|
4803
4805
|
rowIndex,
|
|
@@ -4809,7 +4811,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
4809
4811
|
});
|
|
4810
4812
|
});
|
|
4811
4813
|
}, [store]);
|
|
4812
|
-
const onCellEditingStop = React$
|
|
4814
|
+
const onCellEditingStop = React$14.useCallback((opts) => {
|
|
4813
4815
|
const currentState = store.getState();
|
|
4814
4816
|
const currentEditing = currentState.editingCell;
|
|
4815
4817
|
store.setState("editingCell", null);
|
|
@@ -4835,7 +4837,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
4835
4837
|
focusCell,
|
|
4836
4838
|
navigateCell
|
|
4837
4839
|
]);
|
|
4838
|
-
const onSearchOpenChange = React$
|
|
4840
|
+
const onSearchOpenChange = React$14.useCallback((open) => {
|
|
4839
4841
|
if (open) {
|
|
4840
4842
|
store.setState("searchOpen", true);
|
|
4841
4843
|
return;
|
|
@@ -4854,7 +4856,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
4854
4856
|
});
|
|
4855
4857
|
if (dataGridRef.current && document.activeElement !== dataGridRef.current) dataGridRef.current.focus();
|
|
4856
4858
|
}, [store]);
|
|
4857
|
-
const onSearch = React$
|
|
4859
|
+
const onSearch = React$14.useCallback((query) => {
|
|
4858
4860
|
if (!query.trim()) {
|
|
4859
4861
|
store.batch(() => {
|
|
4860
4862
|
store.setState("searchMatches", []);
|
|
@@ -4889,8 +4891,8 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
4889
4891
|
rowVirtualizerRef.current?.scrollToIndex(firstMatch.rowIndex, { align: "center" });
|
|
4890
4892
|
}
|
|
4891
4893
|
}, [columnIds, store]);
|
|
4892
|
-
const onSearchQueryChange = React$
|
|
4893
|
-
const onNavigateToPrevMatch = React$
|
|
4894
|
+
const onSearchQueryChange = React$14.useCallback((query) => store.setState("searchQuery", query), [store]);
|
|
4895
|
+
const onNavigateToPrevMatch = React$14.useCallback(() => {
|
|
4894
4896
|
const currentState = store.getState();
|
|
4895
4897
|
if (currentState.searchMatches.length === 0) return;
|
|
4896
4898
|
const prevIndex = currentState.matchIndex - 1 < 0 ? currentState.searchMatches.length - 1 : currentState.matchIndex - 1;
|
|
@@ -4905,7 +4907,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
4905
4907
|
});
|
|
4906
4908
|
}
|
|
4907
4909
|
}, [store, focusCell]);
|
|
4908
|
-
const onNavigateToNextMatch = React$
|
|
4910
|
+
const onNavigateToNextMatch = React$14.useCallback(() => {
|
|
4909
4911
|
const currentState = store.getState();
|
|
4910
4912
|
if (currentState.searchMatches.length === 0) return;
|
|
4911
4913
|
const nextIndex = (currentState.matchIndex + 1) % currentState.searchMatches.length;
|
|
@@ -4920,15 +4922,15 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
4920
4922
|
});
|
|
4921
4923
|
}
|
|
4922
4924
|
}, [store, focusCell]);
|
|
4923
|
-
const getIsSearchMatch = React$
|
|
4925
|
+
const getIsSearchMatch = React$14.useCallback((rowIndex, columnId) => {
|
|
4924
4926
|
return searchMatches.some((match) => match.rowIndex === rowIndex && match.columnId === columnId);
|
|
4925
4927
|
}, [searchMatches]);
|
|
4926
|
-
const getIsActiveSearchMatch = React$
|
|
4928
|
+
const getIsActiveSearchMatch = React$14.useCallback((rowIndex, columnId) => {
|
|
4927
4929
|
if (matchIndex < 0) return false;
|
|
4928
4930
|
const currentMatch = searchMatches[matchIndex];
|
|
4929
4931
|
return currentMatch?.rowIndex === rowIndex && currentMatch?.columnId === columnId;
|
|
4930
4932
|
}, [searchMatches, matchIndex]);
|
|
4931
|
-
const blurCell = React$
|
|
4933
|
+
const blurCell = React$14.useCallback(() => {
|
|
4932
4934
|
const currentState = store.getState();
|
|
4933
4935
|
if (currentState.editingCell && document.activeElement instanceof HTMLElement) document.activeElement.blur();
|
|
4934
4936
|
store.batch(() => {
|
|
@@ -4936,7 +4938,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
4936
4938
|
store.setState("editingCell", null);
|
|
4937
4939
|
});
|
|
4938
4940
|
}, [store]);
|
|
4939
|
-
const onCellClick = React$
|
|
4941
|
+
const onCellClick = React$14.useCallback((rowIndex, columnId, event) => {
|
|
4940
4942
|
if (event?.button === 2) return;
|
|
4941
4943
|
const currentState = store.getState();
|
|
4942
4944
|
const currentFocused = currentState.focusedCell;
|
|
@@ -4984,11 +4986,11 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
4984
4986
|
selectRange,
|
|
4985
4987
|
clearSelection
|
|
4986
4988
|
]);
|
|
4987
|
-
const onCellDoubleClick = React$
|
|
4989
|
+
const onCellDoubleClick = React$14.useCallback((rowIndex, columnId, event) => {
|
|
4988
4990
|
if (event?.defaultPrevented) return;
|
|
4989
4991
|
onCellEditingStart(rowIndex, columnId);
|
|
4990
4992
|
}, [onCellEditingStart]);
|
|
4991
|
-
const onCellMouseDown = React$
|
|
4993
|
+
const onCellMouseDown = React$14.useCallback((rowIndex, columnId, event) => {
|
|
4992
4994
|
if (event.button === 2) return;
|
|
4993
4995
|
event.preventDefault();
|
|
4994
4996
|
if (!event.ctrlKey && !event.metaKey && !event.shiftKey) store.batch(() => {
|
|
@@ -5009,7 +5011,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5009
5011
|
store.setState("rowSelection", {});
|
|
5010
5012
|
});
|
|
5011
5013
|
}, [store]);
|
|
5012
|
-
const onCellMouseEnter = React$
|
|
5014
|
+
const onCellMouseEnter = React$14.useCallback((rowIndex, columnId, _event) => {
|
|
5013
5015
|
const currentState = store.getState();
|
|
5014
5016
|
if (currentState.selectionState.isSelecting && currentState.selectionState.selectionRange) {
|
|
5015
5017
|
const start = currentState.selectionState.selectionRange.start;
|
|
@@ -5025,14 +5027,14 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5025
5027
|
selectRange,
|
|
5026
5028
|
focusCell
|
|
5027
5029
|
]);
|
|
5028
|
-
const onCellMouseUp = React$
|
|
5030
|
+
const onCellMouseUp = React$14.useCallback(() => {
|
|
5029
5031
|
const currentState = store.getState();
|
|
5030
5032
|
store.setState("selectionState", {
|
|
5031
5033
|
...currentState.selectionState,
|
|
5032
5034
|
isSelecting: false
|
|
5033
5035
|
});
|
|
5034
5036
|
}, [store]);
|
|
5035
|
-
const onCellContextMenu = React$
|
|
5037
|
+
const onCellContextMenu = React$14.useCallback((rowIndex, columnId, event) => {
|
|
5036
5038
|
event.preventDefault();
|
|
5037
5039
|
event.stopPropagation();
|
|
5038
5040
|
const currentState = store.getState();
|
|
@@ -5064,7 +5066,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5064
5066
|
y: event.clientY
|
|
5065
5067
|
});
|
|
5066
5068
|
}, [store]);
|
|
5067
|
-
const onContextMenuOpenChange = React$
|
|
5069
|
+
const onContextMenuOpenChange = React$14.useCallback((open) => {
|
|
5068
5070
|
if (!open) {
|
|
5069
5071
|
const currentMenu = store.getState().contextMenu;
|
|
5070
5072
|
store.setState("contextMenu", {
|
|
@@ -5074,7 +5076,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5074
5076
|
});
|
|
5075
5077
|
}
|
|
5076
5078
|
}, [store]);
|
|
5077
|
-
const onDataGridKeyDown = React$
|
|
5079
|
+
const onDataGridKeyDown = React$14.useCallback((event) => {
|
|
5078
5080
|
const currentState = store.getState();
|
|
5079
5081
|
const { key, ctrlKey, metaKey, shiftKey } = event;
|
|
5080
5082
|
const isCtrlPressed = ctrlKey || metaKey;
|
|
@@ -5222,12 +5224,12 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5222
5224
|
onNavigateToPrevMatch,
|
|
5223
5225
|
enableSearch
|
|
5224
5226
|
]);
|
|
5225
|
-
const onSortingChange = React$
|
|
5227
|
+
const onSortingChange = React$14.useCallback((updater) => {
|
|
5226
5228
|
const currentState = store.getState();
|
|
5227
5229
|
const newSorting = typeof updater === "function" ? updater(currentState.sorting) : updater;
|
|
5228
5230
|
store.setState("sorting", newSorting);
|
|
5229
5231
|
}, [store]);
|
|
5230
|
-
const onRowSelectionChange = React$
|
|
5232
|
+
const onRowSelectionChange = React$14.useCallback((updater) => {
|
|
5231
5233
|
const currentState = store.getState();
|
|
5232
5234
|
const newRowSelection = typeof updater === "function" ? updater(currentState.rowSelection) : updater;
|
|
5233
5235
|
const selectedRows = Object.keys(newRowSelection).filter((key) => newRowSelection[key]);
|
|
@@ -5249,7 +5251,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5249
5251
|
store.setState("editingCell", null);
|
|
5250
5252
|
});
|
|
5251
5253
|
}, [store, columnIds]);
|
|
5252
|
-
const onRowSelect = React$
|
|
5254
|
+
const onRowSelect = React$14.useCallback((rowIndex, selected, shiftKey) => {
|
|
5253
5255
|
const currentState = store.getState();
|
|
5254
5256
|
const rows = tableRef.current?.getRowModel().rows ?? [];
|
|
5255
5257
|
const currentRow = rows[rowIndex];
|
|
@@ -5269,12 +5271,12 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5269
5271
|
});
|
|
5270
5272
|
store.setState("lastClickedRowIndex", rowIndex);
|
|
5271
5273
|
}, [store, onRowSelectionChange]);
|
|
5272
|
-
const onRowHeightChange = React$
|
|
5274
|
+
const onRowHeightChange = React$14.useCallback((updater) => {
|
|
5273
5275
|
const currentState = store.getState();
|
|
5274
5276
|
const newRowHeight = typeof updater === "function" ? updater(currentState.rowHeight) : updater;
|
|
5275
5277
|
store.setState("rowHeight", newRowHeight);
|
|
5276
5278
|
}, [store]);
|
|
5277
|
-
const onColumnClick = React$
|
|
5279
|
+
const onColumnClick = React$14.useCallback((columnId) => {
|
|
5278
5280
|
if (!enableColumnSelection) {
|
|
5279
5281
|
clearSelection();
|
|
5280
5282
|
return;
|
|
@@ -5285,12 +5287,12 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5285
5287
|
selectColumn,
|
|
5286
5288
|
clearSelection
|
|
5287
5289
|
]);
|
|
5288
|
-
const defaultColumn = React$
|
|
5290
|
+
const defaultColumn = React$14.useMemo(() => ({
|
|
5289
5291
|
cell: DataGridCell,
|
|
5290
5292
|
minSize: MIN_COLUMN_SIZE,
|
|
5291
5293
|
maxSize: MAX_COLUMN_SIZE
|
|
5292
5294
|
}), []);
|
|
5293
|
-
const tableOptions = React$
|
|
5295
|
+
const tableOptions = React$14.useMemo(() => ({
|
|
5294
5296
|
...dataGridPropsRef.current,
|
|
5295
5297
|
data,
|
|
5296
5298
|
columns,
|
|
@@ -5373,7 +5375,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5373
5375
|
const table = useReactTable(tableOptions);
|
|
5374
5376
|
if (!tableRef.current) tableRef.current = table;
|
|
5375
5377
|
const columnSizing = table.getState().columnSizing;
|
|
5376
|
-
const columnSizeVars = React$
|
|
5378
|
+
const columnSizeVars = React$14.useMemo(() => {
|
|
5377
5379
|
const headers = table.getFlatHeaders();
|
|
5378
5380
|
const colSizes = {};
|
|
5379
5381
|
for (const header of headers) {
|
|
@@ -5406,7 +5408,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5406
5408
|
}
|
|
5407
5409
|
});
|
|
5408
5410
|
if (!rowVirtualizerRef.current) rowVirtualizerRef.current = rowVirtualizer;
|
|
5409
|
-
const onScrollToRow = React$
|
|
5411
|
+
const onScrollToRow = React$14.useCallback((opts) => {
|
|
5410
5412
|
const rowIndex = opts?.rowIndex ?? 0;
|
|
5411
5413
|
const columnId = opts?.columnId;
|
|
5412
5414
|
rowVirtualizer.scrollToIndex(rowIndex, { align: "center" });
|
|
@@ -5430,7 +5432,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5430
5432
|
getNavigableColumnIds,
|
|
5431
5433
|
store
|
|
5432
5434
|
]);
|
|
5433
|
-
const onRowAdd = React$
|
|
5435
|
+
const onRowAdd = React$14.useCallback(async (event) => {
|
|
5434
5436
|
if (!onRowAddProp) return;
|
|
5435
5437
|
const result = await onRowAddProp(event);
|
|
5436
5438
|
if (event?.defaultPrevented || result === null) return;
|
|
@@ -5463,7 +5465,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5463
5465
|
table.getState().columnVisibility,
|
|
5464
5466
|
table.getState().columnPinning
|
|
5465
5467
|
]);
|
|
5466
|
-
const searchState = React$
|
|
5468
|
+
const searchState = React$14.useMemo(() => {
|
|
5467
5469
|
if (!enableSearch) return void 0;
|
|
5468
5470
|
return {
|
|
5469
5471
|
searchMatches,
|
|
@@ -5488,7 +5490,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5488
5490
|
onNavigateToNextMatch,
|
|
5489
5491
|
onNavigateToPrevMatch
|
|
5490
5492
|
]);
|
|
5491
|
-
React$
|
|
5493
|
+
React$14.useEffect(() => {
|
|
5492
5494
|
const dataGridElement = dataGridRef.current;
|
|
5493
5495
|
if (!dataGridElement) return;
|
|
5494
5496
|
dataGridElement.addEventListener("keydown", onDataGridKeyDown);
|
|
@@ -5496,7 +5498,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5496
5498
|
dataGridElement.removeEventListener("keydown", onDataGridKeyDown);
|
|
5497
5499
|
};
|
|
5498
5500
|
}, [onDataGridKeyDown]);
|
|
5499
|
-
React$
|
|
5501
|
+
React$14.useEffect(() => {
|
|
5500
5502
|
function onGlobalKeyDown(event) {
|
|
5501
5503
|
const dataGridElement = dataGridRef.current;
|
|
5502
5504
|
if (!dataGridElement) return;
|
|
@@ -5530,9 +5532,9 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5530
5532
|
}
|
|
5531
5533
|
}
|
|
5532
5534
|
}
|
|
5533
|
-
|
|
5535
|
+
globalThis.addEventListener("keydown", onGlobalKeyDown, true);
|
|
5534
5536
|
return () => {
|
|
5535
|
-
|
|
5537
|
+
globalThis.removeEventListener("keydown", onGlobalKeyDown, true);
|
|
5536
5538
|
};
|
|
5537
5539
|
}, [
|
|
5538
5540
|
enableSearch,
|
|
@@ -5540,7 +5542,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5540
5542
|
store,
|
|
5541
5543
|
clearSelection
|
|
5542
5544
|
]);
|
|
5543
|
-
React$
|
|
5545
|
+
React$14.useEffect(() => {
|
|
5544
5546
|
const currentState = store.getState();
|
|
5545
5547
|
if (autoFocus && data.length > 0 && columns.length > 0 && !currentState.focusedCell) {
|
|
5546
5548
|
const _nav = getNavigableColumnIds();
|
|
@@ -5566,7 +5568,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5566
5568
|
getNavigableColumnIds,
|
|
5567
5569
|
focusCell
|
|
5568
5570
|
]);
|
|
5569
|
-
React$
|
|
5571
|
+
React$14.useEffect(() => {
|
|
5570
5572
|
function onOutsideClick(event) {
|
|
5571
5573
|
if (event.button === 2) return;
|
|
5572
5574
|
if (dataGridRef.current && !dataGridRef.current.contains(event.target)) {
|
|
@@ -5588,7 +5590,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5588
5590
|
blurCell,
|
|
5589
5591
|
clearSelection
|
|
5590
5592
|
]);
|
|
5591
|
-
React$
|
|
5593
|
+
React$14.useEffect(() => {
|
|
5592
5594
|
function onCleanup() {
|
|
5593
5595
|
document.removeEventListener("selectstart", preventSelection);
|
|
5594
5596
|
document.removeEventListener("contextmenu", preventContextMenu);
|
|
@@ -5648,7 +5650,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5648
5650
|
//#endregion
|
|
5649
5651
|
//#region src/date-picker/date-picker.tsx
|
|
5650
5652
|
function DatePickerDemo() {
|
|
5651
|
-
const [date, setDate] = React$
|
|
5653
|
+
const [date, setDate] = React$13.useState();
|
|
5652
5654
|
return /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
|
|
5653
5655
|
asChild: true,
|
|
5654
5656
|
children: /* @__PURE__ */ jsxs(Button, {
|
|
@@ -5678,13 +5680,13 @@ Drawer.displayName = "Drawer";
|
|
|
5678
5680
|
const DrawerTrigger = Drawer$1.Trigger;
|
|
5679
5681
|
const DrawerPortal = Drawer$1.Portal;
|
|
5680
5682
|
const DrawerClose = Drawer$1.Close;
|
|
5681
|
-
const DrawerOverlay = React$
|
|
5683
|
+
const DrawerOverlay = React$12.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Drawer$1.Overlay, {
|
|
5682
5684
|
ref,
|
|
5683
5685
|
className: cn("fixed inset-0 z-50 bg-black/80", className),
|
|
5684
5686
|
...props
|
|
5685
5687
|
}));
|
|
5686
5688
|
DrawerOverlay.displayName = Drawer$1.Overlay.displayName;
|
|
5687
|
-
const DrawerContent = React$
|
|
5689
|
+
const DrawerContent = React$12.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsxs(DrawerPortal, { children: [/* @__PURE__ */ jsx(DrawerOverlay, {}), /* @__PURE__ */ jsxs(Drawer$1.Content, {
|
|
5688
5690
|
ref,
|
|
5689
5691
|
className: cn("fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background", className),
|
|
5690
5692
|
...props,
|
|
@@ -5701,13 +5703,13 @@ const DrawerFooter = ({ className,...props }) => /* @__PURE__ */ jsx("div", {
|
|
|
5701
5703
|
...props
|
|
5702
5704
|
});
|
|
5703
5705
|
DrawerFooter.displayName = "DrawerFooter";
|
|
5704
|
-
const DrawerTitle = React$
|
|
5706
|
+
const DrawerTitle = React$12.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Drawer$1.Title, {
|
|
5705
5707
|
ref,
|
|
5706
5708
|
className: cn("text-lg font-semibold leading-none tracking-tight", className),
|
|
5707
5709
|
...props
|
|
5708
5710
|
}));
|
|
5709
5711
|
DrawerTitle.displayName = Drawer$1.Title.displayName;
|
|
5710
|
-
const DrawerDescription = React$
|
|
5712
|
+
const DrawerDescription = React$12.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Drawer$1.Description, {
|
|
5711
5713
|
ref,
|
|
5712
5714
|
className: cn("text-sm text-muted-foreground", className),
|
|
5713
5715
|
...props
|
|
@@ -5726,7 +5728,7 @@ function Label({ className,...props }) {
|
|
|
5726
5728
|
|
|
5727
5729
|
//#endregion
|
|
5728
5730
|
//#region src/separator/separator.tsx
|
|
5729
|
-
const Separator = React$
|
|
5731
|
+
const Separator = React$11.forwardRef(({ className, orientation = "horizontal", decorative = true,...props }, ref) => /* @__PURE__ */ jsx(SeparatorPrimitive.Root, {
|
|
5730
5732
|
ref,
|
|
5731
5733
|
decorative,
|
|
5732
5734
|
orientation,
|
|
@@ -5845,6 +5847,22 @@ function FieldError({ className, children, errors,...props }) {
|
|
|
5845
5847
|
});
|
|
5846
5848
|
}
|
|
5847
5849
|
|
|
5850
|
+
//#endregion
|
|
5851
|
+
//#region src/hooks/use-is-mobile.ts
|
|
5852
|
+
function useIsMobile(mobileBreakpoint = 768) {
|
|
5853
|
+
const [isMobile, setIsMobile] = React$10.useState(false);
|
|
5854
|
+
React$10.useEffect(() => {
|
|
5855
|
+
const mql = globalThis.matchMedia(`(max-width: ${mobileBreakpoint - 1}px)`);
|
|
5856
|
+
const onChange = () => {
|
|
5857
|
+
setIsMobile(globalThis.innerWidth < mobileBreakpoint);
|
|
5858
|
+
};
|
|
5859
|
+
mql.addEventListener("change", onChange);
|
|
5860
|
+
setIsMobile(globalThis.innerWidth < mobileBreakpoint);
|
|
5861
|
+
return () => mql.removeEventListener("change", onChange);
|
|
5862
|
+
}, [mobileBreakpoint]);
|
|
5863
|
+
return isMobile;
|
|
5864
|
+
}
|
|
5865
|
+
|
|
5848
5866
|
//#endregion
|
|
5849
5867
|
//#region src/mark-value-renderer/mark-value-renderer.tsx
|
|
5850
5868
|
/**
|
|
@@ -5876,32 +5894,32 @@ const MenubarGroup = MenubarPrimitive.Group;
|
|
|
5876
5894
|
const MenubarPortal = MenubarPrimitive.Portal;
|
|
5877
5895
|
const MenubarSub = MenubarPrimitive.Sub;
|
|
5878
5896
|
const MenubarRadioGroup = MenubarPrimitive.RadioGroup;
|
|
5879
|
-
const Menubar = React$
|
|
5897
|
+
const Menubar = React$9.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(MenubarPrimitive.Root, {
|
|
5880
5898
|
ref,
|
|
5881
5899
|
className: cn("flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm", className),
|
|
5882
5900
|
...props
|
|
5883
5901
|
}));
|
|
5884
5902
|
Menubar.displayName = MenubarPrimitive.Root.displayName;
|
|
5885
|
-
const MenubarTrigger = React$
|
|
5903
|
+
const MenubarTrigger = React$9.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(MenubarPrimitive.Trigger, {
|
|
5886
5904
|
ref,
|
|
5887
5905
|
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),
|
|
5888
5906
|
...props
|
|
5889
5907
|
}));
|
|
5890
5908
|
MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;
|
|
5891
|
-
const MenubarSubTrigger = React$
|
|
5909
|
+
const MenubarSubTrigger = React$9.forwardRef(({ className, inset, children,...props }, ref) => /* @__PURE__ */ jsxs(MenubarPrimitive.SubTrigger, {
|
|
5892
5910
|
ref,
|
|
5893
5911
|
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),
|
|
5894
5912
|
...props,
|
|
5895
5913
|
children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto h-4 w-4" })]
|
|
5896
5914
|
}));
|
|
5897
5915
|
MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
|
|
5898
|
-
const MenubarSubContent = React$
|
|
5916
|
+
const MenubarSubContent = React$9.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(MenubarPrimitive.SubContent, {
|
|
5899
5917
|
ref,
|
|
5900
5918
|
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),
|
|
5901
5919
|
...props
|
|
5902
5920
|
}));
|
|
5903
5921
|
MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
|
|
5904
|
-
const MenubarContent = React$
|
|
5922
|
+
const MenubarContent = React$9.forwardRef(({ className, align = "start", alignOffset = -4, sideOffset = 8,...props }, ref) => /* @__PURE__ */ jsx(MenubarPrimitive.Portal, { children: /* @__PURE__ */ jsx(MenubarPrimitive.Content, {
|
|
5905
5923
|
ref,
|
|
5906
5924
|
align,
|
|
5907
5925
|
alignOffset,
|
|
@@ -5910,13 +5928,13 @@ const MenubarContent = React$8.forwardRef(({ className, align = "start", alignOf
|
|
|
5910
5928
|
...props
|
|
5911
5929
|
}) }));
|
|
5912
5930
|
MenubarContent.displayName = MenubarPrimitive.Content.displayName;
|
|
5913
|
-
const MenubarItem = React$
|
|
5931
|
+
const MenubarItem = React$9.forwardRef(({ className, inset,...props }, ref) => /* @__PURE__ */ jsx(MenubarPrimitive.Item, {
|
|
5914
5932
|
ref,
|
|
5915
5933
|
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),
|
|
5916
5934
|
...props
|
|
5917
5935
|
}));
|
|
5918
5936
|
MenubarItem.displayName = MenubarPrimitive.Item.displayName;
|
|
5919
|
-
const MenubarCheckboxItem = React$
|
|
5937
|
+
const MenubarCheckboxItem = React$9.forwardRef(({ className, children, checked,...props }, ref) => /* @__PURE__ */ jsxs(MenubarPrimitive.CheckboxItem, {
|
|
5920
5938
|
ref,
|
|
5921
5939
|
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),
|
|
5922
5940
|
checked,
|
|
@@ -5927,7 +5945,7 @@ const MenubarCheckboxItem = React$8.forwardRef(({ className, children, checked,.
|
|
|
5927
5945
|
}), children]
|
|
5928
5946
|
}));
|
|
5929
5947
|
MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName;
|
|
5930
|
-
const MenubarRadioItem = React$
|
|
5948
|
+
const MenubarRadioItem = React$9.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsxs(MenubarPrimitive.RadioItem, {
|
|
5931
5949
|
ref,
|
|
5932
5950
|
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),
|
|
5933
5951
|
...props,
|
|
@@ -5937,13 +5955,13 @@ const MenubarRadioItem = React$8.forwardRef(({ className, children,...props }, r
|
|
|
5937
5955
|
}), children]
|
|
5938
5956
|
}));
|
|
5939
5957
|
MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName;
|
|
5940
|
-
const MenubarLabel = React$
|
|
5958
|
+
const MenubarLabel = React$9.forwardRef(({ className, inset,...props }, ref) => /* @__PURE__ */ jsx(MenubarPrimitive.Label, {
|
|
5941
5959
|
ref,
|
|
5942
5960
|
className: cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className),
|
|
5943
5961
|
...props
|
|
5944
5962
|
}));
|
|
5945
5963
|
MenubarLabel.displayName = MenubarPrimitive.Label.displayName;
|
|
5946
|
-
const MenubarSeparator = React$
|
|
5964
|
+
const MenubarSeparator = React$9.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(MenubarPrimitive.Separator, {
|
|
5947
5965
|
ref,
|
|
5948
5966
|
className: cn("-mx-1 my-1 h-px bg-muted", className),
|
|
5949
5967
|
...props
|
|
@@ -6080,13 +6098,13 @@ const Pagination = ({ className,...props }) => /* @__PURE__ */ jsx("nav", {
|
|
|
6080
6098
|
...props
|
|
6081
6099
|
});
|
|
6082
6100
|
Pagination.displayName = "Pagination";
|
|
6083
|
-
const PaginationContent = React$
|
|
6101
|
+
const PaginationContent = React$8.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("ul", {
|
|
6084
6102
|
ref,
|
|
6085
6103
|
className: cn("flex flex-row items-center gap-1", className),
|
|
6086
6104
|
...props
|
|
6087
6105
|
}));
|
|
6088
6106
|
PaginationContent.displayName = "PaginationContent";
|
|
6089
|
-
const PaginationItem = React$
|
|
6107
|
+
const PaginationItem = React$8.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("li", {
|
|
6090
6108
|
ref,
|
|
6091
6109
|
className: cn("", className),
|
|
6092
6110
|
...props
|
|
@@ -6208,7 +6226,7 @@ const ResizableHandle = ({ withHandle, className,...props }) => /* @__PURE__ */
|
|
|
6208
6226
|
|
|
6209
6227
|
//#endregion
|
|
6210
6228
|
//#region src/scroll-area/scroll-area.tsx
|
|
6211
|
-
const ScrollArea = React$
|
|
6229
|
+
const ScrollArea = React$7.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsxs(ScrollAreaPrimitive.Root, {
|
|
6212
6230
|
ref,
|
|
6213
6231
|
className: cn("relative overflow-hidden", className),
|
|
6214
6232
|
...props,
|
|
@@ -6222,7 +6240,7 @@ const ScrollArea = React$6.forwardRef(({ className, children,...props }, ref) =>
|
|
|
6222
6240
|
]
|
|
6223
6241
|
}));
|
|
6224
6242
|
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
|
|
6225
|
-
const ScrollBar = React$
|
|
6243
|
+
const ScrollBar = React$7.forwardRef(({ className, orientation = "vertical",...props }, ref) => /* @__PURE__ */ jsx(ScrollAreaPrimitive.ScrollAreaScrollbar, {
|
|
6226
6244
|
ref,
|
|
6227
6245
|
orientation,
|
|
6228
6246
|
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),
|
|
@@ -6237,7 +6255,7 @@ const Sheet = SheetPrimitive.Root;
|
|
|
6237
6255
|
const SheetTrigger = SheetPrimitive.Trigger;
|
|
6238
6256
|
const SheetClose = SheetPrimitive.Close;
|
|
6239
6257
|
const SheetPortal = SheetPrimitive.Portal;
|
|
6240
|
-
const SheetOverlay = React$
|
|
6258
|
+
const SheetOverlay = React$6.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(SheetPrimitive.Overlay, {
|
|
6241
6259
|
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),
|
|
6242
6260
|
...props,
|
|
6243
6261
|
ref
|
|
@@ -6252,7 +6270,7 @@ const sheetVariants = cva("fixed z-50 gap-4 bg-background p-6 shadow-lg transiti
|
|
|
6252
6270
|
} },
|
|
6253
6271
|
defaultVariants: { side: "right" }
|
|
6254
6272
|
});
|
|
6255
|
-
const SheetContent = React$
|
|
6273
|
+
const SheetContent = React$6.forwardRef(({ side = "right", className, children,...props }, ref) => /* @__PURE__ */ jsxs(SheetPortal, { children: [/* @__PURE__ */ jsx(SheetOverlay, {}), /* @__PURE__ */ jsxs(SheetPrimitive.Content, {
|
|
6256
6274
|
ref,
|
|
6257
6275
|
className: cn(sheetVariants({ side }), className),
|
|
6258
6276
|
...props,
|
|
@@ -6275,19 +6293,402 @@ const SheetFooter = ({ className,...props }) => /* @__PURE__ */ jsx("div", {
|
|
|
6275
6293
|
...props
|
|
6276
6294
|
});
|
|
6277
6295
|
SheetFooter.displayName = "SheetFooter";
|
|
6278
|
-
const SheetTitle = React$
|
|
6296
|
+
const SheetTitle = React$6.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(SheetPrimitive.Title, {
|
|
6279
6297
|
ref,
|
|
6280
6298
|
className: cn("text-lg font-semibold text-foreground", className),
|
|
6281
6299
|
...props
|
|
6282
6300
|
}));
|
|
6283
6301
|
SheetTitle.displayName = SheetPrimitive.Title.displayName;
|
|
6284
|
-
const SheetDescription = React$
|
|
6302
|
+
const SheetDescription = React$6.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(SheetPrimitive.Description, {
|
|
6285
6303
|
ref,
|
|
6286
6304
|
className: cn("text-sm text-muted-foreground", className),
|
|
6287
6305
|
...props
|
|
6288
6306
|
}));
|
|
6289
6307
|
SheetDescription.displayName = SheetPrimitive.Description.displayName;
|
|
6290
6308
|
|
|
6309
|
+
//#endregion
|
|
6310
|
+
//#region src/sidebar/sidebar.tsx
|
|
6311
|
+
const SIDEBAR_WIDTH = "16rem";
|
|
6312
|
+
const SIDEBAR_WIDTH_MOBILE = "18rem";
|
|
6313
|
+
const SIDEBAR_WIDTH_ICON = "3rem";
|
|
6314
|
+
const SIDEBAR_KEYBOARD_SHORTCUT = "b";
|
|
6315
|
+
const SidebarContext = React$5.createContext(null);
|
|
6316
|
+
function useSidebar() {
|
|
6317
|
+
const context = React$5.useContext(SidebarContext);
|
|
6318
|
+
if (!context) throw new Error("useSidebar must be used within a SidebarProvider.");
|
|
6319
|
+
return context;
|
|
6320
|
+
}
|
|
6321
|
+
function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, className, style, children,...props }) {
|
|
6322
|
+
const isMobile = useIsMobile();
|
|
6323
|
+
const [openMobile, setOpenMobile] = React$5.useState(false);
|
|
6324
|
+
const [_open, _setOpen] = React$5.useState(defaultOpen);
|
|
6325
|
+
const open = openProp ?? _open;
|
|
6326
|
+
const setOpen = React$5.useCallback((value) => {
|
|
6327
|
+
const openState = typeof value === "function" ? value(open) : value;
|
|
6328
|
+
if (setOpenProp) setOpenProp(openState);
|
|
6329
|
+
else _setOpen(openState);
|
|
6330
|
+
}, [setOpenProp, open]);
|
|
6331
|
+
const toggleSidebar = React$5.useCallback(() => {
|
|
6332
|
+
return isMobile ? setOpenMobile((open$1) => !open$1) : setOpen((open$1) => !open$1);
|
|
6333
|
+
}, [
|
|
6334
|
+
isMobile,
|
|
6335
|
+
setOpen,
|
|
6336
|
+
setOpenMobile
|
|
6337
|
+
]);
|
|
6338
|
+
React$5.useEffect(() => {
|
|
6339
|
+
const handleKeyDown = (event) => {
|
|
6340
|
+
if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
|
|
6341
|
+
event.preventDefault();
|
|
6342
|
+
toggleSidebar();
|
|
6343
|
+
}
|
|
6344
|
+
};
|
|
6345
|
+
globalThis.addEventListener("keydown", handleKeyDown);
|
|
6346
|
+
return () => globalThis.removeEventListener("keydown", handleKeyDown);
|
|
6347
|
+
}, [toggleSidebar]);
|
|
6348
|
+
const state = open ? "expanded" : "collapsed";
|
|
6349
|
+
const contextValue = React$5.useMemo(() => ({
|
|
6350
|
+
state,
|
|
6351
|
+
open,
|
|
6352
|
+
setOpen,
|
|
6353
|
+
isMobile,
|
|
6354
|
+
openMobile,
|
|
6355
|
+
setOpenMobile,
|
|
6356
|
+
toggleSidebar
|
|
6357
|
+
}), [
|
|
6358
|
+
state,
|
|
6359
|
+
open,
|
|
6360
|
+
setOpen,
|
|
6361
|
+
isMobile,
|
|
6362
|
+
openMobile,
|
|
6363
|
+
setOpenMobile,
|
|
6364
|
+
toggleSidebar
|
|
6365
|
+
]);
|
|
6366
|
+
return /* @__PURE__ */ jsx(SidebarContext.Provider, {
|
|
6367
|
+
value: contextValue,
|
|
6368
|
+
children: /* @__PURE__ */ jsx(TooltipProvider, {
|
|
6369
|
+
delayDuration: 0,
|
|
6370
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
6371
|
+
"data-slot": "sidebar-wrapper",
|
|
6372
|
+
style: {
|
|
6373
|
+
"--sidebar-width": SIDEBAR_WIDTH,
|
|
6374
|
+
"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
|
|
6375
|
+
...style
|
|
6376
|
+
},
|
|
6377
|
+
className: cn("group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full", className),
|
|
6378
|
+
...props,
|
|
6379
|
+
children
|
|
6380
|
+
})
|
|
6381
|
+
})
|
|
6382
|
+
});
|
|
6383
|
+
}
|
|
6384
|
+
function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas", className, children,...props }) {
|
|
6385
|
+
const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
|
|
6386
|
+
if (collapsible === "none") return /* @__PURE__ */ jsx("div", {
|
|
6387
|
+
"data-slot": "sidebar",
|
|
6388
|
+
className: cn("bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col", className),
|
|
6389
|
+
...props,
|
|
6390
|
+
children
|
|
6391
|
+
});
|
|
6392
|
+
if (isMobile) return /* @__PURE__ */ jsx(Sheet, {
|
|
6393
|
+
open: openMobile,
|
|
6394
|
+
onOpenChange: setOpenMobile,
|
|
6395
|
+
...props,
|
|
6396
|
+
children: /* @__PURE__ */ jsxs(SheetContent, {
|
|
6397
|
+
"data-sidebar": "sidebar",
|
|
6398
|
+
"data-slot": "sidebar",
|
|
6399
|
+
"data-mobile": "true",
|
|
6400
|
+
className: "bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden",
|
|
6401
|
+
style: { "--sidebar-width": SIDEBAR_WIDTH_MOBILE },
|
|
6402
|
+
side,
|
|
6403
|
+
children: [/* @__PURE__ */ jsxs(SheetHeader, {
|
|
6404
|
+
className: "sr-only",
|
|
6405
|
+
children: [/* @__PURE__ */ jsx(SheetTitle, { children: "Sidebar" }), /* @__PURE__ */ jsx(SheetDescription, { children: "Displays the mobile sidebar." })]
|
|
6406
|
+
}), /* @__PURE__ */ jsx("div", {
|
|
6407
|
+
className: "flex h-full w-full flex-col",
|
|
6408
|
+
children
|
|
6409
|
+
})]
|
|
6410
|
+
})
|
|
6411
|
+
});
|
|
6412
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
6413
|
+
className: "group peer text-sidebar-foreground hidden md:block",
|
|
6414
|
+
"data-state": state,
|
|
6415
|
+
"data-collapsible": state === "collapsed" ? collapsible : "",
|
|
6416
|
+
"data-variant": variant,
|
|
6417
|
+
"data-side": side,
|
|
6418
|
+
"data-slot": "sidebar",
|
|
6419
|
+
children: [/* @__PURE__ */ jsx("div", {
|
|
6420
|
+
"data-slot": "sidebar-gap",
|
|
6421
|
+
className: cn("relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear", "group-data-[collapsible=offcanvas]:w-0", "group-data-[side=right]:rotate-180", variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)")
|
|
6422
|
+
}), /* @__PURE__ */ jsx("div", {
|
|
6423
|
+
"data-slot": "sidebar-container",
|
|
6424
|
+
className: cn(
|
|
6425
|
+
"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
|
|
6426
|
+
side === "left" ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
|
|
6427
|
+
// Adjust the padding for floating and inset variants.
|
|
6428
|
+
variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
|
|
6429
|
+
className
|
|
6430
|
+
),
|
|
6431
|
+
...props,
|
|
6432
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
6433
|
+
"data-sidebar": "sidebar",
|
|
6434
|
+
"data-slot": "sidebar-inner",
|
|
6435
|
+
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",
|
|
6436
|
+
children
|
|
6437
|
+
})
|
|
6438
|
+
})]
|
|
6439
|
+
});
|
|
6440
|
+
}
|
|
6441
|
+
function SidebarTrigger({ className, onClick,...props }) {
|
|
6442
|
+
const { toggleSidebar } = useSidebar();
|
|
6443
|
+
return /* @__PURE__ */ jsxs(Button, {
|
|
6444
|
+
"data-sidebar": "trigger",
|
|
6445
|
+
"data-slot": "sidebar-trigger",
|
|
6446
|
+
variant: "ghost",
|
|
6447
|
+
size: "icon",
|
|
6448
|
+
className: cn("size-7", className),
|
|
6449
|
+
onClick: (event) => {
|
|
6450
|
+
onClick?.(event);
|
|
6451
|
+
toggleSidebar();
|
|
6452
|
+
},
|
|
6453
|
+
...props,
|
|
6454
|
+
children: [/* @__PURE__ */ jsx(PanelLeftIcon, {}), /* @__PURE__ */ jsx("span", {
|
|
6455
|
+
className: "sr-only",
|
|
6456
|
+
children: "Toggle Sidebar"
|
|
6457
|
+
})]
|
|
6458
|
+
});
|
|
6459
|
+
}
|
|
6460
|
+
function SidebarRail({ className,...props }) {
|
|
6461
|
+
const { toggleSidebar } = useSidebar();
|
|
6462
|
+
return /* @__PURE__ */ jsx("button", {
|
|
6463
|
+
"data-sidebar": "rail",
|
|
6464
|
+
"data-slot": "sidebar-rail",
|
|
6465
|
+
"aria-label": "Toggle Sidebar",
|
|
6466
|
+
tabIndex: -1,
|
|
6467
|
+
onClick: toggleSidebar,
|
|
6468
|
+
title: "Toggle Sidebar",
|
|
6469
|
+
className: cn("hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex", "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize", "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize", "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full", "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2", "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2", className),
|
|
6470
|
+
...props
|
|
6471
|
+
});
|
|
6472
|
+
}
|
|
6473
|
+
function SidebarInset({ className,...props }) {
|
|
6474
|
+
return /* @__PURE__ */ jsx("main", {
|
|
6475
|
+
"data-slot": "sidebar-inset",
|
|
6476
|
+
className: cn("bg-background relative flex w-full flex-1 flex-col", "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2", className),
|
|
6477
|
+
...props
|
|
6478
|
+
});
|
|
6479
|
+
}
|
|
6480
|
+
function SidebarInput({ className,...props }) {
|
|
6481
|
+
return /* @__PURE__ */ jsx(Input, {
|
|
6482
|
+
"data-slot": "sidebar-input",
|
|
6483
|
+
"data-sidebar": "input",
|
|
6484
|
+
className: cn("bg-background h-8 w-full shadow-none", className),
|
|
6485
|
+
...props
|
|
6486
|
+
});
|
|
6487
|
+
}
|
|
6488
|
+
function SidebarHeader({ className,...props }) {
|
|
6489
|
+
return /* @__PURE__ */ jsx("div", {
|
|
6490
|
+
"data-slot": "sidebar-header",
|
|
6491
|
+
"data-sidebar": "header",
|
|
6492
|
+
className: cn("flex flex-col gap-2 p-2", className),
|
|
6493
|
+
...props
|
|
6494
|
+
});
|
|
6495
|
+
}
|
|
6496
|
+
function SidebarFooter({ className,...props }) {
|
|
6497
|
+
return /* @__PURE__ */ jsx("div", {
|
|
6498
|
+
"data-slot": "sidebar-footer",
|
|
6499
|
+
"data-sidebar": "footer",
|
|
6500
|
+
className: cn("flex flex-col gap-2 p-2", className),
|
|
6501
|
+
...props
|
|
6502
|
+
});
|
|
6503
|
+
}
|
|
6504
|
+
function SidebarSeparator({ className,...props }) {
|
|
6505
|
+
return /* @__PURE__ */ jsx(Separator, {
|
|
6506
|
+
"data-slot": "sidebar-separator",
|
|
6507
|
+
"data-sidebar": "separator",
|
|
6508
|
+
className: cn("bg-sidebar-border mx-2 w-auto", className),
|
|
6509
|
+
...props
|
|
6510
|
+
});
|
|
6511
|
+
}
|
|
6512
|
+
function SidebarContent({ className,...props }) {
|
|
6513
|
+
return /* @__PURE__ */ jsx("div", {
|
|
6514
|
+
"data-slot": "sidebar-content",
|
|
6515
|
+
"data-sidebar": "content",
|
|
6516
|
+
className: cn("flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden", className),
|
|
6517
|
+
...props
|
|
6518
|
+
});
|
|
6519
|
+
}
|
|
6520
|
+
function SidebarGroup({ className,...props }) {
|
|
6521
|
+
return /* @__PURE__ */ jsx("div", {
|
|
6522
|
+
"data-slot": "sidebar-group",
|
|
6523
|
+
"data-sidebar": "group",
|
|
6524
|
+
className: cn("relative flex w-full min-w-0 flex-col p-2", className),
|
|
6525
|
+
...props
|
|
6526
|
+
});
|
|
6527
|
+
}
|
|
6528
|
+
function SidebarGroupLabel({ className, asChild = false,...props }) {
|
|
6529
|
+
const Comp = asChild ? Slot : "div";
|
|
6530
|
+
return /* @__PURE__ */ jsx(Comp, {
|
|
6531
|
+
"data-slot": "sidebar-group-label",
|
|
6532
|
+
"data-sidebar": "group-label",
|
|
6533
|
+
className: cn("text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0", className),
|
|
6534
|
+
...props
|
|
6535
|
+
});
|
|
6536
|
+
}
|
|
6537
|
+
function SidebarGroupAction({ className, asChild = false,...props }) {
|
|
6538
|
+
const Comp = asChild ? Slot : "button";
|
|
6539
|
+
return /* @__PURE__ */ jsx(Comp, {
|
|
6540
|
+
"data-slot": "sidebar-group-action",
|
|
6541
|
+
"data-sidebar": "group-action",
|
|
6542
|
+
className: cn(
|
|
6543
|
+
"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
|
|
6544
|
+
// Increases the hit area of the button on mobile.
|
|
6545
|
+
"after:absolute after:-inset-2 md:after:hidden",
|
|
6546
|
+
"group-data-[collapsible=icon]:hidden",
|
|
6547
|
+
className
|
|
6548
|
+
),
|
|
6549
|
+
...props
|
|
6550
|
+
});
|
|
6551
|
+
}
|
|
6552
|
+
function SidebarGroupContent({ className,...props }) {
|
|
6553
|
+
return /* @__PURE__ */ jsx("div", {
|
|
6554
|
+
"data-slot": "sidebar-group-content",
|
|
6555
|
+
"data-sidebar": "group-content",
|
|
6556
|
+
className: cn("w-full text-sm", className),
|
|
6557
|
+
...props
|
|
6558
|
+
});
|
|
6559
|
+
}
|
|
6560
|
+
function SidebarMenu({ className,...props }) {
|
|
6561
|
+
return /* @__PURE__ */ jsx("ul", {
|
|
6562
|
+
"data-slot": "sidebar-menu",
|
|
6563
|
+
"data-sidebar": "menu",
|
|
6564
|
+
className: cn("flex w-full min-w-0 flex-col gap-1", className),
|
|
6565
|
+
...props
|
|
6566
|
+
});
|
|
6567
|
+
}
|
|
6568
|
+
function SidebarMenuItem({ className,...props }) {
|
|
6569
|
+
return /* @__PURE__ */ jsx("li", {
|
|
6570
|
+
"data-slot": "sidebar-menu-item",
|
|
6571
|
+
"data-sidebar": "menu-item",
|
|
6572
|
+
className: cn("group/menu-item relative", className),
|
|
6573
|
+
...props
|
|
6574
|
+
});
|
|
6575
|
+
}
|
|
6576
|
+
const sidebarMenuButtonVariants = cva("peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0", {
|
|
6577
|
+
variants: {
|
|
6578
|
+
variant: {
|
|
6579
|
+
default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
|
|
6580
|
+
outline: "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]"
|
|
6581
|
+
},
|
|
6582
|
+
size: {
|
|
6583
|
+
default: "h-8 text-sm",
|
|
6584
|
+
sm: "h-7 text-xs",
|
|
6585
|
+
lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!"
|
|
6586
|
+
}
|
|
6587
|
+
},
|
|
6588
|
+
defaultVariants: {
|
|
6589
|
+
variant: "default",
|
|
6590
|
+
size: "default"
|
|
6591
|
+
}
|
|
6592
|
+
});
|
|
6593
|
+
function SidebarMenuButton({ asChild = false, isActive = false, variant = "default", size = "default", tooltip, className,...props }) {
|
|
6594
|
+
const Comp = asChild ? Slot : "button";
|
|
6595
|
+
const { isMobile, state } = useSidebar();
|
|
6596
|
+
const button = /* @__PURE__ */ jsx(Comp, {
|
|
6597
|
+
"data-slot": "sidebar-menu-button",
|
|
6598
|
+
"data-sidebar": "menu-button",
|
|
6599
|
+
"data-size": size,
|
|
6600
|
+
"data-active": isActive,
|
|
6601
|
+
className: cn(sidebarMenuButtonVariants({
|
|
6602
|
+
variant,
|
|
6603
|
+
size
|
|
6604
|
+
}), className),
|
|
6605
|
+
...props
|
|
6606
|
+
});
|
|
6607
|
+
if (!tooltip) return button;
|
|
6608
|
+
if (typeof tooltip === "string") tooltip = { children: tooltip };
|
|
6609
|
+
return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
|
|
6610
|
+
asChild: true,
|
|
6611
|
+
children: button
|
|
6612
|
+
}), /* @__PURE__ */ jsx(TooltipContent, {
|
|
6613
|
+
side: "right",
|
|
6614
|
+
align: "center",
|
|
6615
|
+
hidden: state !== "collapsed" || isMobile,
|
|
6616
|
+
...tooltip
|
|
6617
|
+
})] });
|
|
6618
|
+
}
|
|
6619
|
+
function SidebarMenuAction({ className, asChild = false, showOnHover = false,...props }) {
|
|
6620
|
+
const Comp = asChild ? Slot : "button";
|
|
6621
|
+
return /* @__PURE__ */ jsx(Comp, {
|
|
6622
|
+
"data-slot": "sidebar-menu-action",
|
|
6623
|
+
"data-sidebar": "menu-action",
|
|
6624
|
+
className: cn(
|
|
6625
|
+
"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
|
|
6626
|
+
// Increases the hit area of the button on mobile.
|
|
6627
|
+
"after:absolute after:-inset-2 md:after:hidden",
|
|
6628
|
+
"peer-data-[size=sm]/menu-button:top-1",
|
|
6629
|
+
"peer-data-[size=default]/menu-button:top-1.5",
|
|
6630
|
+
"peer-data-[size=lg]/menu-button:top-2.5",
|
|
6631
|
+
"group-data-[collapsible=icon]:hidden",
|
|
6632
|
+
showOnHover && "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
|
|
6633
|
+
className
|
|
6634
|
+
),
|
|
6635
|
+
...props
|
|
6636
|
+
});
|
|
6637
|
+
}
|
|
6638
|
+
function SidebarMenuBadge({ className,...props }) {
|
|
6639
|
+
return /* @__PURE__ */ jsx("div", {
|
|
6640
|
+
"data-slot": "sidebar-menu-badge",
|
|
6641
|
+
"data-sidebar": "menu-badge",
|
|
6642
|
+
className: cn("text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none", "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground", "peer-data-[size=sm]/menu-button:top-1", "peer-data-[size=default]/menu-button:top-1.5", "peer-data-[size=lg]/menu-button:top-2.5", "group-data-[collapsible=icon]:hidden", className),
|
|
6643
|
+
...props
|
|
6644
|
+
});
|
|
6645
|
+
}
|
|
6646
|
+
function SidebarMenuSkeleton({ className, showIcon = false, widths = [50],...props }) {
|
|
6647
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
6648
|
+
"data-slot": "sidebar-menu-skeleton",
|
|
6649
|
+
"data-sidebar": "menu-skeleton",
|
|
6650
|
+
className: cn("flex h-8 items-center gap-2 rounded-md px-2", className),
|
|
6651
|
+
...props,
|
|
6652
|
+
children: [showIcon && /* @__PURE__ */ jsx(Skeleton, {
|
|
6653
|
+
className: "size-4 rounded-md",
|
|
6654
|
+
"data-sidebar": "menu-skeleton-icon"
|
|
6655
|
+
}), widths.map((width) => {
|
|
6656
|
+
return /* @__PURE__ */ jsx(Skeleton, {
|
|
6657
|
+
className: "h-4 max-w-(--skeleton-width) flex-1",
|
|
6658
|
+
"data-sidebar": "menu-skeleton-text",
|
|
6659
|
+
style: { "--skeleton-width": width }
|
|
6660
|
+
});
|
|
6661
|
+
})]
|
|
6662
|
+
});
|
|
6663
|
+
}
|
|
6664
|
+
function SidebarMenuSub({ className,...props }) {
|
|
6665
|
+
return /* @__PURE__ */ jsx("ul", {
|
|
6666
|
+
"data-slot": "sidebar-menu-sub",
|
|
6667
|
+
"data-sidebar": "menu-sub",
|
|
6668
|
+
className: cn("border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5", "group-data-[collapsible=icon]:hidden", className),
|
|
6669
|
+
...props
|
|
6670
|
+
});
|
|
6671
|
+
}
|
|
6672
|
+
function SidebarMenuSubItem({ className,...props }) {
|
|
6673
|
+
return /* @__PURE__ */ jsx("li", {
|
|
6674
|
+
"data-slot": "sidebar-menu-sub-item",
|
|
6675
|
+
"data-sidebar": "menu-sub-item",
|
|
6676
|
+
className: cn("group/menu-sub-item relative", className),
|
|
6677
|
+
...props
|
|
6678
|
+
});
|
|
6679
|
+
}
|
|
6680
|
+
function SidebarMenuSubButton({ asChild = false, size = "md", isActive = false, className,...props }) {
|
|
6681
|
+
const Comp = asChild ? Slot : "a";
|
|
6682
|
+
return /* @__PURE__ */ jsx(Comp, {
|
|
6683
|
+
"data-slot": "sidebar-menu-sub-button",
|
|
6684
|
+
"data-sidebar": "menu-sub-button",
|
|
6685
|
+
"data-size": size,
|
|
6686
|
+
"data-active": isActive,
|
|
6687
|
+
className: cn("text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0", "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground", size === "sm" && "text-xs", size === "md" && "text-sm", "group-data-[collapsible=icon]:hidden", className),
|
|
6688
|
+
...props
|
|
6689
|
+
});
|
|
6690
|
+
}
|
|
6691
|
+
|
|
6291
6692
|
//#endregion
|
|
6292
6693
|
//#region src/skeleton/skeleton.tsx
|
|
6293
6694
|
function Skeleton({ className,...props }) {
|
|
@@ -6485,5 +6886,5 @@ const ToggleGroupItem = React$1.forwardRef(({ className, children, variant, size
|
|
|
6485
6886
|
ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
|
|
6486
6887
|
|
|
6487
6888
|
//#endregion
|
|
6488
|
-
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, Avatar, AvatarFallback, AvatarImage, Badge, 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, ComboboxDemo, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandPalette, CommandPaletteDialog, CommandPaletteEmpty, CommandPaletteGroup, CommandPaletteInput, CommandPaletteItem, CommandPaletteList, CommandPaletteSeparator, CommandPaletteShortcut, CommandSeparator, CommandShortcut, 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, 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, HoverCard, HoverCardContent, HoverCardTrigger, Input, 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, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ReactNodeCell, ResizableHandle, ResizablePanel, ResizablePanelGroup, 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, Skeleton, Slider, Spinner, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, checkboxVariants, cn, commandInputVariants, getCellKey, getCommonPinningStyles, getLineCount, getRowHeightValue, isoToLocalDate, knobVariants, navigationMenuTriggerStyle, parseCellKey, sliderVariants, toast, toggleVariants, useCallbackRef, useDataGrid, useDebouncedCallback };
|
|
6889
|
+
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, Avatar, AvatarFallback, AvatarImage, Badge, 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, ComboboxDemo, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandPalette, CommandPaletteDialog, CommandPaletteEmpty, CommandPaletteGroup, CommandPaletteInput, CommandPaletteItem, CommandPaletteList, CommandPaletteSeparator, CommandPaletteShortcut, CommandSeparator, CommandShortcut, 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, 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, HoverCard, HoverCardContent, HoverCardTrigger, Input, 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, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ReactNodeCell, ResizableHandle, ResizablePanel, ResizablePanelGroup, 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, Slider, Spinner, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, checkboxVariants, cn, commandInputVariants, getCellKey, getCommonPinningStyles, getLineCount, getRowHeightValue, isoToLocalDate, knobVariants, navigationMenuTriggerStyle, parseCellKey, sliderVariants, toast, toggleVariants, useCallbackRef, useDataGrid, useDebouncedCallback, useIsMobile, useSidebar };
|
|
6489
6890
|
//# sourceMappingURL=index.js.map
|