@payfit/unity-components 1.0.0 → 1.1.0

package/dist/esm/components/skip-links/SkipLinks.js

@@ -0,0 +1,80 @@
+import { jsxs as d, jsx as t } from "react/jsx-runtime";
+import { forwardRef as l, useId as y } from "react";
+import { uyTv as p } from "@payfit/unity-themes";
+import { FormattedMessage as m } from "react-intl";
+import { Link as f } from "../link/Link.js";
+const b = p({
+  slots: {
+    base: [
+      "uy:sr-only",
+      "uy:focus-within:p-200",
+      "uy:focus-within:bg-surface-neutral",
+      "uy:focus-within:shadow-raising",
+      "uy:focus-within:rounded-100",
+      "uy:focus-within:not-sr-only",
+      "uy:focus-within:absolute",
+      "uy:focus-within:top-100",
+      "uy:focus-within:left-100",
+      "uy:focus-within:z-50"
+    ],
+    label: "uy:typography-h4",
+    list: "uy:mt-1 uy:space-y-1 uy:list-none"
+  }
+}), k = l(
+  ({ label: s, className: e, children: n, ...a }, i) => {
+    const o = `skip-links-label-${y()}`;
+    if (!n)
+      return null;
+    const { base: r, label: u, list: c } = b();
+    return /* @__PURE__ */ d(
+      "nav",
+      {
+        "data-dd-privacy": "allow",
+        ...a,
+        ref: i,
+        className: r({ className: e }),
+        role: "navigation",
+        "aria-labelledby": o,
+        "data-unity-component": "SkipLinks",
+        children: [
+          /* @__PURE__ */ t("span", { id: o, className: u(), children: s || /* @__PURE__ */ t(
+            m,
+            {
+              id: "unity:component:skip-links:label",
+              defaultMessage: "Skip to:"
+            }
+          ) }),
+          /* @__PURE__ */ t("ol", { className: c(), children: n })
+        ]
+      }
+    );
+  }
+), h = l(
+  ({ targetId: s, children: e, ...n }, a) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(
+    f,
+    {
+      ...n,
+      ref: a,
+      size: "small",
+      color: "primary",
+      variant: "standalone",
+      onPress: () => {
+        const i = document.getElementById(s);
+        i && (i.focus(), i.hasAttribute("tabindex") || (i.setAttribute("tabindex", "-1"), i.addEventListener(
+          "blur",
+          () => {
+            i.removeAttribute("tabindex");
+          },
+          { once: !0 }
+        )));
+      },
+      children: e
+    }
+  ) })
+);
+k.displayName = "SkipLinks";
+h.displayName = "SkipLink";
+export {
+  h as SkipLink,
+  k as SkipLinks
+};

package/dist/esm/components/spinner/Spinner.js

@@ -1,6 +1,6 @@
 import { jsxs as t, jsx as i } from "react/jsx-runtime";
-import { forwardRef as u } from "react";
-import { tv as m } from "tailwind-variants";
+import { forwardRef as p } from "react";
+import { uyTv as m } from "@payfit/unity-themes";
 import f from "../../hooks/use-id.js";
 const h = m({
   slots: {
@@ -40,7 +40,7 @@ function n({ label: l, color: o, size: e, role: r = "status", ...s }, c) {
   const a = `spinner-label-${f()}`, {
     base: d,
     indicator: y,
-    label: p
+    label: u
   } = h({
     size: e,
     color: o
@@ -90,7 +90,7 @@ function n({ label: l, color: o, size: e, role: r = "status", ...s }, c) {
           "span",
           {
             id: a,
-            className: p(),
+            className: u(),
             "aria-hidden": e !== "small",
             children: l
           }
@@ -100,7 +100,7 @@ function n({ label: l, color: o, size: e, role: r = "status", ...s }, c) {
   );
 }
 n.displayName = "Spinner";
-const S = u(
+const S = p(
   n
 );
 export {

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

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

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

@@ -7,24 +7,6 @@ export interface CellPosition {
     /** The column index (0-based) */
     colIndex: number;
 }
-/**
- * Hook that provides keyboard navigation functionality for tables.
- * This hook implements the WAI-ARIA grid keyboard interaction pattern, allowing users to:
- * - Navigate between cells using arrow keys
- * - Jump to the first/last cell in a row using Home/End
- * - Jump to the first/last cell in the table using Ctrl+Home/Ctrl+End
- * - Move between pages of rows using Page Up/Page Down
- * @example
- * ```tsx
- * const {
- *   focusedCell,
- *   isCellFocused,
- *   handleCellKeyDown,
- *   handleTableKeyDown,
- *   tableRef
- * } = useTableKeyboardNavigation()
- * ```
- */
 export declare function useTableKeyboardNavigation(): {
     focusedCell: CellPosition;
     setFocusedCell: import('react').Dispatch<import('react').SetStateAction<CellPosition>>;
@@ -34,6 +16,6 @@ export declare function useTableKeyboardNavigation(): {
     handleTableFocus: (e: React.FocusEvent<HTMLTableElement>) => void;
     handleCellFocus: (e: React.FocusEvent<HTMLTableCellElement>) => void;
     tableRef: import('react').MutableRefObject<HTMLTableElement | null>;
-    focusCell: (rowIndex: number, colIndex: number) => void;
+    focusCell: (rowIndex: number, colIndex: number, direction?: "left" | "right") => void;
     focusRow: (rowIndex: number) => void;
 };