zaravand-ui 7.0.0 → 7.0.2

package/dist/components/Table/Table.js

@@ -11,39 +11,42 @@ import { useExclusiveAction as te } from "../shared/useExclusiveAction.js";
 import { useStickyToolbar as ne } from "../shared/useStickyToolbar.js";
 import { useIsMobileViewport as re } from "../shared/viewport.js";
 import ie from "../Select/Select.js";
-import { tableContainerVariants as ae, tableVariants as oe } from "./Table.variant.js";
-import se from "./TableEmptyState.js";
-import ce from "./TablePaginationControls.js";
-import { actionIconClassName as le, actionsColumnClassName as ue, actionsColumnStickyClassName as de, pagingToggleIconClassName as fe, rowActionButtonClassName as pe, rowNumberColumnClassName as me, stickyHeaderCellClassName as he } from "./Table.constants.js";
-import { TableBody as ge, TableCell as u, TableHead as d, TableHeader as _e, TableRow as ve } from "./TableParts.js";
-import { formatCellValue as ye, replaceRowByIdentifier as be, resolveAriaSort as xe, resolveColumnWidthPercentages as Se, resolveLoadingRowsCount as Ce, resolvePlaceholder as we, resolveSafeRowId as Te } from "./Table.utils.js";
-import Ee from "./TableSkeletonRows.js";
-import De from "./TableSortToggle.js";
-import { useTablePagination as Oe } from "./hooks/useTablePagination.js";
-import { useTableCardLabels as ke } from "./hooks/useTableCardLabels.js";
-import { useTableSearch as Ae } from "./hooks/useTableSearch.js";
-import { useTableSort as je } from "./hooks/useTableSort.js";
-import * as f from "react";
-import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
-import { ArrowDown as Me, ArrowUp as Ne, ArrowUpDown as Pe, EllipsisVertical as Fe, Eye as Ie, FileSpreadsheet as Le, Infinity as Re, Pencil as ze, Plus as Be, Printer as Ve, RotateCcw as He, Rows3 as Ue, Trash2 as We } from "lucide-react";
+import { actionIconClassName as ae, actionsColumnClassName as oe, actionsColumnStickyClassName as se, pagingToggleIconClassName as ce, rowActionButtonClassName as le, rowNumberColumnClassName as ue, stickyHeaderCellClassName as de } from "./Table.constants.js";
+import { formatCellValue as fe, isEmptyFilterValue as pe, replaceRowByIdentifier as me, resolveAriaSort as he, resolveColumnWidthPercentages as ge, resolveFilterOptions as _e, resolveFilterText as ve, resolveLoadingRowsCount as ye, resolvePlaceholder as be, resolveSafeRowId as xe } from "./Table.utils.js";
+import { tableContainerVariants as Se, tableVariants as Ce } from "./Table.variant.js";
+import we from "./TableActiveFilters.js";
+import Te, { TableColumnFilterSheet as Ee } from "./TableColumnFilter.js";
+import De from "./TableEmptyState.js";
+import Oe from "./TablePaginationControls.js";
+import { TableBody as ke, TableCell as u, TableHead as Ae, TableHeader as je, TableRow as Me } from "./TableParts.js";
+import Ne from "./TableSkeletonRows.js";
+import Pe from "./TableSortToggle.js";
+import { useTablePagination as Fe } from "./hooks/useTablePagination.js";
+import { useTableCardLabels as Ie } from "./hooks/useTableCardLabels.js";
+import { useTableFilter as Le } from "./hooks/useTableFilter.js";
+import { useTableSearch as Re } from "./hooks/useTableSearch.js";
+import { useTableSort as ze } from "./hooks/useTableSort.js";
+import * as d from "react";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+import { ArrowDown as Be, ArrowUp as Ve, ArrowUpDown as He, EllipsisVertical as Ue, Eye as We, FileSpreadsheet as Ge, Funnel as Ke, Infinity as qe, Pencil as Je, Plus as Ye, Printer as Xe, RotateCcw as Ze, Rows3 as Qe, Trash2 as $e } from "lucide-react";
 //#region src/components/Table/Table.tsx
