@wakastellar/ui 4.0.0-dev.0 → 4.0.1

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

@@ -0,0 +1,2 @@
+"use client";"use client";const e=require(`../../_virtual/_rolldown/runtime.cjs.js`),t=require(`../context-menu/index.cjs.js`),n=require(`./utils.cjs.js`);let r=require(`react`);r=e.__toESM(r);let i=require(`lucide-react`),a=require(`react/jsx-runtime`);function o({row:e,rowIndex:o,actions:s=[],columnActions:c=[],onCopy:l,onExport:u,onEdit:d,onDelete:f,onToggleColumnVisibility:p,visibleColumns:m=[],className:h,children:g}){let[_,v]=r.useState(!1),y=r.useCallback(t=>{t.onClick(e),v(!1)},[e]),b=r.useCallback(()=>{if(l)l(e);else{let t=Object.entries(e).map(([e,t])=>`${e}: ${t}`).join(`
+`);navigator.clipboard.writeText(t)}v(!1)},[e,l]),x=r.useCallback(()=>{u&&u(e),v(!1)},[e,u]),S=r.useCallback(()=>{d&&d(e),v(!1)},[e,d]),C=r.useCallback(()=>{f&&f(e),v(!1)},[e,f]),w=r.useCallback(e=>{p&&p(e),v(!1)},[p]);return(0,a.jsxs)(t.ContextMenu,{onOpenChange:v,children:[(0,a.jsx)(t.ContextMenuTrigger,{asChild:!0,children:g}),(0,a.jsxs)(t.ContextMenuContent,{className:n.cn(`w-64`,h),children:[s.length>0&&(0,a.jsxs)(a.Fragment,{children:[s.map(e=>(0,a.jsxs)(t.ContextMenuItem,{onClick:()=>y(e),disabled:e.disabled,className:n.cn(e.destructive&&`text-destructive focus:text-destructive`),children:[e.icon&&(0,a.jsx)(`span`,{className:`mr-2`,children:e.icon}),e.label]},e.id)),(0,a.jsx)(t.ContextMenuSeparator,{})]}),(0,a.jsxs)(t.ContextMenuItem,{onClick:b,children:[(0,a.jsx)(i.Copy,{className:`mr-2 h-4 w-4`}),`Copy row`]}),u&&(0,a.jsxs)(t.ContextMenuItem,{onClick:x,children:[(0,a.jsx)(i.Download,{className:`mr-2 h-4 w-4`}),`Export row`]}),d&&(0,a.jsxs)(t.ContextMenuItem,{onClick:S,children:[(0,a.jsx)(i.Edit,{className:`mr-2 h-4 w-4`}),`Edit row`]}),f&&(0,a.jsxs)(t.ContextMenuItem,{onClick:C,className:`text-destructive focus:text-destructive`,children:[(0,a.jsx)(i.Trash2,{className:`mr-2 h-4 w-4`}),`Delete row`]}),c.length>0&&(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(t.ContextMenuSeparator,{}),(0,a.jsx)(`div`,{className:`px-2 py-1.5 text-sm font-semibold text-muted-foreground`,children:`Columns`}),c.map(e=>(0,a.jsxs)(t.ContextMenuItem,{onClick:()=>w(e.id),disabled:e.disabled,children:[e.icon&&(0,a.jsx)(`span`,{className:`mr-2`,children:e.icon}),e.label]},e.id))]}),p&&m.length>0&&(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(t.ContextMenuSeparator,{}),(0,a.jsx)(`div`,{className:`px-2 py-1.5 text-sm font-semibold text-muted-foreground`,children:`Toggle Columns`}),m.map(e=>(0,a.jsxs)(t.ContextMenuItem,{onClick:()=>w(e),children:[(0,a.jsx)(i.Eye,{className:`mr-2 h-4 w-4`}),e]},e))]})]})]})}exports.DataTableContextMenu=o;

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

