@techsio/ui-kit 0.3.2 → 0.4.0

package/dist/molecules/pagination.js

@@ -1,184 +1,220 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { connect, machine } from "@zag-js/pagination";
-import { normalizeProps, useMachine } from "@zag-js/react";
+import { mergeProps, normalizeProps, useMachine } from "@zag-js/react";
 import { useId } from "react";
 import { Icon } from "../atoms/icon.js";
 import { LinkButton } from "../atoms/link-button.js";
 import { tv } from "../utils.js";
 const paginationVariants = tv({
     slots: {
-        base: '',
+        base: "",
         list: [
-            'inline-flex items-center gap-pagination-list'
+            "inline-flex items-center gap-pagination-list"
         ],
         item: [
-            'grid cursor-pointer',
+            "grid cursor-pointer",
             'has-[[data-part="ellipsis"]]:bg-pagination-neutral-bg',
             'has-[[data-part="compact-text"]]:bg-pagination-neutral-bg'
         ],
         link: [
-            'focus:outline-none',
-            'focus-visible:ring',
-            'focus-visible:ring-pagination-ring',
-            'border-(length:--border-pagination-width) border-pagination-border rounded-pagination',
-            'aspect-square',
-            'data-[disabled]:text-pagination-fg-disabled data-[disabled]:hover:bg-pagination-bg-disabled',
-            'data-[disabled]:bg-pagination-bg-disabled',
-            'data-[disabled]:border-pagination-border-disabled data-[disabled]:cursor-not-allowed'
+            "focus-visible:outline-(style:--default-ring-style) focus-visible:outline-(length:--default-ring-width)",
+            "focus-visible:outline-pagination-ring",
+            "focus-visible:outline-offset-(length:--default-ring-offset)",
+            "border-(length:--border-pagination-width) rounded-pagination border-pagination-border",
+            "aspect-square",
+            "data-disabled:text-pagination-fg-disabled data-disabled:hover:bg-pagination-bg-disabled",
+            "data-disabled:bg-pagination-bg-disabled",
+            "data-disabled:cursor-not-allowed data-disabled:border-pagination-border-disabled"
         ],
-        ellipsis: '',
-        compactText: ''
+        ellipsis: "",
+        compactText: ""
     },
     compoundSlots: [
         {
             slots: [
-                'link',
-                'ellipsis'
+                "link",
+                "ellipsis"
             ],
             className: [
-                'inline-flex items-center justify-center',
-                'transition-colors duration-200',
-                'text-pagination-fg'
+                "inline-flex items-center justify-center",
+                "transition-colors duration-200 motion-reduce:transition-none",
+                "text-pagination-fg"
             ]
         }
     ],
     variants: {
         variant: {
             filled: {
-                item: 'bg-pagination-bg',
+                item: "bg-pagination-bg",
                 link: [
-                    'data-[current=true]:bg-pagination-bg-active data-[current=true]:text-pagination-filled-fg-active data-[current=true]:border-pagination-border-active',
-                    'hover:bg-pagination-bg-hover hover:border-pagination-border-hover',
-                    'hover:text-pagination-filled-fg-active'
+                    "data-selected:border-pagination-border-active data-selected:bg-pagination-bg-active data-selected:text-pagination-filled-fg-active",
+                    "hover:border-pagination-border-hover hover:bg-pagination-bg-hover",
+                    "hover:text-pagination-filled-fg-active"
                 ]
             },
             outlined: {
-                item: 'bg-pagination-bg',
+                item: "bg-pagination-bg",
                 link: [
-                    'data-[current=true]:text-pagination-outlined-fg-active data-[current=true]:border-pagination-border-active',
-                    'hover:border-pagination-border-hover hover:text-pagination-outlined-fg-active'
+                    "data-selected:border-pagination-border-active data-selected:text-pagination-outlined-fg-active",
+                    "hover:border-pagination-border-hover hover:text-pagination-outlined-fg-active"
                 ]
             },
             minimal: {
                 link: [
-                    'border-transparent',
-                    'data-[current=true]:text-pagination-minimal-fg-active',
-                    'hover:text-pagination-minimal-fg-active'
+                    "border-transparent",
+                    "data-selected:text-pagination-minimal-fg-active",
+                    "hover:text-pagination-minimal-fg-active"
                 ]
             }
         },
         size: {
             sm: {
-                link: ' text-pagination-sm h-pagination-sm',
-                compactText: 'text-pagination-sm'
+                link: "h-pagination-sm text-pagination-sm",
+                compactText: "text-pagination-sm"
             },
             md: {
-                link: ' text-pagination-md h-pagination-md',
-                compactText: 'text-pagination-md'
+                link: "h-pagination-md text-pagination-md",
+                compactText: "text-pagination-md"
             },
             lg: {
-                link: ' text-pagination-lg h-pagination-lg',
-                compactText: 'text-pagination-lg'
+                link: "h-pagination-lg text-pagination-lg",
+                compactText: "text-pagination-lg"
             }
         }
     },
     defaultVariants: {
-        variant: 'filled',
-        size: 'md'
+        variant: "filled",
+        size: "md"
     }
 });
