@wakastellar/ui 4.0.0 → 4.0.1

package/dist/components/DataTable/DataTablePagination.es.js

@@ -0,0 +1,124 @@
+"use client";
+"use client";
+import { Button as e } from "../button/index.es.js";
+import { Select as t, SelectContent as n, SelectItem as r, SelectTrigger as i, SelectValue as a } from "../select/index.es.js";
+import "react";
+import { ChevronLeft as o, ChevronRight as s, ChevronsLeft as c, ChevronsRight as l } from "lucide-react";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+import { useTranslation as p } from "react-i18next";
+//#region src/components/DataTable/DataTablePagination.tsx
+function m({ table: m, pageSizeOptions: h = [
+	25,
+	50,
+	100,
+	500
+], showInfo: g = !0 }) {
+	let { t: _ } = p(), v = m.getState().pagination.pageIndex, y = m.getState().pagination.pageSize, b = m.getPageCount(), x = m.getFilteredRowModel().rows.length, S = v * y + 1, C = Math.min((v + 1) * y, x);
+	return /* @__PURE__ */ f("div", {
+		className: "flex flex-col sm:flex-row items-center justify-between gap-4 px-4 py-3 border-t",
+		children: [g && /* @__PURE__ */ d("div", {
+			className: "text-sm text-muted-foreground",
+			children: x > 0 ? /* @__PURE__ */ f(u, { children: [
+				_("datatable.pagination.showing", { defaultValue: "Showing" }),
+				" ",
+				S,
+				" ",
+				_("datatable.pagination.to", { defaultValue: "to" }),
+				" ",
+				C,
+				" ",
+				_("datatable.pagination.of", { defaultValue: "of" }),
+				" ",
+				x,
+				" ",
+				_("datatable.pagination.results", { defaultValue: "results" })
+			] }) : _("datatable.pagination.noResults", { defaultValue: "No results" })
+		}), /* @__PURE__ */ f("div", {
+			className: "flex items-center gap-6",
+			children: [/* @__PURE__ */ f("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ d("span", {
+					className: "text-sm text-muted-foreground whitespace-nowrap",
+					children: _("datatable.pagination.rowsPerPage", { defaultValue: "Rows per page" })
+				}), /* @__PURE__ */ f(t, {
+					value: `${y}`,
+					onValueChange: (e) => {
+						m.setPageSize(Number(e));
+					},
+					children: [/* @__PURE__ */ d(i, {
+						className: "h-8 w-[70px]",
+						children: /* @__PURE__ */ d(a, { placeholder: y })
+					}), /* @__PURE__ */ d(n, {
+						side: "top",
+						children: h.map((e) => /* @__PURE__ */ d(r, {
+							value: `${e}`,
+							children: e
+						}, e))
+					})]
+				})]
+			}), /* @__PURE__ */ f("div", {
+				className: "flex items-center gap-1",
+				children: [
+					/* @__PURE__ */ f("span", {
+						className: "text-sm text-muted-foreground mr-2",
+						children: [
+							_("datatable.pagination.page", { defaultValue: "Page" }),
+							" ",
+							v + 1,
+							" ",
+							_("datatable.pagination.of", { defaultValue: "of" }),
+							" ",
+							b
+						]
+					}),
+					/* @__PURE__ */ f(e, {
+						variant: "outline",
+						size: "icon",
+						className: "h-8 w-8",
+						onClick: () => m.setPageIndex(0),
+						disabled: !m.getCanPreviousPage(),
+						children: [/* @__PURE__ */ d(c, { className: "h-4 w-4" }), /* @__PURE__ */ d("span", {
+							className: "sr-only",
+							children: _("datatable.pagination.firstPage", { defaultValue: "First page" })
+						})]
+					}),
+					/* @__PURE__ */ f(e, {
+						variant: "outline",
+						size: "icon",
+						className: "h-8 w-8",
+						onClick: () => m.previousPage(),
+						disabled: !m.getCanPreviousPage(),
+						children: [/* @__PURE__ */ d(o, { className: "h-4 w-4" }), /* @__PURE__ */ d("span", {
+							className: "sr-only",
+							children: _("datatable.pagination.previousPage", { defaultValue: "Previous page" })
+						})]
+					}),
+					/* @__PURE__ */ f(e, {
+						variant: "outline",
+						size: "icon",
+						className: "h-8 w-8",
+						onClick: () => m.nextPage(),
+						disabled: !m.getCanNextPage(),
+						children: [/* @__PURE__ */ d(s, { className: "h-4 w-4" }), /* @__PURE__ */ d("span", {
+							className: "sr-only",
+							children: _("datatable.pagination.nextPage", { defaultValue: "Next page" })
+						})]
+					}),
+					/* @__PURE__ */ f(e, {
+						variant: "outline",
+						size: "icon",
+						className: "h-8 w-8",
+						onClick: () => m.setPageIndex(b - 1),
+						disabled: !m.getCanNextPage(),
+						children: [/* @__PURE__ */ d(l, { className: "h-4 w-4" }), /* @__PURE__ */ d("span", {
+							className: "sr-only",
+							children: _("datatable.pagination.lastPage", { defaultValue: "Last page" })
+						})]
+					})
+				]
+			})]
+		})]
+	});
+}
+//#endregion
+export { m as DataTablePagination };

package/dist/components/DataTable/DataTableSelection.cjs.js

