@payfit/unity-components 1.1.0 → 1.2.0

package/dist/esm/components/side-panel/parts/SidePanelDragIndicator.js

@@ -1,10 +1,10 @@
-import { jsx as a } from "react/jsx-runtime";
-import { useRef as x, useContext as D } from "react";
-import { uyTv as b } from "@payfit/unity-themes";
-import { useDrag as h } from "@use-gesture/react";
-import { OverlayTriggerStateContext as v } from "react-aria-components";
-import { useBreakpointListener as P } from "../../../hooks/use-breakpoint-listener.js";
-const S = b({
+import { jsx as o } from "react/jsx-runtime";
+import { useRef as g, useContext as x } from "react";
+import { uyTv as D } from "@payfit/unity-themes";
+import { useDrag as b } from "@use-gesture/react";
+import { OverlayTriggerStateContext as h } from "react-aria-components";
+import { useBreakpointListener as v } from "../../../hooks/use-breakpoint-listener.js";
+const P = D({
   slots: {
     base: [
       "uy:md:hidden uy:mx-auto uy:pt-300 uy:w-500",
@@ -12,25 +12,24 @@ const S = b({
     ],
     indicator: "uy:h-50 uy:rounded-pill uy:bg-content-neutral-lowest"
   }
-}), T = 100;
-function I() {
-  const r = x(null), n = D(v), s = P(), { base: i, indicator: l } = S(), u = s === "xs" || s === "sm", c = h(
-    (d) => {
-      var o;
+}), S = 100;
+function T() {
+  const r = g(null), n = x(h), s = v(), { base: a, indicator: i } = P(), l = s === "xs" || s === "sm", u = b(
+    (c) => {
       const {
-        movement: [N, e],
-        direction: [E, m],
-        intentional: f,
-        cancel: y,
-        last: p,
-        event: g
-      } = d;
-      if (!u) {
-        y();
+        movement: [I, e],
+        direction: [N, d],
+        intentional: m,
+        cancel: f,
+        last: y,
+        event: p
+      } = c;
+      if (!l) {
+        f();
         return;
       }
-      g.preventDefault();
-      const t = (o = r.current) == null ? void 0 : o.closest(
+      p.preventDefault();
+      const t = r.current?.closest(
         "[data-unity-side-panel]"
       );
       if (t) {
@@ -38,7 +37,7 @@ function I() {
           t.style.transform = "translate3d(0, 0, 0)";
           return;
         }
-        t.style.transform = `translate3d(0, ${e}px, 0)`, t.style.transition = "none", p && f && (e > T || m > 0 ? n && setTimeout(() => {
+        t.style.transform = `translate3d(0, ${e}px, 0)`, t.style.transition = "none", y && m && (e > S || d > 0 ? n && setTimeout(() => {
           n.close();
         }, 50) : (t.style.transform = "translate3d(0, 0, 0)", t.style.transition = "transform 0.3s ease"));
       }
@@ -49,19 +48,19 @@ function I() {
       threshold: 5
     }
   );
-  return /* @__PURE__ */ a(
+  return /* @__PURE__ */ o(
     "div",
     {
-      className: i(),
+      className: a(),
       "aria-hidden": "true",
       ref: r,
-      ...c(),
-      children: /* @__PURE__ */ a("div", { className: l() })
+      ...u(),
+      children: /* @__PURE__ */ o("div", { className: i() })
     }
   );
 }
-I.displayName = "SidePanelDragIndicator";
+T.displayName = "SidePanelDragIndicator";
 export {
-  I as SidePanelDragIndicator,
-  S as sidePanelDragIndicator
+  T as SidePanelDragIndicator,
+  P as sidePanelDragIndicator
 };

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

@@ -1,14 +1,16 @@
-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({
+import { jsxs as y, jsx as t } from "react/jsx-runtime";
+import { forwardRef as l, useId as p } from "react";
+import { uyTv as f } from "@payfit/unity-themes";
+import { Link as m } from "react-aria-components";
+import { FormattedMessage as b } from "react-intl";
+import { link as k } from "../link/Link.variants.js";
+const h = f({
   slots: {
     base: [
       "uy:sr-only",
       "uy:focus-within:p-200",
       "uy:focus-within:bg-surface-neutral",
+      "uy:focus-within:border-border-neutral uy:focus-within:border-solid uy:focus-within:border-1",
       "uy:focus-within:shadow-raising",
       "uy:focus-within:rounded-100",
       "uy:focus-within:not-sr-only",
@@ -20,61 +22,66 @@ const b = p({
     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)
+}), w = l(
+  ({ label: s, className: n, children: e, ...o }, a) => {
+    const r = `skip-links-label-${p()}`;
+    if (!e)
       return null;
-    const { base: r, label: u, list: c } = b();
-    return /* @__PURE__ */ d(
+    const { base: u, label: c, list: d } = h();
+    return /* @__PURE__ */ y(
       "nav",
       {
         "data-dd-privacy": "allow",
-        ...a,
-        ref: i,
-        className: r({ className: e }),
+        ...o,
+        ref: a,
+        className: u({ className: n }),
         role: "navigation",
-        "aria-labelledby": o,
+        "aria-labelledby": r,
         "data-unity-component": "SkipLinks",
         children: [
-          /* @__PURE__ */ t("span", { id: o, className: u(), children: s || /* @__PURE__ */ t(
-            m,
+          /* @__PURE__ */ t("span", { id: r, className: c(), children: s || /* @__PURE__ */ t(
+            b,
             {
               id: "unity:component:skip-links:label",
               defaultMessage: "Skip to:"
             }
           ) }),
-          /* @__PURE__ */ t("ol", { className: c(), children: n })
+          /* @__PURE__ */ t("ol", { className: d(), children: e })
         ]
       }
     );
   }
-), h = l(
-  ({ targetId: s, children: e, ...n }, a) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(
-    f,
-    {
-      ...n,
-      ref: a,
+), g = l(
+  ({ targetId: s, children: n, ...e }, o) => {
+    const { base: a } = k({
       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
-    }
-  ) })
+      variant: "standalone"
+    });
+    return /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(
+      m,
+      {
+        ...e,
+        ref: o,
+        className: a(),
+        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: n
+      }
+    ) });
+  }
 );
-k.displayName = "SkipLinks";
-h.displayName = "SkipLink";
+w.displayName = "SkipLinks";
+g.displayName = "SkipLink";
 export {
-  h as SkipLink,
-  k as SkipLinks
+  g as SkipLink,
+  w as SkipLinks
 };

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

@@ -1,9 +1,9 @@
-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({
+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({
   base: [
     "uy:w-full uy:border uy:border-solid uy:border-border-neutral uy:rounded-100",
     "uy:relative uy:flex uy:flex-col",
@@ -13,23 +13,23 @@ const A = N({
     "uy:overflow-x-auto"
     // Handle horizontal scrolling too
   ]
-}), K = E(
-  ({ minRows: i = 10, maxRows: u = 50, children: t }, o) => /* @__PURE__ */ b(
+}), U = C(
+  ({ minRows: i = 10, maxRows: s = 50, children: t }, o) => /* @__PURE__ */ d(
     "div",
     {
       ref: o,
-      className: A(),
+      className: K(),
       "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})`
+        "--uy-table-max-rows": `calc(var(--uy-spacing-600) * ${s})`
       },
       children: t
     }
   )
 );
-K.displayName = "TableRoot";
-const M = N({
+U.displayName = "TableRoot";
+const $ = R({
   slots: {
     wrapper: [
       "uy:flex-1 uy:bg-surface-neutral",
@@ -56,105 +56,108 @@ const M = N({
   defaultVariants: {
     horizontalScroll: !0
   }
-}), U = E((i, u) => {
+}), P = C((i, s) => {
   const {
     children: t,
     label: o,
-    description: d,
-    isHorizontalScrollEnabled: x = !0,
-    ...p
-  } = i, c = z(null), { height: n = 0 } = D({
-    ref: c,
+    description: m,
+    isHorizontalScrollEnabled: g = !0,
+    ...c
+  } = i, u = N(null), { height: f = 0 } = S({
+    ref: u,
     box: "border-box"
-  }), { rowCount: f, columnCount: m } = S(() => {
+  }), { rowCount: h, columnCount: p } = T(() => {
     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((r) => a.isValidElement(r));
-      l += s.length, s.forEach((r) => {
-        if (!a.isValidElement(r)) return;
-        const w = a.Children.toArray(
+    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) => a.isValidElement(y));
-        e = Math.max(e, w.length);
+        ).filter((y) => n.isValidElement(y));
+        e = Math.max(e, v.length);
       });
     }), { rowCount: l, columnCount: e };
   }, [t]);
-  return V(u, () => ({
+  return z(s, () => ({
     scrollToTop: () => {
-      const e = c.current, l = e == null ? void 0 : e.closest(
+      const e = u.current, l = e?.closest(
         '[data-unity-slot="table-root"]'
       );
       l ? l.scrollTo({ top: 0, behavior: "smooth" }) : e && e.scrollTo({ top: 0, behavior: "smooth" });
     }
-  })), /* @__PURE__ */ b(P, { rowCount: f, columnCount: m, children: /* @__PURE__ */ b(
-    H,
+  })), /* @__PURE__ */ d(V, { rowCount: h, columnCount: p, children: /* @__PURE__ */ d(
+    E,
     {
-      scrollContainerRef: c,
-      containerHeight: n,
-      rowCount: f,
-      columnCount: m,
+      scrollContainerRef: u,
+      containerHeight: f,
+      rowCount: h,
+      columnCount: p,
       label: o,
-      description: d,
-      isHorizontalScrollEnabled: x,
-      ...p,
+      description: m,
+      isHorizontalScrollEnabled: g,
+      ...c,
       children: t
     }
   ) });
 });
-U.displayName = "Table";
-const H = (i) => {
-  var g, C, T;
+P.displayName = "Table";
+const E = (i) => {
   const {
-    children: u,
+    children: s,
     label: t,
     description: o,
-    scrollContainerRef: d,
-    containerHeight: x,
-    rowCount: p,
-    columnCount: c,
-    onKeyDown: n,
-    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));
+    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));
     },
-    [r, n]
-  ), y = (g = d.current) == null ? void 0 : g.closest(
+    [r, f]
+  ), y = m.current?.closest(
     '[data-unity-slot="table-root"]'
-  ), k = y ? y.scrollHeight > y.clientHeight : !1;
-  return /* @__PURE__ */ R(
+  ), 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(
     "div",
     {
       className: e(),
-      ref: d,
+      ref: m,
       style: {
-        "--uy-table-is-scrollable": k ? "1" : "0"
+        "--uy-table-has-remaining-space": H ? "1" : "0"
       },
       children: [
-        /* @__PURE__ */ R(
+        /* @__PURE__ */ x(
           "table",
           {
-            ref: s,
+            ref: a,
             className: l(),
             role: "grid",
-            "aria-rowcount": p,
-            "aria-colcount": c,
+            "aria-rowcount": c,
+            "aria-colcount": u,
             "aria-label": t,
-            "aria-describedby": o ? `table-desc-${(C = s.current) == null ? void 0 : C.id}` : void 0,
-            onKeyDown: w,
-            ...m,
+            "aria-describedby": o ? `table-desc-${a.current?.id}` : void 0,
+            onKeyDown: v,
+            ...p,
             children: [
-              u,
-              o && /* @__PURE__ */ b(
+              s,
+              o && /* @__PURE__ */ d(
                 "caption",
                 {
-                  id: `table-desc-${(T = s.current) == null ? void 0 : T.id}`,
+                  id: `table-desc-${a.current?.id}`,
                   className: "uy:sr-only",
                   children: o
                 }
@@ -162,13 +165,13 @@ const H = (i) => {
             ]
           }
         ),
-        /* @__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." })
+        /* @__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." })
       ]
     }
   );
 };
-H.displayName = "TableContent";
+E.displayName = "TableContent";
 export {
-  U as Table,
-  K as TableRoot
+  P as Table,
+  U as TableRoot
 };

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

@@ -8,19 +8,19 @@ const C = v({
       true: ["uy:h-[var(--uy-table-min-rows)]"],
       false: [
         "uy:[&_tr:last-child]:border-b",
-        "uy:[&_tr:last-child]:border-b-[length:calc(1px*(1-var(--uy-table-is-scrollable,0)))]"
+        "uy:[&_tr:last-child]:border-b-[length:calc(1px*var(--uy-table-has-remaining-space,0))]"
       ]
     }
   }
 }), x = b(
   ({ children: c, renderEmptyState: l, renderDataState: s, ...u }, y) => {
-    const i = s ? s() : void 0, t = i !== void 0, n = t ? [] : f.map(c, (o, m) => p.isValidElement(o) ? h(
-      o,
+    const i = s ? s() : void 0, t = i !== void 0, o = t ? [] : f.map(c, (n, m) => p.isValidElement(n) ? h(
+      n,
       {
         rowIndex: m,
-        ...o.props
+        ...n.props
       }
-    ) : o), e = !n || n.length === 0 || t, d = e && l ? l() : null;
+    ) : 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(
       "tbody",
@@ -30,7 +30,7 @@ const C = v({
         "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 }) }) : n
+        children: a ? /* @__PURE__ */ r("tr", { children: /* @__PURE__ */ r("td", { colSpan: 1e3, className: "uy:p-0", children: a }) }) : o
       }
     );
   }

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

@@ -2,7 +2,7 @@ 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 k = C({
+const w = C({
   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,46 @@ const k = C({
       right: "uy:text-right"
     }
   }
-}), N = v(
+}), k = v(
   g(
     ({
-      children: o,
-      colIndex: a = 0,
-      rowIndex: u = 0,
-      align: s,
-      onKeyDown: t,
-      onFocus: l,
-      className: n,
-      isRowHeader: i = !1,
-      isFocusable: r = !0,
+      children: a,
+      colIndex: t = 0,
+      rowIndex: n = 0,
+      align: i,
+      onKeyDown: u,
+      onFocus: r,
+      className: s,
+      isRowHeader: o = !1,
+      isFocusable: l = !0,
       ...y
-    }, f) => {
-      const { keyboardNavigation: c } = T(), { isCellFocused: d, handleCellKeyDown: b, handleCellFocus: m } = c, p = r && d(u, a), x = (e) => {
-        e.key !== "Tab" && (b(e), t == null || t(e));
+    }, 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));
       };
       return /* @__PURE__ */ h(
-        i ? "th" : "td",
+        o ? "th" : "td",
         {
-          ref: f,
-          role: i ? "rowheader" : "gridcell",
-          "aria-colindex": a + 1,
+          ref: c,
+          role: o ? "rowheader" : "gridcell",
+          "aria-colindex": t + 1,
           tabIndex: p ? 0 : -1,
-          "data-focusable": r,
-          className: k({ align: s, className: n }),
+          "data-focusable": l,
+          className: w({ align: i, className: s }),
           onKeyDown: x,
           onFocus: (e) => {
-            m(e), l == null || l(e);
+            m(e), r?.(e);
           },
           "data-dd-privacy": "mask",
           ...y,
-          children: o
+          children: a
         }
       );
     }
   )
 );
-N.displayName = "TableCell";
+k.displayName = "TableCell";
 export {
-  N as TableCell,
-  k as tableCell
+  k as TableCell,
+  w as tableCell
 };