@payfit/unity-components 1.1.0 → 1.2.0

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

@@ -1,9 +1,9 @@
-import { jsx as o } from "react/jsx-runtime";
+import { jsx as n } from "react/jsx-runtime";
 import { memo as x, forwardRef as g } from "react";
-import { uyTv as C } from "@payfit/unity-themes";
-import { Actionable as T } from "../../actionable/Actionable.js";
-import { useTableContext as w } from "../Table.context.js";
-const c = C({
+import { uyTv as w } from "@payfit/unity-themes";
+import { Actionable as C } from "../../actionable/Actionable.js";
+import { useTableContext as T } from "../Table.context.js";
+const d = w({
   base: [
     "uy:align-middle uy:leading-[1.00]",
     "uy:px-200 uy:py-100 uy:typography-action uy:text-content-neutral",
@@ -17,62 +17,62 @@ const c = C({
       right: "uy:text-right"
     }
   }
-}), H = x(
+}), D = x(
   g(
     ({
-      children: n,
-      colIndex: a = 0,
-      rowIndex: f = 0,
-      align: u,
-      onKeyDown: r,
-      onFocus: t,
-      className: d,
-      isFocusable: l = !0,
-      ...i
-    }, y) => {
-      const { keyboardNavigation: b } = w(), { isCellFocused: h, handleCellKeyDown: v, handleCellFocus: m } = b, p = l && h(f, a), s = (e) => {
-        e.key !== "Tab" && (v(e), r == null || r(
+      children: r,
+      colIndex: t = 0,
+      rowIndex: m = 0,
+      align: l,
+      onKeyDown: f,
+      onFocus: i,
+      className: u,
+      isFocusable: o = !0,
+      ...a
+    }, s) => {
+      const { keyboardNavigation: b } = T(), { isCellFocused: h, handleCellKeyDown: v, handleCellFocus: c } = b, p = o && h(m, t), y = (e) => {
+        e.key !== "Tab" && (v(e), f?.(
           e
         ));
       };
-      return "onPress" in i ? /* @__PURE__ */ o(
+      return "onPress" in a ? /* @__PURE__ */ n(
         "th",
         {
-          ref: y,
+          ref: s,
           role: "columnheader",
-          "aria-colindex": a + 1,
-          "data-focusable": l,
-          className: c({ align: u, className: d }),
+          "aria-colindex": t + 1,
+          "data-focusable": o,
+          className: d({ align: l, className: u }),
           "data-dd-privacy": "allow",
-          onKeyDown: s,
+          onKeyDown: y,
           onFocus: (e) => {
-            m(e), t == null || t(e);
+            c(e), i?.(e);
           },
-          children: /* @__PURE__ */ o(T, { ...i, children: n })
+          children: /* @__PURE__ */ n(C, { ...a, children: r })
         }
-      ) : /* @__PURE__ */ o(
+      ) : /* @__PURE__ */ n(
         "th",
         {
-          ref: y,
+          ref: s,
           role: "columnheader",
-          "aria-colindex": a + 1,
+          "aria-colindex": t + 1,
           tabIndex: p ? 0 : -1,
-          "data-focusable": l,
-          className: c({ align: u, className: d }),
-          onKeyDown: s,
+          "data-focusable": o,
+          className: d({ align: l, className: u }),
+          onKeyDown: y,
           onFocus: (e) => {
-            m(e), t == null || t(e);
+            c(e), i?.(e);
           },
           "data-dd-privacy": "allow",
-          ...i,
-          children: n
+          ...a,
+          children: r
         }
       );
     }
   )
 );
-H.displayName = "TableColumnHeader";
+D.displayName = "TableColumnHeader";
 export {
-  H as TableColumnHeader,
-  c as tableColumnHeader
+  D as TableColumnHeader,
+  d as tableColumnHeader
 };

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

@@ -1,69 +1,71 @@
-import { jsxs as b, jsx as e } from "react/jsx-runtime";
-import { forwardRef as x, useState as I } from "react";
-import { uyTv as j } from "@payfit/unity-themes";
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import { forwardRef as I, useState as j } from "react";
+import { uyTv as C } from "@payfit/unity-themes";
 import { useId as L } from "react-aria";
 import { useIntl as T } from "react-intl";
 import { Pagination as O } from "../../pagination/Pagination.js";
 import { SelectOption as R } from "../../select/parts/SelectOption.js";
-import { Select as C } from "../../select/Select.js";
-const E = j({
+import { Select as E } from "../../select/Select.js";
+const _ = C({
   base: [
     "uy:bg-surface-neutral-lowest",
     "uy:sticky uy:bottom-0",
     "uy:grid uy:grid-cols-3 uy:items-center",
     "uy:ps-200 uy:py-100 uy:pe-100"
   ]
-}), _ = [
+}), k = [
   { value: "10", label: "10" },
   { value: "50", label: "50" },
   { value: "100", label: "100" },
   { value: "200", label: "200" }
-], k = x(
-  (y, f) => {
+], A = I(
+  (b, y) => {
     const {
-      pageCount: t,
-      rowCount: s,
-      currentPage: u,
-      rowsPerPage: n = 10,
-      defaultPage: p,
-      pageSizeOptions: h = _,
-      defaultPageSize: P = n,
-      onPageChange: v,
-      onNextPress: N,
-      onPreviousPress: w,
-      onPageSizeChange: o,
-      itemLabel: c = "unity:component:table:pagination:item",
-      ...M
-    } = y, a = L(), l = T(), [$, z] = I(P), S = {
-      pageCount: t,
-      defaultPage: p,
-      currentPage: u,
-      onPageChange: v,
-      onNextPress: N,
-      onPreviousPress: w
-    }, r = Math.max(((u ?? p ?? 1) - 1) * n + 1, 1), m = Math.min(r + n - 1, s), g = {
-      singular: l.formatMessage(
+      pageCount: i,
+      rowCount: n,
+      currentPage: r,
+      rowsPerPage: s = 10,
+      defaultPage: u,
+      pageSizeOptions: f = k,
+      defaultPageSize: h = s,
+      onPageChange: P,
+      onNextPress: v,
+      onPreviousPress: N,
+      onPageSizeChange: z,
+      onPageHover: S,
+      itemLabel: g = "unity:component:table:pagination:item",
+      ...w
+    } = b, a = L(), t = T(), [M, $] = j(h), x = {
+      pageCount: i,
+      defaultPage: u,
+      currentPage: r,
+      onPageChange: P,
+      onNextPress: v,
+      onPreviousPress: N,
+      onPageHover: S
+    }, o = Math.max(((r ?? u ?? 1) - 1) * s + 1, 1), p = Math.min(o + s - 1, n), c = {
+      singular: t.formatMessage(
         {
-          id: c,
+          id: g,
           defaultMessage: "items"
         },
         { count: 1 }
       ),
-      plural: l.formatMessage(
+      plural: t.formatMessage(
         {
-          id: c,
+          id: g,
           defaultMessage: "items"
         },
         { count: 2 }
       )
     };
-    return /* @__PURE__ */ b(
+    return /* @__PURE__ */ d(
       "div",
       {
         "data-dd-privacy": "allow",
-        ...M,
-        ref: f,
-        className: E(),
+        ...w,
+        ref: y,
+        className: _(),
         "data-unity-slot": "table-pagination",
         children: [
           /* @__PURE__ */ e("div", { className: "uy:justify-self-start", children: /* @__PURE__ */ e(
@@ -71,59 +73,59 @@ const E = j({
             {
               id: `table-pagination-${a}-label`,
               className: "uy:typography-body uy:text-content-neutral",
-              children: l.formatMessage(
+              children: t.formatMessage(
                 {
                   id: "unity:component:table:pagination:label",
-                  defaultMessage: `${r}-${m} out of ${s * t} items`
+                  defaultMessage: `${o}-${p} out of ${n} items`
                 },
                 {
-                  pageCount: t,
-                  startRow: r,
-                  endRow: m,
-                  totalRows: s * t,
-                  itemLabel: g.plural
+                  pageCount: i,
+                  startRow: o,
+                  endRow: p,
+                  totalRows: n,
+                  itemLabel: c.plural
                 }
               )
             }
           ) }),
-          /* @__PURE__ */ e("div", { className: "uy:justify-self-center", children: t > 1 && /* @__PURE__ */ e(
+          /* @__PURE__ */ e("div", { className: "uy:justify-self-center", children: i > 1 && /* @__PURE__ */ e(
             O,
             {
-              ...S,
+              ...x,
               "aria-labelledby": `table-pagination-${a}-label`
             }
           ) }),
-          /* @__PURE__ */ e("div", { className: "uy:justify-self-end", children: /* @__PURE__ */ b("form", { className: "uy:flex uy:gap-100 uy:items-center", children: [
+          /* @__PURE__ */ e("div", { className: "uy:justify-self-end", children: /* @__PURE__ */ d("form", { className: "uy:flex uy:gap-100 uy:items-center", children: [
             /* @__PURE__ */ e(
               "label",
               {
                 className: "uy:shrink-0",
                 id: `table-pagination-${a}-pagesize-label`,
                 htmlFor: `table-pagination-${a}-pagesize-select`,
-                children: l.formatMessage(
+                children: t.formatMessage(
                   {
                     id: "unity:component:table:pagination:page-size-control-label",
                     defaultMessage: "Items per page"
                   },
                   {
-                    itemLabel: g.plural
+                    itemLabel: c.plural
                   }
                 )
               }
             ),
             /* @__PURE__ */ e("div", { className: "uy:grow-0 uy:w-1000", children: /* @__PURE__ */ e(
-              C,
+              E,
               {
                 id: `table-pagination-${a}-pagesize-select`,
-                items: h,
+                items: f,
                 placeholder: "",
-                value: `${$}`,
-                onChange: (i) => {
-                  const d = parseInt(i, 10);
-                  o == null || o(d), z(d);
+                value: `${M}`,
+                onChange: (l) => {
+                  const m = parseInt(l, 10);
+                  z?.(m), $(m);
                 },
                 "aria-labelledby": `table-pagination-${a}-pagesize-label`,
-                children: (i) => /* @__PURE__ */ e(R, { id: i.value, children: i.label })
+                children: (l) => /* @__PURE__ */ e(R, { id: l.value, children: l.label })
               }
             ) })
           ] }) })
@@ -132,8 +134,8 @@ const E = j({
     );
   }
 );
-k.displayName = "TablePagination";
+A.displayName = "TablePagination";
 export {
-  k as TablePagination,
-  E as tablePagination
+  A as TablePagination,
+  _ as tablePagination
 };

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

@@ -1,7 +1,7 @@
-import { jsx as d } from "react/jsx-runtime";
-import n, { memo as c, forwardRef as y, useMemo as f, Children as m, cloneElement as p } from "react";
+import { jsx as b } from "react/jsx-runtime";
+import d, { memo as y, forwardRef as c, useMemo as f, Children as m, cloneElement as p } from "react";
 import { uyTv as v } from "@payfit/unity-themes";
-const g = v({
+const w = v({
   base: [
     "uy:group uy:h-500",
     "uy:bg-surface-neutral uy:border-b uy:border-solid uy:border-b-border-neutral-enabled",
@@ -10,30 +10,30 @@ const g = v({
     "uy:aria-[selected=true]:bg-surface-neutral-selected uy:aria-[selected=true]:border-b-border-neutral-selected",
     "uy:focus-visible:outline-2 uy:focus-visible:outline-solid uy:focus-visible:outline-offset-[-2px] uy:focus-visible:outline-utility-focus-ring"
   ]
-}), R = c(
-  y(
-    ({ children: o, className: a, rowIndex: r = 0, onKeyDown: u, isSelected: t, ...s }, l) => {
-      const i = f(() => m.map(o, (e, b) => n.isValidElement(e) ? p(
+}), g = y(
+  c(
+    ({ children: o, className: t, rowIndex: r = 0, onKeyDown: a, isSelected: u, ...s }, l) => {
+      const i = f(() => m.map(o, (e, n) => d.isValidElement(e) ? p(
         e,
         {
           rowIndex: r,
-          colIndex: b,
+          colIndex: n,
           ...e.props
         }
       ) : e), [o, r]);
-      return /* @__PURE__ */ d(
+      return /* @__PURE__ */ b(
         "tr",
         {
           ref: l,
           role: "row",
-          className: g({ className: a }),
+          className: w({ className: t }),
           "aria-rowindex": r + 1,
-          "aria-selected": t,
+          "aria-selected": u,
           onKeyDown: (e) => {
-            u == null || u(e);
+            a?.(e);
           },
           "data-dd-privacy": "mask",
-          "data-selectable": t !== void 0,
+          "data-selectable": u !== void 0,
           ...s,
           children: i
         }
@@ -41,8 +41,8 @@ const g = v({
     }
   )
 );
-R.displayName = "TableRow";
+g.displayName = "TableRow";
 export {
-  R as TableRow,
-  g as tableRow
+  g as TableRow,
+  w as tableRow
 };

package/dist/esm/components/tabs/parts/TabList.js

@@ -1,87 +1,83 @@
-import { jsxs as C, jsx as n } from "react/jsx-runtime";
-import { forwardRef as B, useRef as j, useState as L, useCallback as q } from "react";
-import { TabList as g } from "react-aria-components";
-import { useResizeObserver as w } from "usehooks-ts";
-import { useTabsContext as z } from "../Tabs.context.js";
-import { tabsVariant as P } from "../Tabs.variant.js";
-import { NavigationButton as p } from "./NavigationButton.js";
-const k = B(
-  ({ children: f }, u) => {
-    const r = j(null), [S, R] = L(!1), [v, y] = L(!1), { variant: W, scrollable: b } = z(), { tabList: m, scroller: N } = P({ variant: W, scrollable: b }), h = q(() => {
-      if (!r.current) return;
-      const { scrollLeft: t, scrollWidth: s, clientWidth: e } = r.current;
-      R(t > 0), y(t + e < s);
+import { jsxs as A, jsx as c } from "react/jsx-runtime";
+import { forwardRef as C, useRef as B, useState as d, useCallback as j } from "react";
+import { TabList as L } from "react-aria-components";
+import { useResizeObserver as q } from "usehooks-ts";
+import { useTabsContext as w } from "../Tabs.context.js";
+import { tabsVariant as z } from "../Tabs.variant.js";
+import { NavigationButton as g } from "./NavigationButton.js";
+const P = C(
+  ({ children: i }, f) => {
+    const t = B(null), [p, S] = d(!1), [R, v] = d(!1), { variant: y, scrollable: u } = w(), { tabList: b, scroller: W } = z({ variant: y, scrollable: u }), m = j(() => {
+      if (!t.current) return;
+      const { scrollLeft: r, scrollWidth: s, clientWidth: e } = t.current;
+      S(r > 0), v(r + e < s);
     }, []);
-    w({
-      ref: r,
-      onResize: h
+    q({
+      ref: t,
+      onResize: m
     });
-    const T = (t) => {
-      h();
-    }, x = () => {
-      var l;
-      const t = (l = r.current) == null ? void 0 : l.querySelectorAll("[role=tab]");
-      if (!r.current || !t) return 0;
-      const { scrollLeft: s } = r.current, e = Array.from(t);
+    const N = (r) => {
+      m();
+    }, T = () => {
+      const r = t.current?.querySelectorAll("[role=tab]");
+      if (!t.current || !r) return 0;
+      const { scrollLeft: s } = t.current, e = Array.from(r);
       for (let o = e.length - 1; o >= 0; o--) {
-        const c = e[o];
-        if (c.offsetLeft < s)
-          return -c.offsetWidth;
+        const l = e[o];
+        if (l.offsetLeft < s)
+          return -l.offsetWidth;
       }
       return 0;
-    }, A = () => {
-      var c;
-      const t = (c = r.current) == null ? void 0 : c.querySelectorAll("[role=tab]");
-      if (!r.current || !t) return 0;
-      const { scrollLeft: s, clientWidth: e } = r.current, l = Array.from(t), o = s + e;
-      for (let a = 0; a < l.length - 1; a++) {
-        const i = l[a], d = i.offsetLeft + i.offsetWidth;
-        if (d > o || d < o)
-          return i.offsetWidth;
+    }, x = () => {
+      const r = t.current?.querySelectorAll("[role=tab]");
+      if (!t.current || !r) return 0;
+      const { scrollLeft: s, clientWidth: e } = t.current, o = Array.from(r), l = s + e;
+      for (let n = 0; n < o.length - 1; n++) {
+        const a = o[n], h = a.offsetLeft + a.offsetWidth;
+        if (h > l || h < l)
+          return a.offsetWidth;
       }
       return 0;
     };
-    return b ? /* @__PURE__ */ C("div", { className: "uy:relative", children: [
-      S && /* @__PURE__ */ n(
-        p,
+    return u ? /* @__PURE__ */ A("div", { className: "uy:relative", children: [
+      p && /* @__PURE__ */ c(
+        g,
         {
           direction: "left",
           onPress: () => {
-            var t;
-            (t = r.current) == null || t.scrollBy({
+            t.current?.scrollBy({
               behavior: "smooth",
-              left: x()
+              left: T()
             });
           }
         }
       ),
-      /* @__PURE__ */ n(
+      /* @__PURE__ */ c(
         "div",
         {
-          ref: r,
+          ref: t,
           "data-testid": "scrollable-tab-list",
-          className: N(),
-          onScroll: T,
-          children: /* @__PURE__ */ n(g, { ref: u, className: m(), children: f })
+          className: W(),
+          onScroll: N,
+          children: /* @__PURE__ */ c(L, { ref: f, className: b(), children: i })
         }
       ),
-      v && /* @__PURE__ */ n(
-        p,
+      R && /* @__PURE__ */ c(
+        g,
         {
           direction: "right",
           onPress: () => {
-            var t;
-            (t = r.current) == null || t.scrollBy({
+            t.current?.scrollBy({
               behavior: "smooth",
-              left: A()
+              left: x()
             });
           }
         }
       )
-    ] }) : /* @__PURE__ */ n(g, { ref: u, className: m(), children: f });
+    ] }) : /* @__PURE__ */ c(L, { ref: f, className: b(), children: i });
   }
 );
-k.displayName = "TabList";
+P.displayName = "TabList";
 export {
-  k as TabList
+  P as TabList
 };

package/dist/esm/components/task-menu/parts/Content.js

@@ -1,45 +1,45 @@
-import { jsx as n } from "react/jsx-runtime";
-import { uyTv as a } from "@payfit/unity-themes";
+import { jsx as s } from "react/jsx-runtime";
+import { uyTv as m } from "@payfit/unity-themes";
 import { FocusScope as p, useOverlay as f, mergeProps as b } from "react-aria";
 import { useBreakpointListener as i } from "../../../hooks/use-breakpoint-listener.js";
 import { useTaskMenuContext as r } from "../TaskMenu.context.js";
-const v = a({
+const v = m({
   base: [
     "uy:flex uy:flex-col uy:mt-100",
     "uy:flex uy:md:flex-col uy:md:gap-200 uy:md:list-none uy:md:mt-0",
     "uy:focus-visible:outline-2 uy:focus-visible:outline uy:focus-visible:outline-offset-2 uy:focus-visible:outline-utility-focus-ring"
   ]
-}), l = ({ children: s }) => {
+}), l = ({ children: e }) => {
   const {
-    taskMenuContentId: e,
-    state: o,
-    overlayProps: c,
-    overlayRef: t
-  } = r(), u = i(), y = u === "xs" || u === "sm", { overlayProps: m } = f(
+    taskMenuContentId: o,
+    state: t,
+    overlayProps: a,
+    overlayRef: n
+  } = r(), u = i(), c = u === "xs" || u === "sm", { overlayProps: y } = f(
     {
-      onClose: () => o == null ? void 0 : o.close(),
-      isOpen: o == null ? void 0 : o.isOpen,
+      onClose: () => t?.close(),
+      isOpen: t?.isOpen,
       isDismissable: !1
     },
-    t
+    n
   );
-  return /* @__PURE__ */ n(
+  return /* @__PURE__ */ s(
     "ol",
     {
-      ...b(m, c),
-      ref: t,
+      ...b(y, a),
+      ref: n,
       className: v(),
-      id: e,
-      ...y && { "data-mobile-open": o == null ? void 0 : o.isOpen },
-      children: s
+      id: o,
+      ...c && { "data-mobile-open": t?.isOpen },
+      children: e
     }
   );
-}, d = ({ children: s }) => {
-  const { state: e } = r();
-  return !!(e != null && e.isOpen) && /* @__PURE__ */ n("div", { className: "uy:absolute uy:z-9 uy:top-full uy:inset-x-0 uy:h-[100dvh] uy:bg-surface-neutral", children: /* @__PURE__ */ n(p, { contain: !0, restoreFocus: !0, autoFocus: !0, children: /* @__PURE__ */ n(l, { children: s }) }) });
-}, x = ({ children: s }) => {
-  const e = i();
-  return e === "xs" || e === "sm" ? /* @__PURE__ */ n(d, { children: s }) : /* @__PURE__ */ n(l, { children: s });
+}, d = ({ children: e }) => {
+  const { state: o } = r();
+  return !!o?.isOpen && /* @__PURE__ */ s("div", { className: "uy:absolute uy:z-9 uy:top-full uy:inset-x-0 uy:h-[100dvh] uy:bg-surface-neutral", children: /* @__PURE__ */ s(p, { contain: !0, restoreFocus: !0, autoFocus: !0, children: /* @__PURE__ */ s(l, { children: e }) }) });
+}, x = ({ children: e }) => {
+  const o = i();
+  return o === "xs" || o === "sm" ? /* @__PURE__ */ s(d, { children: e }) : /* @__PURE__ */ s(l, { children: e });
 };
 x.displayName = "TaskMenuContent";
 export {

package/dist/esm/components/task-menu/parts/Header.js

@@ -1,7 +1,7 @@
-import { jsxs as d, jsx as o } from "react/jsx-runtime";
+import { jsxs as d, jsx as s } from "react/jsx-runtime";
 import { uyTv as m } from "@payfit/unity-themes";
-import { useIntl as p } from "react-intl";
-import { IconButton as c } from "../../icon-button/IconButton.js";
+import { useIntl as c } from "react-intl";
+import { IconButton as p } from "../../icon-button/IconButton.js";
 import { Text as f } from "../../text/Text.js";
 import { useTaskMenuContext as y } from "../TaskMenu.context.js";
 const h = m({
@@ -11,40 +11,40 @@ const h = m({
   }
 }), g = () => {
   const {
-    currentTask: n,
-    taskMenuId: r,
-    taskMenuContentId: s,
+    currentTask: t,
+    taskMenuId: a,
+    taskMenuContentId: n,
     state: e,
-    triggerProps: a,
-    triggerRef: i
-  } = y(), l = p(), { header: t, headerSelectedTask: u } = h();
-  return /* @__PURE__ */ d("div", { className: t(), children: [
-    /* @__PURE__ */ o(
+    triggerProps: r,
+    triggerRef: o
+  } = y(), i = c(), { header: l, headerSelectedTask: u } = h();
+  return /* @__PURE__ */ d("div", { className: l(), children: [
+    /* @__PURE__ */ s(
       f,
       {
         asElement: "span",
         className: u(),
-        "aria-describedby": r,
-        children: n == null ? void 0 : n.label
+        "aria-describedby": a,
+        children: t?.label
       }
     ),
-    /* @__PURE__ */ o(
-      c,
+    /* @__PURE__ */ s(
+      p,
       {
-        ...a,
-        ref: i,
+        ...r,
+        ref: o,
         variant: "ghost",
         color: "neutral",
-        icon: e != null && e.isOpen ? "CloseOutlined" : "ListOutlined",
-        label: l.formatMessage({
-          id: e != null && e.isOpen ? "unity:component:task-menu:header:menu-close" : "unity:component:task-menu:header:menu-open",
-          defaultMessage: e != null && e.isOpen ? "Close task menu" : "Open task menu"
+        icon: e?.isOpen ? "CloseOutlined" : "ListOutlined",
+        label: i.formatMessage({
+          id: e?.isOpen ? "unity:component:task-menu:header:menu-close" : "unity:component:task-menu:header:menu-open",
+          defaultMessage: e?.isOpen ? "Close task menu" : "Open task menu"
         }),
         onClick: () => {
-          e == null || e.toggle();
+          e?.toggle();
         },
-        "aria-expanded": !!(e != null && e.isOpen),
-        "aria-controls": s
+        "aria-expanded": !!e?.isOpen,
+        "aria-controls": n
       }
     )
   ] });