@@ -0,0 +1 @@
+"use client";"use client";const e=require(`../../_virtual/_rolldown/runtime.cjs.js`),t=require(`../button/index.cjs.js`),n=require(`../checkbox/index.cjs.js`),r=require(`../select/index.cjs.js`),i=require(`./utils.cjs.js`);let a=require(`react`);a=e.__toESM(a);let o=require(`react/jsx-runtime`);function s({table:e,selectionMode:s=`multiple`,selectedRows:c,onSelectionChange:l,selectionActions:u=[],className:d}){let[f,p]=a.useState(null);a.useCallback((t,n)=>{if(s===`single`){e.setRowSelection({[t]:n});return}if(s===`range`&&f!==null){let r=Math.min(f,t),i=Math.max(f,t),a={...e.getState().rowSelection};for(let e=r;e<=i;e++)a[e]=n;e.setRowSelection(a)}else e.setRowSelection(e=>({...e,[t]:n}));p(t)},[e,s,f]);let m=a.useCallback(t=>{if(t){let t=e.getRowModel().rows.reduce((e,t,n)=>(e[n]=!0,e),{});e.setRowSelection(t)}else e.setRowSelection({})},[e]);a.useCallback((t,n,r)=>{let i={...e.getState().rowSelection};for(let e=t;e<=n;e++)i[e]=r;e.setRowSelection(i)},[e]),a.useCallback(t=>{let n={...e.getState().rowSelection};e.getRowModel().rows.forEach((e,r)=>{t(e.original)&&(n[r]=!0)}),e.setRowSelection(n)},[e]);let h=a.useCallback(e=>{e.onClick(c)},[c]),g=e.getIsAllPageRowsSelected(),_=e.getIsSomePageRowsSelected();return(0,o.jsxs)(`div`,{className:i.cn(`flex items-center gap-2`,d),children:[(0,o.jsx)(n.Checkbox,{checked:g,onCheckedChange:m,ref:e=>{e&&`indeterminate`in e&&(e.indeterminate=_&&!g)},"aria-label":`Select all rows`}),c.length>0&&(0,o.jsxs)(`div`,{className:`flex items-center gap-2 text-sm text-muted-foreground`,children:[(0,o.jsxs)(`span`,{children:[c.length,` selected`]}),(0,o.jsx)(`div`,{className:`flex items-center gap-1`,children:u.map(e=>(0,o.jsxs)(t.Button,{variant:`ghost`,size:`sm`,onClick:()=>h(e),disabled:e.disabled,className:i.cn(e.destructive&&`text-destructive hover:text-destructive`),children:[e.icon&&(0,o.jsx)(`span`,{className:`mr-1`,children:e.icon}),e.label]},e.id))})]}),(0,o.jsxs)(r.Select,{onValueChange:t=>{switch(t){case`all`:m(!0);break;case`none`:m(!1);break;case`invert`:e.getRowModel().rows.forEach((t,n)=>{let r=e.getState().rowSelection[n];e.setRowSelection(e=>({...e,[n]:!r}))});break}},children:[(0,o.jsx)(r.SelectTrigger,{className:`w-32`,children:(0,o.jsx)(r.SelectValue,{placeholder:`Select`})}),(0,o.jsxs)(r.SelectContent,{children:[(0,o.jsx)(r.SelectItem,{value:`all`,children:`Select All`}),(0,o.jsx)(r.SelectItem,{value:`none`,children:`Select None`}),(0,o.jsx)(r.SelectItem,{value:`invert`,children:`Invert Selection`})]})]})]})}function c({table:e,selectionMode:t=`multiple`,onSelectionChange:n}){let[r,i]=a.useState([]);return a.useEffect(()=>{let t=e.getFilteredSelectedRowModel().rows.map(e=>e.original);i(t),n?.(t)},[e,n]),{selectedRows:r,selectRow:a.useCallback((t,n=!0)=>{e.setRowSelection(e=>({...e,[t]:n}))},[e]),selectAll:a.useCallback((t=!0)=>{if(t){let t=e.getRowModel().rows.reduce((e,t,n)=>(e[n]=!0,e),{});e.setRowSelection(t)}else e.setRowSelection({})},[e]),selectRange:a.useCallback((t,n,r=!0)=>{let i={...e.getState().rowSelection};for(let e=t;e<=n;e++)i[e]=r;e.setRowSelection(i)},[e]),selectByCriteria:a.useCallback(t=>{let n={...e.getState().rowSelection};e.getRowModel().rows.forEach((e,r)=>{t(e.original)&&(n[r]=!0)}),e.setRowSelection(n)},[e]),clearSelection:a.useCallback(()=>{e.setRowSelection({})},[e]),isAllSelected:e.getIsAllPageRowsSelected(),isSomeSelected:e.getIsSomePageRowsSelected()}}exports.DataTableSelection=s,exports.useDataTableSelection=c;

package/dist/components/DataTable/DataTableSelection.d.ts

@@ -1,10 +1,22 @@
 import * as React from "react";
