@yamada-ui/pagination 1.1.4-next-20241117114930 → 1.1.4-next-20241118203459
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/{chunk-YBE6Q5KS.mjs → chunk-5QYB2MRA.mjs} +18 -6
- package/dist/chunk-5QYB2MRA.mjs.map +1 -0
- package/dist/{chunk-O6EIBNLC.mjs → chunk-E66Q4CU7.mjs} +4 -2
- package/dist/chunk-E66Q4CU7.mjs.map +1 -0
- package/dist/{chunk-A6XFO7OK.mjs → chunk-IH2XPMDF.mjs} +14 -12
- package/dist/chunk-IH2XPMDF.mjs.map +1 -0
- package/dist/index.js +30 -14
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +3 -3
- package/dist/pagination-item.d.mts +16 -0
- package/dist/pagination-item.d.ts +16 -0
- package/dist/pagination-item.js +16 -4
- package/dist/pagination-item.js.map +1 -1
- package/dist/pagination-item.mjs +2 -2
- package/dist/pagination.js +30 -14
- package/dist/pagination.js.map +1 -1
- package/dist/pagination.mjs +3 -3
- package/dist/use-pagination.d.mts +10 -2
- package/dist/use-pagination.d.ts +10 -2
- package/dist/use-pagination.js +3 -1
- package/dist/use-pagination.js.map +1 -1
- package/dist/use-pagination.mjs +1 -1
- package/package.json +3 -3
- package/dist/chunk-A6XFO7OK.mjs.map +0 -1
- package/dist/chunk-O6EIBNLC.mjs.map +0 -1
- package/dist/chunk-YBE6Q5KS.mjs.map +0 -1
@@ -8,7 +8,7 @@ import {
|
|
8
8
|
} from "./chunk-VZWGYG76.mjs";
|
9
9
|
import {
|
10
10
|
usePaginationContext
|
11
|
-
} from "./chunk-
|
11
|
+
} from "./chunk-E66Q4CU7.mjs";
|
12
12
|
|
13
13
|
// src/pagination-item.tsx
|
14
14
|
import { forwardRef, ui } from "@yamada-ui/core";
|
@@ -23,7 +23,17 @@ var iconMap = {
|
|
23
23
|
prev: /* @__PURE__ */ jsx(PaginationPrevIcon, {})
|
24
24
|
};
|
25
25
|
var PaginationItem = forwardRef(
|
26
|
-
({
|
26
|
+
({
|
27
|
+
className,
|
28
|
+
active,
|
29
|
+
children,
|
30
|
+
disabled,
|
31
|
+
disableRipple,
|
32
|
+
isActive,
|
33
|
+
isDisabled,
|
34
|
+
page,
|
35
|
+
...rest
|
36
|
+
}, ref) => {
|
27
37
|
var _a;
|
28
38
|
const styles = usePaginationContext();
|
29
39
|
const isEllipsis = page === "ellipsis";
|
@@ -32,6 +42,8 @@ var PaginationItem = forwardRef(
|
|
32
42
|
isDisabled: disableRipple || isDisabled || isEllipsis
|
33
43
|
});
|
34
44
|
children != null ? children : children = (_a = iconMap[page]) != null ? _a : page;
|
45
|
+
active != null ? active : active = isActive;
|
46
|
+
disabled != null ? disabled : disabled = isDisabled;
|
35
47
|
const css = {
|
36
48
|
alignItems: "center",
|
37
49
|
display: "flex",
|
@@ -49,9 +61,9 @@ var PaginationItem = forwardRef(
|
|
49
61
|
ref,
|
50
62
|
...!isEllipsis ? {
|
51
63
|
type: "button",
|
52
|
-
"data-disabled": dataAttr(
|
53
|
-
"data-selected": dataAttr(
|
54
|
-
disabled
|
64
|
+
"data-disabled": dataAttr(disabled),
|
65
|
+
"data-selected": dataAttr(active),
|
66
|
+
disabled
|
55
67
|
} : {},
|
56
68
|
className: cx(
|
57
69
|
"ui-pagination__item",
|
@@ -76,4 +88,4 @@ PaginationItem.__ui__ = "PaginationItem";
|
|
76
88
|
export {
|
77
89
|
PaginationItem
|
78
90
|
};
|
79
|
-
//# sourceMappingURL=chunk-
|
91
|
+
//# sourceMappingURL=chunk-5QYB2MRA.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/pagination-item.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport type { ReactNode } from \"react\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { Ripple, useRipple } from \"@yamada-ui/ripple\"\nimport { cx, dataAttr } from \"@yamada-ui/utils\"\nimport {\n PaginationEllipsisIcon,\n PaginationFirstIcon,\n PaginationLastIcon,\n PaginationNextIcon,\n PaginationPrevIcon,\n} from \"./pagination-icon\"\nimport { usePaginationContext } from \"./use-pagination\"\n\ninterface PaginationItemOptions {\n /**\n * The type of the page or item assigned to the pagination item.\n */\n page: \"ellipsis\" | \"first\" | \"last\" | \"next\" | \"prev\" | number\n /**\n * If `true`, the pagination item will be activated.\n *\n * @default false\n */\n active?: boolean\n /**\n * If `true`, the pagination item will be disabled.\n *\n * @default false\n */\n disabled?: boolean\n /**\n * If `true`, disable ripple effects when pressing a element.\n *\n * @default false\n */\n disableRipple?: boolean\n /**\n * If `true`, the pagination item will be activated.\n *\n * @default false\n *\n * @deprecated Use `active` instead.\n */\n isActive?: boolean\n /**\n * If `true`, the pagination item will be disabled.\n *\n * @default false\n *\n * @deprecated Use `disabled` instead.\n */\n isDisabled?: boolean\n}\n\nexport interface PaginationItemProps\n extends Omit<HTMLUIProps<\"button\">, \"page\">,\n PaginationItemOptions {}\n\nconst iconMap: {\n [key in \"ellipsis\" | \"first\" | \"last\" | \"next\" | \"prev\" | number]: ReactNode\n} = {\n ellipsis: <PaginationEllipsisIcon />,\n first: <PaginationFirstIcon />,\n last: <PaginationLastIcon />,\n next: <PaginationNextIcon />,\n prev: <PaginationPrevIcon />,\n}\n\nexport const PaginationItem = forwardRef<PaginationItemProps, \"button\">(\n (\n {\n className,\n active,\n children,\n disabled,\n disableRipple,\n isActive,\n isDisabled,\n page,\n ...rest\n },\n ref,\n ) => {\n const styles = usePaginationContext()\n const isEllipsis = page === \"ellipsis\"\n const { onPointerDown, ...rippleProps } = useRipple({\n ...rest,\n isDisabled: disableRipple || isDisabled || isEllipsis,\n })\n\n children ??= iconMap[page] ?? page\n active ??= isActive\n disabled ??= isDisabled\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"flex\",\n justifyContent: \"center\",\n overflow: \"hidden\",\n position: \"relative\",\n userSelect: \"none\",\n ...styles.item,\n ...styles[page],\n }\n\n const Component = ui[isEllipsis ? \"span\" : \"button\"]\n\n return (\n <Component\n ref={ref}\n {...(!isEllipsis\n ? {\n type: \"button\",\n \"data-disabled\": dataAttr(disabled),\n \"data-selected\": dataAttr(active),\n disabled,\n }\n : {})}\n className={cx(\n \"ui-pagination__item\",\n isEllipsis ? \"ui-pagination__item--ellipsis\" : undefined,\n className,\n )}\n tabIndex={!isEllipsis ? 0 : -1}\n __css={css}\n {...rest}\n onPointerDown={onPointerDown}\n >\n {children}\n\n <Ripple {...rippleProps} />\n </Component>\n )\n },\n)\n\nPaginationItem.displayName = \"PaginationItem\"\nPaginationItem.__ui__ = \"PaginationItem\"\n"],"mappings":";;;;;;;;;;;;;AAEA,SAAS,YAAY,UAAU;AAC/B,SAAS,QAAQ,iBAAiB;AAClC,SAAS,IAAI,gBAAgB;AA0DjB,cA+CN,YA/CM;AAHZ,IAAM,UAEF;AAAA,EACF,UAAU,oBAAC,0BAAuB;AAAA,EAClC,OAAO,oBAAC,uBAAoB;AAAA,EAC5B,MAAM,oBAAC,sBAAmB;AAAA,EAC1B,MAAM,oBAAC,sBAAmB;AAAA,EAC1B,MAAM,oBAAC,sBAAmB;AAC5B;AAEO,IAAM,iBAAiB;AAAA,EAC5B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AAnFP;AAoFI,UAAM,SAAS,qBAAqB;AACpC,UAAM,aAAa,SAAS;AAC5B,UAAM,EAAE,eAAe,GAAG,YAAY,IAAI,UAAU;AAAA,MAClD,GAAG;AAAA,MACH,YAAY,iBAAiB,cAAc;AAAA,IAC7C,CAAC;AAED,8CAAa,aAAQ,IAAI,MAAZ,YAAiB;AAC9B,uCAAW;AACX,6CAAa;AAEb,UAAM,MAAmB;AAAA,MACvB,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,UAAU;AAAA,MACV,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,GAAG,OAAO;AAAA,MACV,GAAG,OAAO,IAAI;AAAA,IAChB;AAEA,UAAM,YAAY,GAAG,aAAa,SAAS,QAAQ;AAEnD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACC,GAAI,CAAC,aACF;AAAA,UACE,MAAM;AAAA,UACN,iBAAiB,SAAS,QAAQ;AAAA,UAClC,iBAAiB,SAAS,MAAM;AAAA,UAChC;AAAA,QACF,IACA,CAAC;AAAA,QACL,WAAW;AAAA,UACT;AAAA,UACA,aAAa,kCAAkC;AAAA,UAC/C;AAAA,QACF;AAAA,QACA,UAAU,CAAC,aAAa,IAAI;AAAA,QAC5B,OAAO;AAAA,QACN,GAAG;AAAA,QACJ;AAAA,QAEC;AAAA;AAAA,UAED,oBAAC,UAAQ,GAAG,aAAa;AAAA;AAAA;AAAA,IAC3B;AAAA,EAEJ;AACF;AAEA,eAAe,cAAc;AAC7B,eAAe,SAAS;","names":[]}
|
@@ -13,6 +13,7 @@ var computedRange = (start, end) => Array.from({ length: end - start + 1 }, (_,
|
|
13
13
|
var usePagination = ({
|
14
14
|
boundaries: _boundaries = 1,
|
15
15
|
defaultPage = 1,
|
16
|
+
disabled,
|
16
17
|
isDisabled = false,
|
17
18
|
page,
|
18
19
|
siblings: _siblings = 1,
|
@@ -21,6 +22,7 @@ var usePagination = ({
|
|
21
22
|
}) => {
|
22
23
|
const siblings = useValue(_siblings);
|
23
24
|
const boundaries = useValue(_boundaries);
|
25
|
+
disabled != null ? disabled : disabled = isDisabled;
|
24
26
|
const [currentPage, setCurrentPage] = useControllableState({
|
25
27
|
defaultValue: defaultPage,
|
26
28
|
value: page,
|
@@ -76,7 +78,7 @@ var usePagination = ({
|
|
76
78
|
}, [boundaries, siblings, currentPage, total]);
|
77
79
|
return {
|
78
80
|
currentPage,
|
79
|
-
|
81
|
+
disabled,
|
80
82
|
range,
|
81
83
|
total,
|
82
84
|
onChange,
|
@@ -93,4 +95,4 @@ export {
|
|
93
95
|
computedRange,
|
94
96
|
usePagination
|
95
97
|
};
|
96
|
-
//# sourceMappingURL=chunk-
|
98
|
+
//# sourceMappingURL=chunk-E66Q4CU7.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/use-pagination.ts"],"sourcesContent":["import type { CSSUIObject, Token } from \"@yamada-ui/core\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { createContext } from \"@yamada-ui/utils\"\nimport { useCallback, useMemo } from \"react\"\n\ninterface PaginationContext {\n [key: string]: CSSUIObject | undefined\n}\n\nexport const [PaginationProvider, usePaginationContext] =\n createContext<PaginationContext>({\n name: \"PaginationContext\",\n errorMessage: `usePaginationContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Pagination />\"`,\n })\n\nexport const computedRange = (start: number, end: number) =>\n Array.from({ length: end - start + 1 }, (_, index) => index + start)\n\nexport interface UsePaginationProps {\n /**\n * The total number of pages in pagination.\n */\n total: number\n /**\n * Number of elements visible on the left/right edges.\n *\n * @default 1\n */\n boundaries?: Token<number>\n /**\n * The initial page of the pagination.\n * Should be less than `total` and greater than `1`.\n *\n * @default 1\n */\n defaultPage?: number\n /**\n * If `true`, the pagination all item will be disabled.\n *\n * @default false\n */\n disabled?: boolean\n /**\n * If `true`, the pagination all item will be disabled.\n *\n * @default false\n *\n * @deprecated Use `disabled` instead.\n */\n isDisabled?: boolean\n /**\n * The page of the pagination.\n * Should be less than `total` and greater than `1`.\n */\n page?: number\n /** Number of siblings displayed on the left/right side of selected page.\n *\n * @default 1\n */\n siblings?: Token<number>\n /**\n * The callback invoked when the page changes.\n */\n onChange?: (page: number) => void\n}\n\nexport const usePagination = ({\n boundaries: _boundaries = 1,\n defaultPage = 1,\n disabled,\n isDisabled = false,\n page,\n siblings: _siblings = 1,\n total,\n onChange: onChangeProp,\n}: UsePaginationProps) => {\n const siblings = useValue(_siblings)\n const boundaries = useValue(_boundaries)\n\n disabled ??= isDisabled\n\n const [currentPage, setCurrentPage] = useControllableState({\n defaultValue: defaultPage,\n value: page,\n onChange: onChangeProp,\n })\n\n const onFirst = useCallback(() => setCurrentPage(1), [setCurrentPage])\n\n const onLast = useCallback(\n () => setCurrentPage(total),\n [setCurrentPage, total],\n )\n\n const onPrev = useCallback(\n () => setCurrentPage((prev) => (prev === 1 ? prev : prev - 1)),\n [setCurrentPage],\n )\n\n const onNext = useCallback(\n () => setCurrentPage((prev) => (prev === total ? prev : prev + 1)),\n [setCurrentPage, total],\n )\n\n const onChange = useCallback(\n (page: number) => setCurrentPage(page),\n [setCurrentPage],\n )\n\n const range = useMemo((): (\"ellipsis\" | number)[] => {\n const minimumTotal = siblings * 2 + 3 + boundaries * 2\n\n if (minimumTotal >= total) return computedRange(1, total)\n\n const prevSiblings = Math.max(currentPage - siblings, boundaries)\n const nextSiblings = Math.min(currentPage + siblings, total - boundaries)\n\n const prevDots = prevSiblings > boundaries + 2\n const nextDots = nextSiblings < total - (boundaries + 1)\n\n if (!prevDots && nextDots) {\n const prevPages = siblings * 2 + boundaries + 2\n\n return [\n ...computedRange(1, prevPages),\n \"ellipsis\",\n ...computedRange(total - (boundaries - 1), total),\n ]\n }\n\n if (prevDots && !nextDots) {\n const nextPages = boundaries + 1 + 2 * siblings\n\n return [\n ...computedRange(1, boundaries),\n \"ellipsis\",\n ...computedRange(total - nextPages, total),\n ]\n }\n\n return [\n ...computedRange(1, boundaries),\n \"ellipsis\",\n ...computedRange(prevSiblings, nextSiblings),\n \"ellipsis\",\n ...computedRange(total - boundaries + 1, total),\n ]\n }, [boundaries, siblings, currentPage, total])\n\n return {\n currentPage,\n disabled,\n range,\n total,\n onChange,\n onFirst,\n onLast,\n onNext,\n onPrev,\n }\n}\n\nexport type UsePaginationReturn = ReturnType<typeof usePagination>\n"],"mappings":";;;AACA,SAAS,4BAA4B;AACrC,SAAS,gBAAgB;AACzB,SAAS,qBAAqB;AAC9B,SAAS,aAAa,eAAe;AAM9B,IAAM,CAAC,oBAAoB,oBAAoB,IACpD,cAAiC;AAAA,EAC/B,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;AAEI,IAAM,gBAAgB,CAAC,OAAe,QAC3C,MAAM,KAAK,EAAE,QAAQ,MAAM,QAAQ,EAAE,GAAG,CAAC,GAAG,UAAU,QAAQ,KAAK;AAkD9D,IAAM,gBAAgB,CAAC;AAAA,EAC5B,YAAY,cAAc;AAAA,EAC1B,cAAc;AAAA,EACd;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA,UAAU,YAAY;AAAA,EACtB;AAAA,EACA,UAAU;AACZ,MAA0B;AACxB,QAAM,WAAW,SAAS,SAAS;AACnC,QAAM,aAAa,SAAS,WAAW;AAEvC,2CAAa;AAEb,QAAM,CAAC,aAAa,cAAc,IAAI,qBAAqB;AAAA,IACzD,cAAc;AAAA,IACd,OAAO;AAAA,IACP,UAAU;AAAA,EACZ,CAAC;AAED,QAAM,UAAU,YAAY,MAAM,eAAe,CAAC,GAAG,CAAC,cAAc,CAAC;AAErE,QAAM,SAAS;AAAA,IACb,MAAM,eAAe,KAAK;AAAA,IAC1B,CAAC,gBAAgB,KAAK;AAAA,EACxB;AAEA,QAAM,SAAS;AAAA,IACb,MAAM,eAAe,CAAC,SAAU,SAAS,IAAI,OAAO,OAAO,CAAE;AAAA,IAC7D,CAAC,cAAc;AAAA,EACjB;AAEA,QAAM,SAAS;AAAA,IACb,MAAM,eAAe,CAAC,SAAU,SAAS,QAAQ,OAAO,OAAO,CAAE;AAAA,IACjE,CAAC,gBAAgB,KAAK;AAAA,EACxB;AAEA,QAAM,WAAW;AAAA,IACf,CAACA,UAAiB,eAAeA,KAAI;AAAA,IACrC,CAAC,cAAc;AAAA,EACjB;AAEA,QAAM,QAAQ,QAAQ,MAA+B;AACnD,UAAM,eAAe,WAAW,IAAI,IAAI,aAAa;AAErD,QAAI,gBAAgB,MAAO,QAAO,cAAc,GAAG,KAAK;AAExD,UAAM,eAAe,KAAK,IAAI,cAAc,UAAU,UAAU;AAChE,UAAM,eAAe,KAAK,IAAI,cAAc,UAAU,QAAQ,UAAU;AAExE,UAAM,WAAW,eAAe,aAAa;AAC7C,UAAM,WAAW,eAAe,SAAS,aAAa;AAEtD,QAAI,CAAC,YAAY,UAAU;AACzB,YAAM,YAAY,WAAW,IAAI,aAAa;AAE9C,aAAO;AAAA,QACL,GAAG,cAAc,GAAG,SAAS;AAAA,QAC7B;AAAA,QACA,GAAG,cAAc,SAAS,aAAa,IAAI,KAAK;AAAA,MAClD;AAAA,IACF;AAEA,QAAI,YAAY,CAAC,UAAU;AACzB,YAAM,YAAY,aAAa,IAAI,IAAI;AAEvC,aAAO;AAAA,QACL,GAAG,cAAc,GAAG,UAAU;AAAA,QAC9B;AAAA,QACA,GAAG,cAAc,QAAQ,WAAW,KAAK;AAAA,MAC3C;AAAA,IACF;AAEA,WAAO;AAAA,MACL,GAAG,cAAc,GAAG,UAAU;AAAA,MAC9B;AAAA,MACA,GAAG,cAAc,cAAc,YAAY;AAAA,MAC3C;AAAA,MACA,GAAG,cAAc,QAAQ,aAAa,GAAG,KAAK;AAAA,IAChD;AAAA,EACF,GAAG,CAAC,YAAY,UAAU,aAAa,KAAK,CAAC;AAE7C,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":["page"]}
|
@@ -1,11 +1,11 @@
|
|
1
1
|
"use client"
|
2
2
|
import {
|
3
3
|
PaginationItem
|
4
|
-
} from "./chunk-
|
4
|
+
} from "./chunk-5QYB2MRA.mjs";
|
5
5
|
import {
|
6
6
|
PaginationProvider,
|
7
7
|
usePagination
|
8
|
-
} from "./chunk-
|
8
|
+
} from "./chunk-E66Q4CU7.mjs";
|
9
9
|
|
10
10
|
// src/pagination.tsx
|
11
11
|
import {
|
@@ -20,11 +20,12 @@ import { useMemo } from "react";
|
|
20
20
|
import { jsx, jsxs } from "react/jsx-runtime";
|
21
21
|
var Pagination = forwardRef((props, ref) => {
|
22
22
|
const [styles, mergedProps] = useComponentMultiStyle("Pagination", props);
|
23
|
-
|
23
|
+
let {
|
24
24
|
className,
|
25
25
|
boundaries,
|
26
26
|
component: Component = PaginationItem,
|
27
27
|
defaultPage,
|
28
|
+
disabled,
|
28
29
|
isDisabled,
|
29
30
|
page,
|
30
31
|
siblings,
|
@@ -44,10 +45,11 @@ var Pagination = forwardRef((props, ref) => {
|
|
44
45
|
} = omitThemeProps(mergedProps);
|
45
46
|
const withControls = useValue(_withControls);
|
46
47
|
const withEdges = useValue(_withEdges);
|
48
|
+
disabled != null ? disabled : disabled = isDisabled;
|
47
49
|
const { currentPage, range, onChange, onFirst, onLast, onNext, onPrev } = usePagination({
|
48
50
|
boundaries,
|
49
51
|
defaultPage,
|
50
|
-
|
52
|
+
disabled,
|
51
53
|
page,
|
52
54
|
siblings,
|
53
55
|
total,
|
@@ -58,8 +60,8 @@ var Pagination = forwardRef((props, ref) => {
|
|
58
60
|
Component,
|
59
61
|
{
|
60
62
|
"aria-label": page2 !== "ellipsis" ? `Go to page ${page2}` : void 0,
|
61
|
-
|
62
|
-
|
63
|
+
active: currentPage === page2,
|
64
|
+
disabled,
|
63
65
|
...itemProps,
|
64
66
|
page: page2,
|
65
67
|
onClick: handlerAll(
|
@@ -68,7 +70,7 @@ var Pagination = forwardRef((props, ref) => {
|
|
68
70
|
)
|
69
71
|
}
|
70
72
|
) }, key)),
|
71
|
-
[Component, currentPage,
|
73
|
+
[Component, currentPage, disabled, onChange, range, itemProps]
|
72
74
|
);
|
73
75
|
const css = {
|
74
76
|
...styles.container
|
@@ -98,7 +100,7 @@ var Pagination = forwardRef((props, ref) => {
|
|
98
100
|
{
|
99
101
|
className: "ui-pagination__item--first",
|
100
102
|
"aria-label": "Go to first page",
|
101
|
-
|
103
|
+
disabled: disabled || currentPage === 1,
|
102
104
|
page: "first",
|
103
105
|
...edgeProps,
|
104
106
|
...edgeFirstProps,
|
@@ -114,7 +116,7 @@ var Pagination = forwardRef((props, ref) => {
|
|
114
116
|
{
|
115
117
|
className: "ui-pagination__item--prev",
|
116
118
|
"aria-label": "Go to previous page",
|
117
|
-
|
119
|
+
disabled: disabled || currentPage === 1,
|
118
120
|
page: "prev",
|
119
121
|
...controlProps,
|
120
122
|
...controlPrevProps,
|
@@ -131,7 +133,7 @@ var Pagination = forwardRef((props, ref) => {
|
|
131
133
|
{
|
132
134
|
className: "ui-pagination__item--next",
|
133
135
|
"aria-label": "Go to next page",
|
134
|
-
|
136
|
+
disabled: disabled || currentPage === total,
|
135
137
|
page: "next",
|
136
138
|
...controlProps,
|
137
139
|
...controlNextProps,
|
@@ -147,7 +149,7 @@ var Pagination = forwardRef((props, ref) => {
|
|
147
149
|
{
|
148
150
|
className: "ui-pagination__item--last",
|
149
151
|
"aria-label": "Go to last page",
|
150
|
-
|
152
|
+
disabled: disabled || currentPage === total,
|
151
153
|
page: "last",
|
152
154
|
...edgeProps,
|
153
155
|
...edgeLastProps,
|
@@ -170,4 +172,4 @@ Pagination.__ui__ = "Pagination";
|
|
170
172
|
export {
|
171
173
|
Pagination
|
172
174
|
};
|
173
|
-
//# sourceMappingURL=chunk-
|
175
|
+
//# sourceMappingURL=chunk-IH2XPMDF.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/pagination.tsx"],"sourcesContent":["import type {\n CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n Token,\n} from \"@yamada-ui/core\"\nimport type { FC } from \"react\"\nimport type { PaginationItemProps } from \"./pagination-item\"\nimport type { UsePaginationProps } from \"./use-pagination\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { cx, dataAttr, handlerAll } from \"@yamada-ui/utils\"\nimport { useMemo } from \"react\"\nimport { PaginationItem } from \"./pagination-item\"\nimport { PaginationProvider, usePagination } from \"./use-pagination\"\n\ninterface PaginationOptions {\n /**\n * The pagination button component to use.\n */\n component?: FC<PaginationItemProps>\n /**\n * If `true`, display the control buttons.\n *\n * @default true\n */\n withControls?: Token<boolean>\n /**\n * If `true`, display the edge buttons.\n *\n * @default false\n */\n withEdges?: Token<boolean>\n /**\n * Props for container element.\n */\n containerProps?: HTMLUIProps<\"nav\">\n /**\n * Props for next of the control button element.\n */\n controlNextProps?: Omit<PaginationItemProps, \"page\">\n /**\n * Props for previous of the control button element.\n */\n controlPrevProps?: Omit<PaginationItemProps, \"page\">\n /**\n * Props for control button element.\n */\n controlProps?: Omit<PaginationItemProps, \"page\">\n /**\n * Props for first of the edge button element.\n */\n edgeFirstProps?: Omit<PaginationItemProps, \"page\">\n /**\n * Props for last of the edge button element.\n */\n edgeLastProps?: Omit<PaginationItemProps, \"page\">\n /**\n * Props for edge button element.\n */\n edgeProps?: Omit<PaginationItemProps, \"page\">\n /**\n * Props for button element.\n */\n itemProps?: Omit<PaginationItemProps, \"page\">\n}\n\nexport interface PaginationProps\n extends Omit<HTMLUIProps<\"ul\">, \"children\" | \"onChange\" | \"page\">,\n ThemeProps<\"Pagination\">,\n UsePaginationProps,\n PaginationOptions {}\n\n/**\n * `Pagination` is a component for managing the pagination and navigation of content.\n *\n * @see Docs https://yamada-ui.com/components/navigation/pagination\n */\nexport const Pagination = forwardRef<PaginationProps, \"ul\">((props, ref) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"Pagination\", props)\n let {\n className,\n boundaries,\n component: Component = PaginationItem,\n defaultPage,\n disabled,\n isDisabled,\n page,\n siblings,\n total,\n withControls: _withControls = true,\n withEdges: _withEdges = false,\n containerProps,\n controlNextProps,\n controlPrevProps,\n controlProps,\n edgeFirstProps,\n edgeLastProps,\n edgeProps,\n itemProps,\n onChange: onChangeProp,\n ...rest\n } = omitThemeProps(mergedProps)\n\n const withControls = useValue(_withControls)\n const withEdges = useValue(_withEdges)\n\n disabled ??= isDisabled\n\n const { currentPage, range, onChange, onFirst, onLast, onNext, onPrev } =\n usePagination({\n boundaries,\n defaultPage,\n disabled,\n page,\n siblings,\n total,\n onChange: onChangeProp,\n })\n\n const children = useMemo(\n () =>\n range.map((page, key) => (\n <ui.li key={key}>\n <Component\n aria-label={page !== \"ellipsis\" ? `Go to page ${page}` : undefined}\n active={currentPage === page}\n disabled={disabled}\n {...itemProps}\n page={page}\n onClick={handlerAll(\n itemProps?.onClick,\n page !== \"ellipsis\" ? () => onChange(page) : undefined,\n )}\n />\n </ui.li>\n )),\n [Component, currentPage, disabled, onChange, range, itemProps],\n )\n\n const css: CSSUIObject = {\n ...styles.container,\n }\n\n return (\n <PaginationProvider value={styles}>\n <ui.nav\n ref={ref}\n className={cx(\"ui-pagination\", className)}\n data-disabled={dataAttr(isDisabled)}\n __css={css}\n {...containerProps}\n >\n <ui.ul\n className=\"ui-pagination-inner\"\n data-disabled={dataAttr(isDisabled)}\n __css={{\n alignItems: \"center\",\n display: \"flex\",\n ...styles.inner,\n }}\n {...rest}\n >\n {withEdges ? (\n <ui.li>\n <Component\n className=\"ui-pagination__item--first\"\n aria-label=\"Go to first page\"\n disabled={disabled || currentPage === 1}\n page=\"first\"\n {...edgeProps}\n {...edgeFirstProps}\n onClick={handlerAll(\n edgeProps?.onClick,\n edgeFirstProps?.onClick,\n onFirst,\n )}\n />\n </ui.li>\n ) : null}\n\n {withControls ? (\n <ui.li>\n <Component\n className=\"ui-pagination__item--prev\"\n aria-label=\"Go to previous page\"\n disabled={disabled || currentPage === 1}\n page=\"prev\"\n {...controlProps}\n {...controlPrevProps}\n onClick={handlerAll(\n controlProps?.onClick,\n controlPrevProps?.onClick,\n onPrev,\n )}\n />\n </ui.li>\n ) : null}\n\n {children}\n\n {withControls ? (\n <ui.li>\n <Component\n className=\"ui-pagination__item--next\"\n aria-label=\"Go to next page\"\n disabled={disabled || currentPage === total}\n page=\"next\"\n {...controlProps}\n {...controlNextProps}\n onClick={handlerAll(\n controlProps?.onClick,\n controlNextProps?.onClick,\n onNext,\n )}\n />\n </ui.li>\n ) : null}\n\n {withEdges ? (\n <ui.li>\n <Component\n className=\"ui-pagination__item--last\"\n aria-label=\"Go to last page\"\n disabled={disabled || currentPage === total}\n page=\"last\"\n {...edgeProps}\n {...edgeLastProps}\n onClick={handlerAll(\n edgeProps?.onClick,\n edgeLastProps?.onClick,\n onLast,\n )}\n />\n </ui.li>\n ) : null}\n </ui.ul>\n </ui.nav>\n </PaginationProvider>\n )\n})\n\nPagination.displayName = \"Pagination\"\nPagination.__ui__ = \"Pagination\"\n"],"mappings":"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","names":["page"]}
|
package/dist/index.js
CHANGED
@@ -109,6 +109,7 @@ var computedRange = (start, end) => Array.from({ length: end - start + 1 }, (_,
|
|
109
109
|
var usePagination = ({
|
110
110
|
boundaries: _boundaries = 1,
|
111
111
|
defaultPage = 1,
|
112
|
+
disabled,
|
112
113
|
isDisabled = false,
|
113
114
|
page,
|
114
115
|
siblings: _siblings = 1,
|
@@ -117,6 +118,7 @@ var usePagination = ({
|
|
117
118
|
}) => {
|
118
119
|
const siblings = (0, import_use_value.useValue)(_siblings);
|
119
120
|
const boundaries = (0, import_use_value.useValue)(_boundaries);
|
121
|
+
disabled != null ? disabled : disabled = isDisabled;
|
120
122
|
const [currentPage, setCurrentPage] = (0, import_use_controllable_state.useControllableState)({
|
121
123
|
defaultValue: defaultPage,
|
122
124
|
value: page,
|
@@ -172,7 +174,7 @@ var usePagination = ({
|
|
172
174
|
}, [boundaries, siblings, currentPage, total]);
|
173
175
|
return {
|
174
176
|
currentPage,
|
175
|
-
|
177
|
+
disabled,
|
176
178
|
range,
|
177
179
|
total,
|
178
180
|
onChange,
|
@@ -193,7 +195,17 @@ var iconMap = {
|
|
193
195
|
prev: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PaginationPrevIcon, {})
|
194
196
|
};
|
195
197
|
var PaginationItem = (0, import_core.forwardRef)(
|
196
|
-
({
|
198
|
+
({
|
199
|
+
className,
|
200
|
+
active,
|
201
|
+
children,
|
202
|
+
disabled,
|
203
|
+
disableRipple,
|
204
|
+
isActive,
|
205
|
+
isDisabled,
|
206
|
+
page,
|
207
|
+
...rest
|
208
|
+
}, ref) => {
|
197
209
|
var _a;
|
198
210
|
const styles = usePaginationContext();
|
199
211
|
const isEllipsis = page === "ellipsis";
|
@@ -202,6 +214,8 @@ var PaginationItem = (0, import_core.forwardRef)(
|
|
202
214
|
isDisabled: disableRipple || isDisabled || isEllipsis
|
203
215
|
});
|
204
216
|
children != null ? children : children = (_a = iconMap[page]) != null ? _a : page;
|
217
|
+
active != null ? active : active = isActive;
|
218
|
+
disabled != null ? disabled : disabled = isDisabled;
|
205
219
|
const css = {
|
206
220
|
alignItems: "center",
|
207
221
|
display: "flex",
|
@@ -219,9 +233,9 @@ var PaginationItem = (0, import_core.forwardRef)(
|
|
219
233
|
ref,
|
220
234
|
...!isEllipsis ? {
|
221
235
|
type: "button",
|
222
|
-
"data-disabled": (0, import_utils2.dataAttr)(
|
223
|
-
"data-selected": (0, import_utils2.dataAttr)(
|
224
|
-
disabled
|
236
|
+
"data-disabled": (0, import_utils2.dataAttr)(disabled),
|
237
|
+
"data-selected": (0, import_utils2.dataAttr)(active),
|
238
|
+
disabled
|
225
239
|
} : {},
|
226
240
|
className: (0, import_utils2.cx)(
|
227
241
|
"ui-pagination__item",
|
@@ -247,11 +261,12 @@ PaginationItem.__ui__ = "PaginationItem";
|
|
247
261
|
var import_jsx_runtime3 = require("react/jsx-runtime");
|
248
262
|
var Pagination = (0, import_core2.forwardRef)((props, ref) => {
|
249
263
|
const [styles, mergedProps] = (0, import_core2.useComponentMultiStyle)("Pagination", props);
|
250
|
-
|
264
|
+
let {
|
251
265
|
className,
|
252
266
|
boundaries,
|
253
267
|
component: Component = PaginationItem,
|
254
268
|
defaultPage,
|
269
|
+
disabled,
|
255
270
|
isDisabled,
|
256
271
|
page,
|
257
272
|
siblings,
|
@@ -271,10 +286,11 @@ var Pagination = (0, import_core2.forwardRef)((props, ref) => {
|
|
271
286
|
} = (0, import_core2.omitThemeProps)(mergedProps);
|
272
287
|
const withControls = (0, import_use_value2.useValue)(_withControls);
|
273
288
|
const withEdges = (0, import_use_value2.useValue)(_withEdges);
|
289
|
+
disabled != null ? disabled : disabled = isDisabled;
|
274
290
|
const { currentPage, range, onChange, onFirst, onLast, onNext, onPrev } = usePagination({
|
275
291
|
boundaries,
|
276
292
|
defaultPage,
|
277
|
-
|
293
|
+
disabled,
|
278
294
|
page,
|
279
295
|
siblings,
|
280
296
|
total,
|
@@ -285,8 +301,8 @@ var Pagination = (0, import_core2.forwardRef)((props, ref) => {
|
|
285
301
|
Component,
|
286
302
|
{
|
287
303
|
"aria-label": page2 !== "ellipsis" ? `Go to page ${page2}` : void 0,
|
288
|
-
|
289
|
-
|
304
|
+
active: currentPage === page2,
|
305
|
+
disabled,
|
290
306
|
...itemProps,
|
291
307
|
page: page2,
|
292
308
|
onClick: (0, import_utils3.handlerAll)(
|
@@ -295,7 +311,7 @@ var Pagination = (0, import_core2.forwardRef)((props, ref) => {
|
|
295
311
|
)
|
296
312
|
}
|
297
313
|
) }, key)),
|
298
|
-
[Component, currentPage,
|
314
|
+
[Component, currentPage, disabled, onChange, range, itemProps]
|
299
315
|
);
|
300
316
|
const css = {
|
301
317
|
...styles.container
|
@@ -325,7 +341,7 @@ var Pagination = (0, import_core2.forwardRef)((props, ref) => {
|
|
325
341
|
{
|
326
342
|
className: "ui-pagination__item--first",
|
327
343
|
"aria-label": "Go to first page",
|
328
|
-
|
344
|
+
disabled: disabled || currentPage === 1,
|
329
345
|
page: "first",
|
330
346
|
...edgeProps,
|
331
347
|
...edgeFirstProps,
|
@@ -341,7 +357,7 @@ var Pagination = (0, import_core2.forwardRef)((props, ref) => {
|
|
341
357
|
{
|
342
358
|
className: "ui-pagination__item--prev",
|
343
359
|
"aria-label": "Go to previous page",
|
344
|
-
|
360
|
+
disabled: disabled || currentPage === 1,
|
345
361
|
page: "prev",
|
346
362
|
...controlProps,
|
347
363
|
...controlPrevProps,
|
@@ -358,7 +374,7 @@ var Pagination = (0, import_core2.forwardRef)((props, ref) => {
|
|
358
374
|
{
|
359
375
|
className: "ui-pagination__item--next",
|
360
376
|
"aria-label": "Go to next page",
|
361
|
-
|
377
|
+
disabled: disabled || currentPage === total,
|
362
378
|
page: "next",
|
363
379
|
...controlProps,
|
364
380
|
...controlNextProps,
|
@@ -374,7 +390,7 @@ var Pagination = (0, import_core2.forwardRef)((props, ref) => {
|
|
374
390
|
{
|
375
391
|
className: "ui-pagination__item--last",
|
376
392
|
"aria-label": "Go to last page",
|
377
|
-
|
393
|
+
disabled: disabled || currentPage === total,
|
378
394
|
page: "last",
|
379
395
|
...edgeProps,
|
380
396
|
...edgeLastProps,
|
package/dist/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/pagination.tsx","../src/pagination-item.tsx","../src/pagination-icon.tsx","../src/use-pagination.ts"],"sourcesContent":["export { Pagination } from \"./pagination\"\nexport type { PaginationProps } from \"./pagination\"\nexport { usePagination } from \"./use-pagination\"\nexport type { UsePaginationProps, UsePaginationReturn } from \"./use-pagination\"\n","import type {\n CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n Token,\n} from \"@yamada-ui/core\"\nimport type { FC } from \"react\"\nimport type { PaginationItemProps } from \"./pagination-item\"\nimport type { UsePaginationProps } from \"./use-pagination\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { cx, dataAttr, handlerAll } from \"@yamada-ui/utils\"\nimport { useMemo } from \"react\"\nimport { PaginationItem } from \"./pagination-item\"\nimport { PaginationProvider, usePagination } from \"./use-pagination\"\n\ninterface PaginationOptions {\n /**\n * The pagination button component to use.\n */\n component?: FC<PaginationItemProps>\n /**\n * If `true`, display the control buttons.\n *\n * @default true\n */\n withControls?: Token<boolean>\n /**\n * If `true`, display the edge buttons.\n *\n * @default false\n */\n withEdges?: Token<boolean>\n /**\n * Props for container element.\n */\n containerProps?: HTMLUIProps<\"nav\">\n /**\n * Props for next of the control button element.\n */\n controlNextProps?: Omit<PaginationItemProps, \"page\">\n /**\n * Props for previous of the control button element.\n */\n controlPrevProps?: Omit<PaginationItemProps, \"page\">\n /**\n * Props for control button element.\n */\n controlProps?: Omit<PaginationItemProps, \"page\">\n /**\n * Props for first of the edge button element.\n */\n edgeFirstProps?: Omit<PaginationItemProps, \"page\">\n /**\n * Props for last of the edge button element.\n */\n edgeLastProps?: Omit<PaginationItemProps, \"page\">\n /**\n * Props for edge button element.\n */\n edgeProps?: Omit<PaginationItemProps, \"page\">\n /**\n * Props for button element.\n */\n itemProps?: Omit<PaginationItemProps, \"page\">\n}\n\nexport interface PaginationProps\n extends Omit<HTMLUIProps<\"ul\">, \"children\" | \"onChange\" | \"page\">,\n ThemeProps<\"Pagination\">,\n UsePaginationProps,\n PaginationOptions {}\n\n/**\n * `Pagination` is a component for managing the pagination and navigation of content.\n *\n * @see Docs https://yamada-ui.com/components/navigation/pagination\n */\nexport const Pagination = forwardRef<PaginationProps, \"ul\">((props, ref) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"Pagination\", props)\n const {\n className,\n boundaries,\n component: Component = PaginationItem,\n defaultPage,\n isDisabled,\n page,\n siblings,\n total,\n withControls: _withControls = true,\n withEdges: _withEdges = false,\n containerProps,\n controlNextProps,\n controlPrevProps,\n controlProps,\n edgeFirstProps,\n edgeLastProps,\n edgeProps,\n itemProps,\n onChange: onChangeProp,\n ...rest\n } = omitThemeProps(mergedProps)\n\n const withControls = useValue(_withControls)\n const withEdges = useValue(_withEdges)\n\n const { currentPage, range, onChange, onFirst, onLast, onNext, onPrev } =\n usePagination({\n boundaries,\n defaultPage,\n isDisabled,\n page,\n siblings,\n total,\n onChange: onChangeProp,\n })\n\n const children = useMemo(\n () =>\n range.map((page, key) => (\n <ui.li key={key}>\n <Component\n aria-label={page !== \"ellipsis\" ? `Go to page ${page}` : undefined}\n isActive={currentPage === page}\n isDisabled={isDisabled}\n {...itemProps}\n page={page}\n onClick={handlerAll(\n itemProps?.onClick,\n page !== \"ellipsis\" ? () => onChange(page) : undefined,\n )}\n />\n </ui.li>\n )),\n [Component, currentPage, isDisabled, onChange, range, itemProps],\n )\n\n const css: CSSUIObject = {\n ...styles.container,\n }\n\n return (\n <PaginationProvider value={styles}>\n <ui.nav\n ref={ref}\n className={cx(\"ui-pagination\", className)}\n data-disabled={dataAttr(isDisabled)}\n __css={css}\n {...containerProps}\n >\n <ui.ul\n className=\"ui-pagination-inner\"\n data-disabled={dataAttr(isDisabled)}\n __css={{\n alignItems: \"center\",\n display: \"flex\",\n ...styles.inner,\n }}\n {...rest}\n >\n {withEdges ? (\n <ui.li>\n <Component\n className=\"ui-pagination__item--first\"\n aria-label=\"Go to first page\"\n isDisabled={isDisabled || currentPage === 1}\n page=\"first\"\n {...edgeProps}\n {...edgeFirstProps}\n onClick={handlerAll(\n edgeProps?.onClick,\n edgeFirstProps?.onClick,\n onFirst,\n )}\n />\n </ui.li>\n ) : null}\n\n {withControls ? (\n <ui.li>\n <Component\n className=\"ui-pagination__item--prev\"\n aria-label=\"Go to previous page\"\n isDisabled={isDisabled || currentPage === 1}\n page=\"prev\"\n {...controlProps}\n {...controlPrevProps}\n onClick={handlerAll(\n controlProps?.onClick,\n controlPrevProps?.onClick,\n onPrev,\n )}\n />\n </ui.li>\n ) : null}\n\n {children}\n\n {withControls ? (\n <ui.li>\n <Component\n className=\"ui-pagination__item--next\"\n aria-label=\"Go to next page\"\n isDisabled={isDisabled || currentPage === total}\n page=\"next\"\n {...controlProps}\n {...controlNextProps}\n onClick={handlerAll(\n controlProps?.onClick,\n controlNextProps?.onClick,\n onNext,\n )}\n />\n </ui.li>\n ) : null}\n\n {withEdges ? (\n <ui.li>\n <Component\n className=\"ui-pagination__item--last\"\n aria-label=\"Go to last page\"\n isDisabled={isDisabled || currentPage === total}\n page=\"last\"\n {...edgeProps}\n {...edgeLastProps}\n onClick={handlerAll(\n edgeProps?.onClick,\n edgeLastProps?.onClick,\n onLast,\n )}\n />\n </ui.li>\n ) : null}\n </ui.ul>\n </ui.nav>\n </PaginationProvider>\n )\n})\n\nPagination.displayName = \"Pagination\"\nPagination.__ui__ = \"Pagination\"\n","import type { CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport type { ReactNode } from \"react\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { Ripple, useRipple } from \"@yamada-ui/ripple\"\nimport { cx, dataAttr } from \"@yamada-ui/utils\"\nimport {\n PaginationEllipsisIcon,\n PaginationFirstIcon,\n PaginationLastIcon,\n PaginationNextIcon,\n PaginationPrevIcon,\n} from \"./pagination-icon\"\nimport { usePaginationContext } from \"./use-pagination\"\n\ninterface PaginationItemOptions {\n /**\n * The type of the page or item assigned to the pagination item.\n */\n page: \"ellipsis\" | \"first\" | \"last\" | \"next\" | \"prev\" | number\n /**\n * If `true`, disable ripple effects when pressing a element.\n *\n * @default false\n */\n disableRipple?: boolean\n /**\n * If `true`, the pagination item will be activated.\n *\n * @default false\n */\n isActive?: boolean\n /**\n * If `true`, the pagination item will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n}\n\nexport interface PaginationItemProps\n extends Omit<HTMLUIProps<\"button\">, \"page\">,\n PaginationItemOptions {}\n\nconst iconMap: {\n [key in \"ellipsis\" | \"first\" | \"last\" | \"next\" | \"prev\" | number]: ReactNode\n} = {\n ellipsis: <PaginationEllipsisIcon />,\n first: <PaginationFirstIcon />,\n last: <PaginationLastIcon />,\n next: <PaginationNextIcon />,\n prev: <PaginationPrevIcon />,\n}\n\nexport const PaginationItem = forwardRef<PaginationItemProps, \"button\">(\n (\n { className, children, disableRipple, isActive, isDisabled, page, ...rest },\n ref,\n ) => {\n const styles = usePaginationContext()\n const isEllipsis = page === \"ellipsis\"\n const { onPointerDown, ...rippleProps } = useRipple({\n ...rest,\n isDisabled: disableRipple || isDisabled || isEllipsis,\n })\n\n children ??= iconMap[page] ?? page\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"flex\",\n justifyContent: \"center\",\n overflow: \"hidden\",\n position: \"relative\",\n userSelect: \"none\",\n ...styles.item,\n ...styles[page],\n }\n\n const Component = ui[isEllipsis ? \"span\" : \"button\"]\n\n return (\n <Component\n ref={ref}\n {...(!isEllipsis\n ? {\n type: \"button\",\n \"data-disabled\": dataAttr(isDisabled),\n \"data-selected\": dataAttr(isActive),\n disabled: isDisabled,\n }\n : {})}\n className={cx(\n \"ui-pagination__item\",\n isEllipsis ? \"ui-pagination__item--ellipsis\" : undefined,\n className,\n )}\n tabIndex={!isEllipsis ? 0 : -1}\n __css={css}\n {...rest}\n onPointerDown={onPointerDown}\n >\n {children}\n\n <Ripple {...rippleProps} />\n </Component>\n )\n },\n)\n\nPaginationItem.displayName = \"PaginationItem\"\nPaginationItem.__ui__ = \"PaginationItem\"\n","import type { FC } from \"@yamada-ui/core\"\nimport type { IconProps } from \"@yamada-ui/icon\"\nimport { Icon } from \"@yamada-ui/icon\"\n\nexport const PaginationEllipsisIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n d=\"M2 8c0-.733.6-1.333 1.333-1.333.734 0 1.334.6 1.334 1.333s-.6 1.333-1.334 1.333C2.6 9.333 2 8.733 2 8zm9.333 0c0-.733.6-1.333 1.334-1.333C13.4 6.667 14 7.267 14 8s-.6 1.333-1.333 1.333c-.734 0-1.334-.6-1.334-1.333zM6.667 8c0-.733.6-1.333 1.333-1.333s1.333.6 1.333 1.333S8.733 9.333 8 9.333 6.667 8.733 6.667 8z\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\n\nPaginationEllipsisIcon.displayName = \"PaginationEllipsisIcon\"\nPaginationEllipsisIcon.__ui__ = \"PaginationEllipsisIcon\"\n\nexport const PaginationFirstIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n d=\"M6.85355 3.85355C7.04882 3.65829 7.04882 3.34171 6.85355 3.14645C6.65829 2.95118 6.34171 2.95118 6.14645 3.14645L2.14645 7.14645C1.95118 7.34171 1.95118 7.65829 2.14645 7.85355L6.14645 11.8536C6.34171 12.0488 6.65829 12.0488 6.85355 11.8536C7.04882 11.6583 7.04882 11.3417 6.85355 11.1464L3.20711 7.5L6.85355 3.85355ZM12.8536 3.85355C13.0488 3.65829 13.0488 3.34171 12.8536 3.14645C12.6583 2.95118 12.3417 2.95118 12.1464 3.14645L8.14645 7.14645C7.95118 7.34171 7.95118 7.65829 8.14645 7.85355L12.1464 11.8536C12.3417 12.0488 12.6583 12.0488 12.8536 11.8536C13.0488 11.6583 13.0488 11.3417 12.8536 11.1464L9.20711 7.5L12.8536 3.85355Z\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\n\nPaginationFirstIcon.displayName = \"PaginationFirstIcon\"\nPaginationFirstIcon.__ui__ = \"PaginationFirstIcon\"\n\nexport const PaginationLastIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n d=\"M2.14645 11.1464C1.95118 11.3417 1.95118 11.6583 2.14645 11.8536C2.34171 12.0488 2.65829 12.0488 2.85355 11.8536L6.85355 7.85355C7.04882 7.65829 7.04882 7.34171 6.85355 7.14645L2.85355 3.14645C2.65829 2.95118 2.34171 2.95118 2.14645 3.14645C1.95118 3.34171 1.95118 3.65829 2.14645 3.85355L5.79289 7.5L2.14645 11.1464ZM8.14645 11.1464C7.95118 11.3417 7.95118 11.6583 8.14645 11.8536C8.34171 12.0488 8.65829 12.0488 8.85355 11.8536L12.8536 7.85355C13.0488 7.65829 13.0488 7.34171 12.8536 7.14645L8.85355 3.14645C8.65829 2.95118 8.34171 2.95118 8.14645 3.14645C7.95118 3.34171 7.95118 3.65829 8.14645 3.85355L11.7929 7.5L8.14645 11.1464Z\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\n\nPaginationLastIcon.displayName = \"PaginationLastIcon\"\nPaginationLastIcon.__ui__ = \"PaginationLastIcon\"\n\nexport const PaginationPrevIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n d=\"M7.219 8l3.3 3.3-.943.943L5.333 8l4.243-4.243.943.943-3.3 3.3z\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\n\nPaginationPrevIcon.displayName = \"PaginationPrevIcon\"\nPaginationPrevIcon.__ui__ = \"PaginationPrevIcon\"\n\nexport const PaginationNextIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n d=\"M8.781 8l-3.3-3.3.943-.943L10.667 8l-4.243 4.243-.943-.943 3.3-3.3z\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\n\nPaginationNextIcon.displayName = \"PaginationNextIcon\"\nPaginationNextIcon.__ui__ = \"PaginationNextIcon\"\n","import type { CSSUIObject, Token } from \"@yamada-ui/core\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { createContext } from \"@yamada-ui/utils\"\nimport { useCallback, useMemo } from \"react\"\n\ninterface PaginationContext {\n [key: string]: CSSUIObject | undefined\n}\n\nexport const [PaginationProvider, usePaginationContext] =\n createContext<PaginationContext>({\n name: \"PaginationContext\",\n errorMessage: `usePaginationContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Pagination />\"`,\n })\n\nexport const computedRange = (start: number, end: number) =>\n Array.from({ length: end - start + 1 }, (_, index) => index + start)\n\nexport interface UsePaginationProps {\n /**\n * The total number of pages in pagination.\n */\n total: number\n /**\n * Number of elements visible on the left/right edges.\n *\n * @default 1\n */\n boundaries?: Token<number>\n /**\n * The initial page of the pagination.\n * Should be less than `total` and greater than `1`.\n *\n * @default 1\n */\n defaultPage?: number\n /**\n * If `true`, the pagination all item will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * The page of the pagination.\n * Should be less than `total` and greater than `1`.\n */\n page?: number\n /** Number of siblings displayed on the left/right side of selected page.\n *\n * @default 1\n */\n siblings?: Token<number>\n /**\n * The callback invoked when the page changes.\n */\n onChange?: (page: number) => void\n}\n\nexport const usePagination = ({\n boundaries: _boundaries = 1,\n defaultPage = 1,\n isDisabled = false,\n page,\n siblings: _siblings = 1,\n total,\n onChange: onChangeProp,\n}: UsePaginationProps) => {\n const siblings = useValue(_siblings)\n const boundaries = useValue(_boundaries)\n\n const [currentPage, setCurrentPage] = useControllableState({\n defaultValue: defaultPage,\n value: page,\n onChange: onChangeProp,\n })\n\n const onFirst = useCallback(() => setCurrentPage(1), [setCurrentPage])\n\n const onLast = useCallback(\n () => setCurrentPage(total),\n [setCurrentPage, total],\n )\n\n const onPrev = useCallback(\n () => setCurrentPage((prev) => (prev === 1 ? prev : prev - 1)),\n [setCurrentPage],\n )\n\n const onNext = useCallback(\n () => setCurrentPage((prev) => (prev === total ? prev : prev + 1)),\n [setCurrentPage, total],\n )\n\n const onChange = useCallback(\n (page: number) => setCurrentPage(page),\n [setCurrentPage],\n )\n\n const range = useMemo((): (\"ellipsis\" | number)[] => {\n const minimumTotal = siblings * 2 + 3 + boundaries * 2\n\n if (minimumTotal >= total) return computedRange(1, total)\n\n const prevSiblings = Math.max(currentPage - siblings, boundaries)\n const nextSiblings = Math.min(currentPage + siblings, total - boundaries)\n\n const prevDots = prevSiblings > boundaries + 2\n const nextDots = nextSiblings < total - (boundaries + 1)\n\n if (!prevDots && nextDots) {\n const prevPages = siblings * 2 + boundaries + 2\n\n return [\n ...computedRange(1, prevPages),\n \"ellipsis\",\n ...computedRange(total - (boundaries - 1), total),\n ]\n }\n\n if (prevDots && !nextDots) {\n const nextPages = boundaries + 1 + 2 * siblings\n\n return [\n ...computedRange(1, boundaries),\n \"ellipsis\",\n ...computedRange(total - nextPages, total),\n ]\n }\n\n return [\n ...computedRange(1, boundaries),\n \"ellipsis\",\n ...computedRange(prevSiblings, nextSiblings),\n \"ellipsis\",\n ...computedRange(total - boundaries + 1, total),\n ]\n }, [boundaries, siblings, currentPage, total])\n\n return {\n currentPage,\n isDisabled,\n range,\n total,\n onChange,\n onFirst,\n onLast,\n onNext,\n onPrev,\n }\n}\n\nexport type UsePaginationReturn = ReturnType<typeof usePagination>\n"],"mappings":"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","names":["import_core","import_use_value","import_utils","import_react","import_utils","page","import_jsx_runtime","import_jsx_runtime","page"]}
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/pagination.tsx","../src/pagination-item.tsx","../src/pagination-icon.tsx","../src/use-pagination.ts"],"sourcesContent":["export { Pagination } from \"./pagination\"\nexport type { PaginationProps } from \"./pagination\"\nexport { usePagination } from \"./use-pagination\"\nexport type { UsePaginationProps, UsePaginationReturn } from \"./use-pagination\"\n","import type {\n CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n Token,\n} from \"@yamada-ui/core\"\nimport type { FC } from \"react\"\nimport type { PaginationItemProps } from \"./pagination-item\"\nimport type { UsePaginationProps } from \"./use-pagination\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { cx, dataAttr, handlerAll } from \"@yamada-ui/utils\"\nimport { useMemo } from \"react\"\nimport { PaginationItem } from \"./pagination-item\"\nimport { PaginationProvider, usePagination } from \"./use-pagination\"\n\ninterface PaginationOptions {\n /**\n * The pagination button component to use.\n */\n component?: FC<PaginationItemProps>\n /**\n * If `true`, display the control buttons.\n *\n * @default true\n */\n withControls?: Token<boolean>\n /**\n * If `true`, display the edge buttons.\n *\n * @default false\n */\n withEdges?: Token<boolean>\n /**\n * Props for container element.\n */\n containerProps?: HTMLUIProps<\"nav\">\n /**\n * Props for next of the control button element.\n */\n controlNextProps?: Omit<PaginationItemProps, \"page\">\n /**\n * Props for previous of the control button element.\n */\n controlPrevProps?: Omit<PaginationItemProps, \"page\">\n /**\n * Props for control button element.\n */\n controlProps?: Omit<PaginationItemProps, \"page\">\n /**\n * Props for first of the edge button element.\n */\n edgeFirstProps?: Omit<PaginationItemProps, \"page\">\n /**\n * Props for last of the edge button element.\n */\n edgeLastProps?: Omit<PaginationItemProps, \"page\">\n /**\n * Props for edge button element.\n */\n edgeProps?: Omit<PaginationItemProps, \"page\">\n /**\n * Props for button element.\n */\n itemProps?: Omit<PaginationItemProps, \"page\">\n}\n\nexport interface PaginationProps\n extends Omit<HTMLUIProps<\"ul\">, \"children\" | \"onChange\" | \"page\">,\n ThemeProps<\"Pagination\">,\n UsePaginationProps,\n PaginationOptions {}\n\n/**\n * `Pagination` is a component for managing the pagination and navigation of content.\n *\n * @see Docs https://yamada-ui.com/components/navigation/pagination\n */\nexport const Pagination = forwardRef<PaginationProps, \"ul\">((props, ref) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"Pagination\", props)\n let {\n className,\n boundaries,\n component: Component = PaginationItem,\n defaultPage,\n disabled,\n isDisabled,\n page,\n siblings,\n total,\n withControls: _withControls = true,\n withEdges: _withEdges = false,\n containerProps,\n controlNextProps,\n controlPrevProps,\n controlProps,\n edgeFirstProps,\n edgeLastProps,\n edgeProps,\n itemProps,\n onChange: onChangeProp,\n ...rest\n } = omitThemeProps(mergedProps)\n\n const withControls = useValue(_withControls)\n const withEdges = useValue(_withEdges)\n\n disabled ??= isDisabled\n\n const { currentPage, range, onChange, onFirst, onLast, onNext, onPrev } =\n usePagination({\n boundaries,\n defaultPage,\n disabled,\n page,\n siblings,\n total,\n onChange: onChangeProp,\n })\n\n const children = useMemo(\n () =>\n range.map((page, key) => (\n <ui.li key={key}>\n <Component\n aria-label={page !== \"ellipsis\" ? `Go to page ${page}` : undefined}\n active={currentPage === page}\n disabled={disabled}\n {...itemProps}\n page={page}\n onClick={handlerAll(\n itemProps?.onClick,\n page !== \"ellipsis\" ? () => onChange(page) : undefined,\n )}\n />\n </ui.li>\n )),\n [Component, currentPage, disabled, onChange, range, itemProps],\n )\n\n const css: CSSUIObject = {\n ...styles.container,\n }\n\n return (\n <PaginationProvider value={styles}>\n <ui.nav\n ref={ref}\n className={cx(\"ui-pagination\", className)}\n data-disabled={dataAttr(isDisabled)}\n __css={css}\n {...containerProps}\n >\n <ui.ul\n className=\"ui-pagination-inner\"\n data-disabled={dataAttr(isDisabled)}\n __css={{\n alignItems: \"center\",\n display: \"flex\",\n ...styles.inner,\n }}\n {...rest}\n >\n {withEdges ? (\n <ui.li>\n <Component\n className=\"ui-pagination__item--first\"\n aria-label=\"Go to first page\"\n disabled={disabled || currentPage === 1}\n page=\"first\"\n {...edgeProps}\n {...edgeFirstProps}\n onClick={handlerAll(\n edgeProps?.onClick,\n edgeFirstProps?.onClick,\n onFirst,\n )}\n />\n </ui.li>\n ) : null}\n\n {withControls ? (\n <ui.li>\n <Component\n className=\"ui-pagination__item--prev\"\n aria-label=\"Go to previous page\"\n disabled={disabled || currentPage === 1}\n page=\"prev\"\n {...controlProps}\n {...controlPrevProps}\n onClick={handlerAll(\n controlProps?.onClick,\n controlPrevProps?.onClick,\n onPrev,\n )}\n />\n </ui.li>\n ) : null}\n\n {children}\n\n {withControls ? (\n <ui.li>\n <Component\n className=\"ui-pagination__item--next\"\n aria-label=\"Go to next page\"\n disabled={disabled || currentPage === total}\n page=\"next\"\n {...controlProps}\n {...controlNextProps}\n onClick={handlerAll(\n controlProps?.onClick,\n controlNextProps?.onClick,\n onNext,\n )}\n />\n </ui.li>\n ) : null}\n\n {withEdges ? (\n <ui.li>\n <Component\n className=\"ui-pagination__item--last\"\n aria-label=\"Go to last page\"\n disabled={disabled || currentPage === total}\n page=\"last\"\n {...edgeProps}\n {...edgeLastProps}\n onClick={handlerAll(\n edgeProps?.onClick,\n edgeLastProps?.onClick,\n onLast,\n )}\n />\n </ui.li>\n ) : null}\n </ui.ul>\n </ui.nav>\n </PaginationProvider>\n )\n})\n\nPagination.displayName = \"Pagination\"\nPagination.__ui__ = \"Pagination\"\n","import type { CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport type { ReactNode } from \"react\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { Ripple, useRipple } from \"@yamada-ui/ripple\"\nimport { cx, dataAttr } from \"@yamada-ui/utils\"\nimport {\n PaginationEllipsisIcon,\n PaginationFirstIcon,\n PaginationLastIcon,\n PaginationNextIcon,\n PaginationPrevIcon,\n} from \"./pagination-icon\"\nimport { usePaginationContext } from \"./use-pagination\"\n\ninterface PaginationItemOptions {\n /**\n * The type of the page or item assigned to the pagination item.\n */\n page: \"ellipsis\" | \"first\" | \"last\" | \"next\" | \"prev\" | number\n /**\n * If `true`, the pagination item will be activated.\n *\n * @default false\n */\n active?: boolean\n /**\n * If `true`, the pagination item will be disabled.\n *\n * @default false\n */\n disabled?: boolean\n /**\n * If `true`, disable ripple effects when pressing a element.\n *\n * @default false\n */\n disableRipple?: boolean\n /**\n * If `true`, the pagination item will be activated.\n *\n * @default false\n *\n * @deprecated Use `active` instead.\n */\n isActive?: boolean\n /**\n * If `true`, the pagination item will be disabled.\n *\n * @default false\n *\n * @deprecated Use `disabled` instead.\n */\n isDisabled?: boolean\n}\n\nexport interface PaginationItemProps\n extends Omit<HTMLUIProps<\"button\">, \"page\">,\n PaginationItemOptions {}\n\nconst iconMap: {\n [key in \"ellipsis\" | \"first\" | \"last\" | \"next\" | \"prev\" | number]: ReactNode\n} = {\n ellipsis: <PaginationEllipsisIcon />,\n first: <PaginationFirstIcon />,\n last: <PaginationLastIcon />,\n next: <PaginationNextIcon />,\n prev: <PaginationPrevIcon />,\n}\n\nexport const PaginationItem = forwardRef<PaginationItemProps, \"button\">(\n (\n {\n className,\n active,\n children,\n disabled,\n disableRipple,\n isActive,\n isDisabled,\n page,\n ...rest\n },\n ref,\n ) => {\n const styles = usePaginationContext()\n const isEllipsis = page === \"ellipsis\"\n const { onPointerDown, ...rippleProps } = useRipple({\n ...rest,\n isDisabled: disableRipple || isDisabled || isEllipsis,\n })\n\n children ??= iconMap[page] ?? page\n active ??= isActive\n disabled ??= isDisabled\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"flex\",\n justifyContent: \"center\",\n overflow: \"hidden\",\n position: \"relative\",\n userSelect: \"none\",\n ...styles.item,\n ...styles[page],\n }\n\n const Component = ui[isEllipsis ? \"span\" : \"button\"]\n\n return (\n <Component\n ref={ref}\n {...(!isEllipsis\n ? {\n type: \"button\",\n \"data-disabled\": dataAttr(disabled),\n \"data-selected\": dataAttr(active),\n disabled,\n }\n : {})}\n className={cx(\n \"ui-pagination__item\",\n isEllipsis ? \"ui-pagination__item--ellipsis\" : undefined,\n className,\n )}\n tabIndex={!isEllipsis ? 0 : -1}\n __css={css}\n {...rest}\n onPointerDown={onPointerDown}\n >\n {children}\n\n <Ripple {...rippleProps} />\n </Component>\n )\n },\n)\n\nPaginationItem.displayName = \"PaginationItem\"\nPaginationItem.__ui__ = \"PaginationItem\"\n","import type { FC } from \"@yamada-ui/core\"\nimport type { IconProps } from \"@yamada-ui/icon\"\nimport { Icon } from \"@yamada-ui/icon\"\n\nexport const PaginationEllipsisIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n d=\"M2 8c0-.733.6-1.333 1.333-1.333.734 0 1.334.6 1.334 1.333s-.6 1.333-1.334 1.333C2.6 9.333 2 8.733 2 8zm9.333 0c0-.733.6-1.333 1.334-1.333C13.4 6.667 14 7.267 14 8s-.6 1.333-1.333 1.333c-.734 0-1.334-.6-1.334-1.333zM6.667 8c0-.733.6-1.333 1.333-1.333s1.333.6 1.333 1.333S8.733 9.333 8 9.333 6.667 8.733 6.667 8z\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\n\nPaginationEllipsisIcon.displayName = \"PaginationEllipsisIcon\"\nPaginationEllipsisIcon.__ui__ = \"PaginationEllipsisIcon\"\n\nexport const PaginationFirstIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n d=\"M6.85355 3.85355C7.04882 3.65829 7.04882 3.34171 6.85355 3.14645C6.65829 2.95118 6.34171 2.95118 6.14645 3.14645L2.14645 7.14645C1.95118 7.34171 1.95118 7.65829 2.14645 7.85355L6.14645 11.8536C6.34171 12.0488 6.65829 12.0488 6.85355 11.8536C7.04882 11.6583 7.04882 11.3417 6.85355 11.1464L3.20711 7.5L6.85355 3.85355ZM12.8536 3.85355C13.0488 3.65829 13.0488 3.34171 12.8536 3.14645C12.6583 2.95118 12.3417 2.95118 12.1464 3.14645L8.14645 7.14645C7.95118 7.34171 7.95118 7.65829 8.14645 7.85355L12.1464 11.8536C12.3417 12.0488 12.6583 12.0488 12.8536 11.8536C13.0488 11.6583 13.0488 11.3417 12.8536 11.1464L9.20711 7.5L12.8536 3.85355Z\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\n\nPaginationFirstIcon.displayName = \"PaginationFirstIcon\"\nPaginationFirstIcon.__ui__ = \"PaginationFirstIcon\"\n\nexport const PaginationLastIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n d=\"M2.14645 11.1464C1.95118 11.3417 1.95118 11.6583 2.14645 11.8536C2.34171 12.0488 2.65829 12.0488 2.85355 11.8536L6.85355 7.85355C7.04882 7.65829 7.04882 7.34171 6.85355 7.14645L2.85355 3.14645C2.65829 2.95118 2.34171 2.95118 2.14645 3.14645C1.95118 3.34171 1.95118 3.65829 2.14645 3.85355L5.79289 7.5L2.14645 11.1464ZM8.14645 11.1464C7.95118 11.3417 7.95118 11.6583 8.14645 11.8536C8.34171 12.0488 8.65829 12.0488 8.85355 11.8536L12.8536 7.85355C13.0488 7.65829 13.0488 7.34171 12.8536 7.14645L8.85355 3.14645C8.65829 2.95118 8.34171 2.95118 8.14645 3.14645C7.95118 3.34171 7.95118 3.65829 8.14645 3.85355L11.7929 7.5L8.14645 11.1464Z\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\n\nPaginationLastIcon.displayName = \"PaginationLastIcon\"\nPaginationLastIcon.__ui__ = \"PaginationLastIcon\"\n\nexport const PaginationPrevIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n d=\"M7.219 8l3.3 3.3-.943.943L5.333 8l4.243-4.243.943.943-3.3 3.3z\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\n\nPaginationPrevIcon.displayName = \"PaginationPrevIcon\"\nPaginationPrevIcon.__ui__ = \"PaginationPrevIcon\"\n\nexport const PaginationNextIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n d=\"M8.781 8l-3.3-3.3.943-.943L10.667 8l-4.243 4.243-.943-.943 3.3-3.3z\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\n\nPaginationNextIcon.displayName = \"PaginationNextIcon\"\nPaginationNextIcon.__ui__ = \"PaginationNextIcon\"\n","import type { CSSUIObject, Token } from \"@yamada-ui/core\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { createContext } from \"@yamada-ui/utils\"\nimport { useCallback, useMemo } from \"react\"\n\ninterface PaginationContext {\n [key: string]: CSSUIObject | undefined\n}\n\nexport const [PaginationProvider, usePaginationContext] =\n createContext<PaginationContext>({\n name: \"PaginationContext\",\n errorMessage: `usePaginationContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Pagination />\"`,\n })\n\nexport const computedRange = (start: number, end: number) =>\n Array.from({ length: end - start + 1 }, (_, index) => index + start)\n\nexport interface UsePaginationProps {\n /**\n * The total number of pages in pagination.\n */\n total: number\n /**\n * Number of elements visible on the left/right edges.\n *\n * @default 1\n */\n boundaries?: Token<number>\n /**\n * The initial page of the pagination.\n * Should be less than `total` and greater than `1`.\n *\n * @default 1\n */\n defaultPage?: number\n /**\n * If `true`, the pagination all item will be disabled.\n *\n * @default false\n */\n disabled?: boolean\n /**\n * If `true`, the pagination all item will be disabled.\n *\n * @default false\n *\n * @deprecated Use `disabled` instead.\n */\n isDisabled?: boolean\n /**\n * The page of the pagination.\n * Should be less than `total` and greater than `1`.\n */\n page?: number\n /** Number of siblings displayed on the left/right side of selected page.\n *\n * @default 1\n */\n siblings?: Token<number>\n /**\n * The callback invoked when the page changes.\n */\n onChange?: (page: number) => void\n}\n\nexport const usePagination = ({\n boundaries: _boundaries = 1,\n defaultPage = 1,\n disabled,\n isDisabled = false,\n page,\n siblings: _siblings = 1,\n total,\n onChange: onChangeProp,\n}: UsePaginationProps) => {\n const siblings = useValue(_siblings)\n const boundaries = useValue(_boundaries)\n\n disabled ??= isDisabled\n\n const [currentPage, setCurrentPage] = useControllableState({\n defaultValue: defaultPage,\n value: page,\n onChange: onChangeProp,\n })\n\n const onFirst = useCallback(() => setCurrentPage(1), [setCurrentPage])\n\n const onLast = useCallback(\n () => setCurrentPage(total),\n [setCurrentPage, total],\n )\n\n const onPrev = useCallback(\n () => setCurrentPage((prev) => (prev === 1 ? prev : prev - 1)),\n [setCurrentPage],\n )\n\n const onNext = useCallback(\n () => setCurrentPage((prev) => (prev === total ? prev : prev + 1)),\n [setCurrentPage, total],\n )\n\n const onChange = useCallback(\n (page: number) => setCurrentPage(page),\n [setCurrentPage],\n )\n\n const range = useMemo((): (\"ellipsis\" | number)[] => {\n const minimumTotal = siblings * 2 + 3 + boundaries * 2\n\n if (minimumTotal >= total) return computedRange(1, total)\n\n const prevSiblings = Math.max(currentPage - siblings, boundaries)\n const nextSiblings = Math.min(currentPage + siblings, total - boundaries)\n\n const prevDots = prevSiblings > boundaries + 2\n const nextDots = nextSiblings < total - (boundaries + 1)\n\n if (!prevDots && nextDots) {\n const prevPages = siblings * 2 + boundaries + 2\n\n return [\n ...computedRange(1, prevPages),\n \"ellipsis\",\n ...computedRange(total - (boundaries - 1), total),\n ]\n }\n\n if (prevDots && !nextDots) {\n const nextPages = boundaries + 1 + 2 * siblings\n\n return [\n ...computedRange(1, boundaries),\n \"ellipsis\",\n ...computedRange(total - nextPages, total),\n ]\n }\n\n return [\n ...computedRange(1, boundaries),\n \"ellipsis\",\n ...computedRange(prevSiblings, nextSiblings),\n \"ellipsis\",\n ...computedRange(total - boundaries + 1, total),\n ]\n }, [boundaries, siblings, currentPage, total])\n\n return {\n currentPage,\n disabled,\n range,\n total,\n onChange,\n onFirst,\n onLast,\n onNext,\n onPrev,\n }\n}\n\nexport type UsePaginationReturn = ReturnType<typeof usePagination>\n"],"mappings":"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","names":["import_core","import_use_value","import_utils","import_react","import_utils","page","import_jsx_runtime","import_jsx_runtime","page"]}
|
package/dist/index.mjs
CHANGED
@@ -1,12 +1,12 @@
|
|
1
1
|
"use client"
|
2
2
|
import {
|
3
3
|
Pagination
|
4
|
-
} from "./chunk-
|
5
|
-
import "./chunk-
|
4
|
+
} from "./chunk-IH2XPMDF.mjs";
|
5
|
+
import "./chunk-5QYB2MRA.mjs";
|
6
6
|
import "./chunk-VZWGYG76.mjs";
|
7
7
|
import {
|
8
8
|
usePagination
|
9
|
-
} from "./chunk-
|
9
|
+
} from "./chunk-E66Q4CU7.mjs";
|
10
10
|
export {
|
11
11
|
Pagination,
|
12
12
|
usePagination
|
@@ -6,6 +6,18 @@ interface PaginationItemOptions {
|
|
6
6
|
* The type of the page or item assigned to the pagination item.
|
7
7
|
*/
|
8
8
|
page: "ellipsis" | "first" | "last" | "next" | "prev" | number;
|
9
|
+
/**
|
10
|
+
* If `true`, the pagination item will be activated.
|
11
|
+
*
|
12
|
+
* @default false
|
13
|
+
*/
|
14
|
+
active?: boolean;
|
15
|
+
/**
|
16
|
+
* If `true`, the pagination item will be disabled.
|
17
|
+
*
|
18
|
+
* @default false
|
19
|
+
*/
|
20
|
+
disabled?: boolean;
|
9
21
|
/**
|
10
22
|
* If `true`, disable ripple effects when pressing a element.
|
11
23
|
*
|
@@ -16,12 +28,16 @@ interface PaginationItemOptions {
|
|
16
28
|
* If `true`, the pagination item will be activated.
|
17
29
|
*
|
18
30
|
* @default false
|
31
|
+
*
|
32
|
+
* @deprecated Use `active` instead.
|
19
33
|
*/
|
20
34
|
isActive?: boolean;
|
21
35
|
/**
|
22
36
|
* If `true`, the pagination item will be disabled.
|
23
37
|
*
|
24
38
|
* @default false
|
39
|
+
*
|
40
|
+
* @deprecated Use `disabled` instead.
|
25
41
|
*/
|
26
42
|
isDisabled?: boolean;
|
27
43
|
}
|
@@ -6,6 +6,18 @@ interface PaginationItemOptions {
|
|
6
6
|
* The type of the page or item assigned to the pagination item.
|
7
7
|
*/
|
8
8
|
page: "ellipsis" | "first" | "last" | "next" | "prev" | number;
|
9
|
+
/**
|
10
|
+
* If `true`, the pagination item will be activated.
|
11
|
+
*
|
12
|
+
* @default false
|
13
|
+
*/
|
14
|
+
active?: boolean;
|
15
|
+
/**
|
16
|
+
* If `true`, the pagination item will be disabled.
|
17
|
+
*
|
18
|
+
* @default false
|
19
|
+
*/
|
20
|
+
disabled?: boolean;
|
9
21
|
/**
|
10
22
|
* If `true`, disable ripple effects when pressing a element.
|
11
23
|
*
|
@@ -16,12 +28,16 @@ interface PaginationItemOptions {
|
|
16
28
|
* If `true`, the pagination item will be activated.
|
17
29
|
*
|
18
30
|
* @default false
|
31
|
+
*
|
32
|
+
* @deprecated Use `active` instead.
|
19
33
|
*/
|
20
34
|
isActive?: boolean;
|
21
35
|
/**
|
22
36
|
* If `true`, the pagination item will be disabled.
|
23
37
|
*
|
24
38
|
* @default false
|
39
|
+
*
|
40
|
+
* @deprecated Use `disabled` instead.
|
25
41
|
*/
|
26
42
|
isDisabled?: boolean;
|
27
43
|
}
|
package/dist/pagination-item.js
CHANGED
@@ -107,7 +107,17 @@ var iconMap = {
|
|
107
107
|
prev: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PaginationPrevIcon, {})
|
108
108
|
};
|
109
109
|
var PaginationItem = (0, import_core.forwardRef)(
|
110
|
-
({
|
110
|
+
({
|
111
|
+
className,
|
112
|
+
active,
|
113
|
+
children,
|
114
|
+
disabled,
|
115
|
+
disableRipple,
|
116
|
+
isActive,
|
117
|
+
isDisabled,
|
118
|
+
page,
|
119
|
+
...rest
|
120
|
+
}, ref) => {
|
111
121
|
var _a;
|
112
122
|
const styles = usePaginationContext();
|
113
123
|
const isEllipsis = page === "ellipsis";
|
@@ -116,6 +126,8 @@ var PaginationItem = (0, import_core.forwardRef)(
|
|
116
126
|
isDisabled: disableRipple || isDisabled || isEllipsis
|
117
127
|
});
|
118
128
|
children != null ? children : children = (_a = iconMap[page]) != null ? _a : page;
|
129
|
+
active != null ? active : active = isActive;
|
130
|
+
disabled != null ? disabled : disabled = isDisabled;
|
119
131
|
const css = {
|
120
132
|
alignItems: "center",
|
121
133
|
display: "flex",
|
@@ -133,9 +145,9 @@ var PaginationItem = (0, import_core.forwardRef)(
|
|
133
145
|
ref,
|
134
146
|
...!isEllipsis ? {
|
135
147
|
type: "button",
|
136
|
-
"data-disabled": (0, import_utils2.dataAttr)(
|
137
|
-
"data-selected": (0, import_utils2.dataAttr)(
|
138
|
-
disabled
|
148
|
+
"data-disabled": (0, import_utils2.dataAttr)(disabled),
|
149
|
+
"data-selected": (0, import_utils2.dataAttr)(active),
|
150
|
+
disabled
|
139
151
|
} : {},
|
140
152
|
className: (0, import_utils2.cx)(
|
141
153
|
"ui-pagination__item",
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/pagination-item.tsx","../src/pagination-icon.tsx","../src/use-pagination.ts"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport type { ReactNode } from \"react\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { Ripple, useRipple } from \"@yamada-ui/ripple\"\nimport { cx, dataAttr } from \"@yamada-ui/utils\"\nimport {\n PaginationEllipsisIcon,\n PaginationFirstIcon,\n PaginationLastIcon,\n PaginationNextIcon,\n PaginationPrevIcon,\n} from \"./pagination-icon\"\nimport { usePaginationContext } from \"./use-pagination\"\n\ninterface PaginationItemOptions {\n /**\n * The type of the page or item assigned to the pagination item.\n */\n page: \"ellipsis\" | \"first\" | \"last\" | \"next\" | \"prev\" | number\n /**\n * If `true`, disable ripple effects when pressing a element.\n *\n * @default false\n */\n disableRipple?: boolean\n /**\n * If `true`, the pagination item will be activated.\n *\n * @default false\n */\n isActive?: boolean\n /**\n * If `true`, the pagination item will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n}\n\nexport interface PaginationItemProps\n extends Omit<HTMLUIProps<\"button\">, \"page\">,\n PaginationItemOptions {}\n\nconst iconMap: {\n [key in \"ellipsis\" | \"first\" | \"last\" | \"next\" | \"prev\" | number]: ReactNode\n} = {\n ellipsis: <PaginationEllipsisIcon />,\n first: <PaginationFirstIcon />,\n last: <PaginationLastIcon />,\n next: <PaginationNextIcon />,\n prev: <PaginationPrevIcon />,\n}\n\nexport const PaginationItem = forwardRef<PaginationItemProps, \"button\">(\n (\n { className, children, disableRipple, isActive, isDisabled, page, ...rest },\n ref,\n ) => {\n const styles = usePaginationContext()\n const isEllipsis = page === \"ellipsis\"\n const { onPointerDown, ...rippleProps } = useRipple({\n ...rest,\n isDisabled: disableRipple || isDisabled || isEllipsis,\n })\n\n children ??= iconMap[page] ?? page\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"flex\",\n justifyContent: \"center\",\n overflow: \"hidden\",\n position: \"relative\",\n userSelect: \"none\",\n ...styles.item,\n ...styles[page],\n }\n\n const Component = ui[isEllipsis ? \"span\" : \"button\"]\n\n return (\n <Component\n ref={ref}\n {...(!isEllipsis\n ? {\n type: \"button\",\n \"data-disabled\": dataAttr(isDisabled),\n \"data-selected\": dataAttr(isActive),\n disabled: isDisabled,\n }\n : {})}\n className={cx(\n \"ui-pagination__item\",\n isEllipsis ? \"ui-pagination__item--ellipsis\" : undefined,\n className,\n )}\n tabIndex={!isEllipsis ? 0 : -1}\n __css={css}\n {...rest}\n onPointerDown={onPointerDown}\n >\n {children}\n\n <Ripple {...rippleProps} />\n </Component>\n )\n },\n)\n\nPaginationItem.displayName = \"PaginationItem\"\nPaginationItem.__ui__ = \"PaginationItem\"\n","import type { FC } from \"@yamada-ui/core\"\nimport type { IconProps } from \"@yamada-ui/icon\"\nimport { Icon } from \"@yamada-ui/icon\"\n\nexport const PaginationEllipsisIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n d=\"M2 8c0-.733.6-1.333 1.333-1.333.734 0 1.334.6 1.334 1.333s-.6 1.333-1.334 1.333C2.6 9.333 2 8.733 2 8zm9.333 0c0-.733.6-1.333 1.334-1.333C13.4 6.667 14 7.267 14 8s-.6 1.333-1.333 1.333c-.734 0-1.334-.6-1.334-1.333zM6.667 8c0-.733.6-1.333 1.333-1.333s1.333.6 1.333 1.333S8.733 9.333 8 9.333 6.667 8.733 6.667 8z\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\n\nPaginationEllipsisIcon.displayName = \"PaginationEllipsisIcon\"\nPaginationEllipsisIcon.__ui__ = \"PaginationEllipsisIcon\"\n\nexport const PaginationFirstIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n d=\"M6.85355 3.85355C7.04882 3.65829 7.04882 3.34171 6.85355 3.14645C6.65829 2.95118 6.34171 2.95118 6.14645 3.14645L2.14645 7.14645C1.95118 7.34171 1.95118 7.65829 2.14645 7.85355L6.14645 11.8536C6.34171 12.0488 6.65829 12.0488 6.85355 11.8536C7.04882 11.6583 7.04882 11.3417 6.85355 11.1464L3.20711 7.5L6.85355 3.85355ZM12.8536 3.85355C13.0488 3.65829 13.0488 3.34171 12.8536 3.14645C12.6583 2.95118 12.3417 2.95118 12.1464 3.14645L8.14645 7.14645C7.95118 7.34171 7.95118 7.65829 8.14645 7.85355L12.1464 11.8536C12.3417 12.0488 12.6583 12.0488 12.8536 11.8536C13.0488 11.6583 13.0488 11.3417 12.8536 11.1464L9.20711 7.5L12.8536 3.85355Z\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\n\nPaginationFirstIcon.displayName = \"PaginationFirstIcon\"\nPaginationFirstIcon.__ui__ = \"PaginationFirstIcon\"\n\nexport const PaginationLastIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n d=\"M2.14645 11.1464C1.95118 11.3417 1.95118 11.6583 2.14645 11.8536C2.34171 12.0488 2.65829 12.0488 2.85355 11.8536L6.85355 7.85355C7.04882 7.65829 7.04882 7.34171 6.85355 7.14645L2.85355 3.14645C2.65829 2.95118 2.34171 2.95118 2.14645 3.14645C1.95118 3.34171 1.95118 3.65829 2.14645 3.85355L5.79289 7.5L2.14645 11.1464ZM8.14645 11.1464C7.95118 11.3417 7.95118 11.6583 8.14645 11.8536C8.34171 12.0488 8.65829 12.0488 8.85355 11.8536L12.8536 7.85355C13.0488 7.65829 13.0488 7.34171 12.8536 7.14645L8.85355 3.14645C8.65829 2.95118 8.34171 2.95118 8.14645 3.14645C7.95118 3.34171 7.95118 3.65829 8.14645 3.85355L11.7929 7.5L8.14645 11.1464Z\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\n\nPaginationLastIcon.displayName = \"PaginationLastIcon\"\nPaginationLastIcon.__ui__ = \"PaginationLastIcon\"\n\nexport const PaginationPrevIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n d=\"M7.219 8l3.3 3.3-.943.943L5.333 8l4.243-4.243.943.943-3.3 3.3z\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\n\nPaginationPrevIcon.displayName = \"PaginationPrevIcon\"\nPaginationPrevIcon.__ui__ = \"PaginationPrevIcon\"\n\nexport const PaginationNextIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n d=\"M8.781 8l-3.3-3.3.943-.943L10.667 8l-4.243 4.243-.943-.943 3.3-3.3z\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\n\nPaginationNextIcon.displayName = \"PaginationNextIcon\"\nPaginationNextIcon.__ui__ = \"PaginationNextIcon\"\n","import type { CSSUIObject, Token } from \"@yamada-ui/core\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { createContext } from \"@yamada-ui/utils\"\nimport { useCallback, useMemo } from \"react\"\n\ninterface PaginationContext {\n [key: string]: CSSUIObject | undefined\n}\n\nexport const [PaginationProvider, usePaginationContext] =\n createContext<PaginationContext>({\n name: \"PaginationContext\",\n errorMessage: `usePaginationContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Pagination />\"`,\n })\n\nexport const computedRange = (start: number, end: number) =>\n Array.from({ length: end - start + 1 }, (_, index) => index + start)\n\nexport interface UsePaginationProps {\n /**\n * The total number of pages in pagination.\n */\n total: number\n /**\n * Number of elements visible on the left/right edges.\n *\n * @default 1\n */\n boundaries?: Token<number>\n /**\n * The initial page of the pagination.\n * Should be less than `total` and greater than `1`.\n *\n * @default 1\n */\n defaultPage?: number\n /**\n * If `true`, the pagination all item will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * The page of the pagination.\n * Should be less than `total` and greater than `1`.\n */\n page?: number\n /** Number of siblings displayed on the left/right side of selected page.\n *\n * @default 1\n */\n siblings?: Token<number>\n /**\n * The callback invoked when the page changes.\n */\n onChange?: (page: number) => void\n}\n\nexport const usePagination = ({\n boundaries: _boundaries = 1,\n defaultPage = 1,\n isDisabled = false,\n page,\n siblings: _siblings = 1,\n total,\n onChange: onChangeProp,\n}: UsePaginationProps) => {\n const siblings = useValue(_siblings)\n const boundaries = useValue(_boundaries)\n\n const [currentPage, setCurrentPage] = useControllableState({\n defaultValue: defaultPage,\n value: page,\n onChange: onChangeProp,\n })\n\n const onFirst = useCallback(() => setCurrentPage(1), [setCurrentPage])\n\n const onLast = useCallback(\n () => setCurrentPage(total),\n [setCurrentPage, total],\n )\n\n const onPrev = useCallback(\n () => setCurrentPage((prev) => (prev === 1 ? prev : prev - 1)),\n [setCurrentPage],\n )\n\n const onNext = useCallback(\n () => setCurrentPage((prev) => (prev === total ? prev : prev + 1)),\n [setCurrentPage, total],\n )\n\n const onChange = useCallback(\n (page: number) => setCurrentPage(page),\n [setCurrentPage],\n )\n\n const range = useMemo((): (\"ellipsis\" | number)[] => {\n const minimumTotal = siblings * 2 + 3 + boundaries * 2\n\n if (minimumTotal >= total) return computedRange(1, total)\n\n const prevSiblings = Math.max(currentPage - siblings, boundaries)\n const nextSiblings = Math.min(currentPage + siblings, total - boundaries)\n\n const prevDots = prevSiblings > boundaries + 2\n const nextDots = nextSiblings < total - (boundaries + 1)\n\n if (!prevDots && nextDots) {\n const prevPages = siblings * 2 + boundaries + 2\n\n return [\n ...computedRange(1, prevPages),\n \"ellipsis\",\n ...computedRange(total - (boundaries - 1), total),\n ]\n }\n\n if (prevDots && !nextDots) {\n const nextPages = boundaries + 1 + 2 * siblings\n\n return [\n ...computedRange(1, boundaries),\n \"ellipsis\",\n ...computedRange(total - nextPages, total),\n ]\n }\n\n return [\n ...computedRange(1, boundaries),\n \"ellipsis\",\n ...computedRange(prevSiblings, nextSiblings),\n \"ellipsis\",\n ...computedRange(total - boundaries + 1, total),\n ]\n }, [boundaries, siblings, currentPage, total])\n\n return {\n currentPage,\n isDisabled,\n range,\n total,\n onChange,\n onFirst,\n onLast,\n onNext,\n onPrev,\n }\n}\n\nexport type UsePaginationReturn = ReturnType<typeof usePagination>\n"],"mappings":"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","names":["import_utils","import_jsx_runtime"]}
|
1
|
+
{"version":3,"sources":["../src/pagination-item.tsx","../src/pagination-icon.tsx","../src/use-pagination.ts"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport type { ReactNode } from \"react\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { Ripple, useRipple } from \"@yamada-ui/ripple\"\nimport { cx, dataAttr } from \"@yamada-ui/utils\"\nimport {\n PaginationEllipsisIcon,\n PaginationFirstIcon,\n PaginationLastIcon,\n PaginationNextIcon,\n PaginationPrevIcon,\n} from \"./pagination-icon\"\nimport { usePaginationContext } from \"./use-pagination\"\n\ninterface PaginationItemOptions {\n /**\n * The type of the page or item assigned to the pagination item.\n */\n page: \"ellipsis\" | \"first\" | \"last\" | \"next\" | \"prev\" | number\n /**\n * If `true`, the pagination item will be activated.\n *\n * @default false\n */\n active?: boolean\n /**\n * If `true`, the pagination item will be disabled.\n *\n * @default false\n */\n disabled?: boolean\n /**\n * If `true`, disable ripple effects when pressing a element.\n *\n * @default false\n */\n disableRipple?: boolean\n /**\n * If `true`, the pagination item will be activated.\n *\n * @default false\n *\n * @deprecated Use `active` instead.\n */\n isActive?: boolean\n /**\n * If `true`, the pagination item will be disabled.\n *\n * @default false\n *\n * @deprecated Use `disabled` instead.\n */\n isDisabled?: boolean\n}\n\nexport interface PaginationItemProps\n extends Omit<HTMLUIProps<\"button\">, \"page\">,\n PaginationItemOptions {}\n\nconst iconMap: {\n [key in \"ellipsis\" | \"first\" | \"last\" | \"next\" | \"prev\" | number]: ReactNode\n} = {\n ellipsis: <PaginationEllipsisIcon />,\n first: <PaginationFirstIcon />,\n last: <PaginationLastIcon />,\n next: <PaginationNextIcon />,\n prev: <PaginationPrevIcon />,\n}\n\nexport const PaginationItem = forwardRef<PaginationItemProps, \"button\">(\n (\n {\n className,\n active,\n children,\n disabled,\n disableRipple,\n isActive,\n isDisabled,\n page,\n ...rest\n },\n ref,\n ) => {\n const styles = usePaginationContext()\n const isEllipsis = page === \"ellipsis\"\n const { onPointerDown, ...rippleProps } = useRipple({\n ...rest,\n isDisabled: disableRipple || isDisabled || isEllipsis,\n })\n\n children ??= iconMap[page] ?? page\n active ??= isActive\n disabled ??= isDisabled\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"flex\",\n justifyContent: \"center\",\n overflow: \"hidden\",\n position: \"relative\",\n userSelect: \"none\",\n ...styles.item,\n ...styles[page],\n }\n\n const Component = ui[isEllipsis ? \"span\" : \"button\"]\n\n return (\n <Component\n ref={ref}\n {...(!isEllipsis\n ? {\n type: \"button\",\n \"data-disabled\": dataAttr(disabled),\n \"data-selected\": dataAttr(active),\n disabled,\n }\n : {})}\n className={cx(\n \"ui-pagination__item\",\n isEllipsis ? \"ui-pagination__item--ellipsis\" : undefined,\n className,\n )}\n tabIndex={!isEllipsis ? 0 : -1}\n __css={css}\n {...rest}\n onPointerDown={onPointerDown}\n >\n {children}\n\n <Ripple {...rippleProps} />\n </Component>\n )\n },\n)\n\nPaginationItem.displayName = \"PaginationItem\"\nPaginationItem.__ui__ = \"PaginationItem\"\n","import type { FC } from \"@yamada-ui/core\"\nimport type { IconProps } from \"@yamada-ui/icon\"\nimport { Icon } from \"@yamada-ui/icon\"\n\nexport const PaginationEllipsisIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n d=\"M2 8c0-.733.6-1.333 1.333-1.333.734 0 1.334.6 1.334 1.333s-.6 1.333-1.334 1.333C2.6 9.333 2 8.733 2 8zm9.333 0c0-.733.6-1.333 1.334-1.333C13.4 6.667 14 7.267 14 8s-.6 1.333-1.333 1.333c-.734 0-1.334-.6-1.334-1.333zM6.667 8c0-.733.6-1.333 1.333-1.333s1.333.6 1.333 1.333S8.733 9.333 8 9.333 6.667 8.733 6.667 8z\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\n\nPaginationEllipsisIcon.displayName = \"PaginationEllipsisIcon\"\nPaginationEllipsisIcon.__ui__ = \"PaginationEllipsisIcon\"\n\nexport const PaginationFirstIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n d=\"M6.85355 3.85355C7.04882 3.65829 7.04882 3.34171 6.85355 3.14645C6.65829 2.95118 6.34171 2.95118 6.14645 3.14645L2.14645 7.14645C1.95118 7.34171 1.95118 7.65829 2.14645 7.85355L6.14645 11.8536C6.34171 12.0488 6.65829 12.0488 6.85355 11.8536C7.04882 11.6583 7.04882 11.3417 6.85355 11.1464L3.20711 7.5L6.85355 3.85355ZM12.8536 3.85355C13.0488 3.65829 13.0488 3.34171 12.8536 3.14645C12.6583 2.95118 12.3417 2.95118 12.1464 3.14645L8.14645 7.14645C7.95118 7.34171 7.95118 7.65829 8.14645 7.85355L12.1464 11.8536C12.3417 12.0488 12.6583 12.0488 12.8536 11.8536C13.0488 11.6583 13.0488 11.3417 12.8536 11.1464L9.20711 7.5L12.8536 3.85355Z\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\n\nPaginationFirstIcon.displayName = \"PaginationFirstIcon\"\nPaginationFirstIcon.__ui__ = \"PaginationFirstIcon\"\n\nexport const PaginationLastIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n d=\"M2.14645 11.1464C1.95118 11.3417 1.95118 11.6583 2.14645 11.8536C2.34171 12.0488 2.65829 12.0488 2.85355 11.8536L6.85355 7.85355C7.04882 7.65829 7.04882 7.34171 6.85355 7.14645L2.85355 3.14645C2.65829 2.95118 2.34171 2.95118 2.14645 3.14645C1.95118 3.34171 1.95118 3.65829 2.14645 3.85355L5.79289 7.5L2.14645 11.1464ZM8.14645 11.1464C7.95118 11.3417 7.95118 11.6583 8.14645 11.8536C8.34171 12.0488 8.65829 12.0488 8.85355 11.8536L12.8536 7.85355C13.0488 7.65829 13.0488 7.34171 12.8536 7.14645L8.85355 3.14645C8.65829 2.95118 8.34171 2.95118 8.14645 3.14645C7.95118 3.34171 7.95118 3.65829 8.14645 3.85355L11.7929 7.5L8.14645 11.1464Z\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\n\nPaginationLastIcon.displayName = \"PaginationLastIcon\"\nPaginationLastIcon.__ui__ = \"PaginationLastIcon\"\n\nexport const PaginationPrevIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n d=\"M7.219 8l3.3 3.3-.943.943L5.333 8l4.243-4.243.943.943-3.3 3.3z\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\n\nPaginationPrevIcon.displayName = \"PaginationPrevIcon\"\nPaginationPrevIcon.__ui__ = \"PaginationPrevIcon\"\n\nexport const PaginationNextIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n d=\"M8.781 8l-3.3-3.3.943-.943L10.667 8l-4.243 4.243-.943-.943 3.3-3.3z\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\n\nPaginationNextIcon.displayName = \"PaginationNextIcon\"\nPaginationNextIcon.__ui__ = \"PaginationNextIcon\"\n","import type { CSSUIObject, Token } from \"@yamada-ui/core\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { createContext } from \"@yamada-ui/utils\"\nimport { useCallback, useMemo } from \"react\"\n\ninterface PaginationContext {\n [key: string]: CSSUIObject | undefined\n}\n\nexport const [PaginationProvider, usePaginationContext] =\n createContext<PaginationContext>({\n name: \"PaginationContext\",\n errorMessage: `usePaginationContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Pagination />\"`,\n })\n\nexport const computedRange = (start: number, end: number) =>\n Array.from({ length: end - start + 1 }, (_, index) => index + start)\n\nexport interface UsePaginationProps {\n /**\n * The total number of pages in pagination.\n */\n total: number\n /**\n * Number of elements visible on the left/right edges.\n *\n * @default 1\n */\n boundaries?: Token<number>\n /**\n * The initial page of the pagination.\n * Should be less than `total` and greater than `1`.\n *\n * @default 1\n */\n defaultPage?: number\n /**\n * If `true`, the pagination all item will be disabled.\n *\n * @default false\n */\n disabled?: boolean\n /**\n * If `true`, the pagination all item will be disabled.\n *\n * @default false\n *\n * @deprecated Use `disabled` instead.\n */\n isDisabled?: boolean\n /**\n * The page of the pagination.\n * Should be less than `total` and greater than `1`.\n */\n page?: number\n /** Number of siblings displayed on the left/right side of selected page.\n *\n * @default 1\n */\n siblings?: Token<number>\n /**\n * The callback invoked when the page changes.\n */\n onChange?: (page: number) => void\n}\n\nexport const usePagination = ({\n boundaries: _boundaries = 1,\n defaultPage = 1,\n disabled,\n isDisabled = false,\n page,\n siblings: _siblings = 1,\n total,\n onChange: onChangeProp,\n}: UsePaginationProps) => {\n const siblings = useValue(_siblings)\n const boundaries = useValue(_boundaries)\n\n disabled ??= isDisabled\n\n const [currentPage, setCurrentPage] = useControllableState({\n defaultValue: defaultPage,\n value: page,\n onChange: onChangeProp,\n })\n\n const onFirst = useCallback(() => setCurrentPage(1), [setCurrentPage])\n\n const onLast = useCallback(\n () => setCurrentPage(total),\n [setCurrentPage, total],\n )\n\n const onPrev = useCallback(\n () => setCurrentPage((prev) => (prev === 1 ? prev : prev - 1)),\n [setCurrentPage],\n )\n\n const onNext = useCallback(\n () => setCurrentPage((prev) => (prev === total ? prev : prev + 1)),\n [setCurrentPage, total],\n )\n\n const onChange = useCallback(\n (page: number) => setCurrentPage(page),\n [setCurrentPage],\n )\n\n const range = useMemo((): (\"ellipsis\" | number)[] => {\n const minimumTotal = siblings * 2 + 3 + boundaries * 2\n\n if (minimumTotal >= total) return computedRange(1, total)\n\n const prevSiblings = Math.max(currentPage - siblings, boundaries)\n const nextSiblings = Math.min(currentPage + siblings, total - boundaries)\n\n const prevDots = prevSiblings > boundaries + 2\n const nextDots = nextSiblings < total - (boundaries + 1)\n\n if (!prevDots && nextDots) {\n const prevPages = siblings * 2 + boundaries + 2\n\n return [\n ...computedRange(1, prevPages),\n \"ellipsis\",\n ...computedRange(total - (boundaries - 1), total),\n ]\n }\n\n if (prevDots && !nextDots) {\n const nextPages = boundaries + 1 + 2 * siblings\n\n return [\n ...computedRange(1, boundaries),\n \"ellipsis\",\n ...computedRange(total - nextPages, total),\n ]\n }\n\n return [\n ...computedRange(1, boundaries),\n \"ellipsis\",\n ...computedRange(prevSiblings, nextSiblings),\n \"ellipsis\",\n ...computedRange(total - boundaries + 1, total),\n ]\n }, [boundaries, siblings, currentPage, total])\n\n return {\n currentPage,\n disabled,\n range,\n total,\n onChange,\n onFirst,\n onLast,\n onNext,\n onPrev,\n }\n}\n\nexport type UsePaginationReturn = ReturnType<typeof usePagination>\n"],"mappings":"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","names":["import_utils","import_jsx_runtime"]}
|
package/dist/pagination-item.mjs
CHANGED
package/dist/pagination.js
CHANGED
@@ -106,6 +106,7 @@ var computedRange = (start, end) => Array.from({ length: end - start + 1 }, (_,
|
|
106
106
|
var usePagination = ({
|
107
107
|
boundaries: _boundaries = 1,
|
108
108
|
defaultPage = 1,
|
109
|
+
disabled,
|
109
110
|
isDisabled = false,
|
110
111
|
page,
|
111
112
|
siblings: _siblings = 1,
|
@@ -114,6 +115,7 @@ var usePagination = ({
|
|
114
115
|
}) => {
|
115
116
|
const siblings = (0, import_use_value.useValue)(_siblings);
|
116
117
|
const boundaries = (0, import_use_value.useValue)(_boundaries);
|
118
|
+
disabled != null ? disabled : disabled = isDisabled;
|
117
119
|
const [currentPage, setCurrentPage] = (0, import_use_controllable_state.useControllableState)({
|
118
120
|
defaultValue: defaultPage,
|
119
121
|
value: page,
|
@@ -169,7 +171,7 @@ var usePagination = ({
|
|
169
171
|
}, [boundaries, siblings, currentPage, total]);
|
170
172
|
return {
|
171
173
|
currentPage,
|
172
|
-
|
174
|
+
disabled,
|
173
175
|
range,
|
174
176
|
total,
|
175
177
|
onChange,
|
@@ -190,7 +192,17 @@ var iconMap = {
|
|
190
192
|
prev: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PaginationPrevIcon, {})
|
191
193
|
};
|
192
194
|
var PaginationItem = (0, import_core.forwardRef)(
|
193
|
-
({
|
195
|
+
({
|
196
|
+
className,
|
197
|
+
active,
|
198
|
+
children,
|
199
|
+
disabled,
|
200
|
+
disableRipple,
|
201
|
+
isActive,
|
202
|
+
isDisabled,
|
203
|
+
page,
|
204
|
+
...rest
|
205
|
+
}, ref) => {
|
194
206
|
var _a;
|
195
207
|
const styles = usePaginationContext();
|
196
208
|
const isEllipsis = page === "ellipsis";
|
@@ -199,6 +211,8 @@ var PaginationItem = (0, import_core.forwardRef)(
|
|
199
211
|
isDisabled: disableRipple || isDisabled || isEllipsis
|
200
212
|
});
|
201
213
|
children != null ? children : children = (_a = iconMap[page]) != null ? _a : page;
|
214
|
+
active != null ? active : active = isActive;
|
215
|
+
disabled != null ? disabled : disabled = isDisabled;
|
202
216
|
const css = {
|
203
217
|
alignItems: "center",
|
204
218
|
display: "flex",
|
@@ -216,9 +230,9 @@ var PaginationItem = (0, import_core.forwardRef)(
|
|
216
230
|
ref,
|
217
231
|
...!isEllipsis ? {
|
218
232
|
type: "button",
|
219
|
-
"data-disabled": (0, import_utils2.dataAttr)(
|
220
|
-
"data-selected": (0, import_utils2.dataAttr)(
|
221
|
-
disabled
|
233
|
+
"data-disabled": (0, import_utils2.dataAttr)(disabled),
|
234
|
+
"data-selected": (0, import_utils2.dataAttr)(active),
|
235
|
+
disabled
|
222
236
|
} : {},
|
223
237
|
className: (0, import_utils2.cx)(
|
224
238
|
"ui-pagination__item",
|
@@ -244,11 +258,12 @@ PaginationItem.__ui__ = "PaginationItem";
|
|
244
258
|
var import_jsx_runtime3 = require("react/jsx-runtime");
|
245
259
|
var Pagination = (0, import_core2.forwardRef)((props, ref) => {
|
246
260
|
const [styles, mergedProps] = (0, import_core2.useComponentMultiStyle)("Pagination", props);
|
247
|
-
|
261
|
+
let {
|
248
262
|
className,
|
249
263
|
boundaries,
|
250
264
|
component: Component = PaginationItem,
|
251
265
|
defaultPage,
|
266
|
+
disabled,
|
252
267
|
isDisabled,
|
253
268
|
page,
|
254
269
|
siblings,
|
@@ -268,10 +283,11 @@ var Pagination = (0, import_core2.forwardRef)((props, ref) => {
|
|
268
283
|
} = (0, import_core2.omitThemeProps)(mergedProps);
|
269
284
|
const withControls = (0, import_use_value2.useValue)(_withControls);
|
270
285
|
const withEdges = (0, import_use_value2.useValue)(_withEdges);
|
286
|
+
disabled != null ? disabled : disabled = isDisabled;
|
271
287
|
const { currentPage, range, onChange, onFirst, onLast, onNext, onPrev } = usePagination({
|
272
288
|
boundaries,
|
273
289
|
defaultPage,
|
274
|
-
|
290
|
+
disabled,
|
275
291
|
page,
|
276
292
|
siblings,
|
277
293
|
total,
|
@@ -282,8 +298,8 @@ var Pagination = (0, import_core2.forwardRef)((props, ref) => {
|
|
282
298
|
Component,
|
283
299
|
{
|
284
300
|
"aria-label": page2 !== "ellipsis" ? `Go to page ${page2}` : void 0,
|
285
|
-
|
286
|
-
|
301
|
+
active: currentPage === page2,
|
302
|
+
disabled,
|
287
303
|
...itemProps,
|
288
304
|
page: page2,
|
289
305
|
onClick: (0, import_utils3.handlerAll)(
|
@@ -292,7 +308,7 @@ var Pagination = (0, import_core2.forwardRef)((props, ref) => {
|
|
292
308
|
)
|
293
309
|
}
|
294
310
|
) }, key)),
|
295
|
-
[Component, currentPage,
|
311
|
+
[Component, currentPage, disabled, onChange, range, itemProps]
|
296
312
|
);
|
297
313
|
const css = {
|
298
314
|
...styles.container
|
@@ -322,7 +338,7 @@ var Pagination = (0, import_core2.forwardRef)((props, ref) => {
|
|
322
338
|
{
|
323
339
|
className: "ui-pagination__item--first",
|
324
340
|
"aria-label": "Go to first page",
|
325
|
-
|
341
|
+
disabled: disabled || currentPage === 1,
|
326
342
|
page: "first",
|
327
343
|
...edgeProps,
|
328
344
|
...edgeFirstProps,
|
@@ -338,7 +354,7 @@ var Pagination = (0, import_core2.forwardRef)((props, ref) => {
|
|
338
354
|
{
|
339
355
|
className: "ui-pagination__item--prev",
|
340
356
|
"aria-label": "Go to previous page",
|
341
|
-
|
357
|
+
disabled: disabled || currentPage === 1,
|
342
358
|
page: "prev",
|
343
359
|
...controlProps,
|
344
360
|
...controlPrevProps,
|
@@ -355,7 +371,7 @@ var Pagination = (0, import_core2.forwardRef)((props, ref) => {
|
|
355
371
|
{
|
356
372
|
className: "ui-pagination__item--next",
|
357
373
|
"aria-label": "Go to next page",
|
358
|
-
|
374
|
+
disabled: disabled || currentPage === total,
|
359
375
|
page: "next",
|
360
376
|
...controlProps,
|
361
377
|
...controlNextProps,
|
@@ -371,7 +387,7 @@ var Pagination = (0, import_core2.forwardRef)((props, ref) => {
|
|
371
387
|
{
|
372
388
|
className: "ui-pagination__item--last",
|
373
389
|
"aria-label": "Go to last page",
|
374
|
-
|
390
|
+
disabled: disabled || currentPage === total,
|
375
391
|
page: "last",
|
376
392
|
...edgeProps,
|
377
393
|
...edgeLastProps,
|
package/dist/pagination.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/pagination.tsx","../src/pagination-item.tsx","../src/pagination-icon.tsx","../src/use-pagination.ts"],"sourcesContent":["import type {\n CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n Token,\n} from \"@yamada-ui/core\"\nimport type { FC } from \"react\"\nimport type { PaginationItemProps } from \"./pagination-item\"\nimport type { UsePaginationProps } from \"./use-pagination\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { cx, dataAttr, handlerAll } from \"@yamada-ui/utils\"\nimport { useMemo } from \"react\"\nimport { PaginationItem } from \"./pagination-item\"\nimport { PaginationProvider, usePagination } from \"./use-pagination\"\n\ninterface PaginationOptions {\n /**\n * The pagination button component to use.\n */\n component?: FC<PaginationItemProps>\n /**\n * If `true`, display the control buttons.\n *\n * @default true\n */\n withControls?: Token<boolean>\n /**\n * If `true`, display the edge buttons.\n *\n * @default false\n */\n withEdges?: Token<boolean>\n /**\n * Props for container element.\n */\n containerProps?: HTMLUIProps<\"nav\">\n /**\n * Props for next of the control button element.\n */\n controlNextProps?: Omit<PaginationItemProps, \"page\">\n /**\n * Props for previous of the control button element.\n */\n controlPrevProps?: Omit<PaginationItemProps, \"page\">\n /**\n * Props for control button element.\n */\n controlProps?: Omit<PaginationItemProps, \"page\">\n /**\n * Props for first of the edge button element.\n */\n edgeFirstProps?: Omit<PaginationItemProps, \"page\">\n /**\n * Props for last of the edge button element.\n */\n edgeLastProps?: Omit<PaginationItemProps, \"page\">\n /**\n * Props for edge button element.\n */\n edgeProps?: Omit<PaginationItemProps, \"page\">\n /**\n * Props for button element.\n */\n itemProps?: Omit<PaginationItemProps, \"page\">\n}\n\nexport interface PaginationProps\n extends Omit<HTMLUIProps<\"ul\">, \"children\" | \"onChange\" | \"page\">,\n ThemeProps<\"Pagination\">,\n UsePaginationProps,\n PaginationOptions {}\n\n/**\n * `Pagination` is a component for managing the pagination and navigation of content.\n *\n * @see Docs https://yamada-ui.com/components/navigation/pagination\n */\nexport const Pagination = forwardRef<PaginationProps, \"ul\">((props, ref) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"Pagination\", props)\n const {\n className,\n boundaries,\n component: Component = PaginationItem,\n defaultPage,\n isDisabled,\n page,\n siblings,\n total,\n withControls: _withControls = true,\n withEdges: _withEdges = false,\n containerProps,\n controlNextProps,\n controlPrevProps,\n controlProps,\n edgeFirstProps,\n edgeLastProps,\n edgeProps,\n itemProps,\n onChange: onChangeProp,\n ...rest\n } = omitThemeProps(mergedProps)\n\n const withControls = useValue(_withControls)\n const withEdges = useValue(_withEdges)\n\n const { currentPage, range, onChange, onFirst, onLast, onNext, onPrev } =\n usePagination({\n boundaries,\n defaultPage,\n isDisabled,\n page,\n siblings,\n total,\n onChange: onChangeProp,\n })\n\n const children = useMemo(\n () =>\n range.map((page, key) => (\n <ui.li key={key}>\n <Component\n aria-label={page !== \"ellipsis\" ? `Go to page ${page}` : undefined}\n isActive={currentPage === page}\n isDisabled={isDisabled}\n {...itemProps}\n page={page}\n onClick={handlerAll(\n itemProps?.onClick,\n page !== \"ellipsis\" ? () => onChange(page) : undefined,\n )}\n />\n </ui.li>\n )),\n [Component, currentPage, isDisabled, onChange, range, itemProps],\n )\n\n const css: CSSUIObject = {\n ...styles.container,\n }\n\n return (\n <PaginationProvider value={styles}>\n <ui.nav\n ref={ref}\n className={cx(\"ui-pagination\", className)}\n data-disabled={dataAttr(isDisabled)}\n __css={css}\n {...containerProps}\n >\n <ui.ul\n className=\"ui-pagination-inner\"\n data-disabled={dataAttr(isDisabled)}\n __css={{\n alignItems: \"center\",\n display: \"flex\",\n ...styles.inner,\n }}\n {...rest}\n >\n {withEdges ? (\n <ui.li>\n <Component\n className=\"ui-pagination__item--first\"\n aria-label=\"Go to first page\"\n isDisabled={isDisabled || currentPage === 1}\n page=\"first\"\n {...edgeProps}\n {...edgeFirstProps}\n onClick={handlerAll(\n edgeProps?.onClick,\n edgeFirstProps?.onClick,\n onFirst,\n )}\n />\n </ui.li>\n ) : null}\n\n {withControls ? (\n <ui.li>\n <Component\n className=\"ui-pagination__item--prev\"\n aria-label=\"Go to previous page\"\n isDisabled={isDisabled || currentPage === 1}\n page=\"prev\"\n {...controlProps}\n {...controlPrevProps}\n onClick={handlerAll(\n controlProps?.onClick,\n controlPrevProps?.onClick,\n onPrev,\n )}\n />\n </ui.li>\n ) : null}\n\n {children}\n\n {withControls ? (\n <ui.li>\n <Component\n className=\"ui-pagination__item--next\"\n aria-label=\"Go to next page\"\n isDisabled={isDisabled || currentPage === total}\n page=\"next\"\n {...controlProps}\n {...controlNextProps}\n onClick={handlerAll(\n controlProps?.onClick,\n controlNextProps?.onClick,\n onNext,\n )}\n />\n </ui.li>\n ) : null}\n\n {withEdges ? (\n <ui.li>\n <Component\n className=\"ui-pagination__item--last\"\n aria-label=\"Go to last page\"\n isDisabled={isDisabled || currentPage === total}\n page=\"last\"\n {...edgeProps}\n {...edgeLastProps}\n onClick={handlerAll(\n edgeProps?.onClick,\n edgeLastProps?.onClick,\n onLast,\n )}\n />\n </ui.li>\n ) : null}\n </ui.ul>\n </ui.nav>\n </PaginationProvider>\n )\n})\n\nPagination.displayName = \"Pagination\"\nPagination.__ui__ = \"Pagination\"\n","import type { CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport type { ReactNode } from \"react\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { Ripple, useRipple } from \"@yamada-ui/ripple\"\nimport { cx, dataAttr } from \"@yamada-ui/utils\"\nimport {\n PaginationEllipsisIcon,\n PaginationFirstIcon,\n PaginationLastIcon,\n PaginationNextIcon,\n PaginationPrevIcon,\n} from \"./pagination-icon\"\nimport { usePaginationContext } from \"./use-pagination\"\n\ninterface PaginationItemOptions {\n /**\n * The type of the page or item assigned to the pagination item.\n */\n page: \"ellipsis\" | \"first\" | \"last\" | \"next\" | \"prev\" | number\n /**\n * If `true`, disable ripple effects when pressing a element.\n *\n * @default false\n */\n disableRipple?: boolean\n /**\n * If `true`, the pagination item will be activated.\n *\n * @default false\n */\n isActive?: boolean\n /**\n * If `true`, the pagination item will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n}\n\nexport interface PaginationItemProps\n extends Omit<HTMLUIProps<\"button\">, \"page\">,\n PaginationItemOptions {}\n\nconst iconMap: {\n [key in \"ellipsis\" | \"first\" | \"last\" | \"next\" | \"prev\" | number]: ReactNode\n} = {\n ellipsis: <PaginationEllipsisIcon />,\n first: <PaginationFirstIcon />,\n last: <PaginationLastIcon />,\n next: <PaginationNextIcon />,\n prev: <PaginationPrevIcon />,\n}\n\nexport const PaginationItem = forwardRef<PaginationItemProps, \"button\">(\n (\n { className, children, disableRipple, isActive, isDisabled, page, ...rest },\n ref,\n ) => {\n const styles = usePaginationContext()\n const isEllipsis = page === \"ellipsis\"\n const { onPointerDown, ...rippleProps } = useRipple({\n ...rest,\n isDisabled: disableRipple || isDisabled || isEllipsis,\n })\n\n children ??= iconMap[page] ?? page\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"flex\",\n justifyContent: \"center\",\n overflow: \"hidden\",\n position: \"relative\",\n userSelect: \"none\",\n ...styles.item,\n ...styles[page],\n }\n\n const Component = ui[isEllipsis ? \"span\" : \"button\"]\n\n return (\n <Component\n ref={ref}\n {...(!isEllipsis\n ? {\n type: \"button\",\n \"data-disabled\": dataAttr(isDisabled),\n \"data-selected\": dataAttr(isActive),\n disabled: isDisabled,\n }\n : {})}\n className={cx(\n \"ui-pagination__item\",\n isEllipsis ? \"ui-pagination__item--ellipsis\" : undefined,\n className,\n )}\n tabIndex={!isEllipsis ? 0 : -1}\n __css={css}\n {...rest}\n onPointerDown={onPointerDown}\n >\n {children}\n\n <Ripple {...rippleProps} />\n </Component>\n )\n },\n)\n\nPaginationItem.displayName = \"PaginationItem\"\nPaginationItem.__ui__ = \"PaginationItem\"\n","import type { FC } from \"@yamada-ui/core\"\nimport type { IconProps } from \"@yamada-ui/icon\"\nimport { Icon } from \"@yamada-ui/icon\"\n\nexport const PaginationEllipsisIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n d=\"M2 8c0-.733.6-1.333 1.333-1.333.734 0 1.334.6 1.334 1.333s-.6 1.333-1.334 1.333C2.6 9.333 2 8.733 2 8zm9.333 0c0-.733.6-1.333 1.334-1.333C13.4 6.667 14 7.267 14 8s-.6 1.333-1.333 1.333c-.734 0-1.334-.6-1.334-1.333zM6.667 8c0-.733.6-1.333 1.333-1.333s1.333.6 1.333 1.333S8.733 9.333 8 9.333 6.667 8.733 6.667 8z\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\n\nPaginationEllipsisIcon.displayName = \"PaginationEllipsisIcon\"\nPaginationEllipsisIcon.__ui__ = \"PaginationEllipsisIcon\"\n\nexport const PaginationFirstIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n d=\"M6.85355 3.85355C7.04882 3.65829 7.04882 3.34171 6.85355 3.14645C6.65829 2.95118 6.34171 2.95118 6.14645 3.14645L2.14645 7.14645C1.95118 7.34171 1.95118 7.65829 2.14645 7.85355L6.14645 11.8536C6.34171 12.0488 6.65829 12.0488 6.85355 11.8536C7.04882 11.6583 7.04882 11.3417 6.85355 11.1464L3.20711 7.5L6.85355 3.85355ZM12.8536 3.85355C13.0488 3.65829 13.0488 3.34171 12.8536 3.14645C12.6583 2.95118 12.3417 2.95118 12.1464 3.14645L8.14645 7.14645C7.95118 7.34171 7.95118 7.65829 8.14645 7.85355L12.1464 11.8536C12.3417 12.0488 12.6583 12.0488 12.8536 11.8536C13.0488 11.6583 13.0488 11.3417 12.8536 11.1464L9.20711 7.5L12.8536 3.85355Z\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\n\nPaginationFirstIcon.displayName = \"PaginationFirstIcon\"\nPaginationFirstIcon.__ui__ = \"PaginationFirstIcon\"\n\nexport const PaginationLastIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n d=\"M2.14645 11.1464C1.95118 11.3417 1.95118 11.6583 2.14645 11.8536C2.34171 12.0488 2.65829 12.0488 2.85355 11.8536L6.85355 7.85355C7.04882 7.65829 7.04882 7.34171 6.85355 7.14645L2.85355 3.14645C2.65829 2.95118 2.34171 2.95118 2.14645 3.14645C1.95118 3.34171 1.95118 3.65829 2.14645 3.85355L5.79289 7.5L2.14645 11.1464ZM8.14645 11.1464C7.95118 11.3417 7.95118 11.6583 8.14645 11.8536C8.34171 12.0488 8.65829 12.0488 8.85355 11.8536L12.8536 7.85355C13.0488 7.65829 13.0488 7.34171 12.8536 7.14645L8.85355 3.14645C8.65829 2.95118 8.34171 2.95118 8.14645 3.14645C7.95118 3.34171 7.95118 3.65829 8.14645 3.85355L11.7929 7.5L8.14645 11.1464Z\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\n\nPaginationLastIcon.displayName = \"PaginationLastIcon\"\nPaginationLastIcon.__ui__ = \"PaginationLastIcon\"\n\nexport const PaginationPrevIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n d=\"M7.219 8l3.3 3.3-.943.943L5.333 8l4.243-4.243.943.943-3.3 3.3z\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\n\nPaginationPrevIcon.displayName = \"PaginationPrevIcon\"\nPaginationPrevIcon.__ui__ = \"PaginationPrevIcon\"\n\nexport const PaginationNextIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n d=\"M8.781 8l-3.3-3.3.943-.943L10.667 8l-4.243 4.243-.943-.943 3.3-3.3z\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\n\nPaginationNextIcon.displayName = \"PaginationNextIcon\"\nPaginationNextIcon.__ui__ = \"PaginationNextIcon\"\n","import type { CSSUIObject, Token } from \"@yamada-ui/core\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { createContext } from \"@yamada-ui/utils\"\nimport { useCallback, useMemo } from \"react\"\n\ninterface PaginationContext {\n [key: string]: CSSUIObject | undefined\n}\n\nexport const [PaginationProvider, usePaginationContext] =\n createContext<PaginationContext>({\n name: \"PaginationContext\",\n errorMessage: `usePaginationContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Pagination />\"`,\n })\n\nexport const computedRange = (start: number, end: number) =>\n Array.from({ length: end - start + 1 }, (_, index) => index + start)\n\nexport interface UsePaginationProps {\n /**\n * The total number of pages in pagination.\n */\n total: number\n /**\n * Number of elements visible on the left/right edges.\n *\n * @default 1\n */\n boundaries?: Token<number>\n /**\n * The initial page of the pagination.\n * Should be less than `total` and greater than `1`.\n *\n * @default 1\n */\n defaultPage?: number\n /**\n * If `true`, the pagination all item will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * The page of the pagination.\n * Should be less than `total` and greater than `1`.\n */\n page?: number\n /** Number of siblings displayed on the left/right side of selected page.\n *\n * @default 1\n */\n siblings?: Token<number>\n /**\n * The callback invoked when the page changes.\n */\n onChange?: (page: number) => void\n}\n\nexport const usePagination = ({\n boundaries: _boundaries = 1,\n defaultPage = 1,\n isDisabled = false,\n page,\n siblings: _siblings = 1,\n total,\n onChange: onChangeProp,\n}: UsePaginationProps) => {\n const siblings = useValue(_siblings)\n const boundaries = useValue(_boundaries)\n\n const [currentPage, setCurrentPage] = useControllableState({\n defaultValue: defaultPage,\n value: page,\n onChange: onChangeProp,\n })\n\n const onFirst = useCallback(() => setCurrentPage(1), [setCurrentPage])\n\n const onLast = useCallback(\n () => setCurrentPage(total),\n [setCurrentPage, total],\n )\n\n const onPrev = useCallback(\n () => setCurrentPage((prev) => (prev === 1 ? prev : prev - 1)),\n [setCurrentPage],\n )\n\n const onNext = useCallback(\n () => setCurrentPage((prev) => (prev === total ? prev : prev + 1)),\n [setCurrentPage, total],\n )\n\n const onChange = useCallback(\n (page: number) => setCurrentPage(page),\n [setCurrentPage],\n )\n\n const range = useMemo((): (\"ellipsis\" | number)[] => {\n const minimumTotal = siblings * 2 + 3 + boundaries * 2\n\n if (minimumTotal >= total) return computedRange(1, total)\n\n const prevSiblings = Math.max(currentPage - siblings, boundaries)\n const nextSiblings = Math.min(currentPage + siblings, total - boundaries)\n\n const prevDots = prevSiblings > boundaries + 2\n const nextDots = nextSiblings < total - (boundaries + 1)\n\n if (!prevDots && nextDots) {\n const prevPages = siblings * 2 + boundaries + 2\n\n return [\n ...computedRange(1, prevPages),\n \"ellipsis\",\n ...computedRange(total - (boundaries - 1), total),\n ]\n }\n\n if (prevDots && !nextDots) {\n const nextPages = boundaries + 1 + 2 * siblings\n\n return [\n ...computedRange(1, boundaries),\n \"ellipsis\",\n ...computedRange(total - nextPages, total),\n ]\n }\n\n return [\n ...computedRange(1, boundaries),\n \"ellipsis\",\n ...computedRange(prevSiblings, nextSiblings),\n \"ellipsis\",\n ...computedRange(total - boundaries + 1, total),\n ]\n }, [boundaries, siblings, currentPage, total])\n\n return {\n currentPage,\n isDisabled,\n range,\n total,\n onChange,\n onFirst,\n onLast,\n onNext,\n onPrev,\n }\n}\n\nexport type UsePaginationReturn = ReturnType<typeof usePagination>\n"],"mappings":"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","names":["import_core","import_use_value","import_utils","import_react","import_utils","page","import_jsx_runtime","import_jsx_runtime","page"]}
|
1
|
+
{"version":3,"sources":["../src/pagination.tsx","../src/pagination-item.tsx","../src/pagination-icon.tsx","../src/use-pagination.ts"],"sourcesContent":["import type {\n CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n Token,\n} from \"@yamada-ui/core\"\nimport type { FC } from \"react\"\nimport type { PaginationItemProps } from \"./pagination-item\"\nimport type { UsePaginationProps } from \"./use-pagination\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { cx, dataAttr, handlerAll } from \"@yamada-ui/utils\"\nimport { useMemo } from \"react\"\nimport { PaginationItem } from \"./pagination-item\"\nimport { PaginationProvider, usePagination } from \"./use-pagination\"\n\ninterface PaginationOptions {\n /**\n * The pagination button component to use.\n */\n component?: FC<PaginationItemProps>\n /**\n * If `true`, display the control buttons.\n *\n * @default true\n */\n withControls?: Token<boolean>\n /**\n * If `true`, display the edge buttons.\n *\n * @default false\n */\n withEdges?: Token<boolean>\n /**\n * Props for container element.\n */\n containerProps?: HTMLUIProps<\"nav\">\n /**\n * Props for next of the control button element.\n */\n controlNextProps?: Omit<PaginationItemProps, \"page\">\n /**\n * Props for previous of the control button element.\n */\n controlPrevProps?: Omit<PaginationItemProps, \"page\">\n /**\n * Props for control button element.\n */\n controlProps?: Omit<PaginationItemProps, \"page\">\n /**\n * Props for first of the edge button element.\n */\n edgeFirstProps?: Omit<PaginationItemProps, \"page\">\n /**\n * Props for last of the edge button element.\n */\n edgeLastProps?: Omit<PaginationItemProps, \"page\">\n /**\n * Props for edge button element.\n */\n edgeProps?: Omit<PaginationItemProps, \"page\">\n /**\n * Props for button element.\n */\n itemProps?: Omit<PaginationItemProps, \"page\">\n}\n\nexport interface PaginationProps\n extends Omit<HTMLUIProps<\"ul\">, \"children\" | \"onChange\" | \"page\">,\n ThemeProps<\"Pagination\">,\n UsePaginationProps,\n PaginationOptions {}\n\n/**\n * `Pagination` is a component for managing the pagination and navigation of content.\n *\n * @see Docs https://yamada-ui.com/components/navigation/pagination\n */\nexport const Pagination = forwardRef<PaginationProps, \"ul\">((props, ref) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"Pagination\", props)\n let {\n className,\n boundaries,\n component: Component = PaginationItem,\n defaultPage,\n disabled,\n isDisabled,\n page,\n siblings,\n total,\n withControls: _withControls = true,\n withEdges: _withEdges = false,\n containerProps,\n controlNextProps,\n controlPrevProps,\n controlProps,\n edgeFirstProps,\n edgeLastProps,\n edgeProps,\n itemProps,\n onChange: onChangeProp,\n ...rest\n } = omitThemeProps(mergedProps)\n\n const withControls = useValue(_withControls)\n const withEdges = useValue(_withEdges)\n\n disabled ??= isDisabled\n\n const { currentPage, range, onChange, onFirst, onLast, onNext, onPrev } =\n usePagination({\n boundaries,\n defaultPage,\n disabled,\n page,\n siblings,\n total,\n onChange: onChangeProp,\n })\n\n const children = useMemo(\n () =>\n range.map((page, key) => (\n <ui.li key={key}>\n <Component\n aria-label={page !== \"ellipsis\" ? `Go to page ${page}` : undefined}\n active={currentPage === page}\n disabled={disabled}\n {...itemProps}\n page={page}\n onClick={handlerAll(\n itemProps?.onClick,\n page !== \"ellipsis\" ? () => onChange(page) : undefined,\n )}\n />\n </ui.li>\n )),\n [Component, currentPage, disabled, onChange, range, itemProps],\n )\n\n const css: CSSUIObject = {\n ...styles.container,\n }\n\n return (\n <PaginationProvider value={styles}>\n <ui.nav\n ref={ref}\n className={cx(\"ui-pagination\", className)}\n data-disabled={dataAttr(isDisabled)}\n __css={css}\n {...containerProps}\n >\n <ui.ul\n className=\"ui-pagination-inner\"\n data-disabled={dataAttr(isDisabled)}\n __css={{\n alignItems: \"center\",\n display: \"flex\",\n ...styles.inner,\n }}\n {...rest}\n >\n {withEdges ? (\n <ui.li>\n <Component\n className=\"ui-pagination__item--first\"\n aria-label=\"Go to first page\"\n disabled={disabled || currentPage === 1}\n page=\"first\"\n {...edgeProps}\n {...edgeFirstProps}\n onClick={handlerAll(\n edgeProps?.onClick,\n edgeFirstProps?.onClick,\n onFirst,\n )}\n />\n </ui.li>\n ) : null}\n\n {withControls ? (\n <ui.li>\n <Component\n className=\"ui-pagination__item--prev\"\n aria-label=\"Go to previous page\"\n disabled={disabled || currentPage === 1}\n page=\"prev\"\n {...controlProps}\n {...controlPrevProps}\n onClick={handlerAll(\n controlProps?.onClick,\n controlPrevProps?.onClick,\n onPrev,\n )}\n />\n </ui.li>\n ) : null}\n\n {children}\n\n {withControls ? (\n <ui.li>\n <Component\n className=\"ui-pagination__item--next\"\n aria-label=\"Go to next page\"\n disabled={disabled || currentPage === total}\n page=\"next\"\n {...controlProps}\n {...controlNextProps}\n onClick={handlerAll(\n controlProps?.onClick,\n controlNextProps?.onClick,\n onNext,\n )}\n />\n </ui.li>\n ) : null}\n\n {withEdges ? (\n <ui.li>\n <Component\n className=\"ui-pagination__item--last\"\n aria-label=\"Go to last page\"\n disabled={disabled || currentPage === total}\n page=\"last\"\n {...edgeProps}\n {...edgeLastProps}\n onClick={handlerAll(\n edgeProps?.onClick,\n edgeLastProps?.onClick,\n onLast,\n )}\n />\n </ui.li>\n ) : null}\n </ui.ul>\n </ui.nav>\n </PaginationProvider>\n )\n})\n\nPagination.displayName = \"Pagination\"\nPagination.__ui__ = \"Pagination\"\n","import type { CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport type { ReactNode } from \"react\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { Ripple, useRipple } from \"@yamada-ui/ripple\"\nimport { cx, dataAttr } from \"@yamada-ui/utils\"\nimport {\n PaginationEllipsisIcon,\n PaginationFirstIcon,\n PaginationLastIcon,\n PaginationNextIcon,\n PaginationPrevIcon,\n} from \"./pagination-icon\"\nimport { usePaginationContext } from \"./use-pagination\"\n\ninterface PaginationItemOptions {\n /**\n * The type of the page or item assigned to the pagination item.\n */\n page: \"ellipsis\" | \"first\" | \"last\" | \"next\" | \"prev\" | number\n /**\n * If `true`, the pagination item will be activated.\n *\n * @default false\n */\n active?: boolean\n /**\n * If `true`, the pagination item will be disabled.\n *\n * @default false\n */\n disabled?: boolean\n /**\n * If `true`, disable ripple effects when pressing a element.\n *\n * @default false\n */\n disableRipple?: boolean\n /**\n * If `true`, the pagination item will be activated.\n *\n * @default false\n *\n * @deprecated Use `active` instead.\n */\n isActive?: boolean\n /**\n * If `true`, the pagination item will be disabled.\n *\n * @default false\n *\n * @deprecated Use `disabled` instead.\n */\n isDisabled?: boolean\n}\n\nexport interface PaginationItemProps\n extends Omit<HTMLUIProps<\"button\">, \"page\">,\n PaginationItemOptions {}\n\nconst iconMap: {\n [key in \"ellipsis\" | \"first\" | \"last\" | \"next\" | \"prev\" | number]: ReactNode\n} = {\n ellipsis: <PaginationEllipsisIcon />,\n first: <PaginationFirstIcon />,\n last: <PaginationLastIcon />,\n next: <PaginationNextIcon />,\n prev: <PaginationPrevIcon />,\n}\n\nexport const PaginationItem = forwardRef<PaginationItemProps, \"button\">(\n (\n {\n className,\n active,\n children,\n disabled,\n disableRipple,\n isActive,\n isDisabled,\n page,\n ...rest\n },\n ref,\n ) => {\n const styles = usePaginationContext()\n const isEllipsis = page === \"ellipsis\"\n const { onPointerDown, ...rippleProps } = useRipple({\n ...rest,\n isDisabled: disableRipple || isDisabled || isEllipsis,\n })\n\n children ??= iconMap[page] ?? page\n active ??= isActive\n disabled ??= isDisabled\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"flex\",\n justifyContent: \"center\",\n overflow: \"hidden\",\n position: \"relative\",\n userSelect: \"none\",\n ...styles.item,\n ...styles[page],\n }\n\n const Component = ui[isEllipsis ? \"span\" : \"button\"]\n\n return (\n <Component\n ref={ref}\n {...(!isEllipsis\n ? {\n type: \"button\",\n \"data-disabled\": dataAttr(disabled),\n \"data-selected\": dataAttr(active),\n disabled,\n }\n : {})}\n className={cx(\n \"ui-pagination__item\",\n isEllipsis ? \"ui-pagination__item--ellipsis\" : undefined,\n className,\n )}\n tabIndex={!isEllipsis ? 0 : -1}\n __css={css}\n {...rest}\n onPointerDown={onPointerDown}\n >\n {children}\n\n <Ripple {...rippleProps} />\n </Component>\n )\n },\n)\n\nPaginationItem.displayName = \"PaginationItem\"\nPaginationItem.__ui__ = \"PaginationItem\"\n","import type { FC } from \"@yamada-ui/core\"\nimport type { IconProps } from \"@yamada-ui/icon\"\nimport { Icon } from \"@yamada-ui/icon\"\n\nexport const PaginationEllipsisIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n d=\"M2 8c0-.733.6-1.333 1.333-1.333.734 0 1.334.6 1.334 1.333s-.6 1.333-1.334 1.333C2.6 9.333 2 8.733 2 8zm9.333 0c0-.733.6-1.333 1.334-1.333C13.4 6.667 14 7.267 14 8s-.6 1.333-1.333 1.333c-.734 0-1.334-.6-1.334-1.333zM6.667 8c0-.733.6-1.333 1.333-1.333s1.333.6 1.333 1.333S8.733 9.333 8 9.333 6.667 8.733 6.667 8z\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\n\nPaginationEllipsisIcon.displayName = \"PaginationEllipsisIcon\"\nPaginationEllipsisIcon.__ui__ = \"PaginationEllipsisIcon\"\n\nexport const PaginationFirstIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n d=\"M6.85355 3.85355C7.04882 3.65829 7.04882 3.34171 6.85355 3.14645C6.65829 2.95118 6.34171 2.95118 6.14645 3.14645L2.14645 7.14645C1.95118 7.34171 1.95118 7.65829 2.14645 7.85355L6.14645 11.8536C6.34171 12.0488 6.65829 12.0488 6.85355 11.8536C7.04882 11.6583 7.04882 11.3417 6.85355 11.1464L3.20711 7.5L6.85355 3.85355ZM12.8536 3.85355C13.0488 3.65829 13.0488 3.34171 12.8536 3.14645C12.6583 2.95118 12.3417 2.95118 12.1464 3.14645L8.14645 7.14645C7.95118 7.34171 7.95118 7.65829 8.14645 7.85355L12.1464 11.8536C12.3417 12.0488 12.6583 12.0488 12.8536 11.8536C13.0488 11.6583 13.0488 11.3417 12.8536 11.1464L9.20711 7.5L12.8536 3.85355Z\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\n\nPaginationFirstIcon.displayName = \"PaginationFirstIcon\"\nPaginationFirstIcon.__ui__ = \"PaginationFirstIcon\"\n\nexport const PaginationLastIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n d=\"M2.14645 11.1464C1.95118 11.3417 1.95118 11.6583 2.14645 11.8536C2.34171 12.0488 2.65829 12.0488 2.85355 11.8536L6.85355 7.85355C7.04882 7.65829 7.04882 7.34171 6.85355 7.14645L2.85355 3.14645C2.65829 2.95118 2.34171 2.95118 2.14645 3.14645C1.95118 3.34171 1.95118 3.65829 2.14645 3.85355L5.79289 7.5L2.14645 11.1464ZM8.14645 11.1464C7.95118 11.3417 7.95118 11.6583 8.14645 11.8536C8.34171 12.0488 8.65829 12.0488 8.85355 11.8536L12.8536 7.85355C13.0488 7.65829 13.0488 7.34171 12.8536 7.14645L8.85355 3.14645C8.65829 2.95118 8.34171 2.95118 8.14645 3.14645C7.95118 3.34171 7.95118 3.65829 8.14645 3.85355L11.7929 7.5L8.14645 11.1464Z\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\n\nPaginationLastIcon.displayName = \"PaginationLastIcon\"\nPaginationLastIcon.__ui__ = \"PaginationLastIcon\"\n\nexport const PaginationPrevIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n d=\"M7.219 8l3.3 3.3-.943.943L5.333 8l4.243-4.243.943.943-3.3 3.3z\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\n\nPaginationPrevIcon.displayName = \"PaginationPrevIcon\"\nPaginationPrevIcon.__ui__ = \"PaginationPrevIcon\"\n\nexport const PaginationNextIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n d=\"M8.781 8l-3.3-3.3.943-.943L10.667 8l-4.243 4.243-.943-.943 3.3-3.3z\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\n\nPaginationNextIcon.displayName = \"PaginationNextIcon\"\nPaginationNextIcon.__ui__ = \"PaginationNextIcon\"\n","import type { CSSUIObject, Token } from \"@yamada-ui/core\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { createContext } from \"@yamada-ui/utils\"\nimport { useCallback, useMemo } from \"react\"\n\ninterface PaginationContext {\n [key: string]: CSSUIObject | undefined\n}\n\nexport const [PaginationProvider, usePaginationContext] =\n createContext<PaginationContext>({\n name: \"PaginationContext\",\n errorMessage: `usePaginationContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Pagination />\"`,\n })\n\nexport const computedRange = (start: number, end: number) =>\n Array.from({ length: end - start + 1 }, (_, index) => index + start)\n\nexport interface UsePaginationProps {\n /**\n * The total number of pages in pagination.\n */\n total: number\n /**\n * Number of elements visible on the left/right edges.\n *\n * @default 1\n */\n boundaries?: Token<number>\n /**\n * The initial page of the pagination.\n * Should be less than `total` and greater than `1`.\n *\n * @default 1\n */\n defaultPage?: number\n /**\n * If `true`, the pagination all item will be disabled.\n *\n * @default false\n */\n disabled?: boolean\n /**\n * If `true`, the pagination all item will be disabled.\n *\n * @default false\n *\n * @deprecated Use `disabled` instead.\n */\n isDisabled?: boolean\n /**\n * The page of the pagination.\n * Should be less than `total` and greater than `1`.\n */\n page?: number\n /** Number of siblings displayed on the left/right side of selected page.\n *\n * @default 1\n */\n siblings?: Token<number>\n /**\n * The callback invoked when the page changes.\n */\n onChange?: (page: number) => void\n}\n\nexport const usePagination = ({\n boundaries: _boundaries = 1,\n defaultPage = 1,\n disabled,\n isDisabled = false,\n page,\n siblings: _siblings = 1,\n total,\n onChange: onChangeProp,\n}: UsePaginationProps) => {\n const siblings = useValue(_siblings)\n const boundaries = useValue(_boundaries)\n\n disabled ??= isDisabled\n\n const [currentPage, setCurrentPage] = useControllableState({\n defaultValue: defaultPage,\n value: page,\n onChange: onChangeProp,\n })\n\n const onFirst = useCallback(() => setCurrentPage(1), [setCurrentPage])\n\n const onLast = useCallback(\n () => setCurrentPage(total),\n [setCurrentPage, total],\n )\n\n const onPrev = useCallback(\n () => setCurrentPage((prev) => (prev === 1 ? prev : prev - 1)),\n [setCurrentPage],\n )\n\n const onNext = useCallback(\n () => setCurrentPage((prev) => (prev === total ? prev : prev + 1)),\n [setCurrentPage, total],\n )\n\n const onChange = useCallback(\n (page: number) => setCurrentPage(page),\n [setCurrentPage],\n )\n\n const range = useMemo((): (\"ellipsis\" | number)[] => {\n const minimumTotal = siblings * 2 + 3 + boundaries * 2\n\n if (minimumTotal >= total) return computedRange(1, total)\n\n const prevSiblings = Math.max(currentPage - siblings, boundaries)\n const nextSiblings = Math.min(currentPage + siblings, total - boundaries)\n\n const prevDots = prevSiblings > boundaries + 2\n const nextDots = nextSiblings < total - (boundaries + 1)\n\n if (!prevDots && nextDots) {\n const prevPages = siblings * 2 + boundaries + 2\n\n return [\n ...computedRange(1, prevPages),\n \"ellipsis\",\n ...computedRange(total - (boundaries - 1), total),\n ]\n }\n\n if (prevDots && !nextDots) {\n const nextPages = boundaries + 1 + 2 * siblings\n\n return [\n ...computedRange(1, boundaries),\n \"ellipsis\",\n ...computedRange(total - nextPages, total),\n ]\n }\n\n return [\n ...computedRange(1, boundaries),\n \"ellipsis\",\n ...computedRange(prevSiblings, nextSiblings),\n \"ellipsis\",\n ...computedRange(total - boundaries + 1, total),\n ]\n }, [boundaries, siblings, currentPage, total])\n\n return {\n currentPage,\n disabled,\n range,\n total,\n onChange,\n onFirst,\n onLast,\n onNext,\n onPrev,\n }\n}\n\nexport type UsePaginationReturn = ReturnType<typeof usePagination>\n"],"mappings":"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","names":["import_core","import_use_value","import_utils","import_react","import_utils","page","import_jsx_runtime","import_jsx_runtime","page"]}
|
package/dist/pagination.mjs
CHANGED
@@ -1,10 +1,10 @@
|
|
1
1
|
"use client"
|
2
2
|
import {
|
3
3
|
Pagination
|
4
|
-
} from "./chunk-
|
5
|
-
import "./chunk-
|
4
|
+
} from "./chunk-IH2XPMDF.mjs";
|
5
|
+
import "./chunk-5QYB2MRA.mjs";
|
6
6
|
import "./chunk-VZWGYG76.mjs";
|
7
|
-
import "./chunk-
|
7
|
+
import "./chunk-E66Q4CU7.mjs";
|
8
8
|
export {
|
9
9
|
Pagination
|
10
10
|
};
|
@@ -30,6 +30,14 @@ interface UsePaginationProps {
|
|
30
30
|
*
|
31
31
|
* @default false
|
32
32
|
*/
|
33
|
+
disabled?: boolean;
|
34
|
+
/**
|
35
|
+
* If `true`, the pagination all item will be disabled.
|
36
|
+
*
|
37
|
+
* @default false
|
38
|
+
*
|
39
|
+
* @deprecated Use `disabled` instead.
|
40
|
+
*/
|
33
41
|
isDisabled?: boolean;
|
34
42
|
/**
|
35
43
|
* The page of the pagination.
|
@@ -46,9 +54,9 @@ interface UsePaginationProps {
|
|
46
54
|
*/
|
47
55
|
onChange?: (page: number) => void;
|
48
56
|
}
|
49
|
-
declare const usePagination: ({ boundaries: _boundaries, defaultPage, isDisabled, page, siblings: _siblings, total, onChange: onChangeProp, }: UsePaginationProps) => {
|
57
|
+
declare const usePagination: ({ boundaries: _boundaries, defaultPage, disabled, isDisabled, page, siblings: _siblings, total, onChange: onChangeProp, }: UsePaginationProps) => {
|
50
58
|
currentPage: number;
|
51
|
-
|
59
|
+
disabled: boolean;
|
52
60
|
range: (number | "ellipsis")[];
|
53
61
|
total: number;
|
54
62
|
onChange: (page: number) => void;
|
package/dist/use-pagination.d.ts
CHANGED
@@ -30,6 +30,14 @@ interface UsePaginationProps {
|
|
30
30
|
*
|
31
31
|
* @default false
|
32
32
|
*/
|
33
|
+
disabled?: boolean;
|
34
|
+
/**
|
35
|
+
* If `true`, the pagination all item will be disabled.
|
36
|
+
*
|
37
|
+
* @default false
|
38
|
+
*
|
39
|
+
* @deprecated Use `disabled` instead.
|
40
|
+
*/
|
33
41
|
isDisabled?: boolean;
|
34
42
|
/**
|
35
43
|
* The page of the pagination.
|
@@ -46,9 +54,9 @@ interface UsePaginationProps {
|
|
46
54
|
*/
|
47
55
|
onChange?: (page: number) => void;
|
48
56
|
}
|
49
|
-
declare const usePagination: ({ boundaries: _boundaries, defaultPage, isDisabled, page, siblings: _siblings, total, onChange: onChangeProp, }: UsePaginationProps) => {
|
57
|
+
declare const usePagination: ({ boundaries: _boundaries, defaultPage, disabled, isDisabled, page, siblings: _siblings, total, onChange: onChangeProp, }: UsePaginationProps) => {
|
50
58
|
currentPage: number;
|
51
|
-
|
59
|
+
disabled: boolean;
|
52
60
|
range: (number | "ellipsis")[];
|
53
61
|
total: number;
|
54
62
|
onChange: (page: number) => void;
|
package/dist/use-pagination.js
CHANGED
@@ -39,6 +39,7 @@ var computedRange = (start, end) => Array.from({ length: end - start + 1 }, (_,
|
|
39
39
|
var usePagination = ({
|
40
40
|
boundaries: _boundaries = 1,
|
41
41
|
defaultPage = 1,
|
42
|
+
disabled,
|
42
43
|
isDisabled = false,
|
43
44
|
page,
|
44
45
|
siblings: _siblings = 1,
|
@@ -47,6 +48,7 @@ var usePagination = ({
|
|
47
48
|
}) => {
|
48
49
|
const siblings = (0, import_use_value.useValue)(_siblings);
|
49
50
|
const boundaries = (0, import_use_value.useValue)(_boundaries);
|
51
|
+
disabled != null ? disabled : disabled = isDisabled;
|
50
52
|
const [currentPage, setCurrentPage] = (0, import_use_controllable_state.useControllableState)({
|
51
53
|
defaultValue: defaultPage,
|
52
54
|
value: page,
|
@@ -102,7 +104,7 @@ var usePagination = ({
|
|
102
104
|
}, [boundaries, siblings, currentPage, total]);
|
103
105
|
return {
|
104
106
|
currentPage,
|
105
|
-
|
107
|
+
disabled,
|
106
108
|
range,
|
107
109
|
total,
|
108
110
|
onChange,
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/use-pagination.ts"],"sourcesContent":["import type { CSSUIObject, Token } from \"@yamada-ui/core\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { createContext } from \"@yamada-ui/utils\"\nimport { useCallback, useMemo } from \"react\"\n\ninterface PaginationContext {\n [key: string]: CSSUIObject | undefined\n}\n\nexport const [PaginationProvider, usePaginationContext] =\n createContext<PaginationContext>({\n name: \"PaginationContext\",\n errorMessage: `usePaginationContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Pagination />\"`,\n })\n\nexport const computedRange = (start: number, end: number) =>\n Array.from({ length: end - start + 1 }, (_, index) => index + start)\n\nexport interface UsePaginationProps {\n /**\n * The total number of pages in pagination.\n */\n total: number\n /**\n * Number of elements visible on the left/right edges.\n *\n * @default 1\n */\n boundaries?: Token<number>\n /**\n * The initial page of the pagination.\n * Should be less than `total` and greater than `1`.\n *\n * @default 1\n */\n defaultPage?: number\n /**\n * If `true`, the pagination all item will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * The page of the pagination.\n * Should be less than `total` and greater than `1`.\n */\n page?: number\n /** Number of siblings displayed on the left/right side of selected page.\n *\n * @default 1\n */\n siblings?: Token<number>\n /**\n * The callback invoked when the page changes.\n */\n onChange?: (page: number) => void\n}\n\nexport const usePagination = ({\n boundaries: _boundaries = 1,\n defaultPage = 1,\n isDisabled = false,\n page,\n siblings: _siblings = 1,\n total,\n onChange: onChangeProp,\n}: UsePaginationProps) => {\n const siblings = useValue(_siblings)\n const boundaries = useValue(_boundaries)\n\n const [currentPage, setCurrentPage] = useControllableState({\n defaultValue: defaultPage,\n value: page,\n onChange: onChangeProp,\n })\n\n const onFirst = useCallback(() => setCurrentPage(1), [setCurrentPage])\n\n const onLast = useCallback(\n () => setCurrentPage(total),\n [setCurrentPage, total],\n )\n\n const onPrev = useCallback(\n () => setCurrentPage((prev) => (prev === 1 ? prev : prev - 1)),\n [setCurrentPage],\n )\n\n const onNext = useCallback(\n () => setCurrentPage((prev) => (prev === total ? prev : prev + 1)),\n [setCurrentPage, total],\n )\n\n const onChange = useCallback(\n (page: number) => setCurrentPage(page),\n [setCurrentPage],\n )\n\n const range = useMemo((): (\"ellipsis\" | number)[] => {\n const minimumTotal = siblings * 2 + 3 + boundaries * 2\n\n if (minimumTotal >= total) return computedRange(1, total)\n\n const prevSiblings = Math.max(currentPage - siblings, boundaries)\n const nextSiblings = Math.min(currentPage + siblings, total - boundaries)\n\n const prevDots = prevSiblings > boundaries + 2\n const nextDots = nextSiblings < total - (boundaries + 1)\n\n if (!prevDots && nextDots) {\n const prevPages = siblings * 2 + boundaries + 2\n\n return [\n ...computedRange(1, prevPages),\n \"ellipsis\",\n ...computedRange(total - (boundaries - 1), total),\n ]\n }\n\n if (prevDots && !nextDots) {\n const nextPages = boundaries + 1 + 2 * siblings\n\n return [\n ...computedRange(1, boundaries),\n \"ellipsis\",\n ...computedRange(total - nextPages, total),\n ]\n }\n\n return [\n ...computedRange(1, boundaries),\n \"ellipsis\",\n ...computedRange(prevSiblings, nextSiblings),\n \"ellipsis\",\n ...computedRange(total - boundaries + 1, total),\n ]\n }, [boundaries, siblings, currentPage, total])\n\n return {\n currentPage,\n
|
1
|
+
{"version":3,"sources":["../src/use-pagination.ts"],"sourcesContent":["import type { CSSUIObject, Token } from \"@yamada-ui/core\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { createContext } from \"@yamada-ui/utils\"\nimport { useCallback, useMemo } from \"react\"\n\ninterface PaginationContext {\n [key: string]: CSSUIObject | undefined\n}\n\nexport const [PaginationProvider, usePaginationContext] =\n createContext<PaginationContext>({\n name: \"PaginationContext\",\n errorMessage: `usePaginationContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Pagination />\"`,\n })\n\nexport const computedRange = (start: number, end: number) =>\n Array.from({ length: end - start + 1 }, (_, index) => index + start)\n\nexport interface UsePaginationProps {\n /**\n * The total number of pages in pagination.\n */\n total: number\n /**\n * Number of elements visible on the left/right edges.\n *\n * @default 1\n */\n boundaries?: Token<number>\n /**\n * The initial page of the pagination.\n * Should be less than `total` and greater than `1`.\n *\n * @default 1\n */\n defaultPage?: number\n /**\n * If `true`, the pagination all item will be disabled.\n *\n * @default false\n */\n disabled?: boolean\n /**\n * If `true`, the pagination all item will be disabled.\n *\n * @default false\n *\n * @deprecated Use `disabled` instead.\n */\n isDisabled?: boolean\n /**\n * The page of the pagination.\n * Should be less than `total` and greater than `1`.\n */\n page?: number\n /** Number of siblings displayed on the left/right side of selected page.\n *\n * @default 1\n */\n siblings?: Token<number>\n /**\n * The callback invoked when the page changes.\n */\n onChange?: (page: number) => void\n}\n\nexport const usePagination = ({\n boundaries: _boundaries = 1,\n defaultPage = 1,\n disabled,\n isDisabled = false,\n page,\n siblings: _siblings = 1,\n total,\n onChange: onChangeProp,\n}: UsePaginationProps) => {\n const siblings = useValue(_siblings)\n const boundaries = useValue(_boundaries)\n\n disabled ??= isDisabled\n\n const [currentPage, setCurrentPage] = useControllableState({\n defaultValue: defaultPage,\n value: page,\n onChange: onChangeProp,\n })\n\n const onFirst = useCallback(() => setCurrentPage(1), [setCurrentPage])\n\n const onLast = useCallback(\n () => setCurrentPage(total),\n [setCurrentPage, total],\n )\n\n const onPrev = useCallback(\n () => setCurrentPage((prev) => (prev === 1 ? prev : prev - 1)),\n [setCurrentPage],\n )\n\n const onNext = useCallback(\n () => setCurrentPage((prev) => (prev === total ? prev : prev + 1)),\n [setCurrentPage, total],\n )\n\n const onChange = useCallback(\n (page: number) => setCurrentPage(page),\n [setCurrentPage],\n )\n\n const range = useMemo((): (\"ellipsis\" | number)[] => {\n const minimumTotal = siblings * 2 + 3 + boundaries * 2\n\n if (minimumTotal >= total) return computedRange(1, total)\n\n const prevSiblings = Math.max(currentPage - siblings, boundaries)\n const nextSiblings = Math.min(currentPage + siblings, total - boundaries)\n\n const prevDots = prevSiblings > boundaries + 2\n const nextDots = nextSiblings < total - (boundaries + 1)\n\n if (!prevDots && nextDots) {\n const prevPages = siblings * 2 + boundaries + 2\n\n return [\n ...computedRange(1, prevPages),\n \"ellipsis\",\n ...computedRange(total - (boundaries - 1), total),\n ]\n }\n\n if (prevDots && !nextDots) {\n const nextPages = boundaries + 1 + 2 * siblings\n\n return [\n ...computedRange(1, boundaries),\n \"ellipsis\",\n ...computedRange(total - nextPages, total),\n ]\n }\n\n return [\n ...computedRange(1, boundaries),\n \"ellipsis\",\n ...computedRange(prevSiblings, nextSiblings),\n \"ellipsis\",\n ...computedRange(total - boundaries + 1, total),\n ]\n }, [boundaries, siblings, currentPage, total])\n\n return {\n currentPage,\n disabled,\n range,\n total,\n onChange,\n onFirst,\n onLast,\n onNext,\n onPrev,\n }\n}\n\nexport type UsePaginationReturn = ReturnType<typeof usePagination>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,oCAAqC;AACrC,uBAAyB;AACzB,mBAA8B;AAC9B,mBAAqC;AAM9B,IAAM,CAAC,oBAAoB,oBAAoB,QACpD,4BAAiC;AAAA,EAC/B,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;AAEI,IAAM,gBAAgB,CAAC,OAAe,QAC3C,MAAM,KAAK,EAAE,QAAQ,MAAM,QAAQ,EAAE,GAAG,CAAC,GAAG,UAAU,QAAQ,KAAK;AAkD9D,IAAM,gBAAgB,CAAC;AAAA,EAC5B,YAAY,cAAc;AAAA,EAC1B,cAAc;AAAA,EACd;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA,UAAU,YAAY;AAAA,EACtB;AAAA,EACA,UAAU;AACZ,MAA0B;AACxB,QAAM,eAAW,2BAAS,SAAS;AACnC,QAAM,iBAAa,2BAAS,WAAW;AAEvC,2CAAa;AAEb,QAAM,CAAC,aAAa,cAAc,QAAI,oDAAqB;AAAA,IACzD,cAAc;AAAA,IACd,OAAO;AAAA,IACP,UAAU;AAAA,EACZ,CAAC;AAED,QAAM,cAAU,0BAAY,MAAM,eAAe,CAAC,GAAG,CAAC,cAAc,CAAC;AAErE,QAAM,aAAS;AAAA,IACb,MAAM,eAAe,KAAK;AAAA,IAC1B,CAAC,gBAAgB,KAAK;AAAA,EACxB;AAEA,QAAM,aAAS;AAAA,IACb,MAAM,eAAe,CAAC,SAAU,SAAS,IAAI,OAAO,OAAO,CAAE;AAAA,IAC7D,CAAC,cAAc;AAAA,EACjB;AAEA,QAAM,aAAS;AAAA,IACb,MAAM,eAAe,CAAC,SAAU,SAAS,QAAQ,OAAO,OAAO,CAAE;AAAA,IACjE,CAAC,gBAAgB,KAAK;AAAA,EACxB;AAEA,QAAM,eAAW;AAAA,IACf,CAACA,UAAiB,eAAeA,KAAI;AAAA,IACrC,CAAC,cAAc;AAAA,EACjB;AAEA,QAAM,YAAQ,sBAAQ,MAA+B;AACnD,UAAM,eAAe,WAAW,IAAI,IAAI,aAAa;AAErD,QAAI,gBAAgB,MAAO,QAAO,cAAc,GAAG,KAAK;AAExD,UAAM,eAAe,KAAK,IAAI,cAAc,UAAU,UAAU;AAChE,UAAM,eAAe,KAAK,IAAI,cAAc,UAAU,QAAQ,UAAU;AAExE,UAAM,WAAW,eAAe,aAAa;AAC7C,UAAM,WAAW,eAAe,SAAS,aAAa;AAEtD,QAAI,CAAC,YAAY,UAAU;AACzB,YAAM,YAAY,WAAW,IAAI,aAAa;AAE9C,aAAO;AAAA,QACL,GAAG,cAAc,GAAG,SAAS;AAAA,QAC7B;AAAA,QACA,GAAG,cAAc,SAAS,aAAa,IAAI,KAAK;AAAA,MAClD;AAAA,IACF;AAEA,QAAI,YAAY,CAAC,UAAU;AACzB,YAAM,YAAY,aAAa,IAAI,IAAI;AAEvC,aAAO;AAAA,QACL,GAAG,cAAc,GAAG,UAAU;AAAA,QAC9B;AAAA,QACA,GAAG,cAAc,QAAQ,WAAW,KAAK;AAAA,MAC3C;AAAA,IACF;AAEA,WAAO;AAAA,MACL,GAAG,cAAc,GAAG,UAAU;AAAA,MAC9B;AAAA,MACA,GAAG,cAAc,cAAc,YAAY;AAAA,MAC3C;AAAA,MACA,GAAG,cAAc,QAAQ,aAAa,GAAG,KAAK;AAAA,IAChD;AAAA,EACF,GAAG,CAAC,YAAY,UAAU,aAAa,KAAK,CAAC;AAE7C,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":["page"]}
|
package/dist/use-pagination.mjs
CHANGED
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@yamada-ui/pagination",
|
3
|
-
"version": "1.1.4-next-
|
3
|
+
"version": "1.1.4-next-20241118203459",
|
4
4
|
"description": "Yamada UI pagination component",
|
5
5
|
"keywords": [
|
6
6
|
"yamada",
|
@@ -37,8 +37,8 @@
|
|
37
37
|
},
|
38
38
|
"dependencies": {
|
39
39
|
"@yamada-ui/core": "1.15.5",
|
40
|
-
"@yamada-ui/icon": "1.1.
|
41
|
-
"@yamada-ui/ripple": "1.0.44-next-
|
40
|
+
"@yamada-ui/icon": "1.1.13-next-20241118203459",
|
41
|
+
"@yamada-ui/ripple": "1.0.44-next-20241118203459",
|
42
42
|
"@yamada-ui/use-controllable-state": "1.0.23",
|
43
43
|
"@yamada-ui/use-value": "1.1.30",
|
44
44
|
"@yamada-ui/utils": "1.5.4"
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["../src/pagination.tsx"],"sourcesContent":["import type {\n CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n Token,\n} from \"@yamada-ui/core\"\nimport type { FC } from \"react\"\nimport type { PaginationItemProps } from \"./pagination-item\"\nimport type { UsePaginationProps } from \"./use-pagination\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { cx, dataAttr, handlerAll } from \"@yamada-ui/utils\"\nimport { useMemo } from \"react\"\nimport { PaginationItem } from \"./pagination-item\"\nimport { PaginationProvider, usePagination } from \"./use-pagination\"\n\ninterface PaginationOptions {\n /**\n * The pagination button component to use.\n */\n component?: FC<PaginationItemProps>\n /**\n * If `true`, display the control buttons.\n *\n * @default true\n */\n withControls?: Token<boolean>\n /**\n * If `true`, display the edge buttons.\n *\n * @default false\n */\n withEdges?: Token<boolean>\n /**\n * Props for container element.\n */\n containerProps?: HTMLUIProps<\"nav\">\n /**\n * Props for next of the control button element.\n */\n controlNextProps?: Omit<PaginationItemProps, \"page\">\n /**\n * Props for previous of the control button element.\n */\n controlPrevProps?: Omit<PaginationItemProps, \"page\">\n /**\n * Props for control button element.\n */\n controlProps?: Omit<PaginationItemProps, \"page\">\n /**\n * Props for first of the edge button element.\n */\n edgeFirstProps?: Omit<PaginationItemProps, \"page\">\n /**\n * Props for last of the edge button element.\n */\n edgeLastProps?: Omit<PaginationItemProps, \"page\">\n /**\n * Props for edge button element.\n */\n edgeProps?: Omit<PaginationItemProps, \"page\">\n /**\n * Props for button element.\n */\n itemProps?: Omit<PaginationItemProps, \"page\">\n}\n\nexport interface PaginationProps\n extends Omit<HTMLUIProps<\"ul\">, \"children\" | \"onChange\" | \"page\">,\n ThemeProps<\"Pagination\">,\n UsePaginationProps,\n PaginationOptions {}\n\n/**\n * `Pagination` is a component for managing the pagination and navigation of content.\n *\n * @see Docs https://yamada-ui.com/components/navigation/pagination\n */\nexport const Pagination = forwardRef<PaginationProps, \"ul\">((props, ref) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"Pagination\", props)\n const {\n className,\n boundaries,\n component: Component = PaginationItem,\n defaultPage,\n isDisabled,\n page,\n siblings,\n total,\n withControls: _withControls = true,\n withEdges: _withEdges = false,\n containerProps,\n controlNextProps,\n controlPrevProps,\n controlProps,\n edgeFirstProps,\n edgeLastProps,\n edgeProps,\n itemProps,\n onChange: onChangeProp,\n ...rest\n } = omitThemeProps(mergedProps)\n\n const withControls = useValue(_withControls)\n const withEdges = useValue(_withEdges)\n\n const { currentPage, range, onChange, onFirst, onLast, onNext, onPrev } =\n usePagination({\n boundaries,\n defaultPage,\n isDisabled,\n page,\n siblings,\n total,\n onChange: onChangeProp,\n })\n\n const children = useMemo(\n () =>\n range.map((page, key) => (\n <ui.li key={key}>\n <Component\n aria-label={page !== \"ellipsis\" ? `Go to page ${page}` : undefined}\n isActive={currentPage === page}\n isDisabled={isDisabled}\n {...itemProps}\n page={page}\n onClick={handlerAll(\n itemProps?.onClick,\n page !== \"ellipsis\" ? () => onChange(page) : undefined,\n )}\n />\n </ui.li>\n )),\n [Component, currentPage, isDisabled, onChange, range, itemProps],\n )\n\n const css: CSSUIObject = {\n ...styles.container,\n }\n\n return (\n <PaginationProvider value={styles}>\n <ui.nav\n ref={ref}\n className={cx(\"ui-pagination\", className)}\n data-disabled={dataAttr(isDisabled)}\n __css={css}\n {...containerProps}\n >\n <ui.ul\n className=\"ui-pagination-inner\"\n data-disabled={dataAttr(isDisabled)}\n __css={{\n alignItems: \"center\",\n display: \"flex\",\n ...styles.inner,\n }}\n {...rest}\n >\n {withEdges ? (\n <ui.li>\n <Component\n className=\"ui-pagination__item--first\"\n aria-label=\"Go to first page\"\n isDisabled={isDisabled || currentPage === 1}\n page=\"first\"\n {...edgeProps}\n {...edgeFirstProps}\n onClick={handlerAll(\n edgeProps?.onClick,\n edgeFirstProps?.onClick,\n onFirst,\n )}\n />\n </ui.li>\n ) : null}\n\n {withControls ? (\n <ui.li>\n <Component\n className=\"ui-pagination__item--prev\"\n aria-label=\"Go to previous page\"\n isDisabled={isDisabled || currentPage === 1}\n page=\"prev\"\n {...controlProps}\n {...controlPrevProps}\n onClick={handlerAll(\n controlProps?.onClick,\n controlPrevProps?.onClick,\n onPrev,\n )}\n />\n </ui.li>\n ) : null}\n\n {children}\n\n {withControls ? (\n <ui.li>\n <Component\n className=\"ui-pagination__item--next\"\n aria-label=\"Go to next page\"\n isDisabled={isDisabled || currentPage === total}\n page=\"next\"\n {...controlProps}\n {...controlNextProps}\n onClick={handlerAll(\n controlProps?.onClick,\n controlNextProps?.onClick,\n onNext,\n )}\n />\n </ui.li>\n ) : null}\n\n {withEdges ? (\n <ui.li>\n <Component\n className=\"ui-pagination__item--last\"\n aria-label=\"Go to last page\"\n isDisabled={isDisabled || currentPage === total}\n page=\"last\"\n {...edgeProps}\n {...edgeLastProps}\n onClick={handlerAll(\n edgeProps?.onClick,\n edgeLastProps?.onClick,\n onLast,\n )}\n />\n </ui.li>\n ) : null}\n </ui.ul>\n </ui.nav>\n </PaginationProvider>\n )\n})\n\nPagination.displayName = \"Pagination\"\nPagination.__ui__ = \"Pagination\"\n"],"mappings":"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","names":["page"]}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["../src/use-pagination.ts"],"sourcesContent":["import type { CSSUIObject, Token } from \"@yamada-ui/core\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { createContext } from \"@yamada-ui/utils\"\nimport { useCallback, useMemo } from \"react\"\n\ninterface PaginationContext {\n [key: string]: CSSUIObject | undefined\n}\n\nexport const [PaginationProvider, usePaginationContext] =\n createContext<PaginationContext>({\n name: \"PaginationContext\",\n errorMessage: `usePaginationContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Pagination />\"`,\n })\n\nexport const computedRange = (start: number, end: number) =>\n Array.from({ length: end - start + 1 }, (_, index) => index + start)\n\nexport interface UsePaginationProps {\n /**\n * The total number of pages in pagination.\n */\n total: number\n /**\n * Number of elements visible on the left/right edges.\n *\n * @default 1\n */\n boundaries?: Token<number>\n /**\n * The initial page of the pagination.\n * Should be less than `total` and greater than `1`.\n *\n * @default 1\n */\n defaultPage?: number\n /**\n * If `true`, the pagination all item will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * The page of the pagination.\n * Should be less than `total` and greater than `1`.\n */\n page?: number\n /** Number of siblings displayed on the left/right side of selected page.\n *\n * @default 1\n */\n siblings?: Token<number>\n /**\n * The callback invoked when the page changes.\n */\n onChange?: (page: number) => void\n}\n\nexport const usePagination = ({\n boundaries: _boundaries = 1,\n defaultPage = 1,\n isDisabled = false,\n page,\n siblings: _siblings = 1,\n total,\n onChange: onChangeProp,\n}: UsePaginationProps) => {\n const siblings = useValue(_siblings)\n const boundaries = useValue(_boundaries)\n\n const [currentPage, setCurrentPage] = useControllableState({\n defaultValue: defaultPage,\n value: page,\n onChange: onChangeProp,\n })\n\n const onFirst = useCallback(() => setCurrentPage(1), [setCurrentPage])\n\n const onLast = useCallback(\n () => setCurrentPage(total),\n [setCurrentPage, total],\n )\n\n const onPrev = useCallback(\n () => setCurrentPage((prev) => (prev === 1 ? prev : prev - 1)),\n [setCurrentPage],\n )\n\n const onNext = useCallback(\n () => setCurrentPage((prev) => (prev === total ? prev : prev + 1)),\n [setCurrentPage, total],\n )\n\n const onChange = useCallback(\n (page: number) => setCurrentPage(page),\n [setCurrentPage],\n )\n\n const range = useMemo((): (\"ellipsis\" | number)[] => {\n const minimumTotal = siblings * 2 + 3 + boundaries * 2\n\n if (minimumTotal >= total) return computedRange(1, total)\n\n const prevSiblings = Math.max(currentPage - siblings, boundaries)\n const nextSiblings = Math.min(currentPage + siblings, total - boundaries)\n\n const prevDots = prevSiblings > boundaries + 2\n const nextDots = nextSiblings < total - (boundaries + 1)\n\n if (!prevDots && nextDots) {\n const prevPages = siblings * 2 + boundaries + 2\n\n return [\n ...computedRange(1, prevPages),\n \"ellipsis\",\n ...computedRange(total - (boundaries - 1), total),\n ]\n }\n\n if (prevDots && !nextDots) {\n const nextPages = boundaries + 1 + 2 * siblings\n\n return [\n ...computedRange(1, boundaries),\n \"ellipsis\",\n ...computedRange(total - nextPages, total),\n ]\n }\n\n return [\n ...computedRange(1, boundaries),\n \"ellipsis\",\n ...computedRange(prevSiblings, nextSiblings),\n \"ellipsis\",\n ...computedRange(total - boundaries + 1, total),\n ]\n }, [boundaries, siblings, currentPage, total])\n\n return {\n currentPage,\n isDisabled,\n range,\n total,\n onChange,\n onFirst,\n onLast,\n onNext,\n onPrev,\n }\n}\n\nexport type UsePaginationReturn = ReturnType<typeof usePagination>\n"],"mappings":";;;AACA,SAAS,4BAA4B;AACrC,SAAS,gBAAgB;AACzB,SAAS,qBAAqB;AAC9B,SAAS,aAAa,eAAe;AAM9B,IAAM,CAAC,oBAAoB,oBAAoB,IACpD,cAAiC;AAAA,EAC/B,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;AAEI,IAAM,gBAAgB,CAAC,OAAe,QAC3C,MAAM,KAAK,EAAE,QAAQ,MAAM,QAAQ,EAAE,GAAG,CAAC,GAAG,UAAU,QAAQ,KAAK;AA0C9D,IAAM,gBAAgB,CAAC;AAAA,EAC5B,YAAY,cAAc;AAAA,EAC1B,cAAc;AAAA,EACd,aAAa;AAAA,EACb;AAAA,EACA,UAAU,YAAY;AAAA,EACtB;AAAA,EACA,UAAU;AACZ,MAA0B;AACxB,QAAM,WAAW,SAAS,SAAS;AACnC,QAAM,aAAa,SAAS,WAAW;AAEvC,QAAM,CAAC,aAAa,cAAc,IAAI,qBAAqB;AAAA,IACzD,cAAc;AAAA,IACd,OAAO;AAAA,IACP,UAAU;AAAA,EACZ,CAAC;AAED,QAAM,UAAU,YAAY,MAAM,eAAe,CAAC,GAAG,CAAC,cAAc,CAAC;AAErE,QAAM,SAAS;AAAA,IACb,MAAM,eAAe,KAAK;AAAA,IAC1B,CAAC,gBAAgB,KAAK;AAAA,EACxB;AAEA,QAAM,SAAS;AAAA,IACb,MAAM,eAAe,CAAC,SAAU,SAAS,IAAI,OAAO,OAAO,CAAE;AAAA,IAC7D,CAAC,cAAc;AAAA,EACjB;AAEA,QAAM,SAAS;AAAA,IACb,MAAM,eAAe,CAAC,SAAU,SAAS,QAAQ,OAAO,OAAO,CAAE;AAAA,IACjE,CAAC,gBAAgB,KAAK;AAAA,EACxB;AAEA,QAAM,WAAW;AAAA,IACf,CAACA,UAAiB,eAAeA,KAAI;AAAA,IACrC,CAAC,cAAc;AAAA,EACjB;AAEA,QAAM,QAAQ,QAAQ,MAA+B;AACnD,UAAM,eAAe,WAAW,IAAI,IAAI,aAAa;AAErD,QAAI,gBAAgB,MAAO,QAAO,cAAc,GAAG,KAAK;AAExD,UAAM,eAAe,KAAK,IAAI,cAAc,UAAU,UAAU;AAChE,UAAM,eAAe,KAAK,IAAI,cAAc,UAAU,QAAQ,UAAU;AAExE,UAAM,WAAW,eAAe,aAAa;AAC7C,UAAM,WAAW,eAAe,SAAS,aAAa;AAEtD,QAAI,CAAC,YAAY,UAAU;AACzB,YAAM,YAAY,WAAW,IAAI,aAAa;AAE9C,aAAO;AAAA,QACL,GAAG,cAAc,GAAG,SAAS;AAAA,QAC7B;AAAA,QACA,GAAG,cAAc,SAAS,aAAa,IAAI,KAAK;AAAA,MAClD;AAAA,IACF;AAEA,QAAI,YAAY,CAAC,UAAU;AACzB,YAAM,YAAY,aAAa,IAAI,IAAI;AAEvC,aAAO;AAAA,QACL,GAAG,cAAc,GAAG,UAAU;AAAA,QAC9B;AAAA,QACA,GAAG,cAAc,QAAQ,WAAW,KAAK;AAAA,MAC3C;AAAA,IACF;AAEA,WAAO;AAAA,MACL,GAAG,cAAc,GAAG,UAAU;AAAA,MAC9B;AAAA,MACA,GAAG,cAAc,cAAc,YAAY;AAAA,MAC3C;AAAA,MACA,GAAG,cAAc,QAAQ,aAAa,GAAG,KAAK;AAAA,IAChD;AAAA,EACF,GAAG,CAAC,YAAY,UAAU,aAAa,KAAK,CAAC;AAE7C,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":["page"]}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["../src/pagination-item.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport type { ReactNode } from \"react\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { Ripple, useRipple } from \"@yamada-ui/ripple\"\nimport { cx, dataAttr } from \"@yamada-ui/utils\"\nimport {\n PaginationEllipsisIcon,\n PaginationFirstIcon,\n PaginationLastIcon,\n PaginationNextIcon,\n PaginationPrevIcon,\n} from \"./pagination-icon\"\nimport { usePaginationContext } from \"./use-pagination\"\n\ninterface PaginationItemOptions {\n /**\n * The type of the page or item assigned to the pagination item.\n */\n page: \"ellipsis\" | \"first\" | \"last\" | \"next\" | \"prev\" | number\n /**\n * If `true`, disable ripple effects when pressing a element.\n *\n * @default false\n */\n disableRipple?: boolean\n /**\n * If `true`, the pagination item will be activated.\n *\n * @default false\n */\n isActive?: boolean\n /**\n * If `true`, the pagination item will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n}\n\nexport interface PaginationItemProps\n extends Omit<HTMLUIProps<\"button\">, \"page\">,\n PaginationItemOptions {}\n\nconst iconMap: {\n [key in \"ellipsis\" | \"first\" | \"last\" | \"next\" | \"prev\" | number]: ReactNode\n} = {\n ellipsis: <PaginationEllipsisIcon />,\n first: <PaginationFirstIcon />,\n last: <PaginationLastIcon />,\n next: <PaginationNextIcon />,\n prev: <PaginationPrevIcon />,\n}\n\nexport const PaginationItem = forwardRef<PaginationItemProps, \"button\">(\n (\n { className, children, disableRipple, isActive, isDisabled, page, ...rest },\n ref,\n ) => {\n const styles = usePaginationContext()\n const isEllipsis = page === \"ellipsis\"\n const { onPointerDown, ...rippleProps } = useRipple({\n ...rest,\n isDisabled: disableRipple || isDisabled || isEllipsis,\n })\n\n children ??= iconMap[page] ?? page\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"flex\",\n justifyContent: \"center\",\n overflow: \"hidden\",\n position: \"relative\",\n userSelect: \"none\",\n ...styles.item,\n ...styles[page],\n }\n\n const Component = ui[isEllipsis ? \"span\" : \"button\"]\n\n return (\n <Component\n ref={ref}\n {...(!isEllipsis\n ? {\n type: \"button\",\n \"data-disabled\": dataAttr(isDisabled),\n \"data-selected\": dataAttr(isActive),\n disabled: isDisabled,\n }\n : {})}\n className={cx(\n \"ui-pagination__item\",\n isEllipsis ? \"ui-pagination__item--ellipsis\" : undefined,\n className,\n )}\n tabIndex={!isEllipsis ? 0 : -1}\n __css={css}\n {...rest}\n onPointerDown={onPointerDown}\n >\n {children}\n\n <Ripple {...rippleProps} />\n </Component>\n )\n },\n)\n\nPaginationItem.displayName = \"PaginationItem\"\nPaginationItem.__ui__ = \"PaginationItem\"\n"],"mappings":";;;;;;;;;;;;;AAEA,SAAS,YAAY,UAAU;AAC/B,SAAS,QAAQ,iBAAiB;AAClC,SAAS,IAAI,gBAAgB;AA0CjB,cAmCN,YAnCM;AAHZ,IAAM,UAEF;AAAA,EACF,UAAU,oBAAC,0BAAuB;AAAA,EAClC,OAAO,oBAAC,uBAAoB;AAAA,EAC5B,MAAM,oBAAC,sBAAmB;AAAA,EAC1B,MAAM,oBAAC,sBAAmB;AAAA,EAC1B,MAAM,oBAAC,sBAAmB;AAC5B;AAEO,IAAM,iBAAiB;AAAA,EAC5B,CACE,EAAE,WAAW,UAAU,eAAe,UAAU,YAAY,MAAM,GAAG,KAAK,GAC1E,QACG;AAzDP;AA0DI,UAAM,SAAS,qBAAqB;AACpC,UAAM,aAAa,SAAS;AAC5B,UAAM,EAAE,eAAe,GAAG,YAAY,IAAI,UAAU;AAAA,MAClD,GAAG;AAAA,MACH,YAAY,iBAAiB,cAAc;AAAA,IAC7C,CAAC;AAED,8CAAa,aAAQ,IAAI,MAAZ,YAAiB;AAE9B,UAAM,MAAmB;AAAA,MACvB,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,UAAU;AAAA,MACV,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,GAAG,OAAO;AAAA,MACV,GAAG,OAAO,IAAI;AAAA,IAChB;AAEA,UAAM,YAAY,GAAG,aAAa,SAAS,QAAQ;AAEnD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACC,GAAI,CAAC,aACF;AAAA,UACE,MAAM;AAAA,UACN,iBAAiB,SAAS,UAAU;AAAA,UACpC,iBAAiB,SAAS,QAAQ;AAAA,UAClC,UAAU;AAAA,QACZ,IACA,CAAC;AAAA,QACL,WAAW;AAAA,UACT;AAAA,UACA,aAAa,kCAAkC;AAAA,UAC/C;AAAA,QACF;AAAA,QACA,UAAU,CAAC,aAAa,IAAI;AAAA,QAC5B,OAAO;AAAA,QACN,GAAG;AAAA,QACJ;AAAA,QAEC;AAAA;AAAA,UAED,oBAAC,UAAQ,GAAG,aAAa;AAAA;AAAA;AAAA,IAC3B;AAAA,EAEJ;AACF;AAEA,eAAe,cAAc;AAC7B,eAAe,SAAS;","names":[]}
|