-function Pagination({ page, defaultPage = 1, count, pageSize = 10, siblingCount = 1, showPrevNext = true, onPageChange, variant, className, dir = 'ltr', linkAs, size, compact = false, ...props }) {
+function toURLSearchParams(searchParams) {
+    if (!searchParams) return new URLSearchParams();
+    if ("string" == typeof searchParams) return new URLSearchParams(searchParams);
+    return new URLSearchParams(searchParams.toString());
+}
+function createPaginationGetPageUrl({ pathname, searchParams, pageParam = "page", defaultPage = 1, searchParamOverrides }) {
+    const baseSearchParams = toURLSearchParams(searchParams);
+    return ({ page })=>{
+        const nextSearchParams = new URLSearchParams(baseSearchParams);
+        if (searchParamOverrides) for (const [key, value] of Object.entries(searchParamOverrides))if (null == value) nextSearchParams.delete(key);
+        else nextSearchParams.set(key, String(value));
+        if (page === defaultPage) nextSearchParams.delete(pageParam);
+        else nextSearchParams.set(pageParam, page.toString());
+        const query = nextSearchParams.toString();
+        return query ? `${pathname}?${query}` : pathname;
+    };
+}
+function hasHref(triggerProps) {
+    return null != triggerProps.href;
+}
+function Pagination({ page, defaultPage = 1, count, pageSize = 10, siblingCount = 1, boundaryCount = 1, showPrevNext = true, variant, className, dir = "ltr", getPageUrl, linkAs, linkProps, size, compact = false, compactLabel, onChange, onPageChange, translations, ...props }) {
     const uniqueId = useId();
     const service = useMachine(machine, {
         id: uniqueId,
         count,
         pageSize,
         siblingCount,
+        boundaryCount,
         page,
         dir,
         defaultPage,
-        onPageChange: ({ page })=>{
-            onPageChange?.(page);
-        }
+        type: "link",
+        getPageUrl,
+        onPageChange: (details)=>{
+            onChange?.(details.page);
+            onPageChange?.(details.page);
+        },
+        translations
     });
     const api = connect(service, normalizeProps);
     const { base, list, link, item, ellipsis, compactText } = paginationVariants({
         variant,
         size
     });
+    const rootProps = mergeProps(props, api.getRootProps());
+    const sharedLinkProps = linkProps && "object" == typeof linkProps ? (({ href: _ignoredHref, ...rest })=>rest)(linkProps) : void 0;
+    const getTriggerButtonProps = (triggerProps, overrides = {})=>{
+        const isNavigable = hasHref(triggerProps);
+        const baseTriggerProps = mergeProps(triggerProps, {
+            className: link(),
+            size: "current",
+            theme: "borderless",
+            ...overrides
+        });
+        return mergeProps(isNavigable ? sharedLinkProps : void 0, baseTriggerProps, {
+            ...isNavigable && linkAs ? {
+                as: linkAs
+            } : {},
+            ...isNavigable ? {} : {
+                disabled: true
+            }
+        });
+    };
+    const prevTriggerProps = api.getPrevTriggerProps();
+    const nextTriggerProps = api.getNextTriggerProps();
     return /*#__PURE__*/ jsx("nav", {
         className: base({
             className
         }),
-        ...api.getRootProps(),
-        ...props,
+        ...rootProps,
         children: /*#__PURE__*/ jsxs("ul", {
             className: list(),
-            "aria-label": "Pagination",
             children: [
                 showPrevNext && /*#__PURE__*/ jsx("li", {
                     className: item(),
                     children: /*#__PURE__*/ jsx(LinkButton, {
-                        theme: "borderless",
-                        className: link(),
-                        icon: "token-icon-pagination-prev",
-                        disabled: 1 === api.page,
-                        as: linkAs,
-                        ...api.getPrevTriggerProps()
+                        ...getTriggerButtonProps(prevTriggerProps, {
+                            icon: "token-icon-pagination-prev"
+                        })
                     })
                 }),
                 compact ? /*#__PURE__*/ jsx("li", {
                     className: item(),
-                    children: /*#__PURE__*/ jsxs("span", {
+                    children: /*#__PURE__*/ jsx("span", {
                         className: compactText(),
                         "data-part": "compact-text",
-                        children: [
-                            api.page,
-                            " of ",
-                            api.totalPages
-                        ]
+                        children: compactLabel?.({
+                            page: api.page,
+                            totalPages: api.totalPages
+                        }) ?? `${api.page} of ${api.totalPages}`
                     })
-                }) : api.pages.map((page, i)=>{
-                    if ('page' === page.type) return /*#__PURE__*/ jsx("li", {
+                }) : api.pages.map((paginationPage, index)=>{
+                    if ("page" === paginationPage.type) return /*#__PURE__*/ jsx("li", {
                         className: item(),
                         children: /*#__PURE__*/ jsx(LinkButton, {
-                            theme: "borderless",
-                            className: link(),
-                            "aria-current": api.page === page.value ? 'page' : void 0,
-                            "data-current": api.page === page.value,
-                            as: linkAs,
-                            ...api.getItemProps(page),
-                            children: page.value
+                            ...getTriggerButtonProps(api.getItemProps(paginationPage)),
+                            children: paginationPage.value
                         })
-                    }, page.value);
+                    }, paginationPage.value);
+                    const previousPage = api.pages[index - 1];
+                    const nextPage = api.pages[index + 1];
+                    const previousPageValue = previousPage?.type === "page" ? previousPage.value : "start";
+                    const nextPageValue = nextPage?.type === "page" ? nextPage.value : "end";
                     return /*#__PURE__*/ jsx("li", {
                         className: item(),
                         children: /*#__PURE__*/ jsx("span", {
-                            className: ellipsis(),
                             "aria-hidden": "true",
+                            className: ellipsis(),
                             ...api.getEllipsisProps({
-                                index: i
+                                index
                             }),
                             children: /*#__PURE__*/ jsx(Icon, {
                                 icon: "token-icon-pagination-ellipsis",
                                 size: "current"
                             })
                         })
-                    }, `ellipsis-${i}`);
+                    }, `ellipsis-${previousPageValue}-${nextPageValue}`);
                 }),
                 showPrevNext && /*#__PURE__*/ jsx("li", {
                     className: item(),
                     children: /*#__PURE__*/ jsx(LinkButton, {
-                        theme: "borderless",
-                        className: link(),
-                        icon: "token-icon-pagination-next",
-                        disabled: api.page === api.totalPages,
-                        as: linkAs,
-                        ...api.getNextTriggerProps()
+                        ...getTriggerButtonProps(nextTriggerProps, {
+                            icon: "token-icon-pagination-next"
+                        })
                     })
                 })
             ]
         })
     });
 }
-export { Pagination };
+export { Pagination, createPaginationGetPageUrl, paginationVariants };