haze-ui 1.28.0 → 1.30.0

package/dist/components/DataTable/DataTable.js

@@ -12,18 +12,18 @@ import l from "../Table/TableBody.js";
 import u from "../Table/TableCell.js";
 import ee from "../Empty/Empty.js";
 import te from "../Pagination/Pagination.js";
-import ne from "../DropdownMenu/DropdownMenu.js";
+import ne from "../DropdownMenu/DropdownMenuContent.js";
 import re from "../DropdownMenu/DropdownMenuTrigger.js";
-import ie from "../DropdownMenu/DropdownMenuContent.js";
+import ie from "../DropdownMenu/DropdownMenu.js";
 import ae from "./CellEditor.js";
 import { dataTableFeatures as oe } from "./features.js";
 /* empty css                    */
-import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
 import { Fragment as se, useEffect as ce, useId as le, useMemo as ue, useRef as de, useState as fe } from "react";
-import { isControl as pe, useControl as m, useThru as me, watch as he } from "react-use-control";
-import { useTable as ge } from "@tanstack/react-table";
+import { Fragment as pe, jsx as d, jsxs as f } from "react/jsx-runtime";
+import { isControl as me, useControl as p, useThru as he, watch as ge } from "react-use-control";
+import { useTable as _e } from "@tanstack/react-table";
 //#region src/lib/components/DataTable/DataTable.tsx
