@payfit/unity-components/dist/esm/components/table/Table.js

import { TableContextProvider as e, useTableContext as t } from "./Table.context.js";
import n, { forwardRef as r, useCallback as i, useImperativeHandle as a, useMemo as o, useRef as s } from "react";
import { uyMerge as c, uyTv as l } from "@payfit/unity-themes";
import { jsx as u, jsxs as d } from "react/jsx-runtime";
import { useResizeObserver as f } from "usehooks-ts";
import { useVirtualizer as p } from "@tanstack/react-virtual";
//#region src/components/table/Table.tsx
var m = l({
	base: [
		"uy:w-full uy:border uy:border-solid uy:border-border-neutral uy:rounded-100",
		"uy:relative uy:flex uy:flex-col uy:overflow-hidden",
		"uy:min-h-(--uy-table-min-rows)"
	],
	variants: { height: {
		fillSpace: ["uy:h-full"],
		fixed: ["uy:max-h-(--uy-table-max-rows)"]
	} },
	defaultVariants: { height: "fixed" }
}), h = r(({ minRows: e = 10, maxRows: t, children: n }, r) => /* @__PURE__ */ u("div", {
	ref: r,
	className: m({ height: t === void 0 ? "fillSpace" : "fixed" }),
	"data-unity-slot": "table-root",
	style: {
		"--uy-table-min-rows": `calc(var(--uy-spacing-600) * ${e})`,
		"--uy-table-max-rows": `calc(var(--uy-spacing-600) * ${t})`
	},
	children: n
}));
h.displayName = "TableRoot";
var g = l({
	slots: {
		wrapper: ["uy:flex-1 uy:bg-surface-neutral", "uy:w-full uy:overflow-x-auto uy:overflow-y-auto"],
		table: [
			"uy:relative",
			"uy:text-left uy:typography-body uy:text-content-neutral uy:border-collapse",
			"uy:focus:outline-2 uy:focus:outline-utility-focus-ring uy:focus:outline-offset-[-2px]"
		]
	},
	variants: {
		horizontalScroll: {
			true: { table: "uy:w-max" },
			false: {
				wrapper: "uy:overflow-x-hidden",
				table: "uy:w-fit"
			}
		},
		layout: {
			fixed: {
				wrapper: "uy:overflow-x-hidden",
				table: "uy:w-full uy:table-fixed"
			},
			auto: { table: "uy:min-w-full uy:table-auto" }
		}
	},
	defaultVariants: {
		horizontalScroll: !0,
		layout: "auto"
	}
}), _ = r((t, r) => {
	let { children: i, label: c, description: l, isHorizontalScrollEnabled: d = !0, enableVirtualization: f = !1, estimatedRowHeight: m = 40, overscan: h = 5, layout: g = "auto", ..._ } = t, y = s(null), { rowCount: b, columnCount: x } = o(() => {
		let e = 0, t = 0;
		return n.Children.forEach(i, (r) => {
			if (!n.isValidElement(r)) return;
			let i = n.Children.toArray(r.props.children).filter((e) => n.isValidElement(e));
			t += i.length, i.forEach((t) => {
				if (!n.isValidElement(t)) return;
				let r = n.Children.toArray(t.props.children).filter((e) => n.isValidElement(e));
				e = Math.max(e, r.length);
			});
		}), {
			rowCount: t,
			columnCount: e
		};
	}, [i]);
	return a(r, () => ({ scrollToTop: () => {
		let e = y.current, t = e?.closest("[data-unity-slot=\"table-root\"]"), n;
		if (t ? n = t : e && (n = e), n) {
			if (typeof n.scrollTo == "function") {
				n.scrollTo({
					top: 0,
					behavior: "smooth"
				});
				return;
			}
			n.scrollTop = 0;
		}
	} })), /* @__PURE__ */ u(e, {
		rowCount: b,
		columnCount: x,
		virtualizer: p({
			count: f ? b : 0,
			getScrollElement: () => y.current,
			estimateSize: () => m,
			overscan: h
		}),
		enableVirtualization: f,
		children: /* @__PURE__ */ u(v, {
			scrollContainerRef: y,
			rowCount: b,
			columnCount: x,
			label: c,
			description: l,
			isHorizontalScrollEnabled: d,
			layout: g,
			..._,
			children: i
		})
	});
});
_.displayName = "Table";
var v = (e) => {
	let { children: n, label: r, description: a, scrollContainerRef: s, layout: l, rowCount: p, columnCount: m, onKeyDown: h, isHorizontalScrollEnabled: _ = !0, ...v } = e, { wrapper: y, table: b } = g({
		horizontalScroll: _,
		layout: l
	}), { keyboardNavigation: x } = t(), { tableRef: S, handleTableKeyDown: C } = x, { height: w = 0 } = f({
		ref: s,
		box: "border-box"
	}), T = i((e) => {
		e.key !== "Tab" && (C(e), h?.(e));
	}, [C, h]), E = s.current?.closest("[data-unity-slot=\"table-root\"]"), D = o(() => {
		if (!E || p === 0) return !1;
		let e = E.clientHeight;
		return (S.current?.clientHeight ?? 0) / e < .9;
	}, [
		E,
		p,
		S,
		w
	]);
	return /* @__PURE__ */ d("div", {
		className: c(y()),
		ref: s,
		style: { "--uy-table-has-remaining-space": D ? "1" : "0" },
		children: [/* @__PURE__ */ d("table", {
			ref: S,
			className: c(b()),
			role: "grid",
			"aria-rowcount": p,
			"aria-colcount": m,
			"aria-label": r,
			"aria-describedby": a ? `table-desc-${S.current?.id}` : void 0,
			onKeyDown: T,
			...v,
			children: [n, a && /* @__PURE__ */ u("caption", {
				id: `table-desc-${S.current?.id}`,
				className: "uy:sr-only",
				children: a
			})]
		}), /* @__PURE__ */ u("div", {
			className: "uy:sr-only",
			"aria-live": "polite",
			children: "Table navigation: Use arrow keys to move between cells. Tab key exits the table. Home and End keys navigate to the first and last cell in a row. Page Up and Page Down move between rows."
		})]
	});
};
v.displayName = "TableContent";
//#endregion
export { _ as Table, h as TableRoot };