@@ -0,0 +1,93 @@
+"use client";
+"use client";
+import { ContextMenu as e, ContextMenuContent as t, ContextMenuItem as n, ContextMenuSeparator as r, ContextMenuTrigger as i } from "../context-menu/index.es.js";
+import { cn as a } from "./utils.es.js";
+import * as o from "react";
+import { Copy as s, Download as c, Edit as l, Eye as u, Trash2 as d } from "lucide-react";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region src/components/DataTable/DataTableContextMenu.tsx
+function h({ row: h, rowIndex: g, actions: _ = [], columnActions: v = [], onCopy: y, onExport: b, onEdit: x, onDelete: S, onToggleColumnVisibility: C, visibleColumns: w = [], className: T, children: E }) {
+	let [D, O] = o.useState(!1), k = o.useCallback((e) => {
+		e.onClick(h), O(!1);
+	}, [h]), A = o.useCallback(() => {
+		if (y) y(h);
+		else {
+			let e = Object.entries(h).map(([e, t]) => `${e}: ${t}`).join("\n");
+			navigator.clipboard.writeText(e);
+		}
+		O(!1);
+	}, [h, y]), j = o.useCallback(() => {
+		b && b(h), O(!1);
+	}, [h, b]), M = o.useCallback(() => {
+		x && x(h), O(!1);
+	}, [h, x]), N = o.useCallback(() => {
+		S && S(h), O(!1);
+	}, [h, S]), P = o.useCallback((e) => {
+		C && C(e), O(!1);
+	}, [C]);
+	return /* @__PURE__ */ m(e, {
+		onOpenChange: O,
+		children: [/* @__PURE__ */ p(i, {
+			asChild: !0,
+			children: E
+		}), /* @__PURE__ */ m(t, {
+			className: a("w-64", T),
+			children: [
+				_.length > 0 && /* @__PURE__ */ m(f, { children: [_.map((e) => /* @__PURE__ */ m(n, {
+					onClick: () => k(e),
+					disabled: e.disabled,
+					className: a(e.destructive && "text-destructive focus:text-destructive"),
+					children: [e.icon && /* @__PURE__ */ p("span", {
+						className: "mr-2",
+						children: e.icon
+					}), e.label]
+				}, e.id)), /* @__PURE__ */ p(r, {})] }),
+				/* @__PURE__ */ m(n, {
+					onClick: A,
+					children: [/* @__PURE__ */ p(s, { className: "mr-2 h-4 w-4" }), "Copy row"]
+				}),
+				b && /* @__PURE__ */ m(n, {
+					onClick: j,
+					children: [/* @__PURE__ */ p(c, { className: "mr-2 h-4 w-4" }), "Export row"]
+				}),
+				x && /* @__PURE__ */ m(n, {
+					onClick: M,
+					children: [/* @__PURE__ */ p(l, { className: "mr-2 h-4 w-4" }), "Edit row"]
+				}),
+				S && /* @__PURE__ */ m(n, {
+					onClick: N,
+					className: "text-destructive focus:text-destructive",
+					children: [/* @__PURE__ */ p(d, { className: "mr-2 h-4 w-4" }), "Delete row"]
+				}),
+				v.length > 0 && /* @__PURE__ */ m(f, { children: [
+					/* @__PURE__ */ p(r, {}),
+					/* @__PURE__ */ p("div", {
+						className: "px-2 py-1.5 text-sm font-semibold text-muted-foreground",
+						children: "Columns"
+					}),
+					v.map((e) => /* @__PURE__ */ m(n, {
+						onClick: () => P(e.id),
+						disabled: e.disabled,
+						children: [e.icon && /* @__PURE__ */ p("span", {
+							className: "mr-2",
+							children: e.icon
+						}), e.label]
+					}, e.id))
+				] }),
+				C && w.length > 0 && /* @__PURE__ */ m(f, { children: [
+					/* @__PURE__ */ p(r, {}),
+					/* @__PURE__ */ p("div", {
+						className: "px-2 py-1.5 text-sm font-semibold text-muted-foreground",
+						children: "Toggle Columns"
+					}),
+					w.map((e) => /* @__PURE__ */ m(n, {
+						onClick: () => P(e),
+						children: [/* @__PURE__ */ p(u, { className: "mr-2 h-4 w-4" }), e]
+					}, e))
+				] })
+			]
+		})]
+	});
+}
+//#endregion
+export { h as DataTableContextMenu };

