@payfit/unity-components 2.14.1 → 2.15.0

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

@@ -1,32 +1,47 @@
-import { jsx as h, jsxs as R } from "react/jsx-runtime";
+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 N, uyMerge as E } from "@payfit/unity-themes";
-import { useVirtualizer as K } from "@tanstack/react-virtual";
-import { useResizeObserver as U } from "usehooks-ts";
-import { TableContextProvider as $, useTableContext as M } from "./Table.context.js";
-const P = N({
+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",
-    "uy:min-h-(--uy-table-min-rows) uy:max-h-(--uy-table-max-rows)"
-  ]
-}), j = z(
-  ({ minRows: y = 10, maxRows: d = 50, children: o }, l) => /* @__PURE__ */ h(
-    "div",
-    {
-      ref: l,
-      className: P(),
-      "data-unity-slot": "table-root",
-      style: {
-        "--uy-table-min-rows": `calc(var(--uy-spacing-600) * ${y})`,
-        "--uy-table-max-rows": `calc(var(--uy-spacing-600) * ${d})`
-      },
-      children: o
+    // 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 = N({
+const A = S({
   slots: {
     wrapper: [
       "uy:flex-1 uy:bg-surface-neutral",
@@ -64,36 +79,36 @@ const A = N({
     horizontalScroll: !0,
     layout: "auto"
   }
-}), _ = z((y, d) => {
+}), _ = z((f, s) => {
   const {
     children: o,
     label: l,
-    description: b,
-    isHorizontalScrollEnabled: v = !0,
-    enableVirtualization: s = !1,
-    estimatedRowHeight: g = 40,
-    overscan: p = 5,
+    description: u,
+    isHorizontalScrollEnabled: b = !0,
+    enableVirtualization: c = !1,
+    estimatedRowHeight: v = 40,
+    overscan: w = 5,
     layout: x = "auto",
     ...T
-  } = y, f = V(null), { rowCount: m, columnCount: w } = H(() => {
+  } = 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 u = i.Children.toArray(
+      const y = i.Children.toArray(
         e.props.children
-      ).filter((c) => i.isValidElement(c));
-      r += u.length, u.forEach((c) => {
-        if (!i.isValidElement(c)) return;
+      ).filter((d) => i.isValidElement(d));
+      r += y.length, y.forEach((d) => {
+        if (!i.isValidElement(d)) return;
         const n = i.Children.toArray(
-          c.props.children
+          d.props.children
         ).filter((C) => i.isValidElement(C));
         t = Math.max(t, n.length);
       });
     }), { rowCount: r, columnCount: t };
   }, [o]);
-  k(d, () => ({
+  k(s, () => ({
     scrollToTop: () => {
-      const t = f.current, r = t?.closest(
+      const t = h.current, r = t?.closest(
         '[data-unity-slot="table-root"]'
       );
       let e;
@@ -106,28 +121,28 @@ const A = N({
       }
     }
   }));
-  const a = K({
-    count: s ? m : 0,
-    getScrollElement: () => f.current,
-    estimateSize: () => g,
-    overscan: p
+  const a = M({
+    count: c ? m : 0,
+    getScrollElement: () => h.current,
+    estimateSize: () => v,
+    overscan: w
   });
-  return /* @__PURE__ */ h(
-    $,
+  return /* @__PURE__ */ p(
+    U,
     {
       rowCount: m,
-      columnCount: w,
+      columnCount: g,
       virtualizer: a,
-      enableVirtualization: s,
-      children: /* @__PURE__ */ h(
-        S,
+      enableVirtualization: c,
+      children: /* @__PURE__ */ p(
+        N,
         {
-          scrollContainerRef: f,
+          scrollContainerRef: h,
           rowCount: m,
-          columnCount: w,
+          columnCount: g,
           label: l,
-          description: b,
-          isHorizontalScrollEnabled: v,
+          description: u,
+          isHorizontalScrollEnabled: b,
           layout: x,
           ...T,
           children: o
@@ -137,43 +152,43 @@ const A = N({
   );
 });
 _.displayName = "Table";
-const S = (y) => {
+const N = (f) => {
   const {
-    children: d,
+    children: s,
     label: o,
     description: l,
-    scrollContainerRef: b,
-    layout: v,
-    rowCount: s,
-    columnCount: g,
-    onKeyDown: p,
+    scrollContainerRef: u,
+    layout: b,
+    rowCount: c,
+    columnCount: v,
+    onKeyDown: w,
     isHorizontalScrollEnabled: x = !0,
     ...T
-  } = y, { wrapper: f, table: m } = A({
+  } = f, { wrapper: h, table: m } = A({
     horizontalScroll: x,
-    layout: v
-  }), { keyboardNavigation: w } = M(), { tableRef: a, handleTableKeyDown: t } = w, { height: r = 0 } = U({
-    ref: b,
+    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), p?.(n));
+      n.key !== "Tab" && (t(n), w?.(n));
     },
-    [t, p]
-  ), u = b.current?.closest(
+    [t, w]
+  ), y = u.current?.closest(
     '[data-unity-slot="table-root"]'
-  ), c = H(() => {
-    if (!u || s === 0) return !1;
-    const n = u.clientHeight;
+  ), d = H(() => {
+    if (!y || c === 0) return !1;
+    const n = y.clientHeight;
     return (a.current?.clientHeight ?? 0) / n < 0.9;
-  }, [u, s, a, r]);
+  }, [y, c, a, r]);
   return /* @__PURE__ */ R(
     "div",
     {
-      className: E(f()),
-      ref: b,
+      className: E(h()),
+      ref: u,
       style: {
-        "--uy-table-has-remaining-space": c ? "1" : "0"
+        "--uy-table-has-remaining-space": d ? "1" : "0"
       },
       children: [
         /* @__PURE__ */ R(
@@ -182,15 +197,15 @@ const S = (y) => {
             ref: a,
             className: E(m()),
             role: "grid",
-            "aria-rowcount": s,
-            "aria-colcount": g,
+            "aria-rowcount": c,
+            "aria-colcount": v,
             "aria-label": o,
             "aria-describedby": l ? `table-desc-${a.current?.id}` : void 0,
             onKeyDown: e,
             ...T,
             children: [
-              d,
-              l && /* @__PURE__ */ h(
+              s,
+              l && /* @__PURE__ */ p(
                 "caption",
                 {
                   id: `table-desc-${a.current?.id}`,
@@ -201,12 +216,12 @@ const S = (y) => {
             ]
           }
         ),
-        /* @__PURE__ */ h("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." })
+        /* @__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." })
       ]
     }
   );
 };
-S.displayName = "TableContent";
+N.displayName = "TableContent";
 export {
   _ as Table,
   j as TableRoot

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payfit/unity-components",
-  "version": "2.14.1",
+  "version": "2.15.0",
   "module": "./dist/esm/index.js",
   "type": "module",
   "sideEffects": false,
@@ -42,7 +42,7 @@
     "@hookform/devtools": "4.4.0",
     "@hookform/resolvers": "5.2.1",
     "@internationalized/date": "3.12.0",
-    "@payfit/unity-illustrations": "2.14.1",
+    "@payfit/unity-illustrations": "2.15.0",
     "@radix-ui/react-avatar": "1.1.11",
     "@radix-ui/react-slot": "1.2.4",
     "@react-aria/interactions": "3.27.1",
@@ -74,8 +74,8 @@
   },
   "peerDependencies": {
     "@hookform/devtools": "^4",
-    "@payfit/unity-icons": "2.14.1",
-    "@payfit/unity-themes": "2.14.1",
+    "@payfit/unity-icons": "2.15.0",
+    "@payfit/unity-themes": "2.15.0",
     "@storybook/react-vite": "^10.2.2",
     "@tanstack/react-query": "^5",
     "@tanstack/react-router": "^1.131",
@@ -95,9 +95,9 @@
     "@payfit/hr-apps-tsconfigs": "0.0.0-use.local",
     "@payfit/storybook-addon-console-errors": "0.0.0-use.local",
     "@payfit/storybook-config": "0.0.0-use.local",
-    "@payfit/unity-icons": "2.14.1",
-    "@payfit/unity-illustrations": "2.14.1",
-    "@payfit/unity-themes": "2.14.1",
+    "@payfit/unity-icons": "2.15.0",
+    "@payfit/unity-illustrations": "2.15.0",
+    "@payfit/unity-themes": "2.15.0",
     "@payfit/vite-configs": "0.0.0-use.local",
     "@storybook/addon-a11y": "10.2.15",
     "@storybook/addon-designs": "11.1.1",