@metaphor-cloud/ui 0.19.0 → 0.20.0

package/dist/metaphor-ui.js

@@ -9002,14 +9002,14 @@ function ky({ className: e, ref: t, ...n }) {
 }
 //#endregion
 //#region src/components/Table.tsx
-function Ay({ className: e, ref: t, tableLayout: n, ...r }) {
+function Ay({ className: e, containerClassName: t, ref: n, tableLayout: r, ...i }) {
 	return /* @__PURE__ */ l("div", {
-		className: "relative w-full overflow-auto",
+		className: W("relative w-full overflow-auto", t),
 		children: /* @__PURE__ */ l("table", {
-			ref: t,
+			ref: n,
 			className: W("w-full caption-bottom text-sm", e),
-			style: n ? { tableLayout: n } : void 0,
-			...r
+			style: r ? { tableLayout: r } : void 0,
+			...i
 		})
 	});
 }
@@ -10795,64 +10795,64 @@ function Qx({ children: e, className: t, ...n }) {
 	});
 }
 Qx.displayName = "DataTableEmpty";
-function $x({ columns: t, data: n, children: r, loading: i, totalRows: a, onStateChange: o, defaultSort: s, manualSorting: c = !1, globalFilter: d = !1, manualFiltering: f = !1, pageSize: p = 20, manualPagination: m = !1, onRowClick: h, renderRowLink: g, rowClassName: _, getRowId: v, selectable: y = !1, onSelectionChange: b, onColumnResize: x, className: S, ref: C }) {
-	let [w, T] = e.useState(s ?? null), [E, D] = e.useState(""), [O, k] = e.useState({}), [A, j] = e.useState(1), [M, N] = e.useState(/* @__PURE__ */ new Set()), P = e.useMemo(() => t.filter((e) => !e.hidden), [t]), F = e.useRef(null), I = e.useCallback((e) => {
-		F.current = e, typeof C == "function" ? C(e) : C && typeof C == "object" && (C.current = e);
-	}, [C]), { hiddenColumnIds: ee } = qx({
-		columns: P,
-		containerRef: F,
+function $x({ columns: t, data: n, children: r, loading: i, totalRows: a, onStateChange: o, defaultSort: s, manualSorting: c = !1, globalFilter: d = !1, manualFiltering: f = !1, pageSize: p = 20, manualPagination: m = !1, onRowClick: h, renderRowLink: g, rowClassName: _, getRowId: v, selectable: y = !1, onSelectionChange: b, onColumnResize: x, fullHeight: S = !1, className: C, ref: w }) {
+	let [T, E] = e.useState(s ?? null), [D, O] = e.useState(""), [k, A] = e.useState({}), [j, M] = e.useState(1), [N, P] = e.useState(/* @__PURE__ */ new Set()), F = e.useMemo(() => t.filter((e) => !e.hidden), [t]), I = e.useRef(null), ee = e.useCallback((e) => {
+		I.current = e, typeof w == "function" ? w(e) : w && typeof w == "object" && (w.current = e);
+	}, [w]), { hiddenColumnIds: te } = qx({
+		columns: F,
+		containerRef: I,
 		hasSelectionColumn: y
-	}), te = e.useMemo(() => ee.size === 0 ? P : P.filter((e) => !ee.has(e.id)), [P, ee]), ne = e.useRef(null), re = te.some((e) => e.resizable), { columnWidths: L, resizingColumnId: R, startResize: ie } = Ux({
-		columns: te,
+	}), ne = e.useMemo(() => te.size === 0 ? F : F.filter((e) => !te.has(e.id)), [F, te]), re = e.useRef(null), L = ne.some((e) => e.resizable), { columnWidths: R, resizingColumnId: ie, startResize: ae } = Ux({
+		columns: ne,
 		hasSelectionColumn: y,
 		onColumnResize: x,
-		tableRef: ne
-	}), ae = e.useRef(o);
+		tableRef: re
+	}), z = e.useRef(o);
 	e.useLayoutEffect(() => {
-		ae.current = o;
+		z.current = o;
 	});
-	let z = e.useRef(!1);
+	let oe = e.useRef(!1);
 	e.useEffect(() => {
-		if (!z.current) {
-			z.current = !0;
+		if (!oe.current) {
+			oe.current = !0;
 			return;
 		}
-		ae.current?.({
-			sort: w,
-			globalFilter: E,
-			columnFilters: O,
-			page: A,
+		z.current?.({
+			sort: T,
+			globalFilter: D,
+			columnFilters: k,
+			page: j,
 			pageSize: p
 		});
 	}, [
-		w,
-		E,
-		O,
-		A,
+		T,
+		D,
+		k,
+		j,
 		p
 	]);
-	let oe = e.useCallback((e) => {
-		T((t) => !t || t.id !== e ? {
+	let B = e.useCallback((e) => {
+		E((t) => !t || t.id !== e ? {
 			id: e,
 			desc: !1
 		} : {
 			id: e,
 			desc: !t.desc
-		}), j(1);
-	}, []), B = e.useCallback((e) => {
-		D(e), j(1);
-	}, []), se = e.useCallback((e, t) => {
-		k((n) => ({
+		}), M(1);
+	}, []), se = e.useCallback((e) => {
+		O(e), M(1);
+	}, []), ce = e.useCallback((e, t) => {
+		A((n) => ({
 			...n,
 			[e]: t
-		})), j(1);
-	}, []), ce = e.useCallback((e) => {
-		k((t) => {
+		})), M(1);
+	}, []), le = e.useCallback((e) => {
+		A((t) => {
 			let n = { ...t };
 			return delete n[e], n;
-		}), j(1);
-	}, []), le = e.useCallback((e, t) => {
-		k((n) => {
+		}), M(1);
+	}, []), ue = e.useCallback((e, t) => {
+		A((n) => {
 			let r = Array.isArray(n[e]) ? n[e] : [], i = r.includes(t) ? r.filter((e) => e !== t) : [...r, t];
 			if (i.length === 0) {
 				let { [e]: t, ...r } = n;
@@ -10862,11 +10862,11 @@ function $x({ columns: t, data: n, children: r, loading: i, totalRows: a, onStat
 				...n,
 				[e]: i
 			};
-		}), j(1);
-	}, []), ue = e.useMemo(() => {
+		}), M(1);
+	}, []), de = e.useMemo(() => {
 		let e = [...n];
-		if (!f && E) {
-			let n = E.toLowerCase();
+		if (!f && D) {
+			let n = D.toLowerCase();
 			e = e.filter((e) => t.some((t) => {
 				if (!t.accessorKey) return !1;
 				let r = e[t.accessorKey];
@@ -10874,7 +10874,7 @@ function $x({ columns: t, data: n, children: r, loading: i, totalRows: a, onStat
 			}));
 		}
 		if (!f) {
-			let n = Object.entries(O);
+			let n = Object.entries(k);
 			for (let [r, i] of n) {
 				let n = t.find((e) => e.id === r);
 				n && (e = e.filter((e) => {
@@ -10885,137 +10885,138 @@ function $x({ columns: t, data: n, children: r, loading: i, totalRows: a, onStat
 				}));
 			}
 		}
-		if (!c && w) {
-			let n = t.find((e) => e.id === w.id);
+		if (!c && T) {
+			let n = t.find((e) => e.id === T.id);
 			n && e.sort((e, t) => {
 				let r;
-				return r = n.sortFn ? n.sortFn(e, t) : n.accessorKey ? String(e[n.accessorKey] ?? "").localeCompare(String(t[n.accessorKey] ?? "")) : 0, w.desc ? -r : r;
+				return r = n.sortFn ? n.sortFn(e, t) : n.accessorKey ? String(e[n.accessorKey] ?? "").localeCompare(String(t[n.accessorKey] ?? "")) : 0, T.desc ? -r : r;
 			});
 		}
 		return e;
 	}, [
 		n,
 		t,
-		w,
-		E,
-		O,
+		T,
+		D,
+		k,
 		c,
 		f
-	]), de = m ? a ?? n.length : ue.length, fe = p > 0 ? Math.max(1, Math.ceil(de / p)) : 1, pe = e.useMemo(() => {
-		if (p <= 0 || m) return ue;
-		let e = (A - 1) * p;
-		return ue.slice(e, e + p);
+	]), fe = m ? a ?? n.length : de.length, pe = p > 0 ? Math.max(1, Math.ceil(fe / p)) : 1, me = e.useMemo(() => {
+		if (p <= 0 || m) return de;
+		let e = (j - 1) * p;
+		return de.slice(e, e + p);
 	}, [
-		ue,
-		A,
+		de,
+		j,
 		p,
 		m
-	]), me = e.useCallback((e) => {
-		j(e);
-	}, []), he = e.useCallback((e) => v ? v(e) : String(e.id ?? ""), [v]), V = e.useCallback((e) => {
-		let t = he(e);
-		N((e) => {
+	]), he = e.useCallback((e) => {
+		M(e);
+	}, []), V = e.useCallback((e) => v ? v(e) : String(e.id ?? ""), [v]), ge = e.useCallback((e) => {
+		let t = V(e);
+		P((e) => {
 			let r = new Set(e);
 			r.has(t) ? r.delete(t) : r.add(t);
-			let i = n.filter((e) => r.has(he(e)));
+			let i = n.filter((e) => r.has(V(e)));
 			return b?.(i), r;
 		});
 	}, [
 		n,
-		he,
+		V,
 		b
-	]), ge = e.useCallback(() => {
-		N((e) => {
-			if (e.size === pe.length) return b?.([]), /* @__PURE__ */ new Set();
-			let t = new Set(pe.map((e) => he(e)));
-			return b?.(pe), t;
+	]), _e = e.useCallback(() => {
+		P((e) => {
+			if (e.size === me.length) return b?.([]), /* @__PURE__ */ new Set();
+			let t = new Set(me.map((e) => V(e)));
+			return b?.(me), t;
 		});
 	}, [
-		pe,
-		he,
+		me,
+		V,
 		b
-	]), _e = e.useCallback((e) => M.has(he(e)), [M, he]), ve = null, ye = null;
+	]), ve = e.useCallback((e) => N.has(V(e)), [N, V]), ye = null, be = null;
 	e.Children.forEach(r, (t) => {
-		e.isValidElement(t) && (t.type?.displayName === "DataTableToolbar" ? ve = t : t.type?.displayName === "DataTableEmpty" && (ye = t));
+		e.isValidElement(t) && (t.type?.displayName === "DataTableToolbar" ? ye = t : t.type?.displayName === "DataTableEmpty" && (be = t));
 	});
-	let be = (e) => !w || w.id !== e ? "↕" : w.desc ? "↓" : "↑", xe = pe.length === 0 && !i;
+	let xe = (e) => !T || T.id !== e ? "↕" : T.desc ? "↓" : "↑", Se = me.length === 0 && !i;
 	return /* @__PURE__ */ u("div", {
-		ref: I,
-		className: W("space-y-4", S),
+		ref: ee,
+		className: W(S ? "flex h-full min-h-0 flex-col gap-4" : "space-y-4", C),
 		children: [
-			(d || ve) && /* @__PURE__ */ u("div", {
-				className: "flex items-center gap-4",
+			(d || ye) && /* @__PURE__ */ u("div", {
+				className: "flex shrink-0 items-center gap-4",
 				children: [d && /* @__PURE__ */ l(Zt, {
 					placeholder: "Search...",
-					value: E,
-					onChange: (e) => B(e.target.value),
+					value: D,
+					onChange: (e) => se(e.target.value),
 					className: "max-w-sm"
 				}), /* @__PURE__ */ l("div", {
 					className: "ml-auto flex items-center gap-2",
-					children: ve
+					children: ye
 				})]
 			}),
 			/* @__PURE__ */ u(Ay, {
-				tableLayout: re ? "fixed" : void 0,
-				ref: ne,
+				tableLayout: L ? "fixed" : void 0,
+				ref: re,
+				containerClassName: S ? "flex-1 min-h-0 [&_thead]:sticky [&_thead]:top-0 [&_thead]:z-10 [&_thead_th]:bg-bg-card" : void 0,
 				children: [
-					re && /* @__PURE__ */ u("colgroup", { children: [y && /* @__PURE__ */ l("col", { style: { width: 40 } }), te.map((e) => {
-						let t = L.get(e.id);
+					L && /* @__PURE__ */ u("colgroup", { children: [y && /* @__PURE__ */ l("col", { style: { width: 40 } }), ne.map((e) => {
+						let t = R.get(e.id);
 						return /* @__PURE__ */ l("col", { style: t == null ? void 0 : { width: t } }, e.id);
 					})] }),
 					/* @__PURE__ */ l(jy, { children: /* @__PURE__ */ u(Py, { children: [y && /* @__PURE__ */ l(Fy, {
 						className: "w-10",
 						children: /* @__PURE__ */ l(Op, {
-							checked: pe.length > 0 && M.size === pe.length,
-							onCheckedChange: ge,
+							checked: me.length > 0 && N.size === me.length,
+							onCheckedChange: _e,
 							"aria-label": "Select all"
 						})
-					}), te.map((e) => /* @__PURE__ */ u(Fy, {
-						className: W(e.sortable && "cursor-pointer select-none", re && "relative", e.className),
-						style: !re && e.width ? { width: e.width } : void 0,
-						onClick: e.sortable ? () => oe(e.id) : void 0,
+					}), ne.map((e) => /* @__PURE__ */ u(Fy, {
+						className: W(e.sortable && "cursor-pointer select-none", L && "relative", e.className),
+						style: !L && e.width ? { width: e.width } : void 0,
+						onClick: e.sortable ? () => B(e.id) : void 0,
 						children: [/* @__PURE__ */ u("span", {
 							className: "inline-flex items-center",
 							children: [
-								typeof e.header == "function" ? e.header(w?.id === e.id ? w : null) : /* @__PURE__ */ l("span", { children: e.header }),
+								typeof e.header == "function" ? e.header(T?.id === e.id ? T : null) : /* @__PURE__ */ l("span", { children: e.header }),
 								e.sortable && typeof e.header != "function" && /* @__PURE__ */ l("span", {
 									"aria-hidden": !0,
 									className: "ml-1",
-									children: be(e.id)
+									children: xe(e.id)
 								}),
 								e.filterable && /* @__PURE__ */ l(Xx, {
 									column: e,
 									data: n,
-									value: O[e.id],
-									onChange: se,
-									onClear: ce,
-									onToggle: le
+									value: k[e.id],
+									onChange: ce,
+									onClear: le,
+									onToggle: ue
 								})
 							]
 						}), e.resizable && /* @__PURE__ */ l("div", {
 							role: "separator",
 							"aria-orientation": "vertical",
 							onMouseDown: (t) => {
-								t.preventDefault(), t.stopPropagation(), ie(e.id, t);
+								t.preventDefault(), t.stopPropagation(), ae(e.id, t);
 							},
-							className: W("absolute top-0 -right-px z-10 h-full w-2 cursor-col-resize", "after:absolute after:inset-y-0 after:left-1/2 after:-translate-x-1/2 after:w-0.5", R === e.id ? "after:bg-accent" : "after:bg-transparent hover:after:bg-accent/20", "after:transition-colors")
+							className: W("absolute top-0 -right-px z-10 h-full w-2 cursor-col-resize", "after:absolute after:inset-y-0 after:left-1/2 after:-translate-x-1/2 after:w-0.5", ie === e.id ? "after:bg-accent" : "after:bg-transparent hover:after:bg-accent/20", "after:transition-colors")
 						})]
 					}, e.id))] }) }),
-					/* @__PURE__ */ l(My, { children: xe ? /* @__PURE__ */ l(Py, { children: /* @__PURE__ */ l(Iy, {
-						colSpan: te.length + +!!y,
+					/* @__PURE__ */ l(My, { children: Se ? /* @__PURE__ */ l(Py, { children: /* @__PURE__ */ l(Iy, {
+						colSpan: ne.length + +!!y,
 						className: "h-24",
-						children: ye ?? /* @__PURE__ */ l(Ax, { title: "No results" })
-					}) }) : pe.map((e, t) => {
-						let n = m ? t : (A - 1) * p + t, r = g?.(e), i = y && /* @__PURE__ */ l(Iy, {
+						children: be ?? /* @__PURE__ */ l(Ax, { title: "No results" })
+					}) }) : me.map((e, t) => {
+						let n = m ? t : (j - 1) * p + t, r = g?.(e), i = y && /* @__PURE__ */ l(Iy, {
 							className: "w-10",
 							onClick: (e) => e.stopPropagation(),
 							children: /* @__PURE__ */ l(Op, {
-								checked: _e(e),
-								onCheckedChange: () => V(e),
+								checked: ve(e),
+								onCheckedChange: () => ge(e),
 								"aria-label": "Select row"
 							})
-						}), a = te.map((t) => /* @__PURE__ */ l(Iy, {
-							className: W(t.className, re && "overflow-hidden text-ellipsis"),
+						}), a = ne.map((t) => /* @__PURE__ */ l(Iy, {
+							className: W(t.className, L && "overflow-hidden text-ellipsis"),
 							children: r ? /* @__PURE__ */ l("a", {
 								href: r.href,
 								className: "contents",
@@ -11025,18 +11026,21 @@ function $x({ columns: t, data: n, children: r, loading: i, totalRows: a, onStat
 						return /* @__PURE__ */ u(Py, {
 							className: W((h || r) && "cursor-pointer", _?.(e, n)),
 							onClick: h ? () => h(e, n) : void 0,
-							"data-state": _e(e) ? "selected" : void 0,
+							"data-state": ve(e) ? "selected" : void 0,
 							children: [i, a]
 						}, v ? v(e) : t);
 					}) })
 				]
 			}),
-			p > 0 && fe > 1 && /* @__PURE__ */ l(jx, {
-				page: A,
-				pageSize: p,
-				totalItems: de,
-				totalPages: fe,
-				onPageChange: me
+			p > 0 && pe > 1 && /* @__PURE__ */ l("div", {
+				className: S ? "shrink-0" : void 0,
+				children: /* @__PURE__ */ l(jx, {
+					page: j,
+					pageSize: p,
+					totalItems: fe,
+					totalPages: pe,
+					onPageChange: he
+				})
 			})
 		]
 	});