@payfit/unity-components 2.46.13 → 2.46.14

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

@@ -0,0 +1,228 @@
+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
+        }
+      )
+    }
+  );
+});
+_.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
+};

package/dist/esm/components/table/hooks/useTableKeyboardNavigation.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Interface representing the position of a cell in the table.
+ */
+export interface CellPosition {
+    /** The row index (0-based) */
+    rowIndex: number;
+    /** The column index (0-based) */
+    colIndex: number;
+}
+export declare function useTableKeyboardNavigation(): {
+    focusedCell: CellPosition;
+    setFocusedCell: import('react').Dispatch<import('react').SetStateAction<CellPosition>>;
+    isCellFocused: (rowIndex: number, colIndex: number) => boolean;
+    handleCellKeyDown: (e: React.KeyboardEvent<HTMLTableCellElement>) => void;
+    handleTableKeyDown: (e: React.KeyboardEvent<HTMLTableElement>) => void;
+    handleTableFocus: (e: React.FocusEvent<HTMLTableElement>) => void;
+    handleCellFocus: (e: React.FocusEvent<HTMLTableCellElement>) => void;
+    tableRef: import('react').MutableRefObject<HTMLTableElement | null>;
+    focusCell: (rowIndex: number, colIndex: number, direction?: "left" | "right") => void;
+    focusRow: (rowIndex: number) => void;
+};

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

