@payfit/unity-components 1.2.0 → 2.1.4

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

@@ -1,43 +1,39 @@
-import { jsx as d, jsxs as x } from "react/jsx-runtime";
-import n, { forwardRef as C, useRef as N, useMemo as T, useImperativeHandle as z, useCallback as k } from "react";
-import { uyTv as R } from "@payfit/unity-themes";
-import { useResizeObserver as S } from "usehooks-ts";
-import { TableContextProvider as V, useTableContext as D } from "./Table.context.js";
-const K = R({
+import { jsx as m, jsxs as R } from "react/jsx-runtime";
+import s, { forwardRef as E, useRef as k, useMemo as H, useImperativeHandle as D, useCallback as K } from "react";
+import { uyTv as N, uyMerge as z } from "@payfit/unity-themes";
+import { useVirtualizer as U } from "@tanstack/react-virtual";
+import { useResizeObserver as $ } from "usehooks-ts";
+import { TableContextProvider as M, useTableContext as P } from "./Table.context.js";
+const j = N({
   base: [
     "uy:w-full uy:border uy:border-solid uy:border-border-neutral uy:rounded-100",
-    "uy:relative uy:flex uy:flex-col",
-    "uy:min-h-[var(--uy-table-min-rows)] uy:max-h-[var(--uy-table-max-rows)]",
-    "uy:overflow-y-auto",
-    // Handle vertical scrolling
-    "uy:overflow-x-auto"
-    // Handle horizontal scrolling too
+    "uy:relative uy:flex uy:flex-col uy:overflow-hidden",
+    "uy:min-h-(--uy-table-min-rows) uy:max-h-(--uy-table-max-rows)"
   ]
-}), U = C(
-  ({ minRows: i = 10, maxRows: s = 50, children: t }, o) => /* @__PURE__ */ d(
+}), A = E(
+  ({ minRows: c = 10, maxRows: y = 50, children: r }, n) => /* @__PURE__ */ m(
     "div",
     {
-      ref: o,
-      className: K(),
+      ref: n,
+      className: j(),
       "data-unity-slot": "table-root",
       style: {
-        "--uy-table-min-rows": `calc(var(--uy-spacing-600) * ${i})`,
-        "--uy-table-max-rows": `calc(var(--uy-spacing-600) * ${s})`
+        "--uy-table-min-rows": `calc(var(--uy-spacing-600) * ${c})`,
+        "--uy-table-max-rows": `calc(var(--uy-spacing-600) * ${y})`
       },
-      children: t
+      children: r
     }
   )
 );
-U.displayName = "TableRoot";
-const $ = R({
+A.displayName = "TableRoot";
+const _ = N({
   slots: {
     wrapper: [
       "uy:flex-1 uy:bg-surface-neutral",
-      "uy:w-full"
-      // No overflow handling - parent TableRoot handles all scrolling
+      "uy:w-full uy:overflow-x-auto uy:overflow-y-auto"
     ],
     table: [
-      "uy:min-w-full",
+      "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]"
     ]
@@ -45,133 +41,174 @@ const $ = R({
   variants: {
     horizontalScroll: {
       true: {
-        // Only apply horizontal scroll to the table itself, not wrapper
+        // 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
+    horizontalScroll: !0,
+    layout: "auto"
   }
-}), P = C((i, s) => {
+}), I = E((c, y) => {
   const {
-    children: t,
-    label: o,
-    description: m,
-    isHorizontalScrollEnabled: g = !0,
-    ...c
-  } = i, u = N(null), { height: f = 0 } = S({
+    children: r,
+    label: n,
+    description: h,
+    isHorizontalScrollEnabled: w = !0,
+    enableVirtualization: i = !1,
+    estimatedRowHeight: v = 40,
+    overscan: p = 5,
+    layout: g = "auto",
+    ...x
+  } = c, u = k(null), { height: T = 0 } = $({
     ref: u,
     box: "border-box"
-  }), { rowCount: h, columnCount: p } = T(() => {
-    let e = 0, l = 0;
-    return n.Children.forEach(t, (w) => {
-      if (!n.isValidElement(w)) return;
-      const a = n.Children.toArray(
-        w.props.children
-      ).filter((r) => n.isValidElement(r));
-      l += a.length, a.forEach((r) => {
-        if (!n.isValidElement(r)) return;
-        const v = n.Children.toArray(
-          r.props.children
-        ).filter((y) => n.isValidElement(y));
-        e = Math.max(e, v.length);
+  }), { rowCount: d, columnCount: l } = H(() => {
+    let t = 0, o = 0;
+    return s.Children.forEach(r, (e) => {
+      if (!s.isValidElement(e)) return;
+      const a = s.Children.toArray(
+        e.props.children
+      ).filter((f) => s.isValidElement(f));
+      o += a.length, a.forEach((f) => {
+        if (!s.isValidElement(f)) return;
+        const C = s.Children.toArray(
+          f.props.children
+        ).filter((V) => s.isValidElement(V));
+        t = Math.max(t, C.length);
       });
-    }), { rowCount: l, columnCount: e };
-  }, [t]);
-  return z(s, () => ({
+    }), { rowCount: o, columnCount: t };
+  }, [r]);
+  D(y, () => ({
     scrollToTop: () => {
-      const e = u.current, l = e?.closest(
+      const t = u.current, o = t?.closest(
         '[data-unity-slot="table-root"]'
       );
-      l ? l.scrollTo({ top: 0, behavior: "smooth" }) : e && e.scrollTo({ top: 0, behavior: "smooth" });
+      let e;
+      if (o ? e = o : t && (e = t), !!e) {
+        if (typeof e.scrollTo == "function") {
+          e.scrollTo({ top: 0, behavior: "smooth" });
+          return;
+        }
+        e.scrollTop = 0;
+      }
     }
-  })), /* @__PURE__ */ d(V, { rowCount: h, columnCount: p, children: /* @__PURE__ */ d(
-    E,
+  }));
+  const b = U({
+    count: i ? d : 0,
+    getScrollElement: () => u.current,
+    estimateSize: () => v,
+    overscan: p
+  });
+  return /* @__PURE__ */ m(
+    M,
     {
-      scrollContainerRef: u,
-      containerHeight: f,
-      rowCount: h,
-      columnCount: p,
-      label: o,
-      description: m,
-      isHorizontalScrollEnabled: g,
-      ...c,
-      children: t
+      rowCount: d,
+      columnCount: l,
+      virtualizer: b,
+      enableVirtualization: i,
+      children: /* @__PURE__ */ m(
+        S,
+        {
+          scrollContainerRef: u,
+          containerHeight: i ? b.getTotalSize() : T,
+          rowCount: d,
+          columnCount: l,
+          label: n,
+          description: h,
+          isHorizontalScrollEnabled: w,
+          layout: g,
+          ...x,
+          children: r
+        }
+      )
     }
-  ) });
+  );
 });
-P.displayName = "Table";
-const E = (i) => {
+I.displayName = "Table";
+const S = (c) => {
   const {
-    children: s,
-    label: t,
-    description: o,
-    scrollContainerRef: m,
-    containerHeight: g,
-    rowCount: c,
-    columnCount: u,
-    onKeyDown: f,
-    isHorizontalScrollEnabled: h = !0,
-    ...p
-  } = i, { wrapper: e, table: l } = $({
-    horizontalScroll: h
-  }), { keyboardNavigation: w } = D(), { tableRef: a, handleTableKeyDown: r } = w, v = k(
-    (b) => {
-      b.key !== "Tab" && (r(b), f?.(b));
+    children: y,
+    label: r,
+    description: n,
+    scrollContainerRef: h,
+    layout: w,
+    rowCount: i,
+    columnCount: v,
+    onKeyDown: p,
+    isHorizontalScrollEnabled: g = !0,
+    ...x
+  } = c, { wrapper: u, table: T } = _({
+    horizontalScroll: g,
+    layout: w
+  }), { keyboardNavigation: d } = P(), { tableRef: l, handleTableKeyDown: b } = d, t = K(
+    (a) => {
+      a.key !== "Tab" && (b(a), p?.(a));
     },
-    [r, f]
-  ), y = m.current?.closest(
+    [b, p]
+  ), o = h.current?.closest(
     '[data-unity-slot="table-root"]'
-  ), H = T(() => {
-    if (!y || c === 0) return !1;
-    const b = y.clientHeight;
-    return (a.current?.clientHeight ?? 0) / b < 0.9;
-  }, [y, c]);
-  return /* @__PURE__ */ x(
+  ), e = H(() => {
+    if (!o || i === 0) return !1;
+    const a = o.clientHeight;
+    return (l.current?.clientHeight ?? 0) / a < 0.9;
+  }, [o, i, l]);
+  return /* @__PURE__ */ R(
     "div",
     {
-      className: e(),
-      ref: m,
+      className: z(u()),
+      ref: h,
       style: {
-        "--uy-table-has-remaining-space": H ? "1" : "0"
+        "--uy-table-has-remaining-space": e ? "1" : "0"
       },
       children: [
-        /* @__PURE__ */ x(
+        /* @__PURE__ */ R(
           "table",
           {
-            ref: a,
-            className: l(),
+            ref: l,
+            className: z(T()),
             role: "grid",
-            "aria-rowcount": c,
-            "aria-colcount": u,
-            "aria-label": t,
-            "aria-describedby": o ? `table-desc-${a.current?.id}` : void 0,
-            onKeyDown: v,
-            ...p,
+            "aria-rowcount": i,
+            "aria-colcount": v,
+            "aria-label": r,
+            "aria-describedby": n ? `table-desc-${l.current?.id}` : void 0,
+            onKeyDown: t,
+            ...x,
             children: [
-              s,
-              o && /* @__PURE__ */ d(
+              y,
+              n && /* @__PURE__ */ m(
                 "caption",
                 {
-                  id: `table-desc-${a.current?.id}`,
+                  id: `table-desc-${l.current?.id}`,
                   className: "uy:sr-only",
-                  children: o
+                  children: n
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ d("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__ */ m("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." })
       ]
     }
   );
 };
-E.displayName = "TableContent";
+S.displayName = "TableContent";
 export {
-  P as Table,
-  U as TableRoot
+  I as Table,
+  A as TableRoot
 };

package/dist/esm/components/table/hooks/useTableKeyboardNavigation.js

@@ -126,7 +126,7 @@ function O() {
     [l]
   ), x = i(
     (e) => {
-      if (e.key === "Tab" || !a.current) return;
+      if (e.key === "RawTab" || !a.current) return;
       let t = e.currentTarget;
       const s = e.target;
       if (s !== t) {
@@ -173,19 +173,19 @@ function O() {
           break;
         case "PageUp":
           e.preventDefault();
-          const f = Math.max(0, r - 5), p = n[f];
-          if (!p) break;
-          const R = Array.from(p.querySelectorAll("td, th")), E = Math.min(u, R.length - 1);
+          const f = Math.max(0, r - 5), w = n[f];
+          if (!w) break;
+          const R = Array.from(w.querySelectorAll("td, th")), E = Math.min(u, R.length - 1);
           l(f, E);
           break;
         case "PageDown":
           e.preventDefault();
-          const w = Math.min(n.length - 1, r + 5), C = n[w];
+          const p = Math.min(n.length - 1, r + 5), C = n[p];
           if (!C) break;
           const T = Array.from(
             C.querySelectorAll("td, th")
           ), F = Math.min(u, T.length - 1);
-          l(w, F);
+          l(p, F);
           break;
       }
     },

package/dist/esm/components/table/parts/TableBody.js

@@ -1,8 +1,9 @@
 import { jsx as r } from "react/jsx-runtime";
-import p, { forwardRef as b, Children as f, cloneElement as h } from "react";
-import { uyTv as v } from "@payfit/unity-themes";
-const C = v({
-  base: ["uy:transition-all uy:duration-200 uy:ease-in-out"],
+import y, { forwardRef as b, Children as f, cloneElement as g } from "react";
+import { uyTv as _ } from "@payfit/unity-themes";
+import { useTableContext as x } from "../Table.context.js";
+const C = _({
+  base: ["uy:transition-all uy:duration-200 uy:ease-in-out uy:relative"],
   variants: {
     isEmpty: {
       true: ["uy:h-[var(--uy-table-min-rows)]"],
@@ -12,31 +13,92 @@ const C = v({
       ]
     }
   }
-}), x = b(
-  ({ children: c, renderEmptyState: l, renderDataState: s, ...u }, y) => {
-    const i = s ? s() : void 0, t = i !== void 0, o = t ? [] : f.map(c, (n, m) => p.isValidElement(n) ? h(
-      n,
-      {
-        rowIndex: m,
-        ...n.props
-      }
-    ) : n), e = !o || o.length === 0 || t, d = e && l ? l() : null;
-    let a = null;
-    return t ? a = i : e && d && (a = d), /* @__PURE__ */ r(
+}), E = ({
+  children: c,
+  hasDataStateContent: p,
+  enableVirtualization: u,
+  virtualizer: a
+}) => {
+  if (p)
+    return [];
+  if (u && a) {
+    const t = a.getVirtualItems(), d = a.getTotalSize(), m = t[0], l = t[t.length - 1], o = m ? m.start : 0, s = l ? d - l.end : 0, e = [];
+    return o > 0 && e.push(
+      /* @__PURE__ */ r(
+        "tr",
+        {
+          "aria-hidden": "true",
+          style: { border: 0, borderBottom: 0 },
+          children: /* @__PURE__ */ r(
+            "td",
+            {
+              colSpan: 1e3,
+              style: { height: o, padding: 0, border: 0 }
+            }
+          )
+        },
+        "__spacer-top__"
+      )
+    ), t.forEach((i) => {
+      const n = y.Children.toArray(c)[i.index];
+      y.isValidElement(n) && e.push(
+        y.cloneElement(n, {
+          key: i.index,
+          rowIndex: i.index,
+          ref: (h) => {
+            h && a.measureElement(h);
+          }
+        })
+      );
+    }), s > 0 && e.push(
+      /* @__PURE__ */ r(
+        "tr",
+        {
+          "aria-hidden": "true",
+          style: { border: 0, borderBottom: 0 },
+          children: /* @__PURE__ */ r(
+            "td",
+            {
+              colSpan: 1e3,
+              style: { height: s, padding: 0, border: 0 }
+            }
+          )
+        },
+        "__spacer-bottom__"
+      )
+    ), e;
+  }
+  return f.map(c, (t, d) => y.isValidElement(t) ? g(
+    t,
+    {
+      rowIndex: d,
+      ...t.props
+    }
+  ) : t);
+}, T = b(
+  ({ children: c, renderEmptyState: p, renderDataState: u, ...a }, t) => {
+    const { virtualizer: d, enableVirtualization: m } = x(), l = u ? u() : void 0, o = l !== void 0, s = E({
+      children: c,
+      hasDataStateContent: o,
+      enableVirtualization: m,
+      virtualizer: d
+    }), e = !s || s.length === 0 || o, i = e && p ? p() : null;
+    let n = null;
+    return o ? n = l : e && i && (n = i), /* @__PURE__ */ r(
       "tbody",
       {
-        ref: y,
+        ref: t,
         className: C({ isEmpty: e }),
         "data-dd-privacy": "mask",
-        "data-empty": e || t || void 0,
-        ...u,
-        children: a ? /* @__PURE__ */ r("tr", { children: /* @__PURE__ */ r("td", { colSpan: 1e3, className: "uy:p-0", children: a }) }) : o
+        "data-empty": e || o || void 0,
+        ...a,
+        children: n ? /* @__PURE__ */ r("tr", { children: /* @__PURE__ */ r("td", { colSpan: 1e3, className: "uy:p-0", children: n }) }) : s
       }
     );
   }
 );
-x.displayName = "TableBody";
+T.displayName = "TableBody";
 export {
-  x as TableBody,
+  T as TableBody,
   C as tableBody
 };

package/dist/esm/components/table/parts/TableCell.js

@@ -1,8 +1,8 @@
-import { jsx as h } from "react/jsx-runtime";
-import { memo as v, forwardRef as g } from "react";
-import { uyTv as C } from "@payfit/unity-themes";
-import { useTableContext as T } from "../Table.context.js";
-const w = C({
+import { jsx as C } from "react/jsx-runtime";
+import { memo as v, forwardRef as g, useMemo as T } from "react";
+import { uyTv as w } from "@payfit/unity-themes";
+import { useTableContext as k } from "../Table.context.js";
+const D = w({
   base: [
     "uy:px-200 uy:py-150 uy:text-content-neutral uy:typography-body",
     "uy:focus-visible:outline-2 uy:focus-visible:outline-solid uy:focus-visible:outline-offset-[-2px] uy:focus-visible:outline-utility-focus-ring"
@@ -14,46 +14,49 @@ const w = C({
       right: "uy:text-right"
     }
   }
-}), k = v(
+}), K = v(
   g(
     ({
-      children: a,
+      children: s,
       colIndex: t = 0,
-      rowIndex: n = 0,
-      align: i,
-      onKeyDown: u,
+      rowIndex: u = 0,
+      align: o,
+      onKeyDown: i,
       onFocus: r,
-      className: s,
-      isRowHeader: o = !1,
-      isFocusable: l = !0,
+      className: l,
+      isRowHeader: a = !1,
+      isFocusable: n = !0,
       ...y
     }, c) => {
-      const { keyboardNavigation: f } = T(), { isCellFocused: d, handleCellKeyDown: b, handleCellFocus: m } = f, p = l && d(n, t), x = (e) => {
-        e.key !== "Tab" && (b(e), u?.(e));
+      const { keyboardNavigation: f } = k(), { isCellFocused: b, handleCellKeyDown: d, handleCellFocus: m } = f, p = T(
+        () => D({ align: o, className: l }),
+        [o, l]
+      ), x = n && b(u, t), h = (e) => {
+        e.key !== "Tab" && (d(e), i?.(e));
       };
-      return /* @__PURE__ */ h(
-        o ? "th" : "td",
+      return /* @__PURE__ */ C(
+        a ? "th" : "td",
         {
           ref: c,
-          role: o ? "rowheader" : "gridcell",
+          role: a ? "rowheader" : "gridcell",
           "aria-colindex": t + 1,
-          tabIndex: p ? 0 : -1,
-          "data-focusable": l,
-          className: w({ align: i, className: s }),
-          onKeyDown: x,
+          tabIndex: x ? 0 : -1,
+          "data-focusable": n,
+          className: p,
+          onKeyDown: h,
           onFocus: (e) => {
             m(e), r?.(e);
           },
           "data-dd-privacy": "mask",
           ...y,
-          children: a
+          children: s
         }
       );
     }
   )
 );
-k.displayName = "TableCell";
+K.displayName = "TableCell";
 export {
-  k as TableCell,
-  w as tableCell
+  K as TableCell,
+  D as tableCell
 };

package/dist/esm/components/table/parts/TableEmptyState.js

@@ -1,17 +1,17 @@
 import { jsx as e, jsxs as p } from "react/jsx-runtime";
-import { forwardRef as d, useMemo as c } from "react";
-import { uyTv as y } from "@payfit/unity-themes";
+import { forwardRef as y, useMemo as c } from "react";
+import { uyTv as d } from "@payfit/unity-themes";
 import { useIntl as m } from "react-intl";
 import { Spinner as u } from "../../spinner/Spinner.js";
 import { Text as f } from "../../text/Text.js";
 import b from "../assets/EmptyStateError.svg.js";
 import x from "../assets/EmptyStateNoData.svg.js";
-const E = y({
+const E = d({
   slots: {
     base: "uy:flex uy:flex-col uy:items-center uy:justify-center",
-    wrapper: "uy:max-w-[300px] uy:flex uy:flex-col uy:items-center"
+    wrapper: "uy:max-w-[300px] uy:flex uy:flex-col uy:items-center uy:py-800"
   }
-}), r = d(
+}), r = y(
   (t, i) => {
     const { variant: a, children: o } = t, s = c(() => {
       switch (a) {
@@ -43,7 +43,7 @@ const E = y({
   }
 );
 r.displayName = "TableEmptyStateText";
-const n = d(
+const n = y(
   ({ children: t, className: i, ...a }, o) => {
     const { base: s, wrapper: l } = E();
     return /* @__PURE__ */ e("div", { "data-dd-privacy": "allow", ...a, ref: o, className: s(), children: /* @__PURE__ */ e("div", { className: l({ className: i }), children: t }) });

package/dist/esm/components/table/parts/TableHeader.js

@@ -3,7 +3,7 @@ import r, { memo as l, forwardRef as s, useMemo as y } from "react";
 import { uyTv as m } from "@payfit/unity-themes";
 const b = m({
   base: [
-    "uy:h-500 uy:bg-surface-neutral-lowest uy:rounded-tl-100 uy:rounded-tr-100 uy:overflow-hidden",
+    "uy:h-500 uy:bg-surface-neutral-low uy:rounded-tl-100 uy:rounded-tr-100 uy:overflow-hidden",
     "uy:sticky uy:top-0 uy:z-[1]",
     "uy:[&_tr]:border-b uy:[&_tr]:border-solid uy:[&_tr]:border-b-border-neutral-enabled"
   ]

package/dist/esm/components/table/parts/TablePagination.d.ts

@@ -1,6 +1,6 @@
 import { VariantProps } from '@payfit/unity-themes';
 import { PropsWithChildren } from 'react';
-import { PaginationProps } from '../../pagination/Pagination.js';
+import { ClientSidePaginationProps } from '../../client-side-pagination/ClientSidePagination.js';
 export declare const tablePagination: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
 type PageSizeOption = {
     value: string;
@@ -44,22 +44,22 @@ export interface TablePaginationProps extends PropsWithChildren<VariantProps<typ
      * This function is intended for handling hover events on individual pagination controls or elements.
      * It is derived from the `onPageHover` property in the `Pagination` component.
      */
-    onPageHover?: PaginationProps['onPageHover'];
+    onPageHover?: ClientSidePaginationProps['onPageHover'];
     /**
      * Callback fired when the page changes
      * @param page - The new page number
      * @param previous - The previous page number
      * @param direction - The direction of navigation (1 for forward, -1 for backward)
      */
-    onPageChange?: PaginationProps['onPageChange'];
+    onPageChange?: ClientSidePaginationProps['onPageChange'];
     /**
      * Optional callback for next button press
      */
-    onNextPress?: PaginationProps['onNextPress'];
+    onNextPress?: ClientSidePaginationProps['onNextPress'];
     /**
      * Optional callback for previous button press
      */
-    onPreviousPress?: PaginationProps['onPreviousPress'];
+    onPreviousPress?: ClientSidePaginationProps['onPreviousPress'];
     /**
      * The options for the number of rows per page selection dropdown.
      * If not provided, the default options will be used.