@payfit/unity-components 1.2.0 → 2.1.4

package/dist/esm/components/pagination/Pagination.js

@@ -1,176 +1,102 @@
-import { jsxs as I, jsx as n } from "react/jsx-runtime";
-import { forwardRef as x, useRef as M, useMemo as T } from "react";
-import { uyTv as q } from "@payfit/unity-themes";
-import { useId as E } from "react-aria";
-import { useIntl as R } from "react-intl";
-import { useOverlayTriggerState as W } from "react-stately";
-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 { PaginationLink as K } from "./parts/PaginationLink.js";
-import { PaginationNavButton as y } from "./parts/PaginationNavButton.js";
-import { generatePaginationWithWindow as O } from "./utils/pagination-window.js";
-const S = q({
+import { jsx as r, jsxs as h } from "react/jsx-runtime";
+import { forwardRef as k, useRef as x, useCallback as f } from "react";
+import { uyTv as D } from "@payfit/unity-themes";
+import { useId as L } from "react-aria";
+import { useIntl as A } from "react-intl";
+import { useOverlayTriggerState as I } from "react-stately";
+import { PaginationJumpDialog as T } from "../client-side-pagination/parts/PaginationJumpDialog.js";
+import { PaginationContext as R } from "./PaginationContext.js";
+const g = D({
   slots: {
-    base: "uy:flex uy:gap-100 uy:relative",
-    pagesList: "uy:flex uy:gap-100 uy:list-none uy:m-0 uy:p-0"
+    base: "uy:flex uy:gap-100 uy:relative"
   }
-}), H = 7, _ = x(
-  ({
-    pageCount: t,
-    defaultPage: c,
-    currentPage: u,
-    onPageHover: b,
-    onPageChange: f,
-    onNextPress: P,
-    onPreviousPress: w,
-    ...D
-  }, A) => {
-    const p = E(), l = R(), 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 = M(/* @__PURE__ */ new Map()), L = T(
-      () => O(
-        t,
-        s,
-        H
-      ),
-      [t, s]
-    ), h = new Intl.NumberFormat(l.locale, {
-      notation: "standard"
-    }), k = (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({
+}), j = k(
+  ({ children: c, pageCount: o, currentPage: i, onPageChange: s, ...p }, d) => {
+    const y = L(), b = A(), n = I({}), e = x(/* @__PURE__ */ new Map()), w = {
+      paginationLabel: b.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
+      })
+    }, l = {
+      paginationListId: `uy:pagination-${y}__list`
+    }, u = f(
+      (t) => {
+        s(t, i, Math.sign(t - i)), n.close(), requestAnimationFrame(() => {
+          const a = e.current.get(t);
+          a && a.focus();
+        });
+      },
+      [s, n, e, i]
+    ), v = f(
+      (t) => {
+        t.preventDefault();
+        let a = i;
+        switch (t.key) {
+          case "ArrowLeft":
+          case "ArrowDown":
+            a = Math.max(1, i - 1);
+            break;
+          case "ArrowRight":
+          case "ArrowUp":
+            a = o === -1 ? i + 1 : Math.min(i + 1, o);
+            break;
+          case "Home":
+            a = 1;
+            break;
+          case "End":
+            o !== -1 && (a = o);
+            break;
         }
-      )
-    }, { base: N, pagesList: F } = S();
-    return /* @__PURE__ */ I(
-      "nav",
+        a !== i && (s(
+          a,
+          i,
+          Math.sign(a - i)
+        ), setTimeout(() => {
+          const m = e.current.get(a);
+          m && m.focus();
+        }, 0));
+      },
+      [o, i, s]
+    ), { base: M } = g();
+    return /* @__PURE__ */ r(
+      R.Provider,
       {
-        "data-dd-privacy": "allow",
-        ...D,
-        ref: A,
-        className: N(),
-        "aria-labelledby": g.paginationLabel,
-        children: [
-          /* @__PURE__ */ n(
-            J,
-            {
-              pageCount: t,
-              onJumpToPage: k,
-              state: m
-            }
-          ),
-          /* @__PURE__ */ n(
-            y,
-            {
-              variant: "previous",
-              isDisabled: s === 1,
-              onClick: () => {
-                i("previous"), w?.();
-              }
-            }
-          ),
-          /* @__PURE__ */ n("ul", { className: F(), "aria-label": g.pageListLabel, children: L.map(
-            (e, a) => e.type === "page" ? /* @__PURE__ */ n(
-              "li",
-              {
-                "aria-setsize": t,
-                "aria-posinset": e.value,
-                children: /* @__PURE__ */ n(
-                  K,
-                  {
-                    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: h.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();
+        value: {
+          pageCount: o,
+          currentPage: i,
+          onPageChange: s,
+          a11yIds: l,
+          pageRefs: e,
+          onKeyDown: v
+        },
+        children: /* @__PURE__ */ h(
+          "nav",
+          {
+            "data-dd-privacy": "allow",
+            ...p,
+            ref: d,
+            className: M(),
+            "aria-label": w.paginationLabel,
+            "aria-describedby": l.paginationListId,
+            children: [
+              /* @__PURE__ */ r(
+                T,
+                {
+                  pageCount: o,
+                  onJumpToPage: u,
+                  state: n
                 }
-              }
-            ) }, `pagination-${p}-item-${a}`)
-          ) }),
-          /* @__PURE__ */ n(
-            y,
-            {
-              variant: "next",
-              isDisabled: s === t,
-              onClick: () => {
-                i("next"), P?.();
-              }
-            }
-          )
-        ]
+              ),
+              c
+            ]
+          }
+        )
       }
     );
   }
 );
-_.displayName = "Pagination";
+j.displayName = "Pagination";
 export {
-  _ as Pagination,
-  S as pagination
+  j as Pagination,
+  g as pagination
 };

package/dist/esm/components/pagination/PaginationContext.d.ts

@@ -0,0 +1,11 @@
+import { MutableRefObject } from 'react';
+export interface PaginationContextValue {
+    pageCount: number;
+    currentPage: number;
+    onPageChange: (page: number, previous: number, direction: -1 | 1) => void;
+    onKeyDown: (event: React.KeyboardEvent) => void;
+    a11yIds: Record<string, string>;
+    pageRefs: MutableRefObject<Map<number, HTMLElement | null>>;
+}
+export declare const PaginationContext: import('react').Context<PaginationContextValue | null>;
+export declare const usePaginationContext: () => PaginationContextValue;

package/dist/esm/components/pagination/PaginationContext.js

@@ -0,0 +1,15 @@
+import { createContext as n, useContext as o } from "react";
+const e = n(
+  null
+), a = () => {
+  const t = o(e);
+  if (!t)
+    throw new Error(
+      "usePaginationContext must be used within a Pagination component"
+    );
+  return t;
+};
+export {
+  e as PaginationContext,
+  a as usePaginationContext
+};

package/dist/esm/components/pagination/hooks/use-pagination-state.d.ts

@@ -0,0 +1,63 @@
+export interface UsePaginationStateOptions {
+    /**
+     * The total number of pages.
+     * Use -1 to indicate an unknown page count (e.g., for server-paginated data where total pages are not known upfront).
+     */
+    pageCount: number;
+    /**
+     * The initial page to start at (1-based)
+     * @default 1
+     */
+    initialPage?: number;
+    /**
+     * Callback fired when the page changes
+     * @param page - The new page number
+     * @param previous - The previous page number
+     * @param direction - The direction of navigation (1 for forward, -1 for backward)
+     */
+    onPageChange?: (page: number, previous: number, direction: -1 | 1) => void;
+}
+/**
+ * Hook that manages pagination state for client-side pagination.
+ * This hook provides state management and navigation helpers for pagination components.
+ * @param options - Configuration options for pagination state
+ * @param options.pageCount - The total number of pages.
+ * @param options.initialPage - The initial page to start at (1-based)
+ * @param options.onPageChange - Callback fired when the page changes
+ * @returns Object containing current pagination state and navigation functions: currentPage (current active page), previousPage (page before current), nextPage (page after current), and goToPage (navigation function accepting page number or 'next'/'previous')
+ * @example
+ * ```tsx
+ * import { usePaginationState, Pagination, PaginationContent, PaginationItem, RawPaginationLink } from '@payfit/unity-components'
+ *
+ * function MyPagination() {
+ *   const { currentPage, goToPage } = usePaginationState({
+ *     pageCount: 10,
+ *     initialPage: 1,
+ *   })
+ *
+ *   return (
+ *     <Pagination
+ *       pageCount={10}
+ *       currentPage={currentPage}
+ *       onPageChange={goToPage}
+ *     >
+ *       <PaginationContent>
+ *         {Array.from({ length: 10 }, (_, i) => i + 1).map(page => (
+ *           <PaginationItem key={page}>
+ *             <RawPaginationLink value={page}>
+ *               {page}
+ *             </RawPaginationLink>
+ *           </PaginationItem>
+ *         ))}
+ *       </PaginationContent>
+ *     </Pagination>
+ *   )
+ * }
+ * ```
+ */
+export declare function usePaginationState({ pageCount, initialPage, onPageChange, }: UsePaginationStateOptions): {
+    currentPage: number;
+    previousPage: number;
+    nextPage: number;
+    goToPage: (page: "previous" | "next" | number) => void;
+};

package/dist/esm/components/pagination/hooks/use-pagination-state.js

@@ -0,0 +1,27 @@
+import { useState as l, useCallback as o } from "react";
+function m({
+  pageCount: i,
+  initialPage: r = 1,
+  onPageChange: n
+}) {
+  const [t, a] = l(r), c = t - 1, u = t + 1, s = o(
+    (e) => {
+      n && n(e, t, Math.sign(e - t)), a(Math.max(1, Math.min(i, e)));
+    },
+    [t, i, n]
+  ), f = o(
+    (e) => {
+      s(e === "previous" ? t - 1 : e === "next" ? t + 1 : e);
+    },
+    [t, s]
+  );
+  return {
+    currentPage: t,
+    previousPage: c,
+    nextPage: u,
+    goToPage: f
+  };
+}
+export {
+  m as usePaginationState
+};

package/dist/esm/components/pagination/hooks/use-pagination-window.d.ts

@@ -0,0 +1,64 @@
+export type PaginationWindowItem = {
+    type: 'page';
+    value: number;
+} | {
+    type: 'ellipsis';
+    value: [number, number];
+};
+export interface UsePaginationWindowOptions {
+    /**
+     * The total number of pages.
+     * Use -1 to indicate an unknown page count (e.g., for infinite scroll or server-paginated data).
+     * When -1, the hook will show pages from 1 to currentPage + offset, ending with an ellipsis indicating unknown pages beyond.
+     */
+    pageCount: number;
+    /**
+     * The current page (1-based)
+     */
+    currentPage: number;
+    /**
+     * The maximum number of pages to show in the window
+     * @default 7
+     */
+    windowSize?: number;
+}
+/**
+ * Hook that generates a pagination window with ellipsis for large page counts.
+ * This hook provides the logic for determining which pages to show in a pagination component.
+ * @param options - Configuration options for the pagination window
+ * @param options.pageCount - The total number of pages.
+ * @param options.currentPage - The current page (1-based).
+ * @param options.windowSize - The maximum number of pages to show in the window.
+ * @returns Array of pagination items (pages and ellipsis)
+ * @example
+ * ```tsx
+ * import { usePaginationWindow } from '@payfit/unity-components'
+ *
+ * function MyPagination() {
+ *   const pages = usePaginationWindow({
+ *     pageCount: 20,
+ *     currentPage: 5,
+ *     windowSize: 7
+ *   })
+ *
+ *   return (
+ *     <Pagination>
+ *       <PaginationContent>
+ *         {pages.map((page, index) => (
+ *           <PaginationItem key={index}>
+ *             {page.type === 'page' ? (
+ *               <RawPaginationLink href={`/page/${page.value}`}>
+ *                 {page.value}
+ *               </RawPaginationLink>
+ *             ) : (
+ *               <PaginationEllipsis />
+ *             )}
+ *           </PaginationItem>
+ *         ))}
+ *       </PaginationContent>
+ *     </Pagination>
+ *   )
+ * }
+ * ```
+ */
+export declare function usePaginationWindow({ pageCount, currentPage, windowSize, }: UsePaginationWindowOptions): PaginationWindowItem[];

package/dist/esm/components/pagination/hooks/use-pagination-window.js

@@ -0,0 +1,15 @@
+import { useMemo as t } from "react";
+import { generatePaginationWithWindow as r } from "../utils/pagination-window.js";
+function a({
+  pageCount: o,
+  currentPage: i,
+  windowSize: n = 7
+}) {
+  return t(
+    () => r(o, i, n),
+    [o, i, n]
+  );
+}
+export {
+  a as usePaginationWindow
+};

package/dist/esm/components/pagination/parts/PaginationContent.d.ts

@@ -0,0 +1,30 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+export declare const paginationContent: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "uy:flex uy:gap-100 uy:list-none uy:m-0 uy:p-0", {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "uy:flex uy:gap-100 uy:list-none uy:m-0 uy:p-0", unknown, unknown, undefined>>;
+export interface PaginationContentProps extends VariantProps<typeof paginationContent>, ComponentPropsWithoutRef<'ul'> {
+    children: ReactNode;
+}
+/**
+ * The PaginationContent component provides a list container for pagination items.
+ * This component renders as a ul element with proper list semantics.
+ * @param props.children - The children to render.
+ * @example
+ * ```tsx
+ * import { PaginationContent, PaginationItem, RawPaginationLink } from '@payfit/unity-components'
+ *
+ * function MyPaginationContent() {
+ *   return (
+ *     <PaginationContent>
+ *       <PaginationItem>
+ *         <RawPaginationLink href="/page/1">1</RawPaginationLink>
+ *       </PaginationItem>
+ *       <PaginationItem>
+ *         <RawPaginationLink href="/page/2">2</RawPaginationLink>
+ *       </PaginationItem>
+ *     </PaginationContent>
+ *   )
+ * }
+ * ```
+ */
+declare const PaginationContent: import('react').ForwardRefExoticComponent<PaginationContentProps & import('react').RefAttributes<HTMLUListElement>>;
+export { PaginationContent };

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

@@ -0,0 +1,37 @@
+import { jsx as l } from "react/jsx-runtime";
+import { forwardRef as m, useMemo as p } from "react";
+import { uyTv as g } from "@payfit/unity-themes";
+import { useIntl as c } from "react-intl";
+import { usePaginationContext as f } from "../PaginationContext.js";
+const y = g({
+  base: "uy:flex uy:gap-100 uy:list-none uy:m-0 uy:p-0"
+}), d = m(
+  ({ children: t, ...o }, a) => {
+    const n = c(), { pageCount: e, currentPage: i, a11yIds: r } = f(), s = n.formatMessage(
+      {
+        id: "unity:component:pagination:page-list:label",
+        defaultMessage: "Page {current} of {total}"
+      },
+      {
+        current: i,
+        total: e
+      }
+    ), u = p(() => y(), []);
+    return /* @__PURE__ */ l(
+      "ul",
+      {
+        ...o,
+        ref: a,
+        id: r.pagesList,
+        className: u,
+        "aria-label": s,
+        children: t
+      }
+    );
+  }
+);
+d.displayName = "PaginationContent";
+export {
+  d as PaginationContent,
+  y as paginationContent
+};

package/dist/esm/components/pagination/parts/PaginationEllipsis.d.ts

@@ -1,11 +1,30 @@
 import { VariantProps } from '@payfit/unity-themes';
 import { ButtonProps } from 'react-aria-components';
-import { paginationLink } from './PaginationLink.js';
-export interface PaginationEllipsisProps extends Omit<ButtonProps, 'value' | 'children' | 'className' | 'style' | 'slot'>, VariantProps<typeof paginationLink> {
-    value: [number, number];
+declare const paginationEllipsis: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export interface PaginationEllipsisProps extends VariantProps<typeof paginationEllipsis>, Omit<ButtonProps, 'value' | 'children' | 'className' | 'style' | 'slot'> {
+    /**
+     * The id of the ellipsis element
+     */
     id?: string;
+    /**
+     * Whether the ellipsis is disabled
+     */
     isDisabled?: boolean;
-    isActive?: boolean;
+    /**
+     * The range of pages represented by this ellipsis [start, end]
+     * When end is Infinity, it indicates an unknown page count
+     */
+    value: [number, number];
 }
+/**
+ * The PaginationEllipsis component renders an ellipsis indicator for pagination.
+ * This component is used to indicate that there are more pages between the visible range.
+ * @example
+ * ```tsx
+ * import { PaginationEllipsis } from '@payfit/unity-components'
+ *
+ * <PaginationEllipsis value={[5, 10]} />
+ * ```
+ */
 declare const PaginationEllipsis: import('react').ForwardRefExoticComponent<PaginationEllipsisProps & import('react').RefAttributes<HTMLButtonElement>>;
 export { PaginationEllipsis };

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

@@ -1,30 +1,34 @@
-import { jsxs as l, jsx as i } from "react/jsx-runtime";
+import { jsxs as a, 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";
-import { useIntl as p } from "react-intl";
-const c = a({
+import { uyTv as y } from "@payfit/unity-themes";
+import { Button as c } from "react-aria-components";
+import { useIntl as p, FormattedMessage as f } from "react-intl";
+const m = y({
   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: [
+}), d = r(({ value: n, ...s }, o) => {
+  const t = p(), [u, e] = n, l = e === 1 / 0 ? t.formatMessage({
+    id: "unity:component:common:unknown",
+    defaultMessage: "unknown"
+  }) : e;
+  return /* @__PURE__ */ a(c, { ref: o, className: m(), ...s, children: [
     /* @__PURE__ */ i("span", { "aria-hidden": !0, children: "…" }),
-    /* @__PURE__ */ i("span", { className: "uy:sr-only", children: t.formatMessage(
+    /* @__PURE__ */ i("span", { className: "uy:sr-only", children: /* @__PURE__ */ i(
+      f,
       {
         id: "unity:component:pagination:ellipsis:label",
-        defaultMessage: "More pages"
-      },
-      {
-        start: n,
-        end: u
+        defaultMessage: "More pages",
+        values: {
+          start: u,
+          end: l
+        }
       }
     ) })
   ] });
 });
-f.displayName = "PaginationEllipsis";
+d.displayName = "PaginationEllipsis";
 export {
-  f as PaginationEllipsis
+  d as PaginationEllipsis
 };

package/dist/esm/components/pagination/parts/PaginationItem.d.ts

@@ -0,0 +1,38 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+export interface PaginationItemProps extends ComponentPropsWithoutRef<'li'> {
+    children: ReactNode;
+    /**
+     * The position of this item in the set (for aria-posinset)
+     * If not provided, will be calculated from context
+     */
+    pageNumber?: number;
+    /**
+     * The total number of pages (for aria-setsize)
+     * If not provided, will be calculated from context
+     */
+    pageCount?: number;
+}
+/**
+ * The PaginationItem component provides a list item wrapper for individual pagination controls.
+ * This component renders as a li element and should contain pagination links or buttons.
+ * It automatically gets pageCount from context and calculates aria attributes.
+ * @param props.children - The children to render.
+ * @param props.pageNumber - The position of this item in the set (for aria-posinset).
+ * @param props.pageCount - The total number of pages (for aria-setsize).
+ * @example
+ * ```tsx
+ * import { PaginationItem, RawPaginationLink } from '@payfit/unity-components'
+ *
+ * function MyPaginationItem() {
+ *   return (
+ *     <PaginationItem pageNumber={1}>
+ *       <RawPaginationLink href="/page/1" isActive>
+ *         1
+ *       </RawPaginationLink>
+ *     </PaginationItem>
+ *   )
+ * }
+ * ```
+ */
+declare const PaginationItem: import('react').ForwardRefExoticComponent<PaginationItemProps & import('react').RefAttributes<HTMLLIElement>>;
+export { PaginationItem };