@payfit/unity-components 2.46.12 → 2.46.13

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

@@ -1,228 +0,0 @@
-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

@@ -1,21 +0,0 @@
-/**
- * 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

@@ -1,209 +0,0 @@
-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

@@ -1,71 +0,0 @@
-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

@@ -1,104 +0,0 @@
-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

@@ -1,72 +0,0 @@
-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 };