@ryuzaki13/react-foundation-ui 0.1.0

package/dist/chunks/base-table-DVje02Zi.js

@@ -0,0 +1,514 @@
+import { t as e } from "./table-column-interactions-DPyJDD7P.js";
+import { n as t } from "./DropdownMenu-Ds-trH4M.js";
+import { r as n } from "./Grid-ByIIytjh.js";
+import { c as r, d as i, h as a, i as o } from "./misc-DrmMj8GO.js";
+import { s, t as c } from "./sortable-CwDHC3CA.js";
+import { cn as l, handleKeyboardActivation as u } from "@ryuzaki13/react-foundation-lib/utils";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+import { useCallback as m, useEffect as h, useMemo as g, useRef as _, useState as v } from "react";
+import { compileFormattersPipelineRuntimeFields as y, resolveValueStateClassName as b } from "@ryuzaki13/react-foundation-lib/formatters";
+import { buildTableColumnLayout as x, getTableColumnFormattingMeta as ee, getTableColumnMeta as S, isTableInteractiveElement as te, normalizeTableColumnOrder as C, normalizeTableColumnSizing as w, patchTableColumnWidth as ne, removeTableColumnWidth as re, resolveReorderedTableHeaderColumns as ie, resolveTableColumnOrder as T, resolveTableLength as E } from "@ryuzaki13/react-foundation-lib/table";
+import { filterAndDeduplicateIds as D, pickExistingMapValues as ae } from "@ryuzaki13/react-foundation-lib/array";
+import { flexRender as O, functionalUpdate as k } from "@tanstack/react-table";
+import { restrictToHorizontalAxis as oe } from "@dnd-kit/modifiers";
+import { useDndSortableSensors as se } from "@ryuzaki13/react-foundation-lib/hooks";
+//#region src/base-table/lib/columnPinning.ts
+function A(e) {
+	return {
+		left: Array.from(new Set((e?.left ?? []).filter((e) => typeof e == "string" && e.trim().length > 0))),
+		right: []
+	};
+}
+function j(e, t) {
+	let n = t?.[e.id];
+	if (typeof n == "number" && Number.isFinite(n) && n > 0) return `${Math.floor(n)}px`;
+	let r = S(e.columnDef)?.width ?? 4;
+	return typeof r == "number" && (r = Math.max(r, 4)), E(r);
+}
+function M(e, t) {
+	let n = e.getAllLeafColumns().filter((e) => e.getIsVisible()), r = new Map(n.map((e) => [e.id, e])), i = n.map((e) => e.id), a = D(t.columnPinning.left, i), o = D(t.columnPinning.right, i), s = /* @__PURE__ */ new Set([...a, ...o]), c = [];
+	for (let e of n) s.has(e.id) || c.push(e.id);
+	let l = T({
+		ids: c,
+		order: t.columnOrder
+	});
+	return ae([
+		...a,
+		...l,
+		...o
+	], r);
+}
+function N(e, t) {
+	let n = M(e, t), r = new Map(n.map((e) => [e.id, e]));
+	return x({
+		ids: n.map((e) => e.id),
+		getWidth: (e) => {
+			let n = r.get(e);
+			return n ? j(n, t.columnSizing) : "0px";
+		}
+	}).flatMap((e) => {
+		let t = r.get(e.id);
+		return t ? [{
+			...e,
+			column: t
+		}] : [];
+	});
+}
+function ce(e, t) {
+	let n = {}, r = [];
+	for (let i of M(e, t)) i.getIsPinned() === "left" && (n[i.id] = P(r), r.push(j(i, t.columnSizing)));
+	return n;
+}
+function P(e) {
+	return e.length === 0 ? "0px" : e.length === 1 ? e[0] : `calc(${e.join(" + ")})`;
+}
+//#endregion
+//#region src/base-table/lib/formatting.ts
+function F(e) {
+	if (typeof e.id == "string" && e.id.trim()) return e.id;
+	if ("accessorKey" in e && typeof e.accessorKey == "string" && e.accessorKey.trim()) return e.accessorKey;
+}
+function I(e) {
+	return "cell" in e && e.cell != null;
+}
+function L(e, t) {
+	for (let n of e) {
+		if ("columns" in n && Array.isArray(n.columns) && n.columns.length > 0) {
+			L(n.columns, t);
+			continue;
+		}
+		t(n);
+	}
+}
+function R(e) {
+	let t = {}, n = /* @__PURE__ */ new Set();
+	return L(e, (e) => {
+		let r = F(e);
+		if (!r) return;
+		I(e) && n.add(r);
+		let i = ee(e);
+		i && (t[r] = {
+			...i,
+			id: i.id ?? r,
+			role: i.role ?? "dimension",
+			type: i.type ?? "string"
+		});
+	}), {
+		runtimeByColumnId: y(t),
+		customCellColumnIds: n
+	};
+}
+function z(e) {
+	return e.customCellColumnIds.has(e.columnId) ? !1 : !!e.runtimeByColumnId[e.columnId];
+}
+//#endregion
+//#region src/base-table/lib/mergeDuplicates.ts
+function B(e) {
+	return e != null && e !== "";
+}
+function V(e, t) {
+	return e.map((e) => ({
+		row: e,
+		boundaryKey: t(e),
+		cellByColumnId: new Map(e.getVisibleCells().map((e) => [e.column.id, e]))
+	}));
+}
+function H({ rows: e, columns: t, resolveRowBoundaryKey: n = () => "__all_rows__", excludeColumnIds: r }) {
+	let i = t.filter((e) => r?.has(e.id) ? !1 : S(e.columnDef)?.mergeDuplicates === !0);
+	if (e.length === 0 || i.length === 0) return /* @__PURE__ */ new Map();
+	let a = V(e, n), o = /* @__PURE__ */ new Map();
+	for (let e of i) {
+		let t = -1, n, r, i = (i) => {
+			if (t !== -1) {
+				if (i - t <= 1) {
+					t = -1, n = void 0, r = void 0;
+					return;
+				}
+				for (let n = t; n < i; n += 1) {
+					let r = a[n]?.cellByColumnId.get(e.id)?.id;
+					r && o.set(r, {
+						hideContent: n > t,
+						mergeWithNext: n < i - 1
+					});
+				}
+				t = -1, n = void 0, r = void 0;
+			}
+		};
+		for (let o = 0; o < a.length; o += 1) {
+			let s = a[o], c = s?.cellByColumnId.get(e.id), l = c?.getValue();
+			if (!c || !B(l)) {
+				i(o);
+				continue;
+			}
+			if (t === -1) {
+				t = o, n = l, r = s?.boundaryKey;
+				continue;
+			}
+			(!Object.is(r, s?.boundaryKey) || !Object.is(n, l)) && (i(o), t = o, n = l, r = s?.boundaryKey);
+		}
+		i(a.length);
+	}
+	return o;
+}
+//#endregion
+//#region src/base-table/model/useTableColumnOrder.ts
+function U({ columnOrder: e, defaultColumnOrder: t, onColumnOrderChange: n }) {
+	let [r, i] = v(void 0), a = g(() => C(e ?? r ?? t), [
+		e,
+		t,
+		r
+	]);
+	return {
+		columnOrder: a,
+		onColumnOrderChange: m((t) => {
+			let r = C(k(t, a));
+			e === void 0 && i(r), n?.(r);
+		}, [
+			e,
+			n,
+			a
+		])
+	};
+}
+//#endregion
+//#region src/base-table/model/useTableColumnPinning.ts
+function W({ columnPinning: e, defaultColumnPinning: t, onColumnPinningChange: n }) {
+	let [r, i] = v(void 0), a = g(() => A(e ?? r ?? t), [
+		e,
+		t,
+		r
+	]);
+	return {
+		columnPinning: a,
+		onColumnPinningChange: m((t) => {
+			let r = { left: A(k(t, a)).left };
+			e === void 0 && i(r), n?.(r);
+		}, [
+			e,
+			n,
+			a
+		])
+	};
+}
+//#endregion
+//#region src/base-table/model/useTableColumnSizing.ts
+function G({ columnSizing: e, defaultColumnSizing: t, columnResizeMinWidth: n, onColumnSizingChange: r }) {
+	let [i, a] = v(void 0), o = g(() => w(e ?? i ?? t, n), [
+		n,
+		e,
+		t,
+		i
+	]);
+	return {
+		columnSizing: o,
+		onColumnSizingChange: m((t) => {
+			let i = w(k(t, o), n);
+			e === void 0 && a(i), r?.(i);
+		}, [
+			n,
+			e,
+			r,
+			o
+		])
+	};
+}
+//#endregion
+//#region src/base-table/model/useTableColumnVisibility.ts
+function K({ columnVisibility: e, defaultColumnVisibility: t, onColumnVisibilityChange: n }) {
+	let [r, i] = v(void 0), a = g(() => e ?? r ?? t ?? {}, [
+		e,
+		t,
+		r
+	]);
+	return {
+		columnVisibility: a,
+		onColumnVisibilityChange: m((t) => {
+			let r = k(t, a);
+			e === void 0 && i(r), n?.(r);
+		}, [
+			e,
+			n,
+			a
+		])
+	};
+}
+var q = {
+	root: "_0rNBMr",
+	headerContextMenuTrigger: "gp-7Db",
+	table: "Ck-sXP",
+	head: "-F3gli",
+	pinnedLeftBoundary: "buIdkU",
+	headerRow: "_2VJbvj",
+	headerCell: "AD8NkG",
+	headerCellContent: "qqixKn",
+	headerCellDraggable: "dVDRNv",
+	headerCellDragging: "klOoMz",
+	headerCellPinnedLeft: "CpjV-N",
+	bodyRow: "_7D8xa9",
+	bodyRowInteractive: "_3j87pS",
+	bodyCell: "uwojkJ",
+	bodyRowSelected: "lLsmW6",
+	bodyCellPinnedLeft: "xKvBFg",
+	bodyCellMergedWithNext: "QIS3xA",
+	feedbackCell: "a580w0",
+	fetchingRow: "UOhaMF",
+	noData: "DtKAgs"
+};
+//#endregion
+//#region src/base-table/ui/BaseTableHeaderCell.tsx
+function J({ header: t, isPinnedLeft: n, left: r, isPinnedBoundary: i, isDragDisabled: a, enableColumnResizing: o, enableColumnReordering: s, columnResizeMinWidth: c, renderHeaderContent: u, onResizeColumn: d, onResetColumnWidth: p }) {
+	return /* @__PURE__ */ f(e, {
+		columnId: t.column.id,
+		dragDisabled: !s || a,
+		draggingClassName: q.headerCellDragging,
+		className: l(q.headerCell, n && q.headerCellPinnedLeft, i && q.pinnedLeftBoundary),
+		style: { ...n ? { left: r } : {} },
+		resizeHandle: o && !t.isPlaceholder ? {
+			columnId: t.column.id,
+			minWidth: c,
+			onResize: d,
+			onReset: p
+		} : void 0,
+		children: ({ listeners: e, setActivatorElement: n }) => /* @__PURE__ */ f("div", {
+			ref: s && !a ? n : void 0,
+			className: l(q.headerCellContent, s && !a && q.headerCellDraggable),
+			...s && !a ? e ?? {} : {},
+			children: u(t)
+		})
+	});
+}
+//#endregion
+//#region src/base-table/ui/BaseTable.tsx
+function Y(e, t) {
+	let n = e.getLeafHeaders().map((e) => t.get(e.column.id)).filter((e) => typeof e == "number");
+	return n.length ? Math.min(...n) : 2 ** 53 - 1;
+}
+function le(e, t) {
+	let n = e.getLeftHeaderGroups(), r = e.getCenterHeaderGroups(), i = e.getRightHeaderGroups(), a = Math.max(n.length, r.length, i.length);
+	return Array.from({ length: a }, (e, a) => [
+		...n[a]?.headers ?? [],
+		...r[a]?.headers ?? [],
+		...i[a]?.headers ?? []
+	].filter((e) => e.isPlaceholder ? !0 : e.getLeafHeaders().some((e) => t.has(e.column.id))).sort((e, n) => Y(e, t) - Y(n, t)));
+}
+function ue(e, t, n) {
+	let r = e.getLeafHeaders().map((e) => e.column.id);
+	return r.length > 0 && r.every((e) => e in t) ? {
+		isPinnedLeft: !0,
+		left: t[r[0]] ?? "0px",
+		isPinnedBoundary: !!(n && r.includes(n))
+	} : {
+		isPinnedLeft: !1,
+		isPinnedBoundary: !1
+	};
+}
+function de(e, t) {
+	return T({
+		ids: e.getAllLeafColumns().map((e) => e.id),
+		order: t.columnOrder
+	});
+}
+function fe({ table: e, columnState: o, title: h, isLoading: _, isFetching: v, className: y, minHeight: b = "15em", tableClassName: x, selectionMode: ee = "none", scrollableRef: C, interactiveElementSelector: w, onActivateRow: T, isRowInteractive: E, getRowClassName: D, getCellClassName: ae, getCellStyle: k, getCellLayout: A, renderCellContent: j, renderHeaderContextMenu: M, enableColumnResizing: P = !1, enableColumnReordering: F = !1, columnResizeMinWidth: I, afterTableContent: L }) {
+	let R = N(e, o), z = g(() => R.map((e) => e.column), [R]), B = g(() => R.map((e) => e.id), [R]), V = g(() => new Map(B.map((e, t) => [e, t])), [B]), H = g(() => new Set(B), [B]), U = se({ activationDistance: 8 }), W = le(e, V), G = ce(e, o), K = z.filter((e) => e.getIsPinned() === "left").at(-1)?.id, Y = g(() => o.columnPinning.left ?? [], [o.columnPinning.left]), fe = g(() => new Set(Y), [Y]), X = e.getRowModel(), Z = !!h, Q = X.rows.length > 0, pe = m((e) => [...e].sort((e, t) => (V.get(e.column.id) ?? 2 ** 53 - 1) - (V.get(t.column.id) ?? 2 ** 53 - 1)), [V]), me = m((t, n) => {
+		e.setColumnSizing((e) => ne(e, t, n, I));
+	}, [I, e]), $ = m((t) => {
+		e.setColumnSizing((e) => re(e, t));
+	}, [e]), he = m((t) => {
+		let n = s({
+			event: t,
+			items: B
+		});
+		if (!n) return;
+		let r = ie({
+			order: de(e, o),
+			headerIds: B,
+			pinnedIds: Y,
+			activeId: String(n.activeId),
+			overId: String(n.overId)
+		});
+		r && e.setColumnOrder(r);
+	}, [
+		o,
+		Y,
+		e,
+		B
+	]), ge = (e) => {
+		if (e.isPlaceholder) return null;
+		let n = O(e.column.columnDef.header, e.getContext()), r = M?.(e);
+		return r ? /* @__PURE__ */ p(t, { children: [/* @__PURE__ */ f(t.Trigger, { children: /* @__PURE__ */ f("div", {
+			className: q.headerContextMenuTrigger,
+			tabIndex: 0,
+			children: n
+		}) }), /* @__PURE__ */ f(t.Content, { children: r })] }) : n;
+	}, _e = (e, t) => {
+		!(E?.(t) ?? !!T) || !T || te(e.target, w) || T(t);
+	}, ve = (e, t) => {
+		!(E?.(t) ?? !!T) || !T || te(e.target, w) || u(e, () => T(t));
+	};
+	return /* @__PURE__ */ p(n, {
+		templateRows: Z ? "auto 1fr" : "1fr",
+		className: l("overflowHidden w100 h100", q.root, y),
+		style: { minHeight: b },
+		children: [Z && /* @__PURE__ */ f("h3", {
+			className: "marginBottomXs",
+			children: h
+		}), /* @__PURE__ */ p("div", {
+			className: "surface0 overflowHidden relative w100 h100",
+			children: [/* @__PURE__ */ f(r, {
+				ref: C,
+				className: "w100 h100",
+				children: /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ p("table", {
+					className: l(q.table, x),
+					children: [
+						/* @__PURE__ */ f("colgroup", { children: R.map((e) => /* @__PURE__ */ f("col", { style: e.width ? { width: e.width } : void 0 }, e.id)) }),
+						/* @__PURE__ */ f("thead", {
+							className: l("stickyTop", q.head),
+							children: F ? /* @__PURE__ */ f(c.Root, {
+								sensors: U,
+								modifiers: [oe],
+								onDragEnd: he,
+								children: /* @__PURE__ */ f(c.Container, {
+									containerId: "base-table-header",
+									items: B,
+									layout: "horizontal",
+									children: W.map((e, t) => /* @__PURE__ */ f("tr", {
+										className: q.headerRow,
+										children: e.map((e) => {
+											let { isPinnedLeft: t, left: n, isPinnedBoundary: r } = ue(e, G, K);
+											return /* @__PURE__ */ f(J, {
+												header: e,
+												isPinnedLeft: t,
+												left: n,
+												isPinnedBoundary: r,
+												isDragDisabled: e.isPlaceholder || !H.has(e.column.id) || fe.has(e.column.id),
+												enableColumnResizing: P,
+												enableColumnReordering: F,
+												columnResizeMinWidth: I,
+												renderHeaderContent: ge,
+												onResizeColumn: me,
+												onResetColumnWidth: $
+											}, e.id);
+										})
+									}, `header-group-${t}`))
+								})
+							}) : W.map((e, t) => /* @__PURE__ */ f("tr", {
+								className: q.headerRow,
+								children: e.map((e) => {
+									let { isPinnedLeft: t, left: n, isPinnedBoundary: r } = ue(e, G, K);
+									return /* @__PURE__ */ f(J, {
+										header: e,
+										isPinnedLeft: t,
+										left: n,
+										isPinnedBoundary: r,
+										isDragDisabled: !0,
+										enableColumnResizing: P,
+										enableColumnReordering: F,
+										columnResizeMinWidth: I,
+										renderHeaderContent: ge,
+										onResizeColumn: me,
+										onResetColumnWidth: $
+									}, e.id);
+								})
+							}, `header-group-${t}`))
+						}),
+						/* @__PURE__ */ p("tbody", { children: [X.rows.map((e) => {
+							let t = E?.(e) ?? !!T;
+							return /* @__PURE__ */ f("tr", {
+								className: l(q.bodyRow, t && q.bodyRowInteractive, e.getIsSelected() && q.bodyRowSelected, D?.(e)),
+								"aria-selected": ee === "none" ? void 0 : e.getIsSelected(),
+								tabIndex: t ? 0 : void 0,
+								onClick: (t) => _e(t, e),
+								onKeyDown: (t) => ve(t, e),
+								children: pe([
+									...e.getLeftVisibleCells(),
+									...e.getCenterVisibleCells(),
+									...e.getRightVisibleCells()
+								]).map((t) => {
+									let n = S(t.column.columnDef), r = O(t.column.columnDef.cell, t.getContext()), i = {
+										row: e,
+										cell: t,
+										defaultContent: r,
+										columnMeta: n
+									}, a = A?.(i), o = t.column.getIsPinned() === "left", s = t.column.id === K, c = {
+										...n?.align ? { textAlign: n.align } : {},
+										...o ? { left: G[t.column.id] ?? "0px" } : {},
+										...k?.(i) ?? {}
+									};
+									return /* @__PURE__ */ f("td", {
+										className: l(q.bodyCell, o && q.bodyCellPinnedLeft, s && q.pinnedLeftBoundary, a?.mergeWithNext && q.bodyCellMergedWithNext, ae?.(i)),
+										style: c,
+										children: a?.hideContent ? null : j ? j(i) : r
+									}, t.id);
+								})
+							}, e.id);
+						}), v && Q && /* @__PURE__ */ f("tr", {
+							className: q.fetchingRow,
+							children: /* @__PURE__ */ f("td", {
+								colSpan: Math.max(z.length, 1),
+								className: q.feedbackCell,
+								children: /* @__PURE__ */ f(a, {})
+							})
+						})] })
+					]
+				}), L] })
+			}), /* @__PURE__ */ p("div", {
+				className: "absolute inset0 border radiusSm",
+				style: {
+					pointerEvents: "none",
+					zIndex: 20
+				},
+				children: [!_ && !v && !Q && /* @__PURE__ */ f(i, { className: q.noData }), _ && !Q && /* @__PURE__ */ f(a, { className: "h100 w100" })]
+			})]
+		})]
+	});
+}
+var X = {
+	formattedCellValue: "jPPyP7",
+	formattedCell: "Oa7e5P",
+	formattedCellInner: "KhQtgF"
+};
+//#endregion
+//#region src/base-table/ui/FormattedTableCell.tsx
+function Z({ displayValue: e, align: t = "left" }) {
+	let n = _(null), r = e.showValue, i = e.showIcon ? e.icon : void 0, a = r && e.value != null ? String(e.value) : "", s = b(e.state), c = t === "right" ? "flex-end" : t === "center" ? "center" : "flex-start", u = t === "center" ? "center" : t === "right" ? "right" : "left";
+	return h(() => {
+		let t = n.current;
+		if (!t) return;
+		let r = () => {
+			if (!e.overflowTooltip || !a) {
+				t.removeAttribute("title");
+				return;
+			}
+			if (t.scrollWidth > t.clientWidth + 1) {
+				t.setAttribute("title", a);
+				return;
+			}
+			t.removeAttribute("title");
+		};
+		if (r(), typeof ResizeObserver > "u") return;
+		let i = new ResizeObserver(r);
+		return i.observe(t), () => {
+			i.disconnect();
+		};
+	}, [e.overflowTooltip, a]), /* @__PURE__ */ f("div", {
+		className: l(X.formattedCell, s),
+		children: /* @__PURE__ */ p("div", {
+			className: X.formattedCellInner,
+			style: { justifyContent: c },
+			children: [
+				e.iconPosition === "left" ? /* @__PURE__ */ f(o, { state: i }) : null,
+				r ? /* @__PURE__ */ f("span", {
+					ref: n,
+					className: l("textOverflow", X.formattedCellValue),
+					style: { textAlign: u },
+					children: a
+				}) : null,
+				e.iconPosition === "right" ? /* @__PURE__ */ f(o, { state: i }) : null
+			]
+		})
+	});
+}
+//#endregion
+export { W as a, R as c, z as d, N as f, j as g, A as h, G as i, I as l, M as m, fe as n, U as o, ce as p, K as r, H as s, Z as t, F as u };
+
+//# sourceMappingURL=base-table-DVje02Zi.js.map