@payfit/unity-components 2.0.0 → 2.1.4

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

@@ -1,43 +1,39 @@
-import { jsx as f, jsxs as x } from "react/jsx-runtime";
-import i, { forwardRef as T, useRef as N, useMemo as C, 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 only
-    // Remove horizontal overflow - pagination should not scroll horizontally
+    "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 = T(
-  ({ minRows: s = 10, maxRows: u = 50, children: o }, l) => /* @__PURE__ */ f(
+}), A = E(
+  ({ minRows: c = 10, maxRows: y = 50, children: r }, n) => /* @__PURE__ */ m(
     "div",
     {
-      ref: l,
-      className: K(),
+      ref: n,
+      className: j(),
       "data-unity-slot": "table-root",
       style: {
-        "--uy-table-min-rows": `calc(var(--uy-spacing-600) * ${s})`,
-        "--uy-table-max-rows": `calc(var(--uy-spacing-600) * ${u})`
+        "--uy-table-min-rows": `calc(var(--uy-spacing-600) * ${c})`,
+        "--uy-table-max-rows": `calc(var(--uy-spacing-600) * ${y})`
       },
-      children: o
+      children: r
     }
   )
 );
-U.displayName = "TableRoot";
-const $ = R({
+A.displayName = "TableRoot";
+const _ = N({
   slots: {
     wrapper: [
       "uy:flex-1 uy:bg-surface-neutral",
-      "uy:w-full",
-      // Handle horizontal scrolling in the wrapper, independent of pagination
-      "uy:overflow-x-auto"
+      "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]"
     ]
@@ -53,44 +49,58 @@ const $ = R({
         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 = T((s, u) => {
+}), I = E((c, y) => {
   const {
-    children: o,
-    label: l,
-    description: m,
-    isHorizontalScrollEnabled: g = !0,
-    ...c
-  } = s, y = N(null), { height: h = 0 } = S({
-    ref: y,
+    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: p, columnCount: w } = C(() => {
-    let t = 0, r = 0;
-    return i.Children.forEach(o, (e) => {
-      if (!i.isValidElement(e)) return;
-      const a = i.Children.toArray(
+  }), { 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((n) => i.isValidElement(n));
-      r += a.length, a.forEach((n) => {
-        if (!i.isValidElement(n)) return;
-        const v = i.Children.toArray(
-          n.props.children
-        ).filter((d) => i.isValidElement(d));
-        t = Math.max(t, v.length);
+      ).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: r, columnCount: t };
-  }, [o]);
-  return z(u, () => ({
+    }), { rowCount: o, columnCount: t };
+  }, [r]);
+  D(y, () => ({
     scrollToTop: () => {
-      const t = y.current, r = t?.closest(
+      const t = u.current, o = t?.closest(
         '[data-unity-slot="table-root"]'
       );
       let e;
-      if (r ? e = r : t && (e = t), !!e) {
+      if (o ? e = o : t && (e = t), !!e) {
         if (typeof e.scrollTo == "function") {
           e.scrollTo({ top: 0, behavior: "smooth" });
           return;
@@ -98,89 +108,107 @@ const $ = R({
         e.scrollTop = 0;
       }
     }
-  })), /* @__PURE__ */ f(V, { rowCount: p, columnCount: w, children: /* @__PURE__ */ f(
-    E,
+  }));
+  const b = U({
+    count: i ? d : 0,
+    getScrollElement: () => u.current,
+    estimateSize: () => v,
+    overscan: p
+  });
+  return /* @__PURE__ */ m(
+    M,
     {
-      scrollContainerRef: y,
-      containerHeight: h,
-      rowCount: p,
-      columnCount: w,
-      label: l,
-      description: m,
-      isHorizontalScrollEnabled: g,
-      ...c,
-      children: o
+      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 = (s) => {
+I.displayName = "Table";
+const S = (c) => {
   const {
-    children: u,
-    label: o,
-    description: l,
-    scrollContainerRef: m,
-    containerHeight: g,
-    rowCount: c,
-    columnCount: y,
-    onKeyDown: h,
-    isHorizontalScrollEnabled: p = !0,
-    ...w
-  } = s, { wrapper: t, table: r } = $({
-    horizontalScroll: p
-  }), { keyboardNavigation: e } = D(), { tableRef: a, handleTableKeyDown: n } = e, v = k(
-    (b) => {
-      b.key !== "Tab" && (n(b), h?.(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));
     },
-    [n, h]
-  ), d = m.current?.closest(
+    [b, p]
+  ), o = h.current?.closest(
     '[data-unity-slot="table-root"]'
-  ), H = C(() => {
-    if (!d || c === 0) return !1;
-    const b = d.clientHeight;
-    return (a.current?.clientHeight ?? 0) / b < 0.9;
-  }, [d, 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: t(),
-      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: r(),
+            ref: l,
+            className: z(T()),
             role: "grid",
-            "aria-rowcount": c,
-            "aria-colcount": y,
-            "aria-label": o,
-            "aria-describedby": l ? `table-desc-${a.current?.id}` : void 0,
-            onKeyDown: v,
-            ...w,
+            "aria-rowcount": i,
+            "aria-colcount": v,
+            "aria-label": r,
+            "aria-describedby": n ? `table-desc-${l.current?.id}` : void 0,
+            onKeyDown: t,
+            ...x,
             children: [
-              u,
-              l && /* @__PURE__ */ f(
+              y,
+              n && /* @__PURE__ */ m(
                 "caption",
                 {
-                  id: `table-desc-${a.current?.id}`,
+                  id: `table-desc-${l.current?.id}`,
                   className: "uy:sr-only",
-                  children: l
+                  children: n
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ f("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/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/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.js

@@ -8,7 +8,7 @@ import { SelectOption as R } from "../../select/parts/SelectOption.js";
 import { Select as E } from "../../select/Select.js";
 const _ = j({
   base: [
-    "uy:bg-surface-neutral-lowest",
+    "uy:bg-surface-neutral-low",
     "uy:sticky uy:bottom-0",
     "uy:grid uy:grid-cols-3 uy:items-center",
     "uy:ps-200 uy:py-100 uy:pe-100"

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

@@ -31,6 +31,7 @@ const R = w({
           role: "row",
           className: n,
           "aria-rowindex": r + 1,
+          "data-index": r + 1,
           "aria-selected": t,
           onKeyDown: (e) => {
             s?.(e);

package/dist/esm/components/tabs/Tabs.variant.d.ts

@@ -10,12 +10,10 @@ export declare const tabsVariant: import('tailwind-variants').TVReturnType<{
     scrollable: {
         true: {
             tabList: string;
-            scroller: string;
         };
         false: {
             base: string;
             scroller: string;
-            tabList: string;
         };
     };
 }, {
@@ -35,12 +33,10 @@ export declare const tabsVariant: import('tailwind-variants').TVReturnType<{
     scrollable: {
         true: {
             tabList: string;
-            scroller: string;
         };
         false: {
             base: string;
             scroller: string;
-            tabList: string;
         };
     };
 }, {
@@ -60,12 +56,10 @@ export declare const tabsVariant: import('tailwind-variants').TVReturnType<{
     scrollable: {
         true: {
             tabList: string;
-            scroller: string;
         };
         false: {
             base: string;
             scroller: string;
-            tabList: string;
         };
     };
 }, {

package/dist/esm/components/tabs/Tabs.variant.js

@@ -1,38 +1,37 @@
-import { uyTv as e } from "@payfit/unity-themes";
-const a = e({
+import { uyTv as t } from "@payfit/unity-themes";
+const e = t({
   slots: {
     base: "uy:w-full",
-    tabList: "uy:flex",
+    tabList: "uy:flex uy:gap-250 uy:mb-25",
     scroller: "uy:overflow-x-auto uy:overflow-y-hidden [scrollbar-width:thin]",
     tab: [
-      "uy:flex uy:relative uy:shrink-0 uy:gap-100 uy:whitespace-nowrap uy:min-w-[3ch] uy:text-center uy:typography-action uy:text-content-neutral-lowest-enabled uy:pt-150 uy:pb-150 uy:pl-200 uy:pr-200 uy:rounded-25 uy:cursor-pointer",
-      'uy:data-[selected]:text-content-form-enabled uy:data-[selected]:after:content:" " uy:data-[selected]:after:w-full uy:data-[selected]:after:h-[4px] uy:data-[selected]:after:absolute uy:data-[selected]:after:bottom-[-1px] uy:data-[selected]:after:left-0 uy:data-[selected]:after:right-0 uy:data-[selected]:text-content-form-active',
+      "uy:flex uy:relative uy:shrink-0 uy:gap-100 uy:whitespace-nowrap uy:min-w-[3ch] uy:text-center uy:typography-action uy:text-content-neutral-lowest-enabled uy:py-125 uy:rounded-75 uy:cursor-pointer",
+      'uy:data-[selected]:text-content-form-enabled uy:data-[selected]:after:block uy:data-[selected]:after:content:" " uy:data-[selected]:after:w-full uy:data-[selected]:after:h-25 uy:data-[selected]:after:absolute uy:data-[selected]:after:bottom-0 uy:data-[selected]:after:left-0 uy:data-[selected]:after:right-0 uy:data-[selected]:after:rounded-pill',
+      'uy:data-[status=active]:text-content-form-enabled uy:data-[status=active]:after:block uy:data-[status=active]:after:content:" " uy:data-[status=active]:after:w-full uy:data-[status=active]:after:h-25 uy:data-[status=active]:after:absolute uy:data-[status=active]:after:bottom-0 uy:data-[status=active]:after:left-0 uy:data-[status=active]:after:right-0 uy:data-[status=active]:after:rounded-pill',
       "uy:hover:cursor-pointer uy:focus-visible:outline-2 uy:focus-visible:outline-utility-focus-ring uy:focus-visible:outline-offset-[4px]"
     ]
   },
   variants: {
     variant: {
       primary: {
-        tab: "uy:data-[selected]:after:bg-border-neutral-active"
+        tab: "uy:data-[selected]:after:bg-border-neutral-active uy:data-[status=active]:after:bg-border-neutral-active"
       },
       neutral: {
-        tab: "uy:data-[selected]:after:bg-content-neutral"
+        tab: "uy:data-[selected]:after:bg-content-neutral uy:data-[status=active]:after:bg-content-neutral"
       }
     },
     scrollable: {
       true: {
-        tabList: "",
-        scroller: "uy:border-b-[1.25px] uy:border-solid uy:border-border-neutral-enabled"
+        tabList: ""
       },
       false: {
         base: "",
-        scroller: "",
-        tabList: "uy:border-b-[1.25px] uy:border-solid uy:border-border-neutral-enabled"
+        scroller: ""
       }
     }
   },
   defaultVariants: { variant: "primary", scrollable: !1 }
 });
 export {
-  a as tabsVariant
+  e as tabsVariant
 };