@cascivo/react 0.16.0 → 0.17.0

package/dist/data-table/data-table.js

@@ -4,70 +4,67 @@ import { Button as e } from "../button/button.js";
 import { Checkbox as t } from "../checkbox/checkbox.js";
 import n from "./data-table.module.js";
 import { Fragment as r, useId as i, useRef as a } from "react";
-import { batch as o, cn as s, useComputed as c, useSignal as l, useSignalEffect as ee, useSignals as te } from "@cascivo/core";
-import { builtin as u, t as d } from "@cascivo/i18n";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { batch as o, cn as s, useComputed as c, useControllableSignal as l, useSignal as u, useSignalEffect as ee, useSignals as te } from "@cascivo/core";
+import { builtin as d, t as f } from "@cascivo/i18n";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
 import { flushSync as ne } from "react-dom";
 //#region ../components/src/data-table/data-table.tsx
-function m(e, t) {
+function h(e, t) {
 	return e[t];
 }
 function re(e, t) {
 	return typeof e == "number" && typeof t == "number" ? e - t : String(e ?? "").localeCompare(String(t ?? ""));
 }
-function h({ columns: h, rows: g, getRowId: _, sort: v, defaultSort: ie, sortMode: ae = "client", onSortChange: oe, searchable: se = !1, pagination: y, selection: b, batchActions: x, renderExpandedRow: S, density: ce = "normal", zebra: le = !1, stickyHeader: ue = !1, loading: C = !1, emptyState: de, title: w, description: T, labels: E, className: fe, virtualized: D = !1, rowHeight: O = 40, windowSize: pe = 20, overscan: me = 3 }) {
+function g({ columns: g, rows: ie, getRowId: _, sort: ae, defaultSort: oe, sortMode: se = "client", onSortChange: ce, searchable: v = !1, pagination: y, selection: b, batchActions: x, renderExpandedRow: S, density: le = "normal", zebra: ue = !1, stickyHeader: de = !1, loading: C = !1, emptyState: fe, title: w, description: T, labels: E, className: pe, virtualized: D = !1, rowHeight: O = 40, windowSize: me = 20, overscan: he = 3 }) {
 	te();
-	let he = i(), k = {
-		search: E?.search ?? d(u.dataTable.search),
-		empty: E?.empty ?? d(u.dataTable.empty),
-		selectAll: E?.selectAll ?? d(u.dataTable.selectAll),
-		selectRow: E?.selectRow ?? d(u.dataTable.selectRow),
-		itemsSelected: (e) => E?.itemsSelected?.(e) ?? d(u.dataTable.itemsSelected, { count: e }),
-		expandRow: E?.expandRow ?? d(u.dataTable.expandRow),
-		previousPage: E?.previousPage ?? d(u.dataTable.previousPage),
-		nextPage: E?.nextPage ?? d(u.dataTable.nextPage)
-	}, ge = l(g);
-	ge.value = g;
-	let _e = l(h);
-	_e.value = h;
-	let A = l(v ?? ie);
-	v !== void 0 && (A.value = v);
-	let j = l(b?.selected ?? []);
-	b?.selected !== void 0 && (j.value = b.selected);
-	let M = l(""), N = l(1), P = l(y?.pageSize ?? 0), F = l(/* @__PURE__ */ new Set()), I = a(null), L = l(0);
+	let k = i(), A = {
+		search: E?.search ?? f(d.dataTable.search),
+		empty: E?.empty ?? f(d.dataTable.empty),
+		selectAll: E?.selectAll ?? f(d.dataTable.selectAll),
+		selectRow: E?.selectRow ?? f(d.dataTable.selectRow),
+		itemsSelected: (e) => E?.itemsSelected?.(e) ?? f(d.dataTable.itemsSelected, { count: e }),
+		expandRow: E?.expandRow ?? f(d.dataTable.expandRow),
+		previousPage: E?.previousPage ?? f(d.dataTable.previousPage),
+		nextPage: E?.nextPage ?? f(d.dataTable.nextPage)
+	}, [ge] = l({ value: ie }), [_e] = l({ value: g }), [j, ve] = l({
+		value: ae,
+		defaultValue: oe
+	}), M = u([]), N = b?.selected ?? M.value, P = (e) => {
+		b?.selected === void 0 && (M.value = e), b?.onChange?.(e);
+	}, F = u(""), I = u(1), L = u(y?.pageSize ?? 0), R = u(/* @__PURE__ */ new Set()), z = a(null), B = u(0);
 	ee(() => {
 		if (!D) return;
-		let e = I.current;
+		let e = z.current;
 		if (!e) return;
 		let t = () => {
 			ne(() => {
-				L.value = e.scrollTop;
+				B.value = e.scrollTop;
 			});
 		};
 		return e.addEventListener("scroll", t, { passive: !0 }), () => e.removeEventListener("scroll", t);
 	});
-	let R = c(() => ge.value.map((e, t) => ({
+	let V = c(() => ge.value.map((e, t) => ({
 		row: e,
 		id: _ ? _(e) : String(t)
-	}))), z = c(() => {
-		let e = M.value.trim().toLowerCase();
-		if (!e) return R.value;
+	}))), H = c(() => {
+		let e = F.value.trim().toLowerCase();
+		if (!e) return V.value;
 		let t = _e.value;
-		return R.value.filter((n) => t.some((t) => String(m(n.row, t.key) ?? "").toLowerCase().includes(e)));
-	}), B = c(() => {
-		let e = A.value;
-		if (!e || ae === "server") return z.value;
-		let t = z.value.map((e, t) => [e, t]);
+		return V.value.filter((n) => t.some((t) => String(h(n.row, t.key) ?? "").toLowerCase().includes(e)));
+	}), U = c(() => {
+		let e = j.value;
+		if (!e || se === "server") return H.value;
+		let t = H.value.map((e, t) => [e, t]);
 		return t.sort((t, n) => {
-			let r = re(m(t[0].row, e.key), m(n[0].row, e.key));
+			let r = re(h(t[0].row, e.key), h(n[0].row, e.key));
 			return e.direction === "desc" && (r = -r), r === 0 ? t[1] - n[1] : r;
 		}), t.map(([e]) => e);
-	}), ve = c(() => y ? Math.max(1, Math.ceil(z.value.length / P.value)) : 1), V = c(() => Math.min(N.value, ve.value)), H = c(() => {
-		if (!y) return B.value;
-		let e = (V.value - 1) * P.value;
-		return B.value.slice(e, e + P.value);
-	}), U = c(() => D ? Math.floor(L.value / O) : 0), ye = c(() => D ? Math.min(U.value + pe + me * 2, H.value.length) : H.value.length), be = c(() => D ? H.value.slice(U.value, ye.value) : H.value), xe = (e) => {
-		let t = A.value, n;
+	}), ye = c(() => y ? Math.max(1, Math.ceil(H.value.length / L.value)) : 1), W = c(() => Math.min(I.value, ye.value)), G = c(() => {
+		if (!y) return U.value;
+		let e = (W.value - 1) * L.value;
+		return U.value.slice(e, e + L.value);
+	}), K = c(() => D ? Math.floor(B.value / O) : 0), be = c(() => D ? Math.min(K.value + me + he * 2, G.value.length) : G.value.length), xe = c(() => D ? G.value.slice(K.value, be.value) : G.value), Se = (e) => {
+		let t = j.value, n;
 		n = !t || t.key !== e ? {
 			key: e,
 			direction: "asc"
@@ -75,9 +72,9 @@ function h({ columns: h, rows: g, getRowId: _, sort: v, defaultSort: ie, sortMod
 			key: e,
 			direction: "desc"
 		} : void 0, o(() => {
-			v === void 0 && (A.value = n), N.value = 1;
-		}), oe?.(n);
-	}, Se = (e) => {
+			ve(n), I.value = 1;
+		}), ce?.(n);
+	}, Ce = (e) => {
 		if (![
 			"ArrowUp",
 			"ArrowDown",
@@ -99,194 +96,192 @@ function h({ columns: h, rows: g, getRowId: _, sort: v, defaultSort: ie, sortMod
 			}
 		}
 		a?.focus();
-	}, W = (e) => {
-		b?.selected === void 0 && (j.value = e), b?.onChange?.(e);
-	}, Ce = (e) => {
-		let t = j.value;
-		b?.mode === "single" ? W(t.includes(e) ? [] : [e]) : W(t.includes(e) ? t.filter((t) => t !== e) : [...t, e]);
 	}, we = (e) => {
-		let t = new Set(F.value);
-		t.has(e) ? t.delete(e) : t.add(e), F.value = t;
-	}, G = H.value, K = j.value, Te = F.value, q = G.length > 0 && G.every((e) => K.includes(e.id)), Ee = G.some((e) => K.includes(e.id)), J = be.value, Y = U.value, X = ye.value, De = () => {
-		let e = G.map((e) => e.id);
-		W(q ? K.filter((t) => !e.includes(t)) : [...new Set([...K, ...e])]);
-	}, Z = h.length + +!!b + +!!S, Oe = y && !D && J.length > 0 ? Math.max(0, P.value - J.length) : 0, ke = `${he}-title`, Ae = `${he}-description`, Q = z.value.length, $ = Q === 0 ? 0 : (V.value - 1) * P.value + 1, je = Q === 0 ? 0 : $ + G.length - 1, Me = !!x && x.length > 0 && K.length > 0;
-	return /* @__PURE__ */ p("div", {
-		className: s(n.root, fe),
-		"data-density": ce,
-		"data-zebra": le || void 0,
-		"data-sticky-header": ue || void 0,
+		let t = N;
+		b?.mode === "single" ? P(t.includes(e) ? [] : [e]) : P(t.includes(e) ? t.filter((t) => t !== e) : [...t, e]);
+	}, Te = (e) => {
+		let t = new Set(R.value);
+		t.has(e) ? t.delete(e) : t.add(e), R.value = t;
+	}, q = G.value, Ee = R.value, J = q.length > 0 && q.every((e) => N.includes(e.id)), De = q.some((e) => N.includes(e.id)), Y = xe.value, X = K.value, Oe = be.value, ke = () => {
+		let e = q.map((e) => e.id);
+		P(J ? N.filter((t) => !e.includes(t)) : [...new Set([...N, ...e])]);
+	}, Z = g.length + +!!b + +!!S, Ae = y && !D && Y.length > 0 ? Math.max(0, L.value - Y.length) : 0, je = `${k}-title`, Me = `${k}-description`, Q = H.value.length, $ = Q === 0 ? 0 : (W.value - 1) * L.value + 1, Ne = Q === 0 ? 0 : $ + q.length - 1, Pe = !!x && x.length > 0 && N.length > 0;
+	return /* @__PURE__ */ m("div", {
+		className: s(n.root, pe),
+		"data-density": le,
+		"data-zebra": ue || void 0,
+		"data-sticky-header": de || void 0,
 		"data-paginated": y ? !0 : void 0,
-		"data-fixed-layout": h.every((e) => e.width !== void 0) || void 0,
+		"data-fixed-layout": g.every((e) => e.width !== void 0) || void 0,
 		children: [
-			/* @__PURE__ */ f("span", {
+			/* @__PURE__ */ p("span", {
 				"aria-live": "polite",
 				className: n.srOnly,
-				children: j.value.length > 0 ? k.itemsSelected(j.value.length) : ""
+				children: N.length > 0 ? A.itemsSelected(N.length) : ""
 			}),
-			(w !== void 0 || T !== void 0 || se) && /* @__PURE__ */ p("div", {
+			(w !== void 0 || T !== void 0 || v) && /* @__PURE__ */ m("div", {
 				className: n.toolbar,
-				children: [(w !== void 0 || T !== void 0) && /* @__PURE__ */ p("div", {
+				children: [(w !== void 0 || T !== void 0) && /* @__PURE__ */ m("div", {
 					className: n.heading,
-					children: [w !== void 0 && /* @__PURE__ */ f("div", {
-						id: ke,
+					children: [w !== void 0 && /* @__PURE__ */ p("div", {
+						id: je,
 						className: n.title,
 						children: w
-					}), T !== void 0 && /* @__PURE__ */ f("div", {
-						id: Ae,
+					}), T !== void 0 && /* @__PURE__ */ p("div", {
+						id: Me,
 						className: n.description,
 						children: T
 					})]
-				}), se && /* @__PURE__ */ f("input", {
+				}), v && /* @__PURE__ */ p("input", {
 					type: "search",
 					className: n.search,
-					"aria-label": k.search,
-					placeholder: k.search,
-					value: M.value,
+					"aria-label": A.search,
+					placeholder: A.search,
+					value: F.value,
 					onChange: (e) => {
-						M.value = e.target.value, N.value = 1;
+						F.value = e.target.value, I.value = 1;
 					}
 				})]
 			}),
-			Me && /* @__PURE__ */ p("div", {
+			Pe && /* @__PURE__ */ m("div", {
 				className: n.batchBar,
-				children: [/* @__PURE__ */ f("span", {
+				children: [/* @__PURE__ */ p("span", {
 					className: n.batchCount,
-					children: k.itemsSelected(K.length)
-				}), /* @__PURE__ */ f("div", {
+					children: A.itemsSelected(N.length)
+				}), /* @__PURE__ */ p("div", {
 					className: n.batchActions,
-					children: x.map((t, n) => /* @__PURE__ */ f(e, {
+					children: x.map((t, n) => /* @__PURE__ */ p(e, {
 						size: "sm",
 						variant: "secondary",
-						onClick: () => t.onClick(K),
+						onClick: () => t.onClick(N),
 						children: t.label
 					}, t.id ?? `${n}-${t.label}`))
 				})]
 			}),
-			/* @__PURE__ */ f("div", {
-				ref: D ? I : void 0,
+			/* @__PURE__ */ p("div", {
+				ref: D ? z : void 0,
 				className: s(n.scroller, D && n.scrollerVirtualized),
-				children: /* @__PURE__ */ p("table", {
+				children: /* @__PURE__ */ m("table", {
 					className: n.table,
-					"aria-labelledby": w === void 0 ? void 0 : ke,
-					"aria-describedby": T === void 0 ? void 0 : Ae,
+					"aria-labelledby": w === void 0 ? void 0 : je,
+					"aria-describedby": T === void 0 ? void 0 : Me,
 					"aria-busy": C || void 0,
-					"aria-rowcount": D ? G.length : void 0,
-					onKeyDown: Se,
+					"aria-rowcount": D ? q.length : void 0,
+					onKeyDown: Ce,
 					children: [
-						/* @__PURE__ */ p("colgroup", { children: [
-							S && /* @__PURE__ */ f("col", { className: n.controlCol }),
-							b && /* @__PURE__ */ f("col", { className: n.controlCol }),
-							h.map((e) => /* @__PURE__ */ f("col", { style: e.width !== void 0 || e.minWidth !== void 0 ? {
+						/* @__PURE__ */ m("colgroup", { children: [
+							S && /* @__PURE__ */ p("col", { className: n.controlCol }),
+							b && /* @__PURE__ */ p("col", { className: n.controlCol }),
+							g.map((e) => /* @__PURE__ */ p("col", { style: e.width !== void 0 || e.minWidth !== void 0 ? {
 								...e.width === void 0 ? {} : { width: e.width },
 								...e.minWidth === void 0 ? {} : { minWidth: e.minWidth }
 							} : void 0 }, e.key))
 						] }),
-						/* @__PURE__ */ f("thead", { children: /* @__PURE__ */ p("tr", { children: [
-							S && /* @__PURE__ */ f("th", {
+						/* @__PURE__ */ p("thead", { children: /* @__PURE__ */ m("tr", { children: [
+							S && /* @__PURE__ */ p("th", {
 								scope: "col",
 								className: n.controlCell,
-								children: /* @__PURE__ */ f("span", {
+								children: /* @__PURE__ */ p("span", {
 									className: n.srOnly,
-									children: k.expandRow
+									children: A.expandRow
 								})
 							}),
-							b && /* @__PURE__ */ f("th", {
+							b && /* @__PURE__ */ p("th", {
 								scope: "col",
 								className: n.controlCell,
-								children: b.mode === "multi" ? /* @__PURE__ */ f(t, {
-									"aria-label": k.selectAll,
-									checked: q,
-									indeterminate: Ee && !q,
-									onChange: De
-								}) : /* @__PURE__ */ f("span", {
+								children: b.mode === "multi" ? /* @__PURE__ */ p(t, {
+									"aria-label": A.selectAll,
+									checked: J,
+									indeterminate: De && !J,
+									onChange: ke
+								}) : /* @__PURE__ */ p("span", {
 									className: n.srOnly,
-									children: k.selectRow
+									children: A.selectRow
 								})
 							}),
-							h.map((e) => {
-								let t = A.value?.key === e.key ? A.value.direction : void 0, r = t === "asc" ? "ascending" : t === "desc" ? "descending" : "none";
-								return /* @__PURE__ */ f("th", {
+							g.map((e) => {
+								let t = j.value?.key === e.key ? j.value.direction : void 0, r = t === "asc" ? "ascending" : t === "desc" ? "descending" : "none";
+								return /* @__PURE__ */ p("th", {
 									scope: "col",
 									"data-align": e.align ?? "start",
 									"data-sized": e.width !== void 0 || void 0,
 									"aria-sort": e.sortable ? r : void 0,
-									children: e.sortable ? /* @__PURE__ */ f("button", {
+									children: e.sortable ? /* @__PURE__ */ p("button", {
 										type: "button",
 										className: n.sortButton,
 										"data-state": r,
-										onClick: () => xe(e.key),
+										onClick: () => Se(e.key),
 										children: e.header
 									}) : e.header
 								}, e.key);
 							})
 						] }) }),
-						/* @__PURE__ */ p("tbody", { children: [
-							C && Array.from({ length: 5 }, (e, t) => /* @__PURE__ */ f("tr", {
+						/* @__PURE__ */ m("tbody", { children: [
+							C && Array.from({ length: 5 }, (e, t) => /* @__PURE__ */ p("tr", {
 								className: n.row,
-								children: Array.from({ length: Z }, (e, t) => /* @__PURE__ */ f("td", { children: /* @__PURE__ */ f("span", {
+								children: Array.from({ length: Z }, (e, t) => /* @__PURE__ */ p("td", { children: /* @__PURE__ */ p("span", {
 									className: n.shimmer,
 									"aria-hidden": "true"
 								}) }, t))
 							}, t)),
-							!C && G.length === 0 && /* @__PURE__ */ f("tr", {
+							!C && q.length === 0 && /* @__PURE__ */ p("tr", {
 								"data-empty-row": !0,
-								children: /* @__PURE__ */ f("td", {
+								children: /* @__PURE__ */ p("td", {
 									colSpan: Z,
 									className: n.emptyCell,
-									children: de ?? k.empty
+									children: fe ?? A.empty
 								})
 							}),
-							!C && D && Y > 0 && /* @__PURE__ */ f("tr", {
+							!C && D && X > 0 && /* @__PURE__ */ p("tr", {
 								"aria-hidden": "true",
-								style: { height: Y * O }
+								style: { height: X * O }
 							}),
-							!C && J.map((e, i) => {
-								let a = D ? Y + i : i, o = K.includes(e.id), s = Te.has(e.id);
-								return /* @__PURE__ */ p(r, { children: [/* @__PURE__ */ p("tr", {
+							!C && Y.map((e, i) => {
+								let a = D ? X + i : i, o = N.includes(e.id), s = Ee.has(e.id);
+								return /* @__PURE__ */ m(r, { children: [/* @__PURE__ */ m("tr", {
 									className: n.row,
 									"data-parity": a % 2 == 0 ? "even" : "odd",
 									"data-state": o ? "selected" : void 0,
-									"aria-rowindex": D ? Y + i + 1 : void 0,
+									"aria-rowindex": D ? X + i + 1 : void 0,
 									children: [
-										S && /* @__PURE__ */ f("td", {
+										S && /* @__PURE__ */ p("td", {
 											className: n.controlCell,
-											children: /* @__PURE__ */ f("button", {
+											children: /* @__PURE__ */ p("button", {
 												type: "button",
 												className: n.expandButton,
 												"aria-expanded": s,
-												"aria-label": k.expandRow,
+												"aria-label": A.expandRow,
 												"data-state": s ? "open" : "closed",
-												onClick: () => we(e.id),
-												children: /* @__PURE__ */ f("span", {
+												onClick: () => Te(e.id),
+												children: /* @__PURE__ */ p("span", {
 													className: n.chevron,
 													"aria-hidden": "true"
 												})
 											})
 										}),
-										b && /* @__PURE__ */ f("td", {
+										b && /* @__PURE__ */ p("td", {
 											className: n.controlCell,
-											children: /* @__PURE__ */ f(t, {
-												"aria-label": k.selectRow,
+											children: /* @__PURE__ */ p(t, {
+												"aria-label": A.selectRow,
 												checked: o,
-												onChange: () => Ce(e.id)
+												onChange: () => we(e.id)
 											})
 										}),
-										h.map((t) => /* @__PURE__ */ f("td", {
+										g.map((t) => /* @__PURE__ */ p("td", {
 											"data-align": t.align ?? "start",
 											"data-sized": t.width !== void 0 || void 0,
-											children: t.render ? t.render(e.row) : String(m(e.row, t.key) ?? "")
+											children: t.render ? t.render(e.row) : String(h(e.row, t.key) ?? "")
 										}, t.key))
 									]
-								}), S && /* @__PURE__ */ f("tr", {
+								}), S && /* @__PURE__ */ p("tr", {
 									className: n.expansionRow,
 									"data-state": s ? "open" : "closed",
-									children: /* @__PURE__ */ f("td", {
+									children: /* @__PURE__ */ p("td", {
 										colSpan: Z,
-										children: /* @__PURE__ */ f("div", {
+										children: /* @__PURE__ */ p("div", {
 											className: n.expansionGrid,
 											"data-state": s ? "open" : "closed",
-											children: /* @__PURE__ */ f("div", {
+											children: /* @__PURE__ */ p("div", {
 												className: n.expansionInner,
 												children: S(e.row)
 											})
@@ -294,17 +289,17 @@ function h({ columns: h, rows: g, getRowId: _, sort: v, defaultSort: ie, sortMod
 									})
 								})] }, e.id);
 							}),
-							!C && D && X < G.length && /* @__PURE__ */ f("tr", {
+							!C && D && Oe < q.length && /* @__PURE__ */ p("tr", {
 								"aria-hidden": "true",
-								style: { height: (G.length - X) * O }
+								style: { height: (q.length - Oe) * O }
 							}),
-							Oe > 0 && /* @__PURE__ */ f("tr", {
+							Ae > 0 && /* @__PURE__ */ p("tr", {
 								"aria-hidden": "true",
 								"data-filler-row": !0,
-								children: /* @__PURE__ */ f("td", {
+								children: /* @__PURE__ */ p("td", {
 									colSpan: Z,
 									style: {
-										blockSize: `calc(var(--_row-height) * ${Oe})`,
+										blockSize: `calc(var(--_row-height) * ${Ae})`,
 										padding: 0
 									}
 								})
@@ -313,55 +308,55 @@ function h({ columns: h, rows: g, getRowId: _, sort: v, defaultSort: ie, sortMod
 					]
 				})
 			}),
-			y && /* @__PURE__ */ p("div", {
+			y && /* @__PURE__ */ m("div", {
 				className: n.footer,
 				children: [
-					y.pageSizeOptions && /* @__PURE__ */ p("label", {
+					y.pageSizeOptions && /* @__PURE__ */ m("label", {
 						className: n.pageSize,
-						children: [/* @__PURE__ */ f("span", { children: "Rows per page" }), /* @__PURE__ */ f("select", {
-							value: P.value,
+						children: [/* @__PURE__ */ p("span", { children: "Rows per page" }), /* @__PURE__ */ p("select", {
+							value: L.value,
 							onChange: (e) => {
-								P.value = Number(e.target.value), N.value = 1;
+								L.value = Number(e.target.value), I.value = 1;
 							},
-							children: y.pageSizeOptions.map((e) => /* @__PURE__ */ f("option", {
+							children: y.pageSizeOptions.map((e) => /* @__PURE__ */ p("option", {
 								value: e,
 								children: e
 							}, e))
 						})]
 					}),
-					/* @__PURE__ */ p("span", {
+					/* @__PURE__ */ m("span", {
 						className: n.range,
 						children: [
 							$,
 							"–",
-							je,
+							Ne,
 							" of ",
 							Q
 						]
 					}),
-					/* @__PURE__ */ p("div", {
+					/* @__PURE__ */ m("div", {
 						className: n.pageButtons,
-						children: [/* @__PURE__ */ f("button", {
+						children: [/* @__PURE__ */ p("button", {
 							type: "button",
 							className: n.pageButton,
-							"aria-label": k.previousPage,
-							disabled: V.value <= 1,
+							"aria-label": A.previousPage,
+							disabled: W.value <= 1,
 							onClick: () => {
-								N.value = V.value - 1;
+								I.value = W.value - 1;
 							},
-							children: /* @__PURE__ */ f("span", {
+							children: /* @__PURE__ */ p("span", {
 								"aria-hidden": "true",
 								children: "‹"
 							})
-						}), /* @__PURE__ */ f("button", {
+						}), /* @__PURE__ */ p("button", {
 							type: "button",
 							className: n.pageButton,
-							"aria-label": k.nextPage,
-							disabled: V.value >= ve.value,
+							"aria-label": A.nextPage,
+							disabled: W.value >= ye.value,
 							onClick: () => {
-								N.value = V.value + 1;
+								I.value = W.value + 1;
 							},
-							children: /* @__PURE__ */ f("span", {
+							children: /* @__PURE__ */ p("span", {
 								"aria-hidden": "true",
 								children: "›"
 							})
@@ -373,4 +368,4 @@ function h({ columns: h, rows: g, getRowId: _, sort: v, defaultSort: ie, sortMod
 	});
 }
 //#endregion
-export { h as DataTable };
+export { g as DataTable };

package/dist/data-table/data-table.module.js

@@ -1,34 +1,34 @@
 import './data-table.css';
 var e = {
-	root: "_root_1wd65_2",
-	toolbar: "_toolbar_1wd65_26",
-	heading: "_heading_1wd65_35",
-	title: "_title_1wd65_41",
-	description: "_description_1wd65_47",
-	search: "_search_1wd65_52",
-	batchBar: "_batchBar_1wd65_79",
-	batchCount: "_batchCount_1wd65_89",
-	batchActions: "_batchActions_1wd65_95",
-	scroller: "_scroller_1wd65_101",
-	scrollerVirtualized: "_scrollerVirtualized_1wd65_111",
-	table: "_table_1wd65_117",
-	row: "_row_1wd65_199",
-	controlCol: "_controlCol_1wd65_205",
-	controlCell: "_controlCell_1wd65_209",
-	sortButton: "_sortButton_1wd65_215",
-	emptyCell: "_emptyCell_1wd65_263",
-	expansionRow: "_expansionRow_1wd65_270",
-	expansionGrid: "_expansionGrid_1wd65_276",
-	expansionInner: "_expansionInner_1wd65_280",
-	expandButton: "_expandButton_1wd65_285",
-	chevron: "_chevron_1wd65_308",
-	shimmer: "_shimmer_1wd65_323",
-	footer: "_footer_1wd65_350",
-	pageSize: "_pageSize_1wd65_360",
-	range: "_range_1wd65_386",
-	pageButtons: "_pageButtons_1wd65_391",
-	pageButton: "_pageButton_1wd65_391",
-	srOnly: "_srOnly_1wd65_432"
+	root: "_root_bwapn_2",
+	toolbar: "_toolbar_bwapn_26",
+	heading: "_heading_bwapn_35",
+	title: "_title_bwapn_41",
+	description: "_description_bwapn_47",
+	search: "_search_bwapn_52",
+	batchBar: "_batchBar_bwapn_79",
+	batchCount: "_batchCount_bwapn_89",
+	batchActions: "_batchActions_bwapn_95",
+	scroller: "_scroller_bwapn_101",
+	scrollerVirtualized: "_scrollerVirtualized_bwapn_111",
+	table: "_table_bwapn_117",
+	row: "_row_bwapn_199",
+	controlCol: "_controlCol_bwapn_219",
+	controlCell: "_controlCell_bwapn_223",
+	sortButton: "_sortButton_bwapn_229",
+	emptyCell: "_emptyCell_bwapn_277",
+	expansionRow: "_expansionRow_bwapn_284",
+	expansionGrid: "_expansionGrid_bwapn_290",
+	expansionInner: "_expansionInner_bwapn_294",
+	expandButton: "_expandButton_bwapn_299",
+	chevron: "_chevron_bwapn_322",
+	shimmer: "_shimmer_bwapn_337",
+	footer: "_footer_bwapn_364",
+	pageSize: "_pageSize_bwapn_374",
+	range: "_range_bwapn_400",
+	pageButtons: "_pageButtons_bwapn_405",
+	pageButton: "_pageButton_bwapn_405",
+	srOnly: "_srOnly_bwapn_446"
 };
 //#endregion
 export { e as default };