@payfit/unity-components 1.2.0 → 2.0.0

package/dist/esm/components/pagination/parts/RawPaginationPrevious.js

@@ -0,0 +1,67 @@
+import { jsx as o } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import { uyTv as g } from "@payfit/unity-themes";
+import { Link as v } from "react-aria-components";
+import { useIntl as b } from "react-intl";
+import { Icon as h } from "../../icon/Icon.js";
+import { Tooltip as w } from "../../tooltip/Tooltip.js";
+import { usePaginationContext as x } from "../PaginationContext.js";
+const P = g({
+  base: [
+    "uy:min-w-300 uy:h-300 uy:p-25 uy:flex uy:justify-center uy:items-center uy:typography-action uy:rounded-circle uy:transition-colors",
+    "uy:text-content-neutral-lowest uy:enabled:bg-transparent uy:cursor-pointer",
+    "uy:hover:text-content-neutral-hover uy:hover:bg-surface-neutral-hover",
+    "uy:active:text-content-neutral-pressed uy:active:bg-surface-neutral-pressed",
+    "uy:data-[pressed]:text-content-neutral-pressed uy:data-[pressed]:bg-surface-neutral-pressed",
+    "uy:data-[disabled]:text-content-neutral-disabled uy:data-[disabled]:bg-transparent uy:data-[disabled]:cursor-not-allowed",
+    "uy:focus-visible:outline-2 uy:focus-visible:outline-solid uy:focus-visible:outline-utility-focus-ring uy:focus-visible:outline-offset-2"
+  ]
+}), D = m(({ isDisabled: a, href: n, onPress: i, ...s }, u) => {
+  const r = b(), {
+    onKeyDown: l,
+    currentPage: e,
+    onPageChange: c
+  } = x(), t = r.formatMessage({
+    id: "unity:component:common:previous",
+    defaultMessage: "Previous"
+  }), y = r.formatMessage(
+    {
+      id: "unity:component:pagination:nav-button:description",
+      defaultMessage: "Go to previous page"
+    },
+    {
+      variant: t
+    }
+  ), d = (f) => {
+    l(f);
+  }, p = () => {
+    !n && e > 1 && c(e - 1, e, -1);
+  };
+  return /* @__PURE__ */ o(w, { title: t, children: /* @__PURE__ */ o(
+    v,
+    {
+      ref: u,
+      href: n,
+      className: P(),
+      isDisabled: a,
+      onPress: i ?? p,
+      "aria-label": t,
+      "aria-description": y,
+      onKeyDown: d,
+      ...s,
+      children: /* @__PURE__ */ o(
+        h,
+        {
+          src: "CaretLeftOutlined",
+          size: 20,
+          color: "inherit",
+          role: "presentation"
+        }
+      )
+    }
+  ) });
+});
+D.displayName = "RawPaginationPrevious";
+export {
+  D as RawPaginationPrevious
+};

package/dist/esm/components/pagination/utils/pagination-window.js

