@payfit/unity-components 2.47.4 → 2.47.6

package/dist/esm/components/client-side-pagination/ClientSidePagination.js

@@ -1,177 +1,130 @@
-import { jsxs as x, jsx as n } from "react/jsx-runtime";
-import { forwardRef as M, useRef as T, useMemo as q } from "react";
-import { uyTv as R } from "@payfit/unity-themes";
-import { useId as S } from "react-aria/useId";
-import { useIntl as E } from "react-intl";
-import { useOverlayTriggerState as W } from "react-stately/useOverlayTriggerState";
-import { usePagination as $ } from "./hooks/use-pagination.js";
-import { PaginationEllipsis as j } from "./parts/PaginationEllipsis.js";
-import { PaginationJumpDialog as J } from "./parts/PaginationJumpDialog.js";
-import { PaginationNavButton as y } from "./parts/PaginationNavButton.js";
-import { RawPaginationLink as K } from "./parts/RawPaginationLink.js";
-import { generatePaginationWithWindow as O } from "./utils/pagination-window.js";
-const H = R({
-  slots: {
-    base: "uy:flex uy:gap-100 uy:relative",
-    pagesList: "uy:flex uy:gap-100 uy:list-none uy:m-0 uy:p-0"
-  }
-}), _ = 7, z = M(
-  ({
-    pageCount: t,
-    defaultPage: c,
-    currentPage: u,
-    onPageHover: b,
-    onPageChange: f,
-    onNextPress: w,
-    onPreviousPress: P,
-    LinkComponent: D = K,
-    ...A
-  }, L) => {
-    const p = S(), l = E(), v = u !== void 0 && f !== void 0 && c === void 0, { currentPage: s, goToPage: i } = $({
-      pageCount: t,
-      initialPage: v ? u : c,
-      onPageChange: f,
-      isControlled: v
-    }), m = W({}), r = T(/* @__PURE__ */ new Map()), h = q(
-      () => O(
-        t,
-        s,
-        _
-      ),
-      [t, s]
-    ), k = new Intl.NumberFormat(l.locale, {
-      notation: "standard"
-    }), N = (e) => {
-      i(e), m.close(), requestAnimationFrame(() => {
-        const a = r.current.get(e);
-        a && a.focus();
-      });
-    }, d = (e, a) => {
-      switch (e.key) {
-        case "ArrowLeft":
-        case "ArrowUp":
-          e.preventDefault(), a > 1 && (i(a - 1), requestAnimationFrame(() => {
-            r.current.get(a - 1)?.focus();
-          }));
-          break;
-        case "ArrowRight":
-        case "ArrowDown":
-          e.preventDefault(), a < t && (i(a + 1), requestAnimationFrame(() => {
-            r.current.get(a + 1)?.focus();
-          }));
-          break;
-        case "Home":
-          e.preventDefault(), i(1), requestAnimationFrame(() => {
-            r.current.get(1)?.focus();
-          });
-          break;
-        case "End":
-          e.preventDefault(), i(t), requestAnimationFrame(() => {
-            r.current.get(t)?.focus();
-          });
-          break;
-      }
-    }, g = {
-      paginationLabel: l.formatMessage({
-        id: "unity:component:pagination:label",
-        defaultMessage: "Pagination"
-      }),
-      pageListLabel: l.formatMessage(
-        {
-          id: "unity:component:pagination:page-list:label",
-          defaultMessage: "Page {current} of {total}"
-        },
-        {
-          current: s,
-          total: t
-        }
-      )
-    }, { base: F, pagesList: I } = H();
-    return /* @__PURE__ */ x(
-      "nav",
-      {
-        "data-dd-privacy": "allow",
-        ...A,
-        ref: L,
-        className: F(),
-        "aria-labelledby": g.paginationLabel,
-        children: [
-          /* @__PURE__ */ n(
-            J,
-            {
-              pageCount: t,
-              onJumpToPage: N,
-              state: m
-            }
-          ),
-          /* @__PURE__ */ n(
-            y,
-            {
-              variant: "previous",
-              isDisabled: s === 1,
-              onClick: () => {
-                i("previous"), P?.();
-              }
-            }
-          ),
-          /* @__PURE__ */ n("ul", { className: I(), "aria-label": g.pageListLabel, children: h.map(
-            (e, a) => e.type === "page" ? /* @__PURE__ */ n(
-              "li",
-              {
-                "aria-setsize": t,
-                "aria-posinset": e.value,
-                children: /* @__PURE__ */ n(
-                  D,
-                  {
-                    ref: (o) => {
-                      o ? r.current.set(e.value, o) : r.current.delete(e.value);
-                    },
-                    onPress: () => {
-                      i(e.value);
-                    },
-                    onHoverChange: (o) => {
-                      o && b?.(e.value);
-                    },
-                    onKeyDown: (o) => {
-                      d(o, e.value);
-                    },
-                    isActive: e.value === s,
-                    value: e.value,
-                    children: k.format(e.value)
-                  }
-                )
-              },
-              `pagination-${p}-item-${a}`
-            ) : /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n(
-              j,
-              {
-                value: e.value,
-                onKeyDown: (o) => {
-                  d(o, -1);
-                },
-                onPress: () => {
-                  m.open();
-                }
-              }
-            ) }, `pagination-${p}-item-${a}`)
-          ) }),
-          /* @__PURE__ */ n(
-            y,
-            {
-              variant: "next",
-              isDisabled: s === t,
-              onClick: () => {
-                i("next"), w?.();
-              }
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-z.displayName = "ClientSidePagination";
-export {
-  z as ClientSidePagination,
-  H as pagination
-};
+import { usePagination as e } from "./hooks/use-pagination.js";
+import { PaginationEllipsis as t } from "./parts/PaginationEllipsis.js";
+import { PaginationJumpDialog as n } from "./parts/PaginationJumpDialog.js";
+import { PaginationNavButton as r } from "./parts/PaginationNavButton.js";
+import { RawPaginationLink as i } from "./parts/RawPaginationLink.js";
+import { generatePaginationWithWindow as a } from "./utils/pagination-window.js";
+import { forwardRef as o, useMemo as s, useRef as c } from "react";
+import { uyTv as l } from "@payfit/unity-themes";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { useIntl as f } from "react-intl";
+import { useId as p } from "react-aria/useId";
+import { useOverlayTriggerState as m } from "react-stately/useOverlayTriggerState";
+//#region src/components/client-side-pagination/ClientSidePagination.tsx
+var h = l({ slots: {
+	base: "uy:flex uy:gap-100 uy:relative",
+	pagesList: "uy:flex uy:gap-100 uy:list-none uy:m-0 uy:p-0"
+} }), g = 7, _ = o(({ pageCount: o, defaultPage: l, currentPage: _, onPageHover: v, onPageChange: y, onNextPress: b, onPreviousPress: x, LinkComponent: S = i, ...C }, w) => {
+	let T = p(), E = f(), D = _ !== void 0 && y !== void 0 && l === void 0, { currentPage: O, goToPage: k } = e({
+		pageCount: o,
+		initialPage: D ? _ : l,
+		onPageChange: y,
+		isControlled: D
+	}), A = m({}), j = c(/* @__PURE__ */ new Map()), M = s(() => a(o, O, g), [o, O]), N = new Intl.NumberFormat(E.locale, { notation: "standard" }), P = (e) => {
+		k(e), A.close(), requestAnimationFrame(() => {
+			let t = j.current.get(e);
+			t && t.focus();
+		});
+	}, F = (e, t) => {
+		switch (e.key) {
+			case "ArrowLeft":
+			case "ArrowUp":
+				e.preventDefault(), t > 1 && (k(t - 1), requestAnimationFrame(() => {
+					j.current.get(t - 1)?.focus();
+				}));
+				break;
+			case "ArrowRight":
+			case "ArrowDown":
+				e.preventDefault(), t < o && (k(t + 1), requestAnimationFrame(() => {
+					j.current.get(t + 1)?.focus();
+				}));
+				break;
+			case "Home":
+				e.preventDefault(), k(1), requestAnimationFrame(() => {
+					j.current.get(1)?.focus();
+				});
+				break;
+			case "End":
+				e.preventDefault(), k(o), requestAnimationFrame(() => {
+					j.current.get(o)?.focus();
+				});
+				break;
+		}
+	}, I = {
+		paginationLabel: E.formatMessage({
+			id: "unity:component:pagination:label",
+			defaultMessage: "Pagination"
+		}),
+		pageListLabel: E.formatMessage({
+			id: "unity:component:pagination:page-list:label",
+			defaultMessage: "Page {current} of {total}"
+		}, {
+			current: O,
+			total: o
+		})
+	}, { base: L, pagesList: R } = h();
+	return /* @__PURE__ */ d("nav", {
+		"data-dd-privacy": "allow",
+		...C,
+		ref: w,
+		className: L(),
+		"aria-labelledby": I.paginationLabel,
+		children: [
+			/* @__PURE__ */ u(n, {
+				pageCount: o,
+				onJumpToPage: P,
+				state: A
+			}),
+			/* @__PURE__ */ u(r, {
+				variant: "previous",
+				isDisabled: O === 1,
+				onClick: () => {
+					k("previous"), x?.();
+				}
+			}),
+			/* @__PURE__ */ u("ul", {
+				className: R(),
+				"aria-label": I.pageListLabel,
+				children: M.map((e, n) => e.type === "page" ? /* @__PURE__ */ u("li", {
+					"aria-setsize": o,
+					"aria-posinset": e.value,
+					children: /* @__PURE__ */ u(S, {
+						ref: (t) => {
+							t ? j.current.set(e.value, t) : j.current.delete(e.value);
+						},
+						onPress: () => {
+							k(e.value);
+						},
+						onHoverChange: (t) => {
+							t && v?.(e.value);
+						},
+						onKeyDown: (t) => {
+							F(t, e.value);
+						},
+						isActive: e.value === O,
+						value: e.value,
+						children: N.format(e.value)
+					})
+				}, `pagination-${T}-item-${n}`) : /* @__PURE__ */ u("li", { children: /* @__PURE__ */ u(t, {
+					value: e.value,
+					onKeyDown: (e) => {
+						F(e, -1);
+					},
+					onPress: () => {
+						A.open();
+					}
+				}) }, `pagination-${T}-item-${n}`))
+			}),
+			/* @__PURE__ */ u(r, {
+				variant: "next",
+				isDisabled: O === o,
+				onClick: () => {
+					k("next"), b?.();
+				}
+			})
+		]
+	});
+});
+_.displayName = "ClientSidePagination";
+//#endregion
+export { _ as ClientSidePagination };

package/dist/esm/components/client-side-pagination/hooks/use-pagination.js

@@ -1,28 +1,21 @@
-import { useState as m, useCallback as a } from "react";
-function h({
-  isControlled: c = !1,
-  pageCount: o,
-  initialPage: r = 1,
-  onPageChange: n
-}) {
-  const [i, u] = m(r), t = c ? r : i, f = t - 1, l = t + 1, s = a(
-    (e) => {
-      n && n(e, t, Math.sign(e - t)), u(Math.max(1, Math.min(o, e)));
-    },
-    [t, o, n]
-  ), P = a(
-    (e) => {
-      s(e === "previous" ? t - 1 : e === "next" ? t + 1 : e);
-    },
-    [t, s]
-  );
-  return {
-    currentPage: t,
-    previousPage: f,
-    nextPage: l,
-    goToPage: P
-  };
+import { useCallback as e, useState as t } from "react";
+//#region src/components/client-side-pagination/hooks/use-pagination.ts
+function n({ isControlled: n = !1, pageCount: r, initialPage: i = 1, onPageChange: a }) {
+	let [o, s] = t(i), c = n ? i : o, l = c - 1, u = c + 1, d = e((e) => {
+		a && a(e, c, Math.sign(e - c)), s(Math.max(1, Math.min(r, e)));
+	}, [
+		c,
+		r,
+		a
+	]);
+	return {
+		currentPage: c,
+		previousPage: l,
+		nextPage: u,
+		goToPage: e((e) => {
+			d(e === "previous" ? c - 1 : e === "next" ? c + 1 : e);
+		}, [c, d])
+	};
 }
-export {
-  h as usePagination
-};
+//#endregion
+export { n as usePagination };

package/dist/esm/components/client-side-pagination/parts/PaginationEllipsis.js

@@ -1,30 +1,30 @@
-import { jsxs as l, jsx as i } from "react/jsx-runtime";
-import { forwardRef as r } from "react";
-import { uyTv as a } from "@payfit/unity-themes";
-import { Button as y } from "react-aria-components/Button";
-import { useIntl as p } from "react-intl";
-const c = a({
-  base: [
-    "uy:min-w-300 uy:h-300 uy:p-25 uy:flex uy:justify-center uy:items-center uy:typography-action uy:rounded-pill uy:cursor-default",
-    "uy:focus-visible:outline-2 uy:focus-visible:outline-solid uy:focus-visible:outline-utility-focus-ring uy:focus-visible:outline-offset-2"
-  ]
-}), f = r(({ value: s, ...e }, o) => {
-  const t = p(), [n, u] = s;
-  return /* @__PURE__ */ l(y, { ref: o, className: c(), ...e, children: [
-    /* @__PURE__ */ i("span", { "aria-hidden": !0, children: "…" }),
-    /* @__PURE__ */ i("span", { className: "uy:sr-only", children: t.formatMessage(
-      {
-        id: "unity:component:pagination:ellipsis:label",
-        defaultMessage: "More pages"
-      },
-      {
-        start: n,
-        end: u
-      }
-    ) })
-  ] });
+import { forwardRef as e } from "react";
+import { uyTv as t } from "@payfit/unity-themes";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { useIntl as i } from "react-intl";
+import { Button as a } from "react-aria-components/Button";
+//#region src/components/client-side-pagination/parts/PaginationEllipsis.tsx
+var o = t({ base: ["uy:min-w-300 uy:h-300 uy:p-25 uy:flex uy:justify-center uy:items-center uy:typography-action uy:rounded-pill uy:cursor-default", "uy:focus-visible:outline-2 uy:focus-visible:outline-solid uy:focus-visible:outline-utility-focus-ring uy:focus-visible:outline-offset-2"] }), s = e(({ value: e, ...t }, s) => {
+	let c = i(), [l, u] = e;
+	return /* @__PURE__ */ r(a, {
+		ref: s,
+		className: o(),
+		...t,
+		children: [/* @__PURE__ */ n("span", {
+			"aria-hidden": !0,
+			children: "…"
+		}), /* @__PURE__ */ n("span", {
+			className: "uy:sr-only",
+			children: c.formatMessage({
+				id: "unity:component:pagination:ellipsis:label",
+				defaultMessage: "More pages"
+			}, {
+				start: l,
+				end: u
+			})
+		})]
+	});
 });
-f.displayName = "PaginationEllipsis";
-export {
-  f as PaginationEllipsis
-};
+s.displayName = "PaginationEllipsis";
+//#endregion
+export { s as PaginationEllipsis };