@postxl/ui-components 1.2.3 → 1.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +444 -373
- package/dist/index.js +462 -320
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/styles/theme.css +10 -0
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, Cross1Icon, Cross2Icon, DotFilledIcon, DotsHorizontalIcon, DoubleArrowLeftIcon, DoubleArrowRightIcon, DragHandleDots2Icon, EnterFullScreenIcon, MagnifyingGlassIcon } from "@radix-ui/react-icons";
|
|
5
|
+
import * as React$48 from "react";
|
|
6
|
+
import * as React$47 from "react";
|
|
5
7
|
import * as React$46 from "react";
|
|
6
8
|
import * as React$45 from "react";
|
|
7
9
|
import * as React$44 from "react";
|
|
@@ -93,13 +95,13 @@ function cn(...inputs) {
|
|
|
93
95
|
//#endregion
|
|
94
96
|
//#region src/accordion/accordion.tsx
|
|
95
97
|
const Accordion = AccordionPrimitive.Root;
|
|
96
|
-
const AccordionItem = React$
|
|
98
|
+
const AccordionItem = React$48.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Item, {
|
|
97
99
|
ref,
|
|
98
100
|
className: cn("border-b", className),
|
|
99
101
|
...props
|
|
100
102
|
}));
|
|
101
103
|
AccordionItem.displayName = "AccordionItem";
|
|
102
|
-
const AccordionTrigger = React$
|
|
104
|
+
const AccordionTrigger = React$48.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Header, {
|
|
103
105
|
className: "flex",
|
|
104
106
|
children: /* @__PURE__ */ jsxs(AccordionPrimitive.Trigger, {
|
|
105
107
|
ref,
|
|
@@ -109,7 +111,7 @@ const AccordionTrigger = React$46.forwardRef(({ className, children,...props },
|
|
|
109
111
|
})
|
|
110
112
|
}));
|
|
111
113
|
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
|
|
112
|
-
const AccordionContent = React$
|
|
114
|
+
const AccordionContent = React$48.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Content, {
|
|
113
115
|
ref,
|
|
114
116
|
className: "overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
|
|
115
117
|
...props,
|
|
@@ -129,21 +131,21 @@ const alertVariants = cva("relative w-full rounded-lg border px-4 py-3 text-sm [
|
|
|
129
131
|
} },
|
|
130
132
|
defaultVariants: { variant: "default" }
|
|
131
133
|
});
|
|
132
|
-
const Alert = React$
|
|
134
|
+
const Alert = React$47.forwardRef(({ className, variant,...props }, ref) => /* @__PURE__ */ jsx("div", {
|
|
133
135
|
ref,
|
|
134
136
|
role: "alert",
|
|
135
137
|
className: cn(alertVariants({ variant }), className),
|
|
136
138
|
...props
|
|
137
139
|
}));
|
|
138
140
|
Alert.displayName = "Alert";
|
|
139
|
-
const AlertTitle = React$
|
|
141
|
+
const AlertTitle = React$47.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsx("h5", {
|
|
140
142
|
ref,
|
|
141
143
|
className: cn("mb-1 font-medium leading-none tracking-tight", className),
|
|
142
144
|
...props,
|
|
143
145
|
children
|
|
144
146
|
}));
|
|
145
147
|
AlertTitle.displayName = "AlertTitle";
|
|
146
|
-
const AlertDescription = React$
|
|
148
|
+
const AlertDescription = React$47.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
|
|
147
149
|
ref,
|
|
148
150
|
className: cn("text-sm [&_p]:leading-relaxed", className),
|
|
149
151
|
...props
|
|
@@ -202,13 +204,13 @@ function Button({ className, variant, size, asChild = false, __e2e_test_id__,...
|
|
|
202
204
|
const AlertDialog = AlertDialogPrimitive.Root;
|
|
203
205
|
const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
|
|
204
206
|
const AlertDialogPortal = AlertDialogPrimitive.Portal;
|
|
205
|
-
const AlertDialogOverlay = React$
|
|
207
|
+
const AlertDialogOverlay = React$46.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Overlay, {
|
|
206
208
|
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),
|
|
207
209
|
...props,
|
|
208
210
|
ref
|
|
209
211
|
}));
|
|
210
212
|
AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
|
|
211
|
-
const AlertDialogContent = React$
|
|
213
|
+
const AlertDialogContent = React$46.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [/* @__PURE__ */ jsx(AlertDialogOverlay, {}), /* @__PURE__ */ jsx(AlertDialogPrimitive.Content, {
|
|
212
214
|
ref,
|
|
213
215
|
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),
|
|
214
216
|
...props
|
|
@@ -224,25 +226,25 @@ const AlertDialogFooter = ({ className,...props }) => /* @__PURE__ */ jsx("div",
|
|
|
224
226
|
...props
|
|
225
227
|
});
|
|
226
228
|
AlertDialogFooter.displayName = "AlertDialogFooter";
|
|
227
|
-
const AlertDialogTitle = React$
|
|
229
|
+
const AlertDialogTitle = React$46.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Title, {
|
|
228
230
|
ref,
|
|
229
231
|
className: cn("text-lg font-semibold", className),
|
|
230
232
|
...props
|
|
231
233
|
}));
|
|
232
234
|
AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
|
|
233
|
-
const AlertDialogDescription = React$
|
|
235
|
+
const AlertDialogDescription = React$46.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Description, {
|
|
234
236
|
ref,
|
|
235
237
|
className: cn("text-sm text-muted-foreground", className),
|
|
236
238
|
...props
|
|
237
239
|
}));
|
|
238
240
|
AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
|
|
239
|
-
const AlertDialogAction = React$
|
|
241
|
+
const AlertDialogAction = React$46.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Action, {
|
|
240
242
|
ref,
|
|
241
243
|
className: cn(buttonVariants(), className),
|
|
242
244
|
...props
|
|
243
245
|
}));
|
|
244
246
|
AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
|
|
245
|
-
const AlertDialogCancel = React$
|
|
247
|
+
const AlertDialogCancel = React$46.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Cancel, {
|
|
246
248
|
ref,
|
|
247
249
|
className: cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className),
|
|
248
250
|
...props
|
|
@@ -251,19 +253,19 @@ AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
|
|
|
251
253
|
|
|
252
254
|
//#endregion
|
|
253
255
|
//#region src/avatar/avatar.tsx
|
|
254
|
-
const Avatar = React$
|
|
256
|
+
const Avatar = React$45.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AvatarPrimitive.Root, {
|
|
255
257
|
ref,
|
|
256
258
|
className: cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className),
|
|
257
259
|
...props
|
|
258
260
|
}));
|
|
259
261
|
Avatar.displayName = AvatarPrimitive.Root.displayName;
|
|
260
|
-
const AvatarImage = React$
|
|
262
|
+
const AvatarImage = React$45.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AvatarPrimitive.Image, {
|
|
261
263
|
ref,
|
|
262
264
|
className: cn("aspect-square h-full w-full", className),
|
|
263
265
|
...props
|
|
264
266
|
}));
|
|
265
267
|
AvatarImage.displayName = AvatarPrimitive.Image.displayName;
|
|
266
|
-
const AvatarFallback = React$
|
|
268
|
+
const AvatarFallback = React$45.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AvatarPrimitive.Fallback, {
|
|
267
269
|
ref,
|
|
268
270
|
className: cn("flex h-full w-full items-center justify-center rounded-full bg-muted", className),
|
|
269
271
|
...props
|
|
@@ -309,25 +311,25 @@ function Badge({ className, variant, size, asChild = false,...props }) {
|
|
|
309
311
|
|
|
310
312
|
//#endregion
|
|
311
313
|
//#region src/breadcrumb/breadcrumb.tsx
|
|
312
|
-
const Breadcrumb = React$
|
|
314
|
+
const Breadcrumb = React$44.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx("nav", {
|
|
313
315
|
ref,
|
|
314
316
|
"aria-label": "breadcrumb",
|
|
315
317
|
...props
|
|
316
318
|
}));
|
|
317
319
|
Breadcrumb.displayName = "Breadcrumb";
|
|
318
|
-
const BreadcrumbList = React$
|
|
320
|
+
const BreadcrumbList = React$44.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("ol", {
|
|
319
321
|
ref,
|
|
320
322
|
className: cn("flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5", className),
|
|
321
323
|
...props
|
|
322
324
|
}));
|
|
323
325
|
BreadcrumbList.displayName = "BreadcrumbList";
|
|
324
|
-
const BreadcrumbItem = React$
|
|
326
|
+
const BreadcrumbItem = React$44.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("li", {
|
|
325
327
|
ref,
|
|
326
328
|
className: cn("inline-flex items-center gap-1.5", className),
|
|
327
329
|
...props
|
|
328
330
|
}));
|
|
329
331
|
BreadcrumbItem.displayName = "BreadcrumbItem";
|
|
330
|
-
const BreadcrumbLink = React$
|
|
332
|
+
const BreadcrumbLink = React$44.forwardRef(({ asChild, className,...props }, ref) => {
|
|
331
333
|
const Comp = asChild ? Slot : "a";
|
|
332
334
|
return /* @__PURE__ */ jsx(Comp, {
|
|
333
335
|
ref,
|
|
@@ -336,7 +338,7 @@ const BreadcrumbLink = React$42.forwardRef(({ asChild, className,...props }, ref
|
|
|
336
338
|
});
|
|
337
339
|
});
|
|
338
340
|
BreadcrumbLink.displayName = "BreadcrumbLink";
|
|
339
|
-
const BreadcrumbPage = React$
|
|
341
|
+
const BreadcrumbPage = React$44.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("span", {
|
|
340
342
|
ref,
|
|
341
343
|
"aria-disabled": "true",
|
|
342
344
|
"aria-current": "page",
|
|
@@ -366,8 +368,8 @@ BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
|
|
|
366
368
|
//#region src/calendar/calendar.tsx
|
|
367
369
|
function Calendar({ className, classNames, showOutsideDays = true, captionLayout = "label", buttonVariant = "ghost", showYearNavigation = false, formatters, components,...props }) {
|
|
368
370
|
const defaultClassNames = getDefaultClassNames();
|
|
369
|
-
const [rangeSelectionStep, setRangeSelectionStep] = React$
|
|
370
|
-
const handleDayClick = React$
|
|
371
|
+
const [rangeSelectionStep, setRangeSelectionStep] = React$43.useState("from");
|
|
372
|
+
const handleDayClick = React$43.useCallback((day, modifiers, e) => {
|
|
371
373
|
if (props.mode === "range") {
|
|
372
374
|
const range = props.selected;
|
|
373
375
|
if (rangeSelectionStep === "from") {
|
|
@@ -397,8 +399,8 @@ function Calendar({ className, classNames, showOutsideDays = true, captionLayout
|
|
|
397
399
|
fromMonth = props.startMonth ?? new Date(nowYear - 100, 0);
|
|
398
400
|
toMonth = props.endMonth ?? new Date(nowYear + 100, 11);
|
|
399
401
|
}
|
|
400
|
-
const [currentMonth, setCurrentMonth] = React$
|
|
401
|
-
React$
|
|
402
|
+
const [currentMonth, setCurrentMonth] = React$43.useState(props.defaultMonth ?? props.month ?? new Date());
|
|
403
|
+
React$43.useEffect(() => {
|
|
402
404
|
if (props.month) setCurrentMonth(props.month);
|
|
403
405
|
}, [props.month]);
|
|
404
406
|
const addMonths = (date, months) => {
|
|
@@ -537,8 +539,8 @@ function Calendar({ className, classNames, showOutsideDays = true, captionLayout
|
|
|
537
539
|
}
|
|
538
540
|
function CalendarDayButton({ className, day, modifiers,...props }) {
|
|
539
541
|
const defaultClassNames = getDefaultClassNames();
|
|
540
|
-
const ref = React$
|
|
541
|
-
React$
|
|
542
|
+
const ref = React$43.useRef(null);
|
|
543
|
+
React$43.useEffect(() => {
|
|
542
544
|
if (modifiers.focused) ref.current?.focus();
|
|
543
545
|
}, [modifiers.focused]);
|
|
544
546
|
return /* @__PURE__ */ jsx(Button, {
|
|
@@ -557,38 +559,38 @@ function CalendarDayButton({ className, day, modifiers,...props }) {
|
|
|
557
559
|
|
|
558
560
|
//#endregion
|
|
559
561
|
//#region src/card/card.tsx
|
|
560
|
-
const Card = React$
|
|
562
|
+
const Card = React$42.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
|
|
561
563
|
ref,
|
|
562
564
|
className: cn("rounded-xl border bg-card text-card-foreground shadow", className),
|
|
563
565
|
...props
|
|
564
566
|
}));
|
|
565
567
|
Card.displayName = "Card";
|
|
566
|
-
const CardHeader = React$
|
|
568
|
+
const CardHeader = React$42.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
|
|
567
569
|
ref,
|
|
568
570
|
className: cn("flex flex-col space-y-1.5 p-6", className),
|
|
569
571
|
...props
|
|
570
572
|
}));
|
|
571
573
|
CardHeader.displayName = "CardHeader";
|
|
572
|
-
const CardTitle = React$
|
|
574
|
+
const CardTitle = React$42.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsx("h3", {
|
|
573
575
|
ref,
|
|
574
576
|
className: cn("font-semibold leading-none tracking-tight", className),
|
|
575
577
|
...props,
|
|
576
578
|
children
|
|
577
579
|
}));
|
|
578
580
|
CardTitle.displayName = "CardTitle";
|
|
579
|
-
const CardDescription = React$
|
|
581
|
+
const CardDescription = React$42.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("p", {
|
|
580
582
|
ref,
|
|
581
583
|
className: cn("text-sm text-muted-foreground", className),
|
|
582
584
|
...props
|
|
583
585
|
}));
|
|
584
586
|
CardDescription.displayName = "CardDescription";
|
|
585
|
-
const CardContent = React$
|
|
587
|
+
const CardContent = React$42.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
|
|
586
588
|
ref,
|
|
587
589
|
className: cn("p-6 pt-0", className),
|
|
588
590
|
...props
|
|
589
591
|
}));
|
|
590
592
|
CardContent.displayName = "CardContent";
|
|
591
|
-
const CardFooter = React$
|
|
593
|
+
const CardFooter = React$42.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
|
|
592
594
|
ref,
|
|
593
595
|
className: cn("flex items-center p-6 pt-0", className),
|
|
594
596
|
...props
|
|
@@ -599,7 +601,7 @@ CardFooter.displayName = "CardFooter";
|
|
|
599
601
|
//#region src/card-hover/card-hover.tsx
|
|
600
602
|
const HoverCard = HoverCardPrimitive.Root;
|
|
601
603
|
const HoverCardTrigger = HoverCardPrimitive.Trigger;
|
|
602
|
-
const HoverCardContent = React$
|
|
604
|
+
const HoverCardContent = React$41.forwardRef(({ className, align = "center", sideOffset = 4,...props }, ref) => /* @__PURE__ */ jsx(HoverCardPrimitive.Content, {
|
|
603
605
|
ref,
|
|
604
606
|
align,
|
|
605
607
|
sideOffset,
|
|
@@ -610,31 +612,31 @@ HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
|
|
|
610
612
|
|
|
611
613
|
//#endregion
|
|
612
614
|
//#region src/carousel/carousel.tsx
|
|
613
|
-
const CarouselContext = React$
|
|
615
|
+
const CarouselContext = React$40.createContext(null);
|
|
614
616
|
function useCarousel() {
|
|
615
|
-
const context = React$
|
|
617
|
+
const context = React$40.useContext(CarouselContext);
|
|
616
618
|
if (!context) throw new Error("useCarousel must be used within a <Carousel />");
|
|
617
619
|
return context;
|
|
618
620
|
}
|
|
619
|
-
const Carousel = React$
|
|
621
|
+
const Carousel = React$40.forwardRef(({ orientation = "horizontal", opts, setApi, plugins, className, children,...props }, ref) => {
|
|
620
622
|
const [carouselRef, api] = useEmblaCarousel({
|
|
621
623
|
...opts,
|
|
622
624
|
axis: orientation === "horizontal" ? "x" : "y"
|
|
623
625
|
}, plugins);
|
|
624
|
-
const [canScrollPrev, setCanScrollPrev] = React$
|
|
625
|
-
const [canScrollNext, setCanScrollNext] = React$
|
|
626
|
-
const onSelect = React$
|
|
626
|
+
const [canScrollPrev, setCanScrollPrev] = React$40.useState(false);
|
|
627
|
+
const [canScrollNext, setCanScrollNext] = React$40.useState(false);
|
|
628
|
+
const onSelect = React$40.useCallback(() => {
|
|
627
629
|
if (!api) return;
|
|
628
630
|
setCanScrollPrev(api.canScrollPrev());
|
|
629
631
|
setCanScrollNext(api.canScrollNext());
|
|
630
632
|
}, [api]);
|
|
631
|
-
const scrollPrev = React$
|
|
633
|
+
const scrollPrev = React$40.useCallback(() => {
|
|
632
634
|
api?.scrollPrev();
|
|
633
635
|
}, [api]);
|
|
634
|
-
const scrollNext = React$
|
|
636
|
+
const scrollNext = React$40.useCallback(() => {
|
|
635
637
|
api?.scrollNext();
|
|
636
638
|
}, [api]);
|
|
637
|
-
const handleKeyDown = React$
|
|
639
|
+
const handleKeyDown = React$40.useCallback((event) => {
|
|
638
640
|
if (event.key === "ArrowLeft") {
|
|
639
641
|
event.preventDefault();
|
|
640
642
|
scrollPrev();
|
|
@@ -643,11 +645,11 @@ const Carousel = React$38.forwardRef(({ orientation = "horizontal", opts, setApi
|
|
|
643
645
|
scrollNext();
|
|
644
646
|
}
|
|
645
647
|
}, [scrollPrev, scrollNext]);
|
|
646
|
-
React$
|
|
648
|
+
React$40.useEffect(() => {
|
|
647
649
|
if (!api || !setApi) return;
|
|
648
650
|
setApi(api);
|
|
649
651
|
}, [api, setApi]);
|
|
650
|
-
React$
|
|
652
|
+
React$40.useEffect(() => {
|
|
651
653
|
if (!api) return;
|
|
652
654
|
onSelect();
|
|
653
655
|
api.on("reInit", onSelect);
|
|
@@ -688,7 +690,7 @@ const Carousel = React$38.forwardRef(({ orientation = "horizontal", opts, setApi
|
|
|
688
690
|
});
|
|
689
691
|
});
|
|
690
692
|
Carousel.displayName = "Carousel";
|
|
691
|
-
const CarouselContent = React$
|
|
693
|
+
const CarouselContent = React$40.forwardRef(({ className,...props }, ref) => {
|
|
692
694
|
const { carouselRef, orientation } = useCarousel();
|
|
693
695
|
return /* @__PURE__ */ jsx("div", {
|
|
694
696
|
ref: carouselRef,
|
|
@@ -701,7 +703,7 @@ const CarouselContent = React$38.forwardRef(({ className,...props }, ref) => {
|
|
|
701
703
|
});
|
|
702
704
|
});
|
|
703
705
|
CarouselContent.displayName = "CarouselContent";
|
|
704
|
-
const CarouselItem = React$
|
|
706
|
+
const CarouselItem = React$40.forwardRef(({ className,...props }, ref) => {
|
|
705
707
|
const { orientation } = useCarousel();
|
|
706
708
|
return /* @__PURE__ */ jsx("div", {
|
|
707
709
|
ref,
|
|
@@ -711,7 +713,7 @@ const CarouselItem = React$38.forwardRef(({ className,...props }, ref) => {
|
|
|
711
713
|
});
|
|
712
714
|
});
|
|
713
715
|
CarouselItem.displayName = "CarouselItem";
|
|
714
|
-
const CarouselPrevious = React$
|
|
716
|
+
const CarouselPrevious = React$40.forwardRef(({ className, variant = "outline", size = "icon",...props }, ref) => {
|
|
715
717
|
const { orientation, scrollPrev, canScrollPrev } = useCarousel();
|
|
716
718
|
return /* @__PURE__ */ jsxs(Button, {
|
|
717
719
|
ref,
|
|
@@ -728,7 +730,7 @@ const CarouselPrevious = React$38.forwardRef(({ className, variant = "outline",
|
|
|
728
730
|
});
|
|
729
731
|
});
|
|
730
732
|
CarouselPrevious.displayName = "CarouselPrevious";
|
|
731
|
-
const CarouselNext = React$
|
|
733
|
+
const CarouselNext = React$40.forwardRef(({ className, variant = "outline", size = "icon",...props }, ref) => {
|
|
732
734
|
const { orientation, scrollNext, canScrollNext } = useCarousel();
|
|
733
735
|
return /* @__PURE__ */ jsxs(Button, {
|
|
734
736
|
ref,
|
|
@@ -912,7 +914,7 @@ function DialogDescription({ className,...props }) {
|
|
|
912
914
|
|
|
913
915
|
//#endregion
|
|
914
916
|
//#region src/command-palette/command-palette.tsx
|
|
915
|
-
const CommandPalette = React$
|
|
917
|
+
const CommandPalette = React$39.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1, {
|
|
916
918
|
ref,
|
|
917
919
|
className: cn("flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground", className),
|
|
918
920
|
...props
|
|
@@ -930,7 +932,7 @@ const CommandPaletteDialog = ({ children,...props }) => {
|
|
|
930
932
|
})
|
|
931
933
|
});
|
|
932
934
|
};
|
|
933
|
-
const CommandPaletteInput = React$
|
|
935
|
+
const CommandPaletteInput = React$39.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsxs("div", {
|
|
934
936
|
className: "flex items-center border-b px-3",
|
|
935
937
|
"data-cmdk-input-wrapper": "",
|
|
936
938
|
children: [/* @__PURE__ */ jsx(MagnifyingGlassIcon, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }), /* @__PURE__ */ jsx(Command$1.Input, {
|
|
@@ -940,31 +942,31 @@ const CommandPaletteInput = React$37.forwardRef(({ className,...props }, ref) =>
|
|
|
940
942
|
})]
|
|
941
943
|
}));
|
|
942
944
|
CommandPaletteInput.displayName = Command$1.Input.displayName;
|
|
943
|
-
const CommandPaletteList = React$
|
|
945
|
+
const CommandPaletteList = React$39.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1.List, {
|
|
944
946
|
ref,
|
|
945
947
|
className: cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className),
|
|
946
948
|
...props
|
|
947
949
|
}));
|
|
948
950
|
CommandPaletteList.displayName = Command$1.List.displayName;
|
|
949
|
-
const CommandPaletteEmpty = React$
|
|
951
|
+
const CommandPaletteEmpty = React$39.forwardRef((props, ref) => /* @__PURE__ */ jsx(Command$1.Empty, {
|
|
950
952
|
ref,
|
|
951
953
|
className: "py-6 text-center text-sm",
|
|
952
954
|
...props
|
|
953
955
|
}));
|
|
954
956
|
CommandPaletteEmpty.displayName = Command$1.Empty.displayName;
|
|
955
|
-
const CommandPaletteGroup = React$
|
|
957
|
+
const CommandPaletteGroup = React$39.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1.Group, {
|
|
956
958
|
ref,
|
|
957
959
|
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),
|
|
958
960
|
...props
|
|
959
961
|
}));
|
|
960
962
|
CommandPaletteGroup.displayName = Command$1.Group.displayName;
|
|
961
|
-
const CommandPaletteSeparator = React$
|
|
963
|
+
const CommandPaletteSeparator = React$39.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1.Separator, {
|
|
962
964
|
ref,
|
|
963
965
|
className: cn("-mx-1 h-px bg-border", className),
|
|
964
966
|
...props
|
|
965
967
|
}));
|
|
966
968
|
CommandPaletteSeparator.displayName = Command$1.Separator.displayName;
|
|
967
|
-
const CommandPaletteItem = React$
|
|
969
|
+
const CommandPaletteItem = React$39.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1.Item, {
|
|
968
970
|
ref,
|
|
969
971
|
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),
|
|
970
972
|
...props
|
|
@@ -1040,8 +1042,8 @@ const frameworks = [
|
|
|
1040
1042
|
}
|
|
1041
1043
|
];
|
|
1042
1044
|
function ComboboxDemo() {
|
|
1043
|
-
const [open, setOpen] = React$
|
|
1044
|
-
const [value, setValue] = React$
|
|
1045
|
+
const [open, setOpen] = React$38.useState(false);
|
|
1046
|
+
const [value, setValue] = React$38.useState("");
|
|
1045
1047
|
return /* @__PURE__ */ jsxs(Popover, {
|
|
1046
1048
|
open,
|
|
1047
1049
|
onOpenChange: setOpen,
|
|
@@ -1281,32 +1283,32 @@ const ContextMenuGroup = ContextMenuPrimitive.Group;
|
|
|
1281
1283
|
const ContextMenuPortal = ContextMenuPrimitive.Portal;
|
|
1282
1284
|
const ContextMenuSub = ContextMenuPrimitive.Sub;
|
|
1283
1285
|
const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
|
|
1284
|
-
const ContextMenuSubTrigger = React$
|
|
1286
|
+
const ContextMenuSubTrigger = React$37.forwardRef(({ className, inset, children,...props }, ref) => /* @__PURE__ */ jsxs(ContextMenuPrimitive.SubTrigger, {
|
|
1285
1287
|
ref,
|
|
1286
1288
|
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),
|
|
1287
1289
|
...props,
|
|
1288
1290
|
children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto h-4 w-4" })]
|
|
1289
1291
|
}));
|
|
1290
1292
|
ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
|
|
1291
|
-
const ContextMenuSubContent = React$
|
|
1293
|
+
const ContextMenuSubContent = React$37.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.SubContent, {
|
|
1292
1294
|
ref,
|
|
1293
1295
|
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),
|
|
1294
1296
|
...props
|
|
1295
1297
|
}));
|
|
1296
1298
|
ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
|
|
1297
|
-
const ContextMenuContent = React$
|
|
1299
|
+
const ContextMenuContent = React$37.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(ContextMenuPrimitive.Content, {
|
|
1298
1300
|
ref,
|
|
1299
1301
|
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),
|
|
1300
1302
|
...props
|
|
1301
1303
|
}) }));
|
|
1302
1304
|
ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
|
|
1303
|
-
const ContextMenuItem = React$
|
|
1305
|
+
const ContextMenuItem = React$37.forwardRef(({ className, inset,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Item, {
|
|
1304
1306
|
ref,
|
|
1305
1307
|
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),
|
|
1306
1308
|
...props
|
|
1307
1309
|
}));
|
|
1308
1310
|
ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
|
|
1309
|
-
const ContextMenuCheckboxItem = React$
|
|
1311
|
+
const ContextMenuCheckboxItem = React$37.forwardRef(({ className, children, checked,...props }, ref) => /* @__PURE__ */ jsxs(ContextMenuPrimitive.CheckboxItem, {
|
|
1310
1312
|
ref,
|
|
1311
1313
|
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),
|
|
1312
1314
|
checked,
|
|
@@ -1317,7 +1319,7 @@ const ContextMenuCheckboxItem = React$35.forwardRef(({ className, children, chec
|
|
|
1317
1319
|
}), children]
|
|
1318
1320
|
}));
|
|
1319
1321
|
ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
|
|
1320
|
-
const ContextMenuRadioItem = React$
|
|
1322
|
+
const ContextMenuRadioItem = React$37.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsxs(ContextMenuPrimitive.RadioItem, {
|
|
1321
1323
|
ref,
|
|
1322
1324
|
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),
|
|
1323
1325
|
...props,
|
|
@@ -1327,13 +1329,13 @@ const ContextMenuRadioItem = React$35.forwardRef(({ className, children,...props
|
|
|
1327
1329
|
}), children]
|
|
1328
1330
|
}));
|
|
1329
1331
|
ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
|
|
1330
|
-
const ContextMenuLabel = React$
|
|
1332
|
+
const ContextMenuLabel = React$37.forwardRef(({ className, inset,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Label, {
|
|
1331
1333
|
ref,
|
|
1332
1334
|
className: cn("px-2 py-1.5 text-sm font-semibold text-foreground", inset && "pl-8", className),
|
|
1333
1335
|
...props
|
|
1334
1336
|
}));
|
|
1335
1337
|
ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
|
|
1336
|
-
const ContextMenuSeparator = React$
|
|
1338
|
+
const ContextMenuSeparator = React$37.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Separator, {
|
|
1337
1339
|
ref,
|
|
1338
1340
|
className: cn("-mx-1 my-1 h-px bg-border", className),
|
|
1339
1341
|
...props
|
|
@@ -1478,7 +1480,7 @@ function DropdownMenuSubContent({ className,...props }) {
|
|
|
1478
1480
|
const TooltipProvider = TooltipPrimitive.Provider;
|
|
1479
1481
|
const Tooltip = TooltipPrimitive.Root;
|
|
1480
1482
|
const TooltipTrigger = TooltipPrimitive.Trigger;
|
|
1481
|
-
const TooltipContent = React$
|
|
1483
|
+
const TooltipContent = React$36.forwardRef(({ className, sideOffset = 4,...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Content, {
|
|
1482
1484
|
ref,
|
|
1483
1485
|
sideOffset,
|
|
1484
1486
|
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),
|
|
@@ -1985,7 +1987,7 @@ function getColumnVariant(variant) {
|
|
|
1985
1987
|
}
|
|
1986
1988
|
}
|
|
1987
1989
|
function DataGridColumnHeader({ header, table, className, onPointerDown,...props }) {
|
|
1988
|
-
const [open, setOpen] = React$
|
|
1990
|
+
const [open, setOpen] = React$35.useState(false);
|
|
1989
1991
|
const column = header.column;
|
|
1990
1992
|
const label = column.columnDef.meta?.label ? column.columnDef.meta.label : typeof column.columnDef.header === "string" ? column.columnDef.header : column.id;
|
|
1991
1993
|
const isAnyColumnResizing = table.getState().columnSizingInfo.isResizingColumn;
|
|
@@ -1994,7 +1996,7 @@ function DataGridColumnHeader({ header, table, className, onPointerDown,...props
|
|
|
1994
1996
|
const pinnedPosition = column.getIsPinned();
|
|
1995
1997
|
const isPinnedLeft = pinnedPosition === "left";
|
|
1996
1998
|
const isPinnedRight = pinnedPosition === "right";
|
|
1997
|
-
const onSortingChange = React$
|
|
1999
|
+
const onSortingChange = React$35.useCallback((direction) => {
|
|
1998
2000
|
table.setSorting((prev) => {
|
|
1999
2001
|
const existingSortIndex = prev.findIndex((sort) => sort.id === column.id);
|
|
2000
2002
|
const newSort = {
|
|
@@ -2008,19 +2010,19 @@ function DataGridColumnHeader({ header, table, className, onPointerDown,...props
|
|
|
2008
2010
|
} else return [...prev, newSort];
|
|
2009
2011
|
});
|
|
2010
2012
|
}, [column.id, table]);
|
|
2011
|
-
const onSortRemove = React$
|
|
2013
|
+
const onSortRemove = React$35.useCallback(() => {
|
|
2012
2014
|
table.setSorting((prev) => prev.filter((sort) => sort.id !== column.id));
|
|
2013
2015
|
}, [column.id, table]);
|
|
2014
|
-
const onLeftPin = React$
|
|
2016
|
+
const onLeftPin = React$35.useCallback(() => {
|
|
2015
2017
|
column.pin("left");
|
|
2016
2018
|
}, [column]);
|
|
2017
|
-
const onRightPin = React$
|
|
2019
|
+
const onRightPin = React$35.useCallback(() => {
|
|
2018
2020
|
column.pin("right");
|
|
2019
2021
|
}, [column]);
|
|
2020
|
-
const onUnpin = React$
|
|
2022
|
+
const onUnpin = React$35.useCallback(() => {
|
|
2021
2023
|
column.pin(false);
|
|
2022
2024
|
}, [column]);
|
|
2023
|
-
const onTriggerPointerDown = React$
|
|
2025
|
+
const onTriggerPointerDown = React$35.useCallback((event) => {
|
|
2024
2026
|
onPointerDown?.(event);
|
|
2025
2027
|
if (event.defaultPrevented) return;
|
|
2026
2028
|
if (event.button !== 0) return;
|
|
@@ -2132,7 +2134,7 @@ function DataGridColumnHeader({ header, table, className, onPointerDown,...props
|
|
|
2132
2134
|
})
|
|
2133
2135
|
] });
|
|
2134
2136
|
}
|
|
2135
|
-
const DataGridColumnResizer = React$
|
|
2137
|
+
const DataGridColumnResizer = React$35.memo(DataGridColumnResizerImpl, (prev, next) => {
|
|
2136
2138
|
const prevColumn = prev.header.column;
|
|
2137
2139
|
const nextColumn = next.header.column;
|
|
2138
2140
|
if (prevColumn.getIsResizing() !== nextColumn.getIsResizing() || prevColumn.getSize() !== nextColumn.getSize()) return false;
|
|
@@ -2141,7 +2143,7 @@ const DataGridColumnResizer = React$33.memo(DataGridColumnResizerImpl, (prev, ne
|
|
|
2141
2143
|
});
|
|
2142
2144
|
function DataGridColumnResizerImpl({ header, table, label }) {
|
|
2143
2145
|
const defaultColumnDef = table._getDefaultColumnDef();
|
|
2144
|
-
const onDoubleClick = React$
|
|
2146
|
+
const onDoubleClick = React$35.useCallback(() => {
|
|
2145
2147
|
header.column.resetSize();
|
|
2146
2148
|
}, [header.column]);
|
|
2147
2149
|
return /* @__PURE__ */ jsx("div", {
|
|
@@ -2250,7 +2252,7 @@ function DataGridContextMenu({ table }) {
|
|
|
2250
2252
|
onRowsDelete
|
|
2251
2253
|
});
|
|
2252
2254
|
}
|
|
2253
|
-
const ContextMenu$1 = React$
|
|
2255
|
+
const ContextMenu$1 = React$34.memo(ContextMenuImpl, (prev, next) => {
|
|
2254
2256
|
if (prev.contextMenu.open !== next.contextMenu.open) return false;
|
|
2255
2257
|
if (!next.contextMenu.open) return true;
|
|
2256
2258
|
if (prev.contextMenu.x !== next.contextMenu.x) return false;
|
|
@@ -2261,7 +2263,7 @@ const ContextMenu$1 = React$32.memo(ContextMenuImpl, (prev, next) => {
|
|
|
2261
2263
|
return true;
|
|
2262
2264
|
});
|
|
2263
2265
|
function ContextMenuImpl({ table, dataGridRef, contextMenu, onContextMenuOpenChange, selectionState, onDataUpdate, onRowsDelete }) {
|
|
2264
|
-
const triggerStyle = React$
|
|
2266
|
+
const triggerStyle = React$34.useMemo(() => ({
|
|
2265
2267
|
position: "fixed",
|
|
2266
2268
|
left: `${contextMenu.x}px`,
|
|
2267
2269
|
top: `${contextMenu.y}px`,
|
|
@@ -2274,11 +2276,11 @@ function ContextMenuImpl({ table, dataGridRef, contextMenu, onContextMenuOpenCha
|
|
|
2274
2276
|
pointerEvents: "none",
|
|
2275
2277
|
opacity: 0
|
|
2276
2278
|
}), [contextMenu.x, contextMenu.y]);
|
|
2277
|
-
const onCloseAutoFocus = React$
|
|
2279
|
+
const onCloseAutoFocus = React$34.useCallback((event) => {
|
|
2278
2280
|
event.preventDefault();
|
|
2279
2281
|
dataGridRef?.current?.focus();
|
|
2280
2282
|
}, [dataGridRef]);
|
|
2281
|
-
const onCopy = React$
|
|
2283
|
+
const onCopy = React$34.useCallback(async () => {
|
|
2282
2284
|
if (!selectionState?.selectedCells || selectionState.selectedCells.size === 0) return;
|
|
2283
2285
|
const rows = table.getRowModel().rows;
|
|
2284
2286
|
const columnIds = [];
|
|
@@ -2317,7 +2319,7 @@ function ContextMenuImpl({ table, dataGridRef, contextMenu, onContextMenuOpenCha
|
|
|
2317
2319
|
await navigator.clipboard.writeText(tsvData);
|
|
2318
2320
|
toast$1.success(`${selectionState.selectedCells.size} cell${selectionState.selectedCells.size !== 1 ? "s" : ""} copied`);
|
|
2319
2321
|
}, [table, selectionState]);
|
|
2320
|
-
const canClear = React$
|
|
2322
|
+
const canClear = React$34.useMemo(() => {
|
|
2321
2323
|
if (!selectionState?.selectedCells || selectionState.selectedCells.size === 0) return false;
|
|
2322
2324
|
const visibleCols = table.getVisibleLeafColumns();
|
|
2323
2325
|
const rows = table.getRowModel().rows;
|
|
@@ -2334,7 +2336,7 @@ function ContextMenuImpl({ table, dataGridRef, contextMenu, onContextMenuOpenCha
|
|
|
2334
2336
|
}
|
|
2335
2337
|
return true;
|
|
2336
2338
|
}, [selectionState, table]);
|
|
2337
|
-
const onClear = React$
|
|
2339
|
+
const onClear = React$34.useCallback(() => {
|
|
2338
2340
|
if (!selectionState?.selectedCells || selectionState.selectedCells.size === 0) return;
|
|
2339
2341
|
if (!canClear) return;
|
|
2340
2342
|
const updates = [];
|
|
@@ -2353,7 +2355,7 @@ function ContextMenuImpl({ table, dataGridRef, contextMenu, onContextMenuOpenCha
|
|
|
2353
2355
|
selectionState,
|
|
2354
2356
|
canClear
|
|
2355
2357
|
]);
|
|
2356
|
-
const onDelete = React$
|
|
2358
|
+
const onDelete = React$34.useCallback(async () => {
|
|
2357
2359
|
if (!selectionState?.selectedCells || selectionState.selectedCells.size === 0) return;
|
|
2358
2360
|
const rowIndices = new Set();
|
|
2359
2361
|
for (const cellKey of selectionState.selectedCells) {
|
|
@@ -2430,12 +2432,12 @@ function composeRefs(...refs) {
|
|
|
2430
2432
|
* Accepts callback refs and RefObject(s)
|
|
2431
2433
|
*/
|
|
2432
2434
|
function useComposedRefs(...refs) {
|
|
2433
|
-
return React$
|
|
2435
|
+
return React$33.useCallback(composeRefs(...refs), refs);
|
|
2434
2436
|
}
|
|
2435
2437
|
|
|
2436
2438
|
//#endregion
|
|
2437
2439
|
//#region src/data-grid/data-grid-row.tsx
|
|
2438
|
-
const DataGridRow = React$
|
|
2440
|
+
const DataGridRow = React$32.memo(DataGridRowImpl, (prev, next) => {
|
|
2439
2441
|
if (prev.row.id !== next.row.id) return false;
|
|
2440
2442
|
if (prev.row.original !== next.row.original) return false;
|
|
2441
2443
|
const prevRowIndex = prev.virtualRowIndex;
|
|
@@ -2454,9 +2456,10 @@ const DataGridRow = React$30.memo(DataGridRowImpl, (prev, next) => {
|
|
|
2454
2456
|
}
|
|
2455
2457
|
if (prev.selectionSize !== next.selectionSize) return false;
|
|
2456
2458
|
if (prev.visibleColumnIds !== next.visibleColumnIds) return false;
|
|
2459
|
+
if (prev.isHighlighted !== next.isHighlighted) return false;
|
|
2457
2460
|
return true;
|
|
2458
2461
|
});
|
|
2459
|
-
function DataGridRowImpl({ row, virtualRowIndex, virtualStart, rowVirtualizer, rowMapRef, rowHeight, focusedCell, editingCell: _editingCell, selectionSize: _selectionSize, visibleColumnIds: _visibleColumnIds, ref, className,...props }) {
|
|
2462
|
+
function DataGridRowImpl({ row, virtualRowIndex, virtualStart, rowVirtualizer, rowMapRef, rowHeight, focusedCell, editingCell: _editingCell, selectionSize: _selectionSize, visibleColumnIds: _visibleColumnIds, isHighlighted = false, onRowClick, ref, className,...props }) {
|
|
2460
2463
|
const rowRef = useComposedRefs(ref, (node) => {
|
|
2461
2464
|
if (node && typeof virtualRowIndex !== "undefined") {
|
|
2462
2465
|
rowVirtualizer.measureElement(node);
|
|
@@ -2464,19 +2467,26 @@ function DataGridRowImpl({ row, virtualRowIndex, virtualStart, rowVirtualizer, r
|
|
|
2464
2467
|
}
|
|
2465
2468
|
});
|
|
2466
2469
|
const isRowSelected = row.getIsSelected();
|
|
2470
|
+
const handleRowClick = React$32.useCallback((event) => {
|
|
2471
|
+
const target = event.target;
|
|
2472
|
+
if (target.closest("input, button, [role=\"checkbox\"]")) return;
|
|
2473
|
+
if (event.detail === 1) onRowClick?.(virtualRowIndex);
|
|
2474
|
+
}, [onRowClick, virtualRowIndex]);
|
|
2467
2475
|
return /* @__PURE__ */ jsx("div", {
|
|
2468
2476
|
role: "row",
|
|
2469
2477
|
"aria-rowindex": virtualRowIndex + 2,
|
|
2470
2478
|
"aria-selected": isRowSelected,
|
|
2471
2479
|
"data-index": virtualRowIndex,
|
|
2472
2480
|
"data-slot": "grid-row",
|
|
2481
|
+
"data-highlighted": isHighlighted || void 0,
|
|
2473
2482
|
ref: rowRef,
|
|
2474
2483
|
tabIndex: -1,
|
|
2475
|
-
className: cn("absolute flex w-full border-b h-[calc(var(--data-grid-line-height)*(var(--line-count))+12px)]", className),
|
|
2484
|
+
className: cn("absolute flex w-full border-b h-[calc(var(--data-grid-line-height)*(var(--line-count))+12px)]", onRowClick && !isHighlighted && "cursor-pointer hover:bg-accent/30", isHighlighted && "cursor-pointer bg-primary/10 border-t border-primary/40", className),
|
|
2476
2485
|
style: {
|
|
2477
2486
|
"--line-count": `${getLineCount(rowHeight)}`,
|
|
2478
2487
|
transform: `translateY(${virtualStart}px)`
|
|
2479
2488
|
},
|
|
2489
|
+
onClick: onRowClick ? handleRowClick : void 0,
|
|
2480
2490
|
...props,
|
|
2481
2491
|
children: row.getVisibleCells().map((cell, colIndex) => {
|
|
2482
2492
|
const isCellFocused = focusedCell?.rowIndex === virtualRowIndex && focusedCell?.columnId === cell.column.id;
|
|
@@ -2507,20 +2517,20 @@ function DataGridRowImpl({ row, virtualRowIndex, virtualStart, rowVirtualizer, r
|
|
|
2507
2517
|
* prop or avoid re-executing effects when passed as a dependency
|
|
2508
2518
|
*/
|
|
2509
2519
|
function useCallbackRef(callback) {
|
|
2510
|
-
const callbackRef = React$
|
|
2511
|
-
React$
|
|
2520
|
+
const callbackRef = React$31.useRef(callback);
|
|
2521
|
+
React$31.useEffect(() => {
|
|
2512
2522
|
callbackRef.current = callback;
|
|
2513
2523
|
});
|
|
2514
|
-
return React$
|
|
2524
|
+
return React$31.useMemo(() => (...args) => callbackRef.current?.(...args), []);
|
|
2515
2525
|
}
|
|
2516
2526
|
|
|
2517
2527
|
//#endregion
|
|
2518
2528
|
//#region src/hooks/use-debounced-callback.ts
|
|
2519
2529
|
function useDebouncedCallback(callback, delay) {
|
|
2520
2530
|
const handleCallback = useCallbackRef(callback);
|
|
2521
|
-
const debounceTimerRef = React$
|
|
2522
|
-
React$
|
|
2523
|
-
const setValue = React$
|
|
2531
|
+
const debounceTimerRef = React$30.useRef(0);
|
|
2532
|
+
React$30.useEffect(() => () => window.clearTimeout(debounceTimerRef.current), []);
|
|
2533
|
+
const setValue = React$30.useCallback((...args) => {
|
|
2524
2534
|
window.clearTimeout(debounceTimerRef.current);
|
|
2525
2535
|
debounceTimerRef.current = window.setTimeout(() => handleCallback(...args), delay);
|
|
2526
2536
|
}, [handleCallback, delay]);
|
|
@@ -2529,15 +2539,19 @@ function useDebouncedCallback(callback, delay) {
|
|
|
2529
2539
|
|
|
2530
2540
|
//#endregion
|
|
2531
2541
|
//#region src/input/input.tsx
|
|
2542
|
+
/**
|
|
2543
|
+
* Input variants for styling the input element.
|
|
2544
|
+
* NOTE: When modifying variants, also update numberInputWrapperVariants in number-input.tsx
|
|
2545
|
+
*/
|
|
2532
2546
|
const inputVariants = cva("file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
|
|
2533
2547
|
variants: { variant: {
|
|
2534
|
-
default: "h-9 md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
|
|
2535
|
-
simple: "h-8"
|
|
2548
|
+
default: "min-h-9 md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
|
|
2549
|
+
simple: "min-h-8"
|
|
2536
2550
|
} },
|
|
2537
2551
|
defaultVariants: { variant: "default" }
|
|
2538
2552
|
});
|
|
2539
|
-
|
|
2540
|
-
|
|
2553
|
+
const Input = React$29.forwardRef(({ className, type, variant, __e2e_test_id__, onEnter, wrapperClassName,...props }, ref) => {
|
|
2554
|
+
const input = /* @__PURE__ */ jsx("input", {
|
|
2541
2555
|
type,
|
|
2542
2556
|
"data-slot": "input",
|
|
2543
2557
|
className: cn(inputVariants({
|
|
@@ -2549,13 +2563,20 @@ function Input({ className, type, variant, __e2e_test_id__, onEnter,...props })
|
|
|
2549
2563
|
props.onKeyDown?.(e);
|
|
2550
2564
|
if (e.key === "Enter") onEnter?.();
|
|
2551
2565
|
},
|
|
2566
|
+
ref,
|
|
2552
2567
|
...props
|
|
2553
2568
|
});
|
|
2554
|
-
|
|
2569
|
+
if (wrapperClassName) return /* @__PURE__ */ jsx("div", {
|
|
2570
|
+
className: wrapperClassName,
|
|
2571
|
+
children: input
|
|
2572
|
+
});
|
|
2573
|
+
return input;
|
|
2574
|
+
});
|
|
2575
|
+
Input.displayName = "Input";
|
|
2555
2576
|
|
|
2556
2577
|
//#endregion
|
|
2557
2578
|
//#region src/data-grid/data-grid-search.tsx
|
|
2558
|
-
const DataGridSearch = React$
|
|
2579
|
+
const DataGridSearch = React$28.memo(DataGridSearchImpl, (prev, next) => {
|
|
2559
2580
|
if (prev.searchOpen !== next.searchOpen) return false;
|
|
2560
2581
|
if (!next.searchOpen) return true;
|
|
2561
2582
|
if (prev.searchQuery !== next.searchQuery || prev.matchIndex !== next.matchIndex) return false;
|
|
@@ -2569,13 +2590,13 @@ const DataGridSearch = React$27.memo(DataGridSearchImpl, (prev, next) => {
|
|
|
2569
2590
|
return true;
|
|
2570
2591
|
});
|
|
2571
2592
|
function DataGridSearchImpl({ searchMatches, matchIndex, searchOpen, onSearchOpenChange, searchQuery, onSearchQueryChange, onSearch, onNavigateToNextMatch, onNavigateToPrevMatch }) {
|
|
2572
|
-
const inputRef = React$
|
|
2573
|
-
React$
|
|
2593
|
+
const inputRef = React$28.useRef(null);
|
|
2594
|
+
React$28.useEffect(() => {
|
|
2574
2595
|
if (searchOpen) requestAnimationFrame(() => {
|
|
2575
2596
|
inputRef.current?.focus();
|
|
2576
2597
|
});
|
|
2577
2598
|
}, [searchOpen]);
|
|
2578
|
-
React$
|
|
2599
|
+
React$28.useEffect(() => {
|
|
2579
2600
|
if (!searchOpen) return;
|
|
2580
2601
|
function onEscape(event) {
|
|
2581
2602
|
if (event.key === "Escape") {
|
|
@@ -2586,7 +2607,7 @@ function DataGridSearchImpl({ searchMatches, matchIndex, searchOpen, onSearchOpe
|
|
|
2586
2607
|
document.addEventListener("keydown", onEscape);
|
|
2587
2608
|
return () => document.removeEventListener("keydown", onEscape);
|
|
2588
2609
|
}, [searchOpen, onSearchOpenChange]);
|
|
2589
|
-
const onKeyDown = React$
|
|
2610
|
+
const onKeyDown = React$28.useCallback((event) => {
|
|
2590
2611
|
event.stopPropagation();
|
|
2591
2612
|
if (event.key === "Enter") {
|
|
2592
2613
|
event.preventDefault();
|
|
@@ -2597,20 +2618,20 @@ function DataGridSearchImpl({ searchMatches, matchIndex, searchOpen, onSearchOpe
|
|
|
2597
2618
|
const debouncedSearch = useDebouncedCallback((query) => {
|
|
2598
2619
|
onSearch(query);
|
|
2599
2620
|
}, 150);
|
|
2600
|
-
const onChange = React$
|
|
2621
|
+
const onChange = React$28.useCallback((event) => {
|
|
2601
2622
|
const value = event.target.value;
|
|
2602
2623
|
onSearchQueryChange(value);
|
|
2603
2624
|
debouncedSearch(value);
|
|
2604
2625
|
}, [onSearchQueryChange, debouncedSearch]);
|
|
2605
|
-
const onTriggerPointerDown = React$
|
|
2626
|
+
const onTriggerPointerDown = React$28.useCallback((event) => {
|
|
2606
2627
|
const target = event.target;
|
|
2607
2628
|
if (!(target instanceof HTMLElement)) return;
|
|
2608
2629
|
if (target.hasPointerCapture(event.pointerId)) target.releasePointerCapture(event.pointerId);
|
|
2609
2630
|
if (event.button === 0 && event.ctrlKey === false && event.pointerType === "mouse" && !(event.target instanceof HTMLInputElement)) event.preventDefault();
|
|
2610
2631
|
}, []);
|
|
2611
|
-
const onPrevMatchPointerDown = React$
|
|
2612
|
-
const onNextMatchPointerDown = React$
|
|
2613
|
-
const onClose = React$
|
|
2632
|
+
const onPrevMatchPointerDown = React$28.useCallback((event) => onTriggerPointerDown(event), [onTriggerPointerDown]);
|
|
2633
|
+
const onNextMatchPointerDown = React$28.useCallback((event) => onTriggerPointerDown(event), [onTriggerPointerDown]);
|
|
2634
|
+
const onClose = React$28.useCallback(() => {
|
|
2614
2635
|
onSearchOpenChange(false);
|
|
2615
2636
|
}, [onSearchOpenChange]);
|
|
2616
2637
|
if (!searchOpen) return null;
|
|
@@ -2685,16 +2706,18 @@ function DataGrid({ dataGridRef, headerRef, rowMapRef, footerRef, table, rowVirt
|
|
|
2685
2706
|
const focusedCell = meta?.focusedCell ?? null;
|
|
2686
2707
|
const editingCell = meta?.editingCell ?? null;
|
|
2687
2708
|
const selectionSize = meta?.selectionState?.selectedCells?.size ?? 0;
|
|
2709
|
+
const highlightedRowIndex = meta?.highlightedRowIndex ?? -1;
|
|
2710
|
+
const onRowClick = meta?.onRowClick;
|
|
2688
2711
|
const visibleColumnIds = table.getVisibleLeafColumns().map((c) => c.id).join(",");
|
|
2689
|
-
const prevVisibleColumnIdsRef = React$
|
|
2712
|
+
const prevVisibleColumnIdsRef = React$27.useRef(visibleColumnIds);
|
|
2690
2713
|
if (prevVisibleColumnIdsRef.current !== visibleColumnIds) {
|
|
2691
2714
|
rowMapRef.current.clear();
|
|
2692
2715
|
prevVisibleColumnIdsRef.current = visibleColumnIds;
|
|
2693
2716
|
}
|
|
2694
|
-
const onGridContextMenu = React$
|
|
2717
|
+
const onGridContextMenu = React$27.useCallback((event) => {
|
|
2695
2718
|
event.preventDefault();
|
|
2696
2719
|
}, []);
|
|
2697
|
-
const onAddRowKeyDown = React$
|
|
2720
|
+
const onAddRowKeyDown = React$27.useCallback(async (event) => {
|
|
2698
2721
|
if (!onRowAdd) return;
|
|
2699
2722
|
if (event.key === "Enter" || event.key === "") {
|
|
2700
2723
|
event.preventDefault();
|
|
@@ -2796,7 +2819,9 @@ function DataGrid({ dataGridRef, headerRef, rowMapRef, footerRef, table, rowVirt
|
|
|
2796
2819
|
focusedCell,
|
|
2797
2820
|
editingCell,
|
|
2798
2821
|
selectionSize,
|
|
2799
|
-
visibleColumnIds
|
|
2822
|
+
visibleColumnIds,
|
|
2823
|
+
isHighlighted: highlightedRowIndex === virtualItem.index,
|
|
2824
|
+
onRowClick
|
|
2800
2825
|
}, row.id);
|
|
2801
2826
|
})
|
|
2802
2827
|
}),
|
|
@@ -2844,37 +2869,33 @@ function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFoc
|
|
|
2844
2869
|
const rowOriginal = cell?.row?.original ?? {};
|
|
2845
2870
|
const colCellMeta = cell?.column?.columnDef?.meta;
|
|
2846
2871
|
const align = colCellMeta?.align ?? "left";
|
|
2847
|
-
const editableResolver = React$
|
|
2872
|
+
const editableResolver = React$26.useMemo(() => {
|
|
2848
2873
|
const v = colCellMeta?.editable;
|
|
2849
2874
|
if (v === void 0) return () => true;
|
|
2850
2875
|
return typeof v === "function" ? v : () => Boolean(v);
|
|
2851
2876
|
}, [colCellMeta?.editable]);
|
|
2852
2877
|
const isEditable = editableResolver(rowOriginal);
|
|
2853
|
-
const classNameResolver = React$
|
|
2878
|
+
const classNameResolver = React$26.useMemo(() => {
|
|
2854
2879
|
const v = colCellMeta?.className;
|
|
2855
2880
|
return typeof v === "function" ? v : () => v;
|
|
2856
2881
|
}, [colCellMeta?.className]);
|
|
2857
2882
|
const colCellClassName = classNameResolver(rowOriginal);
|
|
2858
2883
|
const isSearchMatch = meta?.getIsSearchMatch?.(rowIndex, columnId) ?? false;
|
|
2859
2884
|
const isActiveSearchMatch = meta?.getIsActiveSearchMatch?.(rowIndex, columnId) ?? false;
|
|
2860
|
-
const onClick = React$
|
|
2885
|
+
const onClick = React$26.useCallback((event) => {
|
|
2861
2886
|
if (!isEditing) {
|
|
2862
2887
|
event.preventDefault();
|
|
2863
2888
|
onClickProp?.(event);
|
|
2864
|
-
|
|
2865
|
-
if (isEditable) meta?.onCellEditingStart?.(rowIndex, columnId);
|
|
2866
|
-
} else meta?.onCellClick?.(rowIndex, columnId, event);
|
|
2889
|
+
meta?.onCellClick?.(rowIndex, columnId, event);
|
|
2867
2890
|
}
|
|
2868
2891
|
}, [
|
|
2869
2892
|
meta,
|
|
2870
2893
|
rowIndex,
|
|
2871
2894
|
columnId,
|
|
2872
2895
|
isEditing,
|
|
2873
|
-
|
|
2874
|
-
onClickProp,
|
|
2875
|
-
isEditable
|
|
2896
|
+
onClickProp
|
|
2876
2897
|
]);
|
|
2877
|
-
const onContextMenu = React$
|
|
2898
|
+
const onContextMenu = React$26.useCallback((event) => {
|
|
2878
2899
|
if (!isEditing) meta?.onCellContextMenu?.(rowIndex, columnId, event);
|
|
2879
2900
|
}, [
|
|
2880
2901
|
meta,
|
|
@@ -2882,7 +2903,7 @@ function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFoc
|
|
|
2882
2903
|
columnId,
|
|
2883
2904
|
isEditing
|
|
2884
2905
|
]);
|
|
2885
|
-
const onMouseDown = React$
|
|
2906
|
+
const onMouseDown = React$26.useCallback((event) => {
|
|
2886
2907
|
if (!isEditing) meta?.onCellMouseDown?.(rowIndex, columnId, event);
|
|
2887
2908
|
}, [
|
|
2888
2909
|
meta,
|
|
@@ -2890,7 +2911,7 @@ function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFoc
|
|
|
2890
2911
|
columnId,
|
|
2891
2912
|
isEditing
|
|
2892
2913
|
]);
|
|
2893
|
-
const onMouseEnter = React$
|
|
2914
|
+
const onMouseEnter = React$26.useCallback((event) => {
|
|
2894
2915
|
if (!isEditing) meta?.onCellMouseEnter?.(rowIndex, columnId, event);
|
|
2895
2916
|
}, [
|
|
2896
2917
|
meta,
|
|
@@ -2898,10 +2919,10 @@ function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFoc
|
|
|
2898
2919
|
columnId,
|
|
2899
2920
|
isEditing
|
|
2900
2921
|
]);
|
|
2901
|
-
const onMouseUp = React$
|
|
2922
|
+
const onMouseUp = React$26.useCallback(() => {
|
|
2902
2923
|
if (!isEditing) meta?.onCellMouseUp?.();
|
|
2903
2924
|
}, [meta, isEditing]);
|
|
2904
|
-
const onDoubleClick = React$
|
|
2925
|
+
const onDoubleClick = React$26.useCallback((event) => {
|
|
2905
2926
|
if (!isEditing) {
|
|
2906
2927
|
event.preventDefault();
|
|
2907
2928
|
if (isEditable) meta?.onCellDoubleClick?.(rowIndex, columnId);
|
|
@@ -2913,12 +2934,12 @@ function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFoc
|
|
|
2913
2934
|
isEditing,
|
|
2914
2935
|
isEditable
|
|
2915
2936
|
]);
|
|
2916
|
-
const onKeyDown = React$
|
|
2937
|
+
const onKeyDown = React$26.useCallback((event) => {
|
|
2917
2938
|
onKeyDownProp?.(event);
|
|
2918
2939
|
if (event.defaultPrevented) return;
|
|
2919
|
-
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;
|
|
2940
|
+
if (event.key === "ArrowUp" || event.key === "ArrowDown" || event.key === "ArrowLeft" || event.key === "ArrowRight" || event.key === "Home" || event.key === "End" || event.key === "PageUp" || event.key === "PageDown" || event.key === "Enter" || event.key === "Tab") return;
|
|
2920
2941
|
if (isFocused && !isEditing) {
|
|
2921
|
-
if (event.key === "F2"
|
|
2942
|
+
if (event.key === "F2") {
|
|
2922
2943
|
event.preventDefault();
|
|
2923
2944
|
event.stopPropagation();
|
|
2924
2945
|
if (isEditable) meta?.onCellEditingStart?.(rowIndex, columnId);
|
|
@@ -2987,17 +3008,17 @@ function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFoc
|
|
|
2987
3008
|
//#region src/data-grid/cell-variants/checkbox-cell.tsx
|
|
2988
3009
|
function CheckboxCell({ cell, table, rowIndex, columnId, isFocused, isSelected }) {
|
|
2989
3010
|
const initialValue = cell.getValue();
|
|
2990
|
-
const [value, setValue] = React$
|
|
2991
|
-
const containerRef = React$
|
|
3011
|
+
const [value, setValue] = React$25.useState(Boolean(initialValue));
|
|
3012
|
+
const containerRef = React$25.useRef(null);
|
|
2992
3013
|
const meta = table.options.meta;
|
|
2993
3014
|
const colMeta = cell.column.columnDef.meta;
|
|
2994
|
-
const editableResolver = React$
|
|
3015
|
+
const editableResolver = React$25.useMemo(() => {
|
|
2995
3016
|
const v = colMeta?.editable;
|
|
2996
3017
|
if (v === void 0) return () => true;
|
|
2997
3018
|
return typeof v === "function" ? v : () => Boolean(v);
|
|
2998
3019
|
}, [colMeta?.editable]);
|
|
2999
3020
|
const isEditable = editableResolver(cell.row.original);
|
|
3000
|
-
const onCheckedChange = React$
|
|
3021
|
+
const onCheckedChange = React$25.useCallback((checked) => {
|
|
3001
3022
|
setValue(checked);
|
|
3002
3023
|
meta?.onDataUpdate?.({
|
|
3003
3024
|
rowIndex,
|
|
@@ -3009,7 +3030,7 @@ function CheckboxCell({ cell, table, rowIndex, columnId, isFocused, isSelected }
|
|
|
3009
3030
|
rowIndex,
|
|
3010
3031
|
columnId
|
|
3011
3032
|
]);
|
|
3012
|
-
const onWrapperKeyDown = React$
|
|
3033
|
+
const onWrapperKeyDown = React$25.useCallback((event) => {
|
|
3013
3034
|
if (!isEditable) return;
|
|
3014
3035
|
if (isFocused && (event.key === "" || event.key === "Enter")) {
|
|
3015
3036
|
event.preventDefault();
|
|
@@ -3022,17 +3043,17 @@ function CheckboxCell({ cell, table, rowIndex, columnId, isFocused, isSelected }
|
|
|
3022
3043
|
onCheckedChange,
|
|
3023
3044
|
isEditable
|
|
3024
3045
|
]);
|
|
3025
|
-
React$
|
|
3046
|
+
React$25.useEffect(() => {
|
|
3026
3047
|
setValue(Boolean(initialValue));
|
|
3027
3048
|
}, [initialValue]);
|
|
3028
|
-
React$
|
|
3049
|
+
React$25.useEffect(() => {
|
|
3029
3050
|
if (isFocused && !meta?.searchOpen && !meta?.isScrolling && containerRef.current) containerRef.current.focus();
|
|
3030
3051
|
}, [
|
|
3031
3052
|
isFocused,
|
|
3032
3053
|
meta?.searchOpen,
|
|
3033
3054
|
meta?.isScrolling
|
|
3034
3055
|
]);
|
|
3035
|
-
const onWrapperClick = React$
|
|
3056
|
+
const onWrapperClick = React$25.useCallback((event) => {
|
|
3036
3057
|
if (!isEditable) return;
|
|
3037
3058
|
if (isFocused) {
|
|
3038
3059
|
event.preventDefault();
|
|
@@ -3045,13 +3066,13 @@ function CheckboxCell({ cell, table, rowIndex, columnId, isFocused, isSelected }
|
|
|
3045
3066
|
onCheckedChange,
|
|
3046
3067
|
isEditable
|
|
3047
3068
|
]);
|
|
3048
|
-
const onCheckboxClick = React$
|
|
3069
|
+
const onCheckboxClick = React$25.useCallback((event) => {
|
|
3049
3070
|
event.stopPropagation();
|
|
3050
3071
|
}, []);
|
|
3051
|
-
const onCheckboxMouseDown = React$
|
|
3072
|
+
const onCheckboxMouseDown = React$25.useCallback((event) => {
|
|
3052
3073
|
event.stopPropagation();
|
|
3053
3074
|
}, []);
|
|
3054
|
-
const onCheckboxDoubleClick = React$
|
|
3075
|
+
const onCheckboxDoubleClick = React$25.useCallback((event) => {
|
|
3055
3076
|
event.stopPropagation();
|
|
3056
3077
|
}, []);
|
|
3057
3078
|
return /* @__PURE__ */ jsx(DataGridCellWrapper, {
|
|
@@ -3106,20 +3127,20 @@ function formatDateToISOString(date) {
|
|
|
3106
3127
|
}
|
|
3107
3128
|
function DateCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSelected }) {
|
|
3108
3129
|
const initialValue = cell.getValue();
|
|
3109
|
-
const [value, setValue] = React$
|
|
3110
|
-
const [open, setOpen] = React$
|
|
3111
|
-
const containerRef = React$
|
|
3112
|
-
const hasStoppedRef = React$
|
|
3130
|
+
const [value, setValue] = React$24.useState(parseToLocalDate(initialValue));
|
|
3131
|
+
const [open, setOpen] = React$24.useState(false);
|
|
3132
|
+
const containerRef = React$24.useRef(null);
|
|
3133
|
+
const hasStoppedRef = React$24.useRef(false);
|
|
3113
3134
|
const meta = table.options.meta;
|
|
3114
|
-
const prevInitialValueRef = React$
|
|
3135
|
+
const prevInitialValueRef = React$24.useRef(initialValue);
|
|
3115
3136
|
if (initialValue !== prevInitialValueRef.current) {
|
|
3116
3137
|
prevInitialValueRef.current = initialValue;
|
|
3117
3138
|
setValue(parseToLocalDate(initialValue));
|
|
3118
3139
|
}
|
|
3119
|
-
React$
|
|
3140
|
+
React$24.useEffect(() => {
|
|
3120
3141
|
if (isEditing) hasStoppedRef.current = false;
|
|
3121
3142
|
}, [isEditing]);
|
|
3122
|
-
const onDateSelect = React$
|
|
3143
|
+
const onDateSelect = React$24.useCallback((date) => {
|
|
3123
3144
|
if (!date) return;
|
|
3124
3145
|
setValue(date);
|
|
3125
3146
|
meta?.onDataUpdate?.({
|
|
@@ -3135,14 +3156,14 @@ function DateCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSel
|
|
|
3135
3156
|
rowIndex,
|
|
3136
3157
|
columnId
|
|
3137
3158
|
]);
|
|
3138
|
-
const onOpenChange = React$
|
|
3159
|
+
const onOpenChange = React$24.useCallback((isOpen) => {
|
|
3139
3160
|
setOpen(isOpen);
|
|
3140
3161
|
if (!isOpen && isEditing && !hasStoppedRef.current) {
|
|
3141
3162
|
hasStoppedRef.current = true;
|
|
3142
3163
|
meta?.onCellEditingStop?.();
|
|
3143
3164
|
}
|
|
3144
3165
|
}, [isEditing, meta]);
|
|
3145
|
-
const onWrapperKeyDown = React$
|
|
3166
|
+
const onWrapperKeyDown = React$24.useCallback((event) => {
|
|
3146
3167
|
if (isEditing) {
|
|
3147
3168
|
if (event.key === "Escape") {
|
|
3148
3169
|
event.preventDefault();
|
|
@@ -3162,10 +3183,10 @@ function DateCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSel
|
|
|
3162
3183
|
initialValue,
|
|
3163
3184
|
meta
|
|
3164
3185
|
]);
|
|
3165
|
-
React$
|
|
3186
|
+
React$24.useEffect(() => {
|
|
3166
3187
|
setOpen(isEditing);
|
|
3167
3188
|
}, [isEditing]);
|
|
3168
|
-
React$
|
|
3189
|
+
React$24.useEffect(() => {
|
|
3169
3190
|
if (isFocused && !isEditing && !meta?.searchOpen && !meta?.isScrolling && containerRef.current) containerRef.current.focus();
|
|
3170
3191
|
}, [
|
|
3171
3192
|
isFocused,
|
|
@@ -3217,7 +3238,7 @@ function DateCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSel
|
|
|
3217
3238
|
//#region src/data-grid/cell-variants/gantt-cell.tsx
|
|
3218
3239
|
function GanttCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSelected }) {
|
|
3219
3240
|
const initialValue = cell.getValue();
|
|
3220
|
-
const containerRef = React$
|
|
3241
|
+
const containerRef = React$23.useRef(null);
|
|
3221
3242
|
const cellOpts = cell.column.columnDef.meta?.cell;
|
|
3222
3243
|
const ts = cellOpts?.dateRangeFrom ?? cellOpts?.timelineStart;
|
|
3223
3244
|
const te = cellOpts?.dateRangeTo ?? cellOpts?.timelineEnd;
|
|
@@ -3276,19 +3297,19 @@ function Textarea({ className, variant, __e2e_test_id__,...props }) {
|
|
|
3276
3297
|
//#region src/data-grid/cell-variants/long-text-cell.tsx
|
|
3277
3298
|
function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSelected }) {
|
|
3278
3299
|
const initialValue = cell.getValue();
|
|
3279
|
-
const [value, setValue] = React$
|
|
3280
|
-
const [open, setOpen] = React$
|
|
3281
|
-
const textareaRef = React$
|
|
3282
|
-
const containerRef = React$
|
|
3283
|
-
const hasSubmittedRef = React$
|
|
3300
|
+
const [value, setValue] = React$22.useState(initialValue ?? "");
|
|
3301
|
+
const [open, setOpen] = React$22.useState(false);
|
|
3302
|
+
const textareaRef = React$22.useRef(null);
|
|
3303
|
+
const containerRef = React$22.useRef(null);
|
|
3304
|
+
const hasSubmittedRef = React$22.useRef(false);
|
|
3284
3305
|
const meta = table.options.meta;
|
|
3285
3306
|
const sideOffset = -(containerRef.current?.clientHeight ?? 0);
|
|
3286
|
-
const prevInitialValueRef = React$
|
|
3307
|
+
const prevInitialValueRef = React$22.useRef(initialValue);
|
|
3287
3308
|
if (initialValue !== prevInitialValueRef.current) {
|
|
3288
3309
|
prevInitialValueRef.current = initialValue;
|
|
3289
3310
|
setValue(initialValue ?? "");
|
|
3290
3311
|
}
|
|
3291
|
-
React$
|
|
3312
|
+
React$22.useEffect(() => {
|
|
3292
3313
|
if (isEditing) hasSubmittedRef.current = false;
|
|
3293
3314
|
}, [isEditing]);
|
|
3294
3315
|
const debouncedSave = useDebouncedCallback((newValue) => {
|
|
@@ -3298,7 +3319,7 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
|
|
|
3298
3319
|
value: newValue
|
|
3299
3320
|
});
|
|
3300
3321
|
}, 300);
|
|
3301
|
-
const onSave = React$
|
|
3322
|
+
const onSave = React$22.useCallback(() => {
|
|
3302
3323
|
if (hasSubmittedRef.current) return;
|
|
3303
3324
|
hasSubmittedRef.current = true;
|
|
3304
3325
|
if (value !== initialValue) meta?.onDataUpdate?.({
|
|
@@ -3315,7 +3336,7 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
|
|
|
3315
3336
|
rowIndex,
|
|
3316
3337
|
columnId
|
|
3317
3338
|
]);
|
|
3318
|
-
const onCancel = React$
|
|
3339
|
+
const onCancel = React$22.useCallback(() => {
|
|
3319
3340
|
if (hasSubmittedRef.current) return;
|
|
3320
3341
|
hasSubmittedRef.current = true;
|
|
3321
3342
|
setValue(initialValue ?? "");
|
|
@@ -3332,12 +3353,12 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
|
|
|
3332
3353
|
rowIndex,
|
|
3333
3354
|
columnId
|
|
3334
3355
|
]);
|
|
3335
|
-
const onChange = React$
|
|
3356
|
+
const onChange = React$22.useCallback((event) => {
|
|
3336
3357
|
const newValue = event.target.value;
|
|
3337
3358
|
setValue(newValue);
|
|
3338
3359
|
debouncedSave(newValue);
|
|
3339
3360
|
}, [debouncedSave]);
|
|
3340
|
-
const onOpenChange = React$
|
|
3361
|
+
const onOpenChange = React$22.useCallback((isOpen) => {
|
|
3341
3362
|
setOpen(isOpen);
|
|
3342
3363
|
if (!isOpen && !hasSubmittedRef.current) {
|
|
3343
3364
|
hasSubmittedRef.current = true;
|
|
@@ -3355,7 +3376,7 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
|
|
|
3355
3376
|
rowIndex,
|
|
3356
3377
|
columnId
|
|
3357
3378
|
]);
|
|
3358
|
-
const onOpenAutoFocus = React$
|
|
3379
|
+
const onOpenAutoFocus = React$22.useCallback((event) => {
|
|
3359
3380
|
event.preventDefault();
|
|
3360
3381
|
if (textareaRef.current) {
|
|
3361
3382
|
textareaRef.current.focus();
|
|
@@ -3363,7 +3384,7 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
|
|
|
3363
3384
|
textareaRef.current.setSelectionRange(length, length);
|
|
3364
3385
|
}
|
|
3365
3386
|
}, []);
|
|
3366
|
-
const onWrapperKeyDown = React$
|
|
3387
|
+
const onWrapperKeyDown = React$22.useCallback((event) => {
|
|
3367
3388
|
if (isEditing && !open) {
|
|
3368
3389
|
if (event.key === "Escape") {
|
|
3369
3390
|
event.preventDefault();
|
|
@@ -3389,7 +3410,7 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
|
|
|
3389
3410
|
rowIndex,
|
|
3390
3411
|
columnId
|
|
3391
3412
|
]);
|
|
3392
|
-
const onTextareaKeyDown = React$
|
|
3413
|
+
const onTextareaKeyDown = React$22.useCallback((event) => {
|
|
3393
3414
|
if (event.key === "Escape") {
|
|
3394
3415
|
event.preventDefault();
|
|
3395
3416
|
onCancel();
|
|
@@ -3399,7 +3420,7 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
|
|
|
3399
3420
|
}
|
|
3400
3421
|
event.stopPropagation();
|
|
3401
3422
|
}, [onCancel, onSave]);
|
|
3402
|
-
const onTextareaBlur = React$
|
|
3423
|
+
const onTextareaBlur = React$22.useCallback(() => {
|
|
3403
3424
|
if (hasSubmittedRef.current) return;
|
|
3404
3425
|
hasSubmittedRef.current = true;
|
|
3405
3426
|
if (value !== initialValue) meta?.onDataUpdate?.({
|
|
@@ -3416,7 +3437,7 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
|
|
|
3416
3437
|
rowIndex,
|
|
3417
3438
|
columnId
|
|
3418
3439
|
]);
|
|
3419
|
-
React$
|
|
3440
|
+
React$22.useEffect(() => {
|
|
3420
3441
|
if (isEditing && !open) setOpen(true);
|
|
3421
3442
|
if (isFocused && !isEditing && !meta?.searchOpen && !meta?.isScrolling && containerRef.current) containerRef.current.focus();
|
|
3422
3443
|
}, [
|
|
@@ -3469,26 +3490,26 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
|
|
|
3469
3490
|
//#endregion
|
|
3470
3491
|
//#region src/data-grid/cell-variants/multi-select-cell.tsx
|
|
3471
3492
|
function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSelected }) {
|
|
3472
|
-
const cellValue = React$
|
|
3493
|
+
const cellValue = React$21.useMemo(() => cell.getValue() ?? [], [cell]);
|
|
3473
3494
|
const cellId = `${rowIndex}-${columnId}`;
|
|
3474
|
-
const prevCellIdRef = React$
|
|
3475
|
-
const [selectedValues, setSelectedValues] = React$
|
|
3476
|
-
const [open, setOpen] = React$
|
|
3477
|
-
const [searchValue, setSearchValue] = React$
|
|
3478
|
-
const containerRef = React$
|
|
3479
|
-
const inputRef = React$
|
|
3495
|
+
const prevCellIdRef = React$21.useRef(cellId);
|
|
3496
|
+
const [selectedValues, setSelectedValues] = React$21.useState(cellValue);
|
|
3497
|
+
const [open, setOpen] = React$21.useState(false);
|
|
3498
|
+
const [searchValue, setSearchValue] = React$21.useState("");
|
|
3499
|
+
const containerRef = React$21.useRef(null);
|
|
3500
|
+
const inputRef = React$21.useRef(null);
|
|
3480
3501
|
const meta = table.options.meta;
|
|
3481
3502
|
const cellOpts = cell.column.columnDef.meta?.cell;
|
|
3482
3503
|
const sideOffset = -(containerRef.current?.clientHeight ?? 0);
|
|
3483
3504
|
const arrayOptions = cellOpts?.variant === "multi-select" ? cellOpts.options : void 0;
|
|
3484
3505
|
const optionsMap = cellOpts?.variant === "multi-select" ? cellOpts.optionsMap : void 0;
|
|
3485
|
-
const arrayOptionsLabelMap = React$
|
|
3486
|
-
const getLabel = React$
|
|
3506
|
+
const arrayOptionsLabelMap = React$21.useMemo(() => arrayOptions ? new Map(arrayOptions.map((opt) => [opt.value, opt.label])) : null, [arrayOptions]);
|
|
3507
|
+
const getLabel = React$21.useCallback((val) => {
|
|
3487
3508
|
if (optionsMap) return optionsMap.get(val) ?? val;
|
|
3488
3509
|
if (arrayOptionsLabelMap) return arrayOptionsLabelMap.get(val) ?? val;
|
|
3489
3510
|
return val;
|
|
3490
3511
|
}, [optionsMap, arrayOptionsLabelMap]);
|
|
3491
|
-
const options = React$
|
|
3512
|
+
const options = React$21.useMemo(() => {
|
|
3492
3513
|
if (!isEditing) return [];
|
|
3493
3514
|
if (arrayOptions) return arrayOptions;
|
|
3494
3515
|
if (optionsMap) return Array.from(optionsMap.entries()).map(([id, label]) => ({
|
|
@@ -3507,7 +3528,7 @@ function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing
|
|
|
3507
3528
|
setOpen(false);
|
|
3508
3529
|
setSearchValue("");
|
|
3509
3530
|
}
|
|
3510
|
-
const onValueChange = React$
|
|
3531
|
+
const onValueChange = React$21.useCallback((value) => {
|
|
3511
3532
|
const newValues = selectedValues.includes(value) ? selectedValues.filter((v) => v !== value) : [...selectedValues, value];
|
|
3512
3533
|
setSelectedValues(newValues);
|
|
3513
3534
|
meta?.onDataUpdate?.({
|
|
@@ -3523,7 +3544,7 @@ function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing
|
|
|
3523
3544
|
rowIndex,
|
|
3524
3545
|
columnId
|
|
3525
3546
|
]);
|
|
3526
|
-
const removeValue = React$
|
|
3547
|
+
const removeValue = React$21.useCallback((valueToRemove, event) => {
|
|
3527
3548
|
event?.stopPropagation();
|
|
3528
3549
|
event?.preventDefault();
|
|
3529
3550
|
const newValues = selectedValues.filter((v) => v !== valueToRemove);
|
|
@@ -3540,7 +3561,7 @@ function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing
|
|
|
3540
3561
|
rowIndex,
|
|
3541
3562
|
columnId
|
|
3542
3563
|
]);
|
|
3543
|
-
const clearAll = React$
|
|
3564
|
+
const clearAll = React$21.useCallback(() => {
|
|
3544
3565
|
setSelectedValues([]);
|
|
3545
3566
|
meta?.onDataUpdate?.({
|
|
3546
3567
|
rowIndex,
|
|
@@ -3553,18 +3574,18 @@ function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing
|
|
|
3553
3574
|
rowIndex,
|
|
3554
3575
|
columnId
|
|
3555
3576
|
]);
|
|
3556
|
-
const onOpenChange = React$
|
|
3577
|
+
const onOpenChange = React$21.useCallback((isOpen) => {
|
|
3557
3578
|
setOpen(isOpen);
|
|
3558
3579
|
if (!isOpen) {
|
|
3559
3580
|
setSearchValue("");
|
|
3560
3581
|
meta?.onCellEditingStop?.();
|
|
3561
3582
|
}
|
|
3562
3583
|
}, [meta]);
|
|
3563
|
-
const onOpenAutoFocus = React$
|
|
3584
|
+
const onOpenAutoFocus = React$21.useCallback((event) => {
|
|
3564
3585
|
event.preventDefault();
|
|
3565
3586
|
inputRef.current?.focus();
|
|
3566
3587
|
}, []);
|
|
3567
|
-
const onWrapperKeyDown = React$
|
|
3588
|
+
const onWrapperKeyDown = React$21.useCallback((event) => {
|
|
3568
3589
|
if (isEditing) {
|
|
3569
3590
|
if (event.key === "Escape") {
|
|
3570
3591
|
event.preventDefault();
|
|
@@ -3584,7 +3605,7 @@ function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing
|
|
|
3584
3605
|
cellValue,
|
|
3585
3606
|
meta
|
|
3586
3607
|
]);
|
|
3587
|
-
const onInputKeyDown = React$
|
|
3608
|
+
const onInputKeyDown = React$21.useCallback((event) => {
|
|
3588
3609
|
if (event.key === "Backspace" && searchValue === "" && selectedValues.length > 0) {
|
|
3589
3610
|
event.preventDefault();
|
|
3590
3611
|
const lastValue = selectedValues.at(-1);
|
|
@@ -3596,7 +3617,7 @@ function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing
|
|
|
3596
3617
|
selectedValues,
|
|
3597
3618
|
removeValue
|
|
3598
3619
|
]);
|
|
3599
|
-
React$
|
|
3620
|
+
React$21.useEffect(() => {
|
|
3600
3621
|
if (isEditing && !open) setOpen(true);
|
|
3601
3622
|
if (isFocused && !isEditing && !meta?.searchOpen && !meta?.isScrolling && containerRef.current) containerRef.current.focus();
|
|
3602
3623
|
}, [
|
|
@@ -3606,7 +3627,7 @@ function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing
|
|
|
3606
3627
|
meta?.searchOpen,
|
|
3607
3628
|
meta?.isScrolling
|
|
3608
3629
|
]);
|
|
3609
|
-
React$
|
|
3630
|
+
React$21.useEffect(() => {
|
|
3610
3631
|
if (open && inputRef.current) setTimeout(() => inputRef.current?.focus(), 0);
|
|
3611
3632
|
}, [open]);
|
|
3612
3633
|
const displayLabels = selectedValues.map(getLabel).filter(Boolean);
|
|
@@ -3707,19 +3728,19 @@ function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing
|
|
|
3707
3728
|
//#region src/data-grid/cell-variants/number-cell.tsx
|
|
3708
3729
|
function NumberCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSelected }) {
|
|
3709
3730
|
const initialValue = cell.getValue();
|
|
3710
|
-
const inputRef = React$
|
|
3711
|
-
const containerRef = React$
|
|
3731
|
+
const inputRef = React$20.useRef(null);
|
|
3732
|
+
const containerRef = React$20.useRef(null);
|
|
3712
3733
|
const meta = table.options.meta;
|
|
3713
3734
|
const colMeta = cell.column.columnDef.meta;
|
|
3714
3735
|
const cellOptions = colMeta?.cell;
|
|
3715
|
-
const editableResolver = React$
|
|
3736
|
+
const editableResolver = React$20.useMemo(() => {
|
|
3716
3737
|
const v = colMeta?.editable;
|
|
3717
3738
|
if (v === void 0) return () => true;
|
|
3718
3739
|
return typeof v === "function" ? v : () => Boolean(v);
|
|
3719
3740
|
}, [colMeta?.editable]);
|
|
3720
3741
|
const isEditable = editableResolver(cell.row.original);
|
|
3721
3742
|
const { min, max, step, prefix, suffix, fallbackValue = "" } = cellOptions?.variant === "number" ? cellOptions : {};
|
|
3722
|
-
const resolvedPrefix = React$
|
|
3743
|
+
const resolvedPrefix = React$20.useMemo(() => {
|
|
3723
3744
|
if (typeof prefix === "function") return prefix(cell.row.original, initialValue);
|
|
3724
3745
|
return prefix ?? null;
|
|
3725
3746
|
}, [
|
|
@@ -3727,7 +3748,7 @@ function NumberCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
|
|
|
3727
3748
|
cell.row.original,
|
|
3728
3749
|
initialValue
|
|
3729
3750
|
]);
|
|
3730
|
-
const resolvedSuffix = React$
|
|
3751
|
+
const resolvedSuffix = React$20.useMemo(() => {
|
|
3731
3752
|
if (typeof suffix === "function") return suffix(cell.row.original, initialValue);
|
|
3732
3753
|
return suffix ?? null;
|
|
3733
3754
|
}, [
|
|
@@ -3735,12 +3756,12 @@ function NumberCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
|
|
|
3735
3756
|
cell.row.original,
|
|
3736
3757
|
initialValue
|
|
3737
3758
|
]);
|
|
3738
|
-
const [editValue, setEditValue] = React$
|
|
3739
|
-
const hasSubmittedRef = React$
|
|
3740
|
-
React$
|
|
3759
|
+
const [editValue, setEditValue] = React$20.useState(initialValue !== null && initialValue !== void 0 ? String(initialValue) : "");
|
|
3760
|
+
const hasSubmittedRef = React$20.useRef(false);
|
|
3761
|
+
React$20.useEffect(() => {
|
|
3741
3762
|
if (isEditing) hasSubmittedRef.current = false;
|
|
3742
3763
|
}, [isEditing]);
|
|
3743
|
-
const onBlur = React$
|
|
3764
|
+
const onBlur = React$20.useCallback(() => {
|
|
3744
3765
|
if (hasSubmittedRef.current) return;
|
|
3745
3766
|
const numValue = editValue === "" ? null : Number(editValue);
|
|
3746
3767
|
if (numValue !== initialValue) meta?.onDataUpdate?.({
|
|
@@ -3756,13 +3777,13 @@ function NumberCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
|
|
|
3756
3777
|
initialValue,
|
|
3757
3778
|
editValue
|
|
3758
3779
|
]);
|
|
3759
|
-
const onChange = React$
|
|
3780
|
+
const onChange = React$20.useCallback((event) => {
|
|
3760
3781
|
setEditValue(event.target.value);
|
|
3761
3782
|
}, []);
|
|
3762
|
-
const parseNumValue = React$
|
|
3783
|
+
const parseNumValue = React$20.useCallback(() => {
|
|
3763
3784
|
return editValue === "" ? null : Number(editValue);
|
|
3764
3785
|
}, [editValue]);
|
|
3765
|
-
const saveAndStop = React$
|
|
3786
|
+
const saveAndStop = React$20.useCallback((options) => {
|
|
3766
3787
|
hasSubmittedRef.current = true;
|
|
3767
3788
|
const numValue = parseNumValue();
|
|
3768
3789
|
meta?.onDataUpdate?.({
|
|
@@ -3777,7 +3798,7 @@ function NumberCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
|
|
|
3777
3798
|
rowIndex,
|
|
3778
3799
|
columnId
|
|
3779
3800
|
]);
|
|
3780
|
-
const handleEditingKeyDown = React$
|
|
3801
|
+
const handleEditingKeyDown = React$20.useCallback((event) => {
|
|
3781
3802
|
if (event.key === "Enter") {
|
|
3782
3803
|
event.preventDefault();
|
|
3783
3804
|
saveAndStop({ moveToNextRow: true });
|
|
@@ -3796,12 +3817,12 @@ function NumberCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
|
|
|
3796
3817
|
initialValue,
|
|
3797
3818
|
meta
|
|
3798
3819
|
]);
|
|
3799
|
-
const handleFocusedKeyDown = React$
|
|
3820
|
+
const handleFocusedKeyDown = React$20.useCallback((event) => {
|
|
3800
3821
|
if (!isEditable) return;
|
|
3801
3822
|
if (event.key === "Backspace") setEditValue("");
|
|
3802
3823
|
else if (event.key.length === 1 && !event.ctrlKey && !event.metaKey) setEditValue(event.key);
|
|
3803
3824
|
}, [isEditable]);
|
|
3804
|
-
const onWrapperKeyDown = React$
|
|
3825
|
+
const onWrapperKeyDown = React$20.useCallback((event) => {
|
|
3805
3826
|
if (isEditing) handleEditingKeyDown(event);
|
|
3806
3827
|
else if (isFocused) handleFocusedKeyDown(event);
|
|
3807
3828
|
}, [
|
|
@@ -3810,10 +3831,10 @@ function NumberCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
|
|
|
3810
3831
|
handleEditingKeyDown,
|
|
3811
3832
|
handleFocusedKeyDown
|
|
3812
3833
|
]);
|
|
3813
|
-
React$
|
|
3834
|
+
React$20.useEffect(() => {
|
|
3814
3835
|
setEditValue(initialValue !== null && initialValue !== void 0 ? String(initialValue) : "");
|
|
3815
3836
|
}, [initialValue]);
|
|
3816
|
-
React$
|
|
3837
|
+
React$20.useEffect(() => {
|
|
3817
3838
|
if (isEditing && inputRef.current) {
|
|
3818
3839
|
inputRef.current.focus();
|
|
3819
3840
|
inputRef.current.select();
|
|
@@ -3860,7 +3881,7 @@ function NumberCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
|
|
|
3860
3881
|
//#endregion
|
|
3861
3882
|
//#region src/data-grid/cell-variants/react-node-cell.tsx
|
|
3862
3883
|
function ReactNodeCell({ cell, table, rowIndex, columnId, isFocused, isSelected, isEditing }) {
|
|
3863
|
-
const containerRef = React$
|
|
3884
|
+
const containerRef = React$19.useRef(null);
|
|
3864
3885
|
const cellOpts = cell.column.columnDef.meta?.cell;
|
|
3865
3886
|
const renderFn = cellOpts?.variant === "react-node" ? cellOpts.render : void 0;
|
|
3866
3887
|
const children = renderFn ? renderFn({
|
|
@@ -3890,18 +3911,18 @@ function ReactNodeCell({ cell, table, rowIndex, columnId, isFocused, isSelected,
|
|
|
3890
3911
|
//#region src/data-grid/cell-variants/select-cell.tsx
|
|
3891
3912
|
function SelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSelected }) {
|
|
3892
3913
|
const initialValue = cell.getValue();
|
|
3893
|
-
const [value, setValue] = React$
|
|
3894
|
-
const [open, setOpen] = React$
|
|
3895
|
-
const containerRef = React$
|
|
3896
|
-
const inputRef = React$
|
|
3914
|
+
const [value, setValue] = React$18.useState(initialValue);
|
|
3915
|
+
const [open, setOpen] = React$18.useState(false);
|
|
3916
|
+
const containerRef = React$18.useRef(null);
|
|
3917
|
+
const inputRef = React$18.useRef(null);
|
|
3897
3918
|
const meta = table.options.meta;
|
|
3898
3919
|
const cellOpts = cell.column.columnDef.meta?.cell;
|
|
3899
3920
|
const hasSearch = (cellOpts?.variant === "select" && cellOpts?.hasSearch) ?? false;
|
|
3900
3921
|
const sideOffset = -(inputRef.current?.clientHeight ?? 0);
|
|
3901
3922
|
const arrayOptions = cellOpts?.variant === "select" ? cellOpts.options : void 0;
|
|
3902
3923
|
const optionsMap = cellOpts?.variant === "select" ? cellOpts.optionsMap : void 0;
|
|
3903
|
-
const arrayOptionsLabelMap = React$
|
|
3904
|
-
const displayLabel = React$
|
|
3924
|
+
const arrayOptionsLabelMap = React$18.useMemo(() => arrayOptions ? new Map(arrayOptions.map((opt) => [opt.value, opt.label])) : null, [arrayOptions]);
|
|
3925
|
+
const displayLabel = React$18.useMemo(() => {
|
|
3905
3926
|
if (!value) return value;
|
|
3906
3927
|
if (optionsMap) return optionsMap.get(value) ?? value;
|
|
3907
3928
|
if (arrayOptionsLabelMap) return arrayOptionsLabelMap.get(value) ?? value;
|
|
@@ -3911,7 +3932,7 @@ function SelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
|
|
|
3911
3932
|
optionsMap,
|
|
3912
3933
|
arrayOptionsLabelMap
|
|
3913
3934
|
]);
|
|
3914
|
-
const options = React$
|
|
3935
|
+
const options = React$18.useMemo(() => {
|
|
3915
3936
|
if (!isEditing) return [];
|
|
3916
3937
|
if (arrayOptions) return arrayOptions;
|
|
3917
3938
|
if (optionsMap) return Array.from(optionsMap.entries()).map(([id, label]) => ({
|
|
@@ -3924,7 +3945,7 @@ function SelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
|
|
|
3924
3945
|
arrayOptions,
|
|
3925
3946
|
optionsMap
|
|
3926
3947
|
]);
|
|
3927
|
-
const onValueChange = React$
|
|
3948
|
+
const onValueChange = React$18.useCallback((newValue) => {
|
|
3928
3949
|
setValue(newValue);
|
|
3929
3950
|
meta?.onDataUpdate?.({
|
|
3930
3951
|
rowIndex,
|
|
@@ -3937,15 +3958,15 @@ function SelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
|
|
|
3937
3958
|
rowIndex,
|
|
3938
3959
|
columnId
|
|
3939
3960
|
]);
|
|
3940
|
-
const onOpenChange = React$
|
|
3961
|
+
const onOpenChange = React$18.useCallback((isOpen) => {
|
|
3941
3962
|
setOpen(isOpen);
|
|
3942
3963
|
if (!isOpen) meta?.onCellEditingStop?.();
|
|
3943
3964
|
}, [meta]);
|
|
3944
|
-
const onOpenAutoFocus = React$
|
|
3965
|
+
const onOpenAutoFocus = React$18.useCallback((event) => {
|
|
3945
3966
|
event.preventDefault();
|
|
3946
3967
|
inputRef.current?.focus();
|
|
3947
3968
|
}, []);
|
|
3948
|
-
const onWrapperKeyDown = React$
|
|
3969
|
+
const onWrapperKeyDown = React$18.useCallback((event) => {
|
|
3949
3970
|
if (isEditing) {
|
|
3950
3971
|
if (event.key === "Escape") {
|
|
3951
3972
|
event.preventDefault();
|
|
@@ -3963,10 +3984,10 @@ function SelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
|
|
|
3963
3984
|
initialValue,
|
|
3964
3985
|
meta
|
|
3965
3986
|
]);
|
|
3966
|
-
React$
|
|
3987
|
+
React$18.useEffect(() => {
|
|
3967
3988
|
setValue(initialValue);
|
|
3968
3989
|
}, [initialValue]);
|
|
3969
|
-
React$
|
|
3990
|
+
React$18.useEffect(() => {
|
|
3970
3991
|
if (isEditing && !open) setOpen(true);
|
|
3971
3992
|
if (isFocused && !isEditing && !meta?.searchOpen && !meta?.isScrolling && containerRef.current) containerRef.current.focus();
|
|
3972
3993
|
}, [
|
|
@@ -4050,22 +4071,22 @@ function SelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
|
|
|
4050
4071
|
//#region src/data-grid/cell-variants/short-text-cell.tsx
|
|
4051
4072
|
function ShortTextCell({ cell, table, rowIndex, columnId, isEditing, isFocused, isSelected }) {
|
|
4052
4073
|
const initialValue = cell.getValue();
|
|
4053
|
-
const [value, setValue] = React$
|
|
4054
|
-
const inputRef = React$
|
|
4055
|
-
const containerRef = React$
|
|
4056
|
-
const hasSubmittedRef = React$
|
|
4074
|
+
const [value, setValue] = React$17.useState(initialValue);
|
|
4075
|
+
const inputRef = React$17.useRef(null);
|
|
4076
|
+
const containerRef = React$17.useRef(null);
|
|
4077
|
+
const hasSubmittedRef = React$17.useRef(false);
|
|
4057
4078
|
const meta = table.options.meta;
|
|
4058
4079
|
const colMeta = cell.column.columnDef.meta;
|
|
4059
|
-
const editableResolver = React$
|
|
4080
|
+
const editableResolver = React$17.useMemo(() => {
|
|
4060
4081
|
const v = colMeta?.editable;
|
|
4061
4082
|
if (v === void 0) return () => true;
|
|
4062
4083
|
return typeof v === "function" ? v : () => Boolean(v);
|
|
4063
4084
|
}, [colMeta?.editable]);
|
|
4064
4085
|
const isEditable = editableResolver(cell.row.original);
|
|
4065
|
-
React$
|
|
4086
|
+
React$17.useEffect(() => {
|
|
4066
4087
|
if (isEditing) hasSubmittedRef.current = false;
|
|
4067
4088
|
}, [isEditing]);
|
|
4068
|
-
const onBlur = React$
|
|
4089
|
+
const onBlur = React$17.useCallback(() => {
|
|
4069
4090
|
if (hasSubmittedRef.current) return;
|
|
4070
4091
|
const currentValue = inputRef.current?.value ?? "";
|
|
4071
4092
|
const normalizedInitial = initialValue ?? "";
|
|
@@ -4081,10 +4102,10 @@ function ShortTextCell({ cell, table, rowIndex, columnId, isEditing, isFocused,
|
|
|
4081
4102
|
columnId,
|
|
4082
4103
|
initialValue
|
|
4083
4104
|
]);
|
|
4084
|
-
const onChange = React$
|
|
4105
|
+
const onChange = React$17.useCallback((event) => {
|
|
4085
4106
|
setValue(event.target.value);
|
|
4086
4107
|
}, []);
|
|
4087
|
-
const handleEditingKeyDown = React$
|
|
4108
|
+
const handleEditingKeyDown = React$17.useCallback((event) => {
|
|
4088
4109
|
if (event.key === "Enter") {
|
|
4089
4110
|
event.preventDefault();
|
|
4090
4111
|
hasSubmittedRef.current = true;
|
|
@@ -4118,13 +4139,13 @@ function ShortTextCell({ cell, table, rowIndex, columnId, isEditing, isFocused,
|
|
|
4118
4139
|
rowIndex,
|
|
4119
4140
|
columnId
|
|
4120
4141
|
]);
|
|
4121
|
-
const handleFocusedKeyDown = React$
|
|
4142
|
+
const handleFocusedKeyDown = React$17.useCallback((event) => {
|
|
4122
4143
|
if (event.key.length === 1 && !event.ctrlKey && !event.metaKey) {
|
|
4123
4144
|
if (!isEditable) return;
|
|
4124
4145
|
setValue(event.key);
|
|
4125
4146
|
}
|
|
4126
4147
|
}, [isEditable]);
|
|
4127
|
-
const onWrapperKeyDown = React$
|
|
4148
|
+
const onWrapperKeyDown = React$17.useCallback((event) => {
|
|
4128
4149
|
if (isEditing) handleEditingKeyDown(event);
|
|
4129
4150
|
else if (isFocused) handleFocusedKeyDown(event);
|
|
4130
4151
|
}, [
|
|
@@ -4133,10 +4154,10 @@ function ShortTextCell({ cell, table, rowIndex, columnId, isEditing, isFocused,
|
|
|
4133
4154
|
handleEditingKeyDown,
|
|
4134
4155
|
handleFocusedKeyDown
|
|
4135
4156
|
]);
|
|
4136
|
-
React$
|
|
4157
|
+
React$17.useEffect(() => {
|
|
4137
4158
|
setValue(initialValue);
|
|
4138
4159
|
}, [initialValue]);
|
|
4139
|
-
React$
|
|
4160
|
+
React$17.useEffect(() => {
|
|
4140
4161
|
if (isEditing && inputRef.current) {
|
|
4141
4162
|
inputRef.current.focus();
|
|
4142
4163
|
inputRef.current.setSelectionRange(inputRef.current.value.length, inputRef.current.value.length);
|
|
@@ -4284,16 +4305,16 @@ function DataGridCell({ cell, table }) {
|
|
|
4284
4305
|
//#endregion
|
|
4285
4306
|
//#region src/data-grid/data-grid-view-menu.tsx
|
|
4286
4307
|
function DataGridViewMenu({ table,...props }) {
|
|
4287
|
-
const viewableColumns = React$
|
|
4288
|
-
const [order, setOrder] = React$
|
|
4308
|
+
const viewableColumns = React$16.useMemo(() => table.getAllColumns().filter((column) => typeof column.accessorFn !== "undefined"), [table]);
|
|
4309
|
+
const [order, setOrder] = React$16.useState(() => {
|
|
4289
4310
|
const stateOrder = table.getState().columnOrder ?? [];
|
|
4290
4311
|
if (stateOrder && stateOrder.length > 0) return stateOrder;
|
|
4291
4312
|
return table.getAllColumns().map((c) => c.id);
|
|
4292
4313
|
});
|
|
4293
|
-
const [searchQuery, setSearchQuery] = React$
|
|
4294
|
-
const [isDragging, setIsDragging] = React$
|
|
4295
|
-
const [insertionIndex, setInsertionIndex] = React$
|
|
4296
|
-
React$
|
|
4314
|
+
const [searchQuery, setSearchQuery] = React$16.useState("");
|
|
4315
|
+
const [isDragging, setIsDragging] = React$16.useState(false);
|
|
4316
|
+
const [insertionIndex, setInsertionIndex] = React$16.useState(null);
|
|
4317
|
+
React$16.useEffect(() => {
|
|
4297
4318
|
const stateOrder = table.getState().columnOrder ?? [];
|
|
4298
4319
|
if (stateOrder && stateOrder.length > 0) {
|
|
4299
4320
|
setOrder(stateOrder);
|
|
@@ -4301,8 +4322,8 @@ function DataGridViewMenu({ table,...props }) {
|
|
|
4301
4322
|
}
|
|
4302
4323
|
setOrder(table.getAllColumns().map((c) => c.id));
|
|
4303
4324
|
}, [table]);
|
|
4304
|
-
const visibleSet = React$
|
|
4305
|
-
const orderedColumns = React$
|
|
4325
|
+
const visibleSet = React$16.useMemo(() => new Set(viewableColumns.map((c) => c.id)), [viewableColumns]);
|
|
4326
|
+
const orderedColumns = React$16.useMemo(() => {
|
|
4306
4327
|
const ordered = [];
|
|
4307
4328
|
for (const id of order) {
|
|
4308
4329
|
const col = viewableColumns.find((c) => c.id === id);
|
|
@@ -4315,12 +4336,12 @@ function DataGridViewMenu({ table,...props }) {
|
|
|
4315
4336
|
viewableColumns,
|
|
4316
4337
|
table
|
|
4317
4338
|
]);
|
|
4318
|
-
const draggingRef = React$
|
|
4319
|
-
const groupRef = React$
|
|
4320
|
-
const getBaseOrder = React$
|
|
4339
|
+
const draggingRef = React$16.useRef(null);
|
|
4340
|
+
const groupRef = React$16.useRef(null);
|
|
4341
|
+
const getBaseOrder = React$16.useCallback(() => {
|
|
4321
4342
|
return table.getState().columnOrder && table.getState().columnOrder.length ? table.getState().columnOrder.slice() : table.getAllColumns().map((c) => c.id);
|
|
4322
4343
|
}, [table]);
|
|
4323
|
-
const computeInsertionIndex = React$
|
|
4344
|
+
const computeInsertionIndex = React$16.useCallback((clientY) => {
|
|
4324
4345
|
const baseOrder = getBaseOrder();
|
|
4325
4346
|
const el = groupRef.current;
|
|
4326
4347
|
if (!el) return baseOrder.length;
|
|
@@ -4342,7 +4363,7 @@ function DataGridViewMenu({ table,...props }) {
|
|
|
4342
4363
|
setIsDragging(false);
|
|
4343
4364
|
setInsertionIndex(null);
|
|
4344
4365
|
}
|
|
4345
|
-
const doDrop = React$
|
|
4366
|
+
const doDrop = React$16.useCallback((dragId, toIndex) => {
|
|
4346
4367
|
const baseOrder = table.getState().columnOrder && table.getState().columnOrder.length ? table.getState().columnOrder.slice() : table.getAllColumns().map((c) => c.id);
|
|
4347
4368
|
const fromIndex = baseOrder.indexOf(dragId);
|
|
4348
4369
|
if (fromIndex === -1) {
|
|
@@ -4359,7 +4380,7 @@ function DataGridViewMenu({ table,...props }) {
|
|
|
4359
4380
|
setOrder(copy.filter((id) => visibleSet.has(id)));
|
|
4360
4381
|
onDragEnd();
|
|
4361
4382
|
}, [table, visibleSet]);
|
|
4362
|
-
const startPointerDrag = React$
|
|
4383
|
+
const startPointerDrag = React$16.useCallback((e, id) => {
|
|
4363
4384
|
e.preventDefault();
|
|
4364
4385
|
draggingRef.current = id;
|
|
4365
4386
|
setIsDragging(true);
|
|
@@ -4392,7 +4413,7 @@ function DataGridViewMenu({ table,...props }) {
|
|
|
4392
4413
|
if (fromIndex < targetIndex) insertAt = targetIndex - 1;
|
|
4393
4414
|
return insertAt === fromIndex;
|
|
4394
4415
|
}
|
|
4395
|
-
const dragFromHandle = React$
|
|
4416
|
+
const dragFromHandle = React$16.useRef(false);
|
|
4396
4417
|
function resetTableView() {
|
|
4397
4418
|
const defaultOrder = table.getAllColumns().map((c) => c.id);
|
|
4398
4419
|
try {
|
|
@@ -4439,7 +4460,7 @@ function DataGridViewMenu({ table,...props }) {
|
|
|
4439
4460
|
const currentBase = table.getState().columnOrder && table.getState().columnOrder.length ? table.getState().columnOrder.slice() : table.getAllColumns().map((c) => c.id);
|
|
4440
4461
|
const pos = currentBase.indexOf(column.id);
|
|
4441
4462
|
const isHideable = column.getCanHide();
|
|
4442
|
-
return /* @__PURE__ */ jsxs(React$
|
|
4463
|
+
return /* @__PURE__ */ jsxs(React$16.Fragment, { children: [/* @__PURE__ */ jsxs(CommandItem, {
|
|
4443
4464
|
value: column.id,
|
|
4444
4465
|
"data-col-id": column.id,
|
|
4445
4466
|
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"),
|
|
@@ -4499,30 +4520,30 @@ const MIN_COLUMN_SIZE = 60;
|
|
|
4499
4520
|
const MAX_COLUMN_SIZE = 800;
|
|
4500
4521
|
const SEARCH_SHORTCUT_KEY = "f";
|
|
4501
4522
|
const NON_NAVIGABLE_COLUMN_IDS = ["select", "actions"];
|
|
4502
|
-
const useIsomorphicLayoutEffect = typeof window !== "undefined" ? React$
|
|
4523
|
+
const useIsomorphicLayoutEffect = typeof window !== "undefined" ? React$15.useLayoutEffect : React$15.useEffect;
|
|
4503
4524
|
function useLazyRef(fn) {
|
|
4504
|
-
const ref = React$
|
|
4525
|
+
const ref = React$15.useRef(null);
|
|
4505
4526
|
if (ref.current === null) ref.current = fn();
|
|
4506
4527
|
return ref;
|
|
4507
4528
|
}
|
|
4508
4529
|
function useAsRef(data) {
|
|
4509
|
-
const ref = React$
|
|
4530
|
+
const ref = React$15.useRef(data);
|
|
4510
4531
|
useIsomorphicLayoutEffect(() => {
|
|
4511
4532
|
ref.current = data;
|
|
4512
4533
|
});
|
|
4513
4534
|
return ref;
|
|
4514
4535
|
}
|
|
4515
4536
|
function useStore(store, selector) {
|
|
4516
|
-
const getSnapshot = React$
|
|
4517
|
-
return React$
|
|
4518
|
-
}
|
|
4519
|
-
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, manualSorting, sorting: externalSorting, onSortingChange: externalOnSortingChange, onLoadMore, loadMoreThreshold = 25, totalRowCount,...dataGridProps }) {
|
|
4520
|
-
const dataGridRef = React$
|
|
4521
|
-
const tableRef = React$
|
|
4522
|
-
const rowVirtualizerRef = React$
|
|
4523
|
-
const headerRef = React$
|
|
4524
|
-
const rowMapRef = React$
|
|
4525
|
-
const footerRef = React$
|
|
4537
|
+
const getSnapshot = React$15.useCallback(() => selector(store.getState()), [store, selector]);
|
|
4538
|
+
return React$15.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
|
|
4539
|
+
}
|
|
4540
|
+
function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRowsDelete: onRowsDeleteProp, onCellFocus: onCellFocusProp, onRowClick: onRowClickProp, highlightedRowIndex, rowHeight: rowHeightProp = DEFAULT_ROW_HEIGHT, overscan = OVERSCAN, initialState, autoFocus = false, enableColumnSelection = false, enableSearch = false, manualSorting, sorting: externalSorting, onSortingChange: externalOnSortingChange, onLoadMore, loadMoreThreshold = 25, totalRowCount,...dataGridProps }) {
|
|
4541
|
+
const dataGridRef = React$15.useRef(null);
|
|
4542
|
+
const tableRef = React$15.useRef(null);
|
|
4543
|
+
const rowVirtualizerRef = React$15.useRef(null);
|
|
4544
|
+
const headerRef = React$15.useRef(null);
|
|
4545
|
+
const rowMapRef = React$15.useRef(new Map());
|
|
4546
|
+
const footerRef = React$15.useRef(null);
|
|
4526
4547
|
const dataGridPropsRef = useAsRef(dataGridProps);
|
|
4527
4548
|
const listenersRef = useLazyRef(() => new Set());
|
|
4528
4549
|
const stateRef = useLazyRef(() => {
|
|
@@ -4550,7 +4571,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
4550
4571
|
isScrolling: false
|
|
4551
4572
|
};
|
|
4552
4573
|
});
|
|
4553
|
-
const store = React$
|
|
4574
|
+
const store = React$15.useMemo(() => {
|
|
4554
4575
|
let isBatching = false;
|
|
4555
4576
|
let pendingNotification = false;
|
|
4556
4577
|
return {
|
|
@@ -4594,7 +4615,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
4594
4615
|
}
|
|
4595
4616
|
};
|
|
4596
4617
|
}, [listenersRef, stateRef]);
|
|
4597
|
-
React$
|
|
4618
|
+
React$15.useEffect(() => {
|
|
4598
4619
|
store.setState("rowHeight", rowHeightProp);
|
|
4599
4620
|
}, [rowHeightProp, store]);
|
|
4600
4621
|
const focusedCell = useStore(store, (state) => state.focusedCell);
|
|
@@ -4610,20 +4631,20 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
4610
4631
|
const rowHeight = useStore(store, (state) => state.rowHeight);
|
|
4611
4632
|
const isScrolling = useStore(store, (state) => state.isScrolling);
|
|
4612
4633
|
const rowHeightValue = getRowHeightValue(rowHeight);
|
|
4613
|
-
const columnIds = React$
|
|
4634
|
+
const columnIds = React$15.useMemo(() => {
|
|
4614
4635
|
return columns.map((c) => {
|
|
4615
4636
|
if (c.id) return c.id;
|
|
4616
4637
|
if ("accessorKey" in c) return c.accessorKey;
|
|
4617
4638
|
return void 0;
|
|
4618
4639
|
}).filter((id) => Boolean(id));
|
|
4619
4640
|
}, [columns]);
|
|
4620
|
-
const storageKey = React$
|
|
4641
|
+
const storageKey = React$15.useMemo(() => {
|
|
4621
4642
|
if (typeof window === "undefined") return void 0;
|
|
4622
4643
|
const path = globalThis.location?.pathname ?? "unknown";
|
|
4623
4644
|
const cols = columnIds.join("|");
|
|
4624
4645
|
return `pxl.dataGrid:${path}:${cols}`;
|
|
4625
4646
|
}, [columnIds]);
|
|
4626
|
-
const persistedState = React$
|
|
4647
|
+
const persistedState = React$15.useMemo(() => {
|
|
4627
4648
|
if (!storageKey) return void 0;
|
|
4628
4649
|
try {
|
|
4629
4650
|
const raw = localStorage.getItem(storageKey);
|
|
@@ -4634,7 +4655,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
4634
4655
|
return void 0;
|
|
4635
4656
|
}
|
|
4636
4657
|
}, [storageKey]);
|
|
4637
|
-
const mergedInitialState = React$
|
|
4658
|
+
const mergedInitialState = React$15.useMemo(() => {
|
|
4638
4659
|
const base = { ...initialState ?? {} };
|
|
4639
4660
|
if (persistedState) try {
|
|
4640
4661
|
if (persistedState.columnOrder) base.columnOrder = persistedState.columnOrder;
|
|
@@ -4643,12 +4664,12 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
4643
4664
|
} catch (_) {}
|
|
4644
4665
|
return base;
|
|
4645
4666
|
}, [initialState, persistedState]);
|
|
4646
|
-
const getNavigableColumnIds = React$
|
|
4667
|
+
const getNavigableColumnIds = React$15.useCallback(() => {
|
|
4647
4668
|
const t = tableRef.current;
|
|
4648
4669
|
if (t) return t.getVisibleLeafColumns().map((c) => c.id).filter((c) => !NON_NAVIGABLE_COLUMN_IDS.includes(c));
|
|
4649
4670
|
return columnIds.filter((c) => !NON_NAVIGABLE_COLUMN_IDS.includes(c));
|
|
4650
4671
|
}, [columnIds]);
|
|
4651
|
-
const onDataUpdate = React$
|
|
4672
|
+
const onDataUpdate = React$15.useCallback((updates) => {
|
|
4652
4673
|
const updateArray = Array.isArray(updates) ? updates : [updates];
|
|
4653
4674
|
if (updateArray.length === 0) return;
|
|
4654
4675
|
const currentTable = tableRef.current;
|
|
@@ -4687,10 +4708,10 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
4687
4708
|
});
|
|
4688
4709
|
onDataChange?.(newData);
|
|
4689
4710
|
}, [data, onDataChange]);
|
|
4690
|
-
const getIsCellSelected = React$
|
|
4711
|
+
const getIsCellSelected = React$15.useCallback((rowIndex, columnId) => {
|
|
4691
4712
|
return selectionState.selectedCells.has(getCellKey(rowIndex, columnId));
|
|
4692
4713
|
}, [selectionState.selectedCells]);
|
|
4693
|
-
const clearSelection = React$
|
|
4714
|
+
const clearSelection = React$15.useCallback(() => {
|
|
4694
4715
|
store.batch(() => {
|
|
4695
4716
|
store.setState("selectionState", {
|
|
4696
4717
|
selectedCells: new Set(),
|
|
@@ -4700,7 +4721,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
4700
4721
|
store.setState("rowSelection", {});
|
|
4701
4722
|
});
|
|
4702
4723
|
}, [store]);
|
|
4703
|
-
const selectAll = React$
|
|
4724
|
+
const selectAll = React$15.useCallback(() => {
|
|
4704
4725
|
const allCells = new Set();
|
|
4705
4726
|
const currentTable = tableRef.current;
|
|
4706
4727
|
const rows = currentTable?.getRowModel().rows ?? [];
|
|
@@ -4727,7 +4748,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
4727
4748
|
data.length,
|
|
4728
4749
|
store
|
|
4729
4750
|
]);
|
|
4730
|
-
const selectColumn = React$
|
|
4751
|
+
const selectColumn = React$15.useCallback((columnId) => {
|
|
4731
4752
|
const currentTable = tableRef.current;
|
|
4732
4753
|
const rows = currentTable?.getRowModel().rows ?? [];
|
|
4733
4754
|
const rowCount = rows.length ?? data.length;
|
|
@@ -4749,7 +4770,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
4749
4770
|
isSelecting: false
|
|
4750
4771
|
});
|
|
4751
4772
|
}, [data.length, store]);
|
|
4752
|
-
const selectRange = React$
|
|
4773
|
+
const selectRange = React$15.useCallback((start, end, isSelecting = false) => {
|
|
4753
4774
|
const visibleCols = getNavigableColumnIds();
|
|
4754
4775
|
const startColIndex = visibleCols.indexOf(start.columnId);
|
|
4755
4776
|
const endColIndex = visibleCols.indexOf(end.columnId);
|
|
@@ -4771,7 +4792,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
4771
4792
|
isSelecting
|
|
4772
4793
|
});
|
|
4773
4794
|
}, [getNavigableColumnIds, store]);
|
|
4774
|
-
const focusCell = React$
|
|
4795
|
+
const focusCell = React$15.useCallback((rowIndex, columnId) => {
|
|
4775
4796
|
store.batch(() => {
|
|
4776
4797
|
store.setState("focusedCell", {
|
|
4777
4798
|
rowIndex,
|
|
@@ -4787,7 +4808,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
4787
4808
|
if (currentState.searchOpen) return;
|
|
4788
4809
|
if (dataGridRef.current && document.activeElement !== dataGridRef.current) dataGridRef.current.focus();
|
|
4789
4810
|
}, [store, onCellFocusProp]);
|
|
4790
|
-
const onRowsDelete = React$
|
|
4811
|
+
const onRowsDelete = React$15.useCallback(async (rowIndices) => {
|
|
4791
4812
|
if (!onRowsDeleteProp || rowIndices.length === 0) return;
|
|
4792
4813
|
const currentTable = tableRef.current;
|
|
4793
4814
|
const rows = currentTable?.getRowModel().rows;
|
|
@@ -4826,7 +4847,20 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
4826
4847
|
getNavigableColumnIds,
|
|
4827
4848
|
focusCell
|
|
4828
4849
|
]);
|
|
4829
|
-
|
|
4850
|
+
/**
|
|
4851
|
+
* Debounced row click handler - KEYBOARD NAVIGATION ONLY
|
|
4852
|
+
*
|
|
4853
|
+
* This debounced version (300ms delay) is used exclusively for keyboard navigation
|
|
4854
|
+
* (arrow keys, Page Up/Down, etc.) to prevent browser history pollution from rapid
|
|
4855
|
+
* key presses when using keyField-based URL routing.
|
|
4856
|
+
*
|
|
4857
|
+
* Mouse clicks use the immediate `onRowClickProp` handler directly (passed via table.meta.onRowClick)
|
|
4858
|
+
* since clicks are deliberate user actions that don't require debouncing.
|
|
4859
|
+
*/
|
|
4860
|
+
const debouncedRowClick = useDebouncedCallback((rowIndex) => {
|
|
4861
|
+
onRowClickProp?.(rowIndex);
|
|
4862
|
+
}, 300);
|
|
4863
|
+
const navigateCell = React$15.useCallback((direction) => {
|
|
4830
4864
|
const currentState = store.getState();
|
|
4831
4865
|
if (!currentState.focusedCell) return;
|
|
4832
4866
|
const { rowIndex, columnId } = currentState.focusedCell;
|
|
@@ -4896,6 +4930,8 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
4896
4930
|
}
|
|
4897
4931
|
if (newRowIndex !== rowIndex || newColumnId !== columnId) {
|
|
4898
4932
|
const rowDiff = newRowIndex - rowIndex;
|
|
4933
|
+
const rowChanged = newRowIndex !== rowIndex;
|
|
4934
|
+
if (rowChanged && onRowClickProp) debouncedRowClick(newRowIndex);
|
|
4899
4935
|
if (Math.abs(rowDiff) === 1 && (direction === "up" || direction === "down")) {
|
|
4900
4936
|
const container = dataGridRef.current;
|
|
4901
4937
|
const currentRow = rowMapRef.current.get(rowIndex);
|
|
@@ -4950,9 +4986,11 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
4950
4986
|
getNavigableColumnIds,
|
|
4951
4987
|
focusCell,
|
|
4952
4988
|
data.length,
|
|
4953
|
-
rowHeightValue
|
|
4989
|
+
rowHeightValue,
|
|
4990
|
+
onRowClickProp,
|
|
4991
|
+
debouncedRowClick
|
|
4954
4992
|
]);
|
|
4955
|
-
const onCellEditingStart = React$
|
|
4993
|
+
const onCellEditingStart = React$15.useCallback((rowIndex, columnId) => {
|
|
4956
4994
|
store.batch(() => {
|
|
4957
4995
|
store.setState("focusedCell", {
|
|
4958
4996
|
rowIndex,
|
|
@@ -4964,7 +5002,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
4964
5002
|
});
|
|
4965
5003
|
});
|
|
4966
5004
|
}, [store]);
|
|
4967
|
-
const onCellEditingStop = React$
|
|
5005
|
+
const onCellEditingStop = React$15.useCallback((opts) => {
|
|
4968
5006
|
const currentState = store.getState();
|
|
4969
5007
|
const currentEditing = currentState.editingCell;
|
|
4970
5008
|
store.setState("editingCell", null);
|
|
@@ -4990,7 +5028,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
4990
5028
|
focusCell,
|
|
4991
5029
|
navigateCell
|
|
4992
5030
|
]);
|
|
4993
|
-
const onSearchOpenChange = React$
|
|
5031
|
+
const onSearchOpenChange = React$15.useCallback((open) => {
|
|
4994
5032
|
if (open) {
|
|
4995
5033
|
store.setState("searchOpen", true);
|
|
4996
5034
|
return;
|
|
@@ -5009,7 +5047,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5009
5047
|
});
|
|
5010
5048
|
if (dataGridRef.current && document.activeElement !== dataGridRef.current) dataGridRef.current.focus();
|
|
5011
5049
|
}, [store]);
|
|
5012
|
-
const onSearch = React$
|
|
5050
|
+
const onSearch = React$15.useCallback((query) => {
|
|
5013
5051
|
if (!query.trim()) {
|
|
5014
5052
|
store.batch(() => {
|
|
5015
5053
|
store.setState("searchMatches", []);
|
|
@@ -5044,8 +5082,8 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5044
5082
|
rowVirtualizerRef.current?.scrollToIndex(firstMatch.rowIndex, { align: "center" });
|
|
5045
5083
|
}
|
|
5046
5084
|
}, [columnIds, store]);
|
|
5047
|
-
const onSearchQueryChange = React$
|
|
5048
|
-
const onNavigateToPrevMatch = React$
|
|
5085
|
+
const onSearchQueryChange = React$15.useCallback((query) => store.setState("searchQuery", query), [store]);
|
|
5086
|
+
const onNavigateToPrevMatch = React$15.useCallback(() => {
|
|
5049
5087
|
const currentState = store.getState();
|
|
5050
5088
|
if (currentState.searchMatches.length === 0) return;
|
|
5051
5089
|
const prevIndex = currentState.matchIndex - 1 < 0 ? currentState.searchMatches.length - 1 : currentState.matchIndex - 1;
|
|
@@ -5060,7 +5098,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5060
5098
|
});
|
|
5061
5099
|
}
|
|
5062
5100
|
}, [store, focusCell]);
|
|
5063
|
-
const onNavigateToNextMatch = React$
|
|
5101
|
+
const onNavigateToNextMatch = React$15.useCallback(() => {
|
|
5064
5102
|
const currentState = store.getState();
|
|
5065
5103
|
if (currentState.searchMatches.length === 0) return;
|
|
5066
5104
|
const nextIndex = (currentState.matchIndex + 1) % currentState.searchMatches.length;
|
|
@@ -5075,15 +5113,15 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5075
5113
|
});
|
|
5076
5114
|
}
|
|
5077
5115
|
}, [store, focusCell]);
|
|
5078
|
-
const getIsSearchMatch = React$
|
|
5116
|
+
const getIsSearchMatch = React$15.useCallback((rowIndex, columnId) => {
|
|
5079
5117
|
return searchMatches.some((match) => match.rowIndex === rowIndex && match.columnId === columnId);
|
|
5080
5118
|
}, [searchMatches]);
|
|
5081
|
-
const getIsActiveSearchMatch = React$
|
|
5119
|
+
const getIsActiveSearchMatch = React$15.useCallback((rowIndex, columnId) => {
|
|
5082
5120
|
if (matchIndex < 0) return false;
|
|
5083
5121
|
const currentMatch = searchMatches[matchIndex];
|
|
5084
5122
|
return currentMatch?.rowIndex === rowIndex && currentMatch?.columnId === columnId;
|
|
5085
5123
|
}, [searchMatches, matchIndex]);
|
|
5086
|
-
const blurCell = React$
|
|
5124
|
+
const blurCell = React$15.useCallback(() => {
|
|
5087
5125
|
const currentState = store.getState();
|
|
5088
5126
|
if (currentState.editingCell && document.activeElement instanceof HTMLElement) document.activeElement.blur();
|
|
5089
5127
|
store.batch(() => {
|
|
@@ -5091,7 +5129,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5091
5129
|
store.setState("editingCell", null);
|
|
5092
5130
|
});
|
|
5093
5131
|
}, [store]);
|
|
5094
|
-
const onCellClick = React$
|
|
5132
|
+
const onCellClick = React$15.useCallback((rowIndex, columnId, event) => {
|
|
5095
5133
|
if (event?.button === 2) return;
|
|
5096
5134
|
const currentState = store.getState();
|
|
5097
5135
|
const currentFocused = currentState.focusedCell;
|
|
@@ -5139,11 +5177,11 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5139
5177
|
selectRange,
|
|
5140
5178
|
clearSelection
|
|
5141
5179
|
]);
|
|
5142
|
-
const onCellDoubleClick = React$
|
|
5180
|
+
const onCellDoubleClick = React$15.useCallback((rowIndex, columnId, event) => {
|
|
5143
5181
|
if (event?.defaultPrevented) return;
|
|
5144
5182
|
onCellEditingStart(rowIndex, columnId);
|
|
5145
5183
|
}, [onCellEditingStart]);
|
|
5146
|
-
const onCellMouseDown = React$
|
|
5184
|
+
const onCellMouseDown = React$15.useCallback((rowIndex, columnId, event) => {
|
|
5147
5185
|
if (event.button === 2) return;
|
|
5148
5186
|
event.preventDefault();
|
|
5149
5187
|
if (!event.ctrlKey && !event.metaKey && !event.shiftKey) store.batch(() => {
|
|
@@ -5164,7 +5202,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5164
5202
|
store.setState("rowSelection", {});
|
|
5165
5203
|
});
|
|
5166
5204
|
}, [store]);
|
|
5167
|
-
const onCellMouseEnter = React$
|
|
5205
|
+
const onCellMouseEnter = React$15.useCallback((rowIndex, columnId, _event) => {
|
|
5168
5206
|
const currentState = store.getState();
|
|
5169
5207
|
if (currentState.selectionState.isSelecting && currentState.selectionState.selectionRange) {
|
|
5170
5208
|
const start = currentState.selectionState.selectionRange.start;
|
|
@@ -5180,14 +5218,14 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5180
5218
|
selectRange,
|
|
5181
5219
|
focusCell
|
|
5182
5220
|
]);
|
|
5183
|
-
const onCellMouseUp = React$
|
|
5221
|
+
const onCellMouseUp = React$15.useCallback(() => {
|
|
5184
5222
|
const currentState = store.getState();
|
|
5185
5223
|
store.setState("selectionState", {
|
|
5186
5224
|
...currentState.selectionState,
|
|
5187
5225
|
isSelecting: false
|
|
5188
5226
|
});
|
|
5189
5227
|
}, [store]);
|
|
5190
|
-
const onCellContextMenu = React$
|
|
5228
|
+
const onCellContextMenu = React$15.useCallback((rowIndex, columnId, event) => {
|
|
5191
5229
|
event.preventDefault();
|
|
5192
5230
|
event.stopPropagation();
|
|
5193
5231
|
const currentState = store.getState();
|
|
@@ -5219,7 +5257,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5219
5257
|
y: event.clientY
|
|
5220
5258
|
});
|
|
5221
5259
|
}, [store]);
|
|
5222
|
-
const onContextMenuOpenChange = React$
|
|
5260
|
+
const onContextMenuOpenChange = React$15.useCallback((open) => {
|
|
5223
5261
|
if (!open) {
|
|
5224
5262
|
const currentMenu = store.getState().contextMenu;
|
|
5225
5263
|
store.setState("contextMenu", {
|
|
@@ -5229,7 +5267,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5229
5267
|
});
|
|
5230
5268
|
}
|
|
5231
5269
|
}, [store]);
|
|
5232
|
-
const onDataGridKeyDown = React$
|
|
5270
|
+
const onDataGridKeyDown = React$15.useCallback((event) => {
|
|
5233
5271
|
const currentState = store.getState();
|
|
5234
5272
|
const { key, ctrlKey, metaKey, shiftKey } = event;
|
|
5235
5273
|
const isCtrlPressed = ctrlKey || metaKey;
|
|
@@ -5318,6 +5356,16 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5318
5356
|
if (currentState.selectionState.selectedCells.size > 0 || Object.keys(currentState.rowSelection).length > 0) clearSelection();
|
|
5319
5357
|
else blurCell();
|
|
5320
5358
|
return;
|
|
5359
|
+
case "F2":
|
|
5360
|
+
if (currentState.focusedCell) {
|
|
5361
|
+
event.preventDefault();
|
|
5362
|
+
onCellEditingStart(currentState.focusedCell.rowIndex, currentState.focusedCell.columnId);
|
|
5363
|
+
}
|
|
5364
|
+
return;
|
|
5365
|
+
case "Enter":
|
|
5366
|
+
event.preventDefault();
|
|
5367
|
+
direction = shiftKey ? "up" : "down";
|
|
5368
|
+
break;
|
|
5321
5369
|
case "Tab":
|
|
5322
5370
|
event.preventDefault();
|
|
5323
5371
|
direction = event.shiftKey ? "left" : "right";
|
|
@@ -5375,9 +5423,10 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5375
5423
|
onSearchOpenChange,
|
|
5376
5424
|
onNavigateToNextMatch,
|
|
5377
5425
|
onNavigateToPrevMatch,
|
|
5378
|
-
enableSearch
|
|
5426
|
+
enableSearch,
|
|
5427
|
+
onCellEditingStart
|
|
5379
5428
|
]);
|
|
5380
|
-
const onSortingChange = React$
|
|
5429
|
+
const onSortingChange = React$15.useCallback((updater) => {
|
|
5381
5430
|
if (manualSorting && externalOnSortingChange) externalOnSortingChange(updater);
|
|
5382
5431
|
else {
|
|
5383
5432
|
const currentState = store.getState();
|
|
@@ -5389,7 +5438,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5389
5438
|
manualSorting,
|
|
5390
5439
|
externalOnSortingChange
|
|
5391
5440
|
]);
|
|
5392
|
-
const onRowSelectionChange = React$
|
|
5441
|
+
const onRowSelectionChange = React$15.useCallback((updater) => {
|
|
5393
5442
|
const currentState = store.getState();
|
|
5394
5443
|
const newRowSelection = typeof updater === "function" ? updater(currentState.rowSelection) : updater;
|
|
5395
5444
|
const selectedRows = Object.keys(newRowSelection).filter((key) => newRowSelection[key]);
|
|
@@ -5411,7 +5460,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5411
5460
|
store.setState("editingCell", null);
|
|
5412
5461
|
});
|
|
5413
5462
|
}, [store, columnIds]);
|
|
5414
|
-
const onRowSelect = React$
|
|
5463
|
+
const onRowSelect = React$15.useCallback((rowIndex, selected, shiftKey) => {
|
|
5415
5464
|
const currentState = store.getState();
|
|
5416
5465
|
const rows = tableRef.current?.getRowModel().rows ?? [];
|
|
5417
5466
|
const currentRow = rows[rowIndex];
|
|
@@ -5431,12 +5480,12 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5431
5480
|
});
|
|
5432
5481
|
store.setState("lastClickedRowIndex", rowIndex);
|
|
5433
5482
|
}, [store, onRowSelectionChange]);
|
|
5434
|
-
const onRowHeightChange = React$
|
|
5483
|
+
const onRowHeightChange = React$15.useCallback((updater) => {
|
|
5435
5484
|
const currentState = store.getState();
|
|
5436
5485
|
const newRowHeight = typeof updater === "function" ? updater(currentState.rowHeight) : updater;
|
|
5437
5486
|
store.setState("rowHeight", newRowHeight);
|
|
5438
5487
|
}, [store]);
|
|
5439
|
-
const onColumnClick = React$
|
|
5488
|
+
const onColumnClick = React$15.useCallback((columnId) => {
|
|
5440
5489
|
if (!enableColumnSelection) {
|
|
5441
5490
|
clearSelection();
|
|
5442
5491
|
return;
|
|
@@ -5447,13 +5496,13 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5447
5496
|
selectColumn,
|
|
5448
5497
|
clearSelection
|
|
5449
5498
|
]);
|
|
5450
|
-
const defaultColumn = React$
|
|
5499
|
+
const defaultColumn = React$15.useMemo(() => ({
|
|
5451
5500
|
cell: DataGridCell,
|
|
5452
5501
|
minSize: MIN_COLUMN_SIZE,
|
|
5453
5502
|
maxSize: MAX_COLUMN_SIZE
|
|
5454
5503
|
}), []);
|
|
5455
5504
|
const effectiveSorting = manualSorting && externalSorting ? externalSorting : sorting;
|
|
5456
|
-
const tableOptions = React$
|
|
5505
|
+
const tableOptions = React$15.useMemo(() => ({
|
|
5457
5506
|
...dataGridPropsRef.current,
|
|
5458
5507
|
data,
|
|
5459
5508
|
columns,
|
|
@@ -5479,6 +5528,8 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5479
5528
|
searchOpen,
|
|
5480
5529
|
rowHeight,
|
|
5481
5530
|
isScrolling,
|
|
5531
|
+
highlightedRowIndex,
|
|
5532
|
+
onRowClick: onRowClickProp,
|
|
5482
5533
|
getIsCellSelected,
|
|
5483
5534
|
getIsSearchMatch,
|
|
5484
5535
|
getIsActiveSearchMatch,
|
|
@@ -5514,6 +5565,8 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5514
5565
|
selectionState,
|
|
5515
5566
|
searchOpen,
|
|
5516
5567
|
isScrolling,
|
|
5568
|
+
highlightedRowIndex,
|
|
5569
|
+
onRowClickProp,
|
|
5517
5570
|
getIsCellSelected,
|
|
5518
5571
|
getIsSearchMatch,
|
|
5519
5572
|
getIsActiveSearchMatch,
|
|
@@ -5539,7 +5592,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5539
5592
|
if (!tableRef.current) tableRef.current = table;
|
|
5540
5593
|
const columnSizing = table.getState().columnSizing;
|
|
5541
5594
|
const columnVisibility = table.getState().columnVisibility;
|
|
5542
|
-
const columnSizeVars = React$
|
|
5595
|
+
const columnSizeVars = React$15.useMemo(() => {
|
|
5543
5596
|
const headers = table.getFlatHeaders();
|
|
5544
5597
|
const colSizes = {};
|
|
5545
5598
|
for (const header of headers) {
|
|
@@ -5581,7 +5634,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5581
5634
|
}
|
|
5582
5635
|
});
|
|
5583
5636
|
if (!rowVirtualizerRef.current) rowVirtualizerRef.current = rowVirtualizer;
|
|
5584
|
-
const onScrollToRow = React$
|
|
5637
|
+
const onScrollToRow = React$15.useCallback((opts) => {
|
|
5585
5638
|
const rowIndex = opts?.rowIndex ?? 0;
|
|
5586
5639
|
const columnId = opts?.columnId;
|
|
5587
5640
|
rowVirtualizer.scrollToIndex(rowIndex, { align: "center" });
|
|
@@ -5605,7 +5658,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5605
5658
|
getNavigableColumnIds,
|
|
5606
5659
|
store
|
|
5607
5660
|
]);
|
|
5608
|
-
const onRowAdd = React$
|
|
5661
|
+
const onRowAdd = React$15.useCallback(async (event) => {
|
|
5609
5662
|
if (!onRowAddProp) return;
|
|
5610
5663
|
const result = await onRowAddProp(event);
|
|
5611
5664
|
if (event?.defaultPrevented || result === null) return;
|
|
@@ -5638,7 +5691,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5638
5691
|
table.getState().columnVisibility,
|
|
5639
5692
|
table.getState().columnPinning
|
|
5640
5693
|
]);
|
|
5641
|
-
const searchState = React$
|
|
5694
|
+
const searchState = React$15.useMemo(() => {
|
|
5642
5695
|
if (!enableSearch) return void 0;
|
|
5643
5696
|
return {
|
|
5644
5697
|
searchMatches,
|
|
@@ -5663,7 +5716,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5663
5716
|
onNavigateToNextMatch,
|
|
5664
5717
|
onNavigateToPrevMatch
|
|
5665
5718
|
]);
|
|
5666
|
-
React$
|
|
5719
|
+
React$15.useEffect(() => {
|
|
5667
5720
|
const dataGridElement = dataGridRef.current;
|
|
5668
5721
|
if (!dataGridElement) return;
|
|
5669
5722
|
dataGridElement.addEventListener("keydown", onDataGridKeyDown);
|
|
@@ -5671,7 +5724,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5671
5724
|
dataGridElement.removeEventListener("keydown", onDataGridKeyDown);
|
|
5672
5725
|
};
|
|
5673
5726
|
}, [onDataGridKeyDown]);
|
|
5674
|
-
React$
|
|
5727
|
+
React$15.useEffect(() => {
|
|
5675
5728
|
function onGlobalKeyDown(event) {
|
|
5676
5729
|
const dataGridElement = dataGridRef.current;
|
|
5677
5730
|
if (!dataGridElement) return;
|
|
@@ -5715,7 +5768,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5715
5768
|
store,
|
|
5716
5769
|
clearSelection
|
|
5717
5770
|
]);
|
|
5718
|
-
React$
|
|
5771
|
+
React$15.useEffect(() => {
|
|
5719
5772
|
const currentState = store.getState();
|
|
5720
5773
|
if (autoFocus && data.length > 0 && columns.length > 0 && !currentState.focusedCell) {
|
|
5721
5774
|
const _nav = getNavigableColumnIds();
|
|
@@ -5741,7 +5794,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5741
5794
|
getNavigableColumnIds,
|
|
5742
5795
|
focusCell
|
|
5743
5796
|
]);
|
|
5744
|
-
React$
|
|
5797
|
+
React$15.useEffect(() => {
|
|
5745
5798
|
function onOutsideClick(event) {
|
|
5746
5799
|
if (event.button === 2) return;
|
|
5747
5800
|
if (dataGridRef.current && !dataGridRef.current.contains(event.target)) {
|
|
@@ -5763,7 +5816,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5763
5816
|
blurCell,
|
|
5764
5817
|
clearSelection
|
|
5765
5818
|
]);
|
|
5766
|
-
React$
|
|
5819
|
+
React$15.useEffect(() => {
|
|
5767
5820
|
function onCleanup() {
|
|
5768
5821
|
document.removeEventListener("selectstart", preventSelection);
|
|
5769
5822
|
document.removeEventListener("contextmenu", preventContextMenu);
|
|
@@ -5823,7 +5876,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5823
5876
|
//#endregion
|
|
5824
5877
|
//#region src/date-picker/date-picker.tsx
|
|
5825
5878
|
function DatePickerDemo() {
|
|
5826
|
-
const [date, setDate] = React$
|
|
5879
|
+
const [date, setDate] = React$14.useState();
|
|
5827
5880
|
return /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
|
|
5828
5881
|
asChild: true,
|
|
5829
5882
|
children: /* @__PURE__ */ jsxs(Button, {
|
|
@@ -5853,13 +5906,13 @@ Drawer.displayName = "Drawer";
|
|
|
5853
5906
|
const DrawerTrigger = Drawer$1.Trigger;
|
|
5854
5907
|
const DrawerPortal = Drawer$1.Portal;
|
|
5855
5908
|
const DrawerClose = Drawer$1.Close;
|
|
5856
|
-
const DrawerOverlay = React$
|
|
5909
|
+
const DrawerOverlay = React$13.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Drawer$1.Overlay, {
|
|
5857
5910
|
ref,
|
|
5858
5911
|
className: cn("fixed inset-0 z-50 bg-black/80", className),
|
|
5859
5912
|
...props
|
|
5860
5913
|
}));
|
|
5861
5914
|
DrawerOverlay.displayName = Drawer$1.Overlay.displayName;
|
|
5862
|
-
const DrawerContent = React$
|
|
5915
|
+
const DrawerContent = React$13.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsxs(DrawerPortal, { children: [/* @__PURE__ */ jsx(DrawerOverlay, {}), /* @__PURE__ */ jsxs(Drawer$1.Content, {
|
|
5863
5916
|
ref,
|
|
5864
5917
|
className: cn("fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background", className),
|
|
5865
5918
|
...props,
|
|
@@ -5876,13 +5929,13 @@ const DrawerFooter = ({ className,...props }) => /* @__PURE__ */ jsx("div", {
|
|
|
5876
5929
|
...props
|
|
5877
5930
|
});
|
|
5878
5931
|
DrawerFooter.displayName = "DrawerFooter";
|
|
5879
|
-
const DrawerTitle = React$
|
|
5932
|
+
const DrawerTitle = React$13.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Drawer$1.Title, {
|
|
5880
5933
|
ref,
|
|
5881
5934
|
className: cn("text-lg font-semibold leading-none tracking-tight", className),
|
|
5882
5935
|
...props
|
|
5883
5936
|
}));
|
|
5884
5937
|
DrawerTitle.displayName = Drawer$1.Title.displayName;
|
|
5885
|
-
const DrawerDescription = React$
|
|
5938
|
+
const DrawerDescription = React$13.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Drawer$1.Description, {
|
|
5886
5939
|
ref,
|
|
5887
5940
|
className: cn("text-sm text-muted-foreground", className),
|
|
5888
5941
|
...props
|
|
@@ -5901,7 +5954,7 @@ function Label({ className,...props }) {
|
|
|
5901
5954
|
|
|
5902
5955
|
//#endregion
|
|
5903
5956
|
//#region src/separator/separator.tsx
|
|
5904
|
-
const Separator = React$
|
|
5957
|
+
const Separator = React$12.forwardRef(({ className, orientation = "horizontal", decorative = true,...props }, ref) => /* @__PURE__ */ jsx(SeparatorPrimitive.Root, {
|
|
5905
5958
|
ref,
|
|
5906
5959
|
decorative,
|
|
5907
5960
|
orientation,
|
|
@@ -6023,8 +6076,8 @@ function FieldError({ className, children, errors,...props }) {
|
|
|
6023
6076
|
//#endregion
|
|
6024
6077
|
//#region src/hooks/use-is-mobile.ts
|
|
6025
6078
|
function useIsMobile(mobileBreakpoint = 768) {
|
|
6026
|
-
const [isMobile, setIsMobile] = React$
|
|
6027
|
-
React$
|
|
6079
|
+
const [isMobile, setIsMobile] = React$11.useState(false);
|
|
6080
|
+
React$11.useEffect(() => {
|
|
6028
6081
|
const mql = globalThis.matchMedia(`(max-width: ${mobileBreakpoint - 1}px)`);
|
|
6029
6082
|
const onChange = () => {
|
|
6030
6083
|
setIsMobile(globalThis.innerWidth < mobileBreakpoint);
|
|
@@ -6036,6 +6089,95 @@ function useIsMobile(mobileBreakpoint = 768) {
|
|
|
6036
6089
|
return isMobile;
|
|
6037
6090
|
}
|
|
6038
6091
|
|
|
6092
|
+
//#endregion
|
|
6093
|
+
//#region src/input/number-input.tsx
|
|
6094
|
+
/**
|
|
6095
|
+
* Wrapper variants that mirror inputVariants but use focus-within (for wrapper)
|
|
6096
|
+
* instead of focus-visible (for input element).
|
|
6097
|
+
* NOTE: When modifying variants, also update inputVariants in input.tsx
|
|
6098
|
+
*/
|
|
6099
|
+
const numberInputWrapperVariants = cva("border-input bg-background grid grid-cols-[auto_1fr_auto] items-center overflow-hidden rounded-md border shadow-xs transition-[color,box-shadow] has-[input:disabled]:pointer-events-none has-[input:disabled]:cursor-not-allowed has-[input:disabled]:opacity-50", {
|
|
6100
|
+
variants: { variant: {
|
|
6101
|
+
default: "min-h-9 focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]",
|
|
6102
|
+
simple: "min-h-8"
|
|
6103
|
+
} },
|
|
6104
|
+
defaultVariants: { variant: "default" }
|
|
6105
|
+
});
|
|
6106
|
+
const NumberInput = React$10.forwardRef(({ className, wrapperClassName, prefix, suffix, variant, showSpinButtons = false, __e2e_test_id__, onEnter, onChange,...props }, ref) => {
|
|
6107
|
+
const focusInputAtPosition = (element, cursor) => {
|
|
6108
|
+
const parent = element.parentElement;
|
|
6109
|
+
if (!parent) return;
|
|
6110
|
+
const input = parent.querySelector("input");
|
|
6111
|
+
if (!input) return;
|
|
6112
|
+
input.type = "text";
|
|
6113
|
+
if (cursor === "start") input.setSelectionRange(0, 0);
|
|
6114
|
+
else {
|
|
6115
|
+
const length = input.value.length;
|
|
6116
|
+
input.setSelectionRange(length, length);
|
|
6117
|
+
}
|
|
6118
|
+
input.type = "number";
|
|
6119
|
+
input.click();
|
|
6120
|
+
input.focus();
|
|
6121
|
+
};
|
|
6122
|
+
const handleLabelClick = (e, cursor) => {
|
|
6123
|
+
e.preventDefault();
|
|
6124
|
+
focusInputAtPosition(e.target, cursor);
|
|
6125
|
+
};
|
|
6126
|
+
const handleLabelKeyDown = (e, cursor) => {
|
|
6127
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
6128
|
+
e.preventDefault();
|
|
6129
|
+
focusInputAtPosition(e.target, cursor);
|
|
6130
|
+
}
|
|
6131
|
+
};
|
|
6132
|
+
const handleChange = (e) => {
|
|
6133
|
+
const value = e.target.value;
|
|
6134
|
+
const parsedValue = value === "" ? void 0 : Number(value);
|
|
6135
|
+
onChange?.(parsedValue);
|
|
6136
|
+
};
|
|
6137
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
6138
|
+
className: cn(numberInputWrapperVariants({ variant }), wrapperClassName),
|
|
6139
|
+
children: [
|
|
6140
|
+
prefix && /* @__PURE__ */ jsx("span", {
|
|
6141
|
+
className: "text-muted-foreground flex h-full cursor-text items-center pl-2 pr-1",
|
|
6142
|
+
onClick: (e) => handleLabelClick(e, "start"),
|
|
6143
|
+
onKeyDown: (e) => handleLabelKeyDown(e, "start"),
|
|
6144
|
+
children: prefix
|
|
6145
|
+
}),
|
|
6146
|
+
/* @__PURE__ */ jsx("input", {
|
|
6147
|
+
type: "number",
|
|
6148
|
+
"data-slot": "input",
|
|
6149
|
+
className: cn(
|
|
6150
|
+
inputVariants({ variant }),
|
|
6151
|
+
// Remove border/shadow/ring from input since wrapper handles it
|
|
6152
|
+
// Use min-h-full to override min-h-9/min-h-8 from inputVariants - wrapper controls height - never use explicit h-* in input since it breaks the spinner buttons for some browsers
|
|
6153
|
+
"min-h-full border-0 shadow-none focus-visible:ring-0 p-0 tabular-nums",
|
|
6154
|
+
!prefix && !suffix ? "col-span-3" : !prefix || !suffix ? "col-span-2" : "col-span-1",
|
|
6155
|
+
"text-right",
|
|
6156
|
+
!prefix && "pl-2",
|
|
6157
|
+
!suffix && (showSpinButtons ? "pr-1" : "pr-2"),
|
|
6158
|
+
!showSpinButtons && "appearance-none",
|
|
6159
|
+
className
|
|
6160
|
+
),
|
|
6161
|
+
"data-test-id": __e2e_test_id__,
|
|
6162
|
+
ref,
|
|
6163
|
+
onChange: handleChange,
|
|
6164
|
+
onKeyDown: (e) => {
|
|
6165
|
+
props.onKeyDown?.(e);
|
|
6166
|
+
if (e.key === "Enter") onEnter?.();
|
|
6167
|
+
},
|
|
6168
|
+
...props
|
|
6169
|
+
}),
|
|
6170
|
+
suffix && /* @__PURE__ */ jsx("span", {
|
|
6171
|
+
className: cn("text-muted-foreground flex h-full cursor-text items-center pr-2", showSpinButtons ? "pl-0" : "pl-1"),
|
|
6172
|
+
onClick: (e) => handleLabelClick(e, "end"),
|
|
6173
|
+
onKeyDown: (e) => handleLabelKeyDown(e, "end"),
|
|
6174
|
+
children: suffix
|
|
6175
|
+
})
|
|
6176
|
+
]
|
|
6177
|
+
});
|
|
6178
|
+
});
|
|
6179
|
+
NumberInput.displayName = "NumberInput";
|
|
6180
|
+
|
|
6039
6181
|
//#endregion
|
|
6040
6182
|
//#region src/mark-value-renderer/mark-value-renderer.tsx
|
|
6041
6183
|
/**
|
|
@@ -7197,5 +7339,5 @@ const ToggleGroupItem = React$1.forwardRef(({ className, children, variant, size
|
|
|
7197
7339
|
ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
|
|
7198
7340
|
|
|
7199
7341
|
//#endregion
|
|
7200
|
-
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, Slicer, 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 };
|
|
7342
|
+
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, NumberInput, 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, Slicer, 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, inputVariants, isoToLocalDate, knobVariants, navigationMenuTriggerStyle, parseCellKey, sliderVariants, toast, toggleVariants, useCallbackRef, useDataGrid, useDebouncedCallback, useIsMobile, useSidebar };
|
|
7201
7343
|
//# sourceMappingURL=index.js.map
|