-var Ge = f.forwardRef(function({ className: Ge, containerClassName: Ke, loading: g = !1, isMutating: _ = !1, stickyHeaderOnScroll: qe = !0, maxVisibleRowsBeforeScroll: Je, allowInfiniteMode: Ye = !0, stickyToolbar: Xe = !0, schema: v, data: y, setData: Ze, onAdd: b, onImportExcel: x, onEdit: S, onDelete: C, onPrint: w, onPreviewPrint: T, actions: Qe, onCellSelectChange: $e, getRowId: E, showNumberRow: et = !1, showColumnBorder: tt = !1, showRowBorder: nt = !1, toolbarExtra: rt, children: it }, at) {
-	let { messages: D, digits: O, dir: ot } = e(), st = f.useMemo(() => ({
-		digits: O,
-		messages: D
-	}), [O, D]), k = f.Children.count(it) > 0, A = re(), ct = f.useRef(null), lt = f.useMemo(() => r(at, ct), [at]);
-	ke(ct, k);
-	let j = f.useMemo(() => v.columns.filter((e) => e.view), [v.columns]), ut = f.useMemo(() => j.filter((e) => e.sortable), [j]), M = typeof b == "function", N = typeof x == "function", P = typeof S == "function", F = typeof C == "function", I = typeof w == "function", L = typeof T == "function", R = Qe ?? [], dt = R.length > 0, z = v.searchable ?? !1, B = et && !k, ft = rt != null && rt !== !1, pt = v.pagination, mt = pt?.onSearchChange, ht = typeof mt == "function", V = P || F || dt, { rowNumberColumnStyle: gt, columnStyleByKey: _t, actionsColumnStyle: vt } = f.useMemo(() => Se(j, B, V), [
-		V,
-		B,
-		j
-	]), yt = f.useMemo(() => {
-		let e = v.columns.map((e) => {
+var et = d.forwardRef(function({ className: et, containerClassName: tt, loading: h = !1, isMutating: g = !1, stickyHeaderOnScroll: nt = !0, maxVisibleRowsBeforeScroll: rt, allowInfiniteMode: it = !0, stickyToolbar: at = !0, schema: _, data: v, setData: ot, onAdd: y, onImportExcel: b, onEdit: x, onDelete: st, onPrint: ct, onPreviewPrint: lt, actions: ut, onCellSelectChange: dt, getRowId: S, showNumberRow: ft = !1, showColumnBorder: pt = !1, showRowBorder: mt = !1, toolbarExtra: ht, children: gt }, _t) {
+	let { messages: C, digits: w, dir: T } = e(), E = d.useMemo(() => ({
+		digits: w,
+		messages: C
+	}), [w, C]), D = d.Children.count(gt) > 0, O = re(), vt = d.useRef(null), yt = d.useMemo(() => r(_t, vt), [_t]);
+	Ie(vt, D);
+	let k = d.useMemo(() => _.columns.filter((e) => e.view), [_.columns]), bt = d.useMemo(() => k.filter((e) => e.sortable), [k]), A = d.useMemo(() => k.filter((e) => e.filterable), [k]), xt = typeof y == "function", j = typeof b == "function", M = typeof x == "function", N = typeof st == "function", P = typeof ct == "function", F = typeof lt == "function", I = ut ?? [], St = I.length > 0, L = _.searchable ?? !1, R = ft && !D, Ct = ht != null && ht !== !1, wt = _.pagination, Tt = wt?.onSearchChange, Et = typeof Tt == "function", z = M || N || St, { rowNumberColumnStyle: Dt, columnStyleByKey: Ot, actionsColumnStyle: kt } = d.useMemo(() => ge(k, R, z), [
+		z,
+		R,
+		k
+	]), At = d.useMemo(() => {
+		let e = _.columns.map((e) => {
 			if (e.type !== "select" && e.type !== "radio") return [e.key, []];
 			if (Array.isArray(e.options) && e.options.length > 0) return [e.key, e.options];
 			if (e.optionsSource) return [e.key, []];
 			let t = /* @__PURE__ */ new Set();
-			return y.forEach((n) => {
+			return v.forEach((n) => {
 				let r = n[e.key];
 				if (typeof r == "string" || typeof r == "number") {
 					let e = String(r).trim();
@@ -55,48 +58,48 @@ var Ge = f.forwardRef(function({ className: Ge, containerClassName: Ke, loading:
 			}))];
 		});
 		return Object.fromEntries(e);
-	}, [y, v.columns]), [bt, H] = te(), [xt, St] = f.useState(!1), [Ct, wt] = f.useState(!1), [Tt, Et] = f.useState({
+	}, [v, _.columns]), [jt, B] = te(), [Mt, Nt] = d.useState(!1), [Pt, Ft] = d.useState(!1), [It, Lt] = d.useState(!1), [Rt, zt] = d.useState(null), [Bt, Vt] = d.useState(!1), [Ht, Ut] = d.useState({
 		open: !1,
 		actions: []
-	}), U = _ || bt, Dt = f.useCallback(async () => {
-		_ || !b || await H(b);
+	}), V = g || jt, Wt = d.useCallback(async () => {
+		g || !y || await B(y);
 	}, [
-		_,
-		b,
-		H
-	]), Ot = f.useCallback(async () => {
-		_ || !x || await H(x);
+		g,
+		y,
+		B
+	]), Gt = d.useCallback(async () => {
+		g || !b || await B(b);
 	}, [
-		_,
-		x,
-		H
-	]), W = f.useCallback(async (e, t, n, r) => {
-		_ || await H(() => e({
+		g,
+		b,
+		B
+	]), H = d.useCallback(async (e, t, n, r) => {
+		g || await B(() => e({
 			row: t,
 			rowIndex: n,
-			rowId: r ?? Te(t, n, E)
+			rowId: r ?? xe(t, n, S)
 		}));
 	}, [
-		E,
-		_,
-		H
-	]), kt = f.useCallback(async (e, t, n) => {
-		S && await W(S, e, t, n);
-	}, [S, W]), At = f.useCallback(async (e, t, n) => {
-		C && await W(C, e, t, n);
-	}, [C, W]), jt = f.useCallback(async (e, t, n, r) => {
-		await W(e.onClick, t, n, r);
-	}, [W]), Mt = f.useCallback(async (e, t, n, r, i) => {
-		if (_) return;
+		S,
+		g,
+		B
+	]), Kt = d.useCallback(async (e, t, n) => {
+		x && await H(x, e, t, n);
+	}, [x, H]), qt = d.useCallback(async (e, t, n) => {
+		st && await H(st, e, t, n);
+	}, [st, H]), Jt = d.useCallback(async (e, t, n, r) => {
+		await H(e.onClick, t, n, r);
+	}, [H]), Yt = d.useCallback(async (e, t, n, r, i) => {
+		if (g) return;
 		let a = i.trim(), o = a.length > 0 ? a : null;
 		if (e[r] === o) return;
-		let s = n ?? Te(e, t, E), c = {
+		let s = n ?? xe(e, t, S), c = {
 			...e,
 			[r]: o
 		};
-		await H(async () => {
+		await B(async () => {
 			try {
-				if ($e && await $e({
+				if (dt && await dt({
 					row: c,
 					previousRow: e,
 					rowIndex: t,
@@ -104,475 +107,549 @@ var Ge = f.forwardRef(function({ className: Ge, containerClassName: Ke, loading:
 					columnKey: r,
 					value: a
 				}) === !1) return;
-				Ze((e) => be(e, t, s, E, c));
+				ot((e) => me(e, t, s, S, c));
 			} catch {
 				return;
 			}
 		});
 	}, [
-		E,
-		_,
-		$e,
-		H,
-		Ze
-	]), Nt = f.useCallback((e, t, r) => {
-		let i = (e) => /* @__PURE__ */ m("span", {
+		S,
+		g,
+		dt,
+		B,
+		ot
+	]), Xt = d.useCallback((e, t, r) => {
+		let i = (e) => /* @__PURE__ */ p("span", {
 			className: n("zui:inline-flex", s, "zui:[&>svg]:size-full"),
 			children: e
 		}), a = [];
-		P && a.push({
+		M && a.push({
 			key: "edit",
-			label: D.common.edit,
-			icon: i(/* @__PURE__ */ m(ze, { "aria-hidden": "true" })),
-			onSelect: () => void kt(e, t, r)
-		}), R.forEach((n, o) => {
+			label: C.common.edit,
+			icon: i(/* @__PURE__ */ p(Je, { "aria-hidden": "true" })),
+			onSelect: () => void Kt(e, t, r)
+		}), I.forEach((n, o) => {
 			a.push({
 				key: `custom-${o}`,
 				label: n.tooltip,
 				icon: i(n.icon),
-				onSelect: () => void jt(n, e, t, r)
+				onSelect: () => void Jt(n, e, t, r)
 			});
-		}), F && a.push({
+		}), N && a.push({
 			key: "delete",
-			label: D.common.delete,
-			icon: i(/* @__PURE__ */ m(We, { "aria-hidden": "true" })),
+			label: C.common.delete,
+			icon: i(/* @__PURE__ */ p($e, { "aria-hidden": "true" })),
 			danger: !0,
-			onSelect: () => void At(e, t, r)
-		}), Et({
+			onSelect: () => void qt(e, t, r)
+		}), Ut({
 			open: !0,
 			actions: a
 		});
 	}, [
-		jt,
-		At,
-		kt,
-		D.common.delete,
-		D.common.edit,
-		R,
-		F,
-		P
-	]), { searchTerm: Pt, normalizedSearchTerm: Ft, filteredRows: It, handleSearchInputChange: Lt } = Ae({
-		data: y,
-		visibleColumns: j,
-		showSearchInput: z,
-		hasRemoteSearchHandler: ht,
-		onSearchChange: mt,
-		getRowId: E,
-		cellFormatOptions: st
-	}), { sortedRows: G, activeSort: K, handleSortToggle: Rt, handleSortClear: zt } = je({
-		rows: It,
-		columns: v.columns,
-		sortConfig: v.sort
-	}), Bt = f.useCallback(async () => {
-		w && await w({
+		Jt,
+		qt,
+		Kt,
+		C.common.delete,
+		C.common.edit,
+		I,
+		N,
+		M
+	]), { searchTerm: Zt, normalizedSearchTerm: Qt, filteredRows: $t, handleSearchInputChange: en } = Re({
+		data: v,
+		visibleColumns: k,
+		showSearchInput: L,
+		hasRemoteSearchHandler: Et,
+		onSearchChange: Tt,
+		getRowId: S,
+		cellFormatOptions: E
+	}), { filteredRows: tn, filterValues: U, activeFilterCount: nn, filterKey: rn, handleFilterChange: an, handleFilterClear: on } = Le({
+		rows: $t,
+		columns: _.columns,
+		filterConfig: _.filter
+	}), W = d.useMemo(() => Object.fromEntries(A.map((e) => [e.key, _e(e, v, E)])), [
+		E,
+		v,
+		A
+	]), { sortedRows: G, activeSort: K, handleSortToggle: sn, handleSortClear: cn } = ze({
+		rows: tn,
+		columns: _.columns,
+		sortConfig: _.sort
+	}), ln = d.useCallback(async () => {
+		ct && await ct({
 			rows: G.map(({ row: e }) => e),
-			columns: j
+			columns: k
 		});
 	}, [
-		w,
+		ct,
 		G,
-		j
-	]), Vt = f.useCallback(async () => {
-		T && await T({
+		k
+	]), un = d.useCallback(async () => {
+		lt && await lt({
 			rows: G.map(({ row: e }) => e),
-			columns: j
+			columns: k
 		});
 	}, [
-		T,
+		lt,
 		G,
-		j
-	]), { pagingMode: q, currentPage: Ht, totalPages: Ut, resolvedPageSize: Wt, visibleRows: J, showPagingModeToggle: Y, shouldRenderPagination: Gt, shouldRenderInfiniteMode: Kt, canLoadMoreInInfiniteMode: qt, shouldUseRemotePaging: Jt, shouldUseScrollableRows: Yt, tableScrollViewportRef: Xt, tableScrollViewportStyle: Zt, handlePageChange: Qt, handlePagingModeToggle: $t, handleTableScrollViewport: en, isInfiniteRequestPending: tn } = Oe({
-		hasChildren: k,
+		k
+	]), { pagingMode: q, currentPage: dn, totalPages: fn, resolvedPageSize: pn, visibleRows: J, showPagingModeToggle: mn, shouldRenderPagination: hn, shouldRenderInfiniteMode: gn, canLoadMoreInInfiniteMode: _n, shouldUseRemotePaging: vn, shouldUseScrollableRows: yn, tableScrollViewportRef: bn, tableScrollViewportStyle: xn, handlePageChange: Sn, handlePagingModeToggle: Cn, handleTableScrollViewport: wn, isInfiniteRequestPending: Tn } = Fe({
+		hasChildren: D,
 		filteredRows: G,
-		paginationConfig: pt,
-		loading: g,
-		isRowActionBusy: U,
-		searchKey: Ft,
+		paginationConfig: wt,
+		loading: h,
+		isRowActionBusy: V,
+		searchKey: `${Qt}|${rn}`,
 		sortKey: K ? `${K.sortKey}:${K.direction}` : "",
-		maxVisibleRowsBeforeScroll: Je,
-		allowInfiniteMode: Ye
-	}), X = Yt && qe, nn = f.useMemo(() => Ce(v.pagination?.pageSize, y.length), [y.length, v.pagination?.pageSize]), rn = g && (J.length === 0 || Jt && q === "pagination"), an = Kt && g && J.length > 0, on = Kt && J.length > 0, sn = on && (g || tn), cn = on && qt && !g && !tn, ln = on && !qt && !g && !tn, un = Math.min(nn, Math.max(1, Math.min(Wt, 3))), Z = g || U, dn = +!!P + R.length + +!!F, fn = q === "pagination" ? D.table.switchToInfinite : D.table.switchToPagination, pn = M || N || Y || I || L, Q = A && !k && ut.length > 0, $ = !k && (z || pn || Q), mn = f.useRef(null), hn = f.useRef(null);
-	ne(mn, hn, A && Xe && $);
-	let gn = f.useMemo(() => {
-		let e = (e) => /* @__PURE__ */ m(e, {
+		maxVisibleRowsBeforeScroll: rt,
+		allowInfiniteMode: it
+	}), En = yn && nt, Dn = d.useMemo(() => ye(_.pagination?.pageSize, v.length), [v.length, _.pagination?.pageSize]), On = h && (J.length === 0 || vn && q === "pagination"), kn = gn && h && J.length > 0, An = gn && J.length > 0, jn = An && (h || Tn), Mn = An && _n && !h && !Tn, Nn = An && !_n && !h && !Tn, Pn = Math.min(Dn, Math.max(1, Math.min(pn, 3))), Y = h || V, Fn = +!!M + I.length + +!!N, In = q === "pagination" ? C.table.switchToInfinite : C.table.switchToPagination, Ln = xt || j || mn || P || F, X = O && !D && bt.length > 0, Z = O && !D && A.length > 0, Q = !D && (L || Ln || X || Z), Rn = d.useRef(null), zn = d.useRef(null);
+	ne(Rn, zn, O && at && Q);
+	let Bn = d.useMemo(() => {
+		let e = (e) => /* @__PURE__ */ p(e, {
 			className: s,
 			"aria-hidden": "true"
-		}), n = ut.map((n) => {
-			let r = K?.sortKey === n.key ? K.direction : void 0, i = t(n.label, O);
+		}), n = bt.map((n) => {
+			let r = K?.sortKey === n.key ? K.direction : void 0, i = t(n.label, w);
 			return {
 				key: n.key,
-				label: r === void 0 ? i : `${i} (${r === "asc" ? D.table.sortAscending : D.table.sortDescending})`,
-				icon: e(r === "asc" ? Ne : r === "desc" ? Me : Pe),
+				label: r === void 0 ? i : `${i} (${r === "asc" ? C.table.sortAscending : C.table.sortDescending})`,
+				icon: e(r === "asc" ? Ve : r === "desc" ? Be : He),
 				active: r !== void 0,
-				onSelect: () => Rt(n.key)
+				onSelect: () => sn(n.key)
 			};
 		});
 		return K && n.push({
 			key: "clear-sort",
-			label: D.table.sortDefault,
-			icon: e(He),
-			onSelect: zt
+			label: C.table.sortDefault,
+			icon: e(Ze),
+			onSelect: cn
 		}), n;
 	}, [
 		K,
-		O,
-		zt,
-		Rt,
-		D.table.sortAscending,
-		D.table.sortDefault,
-		D.table.sortDescending,
-		ut
-	]), _n = f.useMemo(() => {
-		let e = (e) => /* @__PURE__ */ m(e, {
+		w,
+		cn,
+		sn,
+		C.table.sortAscending,
+		C.table.sortDefault,
+		C.table.sortDescending,
+		bt
+	]), Vn = d.useCallback((e) => {
+		zt(e), Vt(!0);
+	}, []), Hn = d.useMemo(() => A.map((e) => {
+		let n = U[e.key], r = n !== void 0 && !pe(n), i = t(e.label, w), a = r ? t(ve(n, W[e.key] ?? []), w) : "";
+		return {
+			key: e.key,
+			label: r ? `${i}: ${a}` : i,
+			icon: /* @__PURE__ */ p(Ke, {
+				className: s,
+				fill: r ? "currentColor" : "none",
+				"aria-hidden": "true"
+			}),
+			active: r,
+			onSelect: () => Vn(e.key)
+		};
+	}), [
+		w,
+		W,
+		U,
+		A,
+		Vn
+	]), $ = A.find((e) => e.key === Rt), Un = d.useMemo(() => {
+		let e = (e) => /* @__PURE__ */ p(e, {
 			className: s,
 			"aria-hidden": "true"
 		});
 		return [
-			M ? {
+			xt ? {
 				key: "add",
-				label: D.common.add,
-				icon: e(Be),
-				onSelect: () => void Dt()
+				label: C.common.add,
+				icon: e(Ye),
+				onSelect: () => void Wt()
 			} : null,
-			N ? {
+			j ? {
 				key: "import",
-				label: D.table.importExcel,
-				icon: e(Le),
-				onSelect: () => void Ot()
+				label: C.table.importExcel,
+				icon: e(Ge),
+				onSelect: () => void Gt()
 			} : null,
-			I ? {
+			P ? {
 				key: "print",
-				label: D.table.print,
-				icon: e(Ve),
-				onSelect: () => void Bt()
+				label: C.table.print,
+				icon: e(Xe),
+				onSelect: () => void ln()
 			} : null,
-			L ? {
+			F ? {
 				key: "preview-print",
-				label: D.table.printPreview,
-				icon: e(Ie),
-				onSelect: () => void Vt()
+				label: C.table.printPreview,
+				icon: e(We),
+				onSelect: () => void un()
 			} : null,
-			Y ? {
+			mn ? {
 				key: "paging-mode",
-				label: fn,
-				icon: e(q === "pagination" ? Re : Ue),
-				onSelect: $t
+				label: In,
+				icon: e(q === "pagination" ? qe : Qe),
+				onSelect: Cn
 			} : null
 		].filter((e) => e !== null);
 	}, [
-		Dt,
-		Ot,
-		$t,
-		Vt,
-		Bt,
-		D.common.add,
-		D.table.importExcel,
-		D.table.print,
-		D.table.printPreview,
+		Wt,
+		Gt,
+		Cn,
+		un,
+		ln,
+		C.common.add,
+		C.table.importExcel,
+		C.table.print,
+		C.table.printPreview,
 		q,
-		fn,
-		M,
-		N,
-		Y,
-		L,
-		I
-	]), vn = A && (_n.length > 0 || Q), yn = A && _n.length > 1, bn = ft && $ && z, xn = ft && $ && !z, Sn = ft && !$, Cn = /* @__PURE__ */ m("div", {
+		In,
+		xt,
+		j,
+		mn,
+		F,
+		P
+	]), Wn = O && (Un.length > 0 || X || Z), Gn = O && Un.length > 1, Kn = Ct && Q && L, qn = Ct && Q && !L, Jn = Ct && !Q, Yn = /* @__PURE__ */ p("div", {
 		"data-slot": "table-toolbar-extra",
 		className: n("zui:flex zui:w-full zui:items-center", i),
-		children: rt
+		children: ht
 	});
-	return /* @__PURE__ */ h("div", {
+	return /* @__PURE__ */ m("div", {
 		"data-slot": "table-container",
-		dir: ot,
-		className: n(ae(), Ke),
+		dir: T,
+		className: n(Se(), tt),
 		children: [
-			Sn ? /* @__PURE__ */ m("div", {
+			Jn ? /* @__PURE__ */ p("div", {
 				"data-slot": "table-toolbar-extra-row",
 				className: "zui:mb-3",
-				children: Cn
+				children: Yn
 			}) : null,
-			$ ? /* @__PURE__ */ h(p, { children: [
-				/* @__PURE__ */ m("div", {
-					ref: hn,
+			Q ? /* @__PURE__ */ m(f, { children: [
+				/* @__PURE__ */ p("div", {
+					ref: zn,
 					"aria-hidden": "true",
 					"data-slot": "table-sticky-sentinel"
 				}),
-				/* @__PURE__ */ h("div", {
-					ref: mn,
+				/* @__PURE__ */ m("div", {
+					ref: Rn,
 					"data-slot": "table-sticky-toolbar",
-					"data-sticky-toolbar": A && Xe ? "true" : void 0,
+					"data-sticky-toolbar": O && at ? "true" : void 0,
 					className: "zui:mb-3",
-					children: [bn ? /* @__PURE__ */ m("div", {
+					children: [Kn ? /* @__PURE__ */ p("div", {
 						"data-slot": "table-toolbar-extra-row",
 						className: "zui:mb-2",
-						children: Cn
-					}) : null, /* @__PURE__ */ m(ee, {
+						children: Yn
+					}) : null, /* @__PURE__ */ p(ee, {
 						"data-slot": "table-controls",
 						searchSlot: "table-search-input",
 						actionsSlot: "table-add-action",
-						inlineActionsOnMobile: vn,
-						search: z ? {
-							value: Pt,
-							onChange: Lt,
-							placeholder: D.common.searchPlaceholder,
-							ariaLabel: D.table.searchAriaLabel,
-							disabled: U
+						inlineActionsOnMobile: Wn,
+						search: L ? {
+							value: Zt,
+							onChange: en,
+							placeholder: C.common.searchPlaceholder,
+							ariaLabel: C.table.searchAriaLabel,
+							disabled: V
 						} : void 0,
-						leading: xn ? Cn : void 0,
-						actions: Q || yn || pn ? /* @__PURE__ */ h(p, { children: [Q ? /* @__PURE__ */ m(l, {
-							"data-slot": "table-sort-button",
-							label: D.table.sortBy,
-							disabled: Z,
-							onClick: () => wt(!0),
-							icon: /* @__PURE__ */ m(Pe, { "aria-hidden": "true" })
-						}) : null, yn ? /* @__PURE__ */ m(l, {
-							"data-slot": "table-toolbar-menu-button",
-							label: D.table.actions,
-							disabled: Z,
-							onClick: () => St(!0),
-							icon: /* @__PURE__ */ m(Fe, { "aria-hidden": "true" })
-						}) : pn ? /* @__PURE__ */ h(p, { children: [
-							Y ? /* @__PURE__ */ m(l, {
-								"data-slot": "table-paging-mode-toggle-button",
-								label: fn,
-								disabled: Z,
-								onClick: $t,
-								icon: m(q === "pagination" ? Re : Ue, {
-									className: fe,
-									"aria-hidden": "true"
-								})
-							}) : null,
-							L ? /* @__PURE__ */ m(l, {
-								"data-slot": "table-action-preview-print-button",
-								label: D.table.printPreview,
-								disabled: Z,
-								onClick: () => void Vt(),
-								icon: /* @__PURE__ */ m(Ie, {})
+						leading: qn ? Yn : void 0,
+						actions: X || Z || Gn || Ln ? /* @__PURE__ */ m(f, { children: [
+							X ? /* @__PURE__ */ p(l, {
+								"data-slot": "table-sort-button",
+								label: C.table.sortBy,
+								disabled: Y,
+								onClick: () => Ft(!0),
+								icon: /* @__PURE__ */ p(He, { "aria-hidden": "true" })
 							}) : null,
-							I ? /* @__PURE__ */ m(l, {
-								"data-slot": "table-action-print-button",
-								label: D.table.print,
-								disabled: Z,
-								onClick: () => void Bt(),
-								icon: /* @__PURE__ */ m(Ve, {})
-							}) : null,
-							N ? /* @__PURE__ */ m(l, {
-								"data-slot": "table-action-import-excel-button",
-								label: D.table.importExcel,
-								disabled: Z,
-								onClick: () => void Ot(),
-								icon: /* @__PURE__ */ m(Le, {})
+							Z ? /* @__PURE__ */ p(l, {
+								"data-slot": "table-filter-button",
+								label: C.table.filterBy,
+								disabled: Y,
+								onClick: () => Lt(!0),
+								icon: /* @__PURE__ */ m("span", {
+									className: "zui:relative zui:inline-flex",
+									children: [/* @__PURE__ */ p(Ke, {
+										fill: nn > 0 ? "currentColor" : "none",
+										"aria-hidden": "true"
+									}), nn > 0 ? /* @__PURE__ */ p("span", {
+										"aria-hidden": "true",
+										"data-slot": "table-filter-active-dot",
+										className: "zui:absolute zui:-end-1 zui:-top-1 zui:size-2 zui:rounded-full zui:bg-[var(--zui-theme-action-primary)] zui:ring-2 zui:ring-[var(--zui-color-surface)]"
+									}) : null]
+								})
 							}) : null,
-							M ? /* @__PURE__ */ m(l, {
-								"data-slot": "table-action-add-button",
-								label: D.common.add,
-								disabled: Z,
-								onClick: () => void Dt(),
-								icon: /* @__PURE__ */ m(Be, {})
-							}) : null
-						] }) : null] }) : void 0
+							Gn ? /* @__PURE__ */ p(l, {
+								"data-slot": "table-toolbar-menu-button",
+								label: C.table.actions,
+								disabled: Y,
+								onClick: () => Nt(!0),
+								icon: /* @__PURE__ */ p(Ue, { "aria-hidden": "true" })
+							}) : Ln ? /* @__PURE__ */ m(f, { children: [
+								mn ? /* @__PURE__ */ p(l, {
+									"data-slot": "table-paging-mode-toggle-button",
+									label: In,
+									disabled: Y,
+									onClick: Cn,
+									icon: p(q === "pagination" ? qe : Qe, {
+										className: ce,
+										"aria-hidden": "true"
+									})
+								}) : null,
+								F ? /* @__PURE__ */ p(l, {
+									"data-slot": "table-action-preview-print-button",
+									label: C.table.printPreview,
+									disabled: Y,
+									onClick: () => void un(),
+									icon: /* @__PURE__ */ p(We, {})
+								}) : null,
+								P ? /* @__PURE__ */ p(l, {
+									"data-slot": "table-action-print-button",
+									label: C.table.print,
+									disabled: Y,
+									onClick: () => void ln(),
+									icon: /* @__PURE__ */ p(Xe, {})
+								}) : null,
+								j ? /* @__PURE__ */ p(l, {
+									"data-slot": "table-action-import-excel-button",
+									label: C.table.importExcel,
+									disabled: Y,
+									onClick: () => void Gt(),
+									icon: /* @__PURE__ */ p(Ge, {})
+								}) : null,
+								xt ? /* @__PURE__ */ p(l, {
+									"data-slot": "table-action-add-button",
+									label: C.common.add,
+									disabled: Y,
+									onClick: () => void Wt(),
+									icon: /* @__PURE__ */ p(Ye, {})
+								}) : null
+							] }) : null
+						] }) : void 0
 					})]
 				}),
-				Q ? /* @__PURE__ */ m(o, {
-					open: Ct,
-					onOpenChange: wt,
-					actions: gn,
-					label: D.table.sortBy
+				X ? /* @__PURE__ */ p(o, {
+					open: Pt,
+					onOpenChange: Ft,
+					actions: Bn,
+					label: C.table.sortBy
 				}) : null,
-				yn ? /* @__PURE__ */ m(o, {
-					open: xt,
-					onOpenChange: St,
-					actions: _n.map((e) => ({
+				Z ? /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p(o, {
+					open: It,
+					onOpenChange: Lt,
+					actions: Hn,
+					label: C.table.filterBy
+				}), $ ? /* @__PURE__ */ p(Ee, {
+					column: $,
+					value: U[$.key],
+					onChange: (e) => an($.key, e),
+					options: W[$.key] ?? [],
+					open: Bt,
+					onOpenChange: Vt
+				}, $.key) : null] }) : null,
+				Gn ? /* @__PURE__ */ p(o, {
+					open: Mt,
+					onOpenChange: Nt,
+					actions: Un.map((e) => ({
 						...e,
-						disabled: Z
+						disabled: Y
 					})),
-					label: D.table.actions
+					label: C.table.actions
 				}) : null
 			] }) : null,
-			/* @__PURE__ */ m("div", {
-				ref: Xt,
+			D ? null : /* @__PURE__ */ p(we, {
+				columns: k,
+				values: U,
+				optionsByColumn: W,
+				onRemove: (e) => an(e, void 0),
+				onSelect: O ? Vn : void 0
+			}),
+			/* @__PURE__ */ p("div", {
+				ref: bn,
 				"data-slot": "table-scroll-viewport",
-				className: n("zui:relative zui:w-full zui:min-w-0 zui:overflow-x-auto zui-radius-xs zui:bg-[var(--zui-color-surface)] zui:shadow-[0_4px_14px_-12px_var(--zui-effect-shadow-ink-35)]", Yt ? "zui:overflow-y-auto" : void 0),
-				style: Zt,
-				onScroll: en,
-				children: /* @__PURE__ */ m("table", {
-					ref: lt,
+				className: n("zui:relative zui:w-full zui:min-w-0 zui:overflow-x-auto zui-radius-xs zui:bg-[var(--zui-color-surface)] zui:shadow-[0_4px_14px_-12px_var(--zui-effect-shadow-ink-35)]", yn ? "zui:overflow-y-auto" : void 0),
+				style: xn,
+				onScroll: wn,
+				children: /* @__PURE__ */ p("table", {
+					ref: yt,
 					"data-slot": "table",
-					className: n(oe({
-						showColumnBorder: tt,
-						showRowBorder: nt
-					}), Ge),
-					dir: ot,
-					children: k ? it : j.length === 0 ? /* @__PURE__ */ m(ge, { children: /* @__PURE__ */ m(ve, { children: /* @__PURE__ */ m(u, {
+					className: n(Ce({
+						showColumnBorder: pt,
+						showRowBorder: mt
+					}), et),
+					dir: T,
+					children: D ? gt : k.length === 0 ? /* @__PURE__ */ p(ke, { children: /* @__PURE__ */ p(Me, { children: /* @__PURE__ */ p(u, {
 						className: "zui:py-7 zui:text-center zui:text-[var(--zui-color-text)]",
-						children: D.table.noColumns
-					}) }) }) : /* @__PURE__ */ h(p, { children: [
-						/* @__PURE__ */ h("colgroup", { children: [
-							B ? /* @__PURE__ */ m("col", { style: gt }) : null,
-							j.map((e) => /* @__PURE__ */ m("col", { style: _t[e.key] }, `col-${e.key}`)),
-							V ? /* @__PURE__ */ m("col", { style: vt }) : null
+						children: C.table.noColumns
+					}) }) }) : /* @__PURE__ */ m(f, { children: [
+						/* @__PURE__ */ m("colgroup", { children: [
+							R ? /* @__PURE__ */ p("col", { style: Dt }) : null,
+							k.map((e) => /* @__PURE__ */ p("col", { style: Ot[e.key] }, `col-${e.key}`)),
+							z ? /* @__PURE__ */ p("col", { style: kt }) : null
 						] }),
-						/* @__PURE__ */ m(_e, { children: /* @__PURE__ */ h(ve, { children: [
-							B ? /* @__PURE__ */ m(d, {
+						/* @__PURE__ */ p(je, { children: /* @__PURE__ */ m(Me, { children: [
+							R ? /* @__PURE__ */ p(Ae, {
 								align: "center",
-								className: n(me, X ? he : void 0),
-								children: D.table.rowNumber
+								className: n(ue, En ? de : void 0),
+								children: C.table.rowNumber
 							}) : null,
-							j.map((e) => {
-								if (!e.sortable) return /* @__PURE__ */ m(d, {
-									align: e.align,
-									className: X ? he : void 0,
-									children: t(e.label, O)
-								}, `head-${e.key}`);
-								let n = K?.sortKey === e.key ? K.direction : void 0;
-								return /* @__PURE__ */ m(d, {
+							k.map((e) => {
+								let n = e.sortable && K?.sortKey === e.key ? K.direction : void 0, r = e.sortable ? /* @__PURE__ */ p(Pe, {
+									columnLabel: e.label,
+									direction: n,
+									onToggle: () => sn(e.key)
+								}) : null, i = e.filterable ? /* @__PURE__ */ p(Te, {
+									column: e,
+									value: U[e.key],
+									onChange: (t) => an(e.key, t),
+									options: W[e.key] ?? []
+								}) : null;
+								return /* @__PURE__ */ p(Ae, {
 									align: e.align,
-									className: X ? he : void 0,
-									"aria-sort": xe(n),
-									children: /* @__PURE__ */ h("span", {
+									className: En ? de : void 0,
+									"aria-sort": e.sortable ? he(n) : void 0,
+									children: e.sortable || e.filterable ? /* @__PURE__ */ m("span", {
 										className: "zui:inline-flex zui:items-center zui:gap-2",
-										children: [t(e.label, O), /* @__PURE__ */ m(De, {
-											columnLabel: e.label,
-											direction: n,
-											onToggle: () => Rt(e.key)
+										children: [t(e.label, w), /* @__PURE__ */ m("span", {
+											className: "zui:inline-flex zui:items-center",
+											children: [T === "rtl" ? r : i, T === "rtl" ? i : r]
 										})]
-									})
+									}) : t(e.label, w)
 								}, `head-${e.key}`);
 							}),
-							V ? /* @__PURE__ */ m(d, {
+							z ? /* @__PURE__ */ p(Ae, {
 								align: "center",
-								className: n(ue, de, X ? he : void 0),
-								children: D.table.actions
+								className: n(oe, se, En ? de : void 0),
+								children: C.table.actions
 							}) : null
 						] }) }),
-						/* @__PURE__ */ m(ge, { children: rn ? /* @__PURE__ */ m(Ee, {
-							count: nn,
+						/* @__PURE__ */ p(ke, { children: On ? /* @__PURE__ */ p(Ne, {
+							count: Dn,
 							keyPrefix: "loading",
-							showRowNumbers: B,
-							columns: j,
-							actionsCount: dn
-						}) : J.length === 0 ? /* @__PURE__ */ m(se, {
-							colSpan: j.length + +!!V + +!!B,
-							showSearchInput: z,
-							normalizedSearchTerm: Ft
-						}) : /* @__PURE__ */ h(p, { children: [J.map(({ row: e, rowIndex: r, rowId: i }, o) => {
-							let s = i === void 0 ? `row-${r}` : `row-id-${String(i)}`, ee = Gt ? (Ht - 1) * Wt + o + 1 : o + 1;
-							return /* @__PURE__ */ h(ve, { children: [
-								B ? /* @__PURE__ */ m(u, {
+							showRowNumbers: R,
+							columns: k,
+							actionsCount: Fn
+						}) : J.length === 0 ? /* @__PURE__ */ p(De, {
+							colSpan: k.length + +!!z + +!!R,
+							showSearchInput: L,
+							normalizedSearchTerm: Qt,
+							hasActiveFilters: nn > 0,
+							onClearFilters: on
+						}) : /* @__PURE__ */ m(f, { children: [J.map(({ row: e, rowIndex: r, rowId: i }, o) => {
+							let s = i === void 0 ? `row-${r}` : `row-id-${String(i)}`, ee = hn ? (dn - 1) * pn + o + 1 : o + 1;
+							return /* @__PURE__ */ m(Me, { children: [
+								R ? /* @__PURE__ */ p(u, {
 									align: "center",
-									className: me,
-									"data-label": D.table.rowNumber,
-									children: t(String(ee), O)
+									className: ue,
+									"data-label": C.table.rowNumber,
+									children: t(String(ee), w)
 								}) : null,
-								j.map((n) => {
+								k.map((n) => {
 									let a = `cell-${n.key}-${s}`;
 									if (n.viewType === "select") {
-										let o = yt[n.key] ?? [], s = e[n.key], c = typeof s == "string" || typeof s == "number" ? String(s) : "";
-										return /* @__PURE__ */ m(u, {
+										let o = At[n.key] ?? [], s = e[n.key], c = typeof s == "string" || typeof s == "number" ? String(s) : "";
+										return /* @__PURE__ */ p(u, {
 											align: n.align,
-											"data-label": t(n.label, O),
-											children: /* @__PURE__ */ m(ie, {
-												disabled: U || o.length === 0 && !n.optionsSource,
-												placeholder: we(n),
+											"data-label": t(n.label, w),
+											children: /* @__PURE__ */ p(ie, {
+												disabled: V || o.length === 0 && !n.optionsSource,
+												placeholder: be(n),
 												options: o,
 												remoteOptions: n.optionsSource,
 												value: c,
 												onValueChange: (t) => {
 													let a = Array.isArray(t) ? t[0] ?? "" : t;
-													Mt(e, r, i, n.key, a);
+													Yt(e, r, i, n.key, a);
 												}
 											})
 										}, a);
 									}
-									return /* @__PURE__ */ m(u, {
+									return /* @__PURE__ */ p(u, {
 										align: n.align,
-										"data-label": t(n.label, O),
-										children: ye(e[n.key], n, st)
+										"data-label": t(n.label, w),
+										children: fe(e[n.key], n, E)
 									}, a);
 								}),
-								V ? /* @__PURE__ */ m(u, {
+								z ? /* @__PURE__ */ p(u, {
 									align: "center",
 									"data-cell": "actions",
-									className: n(ue, de),
-									children: A ? /* @__PURE__ */ m(a, {
+									className: n(oe, se),
+									children: O ? /* @__PURE__ */ p(a, {
 										"data-slot": "table-row-actions-button",
 										kind: "cancel",
 										fullWidth: !0,
-										label: D.table.actions,
-										disabled: U,
-										onClick: () => Nt(e, r, i)
-									}) : /* @__PURE__ */ h("div", {
+										label: C.table.actions,
+										disabled: V,
+										onClick: () => Xt(e, r, i)
+									}) : /* @__PURE__ */ m("div", {
 										"data-slot": "table-row-actions",
 										className: "zui:flex zui:items-center zui:justify-center zui:gap-0.5",
 										children: [
-											P ? /* @__PURE__ */ m(c, {
+											M ? /* @__PURE__ */ p(c, {
 												"data-slot": "table-action-edit-button",
-												label: D.common.edit,
-												icon: /* @__PURE__ */ m(ze, {
-													className: le,
+												label: C.common.edit,
+												icon: /* @__PURE__ */ p(Je, {
+													className: ae,
 													"aria-hidden": "true"
 												}),
-												disabled: U,
-												className: n(pe, "zui:text-[var(--zui-theme-text-primary)]"),
-												onClick: () => void kt(e, r, i)
+												disabled: V,
+												className: n(le, "zui:text-[var(--zui-theme-text-primary)]"),
+												onClick: () => void Kt(e, r, i)
 											}) : null,
-											R.map((t, a) => /* @__PURE__ */ m(c, {
+											I.map((t, a) => /* @__PURE__ */ p(c, {
 												"data-slot": "table-action-custom-button",
 												label: t.tooltip,
 												icon: t.icon,
-												disabled: U,
-												className: n(pe, "zui:text-[var(--zui-theme-text-primary)]"),
-												onClick: () => void jt(t, e, r, i)
+												disabled: V,
+												className: n(le, "zui:text-[var(--zui-theme-text-primary)]"),
+												onClick: () => void Jt(t, e, r, i)
 											}, `${t.tooltip}-${a}`)),
-											F ? /* @__PURE__ */ m(c, {
+											N ? /* @__PURE__ */ p(c, {
 												"data-slot": "table-action-delete-button",
-												label: D.common.delete,
-												icon: /* @__PURE__ */ m(We, {
-													className: le,
+												label: C.common.delete,
+												icon: /* @__PURE__ */ p($e, {
+													className: ae,
 													"aria-hidden": "true"
 												}),
-												disabled: U,
-												className: n(pe, "zui:text-[var(--zui-theme-status-danger)]"),
-												onClick: () => void At(e, r, i)
+												disabled: V,
+												className: n(le, "zui:text-[var(--zui-theme-status-danger)]"),
+												onClick: () => void qt(e, r, i)
 											}) : null
 										]
 									})
 								}) : null
 							] }, s);
-						}), an ? /* @__PURE__ */ m(Ee, {
-							count: un,
+						}), kn ? /* @__PURE__ */ p(Ne, {
+							count: Pn,
 							keyPrefix: "infinite-loading",
-							showRowNumbers: B,
-							columns: j,
-							actionsCount: dn
+							showRowNumbers: R,
+							columns: k,
+							actionsCount: Fn
 						}) : null] }) })
 					] })
 				})
 			}),
-			A && V ? /* @__PURE__ */ m(o, {
-				open: Tt.open,
-				onOpenChange: (e) => Et((t) => ({
+			O && z ? /* @__PURE__ */ p(o, {
+				open: Ht.open,
+				onOpenChange: (e) => Ut((t) => ({
 					...t,
 					open: e
 				})),
-				actions: Tt.actions,
-				label: D.table.actions
+				actions: Ht.actions,
+				label: C.table.actions
 			}) : null,
-			/* @__PURE__ */ m(ce, {
-				shouldRenderInfiniteMode: Kt,
-				shouldShowInfiniteLoadingStatus: sn,
-				shouldShowInfiniteReadyStatus: cn,
-				shouldShowInfiniteCompletedStatus: ln,
-				shouldRenderPagination: Gt,
-				loading: g,
-				isRowActionBusy: U,
-				currentPage: Ht,
-				totalPages: Ut,
-				onPageChange: Qt
+			/* @__PURE__ */ p(Oe, {
+				shouldRenderInfiniteMode: gn,
+				shouldShowInfiniteLoadingStatus: jn,
+				shouldShowInfiniteReadyStatus: Mn,
+				shouldShowInfiniteCompletedStatus: Nn,
+				shouldRenderPagination: hn,
+				loading: h,
+				isRowActionBusy: V,
+				currentPage: dn,
+				totalPages: fn,
+				onPageChange: Sn
 			})
 		]
 	});
 });
-Ge.displayName = "Table";
+et.displayName = "Table";
 //#endregion
-export { Ge as default };
+export { et as default };