@@ -0,0 +1,209 @@
+import { useState as I, useRef as M, useCallback as i } from "react";
+const U = 'input, button, select, textarea, a[href], [tabindex]:not([tabindex="-1"])';
+function O() {
+  const [m, A] = I({
+    rowIndex: 0,
+    colIndex: 0
+  }), a = M(null), d = i(
+    (e, t, s) => {
+      const c = e.querySelectorAll(
+        U
+      );
+      if (c.length > 0) {
+        const n = c[0];
+        return A({ rowIndex: t, colIndex: s }), requestAnimationFrame(() => {
+          n.focus({ preventScroll: !1 });
+        }), !0;
+      }
+      return !1;
+    },
+    [A]
+  ), b = i(
+    (e, t, s) => {
+      if (!a.current) return null;
+      const c = Array.from(a.current.querySelectorAll("tr"));
+      if (e < 0 || e >= c.length) return null;
+      const n = c[e];
+      if (!n) return null;
+      const r = Array.from(n.querySelectorAll("td, th"));
+      if (s === "right") {
+        for (let o = t + 1; o < r.length; o++)
+          if (r[o].dataset.focusable !== "false")
+            return { rowIndex: e, colIndex: o };
+      } else
+        for (let o = t - 1; o >= 0; o--)
+          if (r[o].dataset.focusable !== "false")
+            return { rowIndex: e, colIndex: o };
+      return null;
+    },
+    []
+  ), l = i(
+    (e, t, s) => {
+      if (!a.current) return;
+      const c = Array.from(a.current.querySelectorAll("tr"));
+      if (e < 0 || e >= c.length) return;
+      const n = c[e];
+      if (!n) return;
+      const r = Array.from(n.querySelectorAll("td, th"));
+      if (t < 0 || t >= r.length) return;
+      const o = r[t];
+      if (!(o.dataset.focusable !== "false")) {
+        if (d(o, e, t))
+          return;
+        if (s) {
+          const f = b(
+            e,
+            t,
+            s
+          );
+          if (f) {
+            l(f.rowIndex, f.colIndex);
+            return;
+          }
+        }
+        return;
+      }
+      A({ rowIndex: e, colIndex: t }), requestAnimationFrame(() => {
+        document.activeElement !== o && o.focus({ preventScroll: !1 });
+      });
+    },
+    [A, d, b]
+  ), v = i(
+    (e) => {
+      if (!a.current) return;
+      const t = Array.from(a.current.querySelectorAll("tr"));
+      e < 0 || e >= t.length || !t[e] || l(e, 0);
+    },
+    [l]
+  ), S = i(
+    (e) => {
+      e.target === e.currentTarget && (e.preventDefault(), requestAnimationFrame(() => {
+        l(0, 0);
+      }));
+    },
+    [l]
+  ), k = i(
+    (e) => {
+      const t = e.target, s = e.currentTarget;
+      if (t !== s)
+        return;
+      const c = t.closest("tr");
+      if (!c || !a.current) return;
+      const r = Array.from(a.current.querySelectorAll("tr")).indexOf(c), u = Array.from(c.querySelectorAll("td, th")).indexOf(t);
+      r >= 0 && u >= 0 && (A({ rowIndex: r, colIndex: u }), requestAnimationFrame(() => {
+        a.current && (a.current.querySelectorAll("td, th").forEach((f) => {
+          f.setAttribute("tabindex", "-1");
+        }), t.setAttribute("tabindex", "0"));
+      }));
+    },
+    [A]
+  ), q = i(
+    (e, t) => m.rowIndex === e && m.colIndex === t,
+    [m]
+  ), D = i(
+    (e) => {
+      if (e.key !== "Tab" && e.target === e.currentTarget && a.current)
+        switch (e.key) {
+          case "ArrowDown":
+          case "ArrowRight":
+            e.preventDefault(), l(0, 0);
+            break;
+          case "Home":
+            e.preventDefault(), l(0, 0);
+            break;
+          case "End":
+            e.preventDefault();
+            const t = Array.from(a.current.querySelectorAll("tr")), s = t.length - 1;
+            if (s >= 0) {
+              const c = t[s];
+              if (!c) break;
+              const n = Array.from(c.querySelectorAll("td, th"));
+              l(s, n.length - 1);
+            }
+            break;
+        }
+    },
+    [l]
+  ), x = i(
+    (e) => {
+      if (e.key === "RawTab" || !a.current) return;
+      let t = e.currentTarget;
+      const s = e.target;
+      if (s !== t) {
+        const f = s.closest("td, th");
+        f && (t = f);
+      }
+      const c = t.closest("tr");
+      if (!c) return;
+      const n = Array.from(a.current.querySelectorAll("tr")), r = n.indexOf(c), o = Array.from(c.querySelectorAll("td, th")), u = o.indexOf(t);
+      switch (e.key) {
+        case "ArrowRight":
+          e.preventDefault(), u < o.length - 1 ? l(r, u + 1, "right") : l(r, 0, "right");
+          break;
+        case "ArrowLeft":
+          e.preventDefault(), u > 0 ? l(r, u - 1, "left") : l(r, o.length - 1, "left");
+          break;
+        case "ArrowDown":
+          if (e.preventDefault(), r < n.length - 1) {
+            const h = n[r + 1];
+            if (!h) break;
+            const g = Array.from(h.querySelectorAll("td, th")), y = Math.min(u, g.length - 1);
+            l(r + 1, y);
+          }
+          break;
+        case "ArrowUp":
+          if (e.preventDefault(), r > 0) {
+            const h = n[r - 1];
+            if (!h) break;
+            const g = Array.from(h.querySelectorAll("td, th")), y = Math.min(u, g.length - 1);
+            l(r - 1, y);
+          }
+          break;
+        case "Home":
+          e.preventDefault(), e.ctrlKey ? l(0, 0) : l(r, 0);
+          break;
+        case "End":
+          if (e.preventDefault(), e.ctrlKey) {
+            const h = n.length - 1, g = n[h];
+            if (!g) break;
+            const y = Array.from(g.querySelectorAll("td, th"));
+            l(h, y.length - 1);
+          } else
+            l(r, o.length - 1);
+          break;
+        case "PageUp":
+          e.preventDefault();
+          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 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(p, F);
+          break;
+      }
+    },
+    [l]
+  );
+  return {
+    focusedCell: m,
+    setFocusedCell: A,
+    isCellFocused: q,
+    handleCellKeyDown: x,
+    handleTableKeyDown: D,
+    handleTableFocus: S,
+    handleCellFocus: k,
+    tableRef: a,
+    focusCell: l,
+    focusRow: v
+  };
+}
+export {
+  O as useTableKeyboardNavigation
+};

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