package/dist/components/DataTable/DataTableEditCell.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(`../calendar/index.cjs.js`),r=require(`../checkbox/index.cjs.js`),i=require(`../input/index.cjs.js`),a=require(`../select/index.cjs.js`),o=require(`../popover/index.cjs.js`),s=require(`../switch/index.cjs.js`),c=require(`../textarea/index.cjs.js`),l=require(`./utils.cjs.js`),u=require(`../../utils/local-date.cjs.js`);let d=require(`react`);d=e.__toESM(d);let f=require(`lucide-react`),p=require(`react/jsx-runtime`),m=require(`date-fns`);function h({value:e,field:h,config:_,isEditing:v,error:y,onChange:b,onStartEdit:x,onSave:S,onCancel:C,className:w}){let[T,E]=d.useState(e),[D,O]=d.useState(!1);d.useEffect(()=>{E(e)},[e]);let k=()=>{b(T),S()},A=()=>{E(e),C()},j=e=>{e.key===`Enter`&&!e.shiftKey?(e.preventDefault(),k()):e.key===`Escape`&&(e.preventDefault(),A())};return v?(0,p.jsxs)(`div`,{className:l.cn(`relative`,w),children:[(()=>{switch(_.type){case`textarea`:return(0,p.jsx)(c.Textarea,{value:T==null?``:String(T),onChange:e=>E(e.target.value),onKeyDown:j,placeholder:_.placeholder,rows:_.rows||3,disabled:_.disabled,className:l.cn(y&&`border-destructive`)});case`select`:return(0,p.jsxs)(a.Select,{value:T==null?``:String(T),onValueChange:E,disabled:_.disabled,children:[(0,p.jsx)(a.SelectTrigger,{className:l.cn(y&&`border-destructive`),children:(0,p.jsx)(a.SelectValue,{placeholder:_.placeholder})}),(0,p.jsx)(a.SelectContent,{children:_.options?.map(e=>(0,p.jsx)(a.SelectItem,{value:e.value,children:e.label},e.value))})]});case`checkbox`:return(0,p.jsx)(r.Checkbox,{checked:!!T,onCheckedChange:E,disabled:_.disabled});case`switch`:return(0,p.jsx)(s.Switch,{checked:!!T,onCheckedChange:E,disabled:_.disabled});case`date`:case`datetime`:return(0,p.jsxs)(o.Popover,{open:D,onOpenChange:O,children:[(0,p.jsx)(o.PopoverTrigger,{asChild:!0,children:(0,p.jsxs)(t.Button,{variant:`outline`,className:l.cn(`w-full justify-start text-left font-normal`,!T&&`text-muted-foreground`,y&&`border-destructive`),children:[(0,p.jsx)(f.CalendarIcon,{className:`mr-2 h-4 w-4`}),T?(0,m.format)(u.parseLocalDate(T),`PPP`):_.placeholder]})}),(0,p.jsx)(o.PopoverContent,{className:`w-auto p-0`,align:`start`,children:(0,p.jsx)(n.Calendar,{mode:`single`,selected:T?u.parseLocalDate(T):void 0,onSelect:e=>{e&&(E(_.type===`datetime`?e.toISOString():u.localDateKey(e)),O(!1))},initialFocus:!0})})]});default:return(0,p.jsx)(i.Input,{type:_.type,value:T==null?``:String(T),onChange:e=>E(e.target.value),onKeyDown:j,placeholder:_.placeholder,min:_.min,max:_.max,step:_.step,disabled:_.disabled,required:_.required,pattern:_.pattern,title:_.title,className:l.cn(y&&`border-destructive`)})}})(),(0,p.jsxs)(`div`,{className:`absolute right-1 top-1/2 -translate-y-1/2 flex gap-1`,children:[(0,p.jsx)(t.Button,{size:`sm`,variant:`ghost`,className:`h-6 w-6 p-0`,onClick:k,children:(0,p.jsx)(f.Check,{className:`h-3 w-3 text-green-600`})}),(0,p.jsx)(t.Button,{size:`sm`,variant:`ghost`,className:`h-6 w-6 p-0`,onClick:A,children:(0,p.jsx)(f.X,{className:`h-3 w-3 text-red-600`})})]}),y&&(0,p.jsx)(`p`,{className:`text-xs text-destructive mt-1`,children:y})]}):(0,p.jsx)(`div`,{className:l.cn(`cursor-pointer hover:bg-muted/50 p-1 rounded transition-colors`,w),onClick:x,children:g(e,_)})}function g(e,t){if(e==null)return(0,p.jsx)(`span`,{className:`text-muted-foreground italic`,children:`Non défini`});switch(t.type){case`checkbox`:case`switch`:return(0,p.jsx)(`span`,{className:l.cn(`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium`,e?`bg-green-100 text-green-800`:`bg-gray-100 text-gray-800`),children:e?`Oui`:`Non`});case`date`:case`datetime`:try{return(0,m.format)(new Date(e),t.type===`datetime`?`PPP p`:`PPP`)}catch{return String(e)}case`select`:let n=t.options?.find(t=>t.value===e);return n?n.label:String(e);case`textarea`:return(0,p.jsx)(`div`,{className:`max-w-xs`,children:(0,p.jsx)(`p`,{className:`truncate`,children:String(e)})});default:return String(e)}}exports.DataTableEditCell=h;

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