@@ -1,33 +1,42 @@
-function o(e, i) {
-  return Array.from({ length: i - e + 1 }, (t, h) => h + e).map(
-    (t) => ({
+function y(s, l) {
+  return Array.from({ length: l - s + 1 }, (p, t) => t + s).map(
+    (p) => ({
       type: "page",
-      value: t
+      value: p
     })
   );
 }
 const n = 5;
-function a(e, i, t) {
-  const h = Math.max(
+function d(s, l, p) {
+  const t = Math.max(
     n,
-    t
-  ), p = h - 2;
-  if (e <= h)
-    return Array.from({ length: e }, (y, f) => ({
+    p % 2 === 0 ? p + 1 : p
+  ), h = t - 2;
+  if (s === -1) {
+    const e = [];
+    e.push({ type: "page", value: 1 });
+    const o = h - 1, u = Math.floor(o / 2);
+    return l <= 3 + u ? (e.push(...y(2, t - 1)), e.push({ type: "ellipsis", value: [t, 1 / 0] })) : (e.push({ type: "ellipsis", value: [2, l - u] }), e.push(...y(l - u + 1, l + u)), e.push({
+      type: "ellipsis",
+      value: [l + u + 1, 1 / 0]
+    })), e;
+  }
+  if (s <= t)
+    return Array.from({ length: s }, (e, o) => ({
       type: "page",
-      value: f + 1
+      value: o + 1
     }));
-  const s = [];
-  s.push({ type: "page", value: 1 });
-  const u = p - 2, l = Math.floor(u / 2);
-  return i <= 3 + l ? (s.push(...o(2, p)), s.push({ type: "ellipsis", value: [p + 1, e - 1] })) : i >= e - (2 + l) ? (s.push({
+  const i = [];
+  i.push({ type: "page", value: 1 });
+  const v = h - 2, f = Math.floor(v / 2);
+  return l <= 3 + f ? (i.push(...y(2, h)), i.push({ type: "ellipsis", value: [h + 1, s - 1] })) : l >= s - (2 + f) ? (i.push({
     type: "ellipsis",
-    value: [2, e - (p - 1) - 1]
-  }), s.push(...o(e - (p - 1), e - 1))) : (s.push({ type: "ellipsis", value: [2, i - l - 1] }), s.push(...o(i - l, i + l)), s.push({
+    value: [2, s - (h - 1) - 1]
+  }), i.push(...y(s - (h - 1), s - 1))) : (i.push({ type: "ellipsis", value: [2, l - f - 1] }), i.push(...y(l - f, l + f)), i.push({
     type: "ellipsis",
-    value: [i + l + 1, e - 1]
-  })), s.push({ type: "page", value: e }), s;
+    value: [l + f + 1, s - 1]
+  })), i.push({ type: "page", value: s }), i;
 }
 export {
-  a as generatePaginationWithWindow
+  d as generatePaginationWithWindow
 };

package/dist/esm/components/select/Select.js

@@ -1,78 +1,96 @@
-import { jsxs as p, jsx as e } from "react/jsx-runtime";
-import { forwardRef as P, useState as j } from "react";
-import { uyTv as B } from "@payfit/unity-themes";
-import { useFilter as F, Select as K, Popover as O, Autocomplete as A, ListBox as i } from "react-aria-components";
-import { SearchInput as I } from "./parts/SearchInput.js";
-import { SelectButton as L } from "./parts/SelectButton.js";
-const T = B({
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import { forwardRef as j, useState as B } from "react";
+import { uyTv as C } from "@payfit/unity-themes";
+import { useFilter as F, Select as z, Popover as A, Autocomplete as I, Virtualizer as p, ListLayout as d, ListBox as y } from "react-aria-components";
+import { SearchInput as T } from "./parts/SearchInput.js";
+import { SelectButton as U } from "./parts/SelectButton.js";
+const V = C({
   slots: {
     base: "uy:flex uy:flex-col uy:gap-100 uy:w-full",
     popover: "uy:rounded-75 uy:border uy:border-solid uy:border-border-neutral uy:w-[var(--trigger-width)] uy:bg-surface-neutral",
-    listbox: "uy:overflow-y-auto uy:max-h-[296px] uy:pt-100 uy:pb-100 uy:pl-100 uy:pr-100"
+    listbox: "uy:overflow-y-auto uy:max-h-[296px] uy:pt-100 uy:pb-100"
   }
-}), U = ({
+}), $ = ({
   children: t,
   items: o,
   placeholder: r,
-  name: d,
+  name: f,
   isDisabled: l,
   isInvalid: s,
-  isReadOnly: c,
-  value: n,
-  defaultValue: y,
-  onChange: u,
-  isSearchable: f = !1,
-  onBlur: m,
+  isReadOnly: n,
+  value: i,
+  defaultValue: m,
+  onChange: a,
+  isSearchable: b = !1,
+  onBlur: x,
   placement: S,
-  ...b
-}, x) => {
-  const [v, h] = j(!1), { contains: g } = F({ sensitivity: "base" }), { base: w, popover: N, listbox: a } = T(), C = n !== void 0 || u !== void 0 ? {
-    selectedKey: n,
-    onSelectionChange: u
-  } : { defaultSelectedKey: y };
-  return /* @__PURE__ */ p(
-    K,
+  ...h
+}, v) => {
+  const [g, w] = B(!1), { contains: N } = F({ sensitivity: "base" }), { base: O, popover: L, listbox: u } = V(), P = i !== void 0 || a !== void 0 ? {
+    value: i,
+    onChange: a
+  } : { defaultValue: m };
+  return /* @__PURE__ */ c(
+    z,
     {
-      onOpenChange: h,
-      ...b,
-      ref: x,
-      className: w(),
-      name: d,
+      onOpenChange: w,
+      ...h,
+      ref: v,
+      className: O(),
+      name: f,
       placeholder: l ? void 0 : r,
-      isDisabled: l || c,
+      isDisabled: l || n,
       isInvalid: s,
-      onBlur: m,
-      ...C,
+      onBlur: x,
+      ...P,
       children: [
         /* @__PURE__ */ e(
-          L,
+          U,
           {
             isDisabled: l,
             isInvalid: s,
-            isReadOnly: c,
-            isOpen: v
+            isReadOnly: n,
+            isOpen: g
           }
         ),
         /* @__PURE__ */ e(
-          O,
+          A,
           {
             offset: 1,
             containerPadding: 8,
-            className: N(),
+            className: L(),
             placement: S,
-            children: f ? /* @__PURE__ */ p(A, { filter: g, children: [
-              /* @__PURE__ */ e(I, {}),
-              /* @__PURE__ */ e(i, { items: o, className: a(), children: t })
-            ] }) : /* @__PURE__ */ e(i, { items: o, className: a(), children: t })
+            children: b ? /* @__PURE__ */ c(I, { filter: N, children: [
+              /* @__PURE__ */ e(T, {}),
+              /* @__PURE__ */ e(
+                p,
+                {
+                  layout: d,
+                  layoutOptions: {
+                    padding: 8
+                  },
+                  children: /* @__PURE__ */ e(y, { items: o, className: u(), children: t })
+                }
+              )
+            ] }) : /* @__PURE__ */ e(
+              p,
+              {
+                layout: d,
+                layoutOptions: {
+                  padding: 8
+                },
+                children: /* @__PURE__ */ e(y, { items: o, className: u(), children: t })
+              }
+            )
           }
         )
       ]
     }
   );
-}, $ = P(function(o, r) {
-  return U(o, r);
+}, k = j(function(o, r) {
+  return $(o, r);
 });
-$.displayName = "Select";
+k.displayName = "Select";
 export {
-  $ as Select
+  k as Select
 };

package/dist/esm/components/select/parts/SelectOption.js

@@ -1,11 +1,11 @@
-import { jsx as e, jsxs as d, Fragment as i } from "react/jsx-runtime";
-import { forwardRef as y } from "react";
+import { jsx as e, jsxs as y, Fragment as i } from "react/jsx-runtime";
+import { forwardRef as d } from "react";
 import { uyTv as f } from "@payfit/unity-themes";
-import { ListBoxItem as m } from "react-aria-components";
-import { Icon as p } from "../../icon/Icon.js";
+import { ListBoxItem as p } from "react-aria-components";
+import { Icon as m } from "../../icon/Icon.js";
 import { SelectOptionProvider as b } from "./SelectOption.context.js";
 const x = f({
-  base: "uy:flex uy:flex-col uy:typography-body uy:rounded-50 uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150 uy:outline-none",
+  base: "uy:flex uy:flex-col uy:typography-body uy:rounded-50 uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150 uy:outline-none uy:cursor-pointer",
   variants: {
     isFocusVisible: {
       true: "uy:outline-offset-2 uy:outline-2 uy:outline-solid uy:outline-utility-focus-ring"
@@ -33,11 +33,11 @@ const x = f({
       class: "uy:bg-surface-neutral-enabled uy:text-content-neutral-enabled"
     }
   ]
-}), v = y(
+}), v = d(
   (s, l) => {
     const { children: u, isDisabled: r, textValue: n } = s;
     return /* @__PURE__ */ e(
-      m,
+      p,
       {
         ...s,
         ref: l,
@@ -50,9 +50,9 @@ const x = f({
           isSelected: c,
           isDisabled: r
         }),
-        children: ({ isSelected: t }) => /* @__PURE__ */ e(b, { isDisabled: r, children: t ? /* @__PURE__ */ d("div", { className: "uy:flex uy:justify-between", children: [
+        children: ({ isSelected: t }) => /* @__PURE__ */ e(b, { isDisabled: r, children: t ? /* @__PURE__ */ y("div", { className: "uy:flex uy:justify-between", children: [
           /* @__PURE__ */ e("div", { className: "uy:flex uy:flex-col", children: /* @__PURE__ */ e(i, { children: u }) }),
-          /* @__PURE__ */ e(p, { src: "CheckOutlined" })
+          /* @__PURE__ */ e(m, { src: "CheckOutlined" })
         ] }) : /* @__PURE__ */ e(i, { children: u }) })
       }
     );

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

@@ -3,7 +3,7 @@ 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";
+import { link as k } from "../link/RawLink.js";
 const h = f({
   slots: {
     base: [

package/dist/esm/components/table/Table.d.ts

@@ -13,6 +13,7 @@ export interface TableRootProps extends PropsWithChildren {
  * @component
  * The `TableRoot` component serves as the container for the table and its pagination controls.
  * It provides styling and layout for the table, including min and max height constraints.
+ * The pagination remains fixed while the table content can scroll horizontally if needed.
  * @param {TableRootProps} props - The props for the `TableRoot` component
  * @param {number} [props.minRows=10] - The minimum number of rows to display, affecting the minimum height
  * @param {number} [props.maxRows=50] - The maximum number of rows to display, affecting the maximum height

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

@@ -1,5 +1,5 @@
-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 { 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";
@@ -8,23 +8,22 @@ const K = R({
     "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
+    "uy:overflow-y-auto"
+    // Handle vertical scrolling only
+    // Remove horizontal overflow - pagination should not scroll horizontally
   ]
-}), U = C(
-  ({ minRows: i = 10, maxRows: s = 50, children: t }, o) => /* @__PURE__ */ d(
+}), U = T(
+  ({ minRows: s = 10, maxRows: u = 50, children: o }, l) => /* @__PURE__ */ f(
     "div",
     {
-      ref: o,
+      ref: l,
       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) * ${s})`
+        "--uy-table-min-rows": `calc(var(--uy-spacing-600) * ${s})`,
+        "--uy-table-max-rows": `calc(var(--uy-spacing-600) * ${u})`
       },
-      children: t
+      children: o
     }
   )
 );
@@ -33,8 +32,9 @@ const $ = R({
   slots: {
     wrapper: [
       "uy:flex-1 uy:bg-surface-neutral",
-      "uy:w-full"
-      // No overflow handling - parent TableRoot handles all scrolling
+      "uy:w-full",
+      // Handle horizontal scrolling in the wrapper, independent of pagination
+      "uy:overflow-x-auto"
     ],
     table: [
       "uy:min-w-full",
@@ -45,10 +45,12 @@ const $ = R({
   variants: {
     horizontalScroll: {
       true: {
-        // Only apply horizontal scroll to the table itself, not wrapper
+        // 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"
       }
     }
@@ -56,85 +58,92 @@ const $ = R({
   defaultVariants: {
     horizontalScroll: !0
   }
-}), P = C((i, s) => {
+}), P = T((s, u) => {
   const {
-    children: t,
-    label: o,
+    children: o,
+    label: l,
     description: m,
     isHorizontalScrollEnabled: g = !0,
     ...c
-  } = i, u = N(null), { height: f = 0 } = S({
-    ref: u,
+  } = s, y = N(null), { height: h = 0 } = S({
+    ref: y,
     box: "border-box"
-  }), { rowCount: h, columnCount: p } = T(() => {
-    let e = 0, l = 0;
-    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) => n.isValidElement(y));
-        e = Math.max(e, v.length);
+  }), { 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(
+        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);
       });
-    }), { rowCount: l, columnCount: e };
-  }, [t]);
-  return z(s, () => ({
+    }), { rowCount: r, columnCount: t };
+  }, [o]);
+  return z(u, () => ({
     scrollToTop: () => {
-      const e = u.current, l = e?.closest(
+      const t = y.current, r = t?.closest(
         '[data-unity-slot="table-root"]'
       );
-      l ? l.scrollTo({ top: 0, behavior: "smooth" }) : e && e.scrollTo({ top: 0, behavior: "smooth" });
+      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;
+      }
     }
-  })), /* @__PURE__ */ d(V, { rowCount: h, columnCount: p, children: /* @__PURE__ */ d(
+  })), /* @__PURE__ */ f(V, { rowCount: p, columnCount: w, children: /* @__PURE__ */ f(
     E,
     {
-      scrollContainerRef: u,
-      containerHeight: f,
-      rowCount: h,
-      columnCount: p,
-      label: o,
+      scrollContainerRef: y,
+      containerHeight: h,
+      rowCount: p,
+      columnCount: w,
+      label: l,
       description: m,
       isHorizontalScrollEnabled: g,
       ...c,
-      children: t
+      children: o
     }
   ) });
 });
 P.displayName = "Table";
-const E = (i) => {
+const E = (s) => {
   const {
-    children: s,
-    label: t,
-    description: o,
+    children: u,
+    label: o,
+    description: l,
     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(
+    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" && (r(b), f?.(b));
+      b.key !== "Tab" && (n(b), h?.(b));
     },
-    [r, f]
-  ), y = m.current?.closest(
+    [n, h]
+  ), d = m.current?.closest(
     '[data-unity-slot="table-root"]'
-  ), H = T(() => {
-    if (!y || c === 0) return !1;
-    const b = y.clientHeight;
+  ), H = C(() => {
+    if (!d || c === 0) return !1;
+    const b = d.clientHeight;
     return (a.current?.clientHeight ?? 0) / b < 0.9;
-  }, [y, c]);
+  }, [d, c]);
   return /* @__PURE__ */ x(
     "div",
     {
-      className: e(),
+      className: t(),
       ref: m,
       style: {
         "--uy-table-has-remaining-space": H ? "1" : "0"
@@ -144,28 +153,28 @@ const E = (i) => {
           "table",
           {
             ref: a,
-            className: l(),
+            className: r(),
             role: "grid",
             "aria-rowcount": c,
-            "aria-colcount": u,
-            "aria-label": t,
-            "aria-describedby": o ? `table-desc-${a.current?.id}` : void 0,
+            "aria-colcount": y,
+            "aria-label": o,
+            "aria-describedby": l ? `table-desc-${a.current?.id}` : void 0,
             onKeyDown: v,
-            ...p,
+            ...w,
             children: [
-              s,
-              o && /* @__PURE__ */ d(
+              u,
+              l && /* @__PURE__ */ f(
                 "caption",
                 {
                   id: `table-desc-${a.current?.id}`,
                   className: "uy:sr-only",
-                  children: o
+                  children: l
                 }
               )
             ]
           }
         ),
-        /* @__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." })
+        /* @__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." })
       ]
     }
   );

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

@@ -126,7 +126,7 @@ function O() {
     [l]
   ), x = i(
     (e) => {
-      if (e.key === "Tab" || !a.current) return;
+      if (e.key === "RawTab" || !a.current) return;
       let t = e.currentTarget;
       const s = e.target;
       if (s !== t) {
@@ -173,19 +173,19 @@ function O() {
           break;
         case "PageUp":
           e.preventDefault();
-          const f = Math.max(0, r - 5), p = n[f];
-          if (!p) break;
-          const R = Array.from(p.querySelectorAll("td, th")), E = Math.min(u, R.length - 1);
+          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 w = Math.min(n.length - 1, r + 5), C = n[w];
+          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(w, F);
+          l(p, F);
           break;
       }
     },