@payfit/unity-components 2.47.4 → 2.47.6

package/dist/esm/components/table/Table.context.js

@@ -1,43 +1,37 @@
-import { jsx as l } from "react/jsx-runtime";
-import { createContext as i, useContext as r } from "react";
-import { useTableKeyboardNavigation as u } from "./hooks/useTableKeyboardNavigation.js";
-const d = {
-  focusedCell: { rowIndex: 0, colIndex: 0 },
-  isCellFocused: () => !1,
-  handleCellKeyDown: () => {
-  },
-  handleTableKeyDown: () => {
-  },
-  handleTableFocus: () => {
-  },
-  handleCellFocus: () => {
-  },
-  tableRef: { current: null },
-  focusCell: () => {
-  },
-  focusRow: () => {
-  }
-}, c = {
-  rowCount: 0,
-  columnCount: 0,
-  keyboardNavigation: d,
-  enableVirtualization: !1
-}, e = i(c);
-function C() {
-  return r(e);
+import { useTableKeyboardNavigation as e } from "./hooks/useTableKeyboardNavigation.js";
+import { createContext as t, useContext as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+var i = t({
+	rowCount: 0,
+	columnCount: 0,
+	keyboardNavigation: {
+		focusedCell: {
+			rowIndex: 0,
+			colIndex: 0
+		},
+		isCellFocused: () => !1,
+		handleCellKeyDown: () => void 0,
+		handleTableKeyDown: () => void 0,
+		handleTableFocus: () => void 0,
+		handleCellFocus: () => void 0,
+		tableRef: { current: null },
+		focusCell: () => void 0,
+		focusRow: () => void 0
+	},
+	enableVirtualization: !1
+});
+function a() {
+	return n(i);
 }
-function b({
-  children: o,
-  ...t
-}) {
-  const n = u(), a = {
-    ...t,
-    keyboardNavigation: n
-  };
-  return /* @__PURE__ */ l(e.Provider, { value: a, children: o });
+function o({ children: t, ...n }) {
+	let a = e(), o = {
+		...n,
+		keyboardNavigation: a
+	};
+	return /* @__PURE__ */ r(i.Provider, {
+		value: o,
+		children: t
+	});
 }
-export {
-  e as TableContext,
-  b as TableContextProvider,
-  C as useTableContext
-};
+//#endregion
+export { o as TableContextProvider, a as useTableContext };

package/dist/esm/components/table/Table.js

@@ -1,228 +1,158 @@
-import { jsx as p, jsxs as R } from "react/jsx-runtime";
-import i, { forwardRef as z, useRef as V, useMemo as H, useImperativeHandle as k, useCallback as D } from "react";
-import { uyTv as S, uyMerge as E } from "@payfit/unity-themes";
-import { useVirtualizer as M } from "@tanstack/react-virtual";
-import { useResizeObserver as K } from "usehooks-ts";
-import { TableContextProvider as U, useTableContext as $ } from "./Table.context.js";
-const P = S({
-  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",
-    // always force minimum 10 rows of height
-    "uy:min-h-(--uy-table-min-rows)"
-  ],
-  variants: {
-    height: {
-      // allow table to fill available height of container
-      fillSpace: ["uy:h-full"],
-      // fixed maximum height, defined by number of rows
-      fixed: ["uy:max-h-(--uy-table-max-rows)"]
-    }
-  },
-  defaultVariants: {
-    height: "fixed"
-  }
-}), j = z(
-  ({ minRows: f = 10, maxRows: s, children: o }, l) => {
-    const b = P({ height: s !== void 0 ? "fixed" : "fillSpace" });
-    return /* @__PURE__ */ p(
-      "div",
-      {
-        ref: l,
-        className: b,
-        "data-unity-slot": "table-root",
-        style: {
-          "--uy-table-min-rows": `calc(var(--uy-spacing-600) * ${f})`,
-          "--uy-table-max-rows": `calc(var(--uy-spacing-600) * ${s})`
-        },
-        children: o
-      }
-    );
-  }
-);
-j.displayName = "TableRoot";
-const A = S({
-  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: {
-        // Enable horizontal scrolling and allow table to exceed container width
-        table: "uy:w-max"
-      },
-      false: {
-        // Disable horizontal scrolling
-        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"
-  }
-}), _ = z((f, s) => {
-  const {
-    children: o,
-    label: l,
-    description: u,
-    isHorizontalScrollEnabled: b = !0,
-    enableVirtualization: c = !1,
-    estimatedRowHeight: v = 40,
-    overscan: w = 5,
-    layout: x = "auto",
-    ...T
-  } = f, h = V(null), { rowCount: m, columnCount: g } = H(() => {
-    let t = 0, r = 0;
-    return i.Children.forEach(o, (e) => {
-      if (!i.isValidElement(e)) return;
-      const y = i.Children.toArray(
-        e.props.children
-      ).filter((d) => i.isValidElement(d));
-      r += y.length, y.forEach((d) => {
-        if (!i.isValidElement(d)) return;
-        const n = i.Children.toArray(
-          d.props.children
-        ).filter((C) => i.isValidElement(C));
-        t = Math.max(t, n.length);
-      });
-    }), { rowCount: r, columnCount: t };
-  }, [o]);
-  k(s, () => ({
-    scrollToTop: () => {
-      const t = h.current, r = t?.closest(
-        '[data-unity-slot="table-root"]'
-      );
-      let e;
-      if (r ? e = r : t && (e = t), !!e) {
-        if (typeof e.scrollTo == "function") {
-          e.scrollTo({ top: 0, behavior: "smooth" });
-          return;
-        }
-        e.scrollTop = 0;
-      }
-    }
-  }));
-  const a = M({
-    count: c ? m : 0,
-    getScrollElement: () => h.current,
-    estimateSize: () => v,
-    overscan: w
-  });
-  return /* @__PURE__ */ p(
-    U,
-    {
-      rowCount: m,
-      columnCount: g,
-      virtualizer: a,
-      enableVirtualization: c,
-      children: /* @__PURE__ */ p(
-        N,
-        {
-          scrollContainerRef: h,
-          rowCount: m,
-          columnCount: g,
-          label: l,
-          description: u,
-          isHorizontalScrollEnabled: b,
-          layout: x,
-          ...T,
-          children: o
-        }
-      )
-    }
-  );
+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";
-const N = (f) => {
-  const {
-    children: s,
-    label: o,
-    description: l,
-    scrollContainerRef: u,
-    layout: b,
-    rowCount: c,
-    columnCount: v,
-    onKeyDown: w,
-    isHorizontalScrollEnabled: x = !0,
-    ...T
-  } = f, { wrapper: h, table: m } = A({
-    horizontalScroll: x,
-    layout: b
-  }), { keyboardNavigation: g } = $(), { tableRef: a, handleTableKeyDown: t } = g, { height: r = 0 } = K({
-    ref: u,
-    box: "border-box"
-  }), e = D(
-    (n) => {
-      n.key !== "Tab" && (t(n), w?.(n));
-    },
-    [t, w]
-  ), y = u.current?.closest(
-    '[data-unity-slot="table-root"]'
-  ), d = H(() => {
-    if (!y || c === 0) return !1;
-    const n = y.clientHeight;
-    return (a.current?.clientHeight ?? 0) / n < 0.9;
-  }, [y, c, a, r]);
-  return /* @__PURE__ */ R(
-    "div",
-    {
-      className: E(h()),
-      ref: u,
-      style: {
-        "--uy-table-has-remaining-space": d ? "1" : "0"
-      },
-      children: [
-        /* @__PURE__ */ R(
-          "table",
-          {
-            ref: a,
-            className: E(m()),
-            role: "grid",
-            "aria-rowcount": c,
-            "aria-colcount": v,
-            "aria-label": o,
-            "aria-describedby": l ? `table-desc-${a.current?.id}` : void 0,
-            onKeyDown: e,
-            ...T,
-            children: [
-              s,
-              l && /* @__PURE__ */ p(
-                "caption",
-                {
-                  id: `table-desc-${a.current?.id}`,
-                  className: "uy:sr-only",
-                  children: l
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ p("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." })
-      ]
-    }
-  );
-};
-N.displayName = "TableContent";
-export {
-  _ as Table,
-  j as TableRoot
+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 };