@postxl/ui-components 1.2.3 → 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +439 -381
- package/dist/index.js +445 -317
- 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,7 @@ 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$47 from "react";
|
|
5
6
|
import * as React$46 from "react";
|
|
6
7
|
import * as React$45 from "react";
|
|
7
8
|
import * as React$44 from "react";
|
|
@@ -93,13 +94,13 @@ function cn(...inputs) {
|
|
|
93
94
|
//#endregion
|
|
94
95
|
//#region src/accordion/accordion.tsx
|
|
95
96
|
const Accordion = AccordionPrimitive.Root;
|
|
96
|
-
const AccordionItem = React$
|
|
97
|
+
const AccordionItem = React$47.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Item, {
|
|
97
98
|
ref,
|
|
98
99
|
className: cn("border-b", className),
|
|
99
100
|
...props
|
|
100
101
|
}));
|
|
101
102
|
AccordionItem.displayName = "AccordionItem";
|
|
102
|
-
const AccordionTrigger = React$
|
|
103
|
+
const AccordionTrigger = React$47.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Header, {
|
|
103
104
|
className: "flex",
|
|
104
105
|
children: /* @__PURE__ */ jsxs(AccordionPrimitive.Trigger, {
|
|
105
106
|
ref,
|
|
@@ -109,7 +110,7 @@ const AccordionTrigger = React$46.forwardRef(({ className, children,...props },
|
|
|
109
110
|
})
|
|
110
111
|
}));
|
|
111
112
|
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
|
|
112
|
-
const AccordionContent = React$
|
|
113
|
+
const AccordionContent = React$47.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Content, {
|
|
113
114
|
ref,
|
|
114
115
|
className: "overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
|
|
115
116
|
...props,
|
|
@@ -129,21 +130,21 @@ const alertVariants = cva("relative w-full rounded-lg border px-4 py-3 text-sm [
|
|
|
129
130
|
} },
|
|
130
131
|
defaultVariants: { variant: "default" }
|
|
131
132
|
});
|
|
132
|
-
const Alert = React$
|
|
133
|
+
const Alert = React$46.forwardRef(({ className, variant,...props }, ref) => /* @__PURE__ */ jsx("div", {
|
|
133
134
|
ref,
|
|
134
135
|
role: "alert",
|
|
135
136
|
className: cn(alertVariants({ variant }), className),
|
|
136
137
|
...props
|
|
137
138
|
}));
|
|
138
139
|
Alert.displayName = "Alert";
|
|
139
|
-
const AlertTitle = React$
|
|
140
|
+
const AlertTitle = React$46.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsx("h5", {
|
|
140
141
|
ref,
|
|
141
142
|
className: cn("mb-1 font-medium leading-none tracking-tight", className),
|
|
142
143
|
...props,
|
|
143
144
|
children
|
|
144
145
|
}));
|
|
145
146
|
AlertTitle.displayName = "AlertTitle";
|
|
146
|
-
const AlertDescription = React$
|
|
147
|
+
const AlertDescription = React$46.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
|
|
147
148
|
ref,
|
|
148
149
|
className: cn("text-sm [&_p]:leading-relaxed", className),
|
|
149
150
|
...props
|
|
@@ -202,13 +203,13 @@ function Button({ className, variant, size, asChild = false, __e2e_test_id__,...
|
|
|
202
203
|
const AlertDialog = AlertDialogPrimitive.Root;
|
|
203
204
|
const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
|
|
204
205
|
const AlertDialogPortal = AlertDialogPrimitive.Portal;
|
|
205
|
-
const AlertDialogOverlay = React$
|
|
206
|
+
const AlertDialogOverlay = React$45.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Overlay, {
|
|
206
207
|
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
208
|
...props,
|
|
208
209
|
ref
|
|
209
210
|
}));
|
|
210
211
|
AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
|
|
211
|
-
const AlertDialogContent = React$
|
|
212
|
+
const AlertDialogContent = React$45.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [/* @__PURE__ */ jsx(AlertDialogOverlay, {}), /* @__PURE__ */ jsx(AlertDialogPrimitive.Content, {
|
|
212
213
|
ref,
|
|
213
214
|
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
215
|
...props
|
|
@@ -224,25 +225,25 @@ const AlertDialogFooter = ({ className,...props }) => /* @__PURE__ */ jsx("div",
|
|
|
224
225
|
...props
|
|
225
226
|
});
|
|
226
227
|
AlertDialogFooter.displayName = "AlertDialogFooter";
|
|
227
|
-
const AlertDialogTitle = React$
|
|
228
|
+
const AlertDialogTitle = React$45.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Title, {
|
|
228
229
|
ref,
|
|
229
230
|
className: cn("text-lg font-semibold", className),
|
|
230
231
|
...props
|
|
231
232
|
}));
|
|
232
233
|
AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
|
|
233
|
-
const AlertDialogDescription = React$
|
|
234
|
+
const AlertDialogDescription = React$45.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Description, {
|
|
234
235
|
ref,
|
|
235
236
|
className: cn("text-sm text-muted-foreground", className),
|
|
236
237
|
...props
|
|
237
238
|
}));
|
|
238
239
|
AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
|
|
239
|
-
const AlertDialogAction = React$
|
|
240
|
+
const AlertDialogAction = React$45.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Action, {
|
|
240
241
|
ref,
|
|
241
242
|
className: cn(buttonVariants(), className),
|
|
242
243
|
...props
|
|
243
244
|
}));
|
|
244
245
|
AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
|
|
245
|
-
const AlertDialogCancel = React$
|
|
246
|
+
const AlertDialogCancel = React$45.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Cancel, {
|
|
246
247
|
ref,
|
|
247
248
|
className: cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className),
|
|
248
249
|
...props
|
|
@@ -251,19 +252,19 @@ AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
|
|
|
251
252
|
|
|
252
253
|
//#endregion
|
|
253
254
|
//#region src/avatar/avatar.tsx
|
|
254
|
-
const Avatar = React$
|
|
255
|
+
const Avatar = React$44.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AvatarPrimitive.Root, {
|
|
255
256
|
ref,
|
|
256
257
|
className: cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className),
|
|
257
258
|
...props
|
|
258
259
|
}));
|
|
259
260
|
Avatar.displayName = AvatarPrimitive.Root.displayName;
|
|
260
|
-
const AvatarImage = React$
|
|
261
|
+
const AvatarImage = React$44.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AvatarPrimitive.Image, {
|
|
261
262
|
ref,
|
|
262
263
|
className: cn("aspect-square h-full w-full", className),
|
|
263
264
|
...props
|
|
264
265
|
}));
|
|
265
266
|
AvatarImage.displayName = AvatarPrimitive.Image.displayName;
|
|
266
|
-
const AvatarFallback = React$
|
|
267
|
+
const AvatarFallback = React$44.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AvatarPrimitive.Fallback, {
|
|
267
268
|
ref,
|
|
268
269
|
className: cn("flex h-full w-full items-center justify-center rounded-full bg-muted", className),
|
|
269
270
|
...props
|
|
@@ -309,25 +310,25 @@ function Badge({ className, variant, size, asChild = false,...props }) {
|
|
|
309
310
|
|
|
310
311
|
//#endregion
|
|
311
312
|
//#region src/breadcrumb/breadcrumb.tsx
|
|
312
|
-
const Breadcrumb = React$
|
|
313
|
+
const Breadcrumb = React$43.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx("nav", {
|
|
313
314
|
ref,
|
|
314
315
|
"aria-label": "breadcrumb",
|
|
315
316
|
...props
|
|
316
317
|
}));
|
|
317
318
|
Breadcrumb.displayName = "Breadcrumb";
|
|
318
|
-
const BreadcrumbList = React$
|
|
319
|
+
const BreadcrumbList = React$43.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("ol", {
|
|
319
320
|
ref,
|
|
320
321
|
className: cn("flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5", className),
|
|
321
322
|
...props
|
|
322
323
|
}));
|
|
323
324
|
BreadcrumbList.displayName = "BreadcrumbList";
|
|
324
|
-
const BreadcrumbItem = React$
|
|
325
|
+
const BreadcrumbItem = React$43.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("li", {
|
|
325
326
|
ref,
|
|
326
327
|
className: cn("inline-flex items-center gap-1.5", className),
|
|
327
328
|
...props
|
|
328
329
|
}));
|
|
329
330
|
BreadcrumbItem.displayName = "BreadcrumbItem";
|
|
330
|
-
const BreadcrumbLink = React$
|
|
331
|
+
const BreadcrumbLink = React$43.forwardRef(({ asChild, className,...props }, ref) => {
|
|
331
332
|
const Comp = asChild ? Slot : "a";
|
|
332
333
|
return /* @__PURE__ */ jsx(Comp, {
|
|
333
334
|
ref,
|
|
@@ -336,7 +337,7 @@ const BreadcrumbLink = React$42.forwardRef(({ asChild, className,...props }, ref
|
|
|
336
337
|
});
|
|
337
338
|
});
|
|
338
339
|
BreadcrumbLink.displayName = "BreadcrumbLink";
|
|
339
|
-
const BreadcrumbPage = React$
|
|
340
|
+
const BreadcrumbPage = React$43.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("span", {
|
|
340
341
|
ref,
|
|
341
342
|
"aria-disabled": "true",
|
|
342
343
|
"aria-current": "page",
|
|
@@ -366,8 +367,8 @@ BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
|
|
|
366
367
|
//#region src/calendar/calendar.tsx
|
|
367
368
|
function Calendar({ className, classNames, showOutsideDays = true, captionLayout = "label", buttonVariant = "ghost", showYearNavigation = false, formatters, components,...props }) {
|
|
368
369
|
const defaultClassNames = getDefaultClassNames();
|
|
369
|
-
const [rangeSelectionStep, setRangeSelectionStep] = React$
|
|
370
|
-
const handleDayClick = React$
|
|
370
|
+
const [rangeSelectionStep, setRangeSelectionStep] = React$42.useState("from");
|
|
371
|
+
const handleDayClick = React$42.useCallback((day, modifiers, e) => {
|
|
371
372
|
if (props.mode === "range") {
|
|
372
373
|
const range = props.selected;
|
|
373
374
|
if (rangeSelectionStep === "from") {
|
|
@@ -397,8 +398,8 @@ function Calendar({ className, classNames, showOutsideDays = true, captionLayout
|
|
|
397
398
|
fromMonth = props.startMonth ?? new Date(nowYear - 100, 0);
|
|
398
399
|
toMonth = props.endMonth ?? new Date(nowYear + 100, 11);
|
|
399
400
|
}
|
|
400
|
-
const [currentMonth, setCurrentMonth] = React$
|
|
401
|
-
React$
|
|
401
|
+
const [currentMonth, setCurrentMonth] = React$42.useState(props.defaultMonth ?? props.month ?? new Date());
|
|
402
|
+
React$42.useEffect(() => {
|
|
402
403
|
if (props.month) setCurrentMonth(props.month);
|
|
403
404
|
}, [props.month]);
|
|
404
405
|
const addMonths = (date, months) => {
|
|
@@ -537,8 +538,8 @@ function Calendar({ className, classNames, showOutsideDays = true, captionLayout
|
|
|
537
538
|
}
|
|
538
539
|
function CalendarDayButton({ className, day, modifiers,...props }) {
|
|
539
540
|
const defaultClassNames = getDefaultClassNames();
|
|
540
|
-
const ref = React$
|
|
541
|
-
React$
|
|
541
|
+
const ref = React$42.useRef(null);
|
|
542
|
+
React$42.useEffect(() => {
|
|
542
543
|
if (modifiers.focused) ref.current?.focus();
|
|
543
544
|
}, [modifiers.focused]);
|
|
544
545
|
return /* @__PURE__ */ jsx(Button, {
|
|
@@ -557,38 +558,38 @@ function CalendarDayButton({ className, day, modifiers,...props }) {
|
|
|
557
558
|
|
|
558
559
|
//#endregion
|
|
559
560
|
//#region src/card/card.tsx
|
|
560
|
-
const Card = React$
|
|
561
|
+
const Card = React$41.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
|
|
561
562
|
ref,
|
|
562
563
|
className: cn("rounded-xl border bg-card text-card-foreground shadow", className),
|
|
563
564
|
...props
|
|
564
565
|
}));
|
|
565
566
|
Card.displayName = "Card";
|
|
566
|
-
const CardHeader = React$
|
|
567
|
+
const CardHeader = React$41.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
|
|
567
568
|
ref,
|
|
568
569
|
className: cn("flex flex-col space-y-1.5 p-6", className),
|
|
569
570
|
...props
|
|
570
571
|
}));
|
|
571
572
|
CardHeader.displayName = "CardHeader";
|
|
572
|
-
const CardTitle = React$
|
|
573
|
+
const CardTitle = React$41.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsx("h3", {
|
|
573
574
|
ref,
|
|
574
575
|
className: cn("font-semibold leading-none tracking-tight", className),
|
|
575
576
|
...props,
|
|
576
577
|
children
|
|
577
578
|
}));
|
|
578
579
|
CardTitle.displayName = "CardTitle";
|
|
579
|
-
const CardDescription = React$
|
|
580
|
+
const CardDescription = React$41.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("p", {
|
|
580
581
|
ref,
|
|
581
582
|
className: cn("text-sm text-muted-foreground", className),
|
|
582
583
|
...props
|
|
583
584
|
}));
|
|
584
585
|
CardDescription.displayName = "CardDescription";
|
|
585
|
-
const CardContent = React$
|
|
586
|
+
const CardContent = React$41.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
|
|
586
587
|
ref,
|
|
587
588
|
className: cn("p-6 pt-0", className),
|
|
588
589
|
...props
|
|
589
590
|
}));
|
|
590
591
|
CardContent.displayName = "CardContent";
|
|
591
|
-
const CardFooter = React$
|
|
592
|
+
const CardFooter = React$41.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
|
|
592
593
|
ref,
|
|
593
594
|
className: cn("flex items-center p-6 pt-0", className),
|
|
594
595
|
...props
|
|
@@ -599,7 +600,7 @@ CardFooter.displayName = "CardFooter";
|
|
|
599
600
|
//#region src/card-hover/card-hover.tsx
|
|
600
601
|
const HoverCard = HoverCardPrimitive.Root;
|
|
601
602
|
const HoverCardTrigger = HoverCardPrimitive.Trigger;
|
|
602
|
-
const HoverCardContent = React$
|
|
603
|
+
const HoverCardContent = React$40.forwardRef(({ className, align = "center", sideOffset = 4,...props }, ref) => /* @__PURE__ */ jsx(HoverCardPrimitive.Content, {
|
|
603
604
|
ref,
|
|
604
605
|
align,
|
|
605
606
|
sideOffset,
|
|
@@ -610,31 +611,31 @@ HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
|
|
|
610
611
|
|
|
611
612
|
//#endregion
|
|
612
613
|
//#region src/carousel/carousel.tsx
|
|
613
|
-
const CarouselContext = React$
|
|
614
|
+
const CarouselContext = React$39.createContext(null);
|
|
614
615
|
function useCarousel() {
|
|
615
|
-
const context = React$
|
|
616
|
+
const context = React$39.useContext(CarouselContext);
|
|
616
617
|
if (!context) throw new Error("useCarousel must be used within a <Carousel />");
|
|
617
618
|
return context;
|
|
618
619
|
}
|
|
619
|
-
const Carousel = React$
|
|
620
|
+
const Carousel = React$39.forwardRef(({ orientation = "horizontal", opts, setApi, plugins, className, children,...props }, ref) => {
|
|
620
621
|
const [carouselRef, api] = useEmblaCarousel({
|
|
621
622
|
...opts,
|
|
622
623
|
axis: orientation === "horizontal" ? "x" : "y"
|
|
623
624
|
}, plugins);
|
|
624
|
-
const [canScrollPrev, setCanScrollPrev] = React$
|
|
625
|
-
const [canScrollNext, setCanScrollNext] = React$
|
|
626
|
-
const onSelect = React$
|
|
625
|
+
const [canScrollPrev, setCanScrollPrev] = React$39.useState(false);
|
|
626
|
+
const [canScrollNext, setCanScrollNext] = React$39.useState(false);
|
|
627
|
+
const onSelect = React$39.useCallback(() => {
|
|
627
628
|
if (!api) return;
|
|
628
629
|
setCanScrollPrev(api.canScrollPrev());
|
|
629
630
|
setCanScrollNext(api.canScrollNext());
|
|
630
631
|
}, [api]);
|
|
631
|
-
const scrollPrev = React$
|
|
632
|
+
const scrollPrev = React$39.useCallback(() => {
|
|
632
633
|
api?.scrollPrev();
|
|
633
634
|
}, [api]);
|
|
634
|
-
const scrollNext = React$
|
|
635
|
+
const scrollNext = React$39.useCallback(() => {
|
|
635
636
|
api?.scrollNext();
|
|
636
637
|
}, [api]);
|
|
637
|
-
const handleKeyDown = React$
|
|
638
|
+
const handleKeyDown = React$39.useCallback((event) => {
|
|
638
639
|
if (event.key === "ArrowLeft") {
|
|
639
640
|
event.preventDefault();
|
|
640
641
|
scrollPrev();
|
|
@@ -643,11 +644,11 @@ const Carousel = React$38.forwardRef(({ orientation = "horizontal", opts, setApi
|
|
|
643
644
|
scrollNext();
|
|
644
645
|
}
|
|
645
646
|
}, [scrollPrev, scrollNext]);
|
|
646
|
-
React$
|
|
647
|
+
React$39.useEffect(() => {
|
|
647
648
|
if (!api || !setApi) return;
|
|
648
649
|
setApi(api);
|
|
649
650
|
}, [api, setApi]);
|
|
650
|
-
React$
|
|
651
|
+
React$39.useEffect(() => {
|
|
651
652
|
if (!api) return;
|
|
652
653
|
onSelect();
|
|
653
654
|
api.on("reInit", onSelect);
|
|
@@ -688,7 +689,7 @@ const Carousel = React$38.forwardRef(({ orientation = "horizontal", opts, setApi
|
|
|
688
689
|
});
|
|
689
690
|
});
|
|
690
691
|
Carousel.displayName = "Carousel";
|
|
691
|
-
const CarouselContent = React$
|
|
692
|
+
const CarouselContent = React$39.forwardRef(({ className,...props }, ref) => {
|
|
692
693
|
const { carouselRef, orientation } = useCarousel();
|
|
693
694
|
return /* @__PURE__ */ jsx("div", {
|
|
694
695
|
ref: carouselRef,
|
|
@@ -701,7 +702,7 @@ const CarouselContent = React$38.forwardRef(({ className,...props }, ref) => {
|
|
|
701
702
|
});
|
|
702
703
|
});
|
|
703
704
|
CarouselContent.displayName = "CarouselContent";
|
|
704
|
-
const CarouselItem = React$
|
|
705
|
+
const CarouselItem = React$39.forwardRef(({ className,...props }, ref) => {
|
|
705
706
|
const { orientation } = useCarousel();
|
|
706
707
|
return /* @__PURE__ */ jsx("div", {
|
|
707
708
|
ref,
|
|
@@ -711,7 +712,7 @@ const CarouselItem = React$38.forwardRef(({ className,...props }, ref) => {
|
|
|
711
712
|
});
|
|
712
713
|
});
|
|
713
714
|
CarouselItem.displayName = "CarouselItem";
|
|
714
|
-
const CarouselPrevious = React$
|
|
715
|
+
const CarouselPrevious = React$39.forwardRef(({ className, variant = "outline", size = "icon",...props }, ref) => {
|
|
715
716
|
const { orientation, scrollPrev, canScrollPrev } = useCarousel();
|
|
716
717
|
return /* @__PURE__ */ jsxs(Button, {
|
|
717
718
|
ref,
|
|
@@ -728,7 +729,7 @@ const CarouselPrevious = React$38.forwardRef(({ className, variant = "outline",
|
|
|
728
729
|
});
|
|
729
730
|
});
|
|
730
731
|
CarouselPrevious.displayName = "CarouselPrevious";
|
|
731
|
-
const CarouselNext = React$
|
|
732
|
+
const CarouselNext = React$39.forwardRef(({ className, variant = "outline", size = "icon",...props }, ref) => {
|
|
732
733
|
const { orientation, scrollNext, canScrollNext } = useCarousel();
|
|
733
734
|
return /* @__PURE__ */ jsxs(Button, {
|
|
734
735
|
ref,
|
|
@@ -912,7 +913,7 @@ function DialogDescription({ className,...props }) {
|
|
|
912
913
|
|
|
913
914
|
//#endregion
|
|
914
915
|
//#region src/command-palette/command-palette.tsx
|
|
915
|
-
const CommandPalette = React$
|
|
916
|
+
const CommandPalette = React$38.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1, {
|
|
916
917
|
ref,
|
|
917
918
|
className: cn("flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground", className),
|
|
918
919
|
...props
|
|
@@ -930,7 +931,7 @@ const CommandPaletteDialog = ({ children,...props }) => {
|
|
|
930
931
|
})
|
|
931
932
|
});
|
|
932
933
|
};
|
|
933
|
-
const CommandPaletteInput = React$
|
|
934
|
+
const CommandPaletteInput = React$38.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsxs("div", {
|
|
934
935
|
className: "flex items-center border-b px-3",
|
|
935
936
|
"data-cmdk-input-wrapper": "",
|
|
936
937
|
children: [/* @__PURE__ */ jsx(MagnifyingGlassIcon, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }), /* @__PURE__ */ jsx(Command$1.Input, {
|
|
@@ -940,31 +941,31 @@ const CommandPaletteInput = React$37.forwardRef(({ className,...props }, ref) =>
|
|
|
940
941
|
})]
|
|
941
942
|
}));
|
|
942
943
|
CommandPaletteInput.displayName = Command$1.Input.displayName;
|
|
943
|
-
const CommandPaletteList = React$
|
|
944
|
+
const CommandPaletteList = React$38.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1.List, {
|
|
944
945
|
ref,
|
|
945
946
|
className: cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className),
|
|
946
947
|
...props
|
|
947
948
|
}));
|
|
948
949
|
CommandPaletteList.displayName = Command$1.List.displayName;
|
|
949
|
-
const CommandPaletteEmpty = React$
|
|
950
|
+
const CommandPaletteEmpty = React$38.forwardRef((props, ref) => /* @__PURE__ */ jsx(Command$1.Empty, {
|
|
950
951
|
ref,
|
|
951
952
|
className: "py-6 text-center text-sm",
|
|
952
953
|
...props
|
|
953
954
|
}));
|
|
954
955
|
CommandPaletteEmpty.displayName = Command$1.Empty.displayName;
|
|
955
|
-
const CommandPaletteGroup = React$
|
|
956
|
+
const CommandPaletteGroup = React$38.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1.Group, {
|
|
956
957
|
ref,
|
|
957
958
|
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
959
|
...props
|
|
959
960
|
}));
|
|
960
961
|
CommandPaletteGroup.displayName = Command$1.Group.displayName;
|
|
961
|
-
const CommandPaletteSeparator = React$
|
|
962
|
+
const CommandPaletteSeparator = React$38.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1.Separator, {
|
|
962
963
|
ref,
|
|
963
964
|
className: cn("-mx-1 h-px bg-border", className),
|
|
964
965
|
...props
|
|
965
966
|
}));
|
|
966
967
|
CommandPaletteSeparator.displayName = Command$1.Separator.displayName;
|
|
967
|
-
const CommandPaletteItem = React$
|
|
968
|
+
const CommandPaletteItem = React$38.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1.Item, {
|
|
968
969
|
ref,
|
|
969
970
|
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
971
|
...props
|
|
@@ -1040,8 +1041,8 @@ const frameworks = [
|
|
|
1040
1041
|
}
|
|
1041
1042
|
];
|
|
1042
1043
|
function ComboboxDemo() {
|
|
1043
|
-
const [open, setOpen] = React$
|
|
1044
|
-
const [value, setValue] = React$
|
|
1044
|
+
const [open, setOpen] = React$37.useState(false);
|
|
1045
|
+
const [value, setValue] = React$37.useState("");
|
|
1045
1046
|
return /* @__PURE__ */ jsxs(Popover, {
|
|
1046
1047
|
open,
|
|
1047
1048
|
onOpenChange: setOpen,
|
|
@@ -1281,32 +1282,32 @@ const ContextMenuGroup = ContextMenuPrimitive.Group;
|
|
|
1281
1282
|
const ContextMenuPortal = ContextMenuPrimitive.Portal;
|
|
1282
1283
|
const ContextMenuSub = ContextMenuPrimitive.Sub;
|
|
1283
1284
|
const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
|
|
1284
|
-
const ContextMenuSubTrigger = React$
|
|
1285
|
+
const ContextMenuSubTrigger = React$36.forwardRef(({ className, inset, children,...props }, ref) => /* @__PURE__ */ jsxs(ContextMenuPrimitive.SubTrigger, {
|
|
1285
1286
|
ref,
|
|
1286
1287
|
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
1288
|
...props,
|
|
1288
1289
|
children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto h-4 w-4" })]
|
|
1289
1290
|
}));
|
|
1290
1291
|
ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
|
|
1291
|
-
const ContextMenuSubContent = React$
|
|
1292
|
+
const ContextMenuSubContent = React$36.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.SubContent, {
|
|
1292
1293
|
ref,
|
|
1293
1294
|
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
1295
|
...props
|
|
1295
1296
|
}));
|
|
1296
1297
|
ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
|
|
1297
|
-
const ContextMenuContent = React$
|
|
1298
|
+
const ContextMenuContent = React$36.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(ContextMenuPrimitive.Content, {
|
|
1298
1299
|
ref,
|
|
1299
1300
|
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
1301
|
...props
|
|
1301
1302
|
}) }));
|
|
1302
1303
|
ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
|
|
1303
|
-
const ContextMenuItem = React$
|
|
1304
|
+
const ContextMenuItem = React$36.forwardRef(({ className, inset,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Item, {
|
|
1304
1305
|
ref,
|
|
1305
1306
|
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
1307
|
...props
|
|
1307
1308
|
}));
|
|
1308
1309
|
ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
|
|
1309
|
-
const ContextMenuCheckboxItem = React$
|
|
1310
|
+
const ContextMenuCheckboxItem = React$36.forwardRef(({ className, children, checked,...props }, ref) => /* @__PURE__ */ jsxs(ContextMenuPrimitive.CheckboxItem, {
|
|
1310
1311
|
ref,
|
|
1311
1312
|
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
1313
|
checked,
|
|
@@ -1317,7 +1318,7 @@ const ContextMenuCheckboxItem = React$35.forwardRef(({ className, children, chec
|
|
|
1317
1318
|
}), children]
|
|
1318
1319
|
}));
|
|
1319
1320
|
ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
|
|
1320
|
-
const ContextMenuRadioItem = React$
|
|
1321
|
+
const ContextMenuRadioItem = React$36.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsxs(ContextMenuPrimitive.RadioItem, {
|
|
1321
1322
|
ref,
|
|
1322
1323
|
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
1324
|
...props,
|
|
@@ -1327,13 +1328,13 @@ const ContextMenuRadioItem = React$35.forwardRef(({ className, children,...props
|
|
|
1327
1328
|
}), children]
|
|
1328
1329
|
}));
|
|
1329
1330
|
ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
|
|
1330
|
-
const ContextMenuLabel = React$
|
|
1331
|
+
const ContextMenuLabel = React$36.forwardRef(({ className, inset,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Label, {
|
|
1331
1332
|
ref,
|
|
1332
1333
|
className: cn("px-2 py-1.5 text-sm font-semibold text-foreground", inset && "pl-8", className),
|
|
1333
1334
|
...props
|
|
1334
1335
|
}));
|
|
1335
1336
|
ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
|
|
1336
|
-
const ContextMenuSeparator = React$
|
|
1337
|
+
const ContextMenuSeparator = React$36.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Separator, {
|
|
1337
1338
|
ref,
|
|
1338
1339
|
className: cn("-mx-1 my-1 h-px bg-border", className),
|
|
1339
1340
|
...props
|
|
@@ -1478,7 +1479,7 @@ function DropdownMenuSubContent({ className,...props }) {
|
|
|
1478
1479
|
const TooltipProvider = TooltipPrimitive.Provider;
|
|
1479
1480
|
const Tooltip = TooltipPrimitive.Root;
|
|
1480
1481
|
const TooltipTrigger = TooltipPrimitive.Trigger;
|
|
1481
|
-
const TooltipContent = React$
|
|
1482
|
+
const TooltipContent = React$35.forwardRef(({ className, sideOffset = 4,...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Content, {
|
|
1482
1483
|
ref,
|
|
1483
1484
|
sideOffset,
|
|
1484
1485
|
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 +1986,7 @@ function getColumnVariant(variant) {
|
|
|
1985
1986
|
}
|
|
1986
1987
|
}
|
|
1987
1988
|
function DataGridColumnHeader({ header, table, className, onPointerDown,...props }) {
|
|
1988
|
-
const [open, setOpen] = React$
|
|
1989
|
+
const [open, setOpen] = React$34.useState(false);
|
|
1989
1990
|
const column = header.column;
|
|
1990
1991
|
const label = column.columnDef.meta?.label ? column.columnDef.meta.label : typeof column.columnDef.header === "string" ? column.columnDef.header : column.id;
|
|
1991
1992
|
const isAnyColumnResizing = table.getState().columnSizingInfo.isResizingColumn;
|
|
@@ -1994,7 +1995,7 @@ function DataGridColumnHeader({ header, table, className, onPointerDown,...props
|
|
|
1994
1995
|
const pinnedPosition = column.getIsPinned();
|
|
1995
1996
|
const isPinnedLeft = pinnedPosition === "left";
|
|
1996
1997
|
const isPinnedRight = pinnedPosition === "right";
|
|
1997
|
-
const onSortingChange = React$
|
|
1998
|
+
const onSortingChange = React$34.useCallback((direction) => {
|
|
1998
1999
|
table.setSorting((prev) => {
|
|
1999
2000
|
const existingSortIndex = prev.findIndex((sort) => sort.id === column.id);
|
|
2000
2001
|
const newSort = {
|
|
@@ -2008,19 +2009,19 @@ function DataGridColumnHeader({ header, table, className, onPointerDown,...props
|
|
|
2008
2009
|
} else return [...prev, newSort];
|
|
2009
2010
|
});
|
|
2010
2011
|
}, [column.id, table]);
|
|
2011
|
-
const onSortRemove = React$
|
|
2012
|
+
const onSortRemove = React$34.useCallback(() => {
|
|
2012
2013
|
table.setSorting((prev) => prev.filter((sort) => sort.id !== column.id));
|
|
2013
2014
|
}, [column.id, table]);
|
|
2014
|
-
const onLeftPin = React$
|
|
2015
|
+
const onLeftPin = React$34.useCallback(() => {
|
|
2015
2016
|
column.pin("left");
|
|
2016
2017
|
}, [column]);
|
|
2017
|
-
const onRightPin = React$
|
|
2018
|
+
const onRightPin = React$34.useCallback(() => {
|
|
2018
2019
|
column.pin("right");
|
|
2019
2020
|
}, [column]);
|
|
2020
|
-
const onUnpin = React$
|
|
2021
|
+
const onUnpin = React$34.useCallback(() => {
|
|
2021
2022
|
column.pin(false);
|
|
2022
2023
|
}, [column]);
|
|
2023
|
-
const onTriggerPointerDown = React$
|
|
2024
|
+
const onTriggerPointerDown = React$34.useCallback((event) => {
|
|
2024
2025
|
onPointerDown?.(event);
|
|
2025
2026
|
if (event.defaultPrevented) return;
|
|
2026
2027
|
if (event.button !== 0) return;
|
|
@@ -2132,7 +2133,7 @@ function DataGridColumnHeader({ header, table, className, onPointerDown,...props
|
|
|
2132
2133
|
})
|
|
2133
2134
|
] });
|
|
2134
2135
|
}
|
|
2135
|
-
const DataGridColumnResizer = React$
|
|
2136
|
+
const DataGridColumnResizer = React$34.memo(DataGridColumnResizerImpl, (prev, next) => {
|
|
2136
2137
|
const prevColumn = prev.header.column;
|
|
2137
2138
|
const nextColumn = next.header.column;
|
|
2138
2139
|
if (prevColumn.getIsResizing() !== nextColumn.getIsResizing() || prevColumn.getSize() !== nextColumn.getSize()) return false;
|
|
@@ -2141,7 +2142,7 @@ const DataGridColumnResizer = React$33.memo(DataGridColumnResizerImpl, (prev, ne
|
|
|
2141
2142
|
});
|
|
2142
2143
|
function DataGridColumnResizerImpl({ header, table, label }) {
|
|
2143
2144
|
const defaultColumnDef = table._getDefaultColumnDef();
|
|
2144
|
-
const onDoubleClick = React$
|
|
2145
|
+
const onDoubleClick = React$34.useCallback(() => {
|
|
2145
2146
|
header.column.resetSize();
|
|
2146
2147
|
}, [header.column]);
|
|
2147
2148
|
return /* @__PURE__ */ jsx("div", {
|
|
@@ -2250,7 +2251,7 @@ function DataGridContextMenu({ table }) {
|
|
|
2250
2251
|
onRowsDelete
|
|
2251
2252
|
});
|
|
2252
2253
|
}
|
|
2253
|
-
const ContextMenu$1 = React$
|
|
2254
|
+
const ContextMenu$1 = React$33.memo(ContextMenuImpl, (prev, next) => {
|
|
2254
2255
|
if (prev.contextMenu.open !== next.contextMenu.open) return false;
|
|
2255
2256
|
if (!next.contextMenu.open) return true;
|
|
2256
2257
|
if (prev.contextMenu.x !== next.contextMenu.x) return false;
|
|
@@ -2261,7 +2262,7 @@ const ContextMenu$1 = React$32.memo(ContextMenuImpl, (prev, next) => {
|
|
|
2261
2262
|
return true;
|
|
2262
2263
|
});
|
|
2263
2264
|
function ContextMenuImpl({ table, dataGridRef, contextMenu, onContextMenuOpenChange, selectionState, onDataUpdate, onRowsDelete }) {
|
|
2264
|
-
const triggerStyle = React$
|
|
2265
|
+
const triggerStyle = React$33.useMemo(() => ({
|
|
2265
2266
|
position: "fixed",
|
|
2266
2267
|
left: `${contextMenu.x}px`,
|
|
2267
2268
|
top: `${contextMenu.y}px`,
|
|
@@ -2274,11 +2275,11 @@ function ContextMenuImpl({ table, dataGridRef, contextMenu, onContextMenuOpenCha
|
|
|
2274
2275
|
pointerEvents: "none",
|
|
2275
2276
|
opacity: 0
|
|
2276
2277
|
}), [contextMenu.x, contextMenu.y]);
|
|
2277
|
-
const onCloseAutoFocus = React$
|
|
2278
|
+
const onCloseAutoFocus = React$33.useCallback((event) => {
|
|
2278
2279
|
event.preventDefault();
|
|
2279
2280
|
dataGridRef?.current?.focus();
|
|
2280
2281
|
}, [dataGridRef]);
|
|
2281
|
-
const onCopy = React$
|
|
2282
|
+
const onCopy = React$33.useCallback(async () => {
|
|
2282
2283
|
if (!selectionState?.selectedCells || selectionState.selectedCells.size === 0) return;
|
|
2283
2284
|
const rows = table.getRowModel().rows;
|
|
2284
2285
|
const columnIds = [];
|
|
@@ -2317,7 +2318,7 @@ function ContextMenuImpl({ table, dataGridRef, contextMenu, onContextMenuOpenCha
|
|
|
2317
2318
|
await navigator.clipboard.writeText(tsvData);
|
|
2318
2319
|
toast$1.success(`${selectionState.selectedCells.size} cell${selectionState.selectedCells.size !== 1 ? "s" : ""} copied`);
|
|
2319
2320
|
}, [table, selectionState]);
|
|
2320
|
-
const canClear = React$
|
|
2321
|
+
const canClear = React$33.useMemo(() => {
|
|
2321
2322
|
if (!selectionState?.selectedCells || selectionState.selectedCells.size === 0) return false;
|
|
2322
2323
|
const visibleCols = table.getVisibleLeafColumns();
|
|
2323
2324
|
const rows = table.getRowModel().rows;
|
|
@@ -2334,7 +2335,7 @@ function ContextMenuImpl({ table, dataGridRef, contextMenu, onContextMenuOpenCha
|
|
|
2334
2335
|
}
|
|
2335
2336
|
return true;
|
|
2336
2337
|
}, [selectionState, table]);
|
|
2337
|
-
const onClear = React$
|
|
2338
|
+
const onClear = React$33.useCallback(() => {
|
|
2338
2339
|
if (!selectionState?.selectedCells || selectionState.selectedCells.size === 0) return;
|
|
2339
2340
|
if (!canClear) return;
|
|
2340
2341
|
const updates = [];
|
|
@@ -2353,7 +2354,7 @@ function ContextMenuImpl({ table, dataGridRef, contextMenu, onContextMenuOpenCha
|
|
|
2353
2354
|
selectionState,
|
|
2354
2355
|
canClear
|
|
2355
2356
|
]);
|
|
2356
|
-
const onDelete = React$
|
|
2357
|
+
const onDelete = React$33.useCallback(async () => {
|
|
2357
2358
|
if (!selectionState?.selectedCells || selectionState.selectedCells.size === 0) return;
|
|
2358
2359
|
const rowIndices = new Set();
|
|
2359
2360
|
for (const cellKey of selectionState.selectedCells) {
|
|
@@ -2430,12 +2431,12 @@ function composeRefs(...refs) {
|
|
|
2430
2431
|
* Accepts callback refs and RefObject(s)
|
|
2431
2432
|
*/
|
|
2432
2433
|
function useComposedRefs(...refs) {
|
|
2433
|
-
return React$
|
|
2434
|
+
return React$32.useCallback(composeRefs(...refs), refs);
|
|
2434
2435
|
}
|
|
2435
2436
|
|
|
2436
2437
|
//#endregion
|
|
2437
2438
|
//#region src/data-grid/data-grid-row.tsx
|
|
2438
|
-
const DataGridRow = React$
|
|
2439
|
+
const DataGridRow = React$31.memo(DataGridRowImpl, (prev, next) => {
|
|
2439
2440
|
if (prev.row.id !== next.row.id) return false;
|
|
2440
2441
|
if (prev.row.original !== next.row.original) return false;
|
|
2441
2442
|
const prevRowIndex = prev.virtualRowIndex;
|
|
@@ -2454,9 +2455,10 @@ const DataGridRow = React$30.memo(DataGridRowImpl, (prev, next) => {
|
|
|
2454
2455
|
}
|
|
2455
2456
|
if (prev.selectionSize !== next.selectionSize) return false;
|
|
2456
2457
|
if (prev.visibleColumnIds !== next.visibleColumnIds) return false;
|
|
2458
|
+
if (prev.isHighlighted !== next.isHighlighted) return false;
|
|
2457
2459
|
return true;
|
|
2458
2460
|
});
|
|
2459
|
-
function DataGridRowImpl({ row, virtualRowIndex, virtualStart, rowVirtualizer, rowMapRef, rowHeight, focusedCell, editingCell: _editingCell, selectionSize: _selectionSize, visibleColumnIds: _visibleColumnIds, ref, className,...props }) {
|
|
2461
|
+
function DataGridRowImpl({ row, virtualRowIndex, virtualStart, rowVirtualizer, rowMapRef, rowHeight, focusedCell, editingCell: _editingCell, selectionSize: _selectionSize, visibleColumnIds: _visibleColumnIds, isHighlighted = false, onRowClick, ref, className,...props }) {
|
|
2460
2462
|
const rowRef = useComposedRefs(ref, (node) => {
|
|
2461
2463
|
if (node && typeof virtualRowIndex !== "undefined") {
|
|
2462
2464
|
rowVirtualizer.measureElement(node);
|
|
@@ -2464,19 +2466,26 @@ function DataGridRowImpl({ row, virtualRowIndex, virtualStart, rowVirtualizer, r
|
|
|
2464
2466
|
}
|
|
2465
2467
|
});
|
|
2466
2468
|
const isRowSelected = row.getIsSelected();
|
|
2469
|
+
const handleRowClick = React$31.useCallback((event) => {
|
|
2470
|
+
const target = event.target;
|
|
2471
|
+
if (target.closest("input, button, [role=\"checkbox\"]")) return;
|
|
2472
|
+
if (event.detail === 1) onRowClick?.(virtualRowIndex);
|
|
2473
|
+
}, [onRowClick, virtualRowIndex]);
|
|
2467
2474
|
return /* @__PURE__ */ jsx("div", {
|
|
2468
2475
|
role: "row",
|
|
2469
2476
|
"aria-rowindex": virtualRowIndex + 2,
|
|
2470
2477
|
"aria-selected": isRowSelected,
|
|
2471
2478
|
"data-index": virtualRowIndex,
|
|
2472
2479
|
"data-slot": "grid-row",
|
|
2480
|
+
"data-highlighted": isHighlighted || void 0,
|
|
2473
2481
|
ref: rowRef,
|
|
2474
2482
|
tabIndex: -1,
|
|
2475
|
-
className: cn("absolute flex w-full border-b h-[calc(var(--data-grid-line-height)*(var(--line-count))+12px)]", className),
|
|
2483
|
+
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
2484
|
style: {
|
|
2477
2485
|
"--line-count": `${getLineCount(rowHeight)}`,
|
|
2478
2486
|
transform: `translateY(${virtualStart}px)`
|
|
2479
2487
|
},
|
|
2488
|
+
onClick: onRowClick ? handleRowClick : void 0,
|
|
2480
2489
|
...props,
|
|
2481
2490
|
children: row.getVisibleCells().map((cell, colIndex) => {
|
|
2482
2491
|
const isCellFocused = focusedCell?.rowIndex === virtualRowIndex && focusedCell?.columnId === cell.column.id;
|
|
@@ -2507,20 +2516,20 @@ function DataGridRowImpl({ row, virtualRowIndex, virtualStart, rowVirtualizer, r
|
|
|
2507
2516
|
* prop or avoid re-executing effects when passed as a dependency
|
|
2508
2517
|
*/
|
|
2509
2518
|
function useCallbackRef(callback) {
|
|
2510
|
-
const callbackRef = React$
|
|
2511
|
-
React$
|
|
2519
|
+
const callbackRef = React$30.useRef(callback);
|
|
2520
|
+
React$30.useEffect(() => {
|
|
2512
2521
|
callbackRef.current = callback;
|
|
2513
2522
|
});
|
|
2514
|
-
return React$
|
|
2523
|
+
return React$30.useMemo(() => (...args) => callbackRef.current?.(...args), []);
|
|
2515
2524
|
}
|
|
2516
2525
|
|
|
2517
2526
|
//#endregion
|
|
2518
2527
|
//#region src/hooks/use-debounced-callback.ts
|
|
2519
2528
|
function useDebouncedCallback(callback, delay) {
|
|
2520
2529
|
const handleCallback = useCallbackRef(callback);
|
|
2521
|
-
const debounceTimerRef = React$
|
|
2522
|
-
React$
|
|
2523
|
-
const setValue = React$
|
|
2530
|
+
const debounceTimerRef = React$29.useRef(0);
|
|
2531
|
+
React$29.useEffect(() => () => window.clearTimeout(debounceTimerRef.current), []);
|
|
2532
|
+
const setValue = React$29.useCallback((...args) => {
|
|
2524
2533
|
window.clearTimeout(debounceTimerRef.current);
|
|
2525
2534
|
debounceTimerRef.current = window.setTimeout(() => handleCallback(...args), delay);
|
|
2526
2535
|
}, [handleCallback, delay]);
|
|
@@ -2529,10 +2538,14 @@ function useDebouncedCallback(callback, delay) {
|
|
|
2529
2538
|
|
|
2530
2539
|
//#endregion
|
|
2531
2540
|
//#region src/input/input.tsx
|
|
2541
|
+
/**
|
|
2542
|
+
* Input variants for styling the input element.
|
|
2543
|
+
* NOTE: When modifying variants, also update numberInputWrapperVariants in number-input.tsx
|
|
2544
|
+
*/
|
|
2532
2545
|
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
2546
|
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"
|
|
2547
|
+
default: "min-h-9 md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
|
|
2548
|
+
simple: "min-h-8"
|
|
2536
2549
|
} },
|
|
2537
2550
|
defaultVariants: { variant: "default" }
|
|
2538
2551
|
});
|
|
@@ -2555,7 +2568,7 @@ function Input({ className, type, variant, __e2e_test_id__, onEnter,...props })
|
|
|
2555
2568
|
|
|
2556
2569
|
//#endregion
|
|
2557
2570
|
//#region src/data-grid/data-grid-search.tsx
|
|
2558
|
-
const DataGridSearch = React$
|
|
2571
|
+
const DataGridSearch = React$28.memo(DataGridSearchImpl, (prev, next) => {
|
|
2559
2572
|
if (prev.searchOpen !== next.searchOpen) return false;
|
|
2560
2573
|
if (!next.searchOpen) return true;
|
|
2561
2574
|
if (prev.searchQuery !== next.searchQuery || prev.matchIndex !== next.matchIndex) return false;
|
|
@@ -2569,13 +2582,13 @@ const DataGridSearch = React$27.memo(DataGridSearchImpl, (prev, next) => {
|
|
|
2569
2582
|
return true;
|
|
2570
2583
|
});
|
|
2571
2584
|
function DataGridSearchImpl({ searchMatches, matchIndex, searchOpen, onSearchOpenChange, searchQuery, onSearchQueryChange, onSearch, onNavigateToNextMatch, onNavigateToPrevMatch }) {
|
|
2572
|
-
const inputRef = React$
|
|
2573
|
-
React$
|
|
2585
|
+
const inputRef = React$28.useRef(null);
|
|
2586
|
+
React$28.useEffect(() => {
|
|
2574
2587
|
if (searchOpen) requestAnimationFrame(() => {
|
|
2575
2588
|
inputRef.current?.focus();
|
|
2576
2589
|
});
|
|
2577
2590
|
}, [searchOpen]);
|
|
2578
|
-
React$
|
|
2591
|
+
React$28.useEffect(() => {
|
|
2579
2592
|
if (!searchOpen) return;
|
|
2580
2593
|
function onEscape(event) {
|
|
2581
2594
|
if (event.key === "Escape") {
|
|
@@ -2586,7 +2599,7 @@ function DataGridSearchImpl({ searchMatches, matchIndex, searchOpen, onSearchOpe
|
|
|
2586
2599
|
document.addEventListener("keydown", onEscape);
|
|
2587
2600
|
return () => document.removeEventListener("keydown", onEscape);
|
|
2588
2601
|
}, [searchOpen, onSearchOpenChange]);
|
|
2589
|
-
const onKeyDown = React$
|
|
2602
|
+
const onKeyDown = React$28.useCallback((event) => {
|
|
2590
2603
|
event.stopPropagation();
|
|
2591
2604
|
if (event.key === "Enter") {
|
|
2592
2605
|
event.preventDefault();
|
|
@@ -2597,20 +2610,20 @@ function DataGridSearchImpl({ searchMatches, matchIndex, searchOpen, onSearchOpe
|
|
|
2597
2610
|
const debouncedSearch = useDebouncedCallback((query) => {
|
|
2598
2611
|
onSearch(query);
|
|
2599
2612
|
}, 150);
|
|
2600
|
-
const onChange = React$
|
|
2613
|
+
const onChange = React$28.useCallback((event) => {
|
|
2601
2614
|
const value = event.target.value;
|
|
2602
2615
|
onSearchQueryChange(value);
|
|
2603
2616
|
debouncedSearch(value);
|
|
2604
2617
|
}, [onSearchQueryChange, debouncedSearch]);
|
|
2605
|
-
const onTriggerPointerDown = React$
|
|
2618
|
+
const onTriggerPointerDown = React$28.useCallback((event) => {
|
|
2606
2619
|
const target = event.target;
|
|
2607
2620
|
if (!(target instanceof HTMLElement)) return;
|
|
2608
2621
|
if (target.hasPointerCapture(event.pointerId)) target.releasePointerCapture(event.pointerId);
|
|
2609
2622
|
if (event.button === 0 && event.ctrlKey === false && event.pointerType === "mouse" && !(event.target instanceof HTMLInputElement)) event.preventDefault();
|
|
2610
2623
|
}, []);
|
|
2611
|
-
const onPrevMatchPointerDown = React$
|
|
2612
|
-
const onNextMatchPointerDown = React$
|
|
2613
|
-
const onClose = React$
|
|
2624
|
+
const onPrevMatchPointerDown = React$28.useCallback((event) => onTriggerPointerDown(event), [onTriggerPointerDown]);
|
|
2625
|
+
const onNextMatchPointerDown = React$28.useCallback((event) => onTriggerPointerDown(event), [onTriggerPointerDown]);
|
|
2626
|
+
const onClose = React$28.useCallback(() => {
|
|
2614
2627
|
onSearchOpenChange(false);
|
|
2615
2628
|
}, [onSearchOpenChange]);
|
|
2616
2629
|
if (!searchOpen) return null;
|
|
@@ -2685,16 +2698,18 @@ function DataGrid({ dataGridRef, headerRef, rowMapRef, footerRef, table, rowVirt
|
|
|
2685
2698
|
const focusedCell = meta?.focusedCell ?? null;
|
|
2686
2699
|
const editingCell = meta?.editingCell ?? null;
|
|
2687
2700
|
const selectionSize = meta?.selectionState?.selectedCells?.size ?? 0;
|
|
2701
|
+
const highlightedRowIndex = meta?.highlightedRowIndex ?? -1;
|
|
2702
|
+
const onRowClick = meta?.onRowClick;
|
|
2688
2703
|
const visibleColumnIds = table.getVisibleLeafColumns().map((c) => c.id).join(",");
|
|
2689
|
-
const prevVisibleColumnIdsRef = React$
|
|
2704
|
+
const prevVisibleColumnIdsRef = React$27.useRef(visibleColumnIds);
|
|
2690
2705
|
if (prevVisibleColumnIdsRef.current !== visibleColumnIds) {
|
|
2691
2706
|
rowMapRef.current.clear();
|
|
2692
2707
|
prevVisibleColumnIdsRef.current = visibleColumnIds;
|
|
2693
2708
|
}
|
|
2694
|
-
const onGridContextMenu = React$
|
|
2709
|
+
const onGridContextMenu = React$27.useCallback((event) => {
|
|
2695
2710
|
event.preventDefault();
|
|
2696
2711
|
}, []);
|
|
2697
|
-
const onAddRowKeyDown = React$
|
|
2712
|
+
const onAddRowKeyDown = React$27.useCallback(async (event) => {
|
|
2698
2713
|
if (!onRowAdd) return;
|
|
2699
2714
|
if (event.key === "Enter" || event.key === "") {
|
|
2700
2715
|
event.preventDefault();
|
|
@@ -2796,7 +2811,9 @@ function DataGrid({ dataGridRef, headerRef, rowMapRef, footerRef, table, rowVirt
|
|
|
2796
2811
|
focusedCell,
|
|
2797
2812
|
editingCell,
|
|
2798
2813
|
selectionSize,
|
|
2799
|
-
visibleColumnIds
|
|
2814
|
+
visibleColumnIds,
|
|
2815
|
+
isHighlighted: highlightedRowIndex === virtualItem.index,
|
|
2816
|
+
onRowClick
|
|
2800
2817
|
}, row.id);
|
|
2801
2818
|
})
|
|
2802
2819
|
}),
|
|
@@ -2844,37 +2861,33 @@ function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFoc
|
|
|
2844
2861
|
const rowOriginal = cell?.row?.original ?? {};
|
|
2845
2862
|
const colCellMeta = cell?.column?.columnDef?.meta;
|
|
2846
2863
|
const align = colCellMeta?.align ?? "left";
|
|
2847
|
-
const editableResolver = React$
|
|
2864
|
+
const editableResolver = React$26.useMemo(() => {
|
|
2848
2865
|
const v = colCellMeta?.editable;
|
|
2849
2866
|
if (v === void 0) return () => true;
|
|
2850
2867
|
return typeof v === "function" ? v : () => Boolean(v);
|
|
2851
2868
|
}, [colCellMeta?.editable]);
|
|
2852
2869
|
const isEditable = editableResolver(rowOriginal);
|
|
2853
|
-
const classNameResolver = React$
|
|
2870
|
+
const classNameResolver = React$26.useMemo(() => {
|
|
2854
2871
|
const v = colCellMeta?.className;
|
|
2855
2872
|
return typeof v === "function" ? v : () => v;
|
|
2856
2873
|
}, [colCellMeta?.className]);
|
|
2857
2874
|
const colCellClassName = classNameResolver(rowOriginal);
|
|
2858
2875
|
const isSearchMatch = meta?.getIsSearchMatch?.(rowIndex, columnId) ?? false;
|
|
2859
2876
|
const isActiveSearchMatch = meta?.getIsActiveSearchMatch?.(rowIndex, columnId) ?? false;
|
|
2860
|
-
const onClick = React$
|
|
2877
|
+
const onClick = React$26.useCallback((event) => {
|
|
2861
2878
|
if (!isEditing) {
|
|
2862
2879
|
event.preventDefault();
|
|
2863
2880
|
onClickProp?.(event);
|
|
2864
|
-
|
|
2865
|
-
if (isEditable) meta?.onCellEditingStart?.(rowIndex, columnId);
|
|
2866
|
-
} else meta?.onCellClick?.(rowIndex, columnId, event);
|
|
2881
|
+
meta?.onCellClick?.(rowIndex, columnId, event);
|
|
2867
2882
|
}
|
|
2868
2883
|
}, [
|
|
2869
2884
|
meta,
|
|
2870
2885
|
rowIndex,
|
|
2871
2886
|
columnId,
|
|
2872
2887
|
isEditing,
|
|
2873
|
-
|
|
2874
|
-
onClickProp,
|
|
2875
|
-
isEditable
|
|
2888
|
+
onClickProp
|
|
2876
2889
|
]);
|
|
2877
|
-
const onContextMenu = React$
|
|
2890
|
+
const onContextMenu = React$26.useCallback((event) => {
|
|
2878
2891
|
if (!isEditing) meta?.onCellContextMenu?.(rowIndex, columnId, event);
|
|
2879
2892
|
}, [
|
|
2880
2893
|
meta,
|
|
@@ -2882,7 +2895,7 @@ function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFoc
|
|
|
2882
2895
|
columnId,
|
|
2883
2896
|
isEditing
|
|
2884
2897
|
]);
|
|
2885
|
-
const onMouseDown = React$
|
|
2898
|
+
const onMouseDown = React$26.useCallback((event) => {
|
|
2886
2899
|
if (!isEditing) meta?.onCellMouseDown?.(rowIndex, columnId, event);
|
|
2887
2900
|
}, [
|
|
2888
2901
|
meta,
|
|
@@ -2890,7 +2903,7 @@ function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFoc
|
|
|
2890
2903
|
columnId,
|
|
2891
2904
|
isEditing
|
|
2892
2905
|
]);
|
|
2893
|
-
const onMouseEnter = React$
|
|
2906
|
+
const onMouseEnter = React$26.useCallback((event) => {
|
|
2894
2907
|
if (!isEditing) meta?.onCellMouseEnter?.(rowIndex, columnId, event);
|
|
2895
2908
|
}, [
|
|
2896
2909
|
meta,
|
|
@@ -2898,10 +2911,10 @@ function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFoc
|
|
|
2898
2911
|
columnId,
|
|
2899
2912
|
isEditing
|
|
2900
2913
|
]);
|
|
2901
|
-
const onMouseUp = React$
|
|
2914
|
+
const onMouseUp = React$26.useCallback(() => {
|
|
2902
2915
|
if (!isEditing) meta?.onCellMouseUp?.();
|
|
2903
2916
|
}, [meta, isEditing]);
|
|
2904
|
-
const onDoubleClick = React$
|
|
2917
|
+
const onDoubleClick = React$26.useCallback((event) => {
|
|
2905
2918
|
if (!isEditing) {
|
|
2906
2919
|
event.preventDefault();
|
|
2907
2920
|
if (isEditable) meta?.onCellDoubleClick?.(rowIndex, columnId);
|
|
@@ -2913,12 +2926,12 @@ function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFoc
|
|
|
2913
2926
|
isEditing,
|
|
2914
2927
|
isEditable
|
|
2915
2928
|
]);
|
|
2916
|
-
const onKeyDown = React$
|
|
2929
|
+
const onKeyDown = React$26.useCallback((event) => {
|
|
2917
2930
|
onKeyDownProp?.(event);
|
|
2918
2931
|
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;
|
|
2932
|
+
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
2933
|
if (isFocused && !isEditing) {
|
|
2921
|
-
if (event.key === "F2"
|
|
2934
|
+
if (event.key === "F2") {
|
|
2922
2935
|
event.preventDefault();
|
|
2923
2936
|
event.stopPropagation();
|
|
2924
2937
|
if (isEditable) meta?.onCellEditingStart?.(rowIndex, columnId);
|
|
@@ -2987,17 +3000,17 @@ function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFoc
|
|
|
2987
3000
|
//#region src/data-grid/cell-variants/checkbox-cell.tsx
|
|
2988
3001
|
function CheckboxCell({ cell, table, rowIndex, columnId, isFocused, isSelected }) {
|
|
2989
3002
|
const initialValue = cell.getValue();
|
|
2990
|
-
const [value, setValue] = React$
|
|
2991
|
-
const containerRef = React$
|
|
3003
|
+
const [value, setValue] = React$25.useState(Boolean(initialValue));
|
|
3004
|
+
const containerRef = React$25.useRef(null);
|
|
2992
3005
|
const meta = table.options.meta;
|
|
2993
3006
|
const colMeta = cell.column.columnDef.meta;
|
|
2994
|
-
const editableResolver = React$
|
|
3007
|
+
const editableResolver = React$25.useMemo(() => {
|
|
2995
3008
|
const v = colMeta?.editable;
|
|
2996
3009
|
if (v === void 0) return () => true;
|
|
2997
3010
|
return typeof v === "function" ? v : () => Boolean(v);
|
|
2998
3011
|
}, [colMeta?.editable]);
|
|
2999
3012
|
const isEditable = editableResolver(cell.row.original);
|
|
3000
|
-
const onCheckedChange = React$
|
|
3013
|
+
const onCheckedChange = React$25.useCallback((checked) => {
|
|
3001
3014
|
setValue(checked);
|
|
3002
3015
|
meta?.onDataUpdate?.({
|
|
3003
3016
|
rowIndex,
|
|
@@ -3009,7 +3022,7 @@ function CheckboxCell({ cell, table, rowIndex, columnId, isFocused, isSelected }
|
|
|
3009
3022
|
rowIndex,
|
|
3010
3023
|
columnId
|
|
3011
3024
|
]);
|
|
3012
|
-
const onWrapperKeyDown = React$
|
|
3025
|
+
const onWrapperKeyDown = React$25.useCallback((event) => {
|
|
3013
3026
|
if (!isEditable) return;
|
|
3014
3027
|
if (isFocused && (event.key === "" || event.key === "Enter")) {
|
|
3015
3028
|
event.preventDefault();
|
|
@@ -3022,17 +3035,17 @@ function CheckboxCell({ cell, table, rowIndex, columnId, isFocused, isSelected }
|
|
|
3022
3035
|
onCheckedChange,
|
|
3023
3036
|
isEditable
|
|
3024
3037
|
]);
|
|
3025
|
-
React$
|
|
3038
|
+
React$25.useEffect(() => {
|
|
3026
3039
|
setValue(Boolean(initialValue));
|
|
3027
3040
|
}, [initialValue]);
|
|
3028
|
-
React$
|
|
3041
|
+
React$25.useEffect(() => {
|
|
3029
3042
|
if (isFocused && !meta?.searchOpen && !meta?.isScrolling && containerRef.current) containerRef.current.focus();
|
|
3030
3043
|
}, [
|
|
3031
3044
|
isFocused,
|
|
3032
3045
|
meta?.searchOpen,
|
|
3033
3046
|
meta?.isScrolling
|
|
3034
3047
|
]);
|
|
3035
|
-
const onWrapperClick = React$
|
|
3048
|
+
const onWrapperClick = React$25.useCallback((event) => {
|
|
3036
3049
|
if (!isEditable) return;
|
|
3037
3050
|
if (isFocused) {
|
|
3038
3051
|
event.preventDefault();
|
|
@@ -3045,13 +3058,13 @@ function CheckboxCell({ cell, table, rowIndex, columnId, isFocused, isSelected }
|
|
|
3045
3058
|
onCheckedChange,
|
|
3046
3059
|
isEditable
|
|
3047
3060
|
]);
|
|
3048
|
-
const onCheckboxClick = React$
|
|
3061
|
+
const onCheckboxClick = React$25.useCallback((event) => {
|
|
3049
3062
|
event.stopPropagation();
|
|
3050
3063
|
}, []);
|
|
3051
|
-
const onCheckboxMouseDown = React$
|
|
3064
|
+
const onCheckboxMouseDown = React$25.useCallback((event) => {
|
|
3052
3065
|
event.stopPropagation();
|
|
3053
3066
|
}, []);
|
|
3054
|
-
const onCheckboxDoubleClick = React$
|
|
3067
|
+
const onCheckboxDoubleClick = React$25.useCallback((event) => {
|
|
3055
3068
|
event.stopPropagation();
|
|
3056
3069
|
}, []);
|
|
3057
3070
|
return /* @__PURE__ */ jsx(DataGridCellWrapper, {
|
|
@@ -3106,20 +3119,20 @@ function formatDateToISOString(date) {
|
|
|
3106
3119
|
}
|
|
3107
3120
|
function DateCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSelected }) {
|
|
3108
3121
|
const initialValue = cell.getValue();
|
|
3109
|
-
const [value, setValue] = React$
|
|
3110
|
-
const [open, setOpen] = React$
|
|
3111
|
-
const containerRef = React$
|
|
3112
|
-
const hasStoppedRef = React$
|
|
3122
|
+
const [value, setValue] = React$24.useState(parseToLocalDate(initialValue));
|
|
3123
|
+
const [open, setOpen] = React$24.useState(false);
|
|
3124
|
+
const containerRef = React$24.useRef(null);
|
|
3125
|
+
const hasStoppedRef = React$24.useRef(false);
|
|
3113
3126
|
const meta = table.options.meta;
|
|
3114
|
-
const prevInitialValueRef = React$
|
|
3127
|
+
const prevInitialValueRef = React$24.useRef(initialValue);
|
|
3115
3128
|
if (initialValue !== prevInitialValueRef.current) {
|
|
3116
3129
|
prevInitialValueRef.current = initialValue;
|
|
3117
3130
|
setValue(parseToLocalDate(initialValue));
|
|
3118
3131
|
}
|
|
3119
|
-
React$
|
|
3132
|
+
React$24.useEffect(() => {
|
|
3120
3133
|
if (isEditing) hasStoppedRef.current = false;
|
|
3121
3134
|
}, [isEditing]);
|
|
3122
|
-
const onDateSelect = React$
|
|
3135
|
+
const onDateSelect = React$24.useCallback((date) => {
|
|
3123
3136
|
if (!date) return;
|
|
3124
3137
|
setValue(date);
|
|
3125
3138
|
meta?.onDataUpdate?.({
|
|
@@ -3135,14 +3148,14 @@ function DateCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSel
|
|
|
3135
3148
|
rowIndex,
|
|
3136
3149
|
columnId
|
|
3137
3150
|
]);
|
|
3138
|
-
const onOpenChange = React$
|
|
3151
|
+
const onOpenChange = React$24.useCallback((isOpen) => {
|
|
3139
3152
|
setOpen(isOpen);
|
|
3140
3153
|
if (!isOpen && isEditing && !hasStoppedRef.current) {
|
|
3141
3154
|
hasStoppedRef.current = true;
|
|
3142
3155
|
meta?.onCellEditingStop?.();
|
|
3143
3156
|
}
|
|
3144
3157
|
}, [isEditing, meta]);
|
|
3145
|
-
const onWrapperKeyDown = React$
|
|
3158
|
+
const onWrapperKeyDown = React$24.useCallback((event) => {
|
|
3146
3159
|
if (isEditing) {
|
|
3147
3160
|
if (event.key === "Escape") {
|
|
3148
3161
|
event.preventDefault();
|
|
@@ -3162,10 +3175,10 @@ function DateCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSel
|
|
|
3162
3175
|
initialValue,
|
|
3163
3176
|
meta
|
|
3164
3177
|
]);
|
|
3165
|
-
React$
|
|
3178
|
+
React$24.useEffect(() => {
|
|
3166
3179
|
setOpen(isEditing);
|
|
3167
3180
|
}, [isEditing]);
|
|
3168
|
-
React$
|
|
3181
|
+
React$24.useEffect(() => {
|
|
3169
3182
|
if (isFocused && !isEditing && !meta?.searchOpen && !meta?.isScrolling && containerRef.current) containerRef.current.focus();
|
|
3170
3183
|
}, [
|
|
3171
3184
|
isFocused,
|
|
@@ -3217,7 +3230,7 @@ function DateCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSel
|
|
|
3217
3230
|
//#region src/data-grid/cell-variants/gantt-cell.tsx
|
|
3218
3231
|
function GanttCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSelected }) {
|
|
3219
3232
|
const initialValue = cell.getValue();
|
|
3220
|
-
const containerRef = React$
|
|
3233
|
+
const containerRef = React$23.useRef(null);
|
|
3221
3234
|
const cellOpts = cell.column.columnDef.meta?.cell;
|
|
3222
3235
|
const ts = cellOpts?.dateRangeFrom ?? cellOpts?.timelineStart;
|
|
3223
3236
|
const te = cellOpts?.dateRangeTo ?? cellOpts?.timelineEnd;
|
|
@@ -3276,19 +3289,19 @@ function Textarea({ className, variant, __e2e_test_id__,...props }) {
|
|
|
3276
3289
|
//#region src/data-grid/cell-variants/long-text-cell.tsx
|
|
3277
3290
|
function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSelected }) {
|
|
3278
3291
|
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$
|
|
3292
|
+
const [value, setValue] = React$22.useState(initialValue ?? "");
|
|
3293
|
+
const [open, setOpen] = React$22.useState(false);
|
|
3294
|
+
const textareaRef = React$22.useRef(null);
|
|
3295
|
+
const containerRef = React$22.useRef(null);
|
|
3296
|
+
const hasSubmittedRef = React$22.useRef(false);
|
|
3284
3297
|
const meta = table.options.meta;
|
|
3285
3298
|
const sideOffset = -(containerRef.current?.clientHeight ?? 0);
|
|
3286
|
-
const prevInitialValueRef = React$
|
|
3299
|
+
const prevInitialValueRef = React$22.useRef(initialValue);
|
|
3287
3300
|
if (initialValue !== prevInitialValueRef.current) {
|
|
3288
3301
|
prevInitialValueRef.current = initialValue;
|
|
3289
3302
|
setValue(initialValue ?? "");
|
|
3290
3303
|
}
|
|
3291
|
-
React$
|
|
3304
|
+
React$22.useEffect(() => {
|
|
3292
3305
|
if (isEditing) hasSubmittedRef.current = false;
|
|
3293
3306
|
}, [isEditing]);
|
|
3294
3307
|
const debouncedSave = useDebouncedCallback((newValue) => {
|
|
@@ -3298,7 +3311,7 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
|
|
|
3298
3311
|
value: newValue
|
|
3299
3312
|
});
|
|
3300
3313
|
}, 300);
|
|
3301
|
-
const onSave = React$
|
|
3314
|
+
const onSave = React$22.useCallback(() => {
|
|
3302
3315
|
if (hasSubmittedRef.current) return;
|
|
3303
3316
|
hasSubmittedRef.current = true;
|
|
3304
3317
|
if (value !== initialValue) meta?.onDataUpdate?.({
|
|
@@ -3315,7 +3328,7 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
|
|
|
3315
3328
|
rowIndex,
|
|
3316
3329
|
columnId
|
|
3317
3330
|
]);
|
|
3318
|
-
const onCancel = React$
|
|
3331
|
+
const onCancel = React$22.useCallback(() => {
|
|
3319
3332
|
if (hasSubmittedRef.current) return;
|
|
3320
3333
|
hasSubmittedRef.current = true;
|
|
3321
3334
|
setValue(initialValue ?? "");
|
|
@@ -3332,12 +3345,12 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
|
|
|
3332
3345
|
rowIndex,
|
|
3333
3346
|
columnId
|
|
3334
3347
|
]);
|
|
3335
|
-
const onChange = React$
|
|
3348
|
+
const onChange = React$22.useCallback((event) => {
|
|
3336
3349
|
const newValue = event.target.value;
|
|
3337
3350
|
setValue(newValue);
|
|
3338
3351
|
debouncedSave(newValue);
|
|
3339
3352
|
}, [debouncedSave]);
|
|
3340
|
-
const onOpenChange = React$
|
|
3353
|
+
const onOpenChange = React$22.useCallback((isOpen) => {
|
|
3341
3354
|
setOpen(isOpen);
|
|
3342
3355
|
if (!isOpen && !hasSubmittedRef.current) {
|
|
3343
3356
|
hasSubmittedRef.current = true;
|
|
@@ -3355,7 +3368,7 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
|
|
|
3355
3368
|
rowIndex,
|
|
3356
3369
|
columnId
|
|
3357
3370
|
]);
|
|
3358
|
-
const onOpenAutoFocus = React$
|
|
3371
|
+
const onOpenAutoFocus = React$22.useCallback((event) => {
|
|
3359
3372
|
event.preventDefault();
|
|
3360
3373
|
if (textareaRef.current) {
|
|
3361
3374
|
textareaRef.current.focus();
|
|
@@ -3363,7 +3376,7 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
|
|
|
3363
3376
|
textareaRef.current.setSelectionRange(length, length);
|
|
3364
3377
|
}
|
|
3365
3378
|
}, []);
|
|
3366
|
-
const onWrapperKeyDown = React$
|
|
3379
|
+
const onWrapperKeyDown = React$22.useCallback((event) => {
|
|
3367
3380
|
if (isEditing && !open) {
|
|
3368
3381
|
if (event.key === "Escape") {
|
|
3369
3382
|
event.preventDefault();
|
|
@@ -3389,7 +3402,7 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
|
|
|
3389
3402
|
rowIndex,
|
|
3390
3403
|
columnId
|
|
3391
3404
|
]);
|
|
3392
|
-
const onTextareaKeyDown = React$
|
|
3405
|
+
const onTextareaKeyDown = React$22.useCallback((event) => {
|
|
3393
3406
|
if (event.key === "Escape") {
|
|
3394
3407
|
event.preventDefault();
|
|
3395
3408
|
onCancel();
|
|
@@ -3399,7 +3412,7 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
|
|
|
3399
3412
|
}
|
|
3400
3413
|
event.stopPropagation();
|
|
3401
3414
|
}, [onCancel, onSave]);
|
|
3402
|
-
const onTextareaBlur = React$
|
|
3415
|
+
const onTextareaBlur = React$22.useCallback(() => {
|
|
3403
3416
|
if (hasSubmittedRef.current) return;
|
|
3404
3417
|
hasSubmittedRef.current = true;
|
|
3405
3418
|
if (value !== initialValue) meta?.onDataUpdate?.({
|
|
@@ -3416,7 +3429,7 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
|
|
|
3416
3429
|
rowIndex,
|
|
3417
3430
|
columnId
|
|
3418
3431
|
]);
|
|
3419
|
-
React$
|
|
3432
|
+
React$22.useEffect(() => {
|
|
3420
3433
|
if (isEditing && !open) setOpen(true);
|
|
3421
3434
|
if (isFocused && !isEditing && !meta?.searchOpen && !meta?.isScrolling && containerRef.current) containerRef.current.focus();
|
|
3422
3435
|
}, [
|
|
@@ -3469,26 +3482,26 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
|
|
|
3469
3482
|
//#endregion
|
|
3470
3483
|
//#region src/data-grid/cell-variants/multi-select-cell.tsx
|
|
3471
3484
|
function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSelected }) {
|
|
3472
|
-
const cellValue = React$
|
|
3485
|
+
const cellValue = React$21.useMemo(() => cell.getValue() ?? [], [cell]);
|
|
3473
3486
|
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$
|
|
3487
|
+
const prevCellIdRef = React$21.useRef(cellId);
|
|
3488
|
+
const [selectedValues, setSelectedValues] = React$21.useState(cellValue);
|
|
3489
|
+
const [open, setOpen] = React$21.useState(false);
|
|
3490
|
+
const [searchValue, setSearchValue] = React$21.useState("");
|
|
3491
|
+
const containerRef = React$21.useRef(null);
|
|
3492
|
+
const inputRef = React$21.useRef(null);
|
|
3480
3493
|
const meta = table.options.meta;
|
|
3481
3494
|
const cellOpts = cell.column.columnDef.meta?.cell;
|
|
3482
3495
|
const sideOffset = -(containerRef.current?.clientHeight ?? 0);
|
|
3483
3496
|
const arrayOptions = cellOpts?.variant === "multi-select" ? cellOpts.options : void 0;
|
|
3484
3497
|
const optionsMap = cellOpts?.variant === "multi-select" ? cellOpts.optionsMap : void 0;
|
|
3485
|
-
const arrayOptionsLabelMap = React$
|
|
3486
|
-
const getLabel = React$
|
|
3498
|
+
const arrayOptionsLabelMap = React$21.useMemo(() => arrayOptions ? new Map(arrayOptions.map((opt) => [opt.value, opt.label])) : null, [arrayOptions]);
|
|
3499
|
+
const getLabel = React$21.useCallback((val) => {
|
|
3487
3500
|
if (optionsMap) return optionsMap.get(val) ?? val;
|
|
3488
3501
|
if (arrayOptionsLabelMap) return arrayOptionsLabelMap.get(val) ?? val;
|
|
3489
3502
|
return val;
|
|
3490
3503
|
}, [optionsMap, arrayOptionsLabelMap]);
|
|
3491
|
-
const options = React$
|
|
3504
|
+
const options = React$21.useMemo(() => {
|
|
3492
3505
|
if (!isEditing) return [];
|
|
3493
3506
|
if (arrayOptions) return arrayOptions;
|
|
3494
3507
|
if (optionsMap) return Array.from(optionsMap.entries()).map(([id, label]) => ({
|
|
@@ -3507,7 +3520,7 @@ function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing
|
|
|
3507
3520
|
setOpen(false);
|
|
3508
3521
|
setSearchValue("");
|
|
3509
3522
|
}
|
|
3510
|
-
const onValueChange = React$
|
|
3523
|
+
const onValueChange = React$21.useCallback((value) => {
|
|
3511
3524
|
const newValues = selectedValues.includes(value) ? selectedValues.filter((v) => v !== value) : [...selectedValues, value];
|
|
3512
3525
|
setSelectedValues(newValues);
|
|
3513
3526
|
meta?.onDataUpdate?.({
|
|
@@ -3523,7 +3536,7 @@ function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing
|
|
|
3523
3536
|
rowIndex,
|
|
3524
3537
|
columnId
|
|
3525
3538
|
]);
|
|
3526
|
-
const removeValue = React$
|
|
3539
|
+
const removeValue = React$21.useCallback((valueToRemove, event) => {
|
|
3527
3540
|
event?.stopPropagation();
|
|
3528
3541
|
event?.preventDefault();
|
|
3529
3542
|
const newValues = selectedValues.filter((v) => v !== valueToRemove);
|
|
@@ -3540,7 +3553,7 @@ function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing
|
|
|
3540
3553
|
rowIndex,
|
|
3541
3554
|
columnId
|
|
3542
3555
|
]);
|
|
3543
|
-
const clearAll = React$
|
|
3556
|
+
const clearAll = React$21.useCallback(() => {
|
|
3544
3557
|
setSelectedValues([]);
|
|
3545
3558
|
meta?.onDataUpdate?.({
|
|
3546
3559
|
rowIndex,
|
|
@@ -3553,18 +3566,18 @@ function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing
|
|
|
3553
3566
|
rowIndex,
|
|
3554
3567
|
columnId
|
|
3555
3568
|
]);
|
|
3556
|
-
const onOpenChange = React$
|
|
3569
|
+
const onOpenChange = React$21.useCallback((isOpen) => {
|
|
3557
3570
|
setOpen(isOpen);
|
|
3558
3571
|
if (!isOpen) {
|
|
3559
3572
|
setSearchValue("");
|
|
3560
3573
|
meta?.onCellEditingStop?.();
|
|
3561
3574
|
}
|
|
3562
3575
|
}, [meta]);
|
|
3563
|
-
const onOpenAutoFocus = React$
|
|
3576
|
+
const onOpenAutoFocus = React$21.useCallback((event) => {
|
|
3564
3577
|
event.preventDefault();
|
|
3565
3578
|
inputRef.current?.focus();
|
|
3566
3579
|
}, []);
|
|
3567
|
-
const onWrapperKeyDown = React$
|
|
3580
|
+
const onWrapperKeyDown = React$21.useCallback((event) => {
|
|
3568
3581
|
if (isEditing) {
|
|
3569
3582
|
if (event.key === "Escape") {
|
|
3570
3583
|
event.preventDefault();
|
|
@@ -3584,7 +3597,7 @@ function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing
|
|
|
3584
3597
|
cellValue,
|
|
3585
3598
|
meta
|
|
3586
3599
|
]);
|
|
3587
|
-
const onInputKeyDown = React$
|
|
3600
|
+
const onInputKeyDown = React$21.useCallback((event) => {
|
|
3588
3601
|
if (event.key === "Backspace" && searchValue === "" && selectedValues.length > 0) {
|
|
3589
3602
|
event.preventDefault();
|
|
3590
3603
|
const lastValue = selectedValues.at(-1);
|
|
@@ -3596,7 +3609,7 @@ function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing
|
|
|
3596
3609
|
selectedValues,
|
|
3597
3610
|
removeValue
|
|
3598
3611
|
]);
|
|
3599
|
-
React$
|
|
3612
|
+
React$21.useEffect(() => {
|
|
3600
3613
|
if (isEditing && !open) setOpen(true);
|
|
3601
3614
|
if (isFocused && !isEditing && !meta?.searchOpen && !meta?.isScrolling && containerRef.current) containerRef.current.focus();
|
|
3602
3615
|
}, [
|
|
@@ -3606,7 +3619,7 @@ function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing
|
|
|
3606
3619
|
meta?.searchOpen,
|
|
3607
3620
|
meta?.isScrolling
|
|
3608
3621
|
]);
|
|
3609
|
-
React$
|
|
3622
|
+
React$21.useEffect(() => {
|
|
3610
3623
|
if (open && inputRef.current) setTimeout(() => inputRef.current?.focus(), 0);
|
|
3611
3624
|
}, [open]);
|
|
3612
3625
|
const displayLabels = selectedValues.map(getLabel).filter(Boolean);
|
|
@@ -3707,19 +3720,19 @@ function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing
|
|
|
3707
3720
|
//#region src/data-grid/cell-variants/number-cell.tsx
|
|
3708
3721
|
function NumberCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSelected }) {
|
|
3709
3722
|
const initialValue = cell.getValue();
|
|
3710
|
-
const inputRef = React$
|
|
3711
|
-
const containerRef = React$
|
|
3723
|
+
const inputRef = React$20.useRef(null);
|
|
3724
|
+
const containerRef = React$20.useRef(null);
|
|
3712
3725
|
const meta = table.options.meta;
|
|
3713
3726
|
const colMeta = cell.column.columnDef.meta;
|
|
3714
3727
|
const cellOptions = colMeta?.cell;
|
|
3715
|
-
const editableResolver = React$
|
|
3728
|
+
const editableResolver = React$20.useMemo(() => {
|
|
3716
3729
|
const v = colMeta?.editable;
|
|
3717
3730
|
if (v === void 0) return () => true;
|
|
3718
3731
|
return typeof v === "function" ? v : () => Boolean(v);
|
|
3719
3732
|
}, [colMeta?.editable]);
|
|
3720
3733
|
const isEditable = editableResolver(cell.row.original);
|
|
3721
3734
|
const { min, max, step, prefix, suffix, fallbackValue = "" } = cellOptions?.variant === "number" ? cellOptions : {};
|
|
3722
|
-
const resolvedPrefix = React$
|
|
3735
|
+
const resolvedPrefix = React$20.useMemo(() => {
|
|
3723
3736
|
if (typeof prefix === "function") return prefix(cell.row.original, initialValue);
|
|
3724
3737
|
return prefix ?? null;
|
|
3725
3738
|
}, [
|
|
@@ -3727,7 +3740,7 @@ function NumberCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
|
|
|
3727
3740
|
cell.row.original,
|
|
3728
3741
|
initialValue
|
|
3729
3742
|
]);
|
|
3730
|
-
const resolvedSuffix = React$
|
|
3743
|
+
const resolvedSuffix = React$20.useMemo(() => {
|
|
3731
3744
|
if (typeof suffix === "function") return suffix(cell.row.original, initialValue);
|
|
3732
3745
|
return suffix ?? null;
|
|
3733
3746
|
}, [
|
|
@@ -3735,12 +3748,12 @@ function NumberCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
|
|
|
3735
3748
|
cell.row.original,
|
|
3736
3749
|
initialValue
|
|
3737
3750
|
]);
|
|
3738
|
-
const [editValue, setEditValue] = React$
|
|
3739
|
-
const hasSubmittedRef = React$
|
|
3740
|
-
React$
|
|
3751
|
+
const [editValue, setEditValue] = React$20.useState(initialValue !== null && initialValue !== void 0 ? String(initialValue) : "");
|
|
3752
|
+
const hasSubmittedRef = React$20.useRef(false);
|
|
3753
|
+
React$20.useEffect(() => {
|
|
3741
3754
|
if (isEditing) hasSubmittedRef.current = false;
|
|
3742
3755
|
}, [isEditing]);
|
|
3743
|
-
const onBlur = React$
|
|
3756
|
+
const onBlur = React$20.useCallback(() => {
|
|
3744
3757
|
if (hasSubmittedRef.current) return;
|
|
3745
3758
|
const numValue = editValue === "" ? null : Number(editValue);
|
|
3746
3759
|
if (numValue !== initialValue) meta?.onDataUpdate?.({
|
|
@@ -3756,13 +3769,13 @@ function NumberCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
|
|
|
3756
3769
|
initialValue,
|
|
3757
3770
|
editValue
|
|
3758
3771
|
]);
|
|
3759
|
-
const onChange = React$
|
|
3772
|
+
const onChange = React$20.useCallback((event) => {
|
|
3760
3773
|
setEditValue(event.target.value);
|
|
3761
3774
|
}, []);
|
|
3762
|
-
const parseNumValue = React$
|
|
3775
|
+
const parseNumValue = React$20.useCallback(() => {
|
|
3763
3776
|
return editValue === "" ? null : Number(editValue);
|
|
3764
3777
|
}, [editValue]);
|
|
3765
|
-
const saveAndStop = React$
|
|
3778
|
+
const saveAndStop = React$20.useCallback((options) => {
|
|
3766
3779
|
hasSubmittedRef.current = true;
|
|
3767
3780
|
const numValue = parseNumValue();
|
|
3768
3781
|
meta?.onDataUpdate?.({
|
|
@@ -3777,7 +3790,7 @@ function NumberCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
|
|
|
3777
3790
|
rowIndex,
|
|
3778
3791
|
columnId
|
|
3779
3792
|
]);
|
|
3780
|
-
const handleEditingKeyDown = React$
|
|
3793
|
+
const handleEditingKeyDown = React$20.useCallback((event) => {
|
|
3781
3794
|
if (event.key === "Enter") {
|
|
3782
3795
|
event.preventDefault();
|
|
3783
3796
|
saveAndStop({ moveToNextRow: true });
|
|
@@ -3796,12 +3809,12 @@ function NumberCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
|
|
|
3796
3809
|
initialValue,
|
|
3797
3810
|
meta
|
|
3798
3811
|
]);
|
|
3799
|
-
const handleFocusedKeyDown = React$
|
|
3812
|
+
const handleFocusedKeyDown = React$20.useCallback((event) => {
|
|
3800
3813
|
if (!isEditable) return;
|
|
3801
3814
|
if (event.key === "Backspace") setEditValue("");
|
|
3802
3815
|
else if (event.key.length === 1 && !event.ctrlKey && !event.metaKey) setEditValue(event.key);
|
|
3803
3816
|
}, [isEditable]);
|
|
3804
|
-
const onWrapperKeyDown = React$
|
|
3817
|
+
const onWrapperKeyDown = React$20.useCallback((event) => {
|
|
3805
3818
|
if (isEditing) handleEditingKeyDown(event);
|
|
3806
3819
|
else if (isFocused) handleFocusedKeyDown(event);
|
|
3807
3820
|
}, [
|
|
@@ -3810,10 +3823,10 @@ function NumberCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
|
|
|
3810
3823
|
handleEditingKeyDown,
|
|
3811
3824
|
handleFocusedKeyDown
|
|
3812
3825
|
]);
|
|
3813
|
-
React$
|
|
3826
|
+
React$20.useEffect(() => {
|
|
3814
3827
|
setEditValue(initialValue !== null && initialValue !== void 0 ? String(initialValue) : "");
|
|
3815
3828
|
}, [initialValue]);
|
|
3816
|
-
React$
|
|
3829
|
+
React$20.useEffect(() => {
|
|
3817
3830
|
if (isEditing && inputRef.current) {
|
|
3818
3831
|
inputRef.current.focus();
|
|
3819
3832
|
inputRef.current.select();
|
|
@@ -3860,7 +3873,7 @@ function NumberCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
|
|
|
3860
3873
|
//#endregion
|
|
3861
3874
|
//#region src/data-grid/cell-variants/react-node-cell.tsx
|
|
3862
3875
|
function ReactNodeCell({ cell, table, rowIndex, columnId, isFocused, isSelected, isEditing }) {
|
|
3863
|
-
const containerRef = React$
|
|
3876
|
+
const containerRef = React$19.useRef(null);
|
|
3864
3877
|
const cellOpts = cell.column.columnDef.meta?.cell;
|
|
3865
3878
|
const renderFn = cellOpts?.variant === "react-node" ? cellOpts.render : void 0;
|
|
3866
3879
|
const children = renderFn ? renderFn({
|
|
@@ -3890,18 +3903,18 @@ function ReactNodeCell({ cell, table, rowIndex, columnId, isFocused, isSelected,
|
|
|
3890
3903
|
//#region src/data-grid/cell-variants/select-cell.tsx
|
|
3891
3904
|
function SelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSelected }) {
|
|
3892
3905
|
const initialValue = cell.getValue();
|
|
3893
|
-
const [value, setValue] = React$
|
|
3894
|
-
const [open, setOpen] = React$
|
|
3895
|
-
const containerRef = React$
|
|
3896
|
-
const inputRef = React$
|
|
3906
|
+
const [value, setValue] = React$18.useState(initialValue);
|
|
3907
|
+
const [open, setOpen] = React$18.useState(false);
|
|
3908
|
+
const containerRef = React$18.useRef(null);
|
|
3909
|
+
const inputRef = React$18.useRef(null);
|
|
3897
3910
|
const meta = table.options.meta;
|
|
3898
3911
|
const cellOpts = cell.column.columnDef.meta?.cell;
|
|
3899
3912
|
const hasSearch = (cellOpts?.variant === "select" && cellOpts?.hasSearch) ?? false;
|
|
3900
3913
|
const sideOffset = -(inputRef.current?.clientHeight ?? 0);
|
|
3901
3914
|
const arrayOptions = cellOpts?.variant === "select" ? cellOpts.options : void 0;
|
|
3902
3915
|
const optionsMap = cellOpts?.variant === "select" ? cellOpts.optionsMap : void 0;
|
|
3903
|
-
const arrayOptionsLabelMap = React$
|
|
3904
|
-
const displayLabel = React$
|
|
3916
|
+
const arrayOptionsLabelMap = React$18.useMemo(() => arrayOptions ? new Map(arrayOptions.map((opt) => [opt.value, opt.label])) : null, [arrayOptions]);
|
|
3917
|
+
const displayLabel = React$18.useMemo(() => {
|
|
3905
3918
|
if (!value) return value;
|
|
3906
3919
|
if (optionsMap) return optionsMap.get(value) ?? value;
|
|
3907
3920
|
if (arrayOptionsLabelMap) return arrayOptionsLabelMap.get(value) ?? value;
|
|
@@ -3911,7 +3924,7 @@ function SelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
|
|
|
3911
3924
|
optionsMap,
|
|
3912
3925
|
arrayOptionsLabelMap
|
|
3913
3926
|
]);
|
|
3914
|
-
const options = React$
|
|
3927
|
+
const options = React$18.useMemo(() => {
|
|
3915
3928
|
if (!isEditing) return [];
|
|
3916
3929
|
if (arrayOptions) return arrayOptions;
|
|
3917
3930
|
if (optionsMap) return Array.from(optionsMap.entries()).map(([id, label]) => ({
|
|
@@ -3924,7 +3937,7 @@ function SelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
|
|
|
3924
3937
|
arrayOptions,
|
|
3925
3938
|
optionsMap
|
|
3926
3939
|
]);
|
|
3927
|
-
const onValueChange = React$
|
|
3940
|
+
const onValueChange = React$18.useCallback((newValue) => {
|
|
3928
3941
|
setValue(newValue);
|
|
3929
3942
|
meta?.onDataUpdate?.({
|
|
3930
3943
|
rowIndex,
|
|
@@ -3937,15 +3950,15 @@ function SelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
|
|
|
3937
3950
|
rowIndex,
|
|
3938
3951
|
columnId
|
|
3939
3952
|
]);
|
|
3940
|
-
const onOpenChange = React$
|
|
3953
|
+
const onOpenChange = React$18.useCallback((isOpen) => {
|
|
3941
3954
|
setOpen(isOpen);
|
|
3942
3955
|
if (!isOpen) meta?.onCellEditingStop?.();
|
|
3943
3956
|
}, [meta]);
|
|
3944
|
-
const onOpenAutoFocus = React$
|
|
3957
|
+
const onOpenAutoFocus = React$18.useCallback((event) => {
|
|
3945
3958
|
event.preventDefault();
|
|
3946
3959
|
inputRef.current?.focus();
|
|
3947
3960
|
}, []);
|
|
3948
|
-
const onWrapperKeyDown = React$
|
|
3961
|
+
const onWrapperKeyDown = React$18.useCallback((event) => {
|
|
3949
3962
|
if (isEditing) {
|
|
3950
3963
|
if (event.key === "Escape") {
|
|
3951
3964
|
event.preventDefault();
|
|
@@ -3963,10 +3976,10 @@ function SelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
|
|
|
3963
3976
|
initialValue,
|
|
3964
3977
|
meta
|
|
3965
3978
|
]);
|
|
3966
|
-
React$
|
|
3979
|
+
React$18.useEffect(() => {
|
|
3967
3980
|
setValue(initialValue);
|
|
3968
3981
|
}, [initialValue]);
|
|
3969
|
-
React$
|
|
3982
|
+
React$18.useEffect(() => {
|
|
3970
3983
|
if (isEditing && !open) setOpen(true);
|
|
3971
3984
|
if (isFocused && !isEditing && !meta?.searchOpen && !meta?.isScrolling && containerRef.current) containerRef.current.focus();
|
|
3972
3985
|
}, [
|
|
@@ -4050,22 +4063,22 @@ function SelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
|
|
|
4050
4063
|
//#region src/data-grid/cell-variants/short-text-cell.tsx
|
|
4051
4064
|
function ShortTextCell({ cell, table, rowIndex, columnId, isEditing, isFocused, isSelected }) {
|
|
4052
4065
|
const initialValue = cell.getValue();
|
|
4053
|
-
const [value, setValue] = React$
|
|
4054
|
-
const inputRef = React$
|
|
4055
|
-
const containerRef = React$
|
|
4056
|
-
const hasSubmittedRef = React$
|
|
4066
|
+
const [value, setValue] = React$17.useState(initialValue);
|
|
4067
|
+
const inputRef = React$17.useRef(null);
|
|
4068
|
+
const containerRef = React$17.useRef(null);
|
|
4069
|
+
const hasSubmittedRef = React$17.useRef(false);
|
|
4057
4070
|
const meta = table.options.meta;
|
|
4058
4071
|
const colMeta = cell.column.columnDef.meta;
|
|
4059
|
-
const editableResolver = React$
|
|
4072
|
+
const editableResolver = React$17.useMemo(() => {
|
|
4060
4073
|
const v = colMeta?.editable;
|
|
4061
4074
|
if (v === void 0) return () => true;
|
|
4062
4075
|
return typeof v === "function" ? v : () => Boolean(v);
|
|
4063
4076
|
}, [colMeta?.editable]);
|
|
4064
4077
|
const isEditable = editableResolver(cell.row.original);
|
|
4065
|
-
React$
|
|
4078
|
+
React$17.useEffect(() => {
|
|
4066
4079
|
if (isEditing) hasSubmittedRef.current = false;
|
|
4067
4080
|
}, [isEditing]);
|
|
4068
|
-
const onBlur = React$
|
|
4081
|
+
const onBlur = React$17.useCallback(() => {
|
|
4069
4082
|
if (hasSubmittedRef.current) return;
|
|
4070
4083
|
const currentValue = inputRef.current?.value ?? "";
|
|
4071
4084
|
const normalizedInitial = initialValue ?? "";
|
|
@@ -4081,10 +4094,10 @@ function ShortTextCell({ cell, table, rowIndex, columnId, isEditing, isFocused,
|
|
|
4081
4094
|
columnId,
|
|
4082
4095
|
initialValue
|
|
4083
4096
|
]);
|
|
4084
|
-
const onChange = React$
|
|
4097
|
+
const onChange = React$17.useCallback((event) => {
|
|
4085
4098
|
setValue(event.target.value);
|
|
4086
4099
|
}, []);
|
|
4087
|
-
const handleEditingKeyDown = React$
|
|
4100
|
+
const handleEditingKeyDown = React$17.useCallback((event) => {
|
|
4088
4101
|
if (event.key === "Enter") {
|
|
4089
4102
|
event.preventDefault();
|
|
4090
4103
|
hasSubmittedRef.current = true;
|
|
@@ -4118,13 +4131,13 @@ function ShortTextCell({ cell, table, rowIndex, columnId, isEditing, isFocused,
|
|
|
4118
4131
|
rowIndex,
|
|
4119
4132
|
columnId
|
|
4120
4133
|
]);
|
|
4121
|
-
const handleFocusedKeyDown = React$
|
|
4134
|
+
const handleFocusedKeyDown = React$17.useCallback((event) => {
|
|
4122
4135
|
if (event.key.length === 1 && !event.ctrlKey && !event.metaKey) {
|
|
4123
4136
|
if (!isEditable) return;
|
|
4124
4137
|
setValue(event.key);
|
|
4125
4138
|
}
|
|
4126
4139
|
}, [isEditable]);
|
|
4127
|
-
const onWrapperKeyDown = React$
|
|
4140
|
+
const onWrapperKeyDown = React$17.useCallback((event) => {
|
|
4128
4141
|
if (isEditing) handleEditingKeyDown(event);
|
|
4129
4142
|
else if (isFocused) handleFocusedKeyDown(event);
|
|
4130
4143
|
}, [
|
|
@@ -4133,10 +4146,10 @@ function ShortTextCell({ cell, table, rowIndex, columnId, isEditing, isFocused,
|
|
|
4133
4146
|
handleEditingKeyDown,
|
|
4134
4147
|
handleFocusedKeyDown
|
|
4135
4148
|
]);
|
|
4136
|
-
React$
|
|
4149
|
+
React$17.useEffect(() => {
|
|
4137
4150
|
setValue(initialValue);
|
|
4138
4151
|
}, [initialValue]);
|
|
4139
|
-
React$
|
|
4152
|
+
React$17.useEffect(() => {
|
|
4140
4153
|
if (isEditing && inputRef.current) {
|
|
4141
4154
|
inputRef.current.focus();
|
|
4142
4155
|
inputRef.current.setSelectionRange(inputRef.current.value.length, inputRef.current.value.length);
|
|
@@ -4284,16 +4297,16 @@ function DataGridCell({ cell, table }) {
|
|
|
4284
4297
|
//#endregion
|
|
4285
4298
|
//#region src/data-grid/data-grid-view-menu.tsx
|
|
4286
4299
|
function DataGridViewMenu({ table,...props }) {
|
|
4287
|
-
const viewableColumns = React$
|
|
4288
|
-
const [order, setOrder] = React$
|
|
4300
|
+
const viewableColumns = React$16.useMemo(() => table.getAllColumns().filter((column) => typeof column.accessorFn !== "undefined"), [table]);
|
|
4301
|
+
const [order, setOrder] = React$16.useState(() => {
|
|
4289
4302
|
const stateOrder = table.getState().columnOrder ?? [];
|
|
4290
4303
|
if (stateOrder && stateOrder.length > 0) return stateOrder;
|
|
4291
4304
|
return table.getAllColumns().map((c) => c.id);
|
|
4292
4305
|
});
|
|
4293
|
-
const [searchQuery, setSearchQuery] = React$
|
|
4294
|
-
const [isDragging, setIsDragging] = React$
|
|
4295
|
-
const [insertionIndex, setInsertionIndex] = React$
|
|
4296
|
-
React$
|
|
4306
|
+
const [searchQuery, setSearchQuery] = React$16.useState("");
|
|
4307
|
+
const [isDragging, setIsDragging] = React$16.useState(false);
|
|
4308
|
+
const [insertionIndex, setInsertionIndex] = React$16.useState(null);
|
|
4309
|
+
React$16.useEffect(() => {
|
|
4297
4310
|
const stateOrder = table.getState().columnOrder ?? [];
|
|
4298
4311
|
if (stateOrder && stateOrder.length > 0) {
|
|
4299
4312
|
setOrder(stateOrder);
|
|
@@ -4301,8 +4314,8 @@ function DataGridViewMenu({ table,...props }) {
|
|
|
4301
4314
|
}
|
|
4302
4315
|
setOrder(table.getAllColumns().map((c) => c.id));
|
|
4303
4316
|
}, [table]);
|
|
4304
|
-
const visibleSet = React$
|
|
4305
|
-
const orderedColumns = React$
|
|
4317
|
+
const visibleSet = React$16.useMemo(() => new Set(viewableColumns.map((c) => c.id)), [viewableColumns]);
|
|
4318
|
+
const orderedColumns = React$16.useMemo(() => {
|
|
4306
4319
|
const ordered = [];
|
|
4307
4320
|
for (const id of order) {
|
|
4308
4321
|
const col = viewableColumns.find((c) => c.id === id);
|
|
@@ -4315,12 +4328,12 @@ function DataGridViewMenu({ table,...props }) {
|
|
|
4315
4328
|
viewableColumns,
|
|
4316
4329
|
table
|
|
4317
4330
|
]);
|
|
4318
|
-
const draggingRef = React$
|
|
4319
|
-
const groupRef = React$
|
|
4320
|
-
const getBaseOrder = React$
|
|
4331
|
+
const draggingRef = React$16.useRef(null);
|
|
4332
|
+
const groupRef = React$16.useRef(null);
|
|
4333
|
+
const getBaseOrder = React$16.useCallback(() => {
|
|
4321
4334
|
return table.getState().columnOrder && table.getState().columnOrder.length ? table.getState().columnOrder.slice() : table.getAllColumns().map((c) => c.id);
|
|
4322
4335
|
}, [table]);
|
|
4323
|
-
const computeInsertionIndex = React$
|
|
4336
|
+
const computeInsertionIndex = React$16.useCallback((clientY) => {
|
|
4324
4337
|
const baseOrder = getBaseOrder();
|
|
4325
4338
|
const el = groupRef.current;
|
|
4326
4339
|
if (!el) return baseOrder.length;
|
|
@@ -4342,7 +4355,7 @@ function DataGridViewMenu({ table,...props }) {
|
|
|
4342
4355
|
setIsDragging(false);
|
|
4343
4356
|
setInsertionIndex(null);
|
|
4344
4357
|
}
|
|
4345
|
-
const doDrop = React$
|
|
4358
|
+
const doDrop = React$16.useCallback((dragId, toIndex) => {
|
|
4346
4359
|
const baseOrder = table.getState().columnOrder && table.getState().columnOrder.length ? table.getState().columnOrder.slice() : table.getAllColumns().map((c) => c.id);
|
|
4347
4360
|
const fromIndex = baseOrder.indexOf(dragId);
|
|
4348
4361
|
if (fromIndex === -1) {
|
|
@@ -4359,7 +4372,7 @@ function DataGridViewMenu({ table,...props }) {
|
|
|
4359
4372
|
setOrder(copy.filter((id) => visibleSet.has(id)));
|
|
4360
4373
|
onDragEnd();
|
|
4361
4374
|
}, [table, visibleSet]);
|
|
4362
|
-
const startPointerDrag = React$
|
|
4375
|
+
const startPointerDrag = React$16.useCallback((e, id) => {
|
|
4363
4376
|
e.preventDefault();
|
|
4364
4377
|
draggingRef.current = id;
|
|
4365
4378
|
setIsDragging(true);
|
|
@@ -4392,7 +4405,7 @@ function DataGridViewMenu({ table,...props }) {
|
|
|
4392
4405
|
if (fromIndex < targetIndex) insertAt = targetIndex - 1;
|
|
4393
4406
|
return insertAt === fromIndex;
|
|
4394
4407
|
}
|
|
4395
|
-
const dragFromHandle = React$
|
|
4408
|
+
const dragFromHandle = React$16.useRef(false);
|
|
4396
4409
|
function resetTableView() {
|
|
4397
4410
|
const defaultOrder = table.getAllColumns().map((c) => c.id);
|
|
4398
4411
|
try {
|
|
@@ -4439,7 +4452,7 @@ function DataGridViewMenu({ table,...props }) {
|
|
|
4439
4452
|
const currentBase = table.getState().columnOrder && table.getState().columnOrder.length ? table.getState().columnOrder.slice() : table.getAllColumns().map((c) => c.id);
|
|
4440
4453
|
const pos = currentBase.indexOf(column.id);
|
|
4441
4454
|
const isHideable = column.getCanHide();
|
|
4442
|
-
return /* @__PURE__ */ jsxs(React$
|
|
4455
|
+
return /* @__PURE__ */ jsxs(React$16.Fragment, { children: [/* @__PURE__ */ jsxs(CommandItem, {
|
|
4443
4456
|
value: column.id,
|
|
4444
4457
|
"data-col-id": column.id,
|
|
4445
4458
|
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 +4512,30 @@ const MIN_COLUMN_SIZE = 60;
|
|
|
4499
4512
|
const MAX_COLUMN_SIZE = 800;
|
|
4500
4513
|
const SEARCH_SHORTCUT_KEY = "f";
|
|
4501
4514
|
const NON_NAVIGABLE_COLUMN_IDS = ["select", "actions"];
|
|
4502
|
-
const useIsomorphicLayoutEffect = typeof window !== "undefined" ? React$
|
|
4515
|
+
const useIsomorphicLayoutEffect = typeof window !== "undefined" ? React$15.useLayoutEffect : React$15.useEffect;
|
|
4503
4516
|
function useLazyRef(fn) {
|
|
4504
|
-
const ref = React$
|
|
4517
|
+
const ref = React$15.useRef(null);
|
|
4505
4518
|
if (ref.current === null) ref.current = fn();
|
|
4506
4519
|
return ref;
|
|
4507
4520
|
}
|
|
4508
4521
|
function useAsRef(data) {
|
|
4509
|
-
const ref = React$
|
|
4522
|
+
const ref = React$15.useRef(data);
|
|
4510
4523
|
useIsomorphicLayoutEffect(() => {
|
|
4511
4524
|
ref.current = data;
|
|
4512
4525
|
});
|
|
4513
4526
|
return ref;
|
|
4514
4527
|
}
|
|
4515
4528
|
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$
|
|
4529
|
+
const getSnapshot = React$15.useCallback(() => selector(store.getState()), [store, selector]);
|
|
4530
|
+
return React$15.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
|
|
4531
|
+
}
|
|
4532
|
+
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 }) {
|
|
4533
|
+
const dataGridRef = React$15.useRef(null);
|
|
4534
|
+
const tableRef = React$15.useRef(null);
|
|
4535
|
+
const rowVirtualizerRef = React$15.useRef(null);
|
|
4536
|
+
const headerRef = React$15.useRef(null);
|
|
4537
|
+
const rowMapRef = React$15.useRef(new Map());
|
|
4538
|
+
const footerRef = React$15.useRef(null);
|
|
4526
4539
|
const dataGridPropsRef = useAsRef(dataGridProps);
|
|
4527
4540
|
const listenersRef = useLazyRef(() => new Set());
|
|
4528
4541
|
const stateRef = useLazyRef(() => {
|
|
@@ -4550,7 +4563,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
4550
4563
|
isScrolling: false
|
|
4551
4564
|
};
|
|
4552
4565
|
});
|
|
4553
|
-
const store = React$
|
|
4566
|
+
const store = React$15.useMemo(() => {
|
|
4554
4567
|
let isBatching = false;
|
|
4555
4568
|
let pendingNotification = false;
|
|
4556
4569
|
return {
|
|
@@ -4594,7 +4607,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
4594
4607
|
}
|
|
4595
4608
|
};
|
|
4596
4609
|
}, [listenersRef, stateRef]);
|
|
4597
|
-
React$
|
|
4610
|
+
React$15.useEffect(() => {
|
|
4598
4611
|
store.setState("rowHeight", rowHeightProp);
|
|
4599
4612
|
}, [rowHeightProp, store]);
|
|
4600
4613
|
const focusedCell = useStore(store, (state) => state.focusedCell);
|
|
@@ -4610,20 +4623,20 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
4610
4623
|
const rowHeight = useStore(store, (state) => state.rowHeight);
|
|
4611
4624
|
const isScrolling = useStore(store, (state) => state.isScrolling);
|
|
4612
4625
|
const rowHeightValue = getRowHeightValue(rowHeight);
|
|
4613
|
-
const columnIds = React$
|
|
4626
|
+
const columnIds = React$15.useMemo(() => {
|
|
4614
4627
|
return columns.map((c) => {
|
|
4615
4628
|
if (c.id) return c.id;
|
|
4616
4629
|
if ("accessorKey" in c) return c.accessorKey;
|
|
4617
4630
|
return void 0;
|
|
4618
4631
|
}).filter((id) => Boolean(id));
|
|
4619
4632
|
}, [columns]);
|
|
4620
|
-
const storageKey = React$
|
|
4633
|
+
const storageKey = React$15.useMemo(() => {
|
|
4621
4634
|
if (typeof window === "undefined") return void 0;
|
|
4622
4635
|
const path = globalThis.location?.pathname ?? "unknown";
|
|
4623
4636
|
const cols = columnIds.join("|");
|
|
4624
4637
|
return `pxl.dataGrid:${path}:${cols}`;
|
|
4625
4638
|
}, [columnIds]);
|
|
4626
|
-
const persistedState = React$
|
|
4639
|
+
const persistedState = React$15.useMemo(() => {
|
|
4627
4640
|
if (!storageKey) return void 0;
|
|
4628
4641
|
try {
|
|
4629
4642
|
const raw = localStorage.getItem(storageKey);
|
|
@@ -4634,7 +4647,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
4634
4647
|
return void 0;
|
|
4635
4648
|
}
|
|
4636
4649
|
}, [storageKey]);
|
|
4637
|
-
const mergedInitialState = React$
|
|
4650
|
+
const mergedInitialState = React$15.useMemo(() => {
|
|
4638
4651
|
const base = { ...initialState ?? {} };
|
|
4639
4652
|
if (persistedState) try {
|
|
4640
4653
|
if (persistedState.columnOrder) base.columnOrder = persistedState.columnOrder;
|
|
@@ -4643,12 +4656,12 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
4643
4656
|
} catch (_) {}
|
|
4644
4657
|
return base;
|
|
4645
4658
|
}, [initialState, persistedState]);
|
|
4646
|
-
const getNavigableColumnIds = React$
|
|
4659
|
+
const getNavigableColumnIds = React$15.useCallback(() => {
|
|
4647
4660
|
const t = tableRef.current;
|
|
4648
4661
|
if (t) return t.getVisibleLeafColumns().map((c) => c.id).filter((c) => !NON_NAVIGABLE_COLUMN_IDS.includes(c));
|
|
4649
4662
|
return columnIds.filter((c) => !NON_NAVIGABLE_COLUMN_IDS.includes(c));
|
|
4650
4663
|
}, [columnIds]);
|
|
4651
|
-
const onDataUpdate = React$
|
|
4664
|
+
const onDataUpdate = React$15.useCallback((updates) => {
|
|
4652
4665
|
const updateArray = Array.isArray(updates) ? updates : [updates];
|
|
4653
4666
|
if (updateArray.length === 0) return;
|
|
4654
4667
|
const currentTable = tableRef.current;
|
|
@@ -4687,10 +4700,10 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
4687
4700
|
});
|
|
4688
4701
|
onDataChange?.(newData);
|
|
4689
4702
|
}, [data, onDataChange]);
|
|
4690
|
-
const getIsCellSelected = React$
|
|
4703
|
+
const getIsCellSelected = React$15.useCallback((rowIndex, columnId) => {
|
|
4691
4704
|
return selectionState.selectedCells.has(getCellKey(rowIndex, columnId));
|
|
4692
4705
|
}, [selectionState.selectedCells]);
|
|
4693
|
-
const clearSelection = React$
|
|
4706
|
+
const clearSelection = React$15.useCallback(() => {
|
|
4694
4707
|
store.batch(() => {
|
|
4695
4708
|
store.setState("selectionState", {
|
|
4696
4709
|
selectedCells: new Set(),
|
|
@@ -4700,7 +4713,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
4700
4713
|
store.setState("rowSelection", {});
|
|
4701
4714
|
});
|
|
4702
4715
|
}, [store]);
|
|
4703
|
-
const selectAll = React$
|
|
4716
|
+
const selectAll = React$15.useCallback(() => {
|
|
4704
4717
|
const allCells = new Set();
|
|
4705
4718
|
const currentTable = tableRef.current;
|
|
4706
4719
|
const rows = currentTable?.getRowModel().rows ?? [];
|
|
@@ -4727,7 +4740,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
4727
4740
|
data.length,
|
|
4728
4741
|
store
|
|
4729
4742
|
]);
|
|
4730
|
-
const selectColumn = React$
|
|
4743
|
+
const selectColumn = React$15.useCallback((columnId) => {
|
|
4731
4744
|
const currentTable = tableRef.current;
|
|
4732
4745
|
const rows = currentTable?.getRowModel().rows ?? [];
|
|
4733
4746
|
const rowCount = rows.length ?? data.length;
|
|
@@ -4749,7 +4762,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
4749
4762
|
isSelecting: false
|
|
4750
4763
|
});
|
|
4751
4764
|
}, [data.length, store]);
|
|
4752
|
-
const selectRange = React$
|
|
4765
|
+
const selectRange = React$15.useCallback((start, end, isSelecting = false) => {
|
|
4753
4766
|
const visibleCols = getNavigableColumnIds();
|
|
4754
4767
|
const startColIndex = visibleCols.indexOf(start.columnId);
|
|
4755
4768
|
const endColIndex = visibleCols.indexOf(end.columnId);
|
|
@@ -4771,7 +4784,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
4771
4784
|
isSelecting
|
|
4772
4785
|
});
|
|
4773
4786
|
}, [getNavigableColumnIds, store]);
|
|
4774
|
-
const focusCell = React$
|
|
4787
|
+
const focusCell = React$15.useCallback((rowIndex, columnId) => {
|
|
4775
4788
|
store.batch(() => {
|
|
4776
4789
|
store.setState("focusedCell", {
|
|
4777
4790
|
rowIndex,
|
|
@@ -4787,7 +4800,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
4787
4800
|
if (currentState.searchOpen) return;
|
|
4788
4801
|
if (dataGridRef.current && document.activeElement !== dataGridRef.current) dataGridRef.current.focus();
|
|
4789
4802
|
}, [store, onCellFocusProp]);
|
|
4790
|
-
const onRowsDelete = React$
|
|
4803
|
+
const onRowsDelete = React$15.useCallback(async (rowIndices) => {
|
|
4791
4804
|
if (!onRowsDeleteProp || rowIndices.length === 0) return;
|
|
4792
4805
|
const currentTable = tableRef.current;
|
|
4793
4806
|
const rows = currentTable?.getRowModel().rows;
|
|
@@ -4826,7 +4839,20 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
4826
4839
|
getNavigableColumnIds,
|
|
4827
4840
|
focusCell
|
|
4828
4841
|
]);
|
|
4829
|
-
|
|
4842
|
+
/**
|
|
4843
|
+
* Debounced row click handler - KEYBOARD NAVIGATION ONLY
|
|
4844
|
+
*
|
|
4845
|
+
* This debounced version (300ms delay) is used exclusively for keyboard navigation
|
|
4846
|
+
* (arrow keys, Page Up/Down, etc.) to prevent browser history pollution from rapid
|
|
4847
|
+
* key presses when using keyField-based URL routing.
|
|
4848
|
+
*
|
|
4849
|
+
* Mouse clicks use the immediate `onRowClickProp` handler directly (passed via table.meta.onRowClick)
|
|
4850
|
+
* since clicks are deliberate user actions that don't require debouncing.
|
|
4851
|
+
*/
|
|
4852
|
+
const debouncedRowClick = useDebouncedCallback((rowIndex) => {
|
|
4853
|
+
onRowClickProp?.(rowIndex);
|
|
4854
|
+
}, 300);
|
|
4855
|
+
const navigateCell = React$15.useCallback((direction) => {
|
|
4830
4856
|
const currentState = store.getState();
|
|
4831
4857
|
if (!currentState.focusedCell) return;
|
|
4832
4858
|
const { rowIndex, columnId } = currentState.focusedCell;
|
|
@@ -4896,6 +4922,8 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
4896
4922
|
}
|
|
4897
4923
|
if (newRowIndex !== rowIndex || newColumnId !== columnId) {
|
|
4898
4924
|
const rowDiff = newRowIndex - rowIndex;
|
|
4925
|
+
const rowChanged = newRowIndex !== rowIndex;
|
|
4926
|
+
if (rowChanged && onRowClickProp) debouncedRowClick(newRowIndex);
|
|
4899
4927
|
if (Math.abs(rowDiff) === 1 && (direction === "up" || direction === "down")) {
|
|
4900
4928
|
const container = dataGridRef.current;
|
|
4901
4929
|
const currentRow = rowMapRef.current.get(rowIndex);
|
|
@@ -4950,9 +4978,11 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
4950
4978
|
getNavigableColumnIds,
|
|
4951
4979
|
focusCell,
|
|
4952
4980
|
data.length,
|
|
4953
|
-
rowHeightValue
|
|
4981
|
+
rowHeightValue,
|
|
4982
|
+
onRowClickProp,
|
|
4983
|
+
debouncedRowClick
|
|
4954
4984
|
]);
|
|
4955
|
-
const onCellEditingStart = React$
|
|
4985
|
+
const onCellEditingStart = React$15.useCallback((rowIndex, columnId) => {
|
|
4956
4986
|
store.batch(() => {
|
|
4957
4987
|
store.setState("focusedCell", {
|
|
4958
4988
|
rowIndex,
|
|
@@ -4964,7 +4994,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
4964
4994
|
});
|
|
4965
4995
|
});
|
|
4966
4996
|
}, [store]);
|
|
4967
|
-
const onCellEditingStop = React$
|
|
4997
|
+
const onCellEditingStop = React$15.useCallback((opts) => {
|
|
4968
4998
|
const currentState = store.getState();
|
|
4969
4999
|
const currentEditing = currentState.editingCell;
|
|
4970
5000
|
store.setState("editingCell", null);
|
|
@@ -4990,7 +5020,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
4990
5020
|
focusCell,
|
|
4991
5021
|
navigateCell
|
|
4992
5022
|
]);
|
|
4993
|
-
const onSearchOpenChange = React$
|
|
5023
|
+
const onSearchOpenChange = React$15.useCallback((open) => {
|
|
4994
5024
|
if (open) {
|
|
4995
5025
|
store.setState("searchOpen", true);
|
|
4996
5026
|
return;
|
|
@@ -5009,7 +5039,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5009
5039
|
});
|
|
5010
5040
|
if (dataGridRef.current && document.activeElement !== dataGridRef.current) dataGridRef.current.focus();
|
|
5011
5041
|
}, [store]);
|
|
5012
|
-
const onSearch = React$
|
|
5042
|
+
const onSearch = React$15.useCallback((query) => {
|
|
5013
5043
|
if (!query.trim()) {
|
|
5014
5044
|
store.batch(() => {
|
|
5015
5045
|
store.setState("searchMatches", []);
|
|
@@ -5044,8 +5074,8 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5044
5074
|
rowVirtualizerRef.current?.scrollToIndex(firstMatch.rowIndex, { align: "center" });
|
|
5045
5075
|
}
|
|
5046
5076
|
}, [columnIds, store]);
|
|
5047
|
-
const onSearchQueryChange = React$
|
|
5048
|
-
const onNavigateToPrevMatch = React$
|
|
5077
|
+
const onSearchQueryChange = React$15.useCallback((query) => store.setState("searchQuery", query), [store]);
|
|
5078
|
+
const onNavigateToPrevMatch = React$15.useCallback(() => {
|
|
5049
5079
|
const currentState = store.getState();
|
|
5050
5080
|
if (currentState.searchMatches.length === 0) return;
|
|
5051
5081
|
const prevIndex = currentState.matchIndex - 1 < 0 ? currentState.searchMatches.length - 1 : currentState.matchIndex - 1;
|
|
@@ -5060,7 +5090,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5060
5090
|
});
|
|
5061
5091
|
}
|
|
5062
5092
|
}, [store, focusCell]);
|
|
5063
|
-
const onNavigateToNextMatch = React$
|
|
5093
|
+
const onNavigateToNextMatch = React$15.useCallback(() => {
|
|
5064
5094
|
const currentState = store.getState();
|
|
5065
5095
|
if (currentState.searchMatches.length === 0) return;
|
|
5066
5096
|
const nextIndex = (currentState.matchIndex + 1) % currentState.searchMatches.length;
|
|
@@ -5075,15 +5105,15 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5075
5105
|
});
|
|
5076
5106
|
}
|
|
5077
5107
|
}, [store, focusCell]);
|
|
5078
|
-
const getIsSearchMatch = React$
|
|
5108
|
+
const getIsSearchMatch = React$15.useCallback((rowIndex, columnId) => {
|
|
5079
5109
|
return searchMatches.some((match) => match.rowIndex === rowIndex && match.columnId === columnId);
|
|
5080
5110
|
}, [searchMatches]);
|
|
5081
|
-
const getIsActiveSearchMatch = React$
|
|
5111
|
+
const getIsActiveSearchMatch = React$15.useCallback((rowIndex, columnId) => {
|
|
5082
5112
|
if (matchIndex < 0) return false;
|
|
5083
5113
|
const currentMatch = searchMatches[matchIndex];
|
|
5084
5114
|
return currentMatch?.rowIndex === rowIndex && currentMatch?.columnId === columnId;
|
|
5085
5115
|
}, [searchMatches, matchIndex]);
|
|
5086
|
-
const blurCell = React$
|
|
5116
|
+
const blurCell = React$15.useCallback(() => {
|
|
5087
5117
|
const currentState = store.getState();
|
|
5088
5118
|
if (currentState.editingCell && document.activeElement instanceof HTMLElement) document.activeElement.blur();
|
|
5089
5119
|
store.batch(() => {
|
|
@@ -5091,7 +5121,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5091
5121
|
store.setState("editingCell", null);
|
|
5092
5122
|
});
|
|
5093
5123
|
}, [store]);
|
|
5094
|
-
const onCellClick = React$
|
|
5124
|
+
const onCellClick = React$15.useCallback((rowIndex, columnId, event) => {
|
|
5095
5125
|
if (event?.button === 2) return;
|
|
5096
5126
|
const currentState = store.getState();
|
|
5097
5127
|
const currentFocused = currentState.focusedCell;
|
|
@@ -5139,11 +5169,11 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5139
5169
|
selectRange,
|
|
5140
5170
|
clearSelection
|
|
5141
5171
|
]);
|
|
5142
|
-
const onCellDoubleClick = React$
|
|
5172
|
+
const onCellDoubleClick = React$15.useCallback((rowIndex, columnId, event) => {
|
|
5143
5173
|
if (event?.defaultPrevented) return;
|
|
5144
5174
|
onCellEditingStart(rowIndex, columnId);
|
|
5145
5175
|
}, [onCellEditingStart]);
|
|
5146
|
-
const onCellMouseDown = React$
|
|
5176
|
+
const onCellMouseDown = React$15.useCallback((rowIndex, columnId, event) => {
|
|
5147
5177
|
if (event.button === 2) return;
|
|
5148
5178
|
event.preventDefault();
|
|
5149
5179
|
if (!event.ctrlKey && !event.metaKey && !event.shiftKey) store.batch(() => {
|
|
@@ -5164,7 +5194,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5164
5194
|
store.setState("rowSelection", {});
|
|
5165
5195
|
});
|
|
5166
5196
|
}, [store]);
|
|
5167
|
-
const onCellMouseEnter = React$
|
|
5197
|
+
const onCellMouseEnter = React$15.useCallback((rowIndex, columnId, _event) => {
|
|
5168
5198
|
const currentState = store.getState();
|
|
5169
5199
|
if (currentState.selectionState.isSelecting && currentState.selectionState.selectionRange) {
|
|
5170
5200
|
const start = currentState.selectionState.selectionRange.start;
|
|
@@ -5180,14 +5210,14 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5180
5210
|
selectRange,
|
|
5181
5211
|
focusCell
|
|
5182
5212
|
]);
|
|
5183
|
-
const onCellMouseUp = React$
|
|
5213
|
+
const onCellMouseUp = React$15.useCallback(() => {
|
|
5184
5214
|
const currentState = store.getState();
|
|
5185
5215
|
store.setState("selectionState", {
|
|
5186
5216
|
...currentState.selectionState,
|
|
5187
5217
|
isSelecting: false
|
|
5188
5218
|
});
|
|
5189
5219
|
}, [store]);
|
|
5190
|
-
const onCellContextMenu = React$
|
|
5220
|
+
const onCellContextMenu = React$15.useCallback((rowIndex, columnId, event) => {
|
|
5191
5221
|
event.preventDefault();
|
|
5192
5222
|
event.stopPropagation();
|
|
5193
5223
|
const currentState = store.getState();
|
|
@@ -5219,7 +5249,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5219
5249
|
y: event.clientY
|
|
5220
5250
|
});
|
|
5221
5251
|
}, [store]);
|
|
5222
|
-
const onContextMenuOpenChange = React$
|
|
5252
|
+
const onContextMenuOpenChange = React$15.useCallback((open) => {
|
|
5223
5253
|
if (!open) {
|
|
5224
5254
|
const currentMenu = store.getState().contextMenu;
|
|
5225
5255
|
store.setState("contextMenu", {
|
|
@@ -5229,7 +5259,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5229
5259
|
});
|
|
5230
5260
|
}
|
|
5231
5261
|
}, [store]);
|
|
5232
|
-
const onDataGridKeyDown = React$
|
|
5262
|
+
const onDataGridKeyDown = React$15.useCallback((event) => {
|
|
5233
5263
|
const currentState = store.getState();
|
|
5234
5264
|
const { key, ctrlKey, metaKey, shiftKey } = event;
|
|
5235
5265
|
const isCtrlPressed = ctrlKey || metaKey;
|
|
@@ -5318,6 +5348,16 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5318
5348
|
if (currentState.selectionState.selectedCells.size > 0 || Object.keys(currentState.rowSelection).length > 0) clearSelection();
|
|
5319
5349
|
else blurCell();
|
|
5320
5350
|
return;
|
|
5351
|
+
case "F2":
|
|
5352
|
+
if (currentState.focusedCell) {
|
|
5353
|
+
event.preventDefault();
|
|
5354
|
+
onCellEditingStart(currentState.focusedCell.rowIndex, currentState.focusedCell.columnId);
|
|
5355
|
+
}
|
|
5356
|
+
return;
|
|
5357
|
+
case "Enter":
|
|
5358
|
+
event.preventDefault();
|
|
5359
|
+
direction = shiftKey ? "up" : "down";
|
|
5360
|
+
break;
|
|
5321
5361
|
case "Tab":
|
|
5322
5362
|
event.preventDefault();
|
|
5323
5363
|
direction = event.shiftKey ? "left" : "right";
|
|
@@ -5375,9 +5415,10 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5375
5415
|
onSearchOpenChange,
|
|
5376
5416
|
onNavigateToNextMatch,
|
|
5377
5417
|
onNavigateToPrevMatch,
|
|
5378
|
-
enableSearch
|
|
5418
|
+
enableSearch,
|
|
5419
|
+
onCellEditingStart
|
|
5379
5420
|
]);
|
|
5380
|
-
const onSortingChange = React$
|
|
5421
|
+
const onSortingChange = React$15.useCallback((updater) => {
|
|
5381
5422
|
if (manualSorting && externalOnSortingChange) externalOnSortingChange(updater);
|
|
5382
5423
|
else {
|
|
5383
5424
|
const currentState = store.getState();
|
|
@@ -5389,7 +5430,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5389
5430
|
manualSorting,
|
|
5390
5431
|
externalOnSortingChange
|
|
5391
5432
|
]);
|
|
5392
|
-
const onRowSelectionChange = React$
|
|
5433
|
+
const onRowSelectionChange = React$15.useCallback((updater) => {
|
|
5393
5434
|
const currentState = store.getState();
|
|
5394
5435
|
const newRowSelection = typeof updater === "function" ? updater(currentState.rowSelection) : updater;
|
|
5395
5436
|
const selectedRows = Object.keys(newRowSelection).filter((key) => newRowSelection[key]);
|
|
@@ -5411,7 +5452,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5411
5452
|
store.setState("editingCell", null);
|
|
5412
5453
|
});
|
|
5413
5454
|
}, [store, columnIds]);
|
|
5414
|
-
const onRowSelect = React$
|
|
5455
|
+
const onRowSelect = React$15.useCallback((rowIndex, selected, shiftKey) => {
|
|
5415
5456
|
const currentState = store.getState();
|
|
5416
5457
|
const rows = tableRef.current?.getRowModel().rows ?? [];
|
|
5417
5458
|
const currentRow = rows[rowIndex];
|
|
@@ -5431,12 +5472,12 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5431
5472
|
});
|
|
5432
5473
|
store.setState("lastClickedRowIndex", rowIndex);
|
|
5433
5474
|
}, [store, onRowSelectionChange]);
|
|
5434
|
-
const onRowHeightChange = React$
|
|
5475
|
+
const onRowHeightChange = React$15.useCallback((updater) => {
|
|
5435
5476
|
const currentState = store.getState();
|
|
5436
5477
|
const newRowHeight = typeof updater === "function" ? updater(currentState.rowHeight) : updater;
|
|
5437
5478
|
store.setState("rowHeight", newRowHeight);
|
|
5438
5479
|
}, [store]);
|
|
5439
|
-
const onColumnClick = React$
|
|
5480
|
+
const onColumnClick = React$15.useCallback((columnId) => {
|
|
5440
5481
|
if (!enableColumnSelection) {
|
|
5441
5482
|
clearSelection();
|
|
5442
5483
|
return;
|
|
@@ -5447,13 +5488,13 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5447
5488
|
selectColumn,
|
|
5448
5489
|
clearSelection
|
|
5449
5490
|
]);
|
|
5450
|
-
const defaultColumn = React$
|
|
5491
|
+
const defaultColumn = React$15.useMemo(() => ({
|
|
5451
5492
|
cell: DataGridCell,
|
|
5452
5493
|
minSize: MIN_COLUMN_SIZE,
|
|
5453
5494
|
maxSize: MAX_COLUMN_SIZE
|
|
5454
5495
|
}), []);
|
|
5455
5496
|
const effectiveSorting = manualSorting && externalSorting ? externalSorting : sorting;
|
|
5456
|
-
const tableOptions = React$
|
|
5497
|
+
const tableOptions = React$15.useMemo(() => ({
|
|
5457
5498
|
...dataGridPropsRef.current,
|
|
5458
5499
|
data,
|
|
5459
5500
|
columns,
|
|
@@ -5479,6 +5520,8 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5479
5520
|
searchOpen,
|
|
5480
5521
|
rowHeight,
|
|
5481
5522
|
isScrolling,
|
|
5523
|
+
highlightedRowIndex,
|
|
5524
|
+
onRowClick: onRowClickProp,
|
|
5482
5525
|
getIsCellSelected,
|
|
5483
5526
|
getIsSearchMatch,
|
|
5484
5527
|
getIsActiveSearchMatch,
|
|
@@ -5514,6 +5557,8 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5514
5557
|
selectionState,
|
|
5515
5558
|
searchOpen,
|
|
5516
5559
|
isScrolling,
|
|
5560
|
+
highlightedRowIndex,
|
|
5561
|
+
onRowClickProp,
|
|
5517
5562
|
getIsCellSelected,
|
|
5518
5563
|
getIsSearchMatch,
|
|
5519
5564
|
getIsActiveSearchMatch,
|
|
@@ -5539,7 +5584,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5539
5584
|
if (!tableRef.current) tableRef.current = table;
|
|
5540
5585
|
const columnSizing = table.getState().columnSizing;
|
|
5541
5586
|
const columnVisibility = table.getState().columnVisibility;
|
|
5542
|
-
const columnSizeVars = React$
|
|
5587
|
+
const columnSizeVars = React$15.useMemo(() => {
|
|
5543
5588
|
const headers = table.getFlatHeaders();
|
|
5544
5589
|
const colSizes = {};
|
|
5545
5590
|
for (const header of headers) {
|
|
@@ -5581,7 +5626,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5581
5626
|
}
|
|
5582
5627
|
});
|
|
5583
5628
|
if (!rowVirtualizerRef.current) rowVirtualizerRef.current = rowVirtualizer;
|
|
5584
|
-
const onScrollToRow = React$
|
|
5629
|
+
const onScrollToRow = React$15.useCallback((opts) => {
|
|
5585
5630
|
const rowIndex = opts?.rowIndex ?? 0;
|
|
5586
5631
|
const columnId = opts?.columnId;
|
|
5587
5632
|
rowVirtualizer.scrollToIndex(rowIndex, { align: "center" });
|
|
@@ -5605,7 +5650,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5605
5650
|
getNavigableColumnIds,
|
|
5606
5651
|
store
|
|
5607
5652
|
]);
|
|
5608
|
-
const onRowAdd = React$
|
|
5653
|
+
const onRowAdd = React$15.useCallback(async (event) => {
|
|
5609
5654
|
if (!onRowAddProp) return;
|
|
5610
5655
|
const result = await onRowAddProp(event);
|
|
5611
5656
|
if (event?.defaultPrevented || result === null) return;
|
|
@@ -5638,7 +5683,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5638
5683
|
table.getState().columnVisibility,
|
|
5639
5684
|
table.getState().columnPinning
|
|
5640
5685
|
]);
|
|
5641
|
-
const searchState = React$
|
|
5686
|
+
const searchState = React$15.useMemo(() => {
|
|
5642
5687
|
if (!enableSearch) return void 0;
|
|
5643
5688
|
return {
|
|
5644
5689
|
searchMatches,
|
|
@@ -5663,7 +5708,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5663
5708
|
onNavigateToNextMatch,
|
|
5664
5709
|
onNavigateToPrevMatch
|
|
5665
5710
|
]);
|
|
5666
|
-
React$
|
|
5711
|
+
React$15.useEffect(() => {
|
|
5667
5712
|
const dataGridElement = dataGridRef.current;
|
|
5668
5713
|
if (!dataGridElement) return;
|
|
5669
5714
|
dataGridElement.addEventListener("keydown", onDataGridKeyDown);
|
|
@@ -5671,7 +5716,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5671
5716
|
dataGridElement.removeEventListener("keydown", onDataGridKeyDown);
|
|
5672
5717
|
};
|
|
5673
5718
|
}, [onDataGridKeyDown]);
|
|
5674
|
-
React$
|
|
5719
|
+
React$15.useEffect(() => {
|
|
5675
5720
|
function onGlobalKeyDown(event) {
|
|
5676
5721
|
const dataGridElement = dataGridRef.current;
|
|
5677
5722
|
if (!dataGridElement) return;
|
|
@@ -5715,7 +5760,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5715
5760
|
store,
|
|
5716
5761
|
clearSelection
|
|
5717
5762
|
]);
|
|
5718
|
-
React$
|
|
5763
|
+
React$15.useEffect(() => {
|
|
5719
5764
|
const currentState = store.getState();
|
|
5720
5765
|
if (autoFocus && data.length > 0 && columns.length > 0 && !currentState.focusedCell) {
|
|
5721
5766
|
const _nav = getNavigableColumnIds();
|
|
@@ -5741,7 +5786,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5741
5786
|
getNavigableColumnIds,
|
|
5742
5787
|
focusCell
|
|
5743
5788
|
]);
|
|
5744
|
-
React$
|
|
5789
|
+
React$15.useEffect(() => {
|
|
5745
5790
|
function onOutsideClick(event) {
|
|
5746
5791
|
if (event.button === 2) return;
|
|
5747
5792
|
if (dataGridRef.current && !dataGridRef.current.contains(event.target)) {
|
|
@@ -5763,7 +5808,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5763
5808
|
blurCell,
|
|
5764
5809
|
clearSelection
|
|
5765
5810
|
]);
|
|
5766
|
-
React$
|
|
5811
|
+
React$15.useEffect(() => {
|
|
5767
5812
|
function onCleanup() {
|
|
5768
5813
|
document.removeEventListener("selectstart", preventSelection);
|
|
5769
5814
|
document.removeEventListener("contextmenu", preventContextMenu);
|
|
@@ -5823,7 +5868,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
|
|
|
5823
5868
|
//#endregion
|
|
5824
5869
|
//#region src/date-picker/date-picker.tsx
|
|
5825
5870
|
function DatePickerDemo() {
|
|
5826
|
-
const [date, setDate] = React$
|
|
5871
|
+
const [date, setDate] = React$14.useState();
|
|
5827
5872
|
return /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
|
|
5828
5873
|
asChild: true,
|
|
5829
5874
|
children: /* @__PURE__ */ jsxs(Button, {
|
|
@@ -5853,13 +5898,13 @@ Drawer.displayName = "Drawer";
|
|
|
5853
5898
|
const DrawerTrigger = Drawer$1.Trigger;
|
|
5854
5899
|
const DrawerPortal = Drawer$1.Portal;
|
|
5855
5900
|
const DrawerClose = Drawer$1.Close;
|
|
5856
|
-
const DrawerOverlay = React$
|
|
5901
|
+
const DrawerOverlay = React$13.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Drawer$1.Overlay, {
|
|
5857
5902
|
ref,
|
|
5858
5903
|
className: cn("fixed inset-0 z-50 bg-black/80", className),
|
|
5859
5904
|
...props
|
|
5860
5905
|
}));
|
|
5861
5906
|
DrawerOverlay.displayName = Drawer$1.Overlay.displayName;
|
|
5862
|
-
const DrawerContent = React$
|
|
5907
|
+
const DrawerContent = React$13.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsxs(DrawerPortal, { children: [/* @__PURE__ */ jsx(DrawerOverlay, {}), /* @__PURE__ */ jsxs(Drawer$1.Content, {
|
|
5863
5908
|
ref,
|
|
5864
5909
|
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
5910
|
...props,
|
|
@@ -5876,13 +5921,13 @@ const DrawerFooter = ({ className,...props }) => /* @__PURE__ */ jsx("div", {
|
|
|
5876
5921
|
...props
|
|
5877
5922
|
});
|
|
5878
5923
|
DrawerFooter.displayName = "DrawerFooter";
|
|
5879
|
-
const DrawerTitle = React$
|
|
5924
|
+
const DrawerTitle = React$13.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Drawer$1.Title, {
|
|
5880
5925
|
ref,
|
|
5881
5926
|
className: cn("text-lg font-semibold leading-none tracking-tight", className),
|
|
5882
5927
|
...props
|
|
5883
5928
|
}));
|
|
5884
5929
|
DrawerTitle.displayName = Drawer$1.Title.displayName;
|
|
5885
|
-
const DrawerDescription = React$
|
|
5930
|
+
const DrawerDescription = React$13.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Drawer$1.Description, {
|
|
5886
5931
|
ref,
|
|
5887
5932
|
className: cn("text-sm text-muted-foreground", className),
|
|
5888
5933
|
...props
|
|
@@ -5901,7 +5946,7 @@ function Label({ className,...props }) {
|
|
|
5901
5946
|
|
|
5902
5947
|
//#endregion
|
|
5903
5948
|
//#region src/separator/separator.tsx
|
|
5904
|
-
const Separator = React$
|
|
5949
|
+
const Separator = React$12.forwardRef(({ className, orientation = "horizontal", decorative = true,...props }, ref) => /* @__PURE__ */ jsx(SeparatorPrimitive.Root, {
|
|
5905
5950
|
ref,
|
|
5906
5951
|
decorative,
|
|
5907
5952
|
orientation,
|
|
@@ -6023,8 +6068,8 @@ function FieldError({ className, children, errors,...props }) {
|
|
|
6023
6068
|
//#endregion
|
|
6024
6069
|
//#region src/hooks/use-is-mobile.ts
|
|
6025
6070
|
function useIsMobile(mobileBreakpoint = 768) {
|
|
6026
|
-
const [isMobile, setIsMobile] = React$
|
|
6027
|
-
React$
|
|
6071
|
+
const [isMobile, setIsMobile] = React$11.useState(false);
|
|
6072
|
+
React$11.useEffect(() => {
|
|
6028
6073
|
const mql = globalThis.matchMedia(`(max-width: ${mobileBreakpoint - 1}px)`);
|
|
6029
6074
|
const onChange = () => {
|
|
6030
6075
|
setIsMobile(globalThis.innerWidth < mobileBreakpoint);
|
|
@@ -6036,6 +6081,89 @@ function useIsMobile(mobileBreakpoint = 768) {
|
|
|
6036
6081
|
return isMobile;
|
|
6037
6082
|
}
|
|
6038
6083
|
|
|
6084
|
+
//#endregion
|
|
6085
|
+
//#region src/input/number-input.tsx
|
|
6086
|
+
/**
|
|
6087
|
+
* Wrapper variants that mirror inputVariants but use focus-within (for wrapper)
|
|
6088
|
+
* instead of focus-visible (for input element).
|
|
6089
|
+
* NOTE: When modifying variants, also update inputVariants in input.tsx
|
|
6090
|
+
*/
|
|
6091
|
+
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", {
|
|
6092
|
+
variants: { variant: {
|
|
6093
|
+
default: "min-h-9 focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]",
|
|
6094
|
+
simple: "min-h-8"
|
|
6095
|
+
} },
|
|
6096
|
+
defaultVariants: { variant: "default" }
|
|
6097
|
+
});
|
|
6098
|
+
const NumberInput = React$10.forwardRef(({ className, wrapperClassName, prefix, suffix, variant, showSpinButtons = false, __e2e_test_id__, onEnter,...props }, ref) => {
|
|
6099
|
+
const focusInputAtPosition = (element, cursor) => {
|
|
6100
|
+
const parent = element.parentElement;
|
|
6101
|
+
if (!parent) return;
|
|
6102
|
+
const input = parent.querySelector("input");
|
|
6103
|
+
if (!input) return;
|
|
6104
|
+
input.type = "text";
|
|
6105
|
+
if (cursor === "start") input.setSelectionRange(0, 0);
|
|
6106
|
+
else {
|
|
6107
|
+
const length = input.value.length;
|
|
6108
|
+
input.setSelectionRange(length, length);
|
|
6109
|
+
}
|
|
6110
|
+
input.type = "number";
|
|
6111
|
+
input.click();
|
|
6112
|
+
input.focus();
|
|
6113
|
+
};
|
|
6114
|
+
const handleLabelClick = (e, cursor) => {
|
|
6115
|
+
e.preventDefault();
|
|
6116
|
+
focusInputAtPosition(e.target, cursor);
|
|
6117
|
+
};
|
|
6118
|
+
const handleLabelKeyDown = (e, cursor) => {
|
|
6119
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
6120
|
+
e.preventDefault();
|
|
6121
|
+
focusInputAtPosition(e.target, cursor);
|
|
6122
|
+
}
|
|
6123
|
+
};
|
|
6124
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
6125
|
+
className: cn(numberInputWrapperVariants({ variant }), wrapperClassName),
|
|
6126
|
+
children: [
|
|
6127
|
+
prefix && /* @__PURE__ */ jsx("span", {
|
|
6128
|
+
className: "text-muted-foreground flex h-full cursor-text items-center pl-2 pr-1",
|
|
6129
|
+
onClick: (e) => handleLabelClick(e, "start"),
|
|
6130
|
+
onKeyDown: (e) => handleLabelKeyDown(e, "start"),
|
|
6131
|
+
children: prefix
|
|
6132
|
+
}),
|
|
6133
|
+
/* @__PURE__ */ jsx("input", {
|
|
6134
|
+
type: "number",
|
|
6135
|
+
"data-slot": "input",
|
|
6136
|
+
className: cn(
|
|
6137
|
+
inputVariants({ variant }),
|
|
6138
|
+
// Remove border/shadow/ring from input since wrapper handles it
|
|
6139
|
+
// 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
|
|
6140
|
+
"min-h-full border-0 shadow-none focus-visible:ring-0 p-0 tabular-nums",
|
|
6141
|
+
!prefix && !suffix ? "col-span-3" : !prefix || !suffix ? "col-span-2" : "col-span-1",
|
|
6142
|
+
"text-right",
|
|
6143
|
+
!prefix && "pl-2",
|
|
6144
|
+
!suffix && (showSpinButtons ? "pr-1" : "pr-2"),
|
|
6145
|
+
!showSpinButtons && "appearance-none",
|
|
6146
|
+
className
|
|
6147
|
+
),
|
|
6148
|
+
"data-test-id": __e2e_test_id__,
|
|
6149
|
+
ref,
|
|
6150
|
+
onKeyDown: (e) => {
|
|
6151
|
+
props.onKeyDown?.(e);
|
|
6152
|
+
if (e.key === "Enter") onEnter?.();
|
|
6153
|
+
},
|
|
6154
|
+
...props
|
|
6155
|
+
}),
|
|
6156
|
+
suffix && /* @__PURE__ */ jsx("span", {
|
|
6157
|
+
className: cn("text-muted-foreground flex h-full cursor-text items-center pr-2", showSpinButtons ? "pl-0" : "pl-1"),
|
|
6158
|
+
onClick: (e) => handleLabelClick(e, "end"),
|
|
6159
|
+
onKeyDown: (e) => handleLabelKeyDown(e, "end"),
|
|
6160
|
+
children: suffix
|
|
6161
|
+
})
|
|
6162
|
+
]
|
|
6163
|
+
});
|
|
6164
|
+
});
|
|
6165
|
+
NumberInput.displayName = "NumberInput";
|
|
6166
|
+
|
|
6039
6167
|
//#endregion
|
|
6040
6168
|
//#region src/mark-value-renderer/mark-value-renderer.tsx
|
|
6041
6169
|
/**
|
|
@@ -7197,5 +7325,5 @@ const ToggleGroupItem = React$1.forwardRef(({ className, children, variant, size
|
|
|
7197
7325
|
ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
|
|
7198
7326
|
|
|
7199
7327
|
//#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 };
|
|
7328
|
+
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
7329
|
//# sourceMappingURL=index.js.map
|