@ryuzaki13/react-foundation-ui 1.0.1 → 1.0.2

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

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