-function _e(e, t) {
+function ve(e, t) {
 	let n = {
 		...e,
 		enableSorting: e.enableSorting ?? e.meta?.sortable ?? t.sortable,
@@ -35,34 +35,34 @@ function _e(e, t) {
 	};
 	return "columns" in n && n.columns ? {
 		...n,
-		columns: n.columns.map((e) => _e(e, t))
+		columns: n.columns.map((e) => ve(e, t))
 	} : n;
 }
-function h(e) {
+function m(e) {
 	let t = e.columnDef.header;
 	return typeof t == "string" ? t : e.id;
 }
-function ve(e) {
+function ye(e) {
 	let t = e.meta?.width ?? e.size;
 	return typeof t == "number" ? `${t}px` : t;
 }
-function ye(e) {
+function be(e) {
 	if (e.length === 0) return "0px";
 	let [t] = e;
 	return e.length === 1 && t !== void 0 && !t.includes("(") ? t : `calc(${e.join(" + ")})`;
 }
-function g(e) {
+function h(e) {
 	return e ? {
 		left: e.side === "left" ? e.offset : void 0,
 		right: e.side === "right" ? e.offset : void 0
 	} : void 0;
 }
-var be = "calc(var(--haze-space-3) * 2 + var(--haze-space-5))", xe = "(var(--haze-space-3) * 2 + var(--haze-space-5))", Se = 34, Ce = "haze-DataTable__root", we = "haze-DataTable__scrollArea", Te = "haze-DataTable__stickyScrollArea", Ee = "haze-DataTable__virtualArea", _ = "haze-DataTable__fixedLayout", De = "haze-DataTable__virtualRowTable", v = "haze-DataTable__tableBase", Oe = "haze-DataTable__stickyHead", ke = "haze-DataTable__sortButton", Ae = "haze-DataTable__sortIcon", je = "haze-DataTable__rowHover", Me = "haze-DataTable__rowSelected", Ne = "haze-DataTable__clickableRow", Pe = "haze-DataTable__checkCell", Fe = "haze-DataTable__checkCellCol", y = "haze-DataTable__fixedCell", b = "haze-DataTable__fixedCellSelected", Ie = "haze-DataTable__fixedHeadCell", x = "haze-DataTable__fixedLeftEdge", Le = "haze-DataTable__fixedRightEdge", Re = "haze-DataTable__emptyCell", ze = "haze-DataTable__footer", Be = "haze-DataTable__toolbar", Ve = "haze-DataTable__footerMenu", He = "haze-DataTable__columnsTrigger", Ue = "haze-DataTable__toggleRow", We = "haze-DataTable__resizableHead", Ge = "haze-DataTable__resizeHandle", Ke = "haze-DataTable__expander", qe = "haze-DataTable__expanderIcon", Je = "haze-DataTable__panelCell", Ye = "haze-DataTable__treeIndent", Xe = "haze-DataTable__summaryFoot", Ze = "haze-DataTable__stickyFoot", Qe = "haze-DataTable__editableCell";
+var xe = "calc(var(--haze-space-3) * 2 + var(--haze-space-5))", Se = "(var(--haze-space-3) * 2 + var(--haze-space-5))", Ce = 34, we = "haze-DataTable__root", Te = "haze-DataTable__scrollArea", Ee = "haze-DataTable__stickyScrollArea", De = "haze-DataTable__virtualArea", g = "haze-DataTable__fixedLayout", Oe = "haze-DataTable__virtualRowTable", _ = "haze-DataTable__tableBase", ke = "haze-DataTable__stickyHead", Ae = "haze-DataTable__sortButton", je = "haze-DataTable__sortIcon", Me = "haze-DataTable__rowHover", Ne = "haze-DataTable__rowSelected", Pe = "haze-DataTable__clickableRow", Fe = "haze-DataTable__checkCell", Ie = "haze-DataTable__checkCellCol", v = "haze-DataTable__fixedCell", y = "haze-DataTable__fixedCellSelected", b = "haze-DataTable__fixedHeadCell", x = "haze-DataTable__fixedLeftEdge", Le = "haze-DataTable__fixedRightEdge", Re = "haze-DataTable__emptyCell", ze = "haze-DataTable__footer", Be = "haze-DataTable__toolbar", Ve = "haze-DataTable__footerMenu", He = "haze-DataTable__columnsTrigger", Ue = "haze-DataTable__toggleRow", We = "haze-DataTable__resizableHead", Ge = "haze-DataTable__resizeHandle", Ke = "haze-DataTable__expander", qe = "haze-DataTable__expanderIcon", Je = "haze-DataTable__panelCell", Ye = "haze-DataTable__treeIndent", Xe = "haze-DataTable__summaryFoot", Ze = "haze-DataTable__stickyFoot", Qe = "haze-DataTable__editableCell";
 function S({ columns: S, data: C, sortable: $e = !1, selectable: w = !1, rowSelection: et, sorting: T, pageSize: E, page: D, manual: O = !1, pageCount: tt, onPageChange: nt, onSortChange: rt, loading: k = !1, stickyHeader: it = !1, virtualized: A, getRowId: at, onRowClick: j, empty: ot, resizable: M = !1, expanded: st, getRowCanExpand: N, renderExpandedRow: P, subRowsKey: ct = "subRows", columnVisibility: lt, columnToggle: ut = !1, filterable: F = !1, summary: dt, stickyFooter: ft = !1, editable: pt = !1, onCellEdit: mt, className: ht, ...gt }) {
-	let _t = pe(T), [vt, yt] = m(me(_t ? T : void 0, he((e) => rt?.(e))), _t ? [] : T ?? []), [bt, xt] = m(et, {}), St = pe(D), [Ct, wt, Tt] = m(me(St ? D : void 0, he((e) => nt?.(e))), St ? 1 : D ?? 1), [Et, Dt] = m(st, {}), [Ot, kt] = m(lt, {}), [I, L] = fe(null), At = r(), jt = le(), Mt = i("dataTable"), R = A === !0 || typeof A == "object", z = typeof A == "object" ? A.rowHeight : Se, Nt = typeof A == "object" ? A.overscan : void 0, Pt = E ?? Infinity, Ft = N !== void 0 || P !== void 0, It = N === void 0 && P === void 0 && C.some((e) => {
+	let _t = me(T), [vt, yt] = p(he(_t ? T : void 0, ge((e) => rt?.(e))), _t ? [] : T ?? []), [bt, xt] = p(et, {}), St = me(D), [Ct, wt, Tt] = p(he(St ? D : void 0, ge((e) => nt?.(e))), St ? 1 : D ?? 1), [Et, Dt] = p(st, {}), [Ot, kt] = p(lt, {}), [I, L] = fe(null), At = r(), jt = le(), Mt = i("dataTable"), R = A === !0 || typeof A == "object", z = typeof A == "object" ? A.rowHeight : Ce, Nt = typeof A == "object" ? A.overscan : void 0, Pt = E ?? Infinity, Ft = N !== void 0 || P !== void 0, It = N === void 0 && P === void 0 && C.some((e) => {
 		let t = e[ct];
 		return Array.isArray(t) && t.length > 0;
-	}), Lt = ue(() => S.map((e) => _e(e, {
+	}), Lt = ue(() => S.map((e) => ve(e, {
 		sortable: $e,
 		resizable: M,
 		filterable: F
@@ -71,7 +71,7 @@ function S({ columns: S, data: C, sortable: $e = !1, selectable: w = !1, rowSele
 		$e,
 		M,
 		F
-	]), B = ge({
+	]), B = _e({
 		features: oe,
 		columns: Lt,
 		data: C,
@@ -126,7 +126,7 @@ function S({ columns: S, data: C, sortable: $e = !1, selectable: w = !1, rowSele
 	}, [R, z]);
 	let V = B.getHeaderGroups(), H = B.getLeafHeaders(), Ut = H.length + +!!w, U = B.getRowModel().rows, Wt = B.state.columnSizing, W = H.map((e) => {
 		let t = Wt[e.column.id];
-		return t === void 0 ? ve(e.column.columnDef) : `${t}px`;
+		return t === void 0 ? ye(e.column.columnDef) : `${t}px`;
 	}), Gt = W.some((e) => e !== void 0), Kt = (e, t) => {
 		let n = e.column.columnDef, r = n.minSize ?? 20, i = n.maxSize ?? 2 ** 53 - 1, a = Wt[e.column.id] ?? e.column.getSize(), o = Math.min(Math.max(Math.round(a + t), r), i);
 		B.setColumnSizing((t) => ({
@@ -139,12 +139,12 @@ function S({ columns: S, data: C, sortable: $e = !1, selectable: w = !1, rowSele
 		edge: G[0] !== "left"
 	} : void 0, q = /* @__PURE__ */ new Map();
 	if (!R) {
-		let e = K ? [xe] : [];
+		let e = K ? [Se] : [];
 		H.forEach((t, n) => {
 			if (G[n] !== "left") return;
 			q.set(t.column.id, {
 				side: "left",
-				offset: ye(e),
+				offset: be(e),
 				edge: G[n + 1] !== "left"
 			});
 			let r = W[n];
@@ -156,96 +156,116 @@ function S({ columns: S, data: C, sortable: $e = !1, selectable: w = !1, rowSele
 			if (!n || G[e] !== "right") continue;
 			q.set(n.column.id, {
 				side: "right",
-				offset: ye(t),
+				offset: be(t),
 				edge: G[e - 1] !== "right"
 			});
 			let r = W[e];
 			r && t.push(r);
 		}
 	}
-	let J = R || Gt || M ? /* @__PURE__ */ p("colgroup", { children: [w && /* @__PURE__ */ f("col", { style: { width: be } }), H.map((e, t) => /* @__PURE__ */ f("col", { style: W[t] ? { width: W[t] } : void 0 }, e.id))] }) : void 0, Y = R || Gt || M ? Fe : Pe, qt = j ? (e, t) => {
+	let J = R || Gt || M ? /* @__PURE__ */ f("colgroup", {
+		"data-slot": "colgroup",
+		children: [w && /* @__PURE__ */ d("col", {
+			"data-slot": "col",
+			style: { width: xe }
+		}), H.map((e, t) => /* @__PURE__ */ d("col", {
+			"data-slot": "col",
+			style: W[t] ? { width: W[t] } : void 0
+		}, e.id))]
+	}) : void 0, Y = R || Gt || M ? Ie : Fe, qt = j ? (e, t) => {
 		t.target instanceof Element && t.target.closest("button, input, select, textarea, a") || j(e, t);
-	} : void 0, Jt = /* @__PURE__ */ f(c, {
-		className: it ? Oe : void 0,
-		children: V.map((t, r) => /* @__PURE__ */ p("tr", { children: [w && r === 0 && /* @__PURE__ */ f(u, {
-			as: "th",
-			rowSpan: V.length > 1 ? V.length : void 0,
-			style: g(K),
-			className: e([
-				Y,
-				K && y,
-				K && Ie
-			]),
-			children: /* @__PURE__ */ f("span", {
-				ref: Rt,
-				children: /* @__PURE__ */ f(o, {
-					checked: B.getIsAllRowsSelected(),
-					onChange: (e) => B.toggleAllRowsSelected(e),
-					"aria-label": Mt.selectAll
-				})
-			})
-		}), t.headers.map((t) => {
-			if (t.rowSpan === 0) return null;
-			if (t.isPlaceholder) return /* @__PURE__ */ f(u, {
-				as: "th",
-				children: null
-			}, t.placeholderId ?? t.id);
-			let r = t.column.getIsSorted(), i = t.subHeaders.length === 0 ? q.get(t.column.id) : void 0, a = M && t.subHeaders.length === 0 && t.column.getCanResize();
-			return /* @__PURE__ */ p(u, {
+	} : void 0, Jt = /* @__PURE__ */ d(c, {
+		className: it ? ke : void 0,
+		children: V.map((t, r) => /* @__PURE__ */ f("tr", {
+			"data-slot": "row",
+			children: [w && r === 0 && /* @__PURE__ */ d(u, {
 				as: "th",
-				colSpan: t.colSpan > 1 ? t.colSpan : void 0,
-				rowSpan: t.rowSpan > 1 ? t.rowSpan : void 0,
-				style: g(i),
-				"aria-sort": r === "asc" ? "ascending" : r === "desc" ? "descending" : void 0,
+				"data-slot": "select-cell",
+				rowSpan: V.length > 1 ? V.length : void 0,
+				style: h(K),
 				className: e([
-					i && y,
-					i && Ie,
-					a && We
+					Y,
+					K && v,
+					K && b
 				]),
-				children: [t.column.getCanSort() ? /* @__PURE__ */ p("button", {
-					type: "button",
-					onClick: t.column.getToggleSortingHandler(),
-					className: e([ke]),
-					children: [/* @__PURE__ */ f(B.FlexRender, { header: t }), /* @__PURE__ */ f("span", {
-						"aria-hidden": "true",
+				children: /* @__PURE__ */ d("span", {
+					ref: Rt,
+					children: /* @__PURE__ */ d(o, {
+						checked: B.getIsAllRowsSelected(),
+						onChange: (e) => B.toggleAllRowsSelected(e),
+						"aria-label": Mt.selectAll
+					})
+				})
+			}), t.headers.map((t) => {
+				if (t.rowSpan === 0) return null;
+				if (t.isPlaceholder) return /* @__PURE__ */ d(u, {
+					as: "th",
+					"data-slot": "cell",
+					children: null
+				}, t.placeholderId ?? t.id);
+				let r = t.column.getIsSorted(), i = t.subHeaders.length === 0 ? q.get(t.column.id) : void 0, a = M && t.subHeaders.length === 0 && t.column.getCanResize();
+				return /* @__PURE__ */ f(u, {
+					as: "th",
+					"data-slot": "cell",
+					colSpan: t.colSpan > 1 ? t.colSpan : void 0,
+					rowSpan: t.rowSpan > 1 ? t.rowSpan : void 0,
+					style: h(i),
+					"aria-sort": r === "asc" ? "ascending" : r === "desc" ? "descending" : void 0,
+					className: e([
+						i && v,
+						i && b,
+						a && We
+					]),
+					children: [t.column.getCanSort() ? /* @__PURE__ */ f("button", {
+						type: "button",
+						"data-slot": "sort-button",
+						onClick: t.column.getToggleSortingHandler(),
 						className: e([Ae]),
-						children: r === "asc" ? "↑" : r === "desc" ? "↓" : "↕"
+						children: [/* @__PURE__ */ d(B.FlexRender, { header: t }), /* @__PURE__ */ d("span", {
+							"data-slot": "icon",
+							"aria-hidden": "true",
+							className: e([je]),
+							children: r === "asc" ? "↑" : r === "desc" ? "↓" : "↕"
+						})]
+					}) : /* @__PURE__ */ d(B.FlexRender, { header: t }), a && /* @__PURE__ */ d("div", {
+						role: "separator",
+						"data-slot": "resize-handle",
+						"aria-orientation": "vertical",
+						"aria-label": `Resize ${m(t.column)}`,
+						tabIndex: 0,
+						onMouseDown: (e) => {
+							e.preventDefault(), t.getResizeHandler()(e);
+						},
+						onDoubleClick: () => t.column.resetSize(),
+						onKeyDown: (e) => {
+							if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
+							e.preventDefault();
+							let r = n(e.currentTarget) === "rtl", i = e.key === "ArrowRight" !== r;
+							Kt(t, i ? 5 : -5);
+						},
+						className: e([Ge])
 					})]
-				}) : /* @__PURE__ */ f(B.FlexRender, { header: t }), a && /* @__PURE__ */ f("div", {
-					role: "separator",
-					"aria-orientation": "vertical",
-					"aria-label": `Resize ${h(t.column)}`,
-					tabIndex: 0,
-					onMouseDown: (e) => {
-						e.preventDefault(), t.getResizeHandler()(e);
-					},
-					onDoubleClick: () => t.column.resetSize(),
-					onKeyDown: (e) => {
-						if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
-						e.preventDefault();
-						let r = n(e.currentTarget) === "rtl", i = e.key === "ArrowRight" !== r;
-						Kt(t, i ? 5 : -5);
-					},
-					className: e([Ge])
-				})]
-			}, t.id);
-		})] }, t.id))
-	}), Yt = (e) => `${jt}-${e.replace(/\s+/g, "-")}-panel`, X = (t) => /* @__PURE__ */ p(se, { children: [/* @__PURE__ */ p("tr", {
+				}, t.id);
+			})]
+		}, t.id))
+	}), Yt = (e) => `${jt}-${e.replace(/\s+/g, "-")}-panel`, X = (t) => /* @__PURE__ */ f(se, { children: [/* @__PURE__ */ f("tr", {
+		"data-slot": "row",
 		onClick: qt ? (e) => qt(t.original, e) : void 0,
 		className: e([
-			je,
-			t.getIsSelected() && Me,
-			j && Ne
+			Me,
+			t.getIsSelected() && Ne,
+			j && Pe
 		]),
-		children: [w && /* @__PURE__ */ f(u, {
-			style: g(K),
+		children: [w && /* @__PURE__ */ d(u, {
+			"data-slot": "select-cell",
+			style: h(K),
 			className: e([
 				Y,
-				K && y,
+				K && v,
 				K?.edge && x,
-				t.getIsSelected() && b
+				t.getIsSelected() && y
 			]),
-			children: /* @__PURE__ */ f(o, {
+			children: /* @__PURE__ */ d(o, {
 				checked: t.getIsSelected(),
 				onChange: (e) => t.toggleSelected(e),
 				"aria-label": `Select row ${t.id}`
@@ -256,8 +276,9 @@ function S({ columns: S, data: C, sortable: $e = !1, selectable: w = !1, rowSele
 				let r = n.getValue();
 				Object.is(e, r) || mt?.(t.id, n.column.id, e, r);
 			};
-			return /* @__PURE__ */ f(u, {
-				style: g(i),
+			return /* @__PURE__ */ d(u, {
+				"data-slot": "cell",
+				style: h(i),
 				tabIndex: o ? 0 : void 0,
 				onDoubleClick: o && !s ? () => L({
 					rowId: t.id,
@@ -270,9 +291,9 @@ function S({ columns: S, data: C, sortable: $e = !1, selectable: w = !1, rowSele
 					}));
 				} : void 0,
 				className: e([
-					i && y,
+					i && v,
 					i?.edge && (i.side === "left" ? x : Le),
-					t.getIsSelected() && b,
+					t.getIsSelected() && y,
 					o && Qe
 				]),
 				children: s && o ? typeof a == "function" ? a({
@@ -281,156 +302,203 @@ function S({ columns: S, data: C, sortable: $e = !1, selectable: w = !1, rowSele
 					column: n.column,
 					onSave: c,
 					onCancel: () => L(null)
-				}) : /* @__PURE__ */ f(ae, {
+				}) : /* @__PURE__ */ d(ae, {
 					kind: a === "number" ? "number" : "text",
 					value: n.getValue(),
-					ariaLabel: `Edit ${h(n.column)} in row ${t.id}`,
+					ariaLabel: `Edit ${m(n.column)} in row ${t.id}`,
 					onSave: c,
 					onCancel: () => L(null)
-				}) : /* @__PURE__ */ p(d, { children: [
-					r === 0 && t.depth > 0 && /* @__PURE__ */ f("span", {
+				}) : /* @__PURE__ */ f(pe, { children: [
+					r === 0 && t.depth > 0 && /* @__PURE__ */ d("span", {
 						"aria-hidden": "true",
 						style: { width: `calc(var(--haze-space-4) * ${t.depth})` },
 						className: e([Ye])
 					}),
-					r === 0 && t.getCanExpand() && /* @__PURE__ */ f("button", {
+					r === 0 && t.getCanExpand() && /* @__PURE__ */ d("button", {
 						type: "button",
+						"data-slot": "expand-button",
 						"aria-expanded": t.getIsExpanded(),
 						"aria-controls": P === void 0 ? void 0 : Yt(t.id),
 						"aria-label": t.getIsExpanded() ? `Collapse row ${t.id}` : `Expand row ${t.id}`,
 						onClick: t.getToggleExpandedHandler(),
 						className: e([Ke]),
-						children: /* @__PURE__ */ f("span", {
+						children: /* @__PURE__ */ d("span", {
+							"data-slot": "icon",
 							"aria-hidden": "true",
 							className: e([qe]),
 							children: "▸"
 						})
 					}),
-					/* @__PURE__ */ f(B.FlexRender, { cell: n })
+					/* @__PURE__ */ d(B.FlexRender, { cell: n })
 				] })
 			}, n.id);
 		})]
-	}, t.id), P !== void 0 && t.getCanExpand() && t.getIsExpanded() && /* @__PURE__ */ f("tr", { children: /* @__PURE__ */ f(u, {
-		colSpan: Ut,
-		id: Yt(t.id),
-		className: e([Je]),
-		children: P(t)
-	}) }, `${t.id}-panel`)] }, t.id), Xt = (t) => /* @__PURE__ */ p("tr", { children: [w && /* @__PURE__ */ f(u, {
-		style: g(K),
-		className: e([
-			Y,
-			K && y,
-			K?.edge && x
-		]),
-		children: /* @__PURE__ */ f(s, {})
-	}), H.map((t) => {
-		let n = q.get(t.column.id);
-		return /* @__PURE__ */ f(u, {
-			style: g(n),
-			className: e([n && y, n?.edge && (n.side === "left" ? x : Le)]),
-			children: /* @__PURE__ */ f(s, {})
-		}, t.id);
-	})] }, `skeleton-${t}`), Zt = Array.from({ length: E ?? 5 }, (e, t) => Xt(t)), Qt = /* @__PURE__ */ f("tr", { children: f(u, {
-		colSpan: Ut,
-		className: e([Re]),
-		children: ot ?? /* @__PURE__ */ f(ee, {})
-	}) }), $t = F ? /* @__PURE__ */ f(l, { children: p("tr", { children: [w && /* @__PURE__ */ f(u, { children: null }), H.map((e) => /* @__PURE__ */ f(u, { children: e.column.getCanFilter() ? /* @__PURE__ */ f(t, {
-		size: "sm",
-		"aria-label": `Filter ${h(e.column)}`,
-		placeholder: Mt.filterPlaceholder,
-		value: e.column.getFilterValue() ?? "",
-		onChange: (t) => e.column.setFilterValue(t.target.value)
-	}) : null }, `filter-${e.id}`))] }) }) : void 0, en = B.getFilteredRowModel().flatRows, Z = dt !== void 0 && !k && U.length > 0 ? dt(en) : void 0, Q = Z !== void 0 && Z.length > 0 ? /* @__PURE__ */ f("tfoot", {
+	}, t.id), P !== void 0 && t.getCanExpand() && t.getIsExpanded() && /* @__PURE__ */ d("tr", {
+		"data-slot": "panel-row",
+		children: /* @__PURE__ */ d(u, {
+			colSpan: Ut,
+			"data-slot": "panel-cell",
+			id: Yt(t.id),
+			className: e([Je]),
+			children: P(t)
+		})
+	}, `${t.id}-panel`)] }, t.id), Xt = (t) => /* @__PURE__ */ f("tr", {
+		"data-slot": "row",
+		children: [w && /* @__PURE__ */ d(u, {
+			"data-slot": "select-cell",
+			style: h(K),
+			className: e([
+				Y,
+				K && v,
+				K?.edge && x
+			]),
+			children: /* @__PURE__ */ d(s, {})
+		}), H.map((t) => {
+			let n = q.get(t.column.id);
+			return /* @__PURE__ */ d(u, {
+				"data-slot": "cell",
+				style: h(n),
+				className: e([n && v, n?.edge && (n.side === "left" ? x : Le)]),
+				children: /* @__PURE__ */ d(s, {})
+			}, t.id);
+		})]
+	}, `skeleton-${t}`), Zt = Array.from({ length: E ?? 5 }, (e, t) => Xt(t)), Qt = /* @__PURE__ */ d("tr", {
+		"data-slot": "row",
+		children: d(u, {
+			colSpan: Ut,
+			"data-slot": "cell",
+			className: e([Re]),
+			children: ot ?? /* @__PURE__ */ d(ee, {})
+		})
+	}), $t = F ? /* @__PURE__ */ d(l, { children: f("tr", {
+		"data-slot": "filter-row",
+		children: [w && /* @__PURE__ */ d(u, {
+			"data-slot": "select-cell",
+			children: null
+		}), H.map((e) => /* @__PURE__ */ d(u, {
+			"data-slot": "cell",
+			children: e.column.getCanFilter() ? /* @__PURE__ */ d(t, {
+				size: "sm",
+				"aria-label": `Filter ${m(e.column)}`,
+				placeholder: Mt.filterPlaceholder,
+				value: e.column.getFilterValue() ?? "",
+				onChange: (t) => e.column.setFilterValue(t.target.value)
+			}) : null
+		}, `filter-${e.id}`))]
+	}) }) : void 0, en = B.getFilteredRowModel().flatRows, Z = dt !== void 0 && !k && U.length > 0 ? dt(en) : void 0, Q = Z !== void 0 && Z.length > 0 ? /* @__PURE__ */ d("tfoot", {
+		"data-slot": "summary",
 		className: e([Xe, ft && Ze]),
-		children: Z.map((e, t) => /* @__PURE__ */ p("tr", {
+		children: Z.map((e, t) => /* @__PURE__ */ f("tr", {
+			"data-slot": "row",
 			"aria-label": e.label,
-			children: [w && /* @__PURE__ */ f(u, { children: null }), H.map((t, n) => {
+			children: [w && /* @__PURE__ */ d(u, {
+				"data-slot": "select-cell",
+				children: null
+			}), H.map((t, n) => {
 				let r = e.cells[n];
-				return /* @__PURE__ */ f(u, { children: typeof r == "function" ? r(en) : r }, t.id);
+				return /* @__PURE__ */ d(u, {
+					"data-slot": "cell",
+					children: typeof r == "function" ? r(en) : r
+				}, t.id);
 			})]
 		}, `summary-${t}`))
-	}) : void 0, $ = ut ? /* @__PURE__ */ p(ne, {
+	}) : void 0, $ = ut ? /* @__PURE__ */ f(ie, {
 		className: E === void 0 ? void 0 : Ve,
-		children: [/* @__PURE__ */ f(re, {
+		children: [/* @__PURE__ */ d(re, {
 			className: e([He]),
 			children: "Columns"
-		}), /* @__PURE__ */ f(ie, {
+		}), /* @__PURE__ */ d(ne, {
 			align: "end",
-			children: B.getAllLeafColumns().filter((e) => e.getCanHide()).map((t) => /* @__PURE__ */ p("label", {
+			children: B.getAllLeafColumns().filter((e) => e.getCanHide()).map((t) => /* @__PURE__ */ f("label", {
+				"data-slot": "column-toggle-item",
 				className: e([Ue]),
-				children: [/* @__PURE__ */ f(o, {
+				children: [/* @__PURE__ */ d(o, {
 					role: "menuitemcheckbox",
 					"aria-checked": t.getIsVisible(),
 					checked: t.getIsVisible(),
 					onChange: () => t.toggleVisibility(),
-					"aria-label": `Show ${h(t)}`
-				}), /* @__PURE__ */ f("span", { children: h(t) })]
+					"aria-label": `Show ${m(t)}`
+				}), /* @__PURE__ */ d("span", {
+					"data-slot": "label",
+					children: m(t)
+				})]
 			}, t.id))
 		})]
 	}) : void 0;
-	return /* @__PURE__ */ p("div", {
-		className: e([Ce, ht]),
+	return /* @__PURE__ */ f("div", {
+		"data-slot": "data-table",
+		className: e([we, ht]),
 		children: [
-			$ && E === void 0 && /* @__PURE__ */ f("div", {
+			$ && E === void 0 && /* @__PURE__ */ d("div", {
+				"data-slot": "toolbar",
 				className: e([Be]),
 				children: $
 			}),
-			R ? /* @__PURE__ */ p("div", {
+			R ? /* @__PURE__ */ f("div", {
 				ref: Bt,
-				className: e([Ee]),
+				"data-slot": "scroll-area",
+				className: e([De]),
 				children: [
-					/* @__PURE__ */ p("table", {
+					/* @__PURE__ */ f("table", {
+						"data-slot": "table",
 						...gt,
-						className: e([v, _]),
+						className: e([_, g]),
 						children: [
 							J,
 							Jt,
 							$t
 						]
 					}),
-					k ? /* @__PURE__ */ p("table", {
-						className: e([v, _]),
-						children: [J, /* @__PURE__ */ f(l, { children: Zt })]
-					}) : U.length > 0 ? /* @__PURE__ */ f(a, {
+					k ? /* @__PURE__ */ f("table", {
+						"data-slot": "table",
+						className: e([_, g]),
+						children: [J, /* @__PURE__ */ d(l, { children: Zt })]
+					}) : U.length > 0 ? /* @__PURE__ */ d(a, {
 						items: U,
 						height: Vt,
 						itemHeight: z,
 						estimatedItemHeight: Ft ? z : void 0,
 						overscan: Nt,
-						renderItem: (t) => /* @__PURE__ */ p("table", {
+						renderItem: (t) => /* @__PURE__ */ f("table", {
+							"data-slot": "table",
 							className: e([
-								v,
 								_,
-								De
+								g,
+								Oe
 							]),
-							children: [J, /* @__PURE__ */ f(l, { children: X(t) })]
+							children: [J, /* @__PURE__ */ d(l, { children: X(t) })]
 						})
-					}) : /* @__PURE__ */ p("table", {
-						className: e([v, _]),
-						children: [J, /* @__PURE__ */ f(l, { children: Qt })]
+					}) : /* @__PURE__ */ f("table", {
+						"data-slot": "table",
+						className: e([_, g]),
+						children: [J, /* @__PURE__ */ d(l, { children: Qt })]
 					}),
-					Q !== void 0 && /* @__PURE__ */ p("table", {
-						className: e([v, _]),
+					Q !== void 0 && /* @__PURE__ */ f("table", {
+						"data-slot": "table",
+						className: e([_, g]),
 						children: [J, Q]
 					})
 				]
-			}) : /* @__PURE__ */ f("div", {
-				className: e([it ? Te : we]),
-				children: /* @__PURE__ */ p("table", {
+			}) : /* @__PURE__ */ d("div", {
+				"data-slot": "scroll-area",
+				className: e([it ? Ee : Te]),
+				children: /* @__PURE__ */ f("table", {
+					"data-slot": "table",
 					...gt,
-					className: e([v]),
+					className: e([_]),
 					children: [
 						J,
 						Jt,
 						$t,
-						/* @__PURE__ */ f(l, { children: k ? Zt : /* @__PURE__ */ p(d, { children: [U.map(X), U.length === 0 && Qt] }) }),
+						/* @__PURE__ */ d(l, { children: k ? Zt : /* @__PURE__ */ f(pe, { children: [U.map(X), U.length === 0 && Qt] }) }),
 						Q
 					]
 				})
 			}),
-			E !== void 0 && /* @__PURE__ */ p("div", {
+			E !== void 0 && /* @__PURE__ */ f("div", {
+				"data-slot": "pagination",
 				className: e([ze]),
-				children: [$, /* @__PURE__ */ f(te, {
+				children: [$, /* @__PURE__ */ d(te, {
 					page: Tt,
 					total: O && tt !== void 0 ? Math.max(0, tt) * E : C.length,
 					pageSize: E,

package/dist/components/DateRangePicker/DateRangePickerCore.js

@@ -12,6 +12,7 @@ function m({ startDate: m, endDate: h, onStartChange: g, onEndChange: _, separat
 		!m || h ? (g(e), _("")) : e < m ? g(e) : _(e);
 	}, T = x !== void 0 && x.length > 0, E = /* @__PURE__ */ a(r, { children: [
 		/* @__PURE__ */ i("input", {
+			"data-slot": "start-input",
 			type: "date",
 			"aria-label": C.startDate,
 			value: m,
@@ -19,10 +20,12 @@ function m({ startDate: m, endDate: h, onStartChange: g, onEndChange: _, separat
 			className: e([u])
 		}),
 		/* @__PURE__ */ i("span", {
+			"data-slot": "separator",
 			className: e([d]),
 			children: v
 		}),
 		/* @__PURE__ */ i("input", {
+			"data-slot": "end-input",
 			type: "date",
 			"aria-label": C.endDate,
 			value: h,
@@ -31,22 +34,28 @@ function m({ startDate: m, endDate: h, onStartChange: g, onEndChange: _, separat
 		})
 	] });
 	return y !== 2 && !T ? /* @__PURE__ */ i("div", {
+		"data-slot": "date-range-picker",
 		className: e([o, S]),
 		children: E
 	}) : /* @__PURE__ */ a("div", {
+		"data-slot": "date-range-picker",
 		className: e([
 			o,
 			s,
 			S
 		]),
 		children: [/* @__PURE__ */ i("div", {
+			"data-slot": "inputs",
 			className: e([c]),
 			children: E
 		}), /* @__PURE__ */ a("div", {
+			"data-slot": "panel",
 			className: e([l]),
 			children: [T && /* @__PURE__ */ i("div", {
+				"data-slot": "presets",
 				className: e([f]),
 				children: x.map((t) => /* @__PURE__ */ i("button", {
+					"data-slot": "preset",
 					type: "button",
 					onClick: () => {
 						g(t.range[0]), _(t.range[1]);