+import { Table } from "@tanstack/react-table";
+/**
+ * Action exécutable sur la sélection courante.
+ */
+interface SelectionAction<TData> {
+    id: string;
+    label: string;
+    icon?: React.ReactNode;
+    onClick: (selectedRows: TData[]) => void;
+    disabled?: boolean;
+    destructive?: boolean;
+}
 /**
  * Props pour la sélection avancée du DataTable
  */
 export interface DataTableSelectionProps<TData> {
     /** Table instance */
-    table: any;
+    table: Table<TData>;
     /** Mode de sélection */
     selectionMode?: "single" | "multiple" | "range";
     /** Données sélectionnées */
@@ -12,14 +24,7 @@ export interface DataTableSelectionProps<TData> {
     /** Callback de changement de sélection */
     onSelectionChange?: (selectedRows: TData[]) => void;
     /** Actions sur la sélection */
-    selectionActions?: Array<{
-        id: string;
-        label: string;
-        icon?: React.ReactNode;
-        onClick: (selectedRows: TData[]) => void;
-        disabled?: boolean;
-        destructive?: boolean;
-    }>;
+    selectionActions?: Array<SelectionAction<TData>>;
     /** Classe CSS personnalisée */
     className?: string;
 }
@@ -31,7 +36,7 @@ export declare function DataTableSelection<TData>({ table, selectionMode, select
  * Hook pour la sélection avancée
  */
 export declare function useDataTableSelection<TData>({ table, selectionMode, onSelectionChange, }: {
-    table: any;
+    table: Table<TData>;
     selectionMode?: "single" | "multiple" | "range";
     onSelectionChange?: (selectedRows: TData[]) => void;
 }): {
@@ -41,6 +46,7 @@ export declare function useDataTableSelection<TData>({ table, selectionMode, onS
     selectRange: (start: number, end: number, selected?: boolean) => void;
     selectByCriteria: (criteria: (row: TData) => boolean) => void;
     clearSelection: () => void;
-    isAllSelected: any;
-    isSomeSelected: any;
+    isAllSelected: boolean;
+    isSomeSelected: boolean;
 };
+export {};

package/dist/components/DataTable/DataTableSelection.es.js

@@ -0,0 +1,157 @@
+"use client";
+"use client";
+import { Button as e } from "../button/index.es.js";
+import { Checkbox as t } from "../checkbox/index.es.js";
+import { Select as n, SelectContent as r, SelectItem as i, SelectTrigger as a, SelectValue as o } from "../select/index.es.js";
+import { cn as s } from "./utils.es.js";
+import * as c from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/DataTable/DataTableSelection.tsx
+function d({ table: d, selectionMode: f = "multiple", selectedRows: p, onSelectionChange: m, selectionActions: h = [], className: g }) {
+	let [_, v] = c.useState(null);
+	c.useCallback((e, t) => {
+		if (f === "single") {
+			d.setRowSelection({ [e]: t });
+			return;
+		}
+		if (f === "range" && _ !== null) {
+			let n = Math.min(_, e), r = Math.max(_, e), i = { ...d.getState().rowSelection };
+			for (let e = n; e <= r; e++) i[e] = t;
+			d.setRowSelection(i);
+		} else d.setRowSelection((n) => ({
+			...n,
+			[e]: t
+		}));
+		v(e);
+	}, [
+		d,
+		f,
+		_
+	]);
+	let y = c.useCallback((e) => {
+		if (e) {
+			let e = d.getRowModel().rows.reduce((e, t, n) => (e[n] = !0, e), {});
+			d.setRowSelection(e);
+		} else d.setRowSelection({});
+	}, [d]);
+	c.useCallback((e, t, n) => {
+		let r = { ...d.getState().rowSelection };
+		for (let i = e; i <= t; i++) r[i] = n;
+		d.setRowSelection(r);
+	}, [d]), c.useCallback((e) => {
+		let t = { ...d.getState().rowSelection };
+		d.getRowModel().rows.forEach((n, r) => {
+			e(n.original) && (t[r] = !0);
+		}), d.setRowSelection(t);
+	}, [d]);
+	let b = c.useCallback((e) => {
+		e.onClick(p);
+	}, [p]), x = d.getIsAllPageRowsSelected(), S = d.getIsSomePageRowsSelected();
+	return /* @__PURE__ */ u("div", {
+		className: s("flex items-center gap-2", g),
+		children: [
+			/* @__PURE__ */ l(t, {
+				checked: x,
+				onCheckedChange: y,
+				ref: (e) => {
+					e && "indeterminate" in e && (e.indeterminate = S && !x);
+				},
+				"aria-label": "Select all rows"
+			}),
+			p.length > 0 && /* @__PURE__ */ u("div", {
+				className: "flex items-center gap-2 text-sm text-muted-foreground",
+				children: [/* @__PURE__ */ u("span", { children: [p.length, " selected"] }), /* @__PURE__ */ l("div", {
+					className: "flex items-center gap-1",
+					children: h.map((t) => /* @__PURE__ */ u(e, {
+						variant: "ghost",
+						size: "sm",
+						onClick: () => b(t),
+						disabled: t.disabled,
+						className: s(t.destructive && "text-destructive hover:text-destructive"),
+						children: [t.icon && /* @__PURE__ */ l("span", {
+							className: "mr-1",
+							children: t.icon
+						}), t.label]
+					}, t.id))
+				})]
+			}),
+			/* @__PURE__ */ u(n, {
+				onValueChange: (e) => {
+					switch (e) {
+						case "all":
+							y(!0);
+							break;
+						case "none":
+							y(!1);
+							break;
+						case "invert":
+							d.getRowModel().rows.forEach((e, t) => {
+								let n = d.getState().rowSelection[t];
+								d.setRowSelection((e) => ({
+									...e,
+									[t]: !n
+								}));
+							});
+							break;
+					}
+				},
+				children: [/* @__PURE__ */ l(a, {
+					className: "w-32",
+					children: /* @__PURE__ */ l(o, { placeholder: "Select" })
+				}), /* @__PURE__ */ u(r, { children: [
+					/* @__PURE__ */ l(i, {
+						value: "all",
+						children: "Select All"
+					}),
+					/* @__PURE__ */ l(i, {
+						value: "none",
+						children: "Select None"
+					}),
+					/* @__PURE__ */ l(i, {
+						value: "invert",
+						children: "Invert Selection"
+					})
+				] })]
+			})
+		]
+	});
+}
+function f({ table: e, selectionMode: t = "multiple", onSelectionChange: n }) {
+	let [r, i] = c.useState([]);
+	return c.useEffect(() => {
+		let t = e.getFilteredSelectedRowModel().rows.map((e) => e.original);
+		i(t), n?.(t);
+	}, [e, n]), {
+		selectedRows: r,
+		selectRow: c.useCallback((t, n = !0) => {
+			e.setRowSelection((e) => ({
+				...e,
+				[t]: n
+			}));
+		}, [e]),
+		selectAll: c.useCallback((t = !0) => {
+			if (t) {
+				let t = e.getRowModel().rows.reduce((e, t, n) => (e[n] = !0, e), {});
+				e.setRowSelection(t);
+			} else e.setRowSelection({});
+		}, [e]),
+		selectRange: c.useCallback((t, n, r = !0) => {
+			let i = { ...e.getState().rowSelection };
+			for (let e = t; e <= n; e++) i[e] = r;
+			e.setRowSelection(i);
+		}, [e]),
+		selectByCriteria: c.useCallback((t) => {
+			let n = { ...e.getState().rowSelection };
+			e.getRowModel().rows.forEach((e, r) => {
+				t(e.original) && (n[r] = !0);
+			}), e.setRowSelection(n);
+		}, [e]),
+		clearSelection: c.useCallback(() => {
+			e.setRowSelection({});
+		}, [e]),
+		isAllSelected: e.getIsAllPageRowsSelected(),
+		isSomeSelected: e.getIsSomePageRowsSelected()
+	};
+}
+//#endregion
+export { d as DataTableSelection, f as useDataTableSelection };

package/dist/components/DataTable/DataTableToolbar.cjs.js

@@ -0,0 +1 @@
+"use client";"use client";const e=require(`../../_virtual/_rolldown/runtime.cjs.js`),t=require(`../button/index.cjs.js`),n=require(`../dropdown-menu/index.cjs.js`),r=require(`../input/index.cjs.js`),i=require(`./utils.cjs.js`);let a=require(`react`);a=e.__toESM(a);let o=require(`lucide-react`),s=require(`react/jsx-runtime`),c=require(`react-i18next`);function l({table:e,config:l,globalFilter:u,onGlobalFilterChange:d,density:f,onDensityChange:p,onExport:m,onImport:h}){let{t:g}=(0,c.useTranslation)(),_=a.useRef(null),v=e.getFilteredSelectedRowModel().rows,y=v.length>0,b=a.useMemo(()=>l?.actions?l.actions.filter(e=>!(e.requiresSelection&&!y)):[],[l?.actions,y]),x=t=>{let n=y?v.map(e=>e.original):e.getFilteredRowModel().rows.map(e=>e.original);m?m(t):t===`csv`?i.exportToCSV(n,`export.csv`):i.exportToJSON(n,`export.json`)};return(0,s.jsxs)(`div`,{className:`flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 p-4 border-b`,children:[(0,s.jsxs)(`div`,{className:`flex flex-1 flex-col sm:flex-row items-start sm:items-center gap-2 w-full sm:w-auto`,children:[l?.showSearch!==!1&&(0,s.jsxs)(`div`,{className:`relative w-full sm:w-64`,children:[(0,s.jsx)(o.Search,{className:`absolute left-2 top-2.5 h-4 w-4 text-muted-foreground`}),(0,s.jsx)(r.Input,{placeholder:g(`datatable.toolbar.search`,{defaultValue:`Search...`}),value:u??``,onChange:e=>d(e.target.value),className:`pl-8 h-9`}),u&&(0,s.jsx)(`button`,{onClick:()=>d(``),className:`absolute right-2 top-2.5 text-muted-foreground hover:text-foreground`,children:(0,s.jsx)(o.X,{className:`h-4 w-4`})})]}),y&&(0,s.jsxs)(`div`,{className:`flex items-center gap-2 text-sm text-muted-foreground`,children:[(0,s.jsxs)(`span`,{children:[v.length,` `,g(`datatable.toolbar.selected`,{defaultValue:`selected`})]}),(0,s.jsx)(t.Button,{variant:`ghost`,size:`sm`,onClick:()=>e.resetRowSelection(),className:`h-7 px-2`,children:g(`datatable.toolbar.clear`,{defaultValue:`Clear`})})]})]}),(0,s.jsxs)(`div`,{className:`flex items-center gap-2`,children:[b.map(e=>(0,s.jsxs)(t.Button,{variant:e.variant||`outline`,size:`sm`,onClick:()=>e.onClick(v.map(e=>e.original)),disabled:e.disabled,className:`h-9`,children:[e.icon,(0,s.jsx)(`span`,{className:`ml-2`,children:e.label})]},e.id)),l?.showRefresh&&(0,s.jsxs)(t.Button,{variant:`outline`,size:`icon`,onClick:l.onRefresh,className:`h-9 w-9`,children:[(0,s.jsx)(o.RefreshCw,{className:`h-4 w-4`}),(0,s.jsx)(`span`,{className:`sr-only`,children:g(`datatable.toolbar.refresh`,{defaultValue:`Refresh`})})]}),m&&(0,s.jsxs)(n.DropdownMenu,{children:[(0,s.jsx)(n.DropdownMenuTrigger,{asChild:!0,children:(0,s.jsxs)(t.Button,{variant:`outline`,size:`icon`,className:`h-9 w-9`,children:[(0,s.jsx)(o.Download,{className:`h-4 w-4`}),(0,s.jsx)(`span`,{className:`sr-only`,children:g(`datatable.toolbar.export`,{defaultValue:`Export`})})]})}),(0,s.jsxs)(n.DropdownMenuContent,{align:`end`,children:[(0,s.jsx)(n.DropdownMenuLabel,{children:g(`datatable.toolbar.exportAs`,{defaultValue:`Export as`})}),(0,s.jsx)(n.DropdownMenuSeparator,{}),(0,s.jsx)(n.DropdownMenuCheckboxItem,{onClick:()=>x(`csv`),children:`CSV`}),(0,s.jsx)(n.DropdownMenuCheckboxItem,{onClick:()=>x(`json`),children:`JSON`})]})]}),h&&(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(`input`,{ref:_,type:`file`,accept:`.csv,.json`,onChange:e=>{let t=e.target.files?.[0];t&&h&&h(t),_.current&&(_.current.value=``)},className:`hidden`}),(0,s.jsxs)(t.Button,{variant:`outline`,size:`icon`,onClick:()=>_.current?.click(),className:`h-9 w-9`,children:[(0,s.jsx)(o.Upload,{className:`h-4 w-4`}),(0,s.jsx)(`span`,{className:`sr-only`,children:g(`datatable.toolbar.import`,{defaultValue:`Import`})})]})]}),l?.showColumnToggle!==!1&&(0,s.jsxs)(n.DropdownMenu,{children:[(0,s.jsx)(n.DropdownMenuTrigger,{asChild:!0,children:(0,s.jsxs)(t.Button,{variant:`outline`,size:`icon`,className:`h-9 w-9`,children:[(0,s.jsx)(o.Columns,{className:`h-4 w-4`}),(0,s.jsx)(`span`,{className:`sr-only`,children:g(`datatable.toolbar.columns`,{defaultValue:`Columns`})})]})}),(0,s.jsxs)(n.DropdownMenuContent,{align:`end`,className:`w-48`,children:[(0,s.jsx)(n.DropdownMenuLabel,{children:g(`datatable.toolbar.toggleColumns`,{defaultValue:`Toggle columns`})}),(0,s.jsx)(n.DropdownMenuSeparator,{}),e.getAllColumns().filter(e=>e.getCanHide()).map(e=>(0,s.jsx)(n.DropdownMenuCheckboxItem,{className:`capitalize`,checked:e.getIsVisible(),onCheckedChange:t=>e.toggleVisibility(!!t),children:e.id},e.id))]})]}),l?.showDensity&&p&&(0,s.jsxs)(n.DropdownMenu,{children:[(0,s.jsx)(n.DropdownMenuTrigger,{asChild:!0,children:(0,s.jsxs)(t.Button,{variant:`outline`,size:`icon`,className:`h-9 w-9`,children:[(0,s.jsx)(o.SlidersHorizontal,{className:`h-4 w-4`}),(0,s.jsx)(`span`,{className:`sr-only`,children:g(`datatable.toolbar.density`,{defaultValue:`Density`})})]})}),(0,s.jsxs)(n.DropdownMenuContent,{align:`end`,children:[(0,s.jsx)(n.DropdownMenuLabel,{children:g(`datatable.toolbar.tableDensity`,{defaultValue:`Table density`})}),(0,s.jsx)(n.DropdownMenuSeparator,{}),(0,s.jsx)(n.DropdownMenuCheckboxItem,{checked:f===`comfortable`,onCheckedChange:()=>p(`comfortable`),children:g(`datatable.toolbar.comfortable`,{defaultValue:`Comfortable`})}),(0,s.jsx)(n.DropdownMenuCheckboxItem,{checked:f===`compact`,onCheckedChange:()=>p(`compact`),children:g(`datatable.toolbar.compact`,{defaultValue:`Compact`})})]})]})]})]})}exports.DataTableToolbar=l;

package/dist/components/DataTable/DataTableToolbar.es.js

@@ -0,0 +1,178 @@
+"use client";
+"use client";
+import { Button as e } from "../button/index.es.js";
+import { DropdownMenu as t, DropdownMenuCheckboxItem as n, DropdownMenuContent as r, DropdownMenuLabel as i, DropdownMenuSeparator as a, DropdownMenuTrigger as o } from "../dropdown-menu/index.es.js";
+import { Input as s } from "../input/index.es.js";
+import { exportToCSV as c, exportToJSON as l } from "./utils.es.js";
+import * as u from "react";
+import { Columns as d, Download as f, RefreshCw as p, Search as m, SlidersHorizontal as h, Upload as g, X as _ } from "lucide-react";
+import { Fragment as v, jsx as y, jsxs as b } from "react/jsx-runtime";
+import { useTranslation as x } from "react-i18next";
+//#region src/components/DataTable/DataTableToolbar.tsx
+function S({ table: S, config: C, globalFilter: w, onGlobalFilterChange: T, density: E, onDensityChange: D, onExport: O, onImport: k }) {
+	let { t: A } = x(), j = u.useRef(null), M = S.getFilteredSelectedRowModel().rows, N = M.length > 0, P = u.useMemo(() => C?.actions ? C.actions.filter((e) => !(e.requiresSelection && !N)) : [], [C?.actions, N]), F = (e) => {
+		let t = N ? M.map((e) => e.original) : S.getFilteredRowModel().rows.map((e) => e.original);
+		O ? O(e) : e === "csv" ? c(t, "export.csv") : l(t, "export.json");
+	};
+	return /* @__PURE__ */ b("div", {
+		className: "flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 p-4 border-b",
+		children: [/* @__PURE__ */ b("div", {
+			className: "flex flex-1 flex-col sm:flex-row items-start sm:items-center gap-2 w-full sm:w-auto",
+			children: [C?.showSearch !== !1 && /* @__PURE__ */ b("div", {
+				className: "relative w-full sm:w-64",
+				children: [
+					/* @__PURE__ */ y(m, { className: "absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" }),
+					/* @__PURE__ */ y(s, {
+						placeholder: A("datatable.toolbar.search", { defaultValue: "Search..." }),
+						value: w ?? "",
+						onChange: (e) => T(e.target.value),
+						className: "pl-8 h-9"
+					}),
+					w && /* @__PURE__ */ y("button", {
+						onClick: () => T(""),
+						className: "absolute right-2 top-2.5 text-muted-foreground hover:text-foreground",
+						children: /* @__PURE__ */ y(_, { className: "h-4 w-4" })
+					})
+				]
+			}), N && /* @__PURE__ */ b("div", {
+				className: "flex items-center gap-2 text-sm text-muted-foreground",
+				children: [/* @__PURE__ */ b("span", { children: [
+					M.length,
+					" ",
+					A("datatable.toolbar.selected", { defaultValue: "selected" })
+				] }), /* @__PURE__ */ y(e, {
+					variant: "ghost",
+					size: "sm",
+					onClick: () => S.resetRowSelection(),
+					className: "h-7 px-2",
+					children: A("datatable.toolbar.clear", { defaultValue: "Clear" })
+				})]
+			})]
+		}), /* @__PURE__ */ b("div", {
+			className: "flex items-center gap-2",
+			children: [
+				P.map((t) => /* @__PURE__ */ b(e, {
+					variant: t.variant || "outline",
+					size: "sm",
+					onClick: () => t.onClick(M.map((e) => e.original)),
+					disabled: t.disabled,
+					className: "h-9",
+					children: [t.icon, /* @__PURE__ */ y("span", {
+						className: "ml-2",
+						children: t.label
+					})]
+				}, t.id)),
+				C?.showRefresh && /* @__PURE__ */ b(e, {
+					variant: "outline",
+					size: "icon",
+					onClick: C.onRefresh,
+					className: "h-9 w-9",
+					children: [/* @__PURE__ */ y(p, { className: "h-4 w-4" }), /* @__PURE__ */ y("span", {
+						className: "sr-only",
+						children: A("datatable.toolbar.refresh", { defaultValue: "Refresh" })
+					})]
+				}),
+				O && /* @__PURE__ */ b(t, { children: [/* @__PURE__ */ y(o, {
+					asChild: !0,
+					children: /* @__PURE__ */ b(e, {
+						variant: "outline",
+						size: "icon",
+						className: "h-9 w-9",
+						children: [/* @__PURE__ */ y(f, { className: "h-4 w-4" }), /* @__PURE__ */ y("span", {
+							className: "sr-only",
+							children: A("datatable.toolbar.export", { defaultValue: "Export" })
+						})]
+					})
+				}), /* @__PURE__ */ b(r, {
+					align: "end",
+					children: [
+						/* @__PURE__ */ y(i, { children: A("datatable.toolbar.exportAs", { defaultValue: "Export as" }) }),
+						/* @__PURE__ */ y(a, {}),
+						/* @__PURE__ */ y(n, {
+							onClick: () => F("csv"),
+							children: "CSV"
+						}),
+						/* @__PURE__ */ y(n, {
+							onClick: () => F("json"),
+							children: "JSON"
+						})
+					]
+				})] }),
+				k && /* @__PURE__ */ b(v, { children: [/* @__PURE__ */ y("input", {
+					ref: j,
+					type: "file",
+					accept: ".csv,.json",
+					onChange: (e) => {
+						let t = e.target.files?.[0];
+						t && k && k(t), j.current && (j.current.value = "");
+					},
+					className: "hidden"
+				}), /* @__PURE__ */ b(e, {
+					variant: "outline",
+					size: "icon",
+					onClick: () => j.current?.click(),
+					className: "h-9 w-9",
+					children: [/* @__PURE__ */ y(g, { className: "h-4 w-4" }), /* @__PURE__ */ y("span", {
+						className: "sr-only",
+						children: A("datatable.toolbar.import", { defaultValue: "Import" })
+					})]
+				})] }),
+				C?.showColumnToggle !== !1 && /* @__PURE__ */ b(t, { children: [/* @__PURE__ */ y(o, {
+					asChild: !0,
+					children: /* @__PURE__ */ b(e, {
+						variant: "outline",
+						size: "icon",
+						className: "h-9 w-9",
+						children: [/* @__PURE__ */ y(d, { className: "h-4 w-4" }), /* @__PURE__ */ y("span", {
+							className: "sr-only",
+							children: A("datatable.toolbar.columns", { defaultValue: "Columns" })
+						})]
+					})
+				}), /* @__PURE__ */ b(r, {
+					align: "end",
+					className: "w-48",
+					children: [
+						/* @__PURE__ */ y(i, { children: A("datatable.toolbar.toggleColumns", { defaultValue: "Toggle columns" }) }),
+						/* @__PURE__ */ y(a, {}),
+						S.getAllColumns().filter((e) => e.getCanHide()).map((e) => /* @__PURE__ */ y(n, {
+							className: "capitalize",
+							checked: e.getIsVisible(),
+							onCheckedChange: (t) => e.toggleVisibility(!!t),
+							children: e.id
+						}, e.id))
+					]
+				})] }),
+				C?.showDensity && D && /* @__PURE__ */ b(t, { children: [/* @__PURE__ */ y(o, {
+					asChild: !0,
+					children: /* @__PURE__ */ b(e, {
+						variant: "outline",
+						size: "icon",
+						className: "h-9 w-9",
+						children: [/* @__PURE__ */ y(h, { className: "h-4 w-4" }), /* @__PURE__ */ y("span", {
+							className: "sr-only",
+							children: A("datatable.toolbar.density", { defaultValue: "Density" })
+						})]
+					})
+				}), /* @__PURE__ */ b(r, {
+					align: "end",
+					children: [
+						/* @__PURE__ */ y(i, { children: A("datatable.toolbar.tableDensity", { defaultValue: "Table density" }) }),
+						/* @__PURE__ */ y(a, {}),
+						/* @__PURE__ */ y(n, {
+							checked: E === "comfortable",
+							onCheckedChange: () => D("comfortable"),
+							children: A("datatable.toolbar.comfortable", { defaultValue: "Comfortable" })
+						}),
+						/* @__PURE__ */ y(n, {
+							checked: E === "compact",
+							onCheckedChange: () => D("compact"),
+							children: A("datatable.toolbar.compact", { defaultValue: "Compact" })
+						})
+					]
+				})] })
+			]
+		})]
+	});
+}
+//#endregion
+export { S as DataTableToolbar };

package/dist/components/DataTable/hooks/useDataTable.cjs.js

@@ -0,0 +1 @@
+"use client";require(`../../../_virtual/_rolldown/runtime.cjs.js`);const e=require(`../utils.cjs.js`);let t=require(`react`),n=require(`@tanstack/react-table`);function r({data:r,columns:i,pagination:a,tableId:o,onSortingChange:s,onFiltersChange:c,onSelectionChange:l}){let u=(0,t.useMemo)(()=>o?e.loadTableState(o):null,[o]),[d,f]=(0,t.useState)(u?.sorting||[]),[p,m]=(0,t.useState)(u?.columnFilters||[]),[h,g]=(0,t.useState)(u?.columnVisibility||{}),[_,v]=(0,t.useState)({}),[y,b]=(0,t.useState)(u?.globalFilter||``),[x,S]=(0,t.useState)({pageIndex:a?.currentPage||0,pageSize:a?.pageSize||10});(0,t.useEffect)(()=>{o&&e.saveTableState(o,{sorting:d,columnFilters:p,columnVisibility:h,globalFilter:y})},[o,d,p,h,y]),(0,t.useEffect)(()=>{s?.(d)},[d,s]),(0,t.useEffect)(()=>{c?.(p)},[p,c]),(0,t.useEffect)(()=>{let e=C.getFilteredSelectedRowModel().rows.map(e=>e.original);l?.(e)},[_]);let C=(0,n.useReactTable)({data:r,columns:i,state:{sorting:d,columnFilters:p,columnVisibility:h,rowSelection:_,globalFilter:y,pagination:x},enableRowSelection:!0,onRowSelectionChange:v,onSortingChange:f,onColumnFiltersChange:m,onColumnVisibilityChange:g,onGlobalFilterChange:b,onPaginationChange:S,getCoreRowModel:(0,n.getCoreRowModel)(),getFilteredRowModel:(0,n.getFilteredRowModel)(),getPaginationRowModel:(0,n.getPaginationRowModel)(),getSortedRowModel:(0,n.getSortedRowModel)(),globalFilterFn:e.globalFilterFn,manualPagination:a?.mode===`server`,pageCount:a?.mode===`server`?Math.ceil((a.totalItems||0)/x.pageSize):void 0});return{table:C,sorting:d,setSorting:f,columnFilters:p,setColumnFilters:m,columnVisibility:h,setColumnVisibility:g,rowSelection:_,setRowSelection:v,globalFilter:y,setGlobalFilter:b,pagination:x,setPagination:S,selectedRows:(0,t.useMemo)(()=>C.getFilteredSelectedRowModel().rows.map(e=>e.original),[C,_]),resetFilters:(0,t.useCallback)(()=>{m([]),b(``)},[]),resetSelection:(0,t.useCallback)(()=>{v({})},[]),exportData:(0,t.useCallback)(()=>C.getFilteredRowModel().rows.map(e=>e.original),[C])}}exports.useDataTable=r;

package/dist/components/DataTable/hooks/useDataTable.d.ts

@@ -13,8 +13,8 @@ export declare function useDataTable<TData>({ data, columns, pagination: paginat
     setColumnVisibility: import("react").Dispatch<import("react").SetStateAction<VisibilityState>>;
     rowSelection: {};
     setRowSelection: import("react").Dispatch<import("react").SetStateAction<{}>>;
-    globalFilter: any;
-    setGlobalFilter: import("react").Dispatch<any>;
+    globalFilter: string;
+    setGlobalFilter: import("react").Dispatch<import("react").SetStateAction<string>>;
     pagination: PaginationState;
     setPagination: import("react").Dispatch<import("react").SetStateAction<PaginationState>>;
     selectedRows: TData[];

package/dist/components/DataTable/hooks/useDataTable.es.js

@@ -0,0 +1,83 @@
+"use client";
+import { globalFilterFn as e, loadTableState as t, saveTableState as n } from "../utils.es.js";
+import { useCallback as r, useEffect as i, useMemo as a, useState as o } from "react";
+import { getCoreRowModel as s, getFilteredRowModel as c, getPaginationRowModel as l, getSortedRowModel as u, useReactTable as d } from "@tanstack/react-table";
+//#region src/components/DataTable/hooks/useDataTable.ts
+function f({ data: f, columns: p, pagination: m, tableId: h, onSortingChange: g, onFiltersChange: _, onSelectionChange: v }) {
+	let y = a(() => h ? t(h) : null, [h]), [b, x] = o(y?.sorting || []), [S, C] = o(y?.columnFilters || []), [w, T] = o(y?.columnVisibility || {}), [E, D] = o({}), [O, k] = o(y?.globalFilter || ""), [A, j] = o({
+		pageIndex: m?.currentPage || 0,
+		pageSize: m?.pageSize || 10
+	});
+	i(() => {
+		h && n(h, {
+			sorting: b,
+			columnFilters: S,
+			columnVisibility: w,
+			globalFilter: O
+		});
+	}, [
+		h,
+		b,
+		S,
+		w,
+		O
+	]), i(() => {
+		g?.(b);
+	}, [b, g]), i(() => {
+		_?.(S);
+	}, [S, _]), i(() => {
+		let e = M.getFilteredSelectedRowModel().rows.map((e) => e.original);
+		v?.(e);
+	}, [E]);
+	let M = d({
+		data: f,
+		columns: p,
+		state: {
+			sorting: b,
+			columnFilters: S,
+			columnVisibility: w,
+			rowSelection: E,
+			globalFilter: O,
+			pagination: A
+		},
+		enableRowSelection: !0,
+		onRowSelectionChange: D,
+		onSortingChange: x,
+		onColumnFiltersChange: C,
+		onColumnVisibilityChange: T,
+		onGlobalFilterChange: k,
+		onPaginationChange: j,
+		getCoreRowModel: s(),
+		getFilteredRowModel: c(),
+		getPaginationRowModel: l(),
+		getSortedRowModel: u(),
+		globalFilterFn: e,
+		manualPagination: m?.mode === "server",
+		pageCount: m?.mode === "server" ? Math.ceil((m.totalItems || 0) / A.pageSize) : void 0
+	});
+	return {
+		table: M,
+		sorting: b,
+		setSorting: x,
+		columnFilters: S,
+		setColumnFilters: C,
+		columnVisibility: w,
+		setColumnVisibility: T,
+		rowSelection: E,
+		setRowSelection: D,
+		globalFilter: O,
+		setGlobalFilter: k,
+		pagination: A,
+		setPagination: j,
+		selectedRows: a(() => M.getFilteredSelectedRowModel().rows.map((e) => e.original), [M, E]),
+		resetFilters: r(() => {
+			C([]), k("");
+		}, []),
+		resetSelection: r(() => {
+			D({});
+		}, []),
+		exportData: r(() => M.getFilteredRowModel().rows.map((e) => e.original), [M])
+	};
+}
+//#endregion
+export { f as useDataTable };

package/dist/components/DataTable/hooks/useDataTableAdvanced.cjs.js

@@ -0,0 +1 @@
+"use client";require(`../../../_virtual/_rolldown/runtime.cjs.js`);let e=require(`react`),t=require(`@tanstack/react-table`);function n({data:n,columns:o,pagination:s,tableId:c,onSortingChange:l,onFiltersChange:u,onSelectionChange:d,onColumnOrderChange:f,onExpandedChange:p,onGroupingChange:m,grouping:h,virtualization:g,sortMode:_=`multiple`,performance:v}){let y=(0,e.useMemo)(()=>c?r(c):null,[c]),[b,x]=(0,e.useState)(y?.sorting||[]),[S,C]=(0,e.useState)(y?.columnFilters||[]),[w,T]=(0,e.useState)(y?.columnVisibility||{}),[E,D]=(0,e.useState)(y?.columnOrder||[]),[O,k]=(0,e.useState)(y?.expanded||{}),[A,j]=(0,e.useState)(y?.grouping||[]),[M,N]=(0,e.useState)(y?.rowSelection||{}),[P,F]=(0,e.useState)(y?.globalFilter||``),[I,L]=(0,e.useState)({pageIndex:s?.currentPage||0,pageSize:s?.pageSize||10}),[R,z]=(0,e.useState)(S);(0,e.useEffect)(()=>{let e=setTimeout(()=>{z(S)},v?.filterDebounceMs||300);return()=>clearTimeout(e)},[S,v?.filterDebounceMs]),(0,e.useEffect)(()=>{h?.columns&&h.columns.length>0&&A.length===0&&j([h.columns[0]])},[h?.columns,A.length]),(0,e.useEffect)(()=>{c&&i(c,{sorting:b,columnFilters:S,columnVisibility:w,columnOrder:E,expanded:O,grouping:A,pagination:I,globalFilter:P,density:`comfortable`,layout:`standard`,rowSelection:M})},[c,b,S,w,E,O,A,I,P,M]),(0,e.useEffect)(()=>{l?.(b)},[b,l]),(0,e.useEffect)(()=>{u?.(R)},[R,u]),(0,e.useEffect)(()=>{let e=B.getFilteredSelectedRowModel().rows.map(e=>e.original);d?.(e)},[M]),(0,e.useEffect)(()=>{f?.(E)},[E,f]),(0,e.useEffect)(()=>{p?.(O)},[O,p]),(0,e.useEffect)(()=>{m?.(A)},[A,m]);let B=(0,t.useReactTable)({data:n,columns:o,state:{sorting:b,columnFilters:R,columnVisibility:w,columnOrder:E,expanded:O,grouping:A,rowSelection:M,globalFilter:P,pagination:I},enableRowSelection:!0,enableMultiRowSelection:!0,enableSubRowSelection:!0,enableGrouping:!0,enableExpanding:!0,enableColumnResizing:!0,enableSorting:!0,enableMultiSort:_===`multiple`,enableFilters:!0,enableGlobalFilter:!0,enableColumnFilters:!0,onRowSelectionChange:N,onSortingChange:x,onColumnFiltersChange:C,onColumnVisibilityChange:T,onColumnOrderChange:D,onExpandedChange:k,onGroupingChange:j,onGlobalFilterChange:F,onPaginationChange:L,getCoreRowModel:(0,t.getCoreRowModel)(),getFilteredRowModel:(0,t.getFilteredRowModel)(),getPaginationRowModel:(0,t.getPaginationRowModel)(),getSortedRowModel:(0,t.getSortedRowModel)(),getGroupedRowModel:(0,t.getGroupedRowModel)(),getExpandedRowModel:(0,t.getExpandedRowModel)(),getFacetedRowModel:(0,t.getFacetedRowModel)(),getFacetedUniqueValues:(0,t.getFacetedUniqueValues)(),globalFilterFn:a,manualPagination:s?.mode===`server`,pageCount:s?.mode===`server`?Math.ceil((s.totalItems||0)/I.pageSize):void 0,columnResizeMode:`onChange`,sortDescFirst:!1});return{table:B,sorting:b,setSorting:x,columnFilters:S,setColumnFilters:C,columnVisibility:w,setColumnVisibility:T,columnOrder:E,setColumnOrder:D,expanded:O,setExpanded:k,grouping:A,setGrouping:j,rowSelection:M,setRowSelection:N,globalFilter:P,setGlobalFilter:F,pagination:I,setPagination:L,selectedRows:(0,e.useMemo)(()=>B.getFilteredSelectedRowModel().rows.map(e=>e.original),[B,M]),resetFilters:(0,e.useCallback)(()=>{C([]),F(``)},[]),resetSelection:(0,e.useCallback)(()=>{N({})},[]),resetAll:(0,e.useCallback)(()=>{x([]),C([]),T({}),D([]),k({}),j([]),N({}),F(``),L({pageIndex:0,pageSize:s?.pageSize||10})},[s?.pageSize]),exportData:(0,e.useCallback)(()=>B.getFilteredRowModel().rows.map(e=>e.original),[B]),getGroupedData:(0,e.useCallback)(()=>h?.columns?.length?B.getGroupedRowModel().rows.map(e=>e.original):n,[B,h,n]),getExpandedData:(0,e.useCallback)(()=>B.getExpandedRowModel().rows.map(e=>e.original),[B]),toggleGrouping:(0,e.useCallback)(e=>{j(t=>t.includes(e)?t.filter(t=>t!==e):[...t,e])},[]),clearGrouping:(0,e.useCallback)(()=>{j([])},[]),toggleRowExpansion:(0,e.useCallback)(e=>{k(t=>{let n=t===!0?{}:t;return{...n,[e]:!n[e]}})},[]),expandAll:(0,e.useCallback)(()=>{let e=B.getRowModel().rows.map(e=>e.id),t={};e.forEach(e=>{t[e]=!0}),k(t)},[B]),collapseAll:(0,e.useCallback)(()=>{k({})},[])}}function r(e){try{let t=localStorage.getItem(`datatable-${e}`);return t?JSON.parse(t):null}catch{return null}}function i(e,t){try{localStorage.setItem(`datatable-${e}`,JSON.stringify(t))}catch{}}function a(e,t,n){let r=n.toLowerCase();return e.getVisibleCells().some(e=>{let t=e.getValue();return t==null?!1:String(t).toLowerCase().includes(r)})}exports.useDataTableAdvanced=n;