@@ -15,12 +15,12 @@ export interface EditCellConfig {
     title?: string;
 }
 export interface DataTableEditCellProps<TData> {
-    value: any;
+    value: unknown;
     field: keyof TData;
     config: EditCellConfig;
     isEditing: boolean;
     error?: string;
-    onChange: (value: any) => void;
+    onChange: (value: unknown) => void;
     onStartEdit: () => void;
     onSave: () => void;
     onCancel: () => void;

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

@@ -0,0 +1,165 @@
+"use client";
+"use client";
+import { Button as e } from "../button/index.es.js";
+import { Calendar as t } from "../calendar/index.es.js";
+import { Checkbox as n } from "../checkbox/index.es.js";
+import { Input as r } from "../input/index.es.js";
+import { Select as i, SelectContent as a, SelectItem as o, SelectTrigger as s, SelectValue as c } from "../select/index.es.js";
+import { Popover as l, PopoverContent as u, PopoverTrigger as d } from "../popover/index.es.js";
+import { Switch as f } from "../switch/index.es.js";
+import { Textarea as p } from "../textarea/index.es.js";
+import { cn as m } from "./utils.es.js";
+import { localDateKey as h, parseLocalDate as g } from "../../utils/local-date.es.js";
+import * as _ from "react";
+import { CalendarIcon as v, Check as y, X as b } from "lucide-react";
+import { jsx as x, jsxs as S } from "react/jsx-runtime";
+import { format as C } from "date-fns";
+//#region src/components/DataTable/DataTableEditCell.tsx
+function w({ value: w, field: E, config: D, isEditing: O, error: k, onChange: A, onStartEdit: j, onSave: M, onCancel: N, className: P }) {
+	let [F, I] = _.useState(w), [L, R] = _.useState(!1);
+	_.useEffect(() => {
+		I(w);
+	}, [w]);
+	let z = () => {
+		A(F), M();
+	}, B = () => {
+		I(w), N();
+	}, V = (e) => {
+		e.key === "Enter" && !e.shiftKey ? (e.preventDefault(), z()) : e.key === "Escape" && (e.preventDefault(), B());
+	};
+	return O ? /* @__PURE__ */ S("div", {
+		className: m("relative", P),
+		children: [
+			(() => {
+				switch (D.type) {
+					case "textarea": return /* @__PURE__ */ x(p, {
+						value: F == null ? "" : String(F),
+						onChange: (e) => I(e.target.value),
+						onKeyDown: V,
+						placeholder: D.placeholder,
+						rows: D.rows || 3,
+						disabled: D.disabled,
+						className: m(k && "border-destructive")
+					});
+					case "select": return /* @__PURE__ */ S(i, {
+						value: F == null ? "" : String(F),
+						onValueChange: I,
+						disabled: D.disabled,
+						children: [/* @__PURE__ */ x(s, {
+							className: m(k && "border-destructive"),
+							children: /* @__PURE__ */ x(c, { placeholder: D.placeholder })
+						}), /* @__PURE__ */ x(a, { children: D.options?.map((e) => /* @__PURE__ */ x(o, {
+							value: e.value,
+							children: e.label
+						}, e.value)) })]
+					});
+					case "checkbox": return /* @__PURE__ */ x(n, {
+						checked: !!F,
+						onCheckedChange: I,
+						disabled: D.disabled
+					});
+					case "switch": return /* @__PURE__ */ x(f, {
+						checked: !!F,
+						onCheckedChange: I,
+						disabled: D.disabled
+					});
+					case "date":
+					case "datetime": return /* @__PURE__ */ S(l, {
+						open: L,
+						onOpenChange: R,
+						children: [/* @__PURE__ */ x(d, {
+							asChild: !0,
+							children: /* @__PURE__ */ S(e, {
+								variant: "outline",
+								className: m("w-full justify-start text-left font-normal", !F && "text-muted-foreground", k && "border-destructive"),
+								children: [/* @__PURE__ */ x(v, { className: "mr-2 h-4 w-4" }), F ? C(g(F), "PPP") : D.placeholder]
+							})
+						}), /* @__PURE__ */ x(u, {
+							className: "w-auto p-0",
+							align: "start",
+							children: /* @__PURE__ */ x(t, {
+								mode: "single",
+								selected: F ? g(F) : void 0,
+								onSelect: (e) => {
+									e && (I(D.type === "datetime" ? e.toISOString() : h(e)), R(!1));
+								},
+								initialFocus: !0
+							})
+						})]
+					});
+					default: return /* @__PURE__ */ x(r, {
+						type: D.type,
+						value: F == null ? "" : String(F),
+						onChange: (e) => I(e.target.value),
+						onKeyDown: V,
+						placeholder: D.placeholder,
+						min: D.min,
+						max: D.max,
+						step: D.step,
+						disabled: D.disabled,
+						required: D.required,
+						pattern: D.pattern,
+						title: D.title,
+						className: m(k && "border-destructive")
+					});
+				}
+			})(),
+			/* @__PURE__ */ S("div", {
+				className: "absolute right-1 top-1/2 -translate-y-1/2 flex gap-1",
+				children: [/* @__PURE__ */ x(e, {
+					size: "sm",
+					variant: "ghost",
+					className: "h-6 w-6 p-0",
+					onClick: z,
+					children: /* @__PURE__ */ x(y, { className: "h-3 w-3 text-green-600" })
+				}), /* @__PURE__ */ x(e, {
+					size: "sm",
+					variant: "ghost",
+					className: "h-6 w-6 p-0",
+					onClick: B,
+					children: /* @__PURE__ */ x(b, { className: "h-3 w-3 text-red-600" })
+				})]
+			}),
+			k && /* @__PURE__ */ x("p", {
+				className: "text-xs text-destructive mt-1",
+				children: k
+			})
+		]
+	}) : /* @__PURE__ */ x("div", {
+		className: m("cursor-pointer hover:bg-muted/50 p-1 rounded transition-colors", P),
+		onClick: j,
+		children: T(w, D)
+	});
+}
+function T(e, t) {
+	if (e == null) return /* @__PURE__ */ x("span", {
+		className: "text-muted-foreground italic",
+		children: "Non défini"
+	});
+	switch (t.type) {
+		case "checkbox":
+		case "switch": return /* @__PURE__ */ x("span", {
+			className: m("inline-flex items-center px-2 py-1 rounded-full text-xs font-medium", e ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"),
+			children: e ? "Oui" : "Non"
+		});
+		case "date":
+		case "datetime": try {
+			return C(new Date(e), t.type === "datetime" ? "PPP p" : "PPP");
+		} catch {
+			return String(e);
+		}
+		case "select":
+			let n = t.options?.find((t) => t.value === e);
+			return n ? n.label : String(e);
+		case "textarea": return /* @__PURE__ */ x("div", {
+			className: "max-w-xs",
+			children: /* @__PURE__ */ x("p", {
+				className: "truncate",
+				children: String(e)
+			})
+		});
+		default: return String(e);
+	}
+}
+//#endregion
+export { w as DataTableEditCell };

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

@@ -0,0 +1 @@
+"use client";"use client";const e=require(`../../_virtual/_rolldown/runtime.cjs.js`),t=require(`../badge/index.cjs.js`),n=require(`../button/index.cjs.js`),r=require(`../checkbox/index.cjs.js`),i=require(`../command/index.cjs.js`),a=require(`../label/index.cjs.js`),o=require(`../input/index.cjs.js`),s=require(`../select/index.cjs.js`),c=require(`../popover/index.cjs.js`),l=require(`../sheet/index.cjs.js`);let u=require(`react`);u=e.__toESM(u);let d=require(`lucide-react`),f=require(`react/jsx-runtime`),p=require(`react-i18next`);function m({table:e,filters:m,position:h=`top`,onFiltersChange:g}){let{t:_}=(0,p.useTranslation)(),[v,y]=u.useState([]),[b,x]=u.useState(!1),S=u.useCallback(t=>{let n=e.getPreFilteredRowModel().rows,r=new Set;return n.forEach(e=>{let n=e.getValue(t);n!=null&&n!==``&&r.add(String(n))}),Array.from(r).sort()},[e]),C={text:[{value:`contains`,label:_(`datatable.filters.contains`,{defaultValue:`Contains`})},{value:`equals`,label:_(`datatable.filters.equals`,{defaultValue:`Equals`})},{value:`startsWith`,label:_(`datatable.filters.startsWith`,{defaultValue:`Starts with`})},{value:`endsWith`,label:_(`datatable.filters.endsWith`,{defaultValue:`Ends with`})},{value:`notContains`,label:_(`datatable.filters.notContains`,{defaultValue:`Not contains`})}],select:[{value:`equals`,label:_(`datatable.filters.equals`,{defaultValue:`Equals`})},{value:`notEquals`,label:_(`datatable.filters.notEquals`,{defaultValue:`Not equals`})}],multiselect:[{value:`in`,label:_(`datatable.filters.in`,{defaultValue:`In`})},{value:`notIn`,label:_(`datatable.filters.notIn`,{defaultValue:`Not in`})}],range:[{value:`between`,label:_(`datatable.filters.between`,{defaultValue:`Between`})},{value:`greaterThan`,label:_(`datatable.filters.greaterThan`,{defaultValue:`Greater than`})},{value:`lessThan`,label:_(`datatable.filters.lessThan`,{defaultValue:`Less than`})}],date:[{value:`equals`,label:_(`datatable.filters.equals`,{defaultValue:`Equals`})},{value:`before`,label:_(`datatable.filters.before`,{defaultValue:`Before`})},{value:`after`,label:_(`datatable.filters.after`,{defaultValue:`After`})},{value:`between`,label:_(`datatable.filters.between`,{defaultValue:`Between`})}],daterange:[{value:`between`,label:_(`datatable.filters.between`,{defaultValue:`Between`})},{value:`before`,label:_(`datatable.filters.before`,{defaultValue:`Before`})},{value:`after`,label:_(`datatable.filters.after`,{defaultValue:`After`})}],checkbox:[{value:`equals`,label:_(`datatable.filters.equals`,{defaultValue:`Equals`})}],number:[{value:`equals`,label:_(`datatable.filters.equals`,{defaultValue:`Equals`})},{value:`notEquals`,label:_(`datatable.filters.notEquals`,{defaultValue:`Not equals`})},{value:`greaterThan`,label:_(`datatable.filters.greaterThan`,{defaultValue:`Greater than`})},{value:`lessThan`,label:_(`datatable.filters.lessThan`,{defaultValue:`Less than`})},{value:`between`,label:_(`datatable.filters.between`,{defaultValue:`Between`})}],boolean:[{value:`equals`,label:_(`datatable.filters.equals`,{defaultValue:`Equals`})},{value:`notEquals`,label:_(`datatable.filters.notEquals`,{defaultValue:`Not equals`})}]},w=(t,n,r)=>{let i=e.getColumn(t.column||t.id);if(!i)return;let a={columnId:t.column||t.id,operator:n,value:r,label:t.label};y(e=>[...e,a]),i.setFilterValue({operator:n,value:r}),g?.([...v,a])},T=t=>{let n=v[t],r=e.getColumn(n.columnId);r&&r.setFilterValue(void 0);let i=v.filter((e,n)=>n!==t);y(i),g?.(i)},E=()=>{v.forEach(t=>{let n=e.getColumn(t.columnId);n&&n.setFilterValue(void 0)}),y([]),g?.([])},D=e=>{let[l,p]=u.useState(C[e.type]?.[0]?.value||`equals`),m=()=>e.defaultValue===void 0?e.type===`range`?{min:``,max:``}:e.type===`daterange`?{from:``,to:``}:e.type===`checkbox`?!1:``:e.defaultValue,[h,g]=u.useState(m()),[v,y]=u.useState([]),[b,x]=u.useState(!1),T=e.column?S(e.column):[];return(0,f.jsxs)(`div`,{className:`space-y-3 p-4 border rounded-lg`,children:[(0,f.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,f.jsx)(a.Label,{className:`text-sm font-medium`,children:e.label}),(0,f.jsx)(t.Badge,{variant:`outline`,className:`text-xs`,children:e.type})]}),C[e.type]&&C[e.type].length>1&&(0,f.jsxs)(s.Select,{value:l,onValueChange:p,children:[(0,f.jsx)(s.SelectTrigger,{className:`h-9`,children:(0,f.jsx)(s.SelectValue,{})}),(0,f.jsx)(s.SelectContent,{children:C[e.type].map(e=>(0,f.jsx)(s.SelectItem,{value:e.value,children:e.label},e.value))})]}),e.type===`text`&&(0,f.jsx)(`div`,{className:`space-y-2`,children:(0,f.jsxs)(c.Popover,{open:b,onOpenChange:x,children:[(0,f.jsx)(c.PopoverTrigger,{asChild:!0,children:(0,f.jsx)(o.Input,{placeholder:e.placeholder||_(`datatable.filters.enterValue`,{defaultValue:`Enter value...`}),value:h,onChange:e=>{g(e.target.value),x(!0)},className:`h-9`})}),T.length>0&&h&&(0,f.jsx)(c.PopoverContent,{className:`w-[--radix-popover-trigger-width] p-0`,align:`start`,children:(0,f.jsxs)(i.Command,{children:[(0,f.jsx)(i.CommandInput,{placeholder:_(`datatable.filters.search`,{defaultValue:`Search...`})}),(0,f.jsx)(i.CommandEmpty,{children:_(`datatable.filters.noResults`,{defaultValue:`No results`})}),(0,f.jsx)(i.CommandGroup,{className:`max-h-64 overflow-auto`,children:T.filter(e=>e.toLowerCase().includes(h.toLowerCase())).slice(0,50).map(e=>(0,f.jsx)(i.CommandItem,{onSelect:()=>{g(e),x(!1)},children:e},e))})]})})]})}),e.type===`select`&&(0,f.jsxs)(s.Select,{value:h,onValueChange:g,children:[(0,f.jsx)(s.SelectTrigger,{className:`h-9`,children:(0,f.jsx)(s.SelectValue,{placeholder:e.placeholder})}),(0,f.jsx)(s.SelectContent,{children:(e.options||T.map(e=>({label:e,value:e}))).map(e=>(0,f.jsx)(s.SelectItem,{value:String(e.value),children:e.label},e.value))})]}),e.type===`multiselect`&&(0,f.jsxs)(c.Popover,{children:[(0,f.jsx)(c.PopoverTrigger,{asChild:!0,children:(0,f.jsxs)(n.Button,{variant:`outline`,className:`w-full justify-between h-9`,children:[v.length>0?`${v.length} ${_(`datatable.filters.selected`,{defaultValue:`selected`})}`:e.placeholder||_(`datatable.filters.selectValues`,{defaultValue:`Select values...`}),(0,f.jsx)(d.ChevronDown,{className:`ml-2 h-4 w-4 opacity-50`})]})}),(0,f.jsx)(c.PopoverContent,{className:`w-[--radix-popover-trigger-width] p-0`,align:`start`,children:(0,f.jsxs)(i.Command,{children:[(0,f.jsx)(i.CommandInput,{placeholder:_(`datatable.filters.search`,{defaultValue:`Search...`})}),(0,f.jsx)(i.CommandEmpty,{children:_(`datatable.filters.noResults`,{defaultValue:`No results`})}),(0,f.jsx)(i.CommandGroup,{className:`max-h-64 overflow-auto`,children:T.map(e=>(0,f.jsxs)(i.CommandItem,{onSelect:()=>{y(t=>t.includes(e)?t.filter(t=>t!==e):[...t,e])},children:[(0,f.jsx)(r.Checkbox,{checked:v.includes(e),className:`mr-2`}),e]},e))})]})})]}),e.type===`date`&&(0,f.jsx)(o.Input,{type:`date`,value:h,onChange:e=>g(e.target.value),className:`h-9`}),e.type===`range`&&(0,f.jsxs)(`div`,{className:`flex gap-2`,children:[(0,f.jsx)(o.Input,{type:`number`,placeholder:`Min`,value:h.min||``,onChange:e=>g({...h,min:e.target.value}),className:`h-9`}),(0,f.jsx)(o.Input,{type:`number`,placeholder:`Max`,value:h.max||``,onChange:e=>g({...h,max:e.target.value}),className:`h-9`})]}),e.type===`daterange`&&(0,f.jsxs)(`div`,{className:`flex gap-2`,children:[(0,f.jsx)(o.Input,{type:`date`,placeholder:_(`datatable.filters.from`,{defaultValue:`From`}),value:h.from||``,onChange:e=>g({...h,from:e.target.value}),className:`h-9`}),(0,f.jsx)(o.Input,{type:`date`,placeholder:_(`datatable.filters.to`,{defaultValue:`To`}),value:h.to||``,onChange:e=>g({...h,to:e.target.value}),className:`h-9`})]}),e.type===`checkbox`&&(0,f.jsxs)(`div`,{className:`flex items-center space-x-2`,children:[(0,f.jsx)(r.Checkbox,{id:`checkbox-${e.id}`,checked:h===!0,onCheckedChange:e=>g(e===!0)}),(0,f.jsx)(a.Label,{htmlFor:`checkbox-${e.id}`,className:`text-sm font-normal`,children:e.placeholder||_(`datatable.filters.checked`,{defaultValue:`Checked`})})]}),(0,f.jsxs)(n.Button,{onClick:()=>{let t=e.type===`multiselect`?v:h,n=!1;if(e.type===`multiselect`)n=Array.isArray(t)&&t.length>0;else if(e.type===`range`){let e=t;n=e.min!==``||e.max!==``}else if(e.type===`daterange`){let e=t;n=e.from!==``||e.to!==``}else n=e.type===`checkbox`?!0:t!==``&&t!=null;n&&(w(e,l,t),g(m()),y([]),x(!1))},size:`sm`,className:`w-full`,children:[(0,f.jsx)(d.Plus,{className:`h-4 w-4 mr-2`}),_(`datatable.filters.apply`,{defaultValue:`Apply filter`})]})]})};if(!m||m.length===0)return null;let O=(0,f.jsxs)(`div`,{className:`space-y-4`,children:[v.length>0&&(0,f.jsxs)(`div`,{className:`space-y-2`,children:[(0,f.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,f.jsx)(a.Label,{className:`text-sm text-muted-foreground`,children:_(`datatable.filters.active`,{defaultValue:`Filtres actifs`})}),(0,f.jsxs)(n.Button,{variant:`ghost`,size:`sm`,onClick:E,children:[(0,f.jsx)(d.Trash2,{className:`h-3 w-3 mr-1`}),_(`datatable.filters.clearAll`,{defaultValue:`Tout effacer`})]})]}),(0,f.jsx)(`div`,{className:`space-y-1`,children:v.map((e,t)=>(0,f.jsxs)(`div`,{className:`flex items-center justify-between p-2 bg-muted rounded-md text-sm`,children:[(0,f.jsxs)(`div`,{className:`flex-1 min-w-0`,children:[(0,f.jsx)(`span`,{className:`font-medium`,children:e.label}),(0,f.jsx)(`span`,{className:`text-muted-foreground mx-2`,children:e.operator}),(0,f.jsx)(`span`,{className:`text-primary truncate`,children:Array.isArray(e.value)?e.value.join(`, `):String(e.value)})]}),(0,f.jsx)(n.Button,{variant:`ghost`,size:`icon`,className:`h-6 w-6 shrink-0`,onClick:()=>T(t),children:(0,f.jsx)(d.X,{className:`h-3 w-3`})})]},t))})]}),(0,f.jsxs)(`div`,{className:`space-y-3`,children:[(0,f.jsx)(a.Label,{className:`text-sm text-muted-foreground`,children:_(`datatable.filters.available`,{defaultValue:`Filtres disponibles`})}),m.map(e=>(0,f.jsx)(`div`,{children:D(e)},e.id))]})]}),k=(0,f.jsxs)(n.Button,{variant:`outline`,size:`sm`,children:[(0,f.jsx)(d.Filter,{className:`h-4 w-4 mr-2`}),_(`datatable.filters.title`,{defaultValue:`Filtres`}),v.length>0&&(0,f.jsx)(t.Badge,{variant:`secondary`,className:`ml-2`,children:v.length})]});return h===`right`||h===`left`?(0,f.jsxs)(l.Sheet,{open:b,onOpenChange:x,children:[(0,f.jsx)(l.SheetTrigger,{asChild:!0,children:k}),(0,f.jsxs)(l.SheetContent,{side:h,className:`w-[400px] sm:w-[540px] overflow-y-auto`,children:[(0,f.jsxs)(l.SheetHeader,{children:[(0,f.jsxs)(l.SheetTitle,{className:`flex items-center gap-2`,children:[(0,f.jsx)(d.Filter,{className:`h-5 w-5`}),_(`datatable.filters.title`,{defaultValue:`Filtres`})]}),(0,f.jsx)(l.SheetDescription,{children:_(`datatable.filters.description`,{defaultValue:`Appliquez des filtres pour affiner les résultats`})})]}),(0,f.jsx)(`div`,{className:`mt-6`,children:O})]})]}):(0,f.jsxs)(c.Popover,{open:b,onOpenChange:x,children:[(0,f.jsx)(c.PopoverTrigger,{asChild:!0,children:k}),(0,f.jsx)(c.PopoverContent,{className:`w-[400px] max-h-[600px] overflow-y-auto`,align:h===`top`?`start`:`end`,children:(0,f.jsxs)(`div`,{className:`space-y-4`,children:[(0,f.jsx)(`div`,{className:`flex items-center justify-between`,children:(0,f.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,f.jsx)(d.Filter,{className:`h-4 w-4`}),(0,f.jsx)(`h4`,{className:`font-semibold text-sm`,children:_(`datatable.filters.title`,{defaultValue:`Filtres`})})]})}),O]})})]})}exports.DataTableFilters=m;

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

@@ -1,14 +1,14 @@
-import { Table } from "@tanstack/react-table";
+import { Table, ColumnFiltersState } from "@tanstack/react-table";
 import { FilterConfig, FilterPosition } from "./types";
 interface DataTableFiltersProps<TData> {
     table: Table<TData>;
     filters?: FilterConfig[];
     position?: FilterPosition;
-    onFiltersChange?: (filters: any[]) => void;
+    onFiltersChange?: (filters: ColumnFiltersState) => void;
 }
 /**
  * Composant de filtrage avancé pour DataTable
  * Supporte autocomplete, multi-select, date ranges, etc.
  */
-export declare function DataTableFilters<TData>({ table, filters, position, onFiltersChange, }: DataTableFiltersProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTableFilters<TData>({ table, filters, position, onFiltersChange, }: DataTableFiltersProps<TData>): import("react/jsx-runtime").JSX.Element | null;
 export {};