@getgreenline/blaze-ui 1.0.23 → 1.0.25
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/components/alert-dialog.d.ts +4 -1
- package/dist/components/alert-dialog.d.ts.map +1 -1
- package/dist/components/alert-dialog.js +3 -2
- package/dist/components/breadcrumb.d.ts.map +1 -1
- package/dist/components/breadcrumb.js +2 -2
- package/dist/components/button.d.ts.map +1 -1
- package/dist/components/button.js +1 -1
- package/dist/components/data-table.d.ts.map +1 -1
- package/dist/components/data-table.js +100 -31
- package/dist/components/search-bar.d.ts +15 -0
- package/dist/components/search-bar.d.ts.map +1 -0
- package/dist/components/search-bar.js +25 -0
- package/dist/components/selection-panel.d.ts +29 -0
- package/dist/components/selection-panel.d.ts.map +1 -0
- package/dist/components/selection-panel.js +166 -0
- package/dist/components/sheet.d.ts +2 -1
- package/dist/components/sheet.d.ts.map +1 -1
- package/dist/components/sheet.js +5 -4
- package/dist/components/visually-hidden.d.ts +16 -0
- package/dist/components/visually-hidden.d.ts.map +1 -0
- package/dist/components/visually-hidden.js +22 -0
- package/dist/globals.css +295 -68
- package/dist/index.d.ts +4 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +4 -0
- package/dist/lib/portal-wrapper.d.ts +32 -0
- package/dist/lib/portal-wrapper.d.ts.map +1 -0
- package/dist/lib/portal-wrapper.js +34 -0
- package/package.json +1 -1
|
@@ -4,7 +4,10 @@ declare function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDial
|
|
|
4
4
|
declare function AlertDialogTrigger({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
|
|
5
5
|
declare function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
|
|
6
6
|
declare function AlertDialogOverlay({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>): import("react/jsx-runtime").JSX.Element;
|
|
7
|
-
|
|
7
|
+
interface AlertDialogContentProps extends React.ComponentProps<typeof AlertDialogPrimitive.Content> {
|
|
8
|
+
overlayClassName?: string;
|
|
9
|
+
}
|
|
10
|
+
declare function AlertDialogContent({ className, overlayClassName, ...props }: AlertDialogContentProps): import("react/jsx-runtime").JSX.Element;
|
|
8
11
|
declare function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
|
|
9
12
|
declare function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
|
|
10
13
|
declare function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"alert-dialog.d.ts","sourceRoot":"","sources":["../../src/components/alert-dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAA;
|
|
1
|
+
{"version":3,"file":"alert-dialog.d.ts","sourceRoot":"","sources":["../../src/components/alert-dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAA;AAMpE,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,2CAExD;AAED,iBAAS,kBAAkB,CAAC,EAC1B,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,2CAI3D;AAED,iBAAS,iBAAiB,CAAC,EACzB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,MAAM,CAAC,2CAI1D;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,2CAW3D;AAED,UAAU,uBACR,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC;IACjE,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,gBAAgB,EAChB,GAAG,KAAK,EACT,EAAE,uBAAuB,2CAgBzB;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAW7B;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAW7B;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,KAAK,CAAC,2CAQzD;AAED,iBAAS,sBAAsB,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,WAAW,CAAC,2CAQ/D;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,MAAM,CAAC,2CAO1D;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,MAAM,CAAC,2CAO1D;AAED,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,sBAAsB,EACtB,iBAAiB,EACjB,iBAAiB,GAClB,CAAA"}
|
|
@@ -2,6 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
|
|
|
2
2
|
import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
|
|
3
3
|
import { cn } from '../lib/utils.js';
|
|
4
4
|
import { buttonVariants } from './button.js';
|
|
5
|
+
import { PortalWrapper } from '../lib/portal-wrapper.js';
|
|
5
6
|
|
|
6
7
|
function AlertDialog({ ...props }) {
|
|
7
8
|
return jsx(AlertDialogPrimitive.Root, { "data-slot": "alert-dialog", ...props });
|
|
@@ -15,8 +16,8 @@ function AlertDialogPortal({ ...props }) {
|
|
|
15
16
|
function AlertDialogOverlay({ className, ...props }) {
|
|
16
17
|
return (jsx(AlertDialogPrimitive.Overlay, { "data-slot": "alert-dialog-overlay", className: cn("tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out tw:data-[state=closed]:fade-out-0 tw:data-[state=open]:fade-in-0 tw:fixed tw:inset-0 tw:z-50 tw:bg-black/50", className), ...props }));
|
|
17
18
|
}
|
|
18
|
-
function AlertDialogContent({ className, ...props }) {
|
|
19
|
-
return (jsxs(AlertDialogPortal, { children: [jsx(AlertDialogOverlay, {}), jsx(AlertDialogPrimitive.Content, { "data-slot": "alert-dialog-content", className: cn("tw:bg-background tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out tw:data-[state=closed]:fade-out-0 tw:data-[state=open]:fade-in-0 tw:data-[state=closed]:zoom-out-95 tw:data-[state=open]:zoom-in-95 tw:fixed tw:top-1/2 tw:left-1/2 tw:z-50 tw:grid tw:w-full tw:max-w-[calc(100%-2rem)] tw:-translate-x-1/2 tw:-translate-y-1/2 tw:gap-4 tw:rounded-lg tw:border tw:p-6 tw:shadow-lg tw:duration-200 tw:sm:max-w-lg", className), ...props })] }));
|
|
19
|
+
function AlertDialogContent({ className, overlayClassName, ...props }) {
|
|
20
|
+
return (jsxs(AlertDialogPortal, { children: [jsx(AlertDialogOverlay, { className: overlayClassName }), jsx(AlertDialogPrimitive.Content, { "data-slot": "alert-dialog-content", className: cn("tw:bg-background tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out tw:data-[state=closed]:fade-out-0 tw:data-[state=open]:fade-in-0 tw:data-[state=closed]:zoom-out-95 tw:data-[state=open]:zoom-in-95 tw:fixed tw:top-1/2 tw:left-1/2 tw:z-50 tw:grid tw:w-full tw:max-w-[calc(100%-2rem)] tw:-translate-x-1/2 tw:-translate-y-1/2 tw:gap-4 tw:rounded-lg tw:border tw:p-6 tw:shadow-lg tw:duration-200 tw:sm:max-w-lg", className), ...props, children: jsx(PortalWrapper, { children: props.children }) })] }));
|
|
20
21
|
}
|
|
21
22
|
function AlertDialogHeader({ className, ...props }) {
|
|
22
23
|
return (jsx("div", { "data-slot": "alert-dialog-header", className: cn("tw:flex tw:flex-col tw:gap-2 tw:text-center tw:sm:text-left", className), ...props }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"breadcrumb.d.ts","sourceRoot":"","sources":["../../src/components/breadcrumb.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,iBAAS,UAAU,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAE5D;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,2CAW1E;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,2CAQ1E;AAED,iBAAS,cAAc,CAAC,EACtB,OAAO,EACP,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,GAAG;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,
|
|
1
|
+
{"version":3,"file":"breadcrumb.d.ts","sourceRoot":"","sources":["../../src/components/breadcrumb.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,iBAAS,UAAU,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAE5D;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,2CAW1E;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,2CAQ1E;AAED,iBAAS,cAAc,CAAC,EACtB,OAAO,EACP,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,GAAG;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,2CAaA;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,2CAW5E;AAED,iBAAS,mBAAmB,CAAC,EAC3B,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,2CAY5B;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,2CAa9B;AAED,OAAO,EACL,UAAU,EACV,cAAc,EACd,cAAc,EACd,cAAc,EACd,cAAc,EACd,mBAAmB,EACnB,kBAAkB,GACnB,CAAA"}
|
|
@@ -14,10 +14,10 @@ function BreadcrumbItem({ className, ...props }) {
|
|
|
14
14
|
}
|
|
15
15
|
function BreadcrumbLink({ asChild, className, ...props }) {
|
|
16
16
|
const Comp = asChild ? Slot : "a";
|
|
17
|
-
return (jsx(Comp, { "data-slot": "breadcrumb-link", className: cn("tw:hover:text-foreground tw:transition-colors", className), ...props }));
|
|
17
|
+
return (jsx(Comp, { "data-slot": "breadcrumb-link", className: cn("tw:text-muted-foreground tw:hover:text-foreground tw:transition-colors", className), ...props }));
|
|
18
18
|
}
|
|
19
19
|
function BreadcrumbPage({ className, ...props }) {
|
|
20
|
-
return (jsx("span", { "data-slot": "breadcrumb-page", role: "link", "aria-disabled": "true", "aria-current": "page", className: cn("tw:text-foreground tw:font-
|
|
20
|
+
return (jsx("span", { "data-slot": "breadcrumb-page", role: "link", "aria-disabled": "true", "aria-current": "page", className: cn("tw:text-foreground tw:font-medium", className), ...props }));
|
|
21
21
|
}
|
|
22
22
|
function BreadcrumbSeparator({ children, className, ...props }) {
|
|
23
23
|
return (jsx("li", { "data-slot": "breadcrumb-separator", role: "presentation", "aria-hidden": "true", className: cn("tw:[&>svg]:size-3.5", className), ...props, children: children ?? jsx(ChevronRight, {}) }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/components/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAKjE,QAAA,MAAM,cAAc;;;8EA6BnB,CAAA;AAED,QAAA,MAAM,MAAM;;;;
|
|
1
|
+
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/components/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAKjE,QAAA,MAAM,cAAc;;;8EA6BnB,CAAA;AAED,QAAA,MAAM,MAAM;;;;cAII,OAAO;cACP,OAAO;kBACH,MAAM;mDA4DzB,CAAA;AAGD,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAA"}
|
|
@@ -5,7 +5,7 @@ import { cva } from 'class-variance-authority';
|
|
|
5
5
|
import { LoaderCircleIcon } from 'lucide-react';
|
|
6
6
|
import { cn } from '../lib/utils.js';
|
|
7
7
|
|
|
8
|
-
const buttonVariants = cva("tw:!relative tw:!inline-flex tw:!items-center tw:!justify-center tw:!gap-2 tw:!whitespace-nowrap tw:!rounded-md tw
|
|
8
|
+
const buttonVariants = cva("tw:!relative tw:!inline-flex tw:!items-center tw:!justify-center tw:!gap-2 tw:!whitespace-nowrap tw:!rounded-md tw:text-sm tw:!font-medium tw:!transition-all tw:!cursor-pointer disabled:tw:!cursor-not-allowed disabled:tw:!pointer-events-none data-[disabled]:tw:!pointer-events-none data-[loading]:tw:!pointer-events-none disabled:tw:!opacity-50 data-[disabled]:tw:!opacity-50 [&_svg]:tw:!pointer-events-none [&_svg:not([class*='size-'])]:tw:!size-4 tw:!shrink-0 [&_svg]:tw:!shrink-0 tw:!outline-none focus-visible:tw:!border-ring focus-visible:tw:!ring-ring/50 focus-visible:tw:!ring-[3px] aria-invalid:tw:!ring-destructive/20 dark:aria-invalid:tw:!ring-destructive/40 aria-invalid:tw:!border-destructive", {
|
|
9
9
|
variants: {
|
|
10
10
|
variant: {
|
|
11
11
|
default: "tw:!bg-primary tw:!text-primary-foreground tw:!shadow-xs hover:tw:!bg-primary/90",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../src/components/data-table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,
|
|
1
|
+
{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../src/components/data-table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAOL,KAAK,EAKL,CAAC,EACF,MAAM,cAAc,CAAA;AAuBrB,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,MAAM,GAAG,IAAI,CAAA;AAEjD,MAAM,WAAW,eAAe,CAAC,CAAC;IAChC,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAA;IACnC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAA;CAC/E;AAED,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAA;IACV,QAAQ,CAAC,EAAE,YAAY,EAAE,CAAA;IACzB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CACnB;AAED,MAAM,WAAW,eAAe,CAAC,CAAC,GAAG,GAAG;IACtC,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,IAAI,CAAA;CAC1B;AAED,MAAM,WAAW,eAAe,CAAC,CAAC;IAChC,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,OAAO,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,IAAI,CAAA;IACzB,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,CAAA;IACnC,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,OAAO,CAAA;CAChC;AAED,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,QAAQ,CAAA;AAIhD,MAAM,WAAW,wBAAwB;IACvC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,eAAe,CAAC,EAAE,MAAM,EAAE,CAAA;IAC1B,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7C,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B;AAED,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,YAAY;IACpD,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAA;IAC7B,IAAI,EAAE,CAAC,EAAE,CAAA;IACT,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACnD,cAAc,CAAC,EAAE,MAAM,EAAE,CAAA;IACzB,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,KAAK,IAAI,CAAA;IACxD,SAAS,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,aAAa,CAAA;KAAE,CAAA;IACrD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,iBAAiB,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAA;IAC/C,OAAO,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAA;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,wBAAwB,CAAA;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,SAAS,CAAC,EAAE,CACV,KAAK,EAAE,MAAM,EACb,SAAS,EAAE,IAAI,GAAG,MAAM,EACxB,QAAQ,CAAC,EAAE,MAAM,KACd,IAAI,CAAA;IACT,aAAa,CAAC,EAAE,CACd,SAAS,EAAE,MAAM,EACjB,QAAQ,EAAE,MAAM,EAChB,QAAQ,CAAC,EAAE,MAAM,KACd,IAAI,CAAA;IACT,4BAA4B,CAAC,EAAE,MAAM,EAAE,CAAA;IACvC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE;QACX,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;KACvB,CAAA;IACD,eAAe,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAA;IACtC,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,cAAc,CAAC,EAAE,MAAM,EAAE,CAAA;IACzB,gBAAgB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;CACnD;AAED,wBAAgB,SAAS,CAAC,CAAC,SAAS,YAAY,EAAE,EAChD,OAAO,EACP,IAAI,EACJ,iBAAiB,EACjB,cAAc,EACd,MAAM,EACN,SAAS,EACT,UAAkB,EAClB,iBAAiB,EACjB,OAAO,EACP,SAAS,EACT,UAAU,EACV,QAAgB,EAChB,WAAmB,EACnB,SAAS,EACT,aAAa,EACb,4BAA4B,EAC5B,OAAe,EACf,WAAe,EACf,UAAU,EACV,eAAe,EACf,oBAA2B,EAC3B,cAAc,EACd,gBAAgB,GACjB,EAAE,cAAc,CAAC,CAAC,CAAC,2CA0gCnB;AAED,OAAO,EAAE,KAAK,EAAE,CAAC,EAAE,CAAA"}
|
|
@@ -22,7 +22,7 @@ function DataTable({ columns, data, onSelectionChange, selectedRowIds, onSort, s
|
|
|
22
22
|
const scrollContainerRef = React.useRef(null);
|
|
23
23
|
React.useEffect(() => {
|
|
24
24
|
if (pagination?.currentPage && scrollContainerRef.current) {
|
|
25
|
-
scrollContainerRef.current.scrollTo({ top: 0, behavior:
|
|
25
|
+
scrollContainerRef.current.scrollTo({ top: 0, behavior: "smooth" });
|
|
26
26
|
}
|
|
27
27
|
}, [pagination?.currentPage]);
|
|
28
28
|
const selectedRows = React.useMemo(() => {
|
|
@@ -132,7 +132,7 @@ function DataTable({ columns, data, onSelectionChange, selectedRowIds, onSort, s
|
|
|
132
132
|
totalItems,
|
|
133
133
|
pageSizeOptions: pagination?.pageSizeOptions ?? DEFAULT_PAGE_SIZE_OPTIONS,
|
|
134
134
|
showTotalItems: pagination?.showTotalItems ?? true,
|
|
135
|
-
mode: pagination?.mode ??
|
|
135
|
+
mode: pagination?.mode ?? "offset",
|
|
136
136
|
};
|
|
137
137
|
}, [pagination, processedData, internalPage, internalPageSize]);
|
|
138
138
|
const paginatedData = React.useMemo(() => {
|
|
@@ -141,19 +141,24 @@ function DataTable({ columns, data, onSelectionChange, selectedRowIds, onSort, s
|
|
|
141
141
|
}
|
|
142
142
|
const start = (effectivePagination.currentPage - 1) * effectivePagination.pageSize;
|
|
143
143
|
return processedData.slice(start, start + effectivePagination.pageSize);
|
|
144
|
-
}, [
|
|
144
|
+
}, [
|
|
145
|
+
processedData,
|
|
146
|
+
pagination?.currentPage,
|
|
147
|
+
effectivePagination.currentPage,
|
|
148
|
+
effectivePagination.pageSize,
|
|
149
|
+
]);
|
|
145
150
|
const effectiveData = paginatedData;
|
|
146
151
|
const toggleAllRows = () => {
|
|
147
152
|
const currentPageIds = effectiveData.map((row) => row.id);
|
|
148
|
-
const allCurrentPageSelected = currentPageIds.every(id => selectedRows.has(id));
|
|
153
|
+
const allCurrentPageSelected = currentPageIds.every((id) => selectedRows.has(id));
|
|
149
154
|
let newSelected;
|
|
150
155
|
if (allCurrentPageSelected) {
|
|
151
156
|
newSelected = new Set(selectedRows);
|
|
152
|
-
currentPageIds.forEach(id => newSelected.delete(id));
|
|
157
|
+
currentPageIds.forEach((id) => newSelected.delete(id));
|
|
153
158
|
}
|
|
154
159
|
else {
|
|
155
160
|
newSelected = new Set(selectedRows);
|
|
156
|
-
currentPageIds.forEach(id => newSelected.add(id));
|
|
161
|
+
currentPageIds.forEach((id) => newSelected.add(id));
|
|
157
162
|
}
|
|
158
163
|
setSelectedRows(newSelected);
|
|
159
164
|
const selectedIdsArray = Array.from(newSelected);
|
|
@@ -162,21 +167,22 @@ function DataTable({ columns, data, onSelectionChange, selectedRowIds, onSort, s
|
|
|
162
167
|
const shouldShowPagination = React.useMemo(() => {
|
|
163
168
|
if (pagination)
|
|
164
169
|
return true;
|
|
165
|
-
if (effectivePagination.totalPages <= 1 &&
|
|
170
|
+
if (effectivePagination.totalPages <= 1 &&
|
|
171
|
+
(effectivePagination.totalItems || 0) <= 10)
|
|
166
172
|
return false;
|
|
167
173
|
return true;
|
|
168
174
|
}, [pagination, effectivePagination]);
|
|
169
175
|
const getSortIcon = (columnKey) => {
|
|
170
176
|
if (sortConfig.key !== columnKey) {
|
|
171
|
-
return jsx(ArrowUpDown, { className: "tw:ml-2 tw:!h-[16px] tw:!w-[16px] tw:opacity-50" });
|
|
177
|
+
return (jsx(ArrowUpDown, { className: "tw:ml-2 tw:!h-[16px] tw:!w-[16px] tw:opacity-50" }));
|
|
172
178
|
}
|
|
173
179
|
if (sortConfig.direction === "asc") {
|
|
174
|
-
return jsx(ArrowUp, { className: "tw:ml-2 tw:!h-[16px] tw:!w-[16px] tw:text-foreground" });
|
|
180
|
+
return (jsx(ArrowUp, { className: "tw:ml-2 tw:!h-[16px] tw:!w-[16px] tw:text-foreground" }));
|
|
175
181
|
}
|
|
176
182
|
if (sortConfig.direction === "desc") {
|
|
177
|
-
return jsx(ArrowDown, { className: "tw:ml-2 tw:!h-[16px] tw:!w-[16px] tw:text-foreground" });
|
|
183
|
+
return (jsx(ArrowDown, { className: "tw:ml-2 tw:!h-[16px] tw:!w-[16px] tw:text-foreground" }));
|
|
178
184
|
}
|
|
179
|
-
return jsx(ArrowUpDown, { className: "tw:ml-2 tw:!h-[16px] tw:!w-[16px] tw:opacity-50" });
|
|
185
|
+
return (jsx(ArrowUpDown, { className: "tw:ml-2 tw:!h-[16px] tw:!w-[16px] tw:opacity-50" }));
|
|
180
186
|
};
|
|
181
187
|
const hasChildren = (row) => treeData && row.children && row.children.length > 0;
|
|
182
188
|
const isExpandable = expandable || treeData;
|
|
@@ -190,6 +196,18 @@ function DataTable({ columns, data, onSelectionChange, selectedRowIds, onSort, s
|
|
|
190
196
|
const filterableColumns = customFilterColumnsWhiteList
|
|
191
197
|
? columns.filter((col) => customFilterColumnsWhiteList.includes(col.key))
|
|
192
198
|
: columns;
|
|
199
|
+
const rowIndexOffset = React.useMemo(() => {
|
|
200
|
+
if (pagination?.currentPage !== undefined &&
|
|
201
|
+
pagination?.pageSize !== undefined) {
|
|
202
|
+
return Math.max(0, (pagination.currentPage - 1) * pagination.pageSize);
|
|
203
|
+
}
|
|
204
|
+
return Math.max(0, (effectivePagination.currentPage - 1) * effectivePagination.pageSize);
|
|
205
|
+
}, [
|
|
206
|
+
pagination?.currentPage,
|
|
207
|
+
pagination?.pageSize,
|
|
208
|
+
effectivePagination.currentPage,
|
|
209
|
+
effectivePagination.pageSize,
|
|
210
|
+
]);
|
|
193
211
|
const getRowBackgroundClass = (row, rowIndex, depth) => {
|
|
194
212
|
if (selectedRows.has(row.id))
|
|
195
213
|
return "tw:bg-accent";
|
|
@@ -200,12 +218,12 @@ function DataTable({ columns, data, onSelectionChange, selectedRowIds, onSort, s
|
|
|
200
218
|
return "tw:bg-background";
|
|
201
219
|
};
|
|
202
220
|
const getClickableField = (fieldKey) => {
|
|
203
|
-
return clickableFields?.find(cf => cf.field === fieldKey);
|
|
221
|
+
return clickableFields?.find((cf) => cf.field === fieldKey);
|
|
204
222
|
};
|
|
205
223
|
const getVisibleActions = (row) => {
|
|
206
224
|
if (!actions)
|
|
207
225
|
return [];
|
|
208
|
-
return actions.filter(action => !action.condition || action.condition(row));
|
|
226
|
+
return actions.filter((action) => !action.condition || action.condition(row));
|
|
209
227
|
};
|
|
210
228
|
const renderRow = (row, rowIndex, depth = 0, parentRow, siblingCount) => {
|
|
211
229
|
const canExpand = hasChildren(row) || (expandable && renderExpandedRow);
|
|
@@ -218,8 +236,8 @@ function DataTable({ columns, data, onSelectionChange, selectedRowIds, onSort, s
|
|
|
218
236
|
const totalSiblings = siblingCount ?? effectiveData.length;
|
|
219
237
|
const handleDragStart = (e) => {
|
|
220
238
|
setDraggedRowId(row.id);
|
|
221
|
-
e.dataTransfer.effectAllowed =
|
|
222
|
-
e.dataTransfer.setData(
|
|
239
|
+
e.dataTransfer.effectAllowed = "move";
|
|
240
|
+
e.dataTransfer.setData("text/plain", row.id);
|
|
223
241
|
};
|
|
224
242
|
const handleDragEnd = () => {
|
|
225
243
|
setDraggedRowId(null);
|
|
@@ -227,7 +245,7 @@ function DataTable({ columns, data, onSelectionChange, selectedRowIds, onSort, s
|
|
|
227
245
|
};
|
|
228
246
|
const handleDragOver = (e) => {
|
|
229
247
|
e.preventDefault();
|
|
230
|
-
e.dataTransfer.dropEffect =
|
|
248
|
+
e.dataTransfer.dropEffect = "move";
|
|
231
249
|
if (draggedRowId !== row.id) {
|
|
232
250
|
setDragOverRowId(row.id);
|
|
233
251
|
}
|
|
@@ -237,18 +255,37 @@ function DataTable({ columns, data, onSelectionChange, selectedRowIds, onSort, s
|
|
|
237
255
|
};
|
|
238
256
|
const handleDrop = (e) => {
|
|
239
257
|
e.preventDefault();
|
|
240
|
-
const draggedId = e.dataTransfer.getData(
|
|
258
|
+
const draggedId = e.dataTransfer.getData("text/plain");
|
|
241
259
|
if (draggedId && draggedId !== row.id) {
|
|
242
260
|
onDragReorder?.(draggedId, row.id, parentRow?.id);
|
|
243
261
|
}
|
|
244
262
|
setDraggedRowId(null);
|
|
245
263
|
setDragOverRowId(null);
|
|
246
264
|
};
|
|
247
|
-
|
|
265
|
+
const currentRowIndex = rowIndexOffset + rowIndex + 2;
|
|
266
|
+
return (jsxs(React.Fragment, { children: [jsxs("tr", { role: "row", "aria-rowindex": currentRowIndex, "aria-selected": hasRowSelection ? selectedRows.has(row.id) : undefined, className: cn("tw:border-b tw:transition-colors hover:tw:bg-accent/50", rowBgClass, isDragging && "tw:opacity-50", isDragOver && "tw:ring-2 tw:ring-primary tw:ring-inset"), draggable: reorderable, onDragStart: reorderable ? handleDragStart : undefined, onDragEnd: reorderable ? handleDragEnd : undefined, onDragOver: reorderable ? handleDragOver : undefined, onDragLeave: reorderable ? handleDragLeave : undefined, onDrop: reorderable ? handleDrop : undefined, children: [isExpandable && (jsx("td", { role: "gridcell", className: cn("tw:p-2 tw:w-12", rowBgClass), children: jsx("div", { style: { paddingLeft: indentPadding }, children: canExpand ? (jsx("button", { onClick: () => toggleRowExpansion(row.id), className: "tw:flex tw:items-center tw:justify-center hover:tw:bg-accent tw:rounded tw:p-1 tw:!pl-[10px]", "aria-label": isExpanded ? "Collapse row" : "Expand row", "aria-expanded": isExpanded, children: isExpanded ? (jsx(ChevronDown, { className: "tw:!h-[16px] tw:!w-[16px]" })) : (jsx(ChevronRight, { className: "tw:!h-[16px] tw:!w-[16px]" })) })) : (jsx("span", { className: "tw:w-6" })) }) })), hasRowSelection && (jsx("td", { role: "gridcell", className: cn("tw:p-2 tw:w-12", rowBgClass), children: jsx("div", { className: "tw:flex tw:items-center tw:justify-center", children: jsx(Checkbox, { checked: selectedRows.has(row.id), onCheckedChange: () => toggleRowSelection(row.id), "aria-label": `Select row ${rowIndex + 1}` }) }) })), reorderable && (jsx("td", { role: "gridcell", className: cn("tw:p-2 tw:w-12", rowBgClass), children: jsxs("div", { className: "tw:flex tw:flex-col tw:items-center tw:gap-0.5", children: [jsx("button", { onClick: () => onReorder?.(row.id, "up", parentRow?.id), className: "tw:flex tw:items-center tw:justify-center hover:tw:bg-accent tw:rounded tw:p-0.5 tw:text-muted-foreground hover:tw:text-foreground tw:transition-colors", disabled: rowIndex === 0, "aria-label": "Move row up", children: jsx(ChevronUp, { className: cn("tw:h-4 tw:w-4", rowIndex === 0 && "tw:opacity-30") }) }), jsx("button", { onClick: () => onReorder?.(row.id, "down", parentRow?.id), className: "tw:flex tw:items-center tw:justify-center hover:tw:bg-accent tw:rounded tw:p-0.5 tw:text-muted-foreground hover:tw:text-foreground tw:transition-colors", disabled: rowIndex === totalSiblings - 1, "aria-label": "Move row down", children: jsx(ChevronDown, { className: cn("tw:h-4 tw:w-4", rowIndex === totalSiblings - 1 && "tw:opacity-30") }) })] }) })), visibleColumns.map((column, colIndex) => {
|
|
248
267
|
const clickableField = getClickableField(column.key);
|
|
249
|
-
const cellContent = column.render
|
|
250
|
-
|
|
251
|
-
|
|
268
|
+
const cellContent = column.render
|
|
269
|
+
? column.render(row[column.key], row, rowIndex, depth)
|
|
270
|
+
: row[column.key];
|
|
271
|
+
return (jsx("td", { role: "gridcell", className: cn("tw:p-4 tw:align-middle tw:max-w-0 tw:overflow-hidden", column.align === "center" && "tw:text-center", column.align === "right" && "tw:text-right", column.className, rowBgClass), children: jsx("div", { className: cn("tw:truncate", clickableField && "tw:!text-primary"), style: {
|
|
272
|
+
paddingLeft: colIndex === 0
|
|
273
|
+
? isExpandable
|
|
274
|
+
? depth > 0
|
|
275
|
+
? 16
|
|
276
|
+
: 0
|
|
277
|
+
: indentPadding
|
|
278
|
+
: 0,
|
|
279
|
+
}, children: clickableField ? (jsx("span", { onClick: () => clickableField.onClick(row), className: "hover:tw:!text-primary/80 hover:tw:underline tw:cursor-pointer tw:transition-colors", children: cellContent })) : (cellContent) }) }, column.key));
|
|
280
|
+
}), showActionsColumn && (jsx("td", { role: "gridcell", className: cn("tw:p-2 tw:text-right tw:sticky tw:right-0", rowBgClass), children: visibleActionsForRow.length > 0 && (jsxs(Menu.Root, { modal: false, children: [jsx(Menu.Trigger, { id: `base-ui-row-action-${row.id}`, render: (props) => (jsx(Button, { variant: "ghost", size: "icon", className: "tw:h-8 tw:w-8", "aria-label": "Row actions", ...props, id: `base-ui-row-action-${row.id}`, children: jsx(MoreHorizontal, { className: "tw:!h-[16px] tw:!w-[16px]" }) })) }), jsx(Menu.Portal, { children: jsx(Menu.Positioner, { side: "bottom", align: "end", sideOffset: 4, collisionPadding: 8, children: jsx(Menu.Popup, { "aria-labelledby": "base-ui-toggle-columns-trigger", className: cn("tw:bg-popover tw:font-sans tw:text-popover-foreground tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out tw:data-[state=closed]:fade-out-0 tw:data-[state=open]:fade-in-0 tw:data-[state=closed]:zoom-out-95 tw:data-[state=open]:zoom-in-95 tw:data-[side=bottom]:slide-in-from-top-2 tw:data-[side=left]:slide-in-from-right-2 tw:data-[side=right]:slide-in-from-left-2 tw:data-[side=top]:slide-in-from-bottom-2 tw:z-50 tw:min-w-[8rem] tw:overflow-x-hidden tw:overflow-y-auto tw:rounded-md tw:border tw:p-1 tw:shadow-md"), children: visibleActionsForRow.map((action, index) => (jsxs(Menu.Item, { onClick: () => action.onClick(row), className: cn("tw:focus:bg-accent tw:focus:text-accent-foreground tw:relative tw:flex tw:cursor-default tw:items-center tw:gap-2 tw:rounded-sm tw:px-2 tw:py-1.5 tw:text-[14px] tw:outline-hidden tw:select-none tw:data-[disabled]:pointer-events-none tw:data-[disabled]:opacity-50", action.variant === "destructive" &&
|
|
281
|
+
"tw:text-destructive focus:tw:text-destructive"), children: [action.icon && (jsx("span", { className: "tw:mr-2", children: action.icon })), action.label] }, index))) }) }) })] })) }))] }), expandable && !treeData && isExpanded && renderExpandedRow && (jsx("tr", { role: "row", className: "tw:border-b tw:bg-muted/30", children: jsx("td", { role: "gridcell", colSpan: visibleColumns.length +
|
|
282
|
+
(showActionsColumn ? 1 : 0) +
|
|
283
|
+
(hasRowSelection ? 1 : 0) +
|
|
284
|
+
(isExpandable ? 1 : 0) +
|
|
285
|
+
(reorderable ? 1 : 0), className: "tw:p-4", children: renderExpandedRow(row) }) })), treeData &&
|
|
286
|
+
isExpanded &&
|
|
287
|
+
row.children &&
|
|
288
|
+
row.children.map((child, childIndex) => renderRow(child, childIndex, depth + 1, row, row.children?.length))] }, row.id));
|
|
252
289
|
};
|
|
253
290
|
const renderPaginationItems = () => {
|
|
254
291
|
const { currentPage, totalPages, onPageChange } = effectivePagination;
|
|
@@ -319,31 +356,63 @@ function DataTable({ columns, data, onSelectionChange, selectedRowIds, onSort, s
|
|
|
319
356
|
});
|
|
320
357
|
return `${totalWidth}px`;
|
|
321
358
|
};
|
|
322
|
-
return (jsxs("div", { className: cn("tw:w-full tw:h-full tw:flex tw:flex-col", className), children: [jsxs("div", { className: "tw:relative tw:flex-1 tw:flex tw:flex-col tw:min-h-0", children: [jsx("div", { ref: scrollContainerRef, className: "tw:flex-1 tw:overflow-auto [&::-webkit-scrollbar]:tw:h-2 [&::-webkit-scrollbar]:tw:w-2 [&::-webkit-scrollbar-track]:tw:bg-muted [&::-webkit-scrollbar-thumb]:tw:bg-muted-foreground/30 [&::-webkit-scrollbar-thumb]:tw:rounded-full hover:[&::-webkit-scrollbar-thumb]:tw:bg-muted-foreground/50", children: jsxs("table", { className: "tw:w-full tw:table-fixed tw:caption-bottom tw:text-sm", role: "grid", "aria-busy": loading, style: { minWidth: calculateMinTableWidth() }, children: [jsx("thead", { className: "tw:border-b tw:sticky tw:top-0 tw:z-10 tw:bg-background", children: jsxs("tr", { children: [isExpandable && jsx("th", { scope: "col", className: "tw:h-10 tw:w-12 tw:px-2" }), hasRowSelection && (jsx("th", { scope: "col", className: "tw:h-10 tw:w-12 tw:px-2", children: jsx("div", { className: "tw:flex tw:items-center tw:justify-center", children: jsx(Checkbox, { checked: effectiveData.length > 0 &&
|
|
359
|
+
return (jsxs("div", { className: cn("tw:w-full tw:h-full tw:flex tw:flex-col", className), children: [jsxs("div", { className: "tw:relative tw:flex-1 tw:flex tw:flex-col tw:min-h-0", children: [jsx("div", { ref: scrollContainerRef, className: "tw:flex-1 tw:overflow-auto [&::-webkit-scrollbar]:tw:h-2 [&::-webkit-scrollbar]:tw:w-2 [&::-webkit-scrollbar-track]:tw:bg-muted [&::-webkit-scrollbar-thumb]:tw:bg-muted-foreground/30 [&::-webkit-scrollbar-thumb]:tw:rounded-full hover:[&::-webkit-scrollbar-thumb]:tw:bg-muted-foreground/50", children: jsxs("table", { className: "tw:w-full tw:table-fixed tw:caption-bottom tw:text-sm", role: "grid", "aria-busy": loading, "aria-rowcount": effectivePagination.totalItems ?? processedData.length, style: { minWidth: calculateMinTableWidth() }, children: [jsx("thead", { className: "tw:border-b tw:sticky tw:top-0 tw:z-10 tw:bg-background", children: jsxs("tr", { role: "row", children: [isExpandable && (jsx("th", { scope: "col", role: "columnheader", className: "tw:h-10 tw:w-12 tw:px-2" })), hasRowSelection && (jsx("th", { scope: "col", role: "columnheader", className: "tw:h-10 tw:w-12 tw:px-2", children: jsx("div", { className: "tw:flex tw:items-center tw:justify-center", children: jsx(Checkbox, { checked: effectiveData.length > 0 &&
|
|
360
|
+
effectiveData.every((row) => selectedRows.has(row.id)), onCheckedChange: toggleAllRows, "aria-label": "Select all rows" }) }) })), reorderable && (jsx("th", { scope: "col", role: "columnheader", className: "tw:h-10 tw:w-12 tw:px-2" })), visibleColumns.map((column) => (jsx("th", { scope: "col", role: "columnheader", "aria-sort": column.sortable && sortConfig.key === column.key
|
|
323
361
|
? sortConfig.direction === "asc"
|
|
324
362
|
? "ascending"
|
|
325
363
|
: sortConfig.direction === "desc"
|
|
326
364
|
? "descending"
|
|
327
365
|
: "none"
|
|
328
|
-
: undefined, className: cn("tw:!h-[40px] tw:px-4 tw:text-left tw:align-middle tw:font-medium tw:text-foreground tw:whitespace-nowrap", column.align === "center" && "tw:text-center", column.align === "right" && "tw:text-right"), style: { width: column.width }, children: column.sortable && onSort ? (jsxs("button", { onClick: () => !loading && handleSort(column.key), disabled: loading, "aria-label": `Sort by ${column.label}${sortConfig.key === column.key
|
|
366
|
+
: undefined, className: cn("tw:!h-[40px] tw:px-4 tw:text-left tw:align-middle tw:font-medium tw:text-foreground tw:whitespace-nowrap", column.align === "center" && "tw:text-center", column.align === "right" && "tw:text-right"), style: { width: column.width }, children: column.sortable && onSort ? (jsxs("button", { onClick: () => !loading && handleSort(column.key), disabled: loading, "aria-label": `Sort by ${column.label}${sortConfig.key === column.key
|
|
367
|
+
? sortConfig.direction === "asc"
|
|
368
|
+
? ", currently sorted ascending"
|
|
369
|
+
: sortConfig.direction === "desc"
|
|
370
|
+
? ", currently sorted descending"
|
|
371
|
+
: ""
|
|
372
|
+
: ""}`, className: cn("tw:flex tw:items-center hover:tw:text-foreground/80 tw:transition-colors", loading && "tw:opacity-50 tw:cursor-not-allowed"), children: [column.label, getSortIcon(column.key)] })) : (column.label) }, column.key))), showActionsColumn && (jsx("th", { scope: "col", role: "columnheader", className: "tw:h-10 tw:w-20 tw:px-2 tw:sticky tw:right-0 tw:bg-background", children: jsx("div", { className: "tw:flex tw:items-center tw:justify-end tw:pr-1", children: showColumnVisibility && (jsxs(Menu.Root, { modal: false, children: [jsx(Menu.Trigger, { id: "base-ui-toggle-columns-trigger", render: (props) => (jsx(Button, { variant: "ghost", size: "icon", className: "tw:h-8 tw:w-8", "aria-label": "Toggle column visibility", ...props, id: "base-ui-toggle-columns-trigger", children: jsx(Settings, { className: "tw:!h-[20px] tw:!w-[20px] tw:text-muted-foreground" }) })) }), jsx(Menu.Portal, { children: jsx(Menu.Positioner, { side: "bottom", align: "end", sideOffset: 4, collisionPadding: 8, children: jsx(Menu.Popup, { "aria-labelledby": `base-ui-toggle-columns-trigger`, className: cn("tw:bg-popover tw:font-sans tw:text-popover-foreground tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out tw:data-[state=closed]:fade-out-0 tw:data-[state=open]:fade-in-0 tw:data-[state=closed]:zoom-out-95 tw:data-[state=open]:zoom-in-95 tw:data-[side=bottom]:slide-in-from-top-2 tw:data-[side=left]:slide-in-from-right-2 tw:data-[side=right]:slide-in-from-left-2 tw:data-[side=top]:slide-in-from-bottom-2 tw:z-50 tw:min-w-[8rem] tw:overflow-x-hidden tw:overflow-y-auto tw:rounded-md tw:border tw:p-1 tw:shadow-md"), children: jsxs(Menu.Group, { children: [jsx(Menu.GroupLabel, { className: "tw:px-2 tw:py-1.5 tw:text-[14px] tw:font-medium", children: "Toggle Columns" }), jsx("div", { className: "tw:bg-border tw:-mx-1 tw:my-1 tw:h-px" }), filterableColumns.map((column) => {
|
|
329
373
|
const isVisible = !hiddenColumns.includes(column.key);
|
|
330
|
-
return (jsxs(Menu.Item, { onClick: () => toggleColumnVisibility(column.key), closeOnClick: false, className: cn("tw:focus:bg-accent tw:focus:text-accent-foreground tw:relative tw:flex tw:cursor-default tw:items-center tw:gap-2 tw:rounded-sm tw:py-1.5 tw:pr-2 tw:pl-8 tw:text-[14px] tw:outline-hidden tw:select-none tw:data-[disabled]:pointer-events-none tw:data-[disabled]:opacity-50"), children: [jsx("span", { className: "tw:pointer-events-none tw:absolute tw:left-2 tw:flex tw:size-3.5 tw:items-center tw:justify-center", children: isVisible && jsx(Check, { className: "tw:size-4" }) }), column.label] }, column.key));
|
|
331
|
-
})] }) }) }) })] })) }) }))] }) }), jsx("tbody", { className: "tw:relative", children: effectiveData.length === 0 && !loading ? (jsx("tr", { children: jsx("td", { colSpan: visibleColumns.length +
|
|
374
|
+
return (jsxs(Menu.Item, { onClick: () => toggleColumnVisibility(column.key), closeOnClick: false, className: cn("tw:focus:bg-accent tw:focus:text-accent-foreground tw:relative tw:flex tw:cursor-default tw:items-center tw:gap-2 tw:rounded-sm tw:py-1.5 tw:pr-2 tw:pl-8 tw:text-[14px] tw:outline-hidden tw:select-none tw:data-[disabled]:pointer-events-none tw:data-[disabled]:opacity-50"), children: [jsx("span", { className: "tw:pointer-events-none tw:absolute tw:left-2 tw:flex tw:size-3.5 tw:items-center tw:justify-center", children: isVisible && (jsx(Check, { className: "tw:size-4" })) }), column.label] }, column.key));
|
|
375
|
+
})] }) }) }) })] })) }) }))] }) }), jsx("tbody", { className: "tw:relative", children: effectiveData.length === 0 && !loading ? (jsx("tr", { children: jsx("td", { colSpan: visibleColumns.length +
|
|
376
|
+
(showActionsColumn ? 1 : 0) +
|
|
377
|
+
(hasRowSelection ? 1 : 0) +
|
|
378
|
+
(isExpandable ? 1 : 0) +
|
|
379
|
+
(reorderable ? 1 : 0), className: "tw:h-48", children: jsxs("div", { className: "tw:flex tw:flex-col tw:items-center tw:justify-center tw:h-full tw:text-center", children: [emptyState?.icon || (jsx("div", { className: "tw:h-12 tw:w-12 tw:rounded-full tw:bg-muted tw:flex tw:items-center tw:justify-center tw:mb-3", children: jsx(Inbox, { className: "tw:h-6 tw:w-6 tw:text-muted-foreground" }) })), jsx("p", { className: "tw:text-base tw:font-medium tw:text-foreground", children: emptyState?.title || "No results found" }), jsx("p", { className: "tw:text-sm tw:text-muted-foreground tw:mt-1", children: emptyState?.description ||
|
|
380
|
+
"There are no items to display." })] }) }) })) : (effectiveData.map((row, rowIndex) => renderRow(row, rowIndex, 0))) })] }) }), loading && (jsx("div", { className: "tw:absolute tw:inset-0 tw:z-20 tw:flex tw:items-center tw:justify-center tw:bg-background/50 tw:backdrop-blur-[1px]", role: "status", "aria-live": "polite", "aria-label": "Loading table data", children: jsxs("div", { className: "tw:flex tw:flex-col tw:items-center", children: [jsx(Loader2, { className: "tw:h-8 tw:w-8 tw:animate-spin tw:text-primary" }), effectiveData.length === 0 && (jsx("p", { className: "tw:text-sm tw:text-muted-foreground tw:mt-3", children: "Loading..." }))] }) }))] }), shouldShowPagination && (jsxs("div", { className: "tw:relative tw:flex tw:items-center tw:justify-between tw:border-t tw:px-4 tw:py-4 tw:bg-background", children: [(() => {
|
|
332
381
|
const options = effectivePagination.pageSizeOptions ?? DEFAULT_PAGE_SIZE_OPTIONS;
|
|
333
382
|
if (options.length === 0)
|
|
334
383
|
return jsx("div", {});
|
|
335
|
-
return (jsxs("div", { className: "tw:flex tw:items-center tw:gap-2 tw:z-10", children: [jsx("span", { className: "tw:text-[14px] tw:text-muted-foreground tw:whitespace-nowrap", id: "rows-per-page-label", children: "Rows per page:" }), jsxs(Select, { value: String(effectivePagination.pageSize ?? options[0]), onValueChange: (val) => !loading &&
|
|
336
|
-
|
|
384
|
+
return (jsxs("div", { className: "tw:flex tw:items-center tw:gap-2 tw:z-10", children: [jsx("span", { className: "tw:text-[14px] tw:text-muted-foreground tw:whitespace-nowrap", id: "rows-per-page-label", children: "Rows per page:" }), jsxs(Select, { value: String(effectivePagination.pageSize ?? options[0]), onValueChange: (val) => !loading &&
|
|
385
|
+
effectivePagination.onPageSizeChange?.(Number(val)), disabled: loading, children: [jsx(SelectTrigger, { id: "base-ui-pagination-trigger", className: "tw:flex tw:h-[32px] tw:w-[70px] tw:items-center tw:justify-between tw:rounded-md tw:border tw:border-input tw:bg-transparent tw:px-3 tw:py-2 tw:text-[14px] tw:shadow-sm tw:ring-offset-background placeholder:tw:text-muted-foreground focus:tw:outline-none focus:tw:ring-1 focus:tw:ring-ring disabled:tw:cursor-not-allowed disabled:tw:opacity-50", children: jsx(SelectValue, {}) }), jsx(SelectContent, { side: "top", align: "end", children: options.map((size) => (jsx(SelectItem, { value: String(size), children: size }, size))) })] })] }));
|
|
386
|
+
})(), effectivePagination.showTotalItems &&
|
|
387
|
+
effectivePagination.totalItems !== undefined && (jsx("div", { className: "tw:absolute tw:left-1/2 tw:-translate-x-1/2 tw:flex tw:justify-center tw:items-center", children: jsxs("span", { className: "tw:text-[14px] tw:text-muted-foreground", children: ["Total: ", effectivePagination.totalItems] }) })), jsx("div", { className: "tw:z-10", children: jsx(Pagination, { className: "tw:!mx-0 tw:!w-auto", "aria-label": "Table pagination", children: jsxs(PaginationContent, { children: [jsx(PaginationItem, { children: jsx(PaginationPrevious, { href: "#", onClick: (e) => {
|
|
337
388
|
e.preventDefault();
|
|
338
|
-
if (!loading &&
|
|
389
|
+
if (!loading &&
|
|
390
|
+
!effectivePagination.disablePrevious &&
|
|
391
|
+
effectivePagination.currentPage > 1) {
|
|
339
392
|
effectivePagination.onPageChange(effectivePagination.currentPage - 1);
|
|
340
393
|
}
|
|
341
|
-
}, "aria-label": "Go to previous page", "aria-disabled": loading ||
|
|
394
|
+
}, "aria-label": "Go to previous page", "aria-disabled": loading ||
|
|
395
|
+
effectivePagination.disablePrevious ||
|
|
396
|
+
effectivePagination.currentPage <= 1, className: cn((loading ||
|
|
397
|
+
effectivePagination.disablePrevious ||
|
|
398
|
+
effectivePagination.currentPage <= 1) &&
|
|
399
|
+
"tw:pointer-events-none tw:opacity-50") }) }), effectivePagination.mode !== "cursor" &&
|
|
400
|
+
renderPaginationItems(), jsx(PaginationItem, { children: jsx(PaginationNext, { href: "#", onClick: (e) => {
|
|
342
401
|
e.preventDefault();
|
|
343
|
-
if (!loading &&
|
|
402
|
+
if (!loading &&
|
|
403
|
+
!effectivePagination.disableNext &&
|
|
404
|
+
effectivePagination.currentPage <
|
|
405
|
+
effectivePagination.totalPages) {
|
|
344
406
|
effectivePagination.onPageChange(effectivePagination.currentPage + 1);
|
|
345
407
|
}
|
|
346
|
-
}, "aria-label": "Go to next page", "aria-disabled": loading ||
|
|
408
|
+
}, "aria-label": "Go to next page", "aria-disabled": loading ||
|
|
409
|
+
effectivePagination.disableNext ||
|
|
410
|
+
effectivePagination.currentPage >=
|
|
411
|
+
effectivePagination.totalPages, className: cn((loading ||
|
|
412
|
+
effectivePagination.disableNext ||
|
|
413
|
+
effectivePagination.currentPage >=
|
|
414
|
+
effectivePagination.totalPages) &&
|
|
415
|
+
"tw:pointer-events-none tw:opacity-50") }) })] }) }) })] }))] }));
|
|
347
416
|
}
|
|
348
417
|
|
|
349
418
|
export { DataTable };
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export interface SearchBarProps {
|
|
2
|
+
value: string;
|
|
3
|
+
onChange: (value: string) => void;
|
|
4
|
+
onSearch: (value: string) => void;
|
|
5
|
+
onClear: () => void;
|
|
6
|
+
placeholder?: string;
|
|
7
|
+
disabled?: boolean;
|
|
8
|
+
loading?: boolean;
|
|
9
|
+
applyLabel?: string;
|
|
10
|
+
clearLabel?: string;
|
|
11
|
+
className?: string;
|
|
12
|
+
inputAriaLabel?: string;
|
|
13
|
+
}
|
|
14
|
+
export declare function SearchBar({ value, onChange, onSearch, onClear, placeholder, disabled, loading, applyLabel, clearLabel, className, inputAriaLabel, }: SearchBarProps): import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
//# sourceMappingURL=search-bar.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"search-bar.d.ts","sourceRoot":"","sources":["../../src/components/search-bar.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB;AAED,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,WAAyB,EACzB,QAAgB,EAChB,OAAe,EACf,UAAoB,EACpB,UAAoB,EACpB,SAAS,EACT,cAA+B,GAChC,EAAE,cAAc,2CAsEhB"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { SearchIcon, XIcon } from 'lucide-react';
|
|
3
|
+
import { cn } from '../lib/utils.js';
|
|
4
|
+
import { Input } from './input.js';
|
|
5
|
+
import { Button } from './button.js';
|
|
6
|
+
|
|
7
|
+
function SearchBar({ value, onChange, onSearch, onClear, placeholder = "Search...", disabled = false, loading = false, applyLabel = "Apply", clearLabel = "Clear", className, inputAriaLabel = "Search input", }) {
|
|
8
|
+
const handleKeyDown = (e) => {
|
|
9
|
+
if (e.key === "Enter") {
|
|
10
|
+
e.preventDefault();
|
|
11
|
+
onSearch(value);
|
|
12
|
+
}
|
|
13
|
+
else if (e.key === "Escape") {
|
|
14
|
+
e.preventDefault();
|
|
15
|
+
onClear();
|
|
16
|
+
}
|
|
17
|
+
};
|
|
18
|
+
const handleClearClick = () => {
|
|
19
|
+
onChange("");
|
|
20
|
+
onClear();
|
|
21
|
+
};
|
|
22
|
+
return (jsxs("div", { "data-slot": "search-bar", className: cn("tw:!flex tw:!w-full tw:!gap-2", className), children: [jsxs("div", { className: "tw:!relative tw:!flex-1", children: [jsx(SearchIcon, { className: "tw:!absolute tw:!left-3 tw:!top-1/2 tw:!-translate-y-1/2 tw:!h-4 tw:!w-4 tw:text-muted-foreground tw:!pointer-events-none", "aria-hidden": "true" }), jsx(Input, { type: "text", value: value, onChange: (e) => onChange(e.target.value), onKeyDown: handleKeyDown, placeholder: placeholder, disabled: disabled, className: "tw:!pl-9", "aria-label": inputAriaLabel }), value && !disabled && (jsx("button", { type: "button", onClick: handleClearClick, className: "tw:!absolute tw:!right-3 tw:!top-1/2 tw:!-translate-y-1/2 tw:!h-4 tw:!w-4 tw:text-muted-foreground hover:tw:text-foreground tw:transition-colors tw:!cursor-pointer", "aria-label": "Clear search", children: jsx(XIcon, { className: "tw:!h-4 tw:!w-4" }) }))] }), jsx(Button, { variant: "default", size: "sm", onClick: () => onSearch(value), disabled: disabled || !value, loading: loading, className: "tw:!min-w-[80px]", "aria-label": "Apply search", children: applyLabel }), jsx(Button, { variant: "outline", size: "sm", onClick: handleClearClick, disabled: disabled || !value, className: "tw:!min-w-[80px]", "aria-label": "Clear search", children: clearLabel })] }));
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
export { SearchBar };
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { type DataTableColumn, type DataTableRow } from "./data-table";
|
|
2
|
+
export interface SelectionPanelProps<T extends DataTableRow> {
|
|
3
|
+
open: boolean;
|
|
4
|
+
onClose: () => void;
|
|
5
|
+
onDone: (selectedIds: string[]) => void;
|
|
6
|
+
title?: string;
|
|
7
|
+
description?: string;
|
|
8
|
+
availableItems: T[];
|
|
9
|
+
columns: DataTableColumn<T>[];
|
|
10
|
+
selectedColumns?: DataTableColumn<T>[];
|
|
11
|
+
selectedIds: string[];
|
|
12
|
+
loading?: boolean;
|
|
13
|
+
treeMode?: boolean;
|
|
14
|
+
availableLabel?: string;
|
|
15
|
+
selectedLabel?: string;
|
|
16
|
+
addButtonLabel?: string;
|
|
17
|
+
removeButtonLabel?: string;
|
|
18
|
+
doneButtonLabel?: string;
|
|
19
|
+
cancelButtonLabel?: string;
|
|
20
|
+
availableEmptyMessage?: string;
|
|
21
|
+
selectedEmptyMessage?: string;
|
|
22
|
+
width?: string;
|
|
23
|
+
maxWidth?: string;
|
|
24
|
+
showConfirmOnClose?: boolean;
|
|
25
|
+
confirmCloseMessage?: string;
|
|
26
|
+
onBeforeSelectionChange?: (selectedIds: string[]) => string[];
|
|
27
|
+
}
|
|
28
|
+
export declare function SelectionPanel<T extends DataTableRow>({ open, onClose, onDone, title, description, availableItems, columns, selectedColumns, selectedIds: initialSelectedIds, loading, treeMode, availableLabel, selectedLabel, addButtonLabel, removeButtonLabel, doneButtonLabel, cancelButtonLabel, availableEmptyMessage, selectedEmptyMessage, width, maxWidth, showConfirmOnClose, confirmCloseMessage, onBeforeSelectionChange, }: SelectionPanelProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
29
|
+
//# sourceMappingURL=selection-panel.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"selection-panel.d.ts","sourceRoot":"","sources":["../../src/components/selection-panel.tsx"],"names":[],"mappings":"AAMA,OAAO,EAEL,KAAK,eAAe,EACpB,KAAK,YAAY,EAClB,MAAM,cAAc,CAAA;AAuBrB,MAAM,WAAW,mBAAmB,CAAC,CAAC,SAAS,YAAY;IACzD,IAAI,EAAE,OAAO,CAAA;IACb,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,MAAM,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACvC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,cAAc,EAAE,CAAC,EAAE,CAAA;IACnB,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAA;IAC7B,eAAe,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAA;IACtC,WAAW,EAAE,MAAM,EAAE,CAAA;IACrB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,uBAAuB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,KAAK,MAAM,EAAE,CAAA;CAC9D;AAED,wBAAgB,cAAc,CAAC,CAAC,SAAS,YAAY,EAAE,EACrD,IAAI,EACJ,OAAO,EACP,MAAM,EACN,KAAsB,EACtB,WAAW,EACX,cAAc,EACd,OAAO,EACP,eAAe,EACf,WAAW,EAAE,kBAAkB,EAC/B,OAAe,EACf,QAAgB,EAChB,cAA4B,EAC5B,aAA0B,EAC1B,cAA+B,EAC/B,iBAAqC,EACrC,eAAwB,EACxB,iBAA4B,EAC5B,qBAAqB,EACrB,oBAA0C,EAC1C,KAAa,EACb,QAAmB,EACnB,kBAAyB,EACzB,mBAAkF,EAClF,uBAAuB,GACxB,EAAE,mBAAmB,CAAC,CAAC,CAAC,2CA6VxB"}
|