@customafk/lunas-ui 0.0.73 → 0.0.74
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/{button-DikL7zwS.d.ts → button-BSbpgPcU.d.ts} +6 -6
- package/dist/{button-DoAx4aaD.d.cts → button-CP7eGMBD.d.cts} +6 -6
- package/dist/cards/simple-card.d.cts +2 -2
- package/dist/{command-BUBPlGK4.d.ts → command-B573Pd57.d.ts} +12 -12
- package/dist/{command-rxs0v832.d.cts → command-Be5dDVBo.d.cts} +12 -12
- package/dist/data-display/empty.d.ts +2 -2
- package/dist/data-display/statistic.d.cts +2 -2
- package/dist/{dialog-BBDmpwtY.d.cts → dialog-CDS4oetv.d.cts} +12 -12
- package/dist/{dialog-DUEQa9I5.d.ts → dialog-CbwE12Bt.d.ts} +12 -12
- package/dist/dialogs/detail-dialog/component/sidebar.d.cts +4 -4
- package/dist/dialogs/detail-dialog/component/sidebar.d.ts +4 -4
- package/dist/dialogs/form-dialog.d.cts +2 -2
- package/dist/dialogs/form-dialog.d.ts +2 -2
- package/dist/forms/combobox-field.d.cts +2 -2
- package/dist/forms/combobox-field.d.ts +2 -2
- package/dist/forms/date-field.d.cts +2 -2
- package/dist/forms/date-field.d.ts +2 -2
- package/dist/forms/form-wrapper.d.cts +2 -2
- package/dist/forms/form-wrapper.d.ts +2 -2
- package/dist/forms/multi-select-field.d.cts +2 -2
- package/dist/forms/multi-select-field.d.ts +2 -2
- package/dist/forms/number-field.d.cts +2 -2
- package/dist/forms/number-field.d.ts +2 -2
- package/dist/forms/password-field.d.cts +2 -2
- package/dist/forms/password-field.d.ts +2 -2
- package/dist/forms/select-field.d.cts +2 -2
- package/dist/forms/select-field.d.ts +2 -2
- package/dist/forms/switch-field.d.cts +2 -2
- package/dist/forms/switch-field.d.ts +2 -2
- package/dist/forms/text-field.d.cts +2 -2
- package/dist/forms/text-field.d.ts +2 -2
- package/dist/forms/textarea-field.d.cts +2 -2
- package/dist/forms/textarea-field.d.ts +2 -2
- package/dist/{input-DvX75CSu.d.cts → input-B29k_HFS.d.cts} +3 -3
- package/dist/{input-DomGaN2h.d.ts → input-DNUBzDBp.d.ts} +3 -3
- package/dist/layouts/app-layout/index.d.cts +5 -5
- package/dist/layouts/app-layout/index.d.ts +28 -28
- package/dist/layouts/flex.d.cts +2 -2
- package/dist/layouts/flex.d.ts +2 -2
- package/dist/layouts/service-layout/index.d.cts +3 -3
- package/dist/layouts/service-layout/index.d.ts +15 -15
- package/dist/{separator-CkPhyUEI.d.ts → separator-9Tfop9BA.d.ts} +3 -3
- package/dist/{separator-B0ekl2cm.d.cts → separator-CM1kQQxq.d.cts} +3 -3
- package/dist/table/index.cjs +1 -1
- package/dist/table/index.cjs.map +1 -1
- package/dist/table/index.d.cts +4 -2
- package/dist/table/index.d.ts +4 -2
- package/dist/table/index.js +1 -1
- package/dist/table/index.js.map +1 -1
- package/dist/{toggle-vH-BH18X.d.ts → toggle-CpmkuACW.d.ts} +5 -5
- package/dist/{toggle-C2H0HKpd.d.cts → toggle-DK6k1TbN.d.cts} +5 -5
- package/dist/{tooltip-BhypOt39.d.cts → tooltip-2nMDXmIC.d.cts} +6 -6
- package/dist/{tooltip-Dibm3gcf.d.ts → tooltip-D3LmNLDU.d.ts} +6 -6
- package/dist/typography/paragraph.d.cts +2 -2
- package/dist/typography/paragraph.d.ts +2 -2
- package/dist/typography/title.d.cts +2 -2
- package/dist/typography/title.d.ts +2 -2
- package/dist/ui/alert-dialog.d.cts +12 -12
- package/dist/ui/alert-dialog.d.ts +12 -12
- package/dist/ui/alert.d.cts +7 -7
- package/dist/ui/alert.d.ts +5 -5
- package/dist/ui/aspect-ratio.d.cts +2 -2
- package/dist/ui/aspect-ratio.d.ts +2 -2
- package/dist/ui/avatar.d.cts +4 -4
- package/dist/ui/avatar.d.ts +4 -4
- package/dist/ui/badge.d.cts +2 -2
- package/dist/ui/badge.d.ts +2 -2
- package/dist/ui/breadcrumb.d.cts +8 -8
- package/dist/ui/breadcrumb.d.ts +8 -8
- package/dist/ui/button.d.cts +1 -1
- package/dist/ui/button.d.ts +1 -1
- package/dist/ui/calendar.d.cts +4 -4
- package/dist/ui/calendar.d.ts +4 -4
- package/dist/ui/card.d.cts +8 -8
- package/dist/ui/card.d.ts +8 -8
- package/dist/ui/carousel.d.cts +7 -7
- package/dist/ui/carousel.d.ts +7 -7
- package/dist/ui/collapsible.d.cts +4 -4
- package/dist/ui/collapsible.d.ts +4 -4
- package/dist/ui/command.d.cts +2 -2
- package/dist/ui/command.d.ts +2 -2
- package/dist/ui/context-menu.d.cts +16 -16
- package/dist/ui/context-menu.d.ts +16 -16
- package/dist/ui/dialog.d.cts +1 -1
- package/dist/ui/dialog.d.ts +1 -1
- package/dist/ui/dropdown-menu.d.cts +16 -16
- package/dist/ui/dropdown-menu.d.ts +16 -16
- package/dist/ui/file-uploader.d.cts +2 -2
- package/dist/ui/file-uploader.d.ts +2 -2
- package/dist/ui/form.d.cts +7 -7
- package/dist/ui/form.d.ts +7 -7
- package/dist/ui/hover-card.d.cts +4 -4
- package/dist/ui/hover-card.d.ts +4 -4
- package/dist/ui/input-otp.d.cts +5 -5
- package/dist/ui/input-otp.d.ts +5 -5
- package/dist/ui/input.d.cts +1 -1
- package/dist/ui/input.d.ts +1 -1
- package/dist/ui/inputs/search-input.d.cts +3 -3
- package/dist/ui/inputs/search-input.d.ts +3 -3
- package/dist/ui/label.d.cts +2 -2
- package/dist/ui/label.d.ts +2 -2
- package/dist/ui/menubar.d.cts +17 -17
- package/dist/ui/menubar.d.ts +17 -17
- package/dist/ui/multi-select.d.cts +2 -2
- package/dist/ui/multi-select.d.ts +2 -2
- package/dist/ui/navigation-menu.d.cts +9 -9
- package/dist/ui/navigation-menu.d.ts +9 -9
- package/dist/ui/pagination.d.cts +9 -9
- package/dist/ui/pagination.d.ts +9 -9
- package/dist/ui/popover.d.cts +5 -5
- package/dist/ui/popover.d.ts +5 -5
- package/dist/ui/progress.d.cts +2 -2
- package/dist/ui/progress.d.ts +2 -2
- package/dist/ui/radio-group.d.cts +3 -3
- package/dist/ui/radio-group.d.ts +3 -3
- package/dist/ui/resizable.d.cts +4 -4
- package/dist/ui/resizable.d.ts +4 -4
- package/dist/ui/scroll-area.d.cts +3 -3
- package/dist/ui/scroll-area.d.ts +3 -3
- package/dist/ui/select.d.cts +11 -11
- package/dist/ui/select.d.ts +11 -11
- package/dist/ui/separator.d.cts +1 -1
- package/dist/ui/separator.d.ts +1 -1
- package/dist/ui/sheet.d.cts +9 -9
- package/dist/ui/sheet.d.ts +9 -9
- package/dist/ui/sidebar.d.cts +30 -30
- package/dist/ui/sidebar.d.ts +30 -30
- package/dist/ui/skeleton.d.cts +2 -2
- package/dist/ui/skeleton.d.ts +2 -2
- package/dist/ui/slider.d.cts +2 -2
- package/dist/ui/slider.d.ts +2 -2
- package/dist/ui/sonner.d.cts +2 -2
- package/dist/ui/sonner.d.ts +2 -2
- package/dist/ui/switch.d.cts +2 -2
- package/dist/ui/switch.d.ts +2 -2
- package/dist/ui/table.d.cts +9 -9
- package/dist/ui/table.d.ts +9 -9
- package/dist/ui/tabs.d.cts +5 -5
- package/dist/ui/tabs.d.ts +5 -5
- package/dist/ui/textarea.d.cts +2 -2
- package/dist/ui/textarea.d.ts +2 -2
- package/dist/ui/toggle-group.d.cts +4 -4
- package/dist/ui/toggle-group.d.ts +4 -4
- package/dist/ui/toggle.d.cts +1 -1
- package/dist/ui/toggle.d.ts +1 -1
- package/dist/ui/tooltip.d.cts +1 -1
- package/dist/ui/tooltip.d.ts +1 -1
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react_jsx_runtime14 from "react/jsx-runtime";
|
|
2
2
|
import { FieldPath, FieldValues } from "react-hook-form";
|
|
3
3
|
|
|
4
4
|
//#region packages/components/forms/switch-field.d.ts
|
|
@@ -13,7 +13,7 @@ declare const SwitchField: <TFieldValues extends FieldValues = FieldValues>({
|
|
|
13
13
|
label,
|
|
14
14
|
description,
|
|
15
15
|
isShowErrorMsg
|
|
16
|
-
}: Props<TFieldValues>) =>
|
|
16
|
+
}: Props<TFieldValues>) => react_jsx_runtime14.JSX.Element;
|
|
17
17
|
//#endregion
|
|
18
18
|
export { SwitchField };
|
|
19
19
|
//# sourceMappingURL=switch-field.d.ts.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react_jsx_runtime30 from "react/jsx-runtime";
|
|
2
2
|
import { FieldPath, FieldValues } from "react-hook-form";
|
|
3
3
|
|
|
4
4
|
//#region packages/components/forms/text-field.d.ts
|
|
@@ -25,7 +25,7 @@ declare const TextField: <TFieldValues extends FieldValues = FieldValues>({
|
|
|
25
25
|
description,
|
|
26
26
|
className,
|
|
27
27
|
onValueChange
|
|
28
|
-
}: Props<TFieldValues>) =>
|
|
28
|
+
}: Props<TFieldValues>) => react_jsx_runtime30.JSX.Element;
|
|
29
29
|
//#endregion
|
|
30
30
|
export { TextField };
|
|
31
31
|
//# sourceMappingURL=text-field.d.cts.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react_jsx_runtime11 from "react/jsx-runtime";
|
|
2
2
|
import { FieldPath, FieldValues } from "react-hook-form";
|
|
3
3
|
|
|
4
4
|
//#region packages/components/forms/text-field.d.ts
|
|
@@ -25,7 +25,7 @@ declare const TextField: <TFieldValues extends FieldValues = FieldValues>({
|
|
|
25
25
|
description,
|
|
26
26
|
className,
|
|
27
27
|
onValueChange
|
|
28
|
-
}: Props<TFieldValues>) =>
|
|
28
|
+
}: Props<TFieldValues>) => react_jsx_runtime11.JSX.Element;
|
|
29
29
|
//#endregion
|
|
30
30
|
export { TextField };
|
|
31
31
|
//# sourceMappingURL=text-field.d.ts.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react_jsx_runtime36 from "react/jsx-runtime";
|
|
2
2
|
import { FieldPath, FieldValues } from "react-hook-form";
|
|
3
3
|
|
|
4
4
|
//#region packages/components/forms/textarea-field.d.ts
|
|
@@ -21,7 +21,7 @@ declare const TextareaField: <TFieldValues extends FieldValues = FieldValues>({
|
|
|
21
21
|
description,
|
|
22
22
|
rows,
|
|
23
23
|
onValueChange
|
|
24
|
-
}: Props<TFieldValues>) =>
|
|
24
|
+
}: Props<TFieldValues>) => react_jsx_runtime36.JSX.Element;
|
|
25
25
|
//#endregion
|
|
26
26
|
export { TextareaField };
|
|
27
27
|
//# sourceMappingURL=textarea-field.d.cts.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react_jsx_runtime5 from "react/jsx-runtime";
|
|
2
2
|
import { FieldPath, FieldValues } from "react-hook-form";
|
|
3
3
|
|
|
4
4
|
//#region packages/components/forms/textarea-field.d.ts
|
|
@@ -21,7 +21,7 @@ declare const TextareaField: <TFieldValues extends FieldValues = FieldValues>({
|
|
|
21
21
|
description,
|
|
22
22
|
rows,
|
|
23
23
|
onValueChange
|
|
24
|
-
}: Props<TFieldValues>) =>
|
|
24
|
+
}: Props<TFieldValues>) => react_jsx_runtime5.JSX.Element;
|
|
25
25
|
//#endregion
|
|
26
26
|
export { TextareaField };
|
|
27
27
|
//# sourceMappingURL=textarea-field.d.ts.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react_jsx_runtime193 from "react/jsx-runtime";
|
|
2
2
|
|
|
3
3
|
//#region packages/components/ui/input.d.ts
|
|
4
4
|
declare function Input({
|
|
@@ -8,7 +8,7 @@ declare function Input({
|
|
|
8
8
|
...props
|
|
9
9
|
}: React.ComponentProps<'input'> & {
|
|
10
10
|
onValueChange?: (value: string) => void;
|
|
11
|
-
}):
|
|
11
|
+
}): react_jsx_runtime193.JSX.Element;
|
|
12
12
|
//#endregion
|
|
13
13
|
export { Input };
|
|
14
|
-
//# sourceMappingURL=input-
|
|
14
|
+
//# sourceMappingURL=input-B29k_HFS.d.cts.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react_jsx_runtime122 from "react/jsx-runtime";
|
|
2
2
|
|
|
3
3
|
//#region packages/components/ui/input.d.ts
|
|
4
4
|
declare function Input({
|
|
@@ -8,7 +8,7 @@ declare function Input({
|
|
|
8
8
|
...props
|
|
9
9
|
}: React.ComponentProps<'input'> & {
|
|
10
10
|
onValueChange?: (value: string) => void;
|
|
11
|
-
}):
|
|
11
|
+
}): react_jsx_runtime122.JSX.Element;
|
|
12
12
|
//#endregion
|
|
13
13
|
export { Input };
|
|
14
|
-
//# sourceMappingURL=input-
|
|
14
|
+
//# sourceMappingURL=input-DNUBzDBp.d.ts.map
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { Button } from "../../button-
|
|
2
|
-
import { Separator } from "../../separator-
|
|
3
|
-
import { TooltipContent } from "../../tooltip-
|
|
1
|
+
import { Button } from "../../button-CP7eGMBD.cjs";
|
|
2
|
+
import { Separator } from "../../separator-CM1kQQxq.cjs";
|
|
3
|
+
import { TooltipContent } from "../../tooltip-2nMDXmIC.cjs";
|
|
4
4
|
import * as react_jsx_runtime259 from "react/jsx-runtime";
|
|
5
|
-
import * as
|
|
5
|
+
import * as class_variance_authority_types6 from "class-variance-authority/types";
|
|
6
6
|
import { VariantProps } from "class-variance-authority";
|
|
7
7
|
|
|
8
8
|
//#region packages/components/layouts/app-layout/sidebar.d.ts
|
|
@@ -104,7 +104,7 @@ declare function AppLayoutSidebarMenuItem({
|
|
|
104
104
|
declare const sidebarMenuButtonVariants: (props?: ({
|
|
105
105
|
variant?: "default" | "outline" | null | undefined;
|
|
106
106
|
size?: "sm" | "lg" | "default" | null | undefined;
|
|
107
|
-
} &
|
|
107
|
+
} & class_variance_authority_types6.ClassProp) | undefined) => string;
|
|
108
108
|
declare function AppLayoutSidebarMenuButton({
|
|
109
109
|
asChild,
|
|
110
110
|
isActive,
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { Button } from "../../button-
|
|
2
|
-
import { Separator } from "../../separator-
|
|
3
|
-
import { TooltipContent } from "../../tooltip-
|
|
4
|
-
import * as
|
|
1
|
+
import { Button } from "../../button-BSbpgPcU.js";
|
|
2
|
+
import { Separator } from "../../separator-9Tfop9BA.js";
|
|
3
|
+
import { TooltipContent } from "../../tooltip-D3LmNLDU.js";
|
|
4
|
+
import * as react_jsx_runtime281 from "react/jsx-runtime";
|
|
5
5
|
import { VariantProps } from "class-variance-authority";
|
|
6
|
-
import * as
|
|
6
|
+
import * as class_variance_authority_types8 from "class-variance-authority/types";
|
|
7
7
|
|
|
8
8
|
//#region packages/components/layouts/app-layout/sidebar.d.ts
|
|
9
9
|
type SidebarContextProps = {
|
|
@@ -28,7 +28,7 @@ declare function SidebarProvider({
|
|
|
28
28
|
defaultOpen?: boolean;
|
|
29
29
|
open?: boolean;
|
|
30
30
|
onOpenChange?: (open: boolean) => void;
|
|
31
|
-
}):
|
|
31
|
+
}): react_jsx_runtime281.JSX.Element;
|
|
32
32
|
declare function Sidebar({
|
|
33
33
|
side,
|
|
34
34
|
variant,
|
|
@@ -40,71 +40,71 @@ declare function Sidebar({
|
|
|
40
40
|
side?: 'left' | 'right';
|
|
41
41
|
variant?: 'sidebar' | 'floating' | 'inset';
|
|
42
42
|
collapsible?: 'offcanvas' | 'icon' | 'none';
|
|
43
|
-
}):
|
|
43
|
+
}): react_jsx_runtime281.JSX.Element;
|
|
44
44
|
declare function AppLayoutSidebarTrigger({
|
|
45
45
|
className,
|
|
46
46
|
onClick,
|
|
47
47
|
...props
|
|
48
|
-
}: React.ComponentProps<typeof Button>):
|
|
48
|
+
}: React.ComponentProps<typeof Button>): react_jsx_runtime281.JSX.Element;
|
|
49
49
|
declare function AppLayoutSidebarRail({
|
|
50
50
|
className,
|
|
51
51
|
...props
|
|
52
|
-
}: React.ComponentProps<'button'>):
|
|
52
|
+
}: React.ComponentProps<'button'>): react_jsx_runtime281.JSX.Element;
|
|
53
53
|
declare function AppLayoutSidebarInset({
|
|
54
54
|
className,
|
|
55
55
|
children,
|
|
56
56
|
...props
|
|
57
|
-
}: React.ComponentProps<'main'>):
|
|
57
|
+
}: React.ComponentProps<'main'>): react_jsx_runtime281.JSX.Element;
|
|
58
58
|
declare function AppLayoutSidebarHeader({
|
|
59
59
|
className,
|
|
60
60
|
...props
|
|
61
|
-
}: React.ComponentProps<'div'>):
|
|
61
|
+
}: React.ComponentProps<'div'>): react_jsx_runtime281.JSX.Element;
|
|
62
62
|
declare function AppLayoutSidebarFooter({
|
|
63
63
|
className,
|
|
64
64
|
...props
|
|
65
|
-
}: React.ComponentProps<'div'>):
|
|
65
|
+
}: React.ComponentProps<'div'>): react_jsx_runtime281.JSX.Element;
|
|
66
66
|
declare function AppLayoutSidebarSeparator({
|
|
67
67
|
className,
|
|
68
68
|
...props
|
|
69
|
-
}: React.ComponentProps<typeof Separator>):
|
|
69
|
+
}: React.ComponentProps<typeof Separator>): react_jsx_runtime281.JSX.Element;
|
|
70
70
|
declare function AppLayoutSidebarContent({
|
|
71
71
|
className,
|
|
72
72
|
...props
|
|
73
|
-
}: React.ComponentProps<'div'>):
|
|
73
|
+
}: React.ComponentProps<'div'>): react_jsx_runtime281.JSX.Element;
|
|
74
74
|
declare function AppLayoutSidebarGroup({
|
|
75
75
|
className,
|
|
76
76
|
...props
|
|
77
|
-
}: React.ComponentProps<'div'>):
|
|
77
|
+
}: React.ComponentProps<'div'>): react_jsx_runtime281.JSX.Element;
|
|
78
78
|
declare function AppLayoutSidebarGroupLabel({
|
|
79
79
|
className,
|
|
80
80
|
asChild,
|
|
81
81
|
...props
|
|
82
82
|
}: React.ComponentProps<'div'> & {
|
|
83
83
|
asChild?: boolean;
|
|
84
|
-
}):
|
|
84
|
+
}): react_jsx_runtime281.JSX.Element;
|
|
85
85
|
declare function AppLayoutSidebarGroupAction({
|
|
86
86
|
className,
|
|
87
87
|
asChild,
|
|
88
88
|
...props
|
|
89
89
|
}: React.ComponentProps<'button'> & {
|
|
90
90
|
asChild?: boolean;
|
|
91
|
-
}):
|
|
91
|
+
}): react_jsx_runtime281.JSX.Element;
|
|
92
92
|
declare function AppLayoutSidebarGroupContent({
|
|
93
93
|
className,
|
|
94
94
|
...props
|
|
95
|
-
}: React.ComponentProps<'div'>):
|
|
95
|
+
}: React.ComponentProps<'div'>): react_jsx_runtime281.JSX.Element;
|
|
96
96
|
declare function AppLayoutSidebarMenu({
|
|
97
97
|
className,
|
|
98
98
|
...props
|
|
99
|
-
}: React.ComponentProps<'ul'>):
|
|
99
|
+
}: React.ComponentProps<'ul'>): react_jsx_runtime281.JSX.Element;
|
|
100
100
|
declare function AppLayoutSidebarMenuItem({
|
|
101
101
|
className,
|
|
102
102
|
...props
|
|
103
|
-
}: React.ComponentProps<'li'>):
|
|
103
|
+
}: React.ComponentProps<'li'>): react_jsx_runtime281.JSX.Element;
|
|
104
104
|
declare const sidebarMenuButtonVariants: (props?: ({
|
|
105
105
|
variant?: "default" | "outline" | null | undefined;
|
|
106
106
|
size?: "sm" | "lg" | "default" | null | undefined;
|
|
107
|
-
} &
|
|
107
|
+
} & class_variance_authority_types8.ClassProp) | undefined) => string;
|
|
108
108
|
declare function AppLayoutSidebarMenuButton({
|
|
109
109
|
asChild,
|
|
110
110
|
isActive,
|
|
@@ -117,7 +117,7 @@ declare function AppLayoutSidebarMenuButton({
|
|
|
117
117
|
asChild?: boolean;
|
|
118
118
|
isActive?: boolean;
|
|
119
119
|
tooltip?: string | React.ComponentProps<typeof TooltipContent>;
|
|
120
|
-
} & VariantProps<typeof sidebarMenuButtonVariants>):
|
|
120
|
+
} & VariantProps<typeof sidebarMenuButtonVariants>): react_jsx_runtime281.JSX.Element;
|
|
121
121
|
declare function AppLayoutSidebarMenuAction({
|
|
122
122
|
className,
|
|
123
123
|
asChild,
|
|
@@ -126,26 +126,26 @@ declare function AppLayoutSidebarMenuAction({
|
|
|
126
126
|
}: React.ComponentProps<'button'> & {
|
|
127
127
|
asChild?: boolean;
|
|
128
128
|
showOnHover?: boolean;
|
|
129
|
-
}):
|
|
129
|
+
}): react_jsx_runtime281.JSX.Element;
|
|
130
130
|
declare function AppLayoutSidebarMenuBadge({
|
|
131
131
|
className,
|
|
132
132
|
...props
|
|
133
|
-
}: React.ComponentProps<'div'>):
|
|
133
|
+
}: React.ComponentProps<'div'>): react_jsx_runtime281.JSX.Element;
|
|
134
134
|
declare function AppLayoutSidebarMenuSkeleton({
|
|
135
135
|
className,
|
|
136
136
|
showIcon,
|
|
137
137
|
...props
|
|
138
138
|
}: React.ComponentProps<'div'> & {
|
|
139
139
|
showIcon?: boolean;
|
|
140
|
-
}):
|
|
140
|
+
}): react_jsx_runtime281.JSX.Element;
|
|
141
141
|
declare function AppLayoutSidebarMenuSub({
|
|
142
142
|
className,
|
|
143
143
|
...props
|
|
144
|
-
}: React.ComponentProps<'ul'>):
|
|
144
|
+
}: React.ComponentProps<'ul'>): react_jsx_runtime281.JSX.Element;
|
|
145
145
|
declare function AppLayoutSidebarMenuSubItem({
|
|
146
146
|
className,
|
|
147
147
|
...props
|
|
148
|
-
}: React.ComponentProps<'li'>):
|
|
148
|
+
}: React.ComponentProps<'li'>): react_jsx_runtime281.JSX.Element;
|
|
149
149
|
declare function AppLayoutSidebarMenuSubButton({
|
|
150
150
|
asChild,
|
|
151
151
|
size,
|
|
@@ -156,7 +156,7 @@ declare function AppLayoutSidebarMenuSubButton({
|
|
|
156
156
|
asChild?: boolean;
|
|
157
157
|
size?: 'sm' | 'md';
|
|
158
158
|
isActive?: boolean;
|
|
159
|
-
}):
|
|
159
|
+
}): react_jsx_runtime281.JSX.Element;
|
|
160
160
|
//#endregion
|
|
161
161
|
//#region packages/components/layouts/app-layout/index.d.ts
|
|
162
162
|
declare const AppLayoutWrapper: React.FC<React.PropsWithChildren>;
|
package/dist/layouts/flex.d.cts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react_jsx_runtime44 from "react/jsx-runtime";
|
|
2
2
|
import * as class_variance_authority_types0 from "class-variance-authority/types";
|
|
3
3
|
import { VariantProps } from "class-variance-authority";
|
|
4
4
|
|
|
@@ -27,7 +27,7 @@ declare const Flex: ({
|
|
|
27
27
|
align,
|
|
28
28
|
className,
|
|
29
29
|
children
|
|
30
|
-
}: React.PropsWithChildren<Props>) =>
|
|
30
|
+
}: React.PropsWithChildren<Props>) => react_jsx_runtime44.JSX.Element;
|
|
31
31
|
//#endregion
|
|
32
32
|
export { Flex };
|
|
33
33
|
//# sourceMappingURL=flex.d.cts.map
|
package/dist/layouts/flex.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react_jsx_runtime4 from "react/jsx-runtime";
|
|
2
2
|
import { VariantProps } from "class-variance-authority";
|
|
3
3
|
import * as class_variance_authority_types0 from "class-variance-authority/types";
|
|
4
4
|
|
|
@@ -27,7 +27,7 @@ declare const Flex: ({
|
|
|
27
27
|
align,
|
|
28
28
|
className,
|
|
29
29
|
children
|
|
30
|
-
}: React.PropsWithChildren<Props>) =>
|
|
30
|
+
}: React.PropsWithChildren<Props>) => react_jsx_runtime4.JSX.Element;
|
|
31
31
|
//#endregion
|
|
32
32
|
export { Flex };
|
|
33
33
|
//# sourceMappingURL=flex.d.ts.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import "../../button-
|
|
2
|
-
import "../../separator-
|
|
3
|
-
import { TooltipContent } from "../../tooltip-
|
|
1
|
+
import "../../button-CP7eGMBD.cjs";
|
|
2
|
+
import "../../separator-CM1kQQxq.cjs";
|
|
3
|
+
import { TooltipContent } from "../../tooltip-2nMDXmIC.cjs";
|
|
4
4
|
import * as react_jsx_runtime281 from "react/jsx-runtime";
|
|
5
5
|
import * as class_variance_authority_types8 from "class-variance-authority/types";
|
|
6
6
|
import { VariantProps } from "class-variance-authority";
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import "../../button-
|
|
2
|
-
import "../../separator-
|
|
3
|
-
import { TooltipContent } from "../../tooltip-
|
|
1
|
+
import "../../button-BSbpgPcU.js";
|
|
2
|
+
import "../../separator-9Tfop9BA.js";
|
|
3
|
+
import { TooltipContent } from "../../tooltip-D3LmNLDU.js";
|
|
4
4
|
import "react";
|
|
5
|
-
import * as
|
|
5
|
+
import * as react_jsx_runtime259 from "react/jsx-runtime";
|
|
6
6
|
import { VariantProps } from "class-variance-authority";
|
|
7
7
|
import { CredentialResponse } from "@react-oauth/google";
|
|
8
|
-
import * as
|
|
8
|
+
import * as class_variance_authority_types5 from "class-variance-authority/types";
|
|
9
9
|
|
|
10
10
|
//#region packages/components/layouts/service-layout/hooks/use-service-layout.d.ts
|
|
11
11
|
type Cart = {
|
|
@@ -43,43 +43,43 @@ declare function ServiceLayoutSidebar$1({
|
|
|
43
43
|
side?: 'left' | 'right';
|
|
44
44
|
variant?: 'sidebar' | 'floating' | 'inset';
|
|
45
45
|
collapsible?: 'offcanvas' | 'icon' | 'none';
|
|
46
|
-
}):
|
|
46
|
+
}): react_jsx_runtime259.JSX.Element;
|
|
47
47
|
declare function ServiceLayoutSidebarFooter({
|
|
48
48
|
className,
|
|
49
49
|
children,
|
|
50
50
|
...props
|
|
51
|
-
}: React.ComponentProps<'div'>):
|
|
51
|
+
}: React.ComponentProps<'div'>): react_jsx_runtime259.JSX.Element;
|
|
52
52
|
declare function ServiceLayoutSidebarContent({
|
|
53
53
|
className,
|
|
54
54
|
...props
|
|
55
|
-
}: React.ComponentProps<'div'>):
|
|
55
|
+
}: React.ComponentProps<'div'>): react_jsx_runtime259.JSX.Element;
|
|
56
56
|
declare function ServiceLayoutSidebarGroup({
|
|
57
57
|
className,
|
|
58
58
|
...props
|
|
59
|
-
}: React.ComponentProps<'div'>):
|
|
59
|
+
}: React.ComponentProps<'div'>): react_jsx_runtime259.JSX.Element;
|
|
60
60
|
declare function ServiceLayoutSidebarGroupLabel({
|
|
61
61
|
className,
|
|
62
62
|
asChild,
|
|
63
63
|
...props
|
|
64
64
|
}: React.ComponentProps<'div'> & {
|
|
65
65
|
asChild?: boolean;
|
|
66
|
-
}):
|
|
66
|
+
}): react_jsx_runtime259.JSX.Element;
|
|
67
67
|
declare function ServiceLayoutSidebarGroupContent({
|
|
68
68
|
className,
|
|
69
69
|
...props
|
|
70
|
-
}: React.ComponentProps<'div'>):
|
|
70
|
+
}: React.ComponentProps<'div'>): react_jsx_runtime259.JSX.Element;
|
|
71
71
|
declare function ServiceLayoutSidebarMenu({
|
|
72
72
|
className,
|
|
73
73
|
...props
|
|
74
|
-
}: React.ComponentProps<'ul'>):
|
|
74
|
+
}: React.ComponentProps<'ul'>): react_jsx_runtime259.JSX.Element;
|
|
75
75
|
declare function ServiceLayoutSidebarMenuItem({
|
|
76
76
|
className,
|
|
77
77
|
...props
|
|
78
|
-
}: React.ComponentProps<'li'>):
|
|
78
|
+
}: React.ComponentProps<'li'>): react_jsx_runtime259.JSX.Element;
|
|
79
79
|
declare const sidebarMenuButtonVariants: (props?: ({
|
|
80
80
|
variant?: "default" | "outline" | null | undefined;
|
|
81
81
|
size?: "sm" | "lg" | "default" | null | undefined;
|
|
82
|
-
} &
|
|
82
|
+
} & class_variance_authority_types5.ClassProp) | undefined) => string;
|
|
83
83
|
declare function ServiceLayoutSidebarMenuButton({
|
|
84
84
|
asChild,
|
|
85
85
|
isActive,
|
|
@@ -92,7 +92,7 @@ declare function ServiceLayoutSidebarMenuButton({
|
|
|
92
92
|
asChild?: boolean;
|
|
93
93
|
isActive?: boolean;
|
|
94
94
|
tooltip?: string | React.ComponentProps<typeof TooltipContent>;
|
|
95
|
-
} & VariantProps<typeof sidebarMenuButtonVariants>):
|
|
95
|
+
} & VariantProps<typeof sidebarMenuButtonVariants>): react_jsx_runtime259.JSX.Element;
|
|
96
96
|
//#endregion
|
|
97
97
|
//#region packages/components/layouts/service-layout/service-layout.d.ts
|
|
98
98
|
declare const ServiceLayoutProvider: React.FC<React.PropsWithChildren<ServiceLayoutContextProps>>;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react_jsx_runtime161 from "react/jsx-runtime";
|
|
2
2
|
import { Separator } from "radix-ui";
|
|
3
3
|
|
|
4
4
|
//#region packages/components/ui/separator.d.ts
|
|
@@ -7,7 +7,7 @@ declare function Separator$1({
|
|
|
7
7
|
orientation,
|
|
8
8
|
decorative,
|
|
9
9
|
...props
|
|
10
|
-
}: React.ComponentProps<typeof Separator.Root>):
|
|
10
|
+
}: React.ComponentProps<typeof Separator.Root>): react_jsx_runtime161.JSX.Element;
|
|
11
11
|
//#endregion
|
|
12
12
|
export { Separator$1 as Separator };
|
|
13
|
-
//# sourceMappingURL=separator-
|
|
13
|
+
//# sourceMappingURL=separator-9Tfop9BA.d.ts.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react_jsx_runtime181 from "react/jsx-runtime";
|
|
2
2
|
import { Separator } from "radix-ui";
|
|
3
3
|
|
|
4
4
|
//#region packages/components/ui/separator.d.ts
|
|
@@ -7,7 +7,7 @@ declare function Separator$1({
|
|
|
7
7
|
orientation,
|
|
8
8
|
decorative,
|
|
9
9
|
...props
|
|
10
|
-
}: React.ComponentProps<typeof Separator.Root>):
|
|
10
|
+
}: React.ComponentProps<typeof Separator.Root>): react_jsx_runtime181.JSX.Element;
|
|
11
11
|
//#endregion
|
|
12
12
|
export { Separator$1 as Separator };
|
|
13
|
-
//# sourceMappingURL=separator-
|
|
13
|
+
//# sourceMappingURL=separator-CM1kQQxq.d.cts.map
|
package/dist/table/index.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const e=require(`../chunk-CUT6urMc.cjs`);require(`../dist-D0uO1qIz.cjs`),require(`../button-variants-CCiseNSC.cjs`);const t=require(`../button-CuV2l4ge.cjs`),n=require(`../flex-DS4mxjtf.cjs`);require(`../paragraph-BLvW7xdo.cjs`),require(`../input-GHXBt6hz.cjs`);const r=require(`../dropdown-menu-Djtt8w9D.cjs`),i=require(`../scroll-area-bTF4NokG.cjs`),a=require(`../table-3FiYZeab.cjs`),o=require(`../add-new-BaA0yy6U.cjs`),s=require(`../refresh-Bt9GEyuC.cjs`),c=require(`../search-input-DFgHJyOp.cjs`),l=e.__toESM(require(`lucide-react`)),u=e.__toESM(require(`@customafk/react-toolkit/utils`)),d=e.__toESM(require(`react`)),f=e.__toESM(require(`react/jsx-runtime`)),p=e.__toESM(require(`@tanstack/react-table`)),m=e.__toESM(require(`@tanstack/react-virtual`)),h=e=>{let t=e.getIsPinned();return{left:t===`left`?`${e.getStart(`left`)}px`:void 0,right:t===`right`?`${e.getAfter(`right`)}px`:void 0,position:t?`sticky`:`relative`,width:e.getSize(),zIndex:t?1:0}},g=(0,d.memo)(({column:e})=>{let t=e.getIsSorted(),n=(0,d.useMemo)(()=>({asc:(0,f.jsx)(l.ChevronUp,{className:`shrink-0 opacity-60`,size:16,strokeWidth:2,"aria-hidden":`true`}),desc:(0,f.jsx)(l.ChevronDown,{className:`shrink-0 opacity-60`,size:16,strokeWidth:2,"aria-hidden":`true`})}),[]);return t?n[t]:null});g.displayName=`SortingIndicator`;const _=(0,d.memo)(({column:e})=>{let n=typeof e.columnDef.header==`string`?e.columnDef.header:`Column`,i=(0,d.useCallback)(()=>e.pin(!1),[e]),a=(0,d.useCallback)(()=>e.pin(`left`),[e]),o=(0,d.useCallback)(()=>e.pin(`right`),[e]);return e.getCanPin()?e.getIsPinned()?(0,f.jsx)(t.Button,{size:`icon`,variant:`ghost`,color:`secondary`,className:`hover:[&_svg]:text-secondary-foreground -mr-1 size-7 shadow-none`,"aria-label":`Unpin ${n} column`,title:`Unpin ${n} column`,onClick:i,children:(0,f.jsx)(l.PinOffIcon,{className:`opacity-60`,size:16,"aria-hidden":`true`})}):(0,f.jsxs)(r.DropdownMenu,{children:[(0,f.jsx)(r.DropdownMenuTrigger,{asChild:!0,children:(0,f.jsx)(t.Button,{size:`icon`,variant:`ghost`,color:`secondary`,className:`size-7 shadow-none`,"aria-label":`Pin options for ${n} column`,title:`Pin options for ${n} column`,children:(0,f.jsx)(l.EllipsisIcon,{className:`opacity-60`,size:16,"aria-hidden":`true`})})}),(0,f.jsxs)(r.DropdownMenuContent,{align:`end`,children:[(0,f.jsxs)(r.DropdownMenuItem,{onClick:a,children:[(0,f.jsx)(l.ArrowLeftToLineIcon,{size:16,className:`opacity-60`,"aria-hidden":`true`}),`Stick to left`]}),(0,f.jsxs)(r.DropdownMenuItem,{onClick:o,children:[(0,f.jsx)(l.ArrowRightToLineIcon,{size:16,className:`opacity-60`,"aria-hidden":`true`}),`Stick to right`]})]})]}):null});_.displayName=`PinControls`;const v=(0,d.memo)(({header:e})=>{let{column:t}=e,n=(0,d.useCallback)(e=>{t.getCanSort()&&(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),t.getToggleSortingHandler()?.(e))},[t]),r=t.getToggleSortingHandler();return e.isPlaceholder?(0,f.jsx)(`div`,{className:`flex items-center justify-between gap-2 truncate`}):(0,f.jsxs)(`div`,{className:`flex items-center justify-between gap-2 truncate`,children:[(0,f.jsxs)(`div`,{className:(0,u.cn)(t.getCanSort()&&`flex h-full cursor-pointer items-center justify-between gap-2 select-none`),onClick:r,onKeyDown:n,tabIndex:t.getCanSort()?0:void 0,role:t.getCanSort()?`button`:void 0,children:[(0,f.jsx)(`span`,{className:`truncate`,children:(0,p.flexRender)(t.columnDef.header,e.getContext())}),(0,f.jsx)(g,{column:t})]}),(0,f.jsx)(_,{column:t})]})});v.displayName=`HeaderContent`;const y=(0,d.memo)(({row:e,measureElement:t,virtualRow:n,onClickRow:r})=>{let i=(0,d.useCallback)(()=>{r&&r(e.id)},[e.id,r]);return(0,f.jsx)(a.TableRow,{"data-index":n.index,ref:e=>t(e),className:`absolute flex w-full cursor-pointer focus:outline-none`,style:{transform:`translateY(${n.start}px)`},onClick:i,tabIndex:r?0:void 0,role:r?`button`:void 0,children:e.getVisibleCells().map(e=>{let t=e.column.getIsPinned(),n=t===`left`&&e.column.getIsLastColumn(`left`),r=t===`right`&&e.column.getIsFirstColumn(`right`);return(0,f.jsx)(a.TableCell,{"data-pinned":t||void 0,"data-last-col":n?`left`:r?`right`:void 0,style:{...h(e.column),width:e.column.getSize()},className:(0,u.cn)(`flex overflow-hidden py-2.5`,`data-pinned:bg-background/90`,`[&[data-pinned][data-last-col]]:border-border-weak`,`[&[data-pinned=left][data-last-col=left]]:border-r`,`[&[data-pinned=right][data-last-col=right]]:border-l`),children:(0,p.flexRender)(e.column.columnDef.cell,e.getContext())},e.id)})})});y.displayName=`DataTableRow`;const b=({table:e,isLoading:t,isFetching:n,allowFetchMore:r=!0,onClickRow:o,onFetchNextPage:s})=>{let c=(0,d.useRef)(null),{rows:p}=e.getRowModel(),g=(0,m.useVirtualizer)({count:p.length,getScrollElement:()=>c.current,estimateSize:()=>37,measureElement:e=>e?.getBoundingClientRect().height??void 0,overscan:5}),_=(0,d.useCallback)(e=>{if(!e)return;let{scrollHeight:t,scrollTop:i,clientHeight:a}=e;t-i-a<500&&!n&&r&&s
|
|
1
|
+
const e=require(`../chunk-CUT6urMc.cjs`);require(`../dist-D0uO1qIz.cjs`),require(`../button-variants-CCiseNSC.cjs`);const t=require(`../button-CuV2l4ge.cjs`),n=require(`../flex-DS4mxjtf.cjs`);require(`../paragraph-BLvW7xdo.cjs`),require(`../input-GHXBt6hz.cjs`);const r=require(`../dropdown-menu-Djtt8w9D.cjs`),i=require(`../scroll-area-bTF4NokG.cjs`),a=require(`../table-3FiYZeab.cjs`),o=require(`../add-new-BaA0yy6U.cjs`),s=require(`../refresh-Bt9GEyuC.cjs`),c=require(`../search-input-DFgHJyOp.cjs`),l=e.__toESM(require(`lucide-react`)),u=e.__toESM(require(`@customafk/react-toolkit/utils`)),d=e.__toESM(require(`react`)),f=e.__toESM(require(`react/jsx-runtime`)),p=e.__toESM(require(`@tanstack/react-table`)),m=e.__toESM(require(`@tanstack/react-virtual`)),h=e=>{let t=e.getIsPinned();return{left:t===`left`?`${e.getStart(`left`)}px`:void 0,right:t===`right`?`${e.getAfter(`right`)}px`:void 0,position:t?`sticky`:`relative`,width:e.getSize(),zIndex:t?1:0}},g=(0,d.memo)(({column:e})=>{let t=e.getIsSorted(),n=(0,d.useMemo)(()=>({asc:(0,f.jsx)(l.ChevronUp,{className:`shrink-0 opacity-60`,size:16,strokeWidth:2,"aria-hidden":`true`}),desc:(0,f.jsx)(l.ChevronDown,{className:`shrink-0 opacity-60`,size:16,strokeWidth:2,"aria-hidden":`true`})}),[]);return t?n[t]:null});g.displayName=`SortingIndicator`;const _=(0,d.memo)(({column:e})=>{let n=typeof e.columnDef.header==`string`?e.columnDef.header:`Column`,i=(0,d.useCallback)(()=>e.pin(!1),[e]),a=(0,d.useCallback)(()=>e.pin(`left`),[e]),o=(0,d.useCallback)(()=>e.pin(`right`),[e]);return e.getCanPin()?e.getIsPinned()?(0,f.jsx)(t.Button,{size:`icon`,variant:`ghost`,color:`secondary`,className:`hover:[&_svg]:text-secondary-foreground -mr-1 size-7 shadow-none`,"aria-label":`Unpin ${n} column`,title:`Unpin ${n} column`,onClick:i,children:(0,f.jsx)(l.PinOffIcon,{className:`opacity-60`,size:16,"aria-hidden":`true`})}):(0,f.jsxs)(r.DropdownMenu,{children:[(0,f.jsx)(r.DropdownMenuTrigger,{asChild:!0,children:(0,f.jsx)(t.Button,{size:`icon`,variant:`ghost`,color:`secondary`,className:`size-7 shadow-none`,"aria-label":`Pin options for ${n} column`,title:`Pin options for ${n} column`,children:(0,f.jsx)(l.EllipsisIcon,{className:`opacity-60`,size:16,"aria-hidden":`true`})})}),(0,f.jsxs)(r.DropdownMenuContent,{align:`end`,children:[(0,f.jsxs)(r.DropdownMenuItem,{onClick:a,children:[(0,f.jsx)(l.ArrowLeftToLineIcon,{size:16,className:`opacity-60`,"aria-hidden":`true`}),`Stick to left`]}),(0,f.jsxs)(r.DropdownMenuItem,{onClick:o,children:[(0,f.jsx)(l.ArrowRightToLineIcon,{size:16,className:`opacity-60`,"aria-hidden":`true`}),`Stick to right`]})]})]}):null});_.displayName=`PinControls`;const v=(0,d.memo)(({header:e})=>{let{column:t}=e,n=(0,d.useCallback)(e=>{t.getCanSort()&&(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),t.getToggleSortingHandler()?.(e))},[t]),r=t.getToggleSortingHandler();return e.isPlaceholder?(0,f.jsx)(`div`,{className:`flex items-center justify-between gap-2 truncate`}):(0,f.jsxs)(`div`,{className:`flex items-center justify-between gap-2 truncate`,children:[(0,f.jsxs)(`div`,{className:(0,u.cn)(t.getCanSort()&&`flex h-full cursor-pointer items-center justify-between gap-2 select-none`),onClick:r,onKeyDown:n,tabIndex:t.getCanSort()?0:void 0,role:t.getCanSort()?`button`:void 0,children:[(0,f.jsx)(`span`,{className:`truncate`,children:(0,p.flexRender)(t.columnDef.header,e.getContext())}),(0,f.jsx)(g,{column:t})]}),(0,f.jsx)(_,{column:t})]})});v.displayName=`HeaderContent`;const y=(0,d.memo)(({row:e,measureElement:t,virtualRow:n,onClickRow:r})=>{let i=(0,d.useCallback)(()=>{r&&r(e.id)},[e.id,r]);return(0,f.jsx)(a.TableRow,{"data-index":n.index,ref:e=>t(e),className:`absolute flex w-full cursor-pointer focus:outline-none`,style:{transform:`translateY(${n.start}px)`},onClick:i,tabIndex:r?0:void 0,role:r?`button`:void 0,children:e.getVisibleCells().map(e=>{let t=e.column.getIsPinned(),n=t===`left`&&e.column.getIsLastColumn(`left`),r=t===`right`&&e.column.getIsFirstColumn(`right`);return(0,f.jsx)(a.TableCell,{"data-pinned":t||void 0,"data-last-col":n?`left`:r?`right`:void 0,style:{...h(e.column),width:e.column.getSize()},className:(0,u.cn)(`flex overflow-hidden py-2.5`,`data-pinned:bg-background/90`,`[&[data-pinned][data-last-col]]:border-border-weak`,`[&[data-pinned=left][data-last-col=left]]:border-r`,`[&[data-pinned=right][data-last-col=right]]:border-l`),children:(0,p.flexRender)(e.column.columnDef.cell,e.getContext())},e.id)})})});y.displayName=`DataTableRow`;const b=({table:e,isLoading:t,isFetching:n,allowFetchMore:r=!0,onClickRow:o,onFetchNextPage:s})=>{let c=(0,d.useRef)(null),{rows:p}=e.getRowModel(),g=(0,m.useVirtualizer)({count:p.length,getScrollElement:()=>c.current,estimateSize:()=>37,measureElement:e=>e?.getBoundingClientRect().height??void 0,overscan:5}),_=(0,d.useCallback)(e=>{if(!e)return;let{scrollHeight:t,scrollTop:i,clientHeight:a}=e;t-i-a<500&&!n&&r&&s?.()},[r,n,s]),b=(0,d.useCallback)(e=>{_(e.currentTarget)},[_]);return(0,d.useEffect)(()=>{let e=setTimeout(()=>{_(c.current)},100);return()=>clearTimeout(e)},[_]),(0,f.jsxs)(i.ScrollArea,{ref:c,className:`border-border-weak bg-background relative w-full overflow-auto rounded-lg border`,onScroll:b,children:[(0,f.jsxs)(a.Table,{className:(0,u.cn)(`!w-full`,`grid`,`border-separate border-spacing-0`,`[&_td]:border-border-weak`,`[&_th]:border-border-weak`,`[&_th]:border-b`,`[&_th]:border-b-border-weak`,`[&_tfoot_td]:border-t`),children:[(0,f.jsx)(a.TableHeader,{className:`sticky top-0 z-10 backdrop-blur-xs`,children:e.getHeaderGroups().map(e=>(0,f.jsx)(a.TableRow,{className:`flex w-full border-none`,children:e.headers.map(e=>{let{column:t}=e,n=t.getIsPinned(),r=n===`left`&&t.getIsLastColumn(`left`),i=n===`right`&&t.getIsFirstColumn(`right`),o=n||void 0,s=r?`left`:i?`right`:void 0,c={width:e.getSize(),...h(e.column)};return(0,f.jsx)(a.TableHead,{"data-pinned":o,"data-last-col":s,className:(0,u.cn)(`relative flex h-9 font-semibold select-none`,`data-pinned:backdrop-blur-xs`,`data-pinned:bg-muted-weak`,`[&>.cursor-col-resize]:last:opacity-0`,`[&[data-pinned][data-last-col]]:border-border-weak`,`[&:not([data-pinned]):has(+[data-pinned])_div.cursor-col-resize:last-child]:opacity-0`,`[&[data-last-col=left]_div.cursor-col-resize:last-child]:opacity-0`,`[&[data-pinned=left][data-last-col=left]]:border-r`,`[&[data-pinned=right]:last-child_div.cursor-col-resize:last-child]:opacity-0`,`[&[data-pinned=right][data-last-col=right]]:border-l`),colSpan:e.colSpan,style:c,children:(0,f.jsx)(v,{header:e})},e.id)})},e.id))}),(0,f.jsx)(a.TableBody,{style:{height:`${g.getTotalSize()}px`},className:(0,u.cn)(`relative grid w-full`,t&&`h-36`,p?.length===0&&`h-48`),children:t?(0,f.jsx)(a.TableRow,{className:`absolute top-9 flex h-36 w-full items-center justify-center`,children:(0,f.jsx)(a.TableCell,{children:`loading...`})}):(0,f.jsx)(f.Fragment,{children:g.getVirtualItems().map(e=>{let t=p[e.index],n=t?.id||(t.original&&`id`in t.original?String(t.original.id):null)||(t.original&&`uuid`in t.original?String(t.original.uuid):null);return(0,f.jsx)(y,{id:n??String(e.index),row:t,measureElement:g.measureElement,virtualRow:e,onClickRow:o},n??e.index)})})}),n&&(0,f.jsx)(a.TableFooter,{children:(0,f.jsx)(`div`,{className:`flex w-full justify-center py-2`,children:(0,f.jsx)(l.LoaderIcon,{size:16,className:`animate-spin`,"aria-label":`Loading more data`})})})]}),(0,f.jsx)(i.ScrollBar,{orientation:`horizontal`})]})},x=({onAdd:e,onRefresh:t})=>(0,f.jsxs)(n.Flex,{justify:`between`,padding:`none`,width:`full`,className:`flex-0`,children:[(0,f.jsx)(`div`,{className:`max-sm:flex-1`,children:(0,f.jsx)(c.SearchInput,{placeholder:`Search...`})}),(0,f.jsxs)(n.Flex,{wrap:!1,className:`flex-0 px-0`,children:[!!e&&(0,f.jsx)(o.AddNewBtn,{onClick:e}),(0,f.jsx)(s.RefreshBtn,{onClick:t})]})]});function S({data:e,totalCount:t,isLoading:r,isFetching:i,allowLoadMore:a,columns:o,onAdd:s,onRefresh:c,onClickRow:l,onFetchNextPage:u}){"use no memo";let[m,h]=(0,d.useState)({}),[g,_]=(0,d.useState)([]),[v,y]=(0,d.useState)([]),[S,C]=(0,d.useState)({}),w=(0,d.useMemo)(()=>({columnPinning:{right:[`actions`,`update`,`delete`]}}),[]),T=(0,p.useReactTable)({initialState:w,data:e,columns:o,rowCount:t,columnResizeMode:`onChange`,enableColumnResizing:!1,enableMultiRowSelection:!1,getCoreRowModel:(0,p.getCoreRowModel)(),getSortedRowModel:(0,p.getSortedRowModel)(),getFilteredRowModel:(0,p.getFilteredRowModel)(),getFacetedRowModel:(0,p.getFacetedRowModel)(),getFacetedUniqueValues:(0,p.getFacetedUniqueValues)(),getRowId:e=>e.id||e.uuid,state:{rowSelection:m,sorting:g,columnVisibility:S,columnFilters:v},onRowSelectionChange:h,onSortingChange:_,onColumnVisibilityChange:C,onColumnFiltersChange:y});return(0,f.jsxs)(n.Flex,{vertical:!0,wrap:!1,gap:`sm`,align:`start`,className:`size-full overflow-y-auto pt-1`,children:[(0,f.jsx)(x,{onAdd:s,onRefresh:c}),(0,f.jsx)(n.Flex,{padding:`none`,vertical:!0,wrap:!1,width:`full`,className:`flex-1 overflow-auto pb-4`,children:(0,f.jsx)(b,{table:T,isLoading:r,isFetching:i,allowFetchMore:a,onClickRow:l,onFetchNextPage:u})})]})}exports.Table=S;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
package/dist/table/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","names":["ChevronUp","ChevronDown","Button","PinOffIcon","DropdownMenu","DropdownMenuTrigger","EllipsisIcon","DropdownMenuContent","DropdownMenuItem","ArrowLeftToLineIcon","ArrowRightToLineIcon","TableRow","TableCell","ScrollArea","Table","TableHeader","TableHead","TableBody","TableFooter","LoaderIcon","ScrollBar","DataTableHeader: React.FC<Props>","Flex","SearchInput","AddNewBtn","RefreshBtn","Flex"],"sources":["../../packages/components/table/data-table.tsx","../../packages/components/table/data-table-header.tsx","../../packages/components/table/index.tsx"],"sourcesContent":["import { memo, useCallback, useEffect, useMemo, useRef } from 'react'\nimport { cn } from '@customafk/react-toolkit/utils'\n\nimport { type Column, flexRender, type Header, type Row, type Table as ReactTable } from '@tanstack/react-table'\nimport { ArrowLeftToLineIcon, ArrowRightToLineIcon, ChevronDown, ChevronUp, EllipsisIcon, LoaderIcon, PinOffIcon } from 'lucide-react'\n\nimport { Button } from '@/components/ui/button'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'\nimport { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'\nimport { Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow } from '@/components/ui/table'\nimport type { AnyEntity } from '@/types'\nimport { useVirtualizer, type VirtualItem } from '@tanstack/react-virtual'\n\n/**\n * Computes styles for pinned columns\n * @param column Table column\n * @returns CSS styles for pinned columns\n */\nconst getPinningStyles = (column: Column<AnyEntity>): React.CSSProperties => {\n const isPinned = column.getIsPinned()\n return {\n left: isPinned === 'left' ? `${column.getStart('left')}px` : undefined,\n right: isPinned === 'right' ? `${column.getAfter('right')}px` : undefined,\n position: isPinned ? 'sticky' : 'relative',\n width: column.getSize(),\n zIndex: isPinned ? 1 : 0,\n }\n}\n\nconst SortingIndicator = memo(({ column }: { column: Column<AnyEntity> }) => {\n const sortDirection = column.getIsSorted()\n\n const icons = useMemo(\n () => ({\n asc: <ChevronUp className=\"shrink-0 opacity-60\" size={16} strokeWidth={2} aria-hidden=\"true\" />,\n desc: <ChevronDown className=\"shrink-0 opacity-60\" size={16} strokeWidth={2} aria-hidden=\"true\" />,\n }),\n [],\n )\n\n return sortDirection ? icons[sortDirection] : null\n})\n\nSortingIndicator.displayName = 'SortingIndicator'\n\nconst PinControls = memo(({ column }: { column: Column<AnyEntity> }) => {\n const columnHeader = typeof column.columnDef.header === 'string' ? column.columnDef.header : 'Column'\n\n const handleUnpin = useCallback(() => column.pin(false), [column])\n const handlePinLeft = useCallback(() => column.pin('left'), [column])\n const handlePinRight = useCallback(() => column.pin('right'), [column])\n\n if (!column.getCanPin()) return null\n\n if (column.getIsPinned()) {\n return (\n <Button\n size=\"icon\"\n variant=\"ghost\"\n color=\"secondary\"\n className=\"hover:[&_svg]:text-secondary-foreground -mr-1 size-7 shadow-none\"\n aria-label={`Unpin ${columnHeader} column`}\n title={`Unpin ${columnHeader} column`}\n onClick={handleUnpin}\n >\n <PinOffIcon className=\"opacity-60\" size={16} aria-hidden=\"true\" />\n </Button>\n )\n }\n\n return (\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button\n size=\"icon\"\n variant=\"ghost\"\n color=\"secondary\"\n className=\"size-7 shadow-none\"\n aria-label={`Pin options for ${columnHeader} column`}\n title={`Pin options for ${columnHeader} column`}\n >\n <EllipsisIcon className=\"opacity-60\" size={16} aria-hidden=\"true\" />\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\">\n <DropdownMenuItem onClick={handlePinLeft}>\n <ArrowLeftToLineIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n Stick to left\n </DropdownMenuItem>\n <DropdownMenuItem onClick={handlePinRight}>\n <ArrowRightToLineIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n Stick to right\n </DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n )\n})\n\nPinControls.displayName = 'PinControls'\n\nconst HeaderContent = memo(({ header }: { header: Header<AnyEntity, unknown> }) => {\n const { column } = header\n\n const handleSort = useCallback(\n (e: React.KeyboardEvent) => {\n if (column.getCanSort() && (e.key === 'Enter' || e.key === ' ')) {\n e.preventDefault()\n column.getToggleSortingHandler()?.(e)\n }\n },\n [column],\n )\n\n const toggleSortHandler = column.getToggleSortingHandler()\n\n if (header.isPlaceholder) {\n return <div className=\"flex items-center justify-between gap-2 truncate\" />\n }\n\n return (\n <div className=\"flex items-center justify-between gap-2 truncate\">\n <div\n className={cn(column.getCanSort() && 'flex h-full cursor-pointer items-center justify-between gap-2 select-none')}\n onClick={toggleSortHandler}\n onKeyDown={handleSort}\n tabIndex={column.getCanSort() ? 0 : undefined}\n role={column.getCanSort() ? 'button' : undefined}\n >\n <span className=\"truncate\">{flexRender(column.columnDef.header, header.getContext())}</span>\n <SortingIndicator column={column} />\n </div>\n <PinControls column={column} />\n </div>\n )\n})\n\nHeaderContent.displayName = 'HeaderContent'\n\ntype DataTableRowProps = {\n id: string\n row: Row<AnyEntity>\n measureElement: (element?: HTMLTableRowElement | null | undefined) => void\n virtualRow: VirtualItem\n onClickRow?: (id: string) => void\n}\nconst DataTableRow = memo(({ row, measureElement, virtualRow, onClickRow }: DataTableRowProps) => {\n const handleClick = useCallback(() => {\n if (!onClickRow) return\n onClickRow(row.id)\n }, [row.id, onClickRow])\n return (\n <TableRow\n data-index={virtualRow.index}\n ref={(node) => measureElement(node)}\n className=\"absolute flex w-full cursor-pointer focus:outline-none\"\n style={{\n transform: `translateY(${virtualRow.start}px)`,\n }}\n onClick={handleClick}\n tabIndex={onClickRow ? 0 : undefined}\n role={onClickRow ? 'button' : undefined}\n >\n {row.getVisibleCells().map((cell) => {\n const isPinned = cell.column.getIsPinned()\n const isLastLeftPinned = isPinned === 'left' && cell.column.getIsLastColumn('left')\n const isFirstRightPinned = isPinned === 'right' && cell.column.getIsFirstColumn('right')\n\n return (\n <TableCell\n key={cell.id}\n data-pinned={isPinned || undefined}\n data-last-col={isLastLeftPinned ? 'left' : isFirstRightPinned ? 'right' : undefined}\n style={{\n ...getPinningStyles(cell.column),\n width: cell.column.getSize(),\n }}\n className={cn(\n 'flex overflow-hidden py-2.5',\n 'data-pinned:bg-background/90',\n '[&[data-pinned][data-last-col]]:border-border-weak',\n '[&[data-pinned=left][data-last-col=left]]:border-r',\n '[&[data-pinned=right][data-last-col=right]]:border-l',\n )}\n >\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n </TableCell>\n )\n })}\n </TableRow>\n )\n})\nDataTableRow.displayName = 'DataTableRow'\n\ninterface DataTableProps {\n table: ReactTable<AnyEntity>\n columnsLength?: number\n isLoading?: boolean\n isFetching?: boolean\n allowFetchMore?: boolean\n onClickRow?: (id: string) => void\n onFetchNextPage?: () => void\n}\n\nexport const DataTable = ({ table, isLoading, isFetching, allowFetchMore = true, onClickRow, onFetchNextPage }: DataTableProps) => {\n // 'use no memo'\n\n const tableContainerRef = useRef<HTMLDivElement>(null)\n\n const { rows } = table.getRowModel()\n\n // Configure virtualization for performance with large datasets\n const rowVirtualizer = useVirtualizer<HTMLDivElement, HTMLTableRowElement>({\n count: rows.length,\n getScrollElement: () => tableContainerRef.current,\n estimateSize: () => 37, // estimated row height\n measureElement: (element) => element?.getBoundingClientRect().height ?? undefined,\n overscan: 5, // Render additional rows beyond viewport for smoother scrolling\n })\n\n // Fetch more data when user approaches bottom of table\n const fetchMoreOnBottomReached = useCallback(\n (refEl: HTMLDivElement | null) => {\n if (!refEl) return\n const { scrollHeight, scrollTop, clientHeight } = refEl\n // Threshold of 120px from bottom to trigger load more\n if (scrollHeight - scrollTop - clientHeight < 500 && !isFetching && allowFetchMore && onFetchNextPage) {\n onFetchNextPage()\n }\n },\n [allowFetchMore, isFetching, onFetchNextPage],\n )\n\n // Handle scroll events to check if more data should be loaded\n const handleScroll = useCallback(\n (ev: React.UIEvent<HTMLDivElement>) => {\n fetchMoreOnBottomReached(ev.currentTarget)\n },\n [fetchMoreOnBottomReached],\n )\n\n // Check for more data on mount and when dependencies change\n useEffect(() => {\n const timer = setTimeout(() => {\n fetchMoreOnBottomReached(tableContainerRef.current)\n }, 100)\n return () => clearTimeout(timer)\n }, [fetchMoreOnBottomReached])\n\n return (\n <ScrollArea ref={tableContainerRef} className=\"border-border-weak bg-background relative w-full overflow-auto rounded-lg border\" onScroll={handleScroll}>\n <Table\n className={cn(\n '!w-full',\n 'grid',\n 'border-separate border-spacing-0',\n '[&_td]:border-border-weak',\n '[&_th]:border-border-weak',\n '[&_th]:border-b',\n '[&_th]:border-b-border-weak',\n '[&_tfoot_td]:border-t',\n )}\n >\n <TableHeader className=\"sticky top-0 z-10 backdrop-blur-xs\">\n {table.getHeaderGroups().map((headerGroup) => (\n <TableRow key={headerGroup.id} className=\"flex w-full border-none\">\n {headerGroup.headers.map((header) => {\n const { column } = header\n const isPinned = column.getIsPinned()\n const isLastLeftPinned = isPinned === 'left' && column.getIsLastColumn('left')\n const isFirstRightPinned = isPinned === 'right' && column.getIsFirstColumn('right')\n const pinningState = isPinned || undefined\n const lastColState = isLastLeftPinned ? 'left' : isFirstRightPinned ? 'right' : undefined\n\n const headerStyles = {\n width: header.getSize(),\n ...getPinningStyles(header.column),\n }\n\n return (\n <TableHead\n key={header.id}\n data-pinned={pinningState}\n data-last-col={lastColState}\n className={cn(\n 'relative flex h-9 font-semibold select-none',\n 'data-pinned:backdrop-blur-xs',\n 'data-pinned:bg-muted-weak',\n '[&>.cursor-col-resize]:last:opacity-0',\n '[&[data-pinned][data-last-col]]:border-border-weak',\n '[&:not([data-pinned]):has(+[data-pinned])_div.cursor-col-resize:last-child]:opacity-0',\n '[&[data-last-col=left]_div.cursor-col-resize:last-child]:opacity-0',\n '[&[data-pinned=left][data-last-col=left]]:border-r',\n '[&[data-pinned=right]:last-child_div.cursor-col-resize:last-child]:opacity-0',\n '[&[data-pinned=right][data-last-col=right]]:border-l',\n )}\n colSpan={header.colSpan}\n style={headerStyles}\n >\n <HeaderContent header={header} />\n </TableHead>\n )\n })}\n </TableRow>\n ))}\n </TableHeader>\n\n <TableBody\n style={{\n height: `${rowVirtualizer.getTotalSize()}px`, //tells scrollbar how big the table is\n }}\n className={cn('relative grid w-full', isLoading && 'h-36', rows?.length === 0 && 'h-48')}\n >\n {isLoading ? (\n <TableRow className=\"absolute top-9 flex h-36 w-full items-center justify-center\">\n <TableCell>loading...</TableCell>\n </TableRow>\n ) : (\n <>\n {rowVirtualizer.getVirtualItems().map((virtualRow) => {\n const row = rows[virtualRow.index]\n const rowId =\n row?.id ||\n (row.original && 'id' in row.original ? String(row.original.id) : null) ||\n (row.original && 'uuid' in row.original ? String(row.original.uuid) : null)\n return (\n <DataTableRow\n key={rowId ?? virtualRow.index}\n id={rowId ?? String(virtualRow.index)}\n row={row}\n measureElement={rowVirtualizer.measureElement}\n virtualRow={virtualRow}\n onClickRow={onClickRow}\n />\n )\n })}\n </>\n )}\n </TableBody>\n {isFetching && (\n <TableFooter>\n <div className=\"flex w-full justify-center py-2\">\n <LoaderIcon size={16} className=\"animate-spin\" aria-label=\"Loading more data\" />\n </div>\n </TableFooter>\n )}\n </Table>\n <ScrollBar orientation=\"horizontal\" />\n </ScrollArea>\n )\n}\n","import { Flex } from '@/components/layouts/flex'\nimport { AddNewBtn } from '@/components/ui/buttons/add-new'\nimport { RefreshBtn } from '@/components/ui/buttons/refresh'\nimport { SearchInput } from '@/components/ui/inputs/search-input'\n\ntype Props = {\n onAdd?: () => void\n onRefresh?: () => void\n}\n\nexport const DataTableHeader: React.FC<Props> = ({ onAdd, onRefresh }) => {\n return (\n <Flex justify=\"between\" padding=\"none\" width=\"full\" className=\"flex-0\">\n <div className=\"max-sm:flex-1\">\n <SearchInput placeholder=\"Search...\" />\n </div>\n <Flex wrap={false} className=\"flex-0 px-0\">\n {!!onAdd && <AddNewBtn onClick={onAdd} />}\n <RefreshBtn onClick={onRefresh} />\n </Flex>\n </Flex>\n )\n}\n","import { useMemo, useState } from 'react'\n\nimport type { ColumnDef, ColumnFiltersState, RowSelectionState, SortingState, VisibilityState } from '@tanstack/react-table'\nimport { getCoreRowModel, getFacetedRowModel, getFacetedUniqueValues, getFilteredRowModel, getSortedRowModel, useReactTable } from '@tanstack/react-table'\n\nimport { DataTable } from './data-table'\nimport { DataTableHeader } from './data-table-header'\nimport { Flex } from '../layouts/flex'\n\ntype Props<T> = {\n data: T[]\n totalCount?: number\n isLoading?: boolean\n isFetching?: boolean\n columns: ColumnDef<T>[]\n onAdd?: () => void\n onRefresh?: () => void\n onClickRow?: (id: string) => void\n onFetchNextPage?: () => void\n}\nexport function Table<T extends Record<string, unknown>>({\n data,\n totalCount,\n isLoading,\n isFetching,\n columns,\n onAdd,\n onRefresh,\n onClickRow,\n onFetchNextPage,\n}: Props<T>) {\n 'use no memo'\n\n const [rowSelection, setRowSelection] = useState<RowSelectionState>({})\n const [sorting, setSorting] = useState<SortingState>([])\n const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])\n const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({})\n\n const initialState = useMemo(\n () => ({\n columnPinning: { right: ['actions', 'update', 'delete'] },\n }),\n [],\n )\n\n const table = useReactTable<T>({\n initialState,\n data,\n columns,\n rowCount: totalCount,\n columnResizeMode: 'onChange',\n enableColumnResizing: false,\n enableMultiRowSelection: false,\n getCoreRowModel: getCoreRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n getFacetedRowModel: getFacetedRowModel(),\n getFacetedUniqueValues: getFacetedUniqueValues(),\n getRowId: (row) => (row.id as string) || (row.uuid as string),\n state: {\n rowSelection,\n sorting,\n columnVisibility,\n columnFilters,\n },\n onRowSelectionChange: setRowSelection,\n onSortingChange: setSorting,\n onColumnVisibilityChange: setColumnVisibility,\n onColumnFiltersChange: setColumnFilters,\n })\n\n return (\n <Flex vertical wrap={false} gap=\"sm\" align=\"start\" className=\"size-full overflow-y-auto pt-1\">\n <DataTableHeader onAdd={onAdd} onRefresh={onRefresh} />\n <Flex padding=\"none\" vertical wrap={false} width=\"full\" className=\"flex-1 overflow-auto pb-4\">\n <DataTable table={table} isLoading={isLoading} isFetching={isFetching} onClickRow={onClickRow} onFetchNextPage={onFetchNextPage} />\n </Flex>\n </Flex>\n )\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.cjs","names":["ChevronUp","ChevronDown","Button","PinOffIcon","DropdownMenu","DropdownMenuTrigger","EllipsisIcon","DropdownMenuContent","DropdownMenuItem","ArrowLeftToLineIcon","ArrowRightToLineIcon","TableRow","TableCell","ScrollArea","Table","TableHeader","TableHead","TableBody","TableFooter","LoaderIcon","ScrollBar","DataTableHeader: React.FC<Props>","Flex","SearchInput","AddNewBtn","RefreshBtn","Flex"],"sources":["../../packages/components/table/data-table.tsx","../../packages/components/table/data-table-header.tsx","../../packages/components/table/index.tsx"],"sourcesContent":["import { memo, useCallback, useEffect, useMemo, useRef } from 'react'\nimport { cn } from '@customafk/react-toolkit/utils'\n\nimport { type Column, flexRender, type Header, type Row, type Table as ReactTable } from '@tanstack/react-table'\nimport { ArrowLeftToLineIcon, ArrowRightToLineIcon, ChevronDown, ChevronUp, EllipsisIcon, LoaderIcon, PinOffIcon } from 'lucide-react'\n\nimport { Button } from '@/components/ui/button'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'\nimport { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'\nimport { Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow } from '@/components/ui/table'\nimport type { AnyEntity } from '@/types'\nimport { useVirtualizer, type VirtualItem } from '@tanstack/react-virtual'\n\n/**\n * Computes styles for pinned columns\n * @param column Table column\n * @returns CSS styles for pinned columns\n */\nconst getPinningStyles = (column: Column<AnyEntity>): React.CSSProperties => {\n const isPinned = column.getIsPinned()\n return {\n left: isPinned === 'left' ? `${column.getStart('left')}px` : undefined,\n right: isPinned === 'right' ? `${column.getAfter('right')}px` : undefined,\n position: isPinned ? 'sticky' : 'relative',\n width: column.getSize(),\n zIndex: isPinned ? 1 : 0,\n }\n}\n\nconst SortingIndicator = memo(({ column }: { column: Column<AnyEntity> }) => {\n const sortDirection = column.getIsSorted()\n\n const icons = useMemo(\n () => ({\n asc: <ChevronUp className=\"shrink-0 opacity-60\" size={16} strokeWidth={2} aria-hidden=\"true\" />,\n desc: <ChevronDown className=\"shrink-0 opacity-60\" size={16} strokeWidth={2} aria-hidden=\"true\" />,\n }),\n [],\n )\n\n return sortDirection ? icons[sortDirection] : null\n})\n\nSortingIndicator.displayName = 'SortingIndicator'\n\nconst PinControls = memo(({ column }: { column: Column<AnyEntity> }) => {\n const columnHeader = typeof column.columnDef.header === 'string' ? column.columnDef.header : 'Column'\n\n const handleUnpin = useCallback(() => column.pin(false), [column])\n const handlePinLeft = useCallback(() => column.pin('left'), [column])\n const handlePinRight = useCallback(() => column.pin('right'), [column])\n\n if (!column.getCanPin()) return null\n\n if (column.getIsPinned()) {\n return (\n <Button\n size=\"icon\"\n variant=\"ghost\"\n color=\"secondary\"\n className=\"hover:[&_svg]:text-secondary-foreground -mr-1 size-7 shadow-none\"\n aria-label={`Unpin ${columnHeader} column`}\n title={`Unpin ${columnHeader} column`}\n onClick={handleUnpin}\n >\n <PinOffIcon className=\"opacity-60\" size={16} aria-hidden=\"true\" />\n </Button>\n )\n }\n\n return (\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button\n size=\"icon\"\n variant=\"ghost\"\n color=\"secondary\"\n className=\"size-7 shadow-none\"\n aria-label={`Pin options for ${columnHeader} column`}\n title={`Pin options for ${columnHeader} column`}\n >\n <EllipsisIcon className=\"opacity-60\" size={16} aria-hidden=\"true\" />\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\">\n <DropdownMenuItem onClick={handlePinLeft}>\n <ArrowLeftToLineIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n Stick to left\n </DropdownMenuItem>\n <DropdownMenuItem onClick={handlePinRight}>\n <ArrowRightToLineIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n Stick to right\n </DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n )\n})\n\nPinControls.displayName = 'PinControls'\n\nconst HeaderContent = memo(({ header }: { header: Header<AnyEntity, unknown> }) => {\n const { column } = header\n\n const handleSort = useCallback(\n (e: React.KeyboardEvent) => {\n if (column.getCanSort() && (e.key === 'Enter' || e.key === ' ')) {\n e.preventDefault()\n column.getToggleSortingHandler()?.(e)\n }\n },\n [column],\n )\n\n const toggleSortHandler = column.getToggleSortingHandler()\n\n if (header.isPlaceholder) {\n return <div className=\"flex items-center justify-between gap-2 truncate\" />\n }\n\n return (\n <div className=\"flex items-center justify-between gap-2 truncate\">\n <div\n className={cn(column.getCanSort() && 'flex h-full cursor-pointer items-center justify-between gap-2 select-none')}\n onClick={toggleSortHandler}\n onKeyDown={handleSort}\n tabIndex={column.getCanSort() ? 0 : undefined}\n role={column.getCanSort() ? 'button' : undefined}\n >\n <span className=\"truncate\">{flexRender(column.columnDef.header, header.getContext())}</span>\n <SortingIndicator column={column} />\n </div>\n <PinControls column={column} />\n </div>\n )\n})\n\nHeaderContent.displayName = 'HeaderContent'\n\ntype DataTableRowProps = {\n id: string\n row: Row<AnyEntity>\n measureElement: (element?: HTMLTableRowElement | null | undefined) => void\n virtualRow: VirtualItem\n onClickRow?: (id: string) => void\n}\nconst DataTableRow = memo(({ row, measureElement, virtualRow, onClickRow }: DataTableRowProps) => {\n const handleClick = useCallback(() => {\n if (!onClickRow) return\n onClickRow(row.id)\n }, [row.id, onClickRow])\n return (\n <TableRow\n data-index={virtualRow.index}\n ref={(node) => measureElement(node)}\n className=\"absolute flex w-full cursor-pointer focus:outline-none\"\n style={{\n transform: `translateY(${virtualRow.start}px)`,\n }}\n onClick={handleClick}\n tabIndex={onClickRow ? 0 : undefined}\n role={onClickRow ? 'button' : undefined}\n >\n {row.getVisibleCells().map((cell) => {\n const isPinned = cell.column.getIsPinned()\n const isLastLeftPinned = isPinned === 'left' && cell.column.getIsLastColumn('left')\n const isFirstRightPinned = isPinned === 'right' && cell.column.getIsFirstColumn('right')\n\n return (\n <TableCell\n key={cell.id}\n data-pinned={isPinned || undefined}\n data-last-col={isLastLeftPinned ? 'left' : isFirstRightPinned ? 'right' : undefined}\n style={{\n ...getPinningStyles(cell.column),\n width: cell.column.getSize(),\n }}\n className={cn(\n 'flex overflow-hidden py-2.5',\n 'data-pinned:bg-background/90',\n '[&[data-pinned][data-last-col]]:border-border-weak',\n '[&[data-pinned=left][data-last-col=left]]:border-r',\n '[&[data-pinned=right][data-last-col=right]]:border-l',\n )}\n >\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n </TableCell>\n )\n })}\n </TableRow>\n )\n})\nDataTableRow.displayName = 'DataTableRow'\n\ninterface DataTableProps {\n table: ReactTable<AnyEntity>\n columnsLength?: number\n isLoading?: boolean\n isFetching?: boolean\n allowFetchMore?: boolean\n onClickRow?: (id: string) => void\n onFetchNextPage?: () => void\n}\n\nexport const DataTable = ({ table, isLoading, isFetching, allowFetchMore = true, onClickRow, onFetchNextPage }: DataTableProps) => {\n // 'use no memo'\n\n const tableContainerRef = useRef<HTMLDivElement>(null)\n\n const { rows } = table.getRowModel()\n\n // Configure virtualization for performance with large datasets\n const rowVirtualizer = useVirtualizer<HTMLDivElement, HTMLTableRowElement>({\n count: rows.length,\n getScrollElement: () => tableContainerRef.current,\n estimateSize: () => 37, // estimated row height\n measureElement: (element) => element?.getBoundingClientRect().height ?? undefined,\n overscan: 5, // Render additional rows beyond viewport for smoother scrolling\n })\n\n // Fetch more data when user approaches bottom of table\n const fetchMoreOnBottomReached = useCallback(\n (refEl: HTMLDivElement | null) => {\n if (!refEl) return\n const { scrollHeight, scrollTop, clientHeight } = refEl\n // Threshold of 120px from bottom to trigger load more\n if (scrollHeight - scrollTop - clientHeight < 500 && !isFetching && allowFetchMore) {\n onFetchNextPage?.()\n }\n },\n [allowFetchMore, isFetching, onFetchNextPage],\n )\n\n // Handle scroll events to check if more data should be loaded\n const handleScroll = useCallback(\n (ev: React.UIEvent<HTMLDivElement>) => {\n fetchMoreOnBottomReached(ev.currentTarget)\n },\n [fetchMoreOnBottomReached],\n )\n\n // Check for more data on mount and when dependencies change\n useEffect(() => {\n const timer = setTimeout(() => {\n fetchMoreOnBottomReached(tableContainerRef.current)\n }, 100)\n return () => clearTimeout(timer)\n }, [fetchMoreOnBottomReached])\n\n return (\n <ScrollArea ref={tableContainerRef} className=\"border-border-weak bg-background relative w-full overflow-auto rounded-lg border\" onScroll={handleScroll}>\n <Table\n className={cn(\n '!w-full',\n 'grid',\n 'border-separate border-spacing-0',\n '[&_td]:border-border-weak',\n '[&_th]:border-border-weak',\n '[&_th]:border-b',\n '[&_th]:border-b-border-weak',\n '[&_tfoot_td]:border-t',\n )}\n >\n <TableHeader className=\"sticky top-0 z-10 backdrop-blur-xs\">\n {table.getHeaderGroups().map((headerGroup) => (\n <TableRow key={headerGroup.id} className=\"flex w-full border-none\">\n {headerGroup.headers.map((header) => {\n const { column } = header\n const isPinned = column.getIsPinned()\n const isLastLeftPinned = isPinned === 'left' && column.getIsLastColumn('left')\n const isFirstRightPinned = isPinned === 'right' && column.getIsFirstColumn('right')\n const pinningState = isPinned || undefined\n const lastColState = isLastLeftPinned ? 'left' : isFirstRightPinned ? 'right' : undefined\n\n const headerStyles = {\n width: header.getSize(),\n ...getPinningStyles(header.column),\n }\n\n return (\n <TableHead\n key={header.id}\n data-pinned={pinningState}\n data-last-col={lastColState}\n className={cn(\n 'relative flex h-9 font-semibold select-none',\n 'data-pinned:backdrop-blur-xs',\n 'data-pinned:bg-muted-weak',\n '[&>.cursor-col-resize]:last:opacity-0',\n '[&[data-pinned][data-last-col]]:border-border-weak',\n '[&:not([data-pinned]):has(+[data-pinned])_div.cursor-col-resize:last-child]:opacity-0',\n '[&[data-last-col=left]_div.cursor-col-resize:last-child]:opacity-0',\n '[&[data-pinned=left][data-last-col=left]]:border-r',\n '[&[data-pinned=right]:last-child_div.cursor-col-resize:last-child]:opacity-0',\n '[&[data-pinned=right][data-last-col=right]]:border-l',\n )}\n colSpan={header.colSpan}\n style={headerStyles}\n >\n <HeaderContent header={header} />\n </TableHead>\n )\n })}\n </TableRow>\n ))}\n </TableHeader>\n\n <TableBody\n style={{\n height: `${rowVirtualizer.getTotalSize()}px`, //tells scrollbar how big the table is\n }}\n className={cn('relative grid w-full', isLoading && 'h-36', rows?.length === 0 && 'h-48')}\n >\n {isLoading ? (\n <TableRow className=\"absolute top-9 flex h-36 w-full items-center justify-center\">\n <TableCell>loading...</TableCell>\n </TableRow>\n ) : (\n <>\n {rowVirtualizer.getVirtualItems().map((virtualRow) => {\n const row = rows[virtualRow.index]\n const rowId =\n row?.id ||\n (row.original && 'id' in row.original ? String(row.original.id) : null) ||\n (row.original && 'uuid' in row.original ? String(row.original.uuid) : null)\n return (\n <DataTableRow\n key={rowId ?? virtualRow.index}\n id={rowId ?? String(virtualRow.index)}\n row={row}\n measureElement={rowVirtualizer.measureElement}\n virtualRow={virtualRow}\n onClickRow={onClickRow}\n />\n )\n })}\n </>\n )}\n </TableBody>\n {isFetching && (\n <TableFooter>\n <div className=\"flex w-full justify-center py-2\">\n <LoaderIcon size={16} className=\"animate-spin\" aria-label=\"Loading more data\" />\n </div>\n </TableFooter>\n )}\n </Table>\n <ScrollBar orientation=\"horizontal\" />\n </ScrollArea>\n )\n}\n","import { Flex } from '@/components/layouts/flex'\nimport { AddNewBtn } from '@/components/ui/buttons/add-new'\nimport { RefreshBtn } from '@/components/ui/buttons/refresh'\nimport { SearchInput } from '@/components/ui/inputs/search-input'\n\ntype Props = {\n onAdd?: () => void\n onRefresh?: () => void\n}\n\nexport const DataTableHeader: React.FC<Props> = ({ onAdd, onRefresh }) => {\n return (\n <Flex justify=\"between\" padding=\"none\" width=\"full\" className=\"flex-0\">\n <div className=\"max-sm:flex-1\">\n <SearchInput placeholder=\"Search...\" />\n </div>\n <Flex wrap={false} className=\"flex-0 px-0\">\n {!!onAdd && <AddNewBtn onClick={onAdd} />}\n <RefreshBtn onClick={onRefresh} />\n </Flex>\n </Flex>\n )\n}\n","import { useMemo, useState } from 'react'\n\nimport type { ColumnDef, ColumnFiltersState, RowSelectionState, SortingState, VisibilityState } from '@tanstack/react-table'\nimport { getCoreRowModel, getFacetedRowModel, getFacetedUniqueValues, getFilteredRowModel, getSortedRowModel, useReactTable } from '@tanstack/react-table'\n\nimport { DataTable } from './data-table'\nimport { DataTableHeader } from './data-table-header'\nimport { Flex } from '../layouts/flex'\n\ntype Props<T> = {\n data: T[]\n totalCount?: number\n isLoading?: boolean\n isFetching?: boolean\n allowLoadMore?: boolean\n columns: ColumnDef<T>[]\n onAdd?: () => void\n onRefresh?: () => void\n onClickRow?: (id: string) => void\n onFetchNextPage?: () => void\n}\nexport function Table<T extends Record<string, unknown>>({\n data,\n totalCount,\n isLoading,\n isFetching,\n allowLoadMore,\n columns,\n onAdd,\n onRefresh,\n onClickRow,\n onFetchNextPage,\n}: Props<T>) {\n 'use no memo'\n\n const [rowSelection, setRowSelection] = useState<RowSelectionState>({})\n const [sorting, setSorting] = useState<SortingState>([])\n const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])\n const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({})\n\n const initialState = useMemo(\n () => ({\n columnPinning: { right: ['actions', 'update', 'delete'] },\n }),\n [],\n )\n\n const table = useReactTable<T>({\n initialState,\n data,\n columns,\n rowCount: totalCount,\n columnResizeMode: 'onChange',\n enableColumnResizing: false,\n enableMultiRowSelection: false,\n getCoreRowModel: getCoreRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n getFacetedRowModel: getFacetedRowModel(),\n getFacetedUniqueValues: getFacetedUniqueValues(),\n getRowId: (row) => (row.id as string) || (row.uuid as string),\n state: {\n rowSelection,\n sorting,\n columnVisibility,\n columnFilters,\n },\n onRowSelectionChange: setRowSelection,\n onSortingChange: setSorting,\n onColumnVisibilityChange: setColumnVisibility,\n onColumnFiltersChange: setColumnFilters,\n })\n\n return (\n <Flex vertical wrap={false} gap=\"sm\" align=\"start\" className=\"size-full overflow-y-auto pt-1\">\n <DataTableHeader onAdd={onAdd} onRefresh={onRefresh} />\n <Flex padding=\"none\" vertical wrap={false} width=\"full\" className=\"flex-1 overflow-auto pb-4\">\n <DataTable\n table={table}\n isLoading={isLoading}\n isFetching={isFetching}\n allowFetchMore={allowLoadMore}\n onClickRow={onClickRow}\n onFetchNextPage={onFetchNextPage}\n />\n </Flex>\n </Flex>\n )\n}\n"],"mappings":"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"}
|