haze-ui 1.26.0 → 1.27.0

package/dist/components/Container/index.js

@@ -1,3 +1,2 @@
-"use client";
 import e from "./Container.js";
 export { e as Container };

package/dist/components/ContextMenu/ContextMenuContent.js

@@ -1,7 +1,7 @@
 
 "use client";
-import { useFocusScope as e } from "../../utils/focus-scope.js";
-import { FloatingPanel as t } from "../../utils/floating.js";
+import { FloatingPanel as e } from "../../utils/floating.js";
+import { useFocusScope as t } from "../../utils/focus-scope.js";
 import { useMenuKeyboard as n, useRovingTabindex as r } from "../../utils/menuKeyboard.js";
 import { useContextMenuContext as i } from "./ContextMenuContext.js";
 /* empty css                             */
@@ -18,14 +18,14 @@ function c({ children: c, className: l }) {
 		menuRef: m,
 		active: u
 	});
-	let _ = e({
+	let _ = t({
 		enabled: u && h.shown,
 		autoFocus: !0,
 		returnFocus: !0
 	}), v = o((e) => {
 		m.current = e, _(e);
 	}, [m, _]);
-	return !u && h.exited ? null : /* @__PURE__ */ a(t, {
+	return !u && h.exited ? null : /* @__PURE__ */ a(e, {
 		ref: v,
 		behavior: h,
 		role: "menu",

package/dist/components/DataTable/CellEditor.js

@@ -0,0 +1,38 @@
+
+"use client";
+import e from "../Input/InputCore.js";
+/* empty css                     */
+import { jsx as t } from "react/jsx-runtime";
+import { useRef as n, useState as r } from "react";
+//#region src/lib/components/DataTable/CellEditor.tsx
+var i = "haze-CellEditor__editorInput";
+function a(e) {
+	return typeof e == "string" ? e : typeof e == "number" ? String(e) : "";
+}
+function o({ kind: o, value: s, ariaLabel: c, onSave: l, onCancel: u }) {
+	let [d, f] = r(() => a(s)), p = n(!1), m = (e) => {
+		if (!p.current) {
+			if (p.current = !0, !e) {
+				u();
+				return;
+			}
+			l(o === "number" ? d.trim() === "" ? null : Number(d) : d);
+		}
+	};
+	return /* @__PURE__ */ t(e, {
+		size: "sm",
+		type: o === "number" ? "number" : "text",
+		className: i,
+		autoFocus: !0,
+		"aria-label": c,
+		value: d,
+		onChange: f,
+		onFocus: (e) => e.target.select(),
+		onKeyDown: (e) => {
+			e.key === "Enter" ? (e.preventDefault(), m(!0), e.currentTarget.closest("td")?.focus()) : e.key === "Escape" && (e.preventDefault(), m(!1), e.currentTarget.closest("td")?.focus());
+		},
+		onBlur: () => m(!0)
+	});
+}
+//#endregion
+export { o as default };

package/dist/components/DataTable/DataTable.js

@@ -1,193 +1,441 @@
 
 "use client";
 import { classnames as e } from "../../utils/classnames.js";
-import t from "../Checkbox/CheckboxCore.js";
-import n from "../Skeleton/Skeleton.js";
-import r from "../VirtualList/VirtualList.js";
-import ee from "../Table/TableHead.js";
-import i from "../Table/TableBody.js";
-import a from "../Table/TableCell.js";
-import te from "../Empty/Empty.js";
-import o from "../Pagination/Pagination.js";
+import t from "../Input/Input.js";
+import { getDirection as n, useDirection as r } from "../../utils/direction.js";
+import i from "../VirtualList/VirtualList.js";
+import a from "../Checkbox/CheckboxCore.js";
+import o from "../Skeleton/Skeleton.js";
+import s from "../Table/TableHead.js";
+import c from "../Table/TableBody.js";
+import l from "../Table/TableCell.js";
+import ee from "../Empty/Empty.js";
+import te from "../Pagination/Pagination.js";
+import ne from "../DropdownMenu/DropdownMenu.js";
+import re from "../DropdownMenu/DropdownMenuTrigger.js";
+import ie from "../DropdownMenu/DropdownMenuContent.js";
+import ae from "./CellEditor.js";
+import { dataTableFeatures as oe } from "./features.js";
 /* empty css                    */
-import { Fragment as ne, jsx as s, jsxs as c } from "react/jsx-runtime";
-import { useEffect as l, useMemo as u, useRef as d, useState as re } from "react";
-import { useControl as f } from "react-use-control";
-import { createPaginatedRowModel as p, createSortedRowModel as m, metaHelper as h, rowPaginationFeature as g, rowSelectionFeature as _, rowSortingFeature as v, sortFn_alphanumeric as y, sortFn_text as b, tableFeatures as x, useTable as S } from "@tanstack/react-table";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+import { Fragment as se, useEffect as p, useId as ce, useMemo as le, useRef as ue, useState as de } from "react";
+import { useControl as m } from "react-use-control";
+import { useTable as fe } from "@tanstack/react-table";
 //#region src/lib/components/DataTable/DataTable.tsx
-var C = x({
-	rowPaginationFeature: g,
-	paginatedRowModel: p(),
-	rowSelectionFeature: _,
-	rowSortingFeature: v,
-	sortedRowModel: m(),
-	sortFns: {
-		alphanumeric: y,
-		text: b
-	},
-	columnMeta: h()
-});
-function w(e, t) {
+function pe(e, t) {
 	let n = {
 		...e,
-		enableSorting: e.enableSorting ?? e.meta?.sortable ?? t
+		enableSorting: e.enableSorting ?? e.meta?.sortable ?? t.sortable,
+		enableResizing: e.enableResizing ?? e.meta?.resizable ?? !0,
+		enableHiding: e.enableHiding ?? e.meta?.hideable !== !1,
+		enableColumnFilter: e.enableColumnFilter ?? e.meta?.filterable ?? t.filterable,
+		filterFn: e.filterFn ?? "includesString",
+		size: t.resizable && typeof e.meta?.width == "number" ? e.meta.width : e.size
 	};
 	return "columns" in n && n.columns ? {
 		...n,
-		columns: n.columns.map((e) => w(e, t))
+		columns: n.columns.map((e) => pe(e, t))
 	} : n;
 }
-var ie = 34, ae = "haze-DataTable__root", oe = "haze-DataTable__scrollArea", se = "haze-DataTable__stickyScrollArea", ce = "haze-DataTable__virtualArea", T = "haze-DataTable__fixedLayout", le = "haze-DataTable__virtualRowTable", ue = "haze-DataTable__virtualCheckCell", E = "haze-DataTable__tableBase", de = "haze-DataTable__stickyHead", fe = "haze-DataTable__sortButton", pe = "haze-DataTable__sortIcon", me = "haze-DataTable__rowHover", he = "haze-DataTable__rowSelected", ge = "haze-DataTable__clickableRow", D = "haze-DataTable__checkCell", O = "haze-DataTable__emptyCell", k = "haze-DataTable__footer";
-function A({ columns: p, data: m, sortable: h = !1, selectable: g = !1, rowSelection: _, sorting: v, pageSize: y, page: b, loading: x = !1, stickyHeader: A = !1, virtualized: j, getRowId: M, onRowClick: N, empty: P, className: F, ...I }) {
-	let [L, _e] = f(v, []), [ve, ye] = f(_, {}), [R, be, xe] = f(b, 1), z = j === !0 || typeof j == "object", B = typeof j == "object" ? j.rowHeight : ie, Se = typeof j == "object" ? j.overscan : void 0, V = y ?? Math.max(m.length, 1), Ce = u(() => p.map((e) => w(e, h)), [p, h]), H = S({
-		features: C,
-		columns: Ce,
-		data: m,
-		getRowId: M,
+function h(e) {
+	let t = e.columnDef.header;
+	return typeof t == "string" ? t : e.id;
+}
+function me(e) {
+	let t = e.meta?.width ?? e.size;
+	return typeof t == "number" ? `${t}px` : t;
+}
+function he(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) {
+	return e ? {
+		left: e.side === "left" ? e.offset : void 0,
+		right: e.side === "right" ? e.offset : void 0
+	} : void 0;
+}
+var ge = "calc(var(--haze-space-3) * 2 + var(--haze-space-5))", _e = "(var(--haze-space-3) * 2 + var(--haze-space-5))", ve = 34, ye = "haze-DataTable__root", be = "haze-DataTable__scrollArea", xe = "haze-DataTable__stickyScrollArea", Se = "haze-DataTable__virtualArea", _ = "haze-DataTable__fixedLayout", Ce = "haze-DataTable__virtualRowTable", v = "haze-DataTable__tableBase", we = "haze-DataTable__stickyHead", Te = "haze-DataTable__sortButton", Ee = "haze-DataTable__sortIcon", De = "haze-DataTable__rowHover", Oe = "haze-DataTable__rowSelected", ke = "haze-DataTable__clickableRow", Ae = "haze-DataTable__checkCell", je = "haze-DataTable__checkCellCol", y = "haze-DataTable__fixedCell", Me = "haze-DataTable__fixedCellSelected", b = "haze-DataTable__fixedHeadCell", x = "haze-DataTable__fixedLeftEdge", S = "haze-DataTable__fixedRightEdge", Ne = "haze-DataTable__emptyCell", Pe = "haze-DataTable__footer", Fe = "haze-DataTable__toolbar", Ie = "haze-DataTable__footerMenu", Le = "haze-DataTable__columnsTrigger", Re = "haze-DataTable__toggleRow", ze = "haze-DataTable__resizableHead", Be = "haze-DataTable__resizeHandle", Ve = "haze-DataTable__expander", He = "haze-DataTable__expanderIcon", Ue = "haze-DataTable__panelCell", We = "haze-DataTable__treeIndent", Ge = "haze-DataTable__summaryFoot", Ke = "haze-DataTable__stickyFoot", qe = "haze-DataTable__editableCell";
+function C({ columns: C, data: w, sortable: T = !1, selectable: E = !1, rowSelection: Je, sorting: Ye, pageSize: D, page: Xe, loading: O = !1, stickyHeader: Ze = !1, virtualized: k, getRowId: Qe, onRowClick: A, empty: $e, resizable: j = !1, expanded: et, getRowCanExpand: M, renderExpandedRow: N, subRowsKey: tt = "subRows", columnVisibility: nt, columnToggle: rt = !1, filterable: P = !1, summary: it, stickyFooter: at = !1, editable: ot = !1, onCellEdit: st, className: ct, ...lt }) {
+	let [ut, dt] = m(Ye, []), [ft, pt] = m(Je, {}), [mt, ht, gt] = m(Xe, 1), [_t, vt] = m(et, {}), [yt, bt] = m(nt, {}), [F, I] = de(null), xt = r(), St = ce(), L = k === !0 || typeof k == "object", R = typeof k == "object" ? k.rowHeight : ve, Ct = typeof k == "object" ? k.overscan : void 0, wt = D ?? Infinity, Tt = M !== void 0 || N !== void 0, Et = M === void 0 && N === void 0 && w.some((e) => {
+		let t = e[tt];
+		return Array.isArray(t) && t.length > 0;
+	}), Dt = le(() => C.map((e) => pe(e, {
+		sortable: T,
+		resizable: j,
+		filterable: P
+	})), [
+		C,
+		T,
+		j,
+		P
+	]), z = fe({
+		features: oe,
+		columns: Dt,
+		data: w,
+		getRowId: Qe,
+		getSubRows: Et ? (e) => e[tt] : void 0,
 		state: {
-			sorting: L,
-			rowSelection: ve,
+			sorting: ut,
+			rowSelection: ft,
 			pagination: {
-				pageIndex: R - 1,
-				pageSize: V
-			}
+				pageIndex: mt - 1,
+				pageSize: wt
+			},
+			expanded: _t,
+			columnVisibility: yt
 		},
-		onSortingChange: _e,
-		onRowSelectionChange: ye,
+		onSortingChange: dt,
+		onRowSelectionChange: pt,
+		onExpandedChange: vt,
+		onColumnVisibilityChange: bt,
+		getRowCanExpand: M ?? (N === void 0 ? void 0 : () => !0),
+		enableColumnFilters: P,
+		enableColumnResizing: j,
+		columnResizeMode: "onChange",
+		columnResizeDirection: xt,
+		defaultColumn: { size: void 0 },
 		onPaginationChange: (e) => {
 			let t = typeof e == "function" ? e({
-				pageIndex: R - 1,
-				pageSize: V
+				pageIndex: mt - 1,
+				pageSize: wt
 			}) : e;
-			be(Math.max(1, t.pageIndex + 1));
+			ht(Math.max(1, t.pageIndex + 1));
 		}
-	}), U = d(null), we = H.getIsSomeRowsSelected() && !H.getIsAllRowsSelected();
-	l(() => {
-		let e = U.current?.querySelector("input");
-		e && (e.indeterminate = we);
+	}), Ot = ue(null), kt = z.getIsSomeRowsSelected() && !z.getIsAllRowsSelected();
+	p(() => {
+		let e = Ot.current?.querySelector("input");
+		e && (e.indeterminate = kt);
 	});
-	let W = d(null), [Te, Ee] = re(0);
-	l(() => {
-		if (!z) return;
-		let e = W.current, t = e?.querySelector("thead");
+	let At = ue(null), [jt, Mt] = de(0);
+	p(() => {
+		if (!L) return;
+		let e = At.current, t = e?.querySelector("thead");
 		if (!e || !t) return;
 		let n = () => {
 			let n = Math.floor(e.getBoundingClientRect().height), r = Math.floor(t.getBoundingClientRect().height);
-			Ee(Math.max(B, n - r));
+			Mt(Math.max(R, n - r));
 		};
 		n();
 		let r = new ResizeObserver(n);
 		return r.observe(e), r.observe(t), () => r.disconnect();
-	}, [z, B]);
-	let G = H.getHeaderGroups(), K = H.getLeafHeaders(), De = K.length + +!!g, q = H.getRowModel().rows, J = N ? (e, t) => {
-		t.target instanceof Element && t.target.closest("button, input, select, textarea, a") || N(e, t);
-	} : void 0, Y = z ? ue : D, X = /* @__PURE__ */ s(ee, {
-		className: A ? de : void 0,
-		children: G.map((n, r) => /* @__PURE__ */ c("tr", { children: [g && r === 0 && /* @__PURE__ */ s(a, {
+	}, [L, R]);
+	let B = z.getHeaderGroups(), V = z.getLeafHeaders(), Nt = V.length + +!!E, H = z.getRowModel().rows, Pt = z.state.columnSizing, U = V.map((e) => {
+		let t = Pt[e.column.id];
+		return t === void 0 ? me(e.column.columnDef) : `${t}px`;
+	}), Ft = U.some((e) => e !== void 0), It = (e, t) => {
+		let n = e.column.columnDef, r = n.minSize ?? 20, i = n.maxSize ?? 2 ** 53 - 1, a = Pt[e.column.id] ?? e.column.getSize(), o = Math.min(Math.max(Math.round(a + t), r), i);
+		z.setColumnSizing((t) => ({
+			...t,
+			[e.column.id]: o
+		}));
+	}, W = V.map((e) => e.column.columnDef.meta?.fixed), G = !L && E && W.some((e) => e === "left") ? {
+		side: "left",
+		offset: "0px",
+		edge: W[0] !== "left"
+	} : void 0, K = /* @__PURE__ */ new Map();
+	if (!L) {
+		let e = G ? [_e] : [];
+		V.forEach((t, n) => {
+			if (W[n] !== "left") return;
+			K.set(t.column.id, {
+				side: "left",
+				offset: he(e),
+				edge: W[n + 1] !== "left"
+			});
+			let r = U[n];
+			r && e.push(r);
+		});
+		let t = [];
+		for (let e = V.length - 1; e >= 0; --e) {
+			let n = V[e];
+			if (!n || W[e] !== "right") continue;
+			K.set(n.column.id, {
+				side: "right",
+				offset: he(t),
+				edge: W[e - 1] !== "right"
+			});
+			let r = U[e];
+			r && t.push(r);
+		}
+	}
+	let q = L || Ft || j ? /* @__PURE__ */ f("colgroup", { children: [E && /* @__PURE__ */ d("col", { style: { width: ge } }), V.map((e, t) => /* @__PURE__ */ d("col", { style: U[t] ? { width: U[t] } : void 0 }, e.id))] }) : void 0, J = L || Ft || j ? je : Ae, Lt = A ? (e, t) => {
+		t.target instanceof Element && t.target.closest("button, input, select, textarea, a") || A(e, t);
+	} : void 0, Y = /* @__PURE__ */ d(s, {
+		className: Ze ? we : void 0,
+		children: B.map((t, r) => /* @__PURE__ */ f("tr", { children: [E && r === 0 && /* @__PURE__ */ d(l, {
 			as: "th",
-			rowSpan: G.length > 1 ? G.length : void 0,
-			className: e([Y]),
-			children: /* @__PURE__ */ s("span", {
-				ref: U,
-				children: /* @__PURE__ */ s(t, {
-					checked: H.getIsAllRowsSelected(),
-					onChange: (e) => H.toggleAllRowsSelected(e),
+			rowSpan: B.length > 1 ? B.length : void 0,
+			style: g(G),
+			className: e([
+				J,
+				G && y,
+				G && b
+			]),
+			children: /* @__PURE__ */ d("span", {
+				ref: Ot,
+				children: /* @__PURE__ */ d(a, {
+					checked: z.getIsAllRowsSelected(),
+					onChange: (e) => z.toggleAllRowsSelected(e),
 					"aria-label": "Select all rows"
 				})
 			})
-		}), n.headers.map((t) => {
+		}), t.headers.map((t) => {
 			if (t.rowSpan === 0) return null;
-			if (t.isPlaceholder) return /* @__PURE__ */ s(a, {
+			if (t.isPlaceholder) return /* @__PURE__ */ d(l, {
 				as: "th",
 				children: null
 			}, t.placeholderId ?? t.id);
-			let n = t.column.getIsSorted();
-			return /* @__PURE__ */ s(a, {
+			let r = t.column.getIsSorted(), i = t.subHeaders.length === 0 ? K.get(t.column.id) : void 0, a = j && t.subHeaders.length === 0 && t.column.getCanResize();
+			return /* @__PURE__ */ f(l, {
 				as: "th",
 				colSpan: t.colSpan > 1 ? t.colSpan : void 0,
 				rowSpan: t.rowSpan > 1 ? t.rowSpan : void 0,
-				"aria-sort": n === "asc" ? "ascending" : n === "desc" ? "descending" : void 0,
-				children: t.column.getCanSort() ? /* @__PURE__ */ c("button", {
+				style: g(i),
+				"aria-sort": r === "asc" ? "ascending" : r === "desc" ? "descending" : void 0,
+				className: e([
+					i && y,
+					i && b,
+					a && ze
+				]),
+				children: [t.column.getCanSort() ? /* @__PURE__ */ f("button", {
 					type: "button",
 					onClick: t.column.getToggleSortingHandler(),
-					className: e([fe]),
-					children: [/* @__PURE__ */ s(H.FlexRender, { header: t }), /* @__PURE__ */ s("span", {
+					className: e([Te]),
+					children: [/* @__PURE__ */ d(z.FlexRender, { header: t }), /* @__PURE__ */ d("span", {
 						"aria-hidden": "true",
-						className: e([pe]),
-						children: n === "asc" ? "↑" : n === "desc" ? "↓" : "↕"
+						className: e([Ee]),
+						children: r === "asc" ? "↑" : r === "desc" ? "↓" : "↕"
 					})]
-				}) : /* @__PURE__ */ s(H.FlexRender, { header: t })
+				}) : /* @__PURE__ */ d(z.FlexRender, { header: t }), a && /* @__PURE__ */ d("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;
+						It(t, i ? 5 : -5);
+					},
+					className: e([Be])
+				})]
 			}, t.id);
-		})] }, n.id))
-	}), Z = (n) => /* @__PURE__ */ c("tr", {
-		onClick: J ? (e) => J(n.original, e) : void 0,
+		})] }, t.id))
+	}), Rt = (e) => `${St}-${e.replace(/\s+/g, "-")}-panel`, zt = (t) => /* @__PURE__ */ f(se, { children: [/* @__PURE__ */ f("tr", {
+		onClick: Lt ? (e) => Lt(t.original, e) : void 0,
 		className: e([
-			me,
-			n.getIsSelected() && he,
-			N && ge
+			De,
+			t.getIsSelected() && Oe,
+			A && ke
 		]),
-		children: [g && /* @__PURE__ */ s(a, {
-			className: e([Y]),
-			children: /* @__PURE__ */ s(t, {
-				checked: n.getIsSelected(),
-				onChange: (e) => n.toggleSelected(e),
-				"aria-label": `Select row ${n.id}`
+		children: [E && /* @__PURE__ */ d(l, {
+			style: g(G),
+			className: e([
+				J,
+				G && y,
+				G?.edge && x,
+				t.getIsSelected() && Me
+			]),
+			children: /* @__PURE__ */ d(a, {
+				checked: t.getIsSelected(),
+				onChange: (e) => t.toggleSelected(e),
+				"aria-label": `Select row ${t.id}`
 			})
-		}), n.getAllCells().map((e) => /* @__PURE__ */ s(a, { children: /* @__PURE__ */ s(H.FlexRender, { cell: e }) }, e.id))]
-	}, n.id), Oe = (t) => /* @__PURE__ */ c("tr", { children: [g && /* @__PURE__ */ s(a, {
-		className: e([Y]),
-		children: /* @__PURE__ */ s(n, {})
-	}), K.map((e) => /* @__PURE__ */ s(a, { children: /* @__PURE__ */ s(n, {}) }, e.id))] }, `skeleton-${t}`), Q = Array.from({ length: y ?? 5 }, (e, t) => Oe(t)), $ = /* @__PURE__ */ s("tr", { children: s(a, {
-		colSpan: De,
-		className: e([O]),
-		children: P ?? /* @__PURE__ */ s(te, {})
-	}) });
-	return /* @__PURE__ */ c("div", {
-		className: e([ae, F]),
-		children: [z ? /* @__PURE__ */ c("div", {
-			ref: W,
-			className: e([ce]),
-			children: [/* @__PURE__ */ s("table", {
-				...I,
-				className: e([E, T]),
-				children: X
-			}), x ? /* @__PURE__ */ s("table", {
-				className: e([E, T]),
-				children: /* @__PURE__ */ s(i, { children: Q })
-			}) : q.length > 0 ? /* @__PURE__ */ s(r, {
-				items: q,
-				height: Te,
-				itemHeight: B,
-				overscan: Se,
-				renderItem: (t) => /* @__PURE__ */ s("table", {
-					className: e([
-						E,
-						T,
-						le
-					]),
-					children: /* @__PURE__ */ s(i, { children: Z(t) })
-				})
-			}) : /* @__PURE__ */ s("table", {
-				className: e([E, T]),
-				children: /* @__PURE__ */ s(i, { children: $ })
+		}), t.getVisibleCells().map((n, r) => {
+			let i = K.get(n.column.id), a = ot ? n.column.columnDef.meta?.editor ?? "text" : !1, o = a !== !1, s = F !== null && F.rowId === t.id && F.columnId === n.column.id, c = (e) => {
+				I(null);
+				let r = n.getValue();
+				Object.is(e, r) || st?.(t.id, n.column.id, e, r);
+			};
+			return /* @__PURE__ */ d(l, {
+				style: g(i),
+				tabIndex: o ? 0 : void 0,
+				onDoubleClick: o && !s ? () => I({
+					rowId: t.id,
+					columnId: n.column.id
+				}) : void 0,
+				onKeyDown: o && !s ? (e) => {
+					e.key === "Enter" && (e.preventDefault(), I({
+						rowId: t.id,
+						columnId: n.column.id
+					}));
+				} : void 0,
+				className: e([
+					i && y,
+					i?.edge && (i.side === "left" ? x : S),
+					t.getIsSelected() && Me,
+					o && qe
+				]),
+				children: s && o ? typeof a == "function" ? a({
+					value: n.getValue(),
+					row: t,
+					column: n.column,
+					onSave: c,
+					onCancel: () => I(null)
+				}) : /* @__PURE__ */ d(ae, {
+					kind: a === "number" ? "number" : "text",
+					value: n.getValue(),
+					ariaLabel: `Edit ${h(n.column)} in row ${t.id}`,
+					onSave: c,
+					onCancel: () => I(null)
+				}) : /* @__PURE__ */ f(u, { children: [
+					r === 0 && t.depth > 0 && /* @__PURE__ */ d("span", {
+						"aria-hidden": "true",
+						style: { width: `calc(var(--haze-space-4) * ${t.depth})` },
+						className: e([We])
+					}),
+					r === 0 && t.getCanExpand() && /* @__PURE__ */ d("button", {
+						type: "button",
+						"aria-expanded": t.getIsExpanded(),
+						"aria-controls": N === void 0 ? void 0 : Rt(t.id),
+						"aria-label": t.getIsExpanded() ? `Collapse row ${t.id}` : `Expand row ${t.id}`,
+						onClick: t.getToggleExpandedHandler(),
+						className: e([Ve]),
+						children: /* @__PURE__ */ d("span", {
+							"aria-hidden": "true",
+							className: e([He]),
+							children: "▸"
+						})
+					}),
+					/* @__PURE__ */ d(z.FlexRender, { cell: n })
+				] })
+			}, n.id);
+		})]
+	}, t.id), N !== void 0 && t.getCanExpand() && t.getIsExpanded() && /* @__PURE__ */ d("tr", { children: /* @__PURE__ */ d(l, {
+		colSpan: Nt,
+		id: Rt(t.id),
+		className: e([Ue]),
+		children: N(t)
+	}) }, `${t.id}-panel`)] }, t.id), Bt = (t) => /* @__PURE__ */ f("tr", { children: [E && /* @__PURE__ */ d(l, {
+		style: g(G),
+		className: e([
+			J,
+			G && y,
+			G?.edge && x
+		]),
+		children: /* @__PURE__ */ d(o, {})
+	}), V.map((t) => {
+		let n = K.get(t.column.id);
+		return /* @__PURE__ */ d(l, {
+			style: g(n),
+			className: e([n && y, n?.edge && (n.side === "left" ? x : S)]),
+			children: /* @__PURE__ */ d(o, {})
+		}, t.id);
+	})] }, `skeleton-${t}`), Vt = Array.from({ length: D ?? 5 }, (e, t) => Bt(t)), Ht = /* @__PURE__ */ d("tr", { children: d(l, {
+		colSpan: Nt,
+		className: e([Ne]),
+		children: $e ?? /* @__PURE__ */ d(ee, {})
+	}) }), Ut = P ? /* @__PURE__ */ d(c, { children: f("tr", { children: [E && /* @__PURE__ */ d(l, { children: null }), V.map((e) => /* @__PURE__ */ d(l, { children: e.column.getCanFilter() ? /* @__PURE__ */ d(t, {
+		size: "sm",
+		"aria-label": `Filter ${h(e.column)}`,
+		placeholder: "Filter",
+		value: e.column.getFilterValue() ?? "",
+		onChange: (t) => e.column.setFilterValue(t.target.value)
+	}) : null }, `filter-${e.id}`))] }) }) : void 0, X = z.getFilteredRowModel().flatRows, Z = it !== void 0 && !O && H.length > 0 ? it(X) : void 0, Q = Z !== void 0 && Z.length > 0 ? /* @__PURE__ */ d("tfoot", {
+		className: e([Ge, at && Ke]),
+		children: Z.map((e, t) => /* @__PURE__ */ f("tr", {
+			"aria-label": e.label,
+			children: [E && /* @__PURE__ */ d(l, { children: null }), V.map((t, n) => {
+				let r = e.cells[n];
+				return /* @__PURE__ */ d(l, { children: typeof r == "function" ? r(X) : r }, t.id);
 			})]
-		}) : /* @__PURE__ */ s("div", {
-			className: e([A ? se : oe]),
-			children: /* @__PURE__ */ c("table", {
-				...I,
-				className: e([E]),
-				children: [X, /* @__PURE__ */ s(i, { children: x ? Q : /* @__PURE__ */ c(ne, { children: [q.map(Z), q.length === 0 && $] }) })]
-			})
-		}), y !== void 0 && /* @__PURE__ */ s("div", {
-			className: e([k]),
-			children: /* @__PURE__ */ s(o, {
-				page: xe,
-				total: m.length,
-				pageSize: y,
-				size: "sm"
-			})
+		}, `summary-${t}`))
+	}) : void 0, $ = rt ? /* @__PURE__ */ f(ne, {
+		className: D === void 0 ? void 0 : Ie,
+		children: [/* @__PURE__ */ d(re, {
+			className: e([Le]),
+			children: "Columns"
+		}), /* @__PURE__ */ d(ie, {
+			align: "end",
+			children: z.getAllLeafColumns().filter((e) => e.getCanHide()).map((t) => /* @__PURE__ */ f("label", {
+				className: e([Re]),
+				children: [/* @__PURE__ */ d(a, {
+					role: "menuitemcheckbox",
+					"aria-checked": t.getIsVisible(),
+					checked: t.getIsVisible(),
+					onChange: () => t.toggleVisibility(),
+					"aria-label": `Show ${h(t)}`
+				}), /* @__PURE__ */ d("span", { children: h(t) })]
+			}, t.id))
 		})]
+	}) : void 0;
+	return /* @__PURE__ */ f("div", {
+		className: e([ye, ct]),
+		children: [
+			$ && D === void 0 && /* @__PURE__ */ d("div", {
+				className: e([Fe]),
+				children: $
+			}),
+			L ? /* @__PURE__ */ f("div", {
+				ref: At,
+				className: e([Se]),
+				children: [
+					/* @__PURE__ */ f("table", {
+						...lt,
+						className: e([v, _]),
+						children: [
+							q,
+							Y,
+							Ut
+						]
+					}),
+					O ? /* @__PURE__ */ f("table", {
+						className: e([v, _]),
+						children: [q, /* @__PURE__ */ d(c, { children: Vt })]
+					}) : H.length > 0 ? /* @__PURE__ */ d(i, {
+						items: H,
+						height: jt,
+						itemHeight: R,
+						estimatedItemHeight: Tt ? R : void 0,
+						overscan: Ct,
+						renderItem: (t) => /* @__PURE__ */ f("table", {
+							className: e([
+								v,
+								_,
+								Ce
+							]),
+							children: [q, /* @__PURE__ */ d(c, { children: zt(t) })]
+						})
+					}) : /* @__PURE__ */ f("table", {
+						className: e([v, _]),
+						children: [q, /* @__PURE__ */ d(c, { children: Ht })]
+					}),
+					Q !== void 0 && /* @__PURE__ */ f("table", {
+						className: e([v, _]),
+						children: [q, Q]
+					})
+				]
+			}) : /* @__PURE__ */ d("div", {
+				className: e([Ze ? xe : be]),
+				children: /* @__PURE__ */ f("table", {
+					...lt,
+					className: e([v]),
+					children: [
+						q,
+						Y,
+						Ut,
+						/* @__PURE__ */ d(c, { children: O ? Vt : /* @__PURE__ */ f(u, { children: [H.map(zt), H.length === 0 && Ht] }) }),
+						Q
+					]
+				})
+			}),
+			D !== void 0 && /* @__PURE__ */ f("div", {
+				className: e([Pe]),
+				children: [$, /* @__PURE__ */ d(te, {
+					page: gt,
+					total: w.length,
+					pageSize: D,
+					size: "sm"
+				})]
+			})
+		]
 	});
 }
 //#endregion
-export { A as default };
+export { C as default };