@@ -0,0 +1,71 @@
+import { default as React, ReactNode } from 'react';
+export interface TableBodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+    /**
+     * Render prop that shows an empty state when there are no rows.
+     */
+    renderEmptyState?: () => ReactNode;
+    /**
+     * Render prop that shows an empty or update state that takes precedence over children. Use this to show a state inside the table body when there is already data in the table.
+     */
+    renderDataState?: () => ReactNode | undefined;
+}
+export declare const tableBody: import('tailwind-variants').TVReturnType<{
+    isEmpty: {
+        true: string[];
+        false: string[];
+    };
+}, undefined, string[], {
+    isEmpty: {
+        true: string[];
+        false: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    isEmpty: {
+        true: string[];
+        false: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+/**
+ * The `TableBody` component renders the body section of a table, containing rows of data.
+ * It automatically processes its children to add row indices and handles empty states.
+ * @component
+ * @param {TableBodyProps} props - The props for the `TableBody` component
+ * @param {ReactNode} props.children - The rows to render (typically TableRow components)
+ * @param {Function} [props.renderEmptyState] - Optional function to render custom content when there are no rows
+ * @example
+ * ```tsx
+ * import { TableBody, TableRow, TableCell } from '@payfit/unity-components'
+ *
+ * <TableBody>
+ *   <TableRow>
+ *     <TableCell>John Doe</TableCell>
+ *     <TableCell>john.doe@example.com</TableCell>
+ *   </TableRow>
+ *   <TableRow>
+ *     <TableCell>Jane Smith</TableCell>
+ *     <TableCell>jane.smith@example.com</TableCell>
+ *   </TableRow>
+ * </TableBody>
+ * ```
+ * @example
+ * ```tsx
+ * // With empty state
+ * import { TableBody, TableEmptyState } from '@payfit/unity-components'
+ *
+ * <TableBody
+ *   renderEmptyState={() => (
+ *     <TableEmptyState>
+ *       <TableEmptyStateText variant="title">No data available</TableEmptyStateText>
+ *     </TableEmptyState>
+ *   )}
+ * />
+ * ```
+ * @see {@link TableBodyProps} for all available props
+ * @see {@link TableRow} for the row component
+ * @see {@link TableEmptyState} for the empty state component
+ * @remarks
+ * {@link https://unity-components.payfit.io/?path=/story/data-table-tablebody--default|API and Demos} •
+ * {@link https://payfit.design|Design docs}
+ */
+declare const TableBody: React.ForwardRefExoticComponent<TableBodyProps & React.RefAttributes<HTMLTableSectionElement>>;
+export { TableBody };

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

@@ -0,0 +1,104 @@
+import { jsx as r } from "react/jsx-runtime";
+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)]"],
+      false: [
+        "uy:[&_tr:last-child]:border-b",
+        "uy:[&_tr:last-child]:border-b-[length:calc(1px*var(--uy-table-has-remaining-space,0))]"
+      ]
+    }
+  }
+}), 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: t,
+        className: C({ isEmpty: e }),
+        "data-dd-privacy": "mask",
+        "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
+      }
+    );
+  }
+);
+T.displayName = "TableBody";
+export {
+  T as TableBody,
+  C as tableBody
+};

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

@@ -0,0 +1,72 @@
+import { default as React } from 'react';
+export interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
+    colIndex?: number;
+    rowIndex?: number;
+    align?: 'left' | 'center' | 'right';
+    isRowHeader?: boolean;
+    /**
+     * Whether this cell should be focusable for keyboard navigation.
+     * Set to false when the cell contains interactive elements like buttons, checkboxes, etc.
+     * @default true
+     */
+    isFocusable?: boolean;
+}
+export declare const tableCell: import('tailwind-variants').TVReturnType<{
+    align: {
+        left: string;
+        center: string;
+        right: string;
+    };
+}, undefined, string[], {
+    align: {
+        left: string;
+        center: string;
+        right: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    align: {
+        left: string;
+        center: string;
+        right: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+/**
+ * The `TableCell` component renders a cell in the table, containing data.
+ * It handles keyboard navigation, focus management, and accessibility attributes.
+ * @component
+ * @param {TableCellProps} props - The props for the `TableCell` component
+ * @param {ReactNode} props.children - The content to render in the cell
+ * @param {number} [props.colIndex=0] - The index of the column (automatically set by TableRow)
+ * @param {number} [props.rowIndex=0] - The index of the row (automatically set by TableRow)
+ * @param {'left' | 'center' | 'right'} [props.align] - The text alignment within the cell
+ * @param {boolean} [props.isRowHeader=false] - Whether this cell is a row header (renders as `<th>` instead of `<td>`)
+ * @param {boolean} [props.isFocusable=true] - Whether this cell should be focusable for keyboard navigation. Set to false when the cell contains interactive elements.
+ * @example
+ * ```tsx
+ * import { TableCell } from '@payfit/unity-components'
+ *
+ * <TableCell>Cell content</TableCell>
+ * ```
+ * @example
+ * ```tsx
+ * // Row header with right alignment
+ * import { TableCell } from '@payfit/unity-components'
+ *
+ * <TableCell isRowHeader align="right">Employee ID</TableCell>
+ * ```
+ * @example
+ * ```tsx
+ * // Cell with interactive content (checkbox) - not focusable
+ * import { TableCell, CheckboxStandalone } from '@payfit/unity-components'
+ *
+ * <TableCell isFocusable={false}>
+ *   <CheckboxStandalone>Select item</CheckboxStandalone>
+ * </TableCell>
+ * ```
+ * @see {@link TableCellProps} for all available props
+ * @remarks
+ * {@link https://unity-components.payfit.io/?path=/story/data-table-tablecell--docs|API and Demos} •
+ * {@link https://payfit.design|Design docs}
+ */
+declare const TableCell: React.MemoExoticComponent<React.ForwardRefExoticComponent<TableCellProps & React.RefAttributes<HTMLTableCellElement>>>;
+export { TableCell };