@yamada-ui/pagination 1.1.8-dev-20241213213653 → 1.1.8-dev-20241215203956
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/{chunk-IH2XPMDF.mjs → chunk-4DT6X722.mjs} +7 -8
- package/dist/chunk-4DT6X722.mjs.map +1 -0
- package/dist/{chunk-5QYB2MRA.mjs → chunk-V3A6LHVY.mjs} +13 -17
- package/dist/chunk-V3A6LHVY.mjs.map +1 -0
- package/dist/{chunk-E66Q4CU7.mjs → chunk-ZOXC7X6K.mjs} +19 -20
- package/dist/chunk-ZOXC7X6K.mjs.map +1 -0
- package/dist/index.js +33 -39
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +3 -3
- package/dist/pagination-item.js +11 -15
- package/dist/pagination-item.js.map +1 -1
- package/dist/pagination-item.mjs +2 -2
- package/dist/pagination.js +33 -39
- package/dist/pagination.js.map +1 -1
- package/dist/pagination.mjs +3 -3
- package/dist/use-pagination.d.mts +1 -1
- package/dist/use-pagination.d.ts +1 -1
- package/dist/use-pagination.js +18 -19
- package/dist/use-pagination.js.map +1 -1
- package/dist/use-pagination.mjs +1 -1
- package/package.json +7 -7
- package/dist/chunk-5QYB2MRA.mjs.map +0 -1
- package/dist/chunk-E66Q4CU7.mjs.map +0 -1
- package/dist/chunk-IH2XPMDF.mjs.map +0 -1
@@ -1,11 +1,11 @@
|
|
1
1
|
"use client"
|
2
2
|
import {
|
3
3
|
PaginationItem
|
4
|
-
} from "./chunk-
|
4
|
+
} from "./chunk-V3A6LHVY.mjs";
|
5
5
|
import {
|
6
6
|
PaginationProvider,
|
7
7
|
usePagination
|
8
|
-
} from "./chunk-
|
8
|
+
} from "./chunk-ZOXC7X6K.mjs";
|
9
9
|
|
10
10
|
// src/pagination.tsx
|
11
11
|
import {
|
@@ -20,13 +20,13 @@ 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
|
+
const {
|
24
24
|
className,
|
25
25
|
boundaries,
|
26
26
|
component: Component = PaginationItem,
|
27
27
|
defaultPage,
|
28
|
-
disabled,
|
29
28
|
isDisabled,
|
29
|
+
disabled = isDisabled,
|
30
30
|
page,
|
31
31
|
siblings,
|
32
32
|
total,
|
@@ -45,7 +45,6 @@ var Pagination = forwardRef((props, ref) => {
|
|
45
45
|
} = omitThemeProps(mergedProps);
|
46
46
|
const withControls = useValue(_withControls);
|
47
47
|
const withEdges = useValue(_withEdges);
|
48
|
-
disabled != null ? disabled : disabled = isDisabled;
|
49
48
|
const { currentPage, range, onChange, onFirst, onLast, onNext, onPrev } = usePagination({
|
50
49
|
boundaries,
|
51
50
|
defaultPage,
|
@@ -80,14 +79,14 @@ var Pagination = forwardRef((props, ref) => {
|
|
80
79
|
{
|
81
80
|
ref,
|
82
81
|
className: cx("ui-pagination", className),
|
83
|
-
"data-disabled": dataAttr(
|
82
|
+
"data-disabled": dataAttr(disabled),
|
84
83
|
__css: css,
|
85
84
|
...containerProps,
|
86
85
|
children: /* @__PURE__ */ jsxs(
|
87
86
|
ui.ul,
|
88
87
|
{
|
89
88
|
className: "ui-pagination-inner",
|
90
|
-
"data-disabled": dataAttr(
|
89
|
+
"data-disabled": dataAttr(disabled),
|
91
90
|
__css: {
|
92
91
|
alignItems: "center",
|
93
92
|
display: "flex",
|
@@ -172,4 +171,4 @@ Pagination.__ui__ = "Pagination";
|
|
172
171
|
export {
|
173
172
|
Pagination
|
174
173
|
};
|
175
|
-
//# sourceMappingURL=chunk-
|
174
|
+
//# sourceMappingURL=chunk-4DT6X722.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 const {\n className,\n boundaries,\n component: Component = PaginationItem,\n defaultPage,\n isDisabled,\n disabled = 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 const withControls = useValue(_withControls)\n const withEdges = useValue(_withEdges)\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 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 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(disabled)}\n __css={css}\n {...containerProps}\n >\n <ui.ul\n className=\"ui-pagination-inner\"\n data-disabled={dataAttr(disabled)}\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"]}
|
@@ -8,7 +8,7 @@ import {
|
|
8
8
|
} from "./chunk-VZWGYG76.mjs";
|
9
9
|
import {
|
10
10
|
usePaginationContext
|
11
|
-
} from "./chunk-
|
11
|
+
} from "./chunk-ZOXC7X6K.mjs";
|
12
12
|
|
13
13
|
// src/pagination-item.tsx
|
14
14
|
import { forwardRef, ui } from "@yamada-ui/core";
|
@@ -25,25 +25,21 @@ var iconMap = {
|
|
25
25
|
var PaginationItem = forwardRef(
|
26
26
|
({
|
27
27
|
className,
|
28
|
-
active,
|
29
|
-
children,
|
30
|
-
disabled,
|
31
|
-
disableRipple,
|
32
28
|
isActive,
|
33
|
-
|
29
|
+
active = isActive,
|
34
30
|
page,
|
31
|
+
children = ((_a) => (_a = iconMap[page]) != null ? _a : page)(),
|
32
|
+
isDisabled,
|
33
|
+
disabled = isDisabled,
|
34
|
+
disableRipple,
|
35
35
|
...rest
|
36
36
|
}, ref) => {
|
37
|
-
var _a;
|
38
37
|
const styles = usePaginationContext();
|
39
|
-
const
|
38
|
+
const ellipsis = page === "ellipsis";
|
40
39
|
const { onPointerDown, ...rippleProps } = useRipple({
|
41
40
|
...rest,
|
42
|
-
|
41
|
+
disabled: disableRipple || disabled || ellipsis
|
43
42
|
});
|
44
|
-
children != null ? children : children = (_a = iconMap[page]) != null ? _a : page;
|
45
|
-
active != null ? active : active = isActive;
|
46
|
-
disabled != null ? disabled : disabled = isDisabled;
|
47
43
|
const css = {
|
48
44
|
alignItems: "center",
|
49
45
|
display: "flex",
|
@@ -54,12 +50,12 @@ var PaginationItem = forwardRef(
|
|
54
50
|
...styles.item,
|
55
51
|
...styles[page]
|
56
52
|
};
|
57
|
-
const Component = ui[
|
53
|
+
const Component = ui[ellipsis ? "span" : "button"];
|
58
54
|
return /* @__PURE__ */ jsxs(
|
59
55
|
Component,
|
60
56
|
{
|
61
57
|
ref,
|
62
|
-
...!
|
58
|
+
...!ellipsis ? {
|
63
59
|
type: "button",
|
64
60
|
"data-disabled": dataAttr(disabled),
|
65
61
|
"data-selected": dataAttr(active),
|
@@ -67,10 +63,10 @@ var PaginationItem = forwardRef(
|
|
67
63
|
} : {},
|
68
64
|
className: cx(
|
69
65
|
"ui-pagination__item",
|
70
|
-
|
66
|
+
ellipsis ? "ui-pagination__item--ellipsis" : void 0,
|
71
67
|
className
|
72
68
|
),
|
73
|
-
tabIndex: !
|
69
|
+
tabIndex: !ellipsis ? 0 : -1,
|
74
70
|
__css: css,
|
75
71
|
...rest,
|
76
72
|
onPointerDown,
|
@@ -88,4 +84,4 @@ PaginationItem.__ui__ = "PaginationItem";
|
|
88
84
|
export {
|
89
85
|
PaginationItem
|
90
86
|
};
|
91
|
-
//# sourceMappingURL=chunk-
|
87
|
+
//# sourceMappingURL=chunk-V3A6LHVY.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 isActive,\n active = isActive,\n page,\n children = iconMap[page] ?? page,\n isDisabled,\n disabled = isDisabled,\n disableRipple,\n ...rest\n },\n ref,\n ) => {\n const styles = usePaginationContext()\n const ellipsis = page === \"ellipsis\"\n const { onPointerDown, ...rippleProps } = useRipple({\n ...rest,\n disabled: disableRipple || disabled || ellipsis,\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 const Component = ui[ellipsis ? \"span\" : \"button\"]\n\n return (\n <Component\n ref={ref}\n {...(!ellipsis\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 ellipsis ? \"ui-pagination__item--ellipsis\" : undefined,\n className,\n )}\n tabIndex={!ellipsis ? 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,cAyCN,YAzCM;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,SAAS;AAAA,IACT;AAAA,IACA,YAAW,sBAAQ,IAAI,MAAZ,YAAiB;AAAA,IAC5B;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,SAAS,qBAAqB;AACpC,UAAM,WAAW,SAAS;AAC1B,UAAM,EAAE,eAAe,GAAG,YAAY,IAAI,UAAU;AAAA,MAClD,GAAG;AAAA,MACH,UAAU,iBAAiB,YAAY;AAAA,IACzC,CAAC;AACD,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;AACA,UAAM,YAAY,GAAG,WAAW,SAAS,QAAQ;AAEjD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACC,GAAI,CAAC,WACF;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,WAAW,kCAAkC;AAAA,UAC7C;AAAA,QACF;AAAA,QACA,UAAU,CAAC,WAAW,IAAI;AAAA,QAC1B,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,8 +13,8 @@ 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,
|
17
16
|
isDisabled = false,
|
17
|
+
disabled = isDisabled,
|
18
18
|
page,
|
19
19
|
siblings: _siblings = 1,
|
20
20
|
total,
|
@@ -22,29 +22,11 @@ var usePagination = ({
|
|
22
22
|
}) => {
|
23
23
|
const siblings = useValue(_siblings);
|
24
24
|
const boundaries = useValue(_boundaries);
|
25
|
-
disabled != null ? disabled : disabled = isDisabled;
|
26
25
|
const [currentPage, setCurrentPage] = useControllableState({
|
27
26
|
defaultValue: defaultPage,
|
28
27
|
value: page,
|
29
28
|
onChange: onChangeProp
|
30
29
|
});
|
31
|
-
const onFirst = useCallback(() => setCurrentPage(1), [setCurrentPage]);
|
32
|
-
const onLast = useCallback(
|
33
|
-
() => setCurrentPage(total),
|
34
|
-
[setCurrentPage, total]
|
35
|
-
);
|
36
|
-
const onPrev = useCallback(
|
37
|
-
() => setCurrentPage((prev) => prev === 1 ? prev : prev - 1),
|
38
|
-
[setCurrentPage]
|
39
|
-
);
|
40
|
-
const onNext = useCallback(
|
41
|
-
() => setCurrentPage((prev) => prev === total ? prev : prev + 1),
|
42
|
-
[setCurrentPage, total]
|
43
|
-
);
|
44
|
-
const onChange = useCallback(
|
45
|
-
(page2) => setCurrentPage(page2),
|
46
|
-
[setCurrentPage]
|
47
|
-
);
|
48
30
|
const range = useMemo(() => {
|
49
31
|
const minimumTotal = siblings * 2 + 3 + boundaries * 2;
|
50
32
|
if (minimumTotal >= total) return computedRange(1, total);
|
@@ -76,6 +58,23 @@ var usePagination = ({
|
|
76
58
|
...computedRange(total - boundaries + 1, total)
|
77
59
|
];
|
78
60
|
}, [boundaries, siblings, currentPage, total]);
|
61
|
+
const onFirst = useCallback(() => setCurrentPage(1), [setCurrentPage]);
|
62
|
+
const onLast = useCallback(
|
63
|
+
() => setCurrentPage(total),
|
64
|
+
[setCurrentPage, total]
|
65
|
+
);
|
66
|
+
const onPrev = useCallback(
|
67
|
+
() => setCurrentPage((prev) => prev === 1 ? prev : prev - 1),
|
68
|
+
[setCurrentPage]
|
69
|
+
);
|
70
|
+
const onNext = useCallback(
|
71
|
+
() => setCurrentPage((prev) => prev === total ? prev : prev + 1),
|
72
|
+
[setCurrentPage, total]
|
73
|
+
);
|
74
|
+
const onChange = useCallback(
|
75
|
+
(page2) => setCurrentPage(page2),
|
76
|
+
[setCurrentPage]
|
77
|
+
);
|
79
78
|
return {
|
80
79
|
currentPage,
|
81
80
|
disabled,
|
@@ -95,4 +94,4 @@ export {
|
|
95
94
|
computedRange,
|
96
95
|
usePagination
|
97
96
|
};
|
98
|
-
//# sourceMappingURL=chunk-
|
97
|
+
//# sourceMappingURL=chunk-ZOXC7X6K.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 isDisabled = false,\n disabled = isDisabled,\n page,\n siblings: _siblings = 1,\n total,\n onChange: onChangeProp,\n}: UsePaginationProps) => {\n const siblings = useValue(_siblings)\n const boundaries = useValue(_boundaries)\n const [currentPage, setCurrentPage] = useControllableState({\n defaultValue: defaultPage,\n value: page,\n onChange: onChangeProp,\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 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 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 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;AAAA,EACb,WAAW;AAAA,EACX;AAAA,EACA,UAAU,YAAY;AAAA,EACtB;AAAA,EACA,UAAU;AACZ,MAA0B;AACxB,QAAM,WAAW,SAAS,SAAS;AACnC,QAAM,aAAa,SAAS,WAAW;AACvC,QAAM,CAAC,aAAa,cAAc,IAAI,qBAAqB;AAAA,IACzD,cAAc;AAAA,IACd,OAAO;AAAA,IACP,UAAU;AAAA,EACZ,CAAC;AACD,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;AACxE,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,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,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/index.js
CHANGED
@@ -109,8 +109,8 @@ 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,
|
113
112
|
isDisabled = false,
|
113
|
+
disabled = isDisabled,
|
114
114
|
page,
|
115
115
|
siblings: _siblings = 1,
|
116
116
|
total,
|
@@ -118,29 +118,11 @@ var usePagination = ({
|
|
118
118
|
}) => {
|
119
119
|
const siblings = (0, import_use_value.useValue)(_siblings);
|
120
120
|
const boundaries = (0, import_use_value.useValue)(_boundaries);
|
121
|
-
disabled != null ? disabled : disabled = isDisabled;
|
122
121
|
const [currentPage, setCurrentPage] = (0, import_use_controllable_state.useControllableState)({
|
123
122
|
defaultValue: defaultPage,
|
124
123
|
value: page,
|
125
124
|
onChange: onChangeProp
|
126
125
|
});
|
127
|
-
const onFirst = (0, import_react.useCallback)(() => setCurrentPage(1), [setCurrentPage]);
|
128
|
-
const onLast = (0, import_react.useCallback)(
|
129
|
-
() => setCurrentPage(total),
|
130
|
-
[setCurrentPage, total]
|
131
|
-
);
|
132
|
-
const onPrev = (0, import_react.useCallback)(
|
133
|
-
() => setCurrentPage((prev) => prev === 1 ? prev : prev - 1),
|
134
|
-
[setCurrentPage]
|
135
|
-
);
|
136
|
-
const onNext = (0, import_react.useCallback)(
|
137
|
-
() => setCurrentPage((prev) => prev === total ? prev : prev + 1),
|
138
|
-
[setCurrentPage, total]
|
139
|
-
);
|
140
|
-
const onChange = (0, import_react.useCallback)(
|
141
|
-
(page2) => setCurrentPage(page2),
|
142
|
-
[setCurrentPage]
|
143
|
-
);
|
144
126
|
const range = (0, import_react.useMemo)(() => {
|
145
127
|
const minimumTotal = siblings * 2 + 3 + boundaries * 2;
|
146
128
|
if (minimumTotal >= total) return computedRange(1, total);
|
@@ -172,6 +154,23 @@ var usePagination = ({
|
|
172
154
|
...computedRange(total - boundaries + 1, total)
|
173
155
|
];
|
174
156
|
}, [boundaries, siblings, currentPage, total]);
|
157
|
+
const onFirst = (0, import_react.useCallback)(() => setCurrentPage(1), [setCurrentPage]);
|
158
|
+
const onLast = (0, import_react.useCallback)(
|
159
|
+
() => setCurrentPage(total),
|
160
|
+
[setCurrentPage, total]
|
161
|
+
);
|
162
|
+
const onPrev = (0, import_react.useCallback)(
|
163
|
+
() => setCurrentPage((prev) => prev === 1 ? prev : prev - 1),
|
164
|
+
[setCurrentPage]
|
165
|
+
);
|
166
|
+
const onNext = (0, import_react.useCallback)(
|
167
|
+
() => setCurrentPage((prev) => prev === total ? prev : prev + 1),
|
168
|
+
[setCurrentPage, total]
|
169
|
+
);
|
170
|
+
const onChange = (0, import_react.useCallback)(
|
171
|
+
(page2) => setCurrentPage(page2),
|
172
|
+
[setCurrentPage]
|
173
|
+
);
|
175
174
|
return {
|
176
175
|
currentPage,
|
177
176
|
disabled,
|
@@ -197,25 +196,21 @@ var iconMap = {
|
|
197
196
|
var PaginationItem = (0, import_core.forwardRef)(
|
198
197
|
({
|
199
198
|
className,
|
200
|
-
active,
|
201
|
-
children,
|
202
|
-
disabled,
|
203
|
-
disableRipple,
|
204
199
|
isActive,
|
205
|
-
|
200
|
+
active = isActive,
|
206
201
|
page,
|
202
|
+
children = ((_a) => (_a = iconMap[page]) != null ? _a : page)(),
|
203
|
+
isDisabled,
|
204
|
+
disabled = isDisabled,
|
205
|
+
disableRipple,
|
207
206
|
...rest
|
208
207
|
}, ref) => {
|
209
|
-
var _a;
|
210
208
|
const styles = usePaginationContext();
|
211
|
-
const
|
209
|
+
const ellipsis = page === "ellipsis";
|
212
210
|
const { onPointerDown, ...rippleProps } = (0, import_ripple.useRipple)({
|
213
211
|
...rest,
|
214
|
-
|
212
|
+
disabled: disableRipple || disabled || ellipsis
|
215
213
|
});
|
216
|
-
children != null ? children : children = (_a = iconMap[page]) != null ? _a : page;
|
217
|
-
active != null ? active : active = isActive;
|
218
|
-
disabled != null ? disabled : disabled = isDisabled;
|
219
214
|
const css = {
|
220
215
|
alignItems: "center",
|
221
216
|
display: "flex",
|
@@ -226,12 +221,12 @@ var PaginationItem = (0, import_core.forwardRef)(
|
|
226
221
|
...styles.item,
|
227
222
|
...styles[page]
|
228
223
|
};
|
229
|
-
const Component = import_core.ui[
|
224
|
+
const Component = import_core.ui[ellipsis ? "span" : "button"];
|
230
225
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
231
226
|
Component,
|
232
227
|
{
|
233
228
|
ref,
|
234
|
-
...!
|
229
|
+
...!ellipsis ? {
|
235
230
|
type: "button",
|
236
231
|
"data-disabled": (0, import_utils2.dataAttr)(disabled),
|
237
232
|
"data-selected": (0, import_utils2.dataAttr)(active),
|
@@ -239,10 +234,10 @@ var PaginationItem = (0, import_core.forwardRef)(
|
|
239
234
|
} : {},
|
240
235
|
className: (0, import_utils2.cx)(
|
241
236
|
"ui-pagination__item",
|
242
|
-
|
237
|
+
ellipsis ? "ui-pagination__item--ellipsis" : void 0,
|
243
238
|
className
|
244
239
|
),
|
245
|
-
tabIndex: !
|
240
|
+
tabIndex: !ellipsis ? 0 : -1,
|
246
241
|
__css: css,
|
247
242
|
...rest,
|
248
243
|
onPointerDown,
|
@@ -261,13 +256,13 @@ PaginationItem.__ui__ = "PaginationItem";
|
|
261
256
|
var import_jsx_runtime3 = require("react/jsx-runtime");
|
262
257
|
var Pagination = (0, import_core2.forwardRef)((props, ref) => {
|
263
258
|
const [styles, mergedProps] = (0, import_core2.useComponentMultiStyle)("Pagination", props);
|
264
|
-
|
259
|
+
const {
|
265
260
|
className,
|
266
261
|
boundaries,
|
267
262
|
component: Component = PaginationItem,
|
268
263
|
defaultPage,
|
269
|
-
disabled,
|
270
264
|
isDisabled,
|
265
|
+
disabled = isDisabled,
|
271
266
|
page,
|
272
267
|
siblings,
|
273
268
|
total,
|
@@ -286,7 +281,6 @@ var Pagination = (0, import_core2.forwardRef)((props, ref) => {
|
|
286
281
|
} = (0, import_core2.omitThemeProps)(mergedProps);
|
287
282
|
const withControls = (0, import_use_value2.useValue)(_withControls);
|
288
283
|
const withEdges = (0, import_use_value2.useValue)(_withEdges);
|
289
|
-
disabled != null ? disabled : disabled = isDisabled;
|
290
284
|
const { currentPage, range, onChange, onFirst, onLast, onNext, onPrev } = usePagination({
|
291
285
|
boundaries,
|
292
286
|
defaultPage,
|
@@ -321,14 +315,14 @@ var Pagination = (0, import_core2.forwardRef)((props, ref) => {
|
|
321
315
|
{
|
322
316
|
ref,
|
323
317
|
className: (0, import_utils3.cx)("ui-pagination", className),
|
324
|
-
"data-disabled": (0, import_utils3.dataAttr)(
|
318
|
+
"data-disabled": (0, import_utils3.dataAttr)(disabled),
|
325
319
|
__css: css,
|
326
320
|
...containerProps,
|
327
321
|
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
328
322
|
import_core2.ui.ul,
|
329
323
|
{
|
330
324
|
className: "ui-pagination-inner",
|
331
|
-
"data-disabled": (0, import_utils3.dataAttr)(
|
325
|
+
"data-disabled": (0, import_utils3.dataAttr)(disabled),
|
332
326
|
__css: {
|
333
327
|
alignItems: "center",
|
334
328
|
display: "flex",
|
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 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"]}
|
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 disabled = 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 const withControls = useValue(_withControls)\n const withEdges = useValue(_withEdges)\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 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 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(disabled)}\n __css={css}\n {...containerProps}\n >\n <ui.ul\n className=\"ui-pagination-inner\"\n data-disabled={dataAttr(disabled)}\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 isActive,\n active = isActive,\n page,\n children = iconMap[page] ?? page,\n isDisabled,\n disabled = isDisabled,\n disableRipple,\n ...rest\n },\n ref,\n ) => {\n const styles = usePaginationContext()\n const ellipsis = page === \"ellipsis\"\n const { onPointerDown, ...rippleProps } = useRipple({\n ...rest,\n disabled: disableRipple || disabled || ellipsis,\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 const Component = ui[ellipsis ? \"span\" : \"button\"]\n\n return (\n <Component\n ref={ref}\n {...(!ellipsis\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 ellipsis ? \"ui-pagination__item--ellipsis\" : undefined,\n className,\n )}\n tabIndex={!ellipsis ? 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 isDisabled = false,\n disabled = isDisabled,\n page,\n siblings: _siblings = 1,\n total,\n onChange: onChangeProp,\n}: UsePaginationProps) => {\n const siblings = useValue(_siblings)\n const boundaries = useValue(_boundaries)\n const [currentPage, setCurrentPage] = useControllableState({\n defaultValue: defaultPage,\n value: page,\n onChange: onChangeProp,\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 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 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 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-4DT6X722.mjs";
|
5
|
+
import "./chunk-V3A6LHVY.mjs";
|
6
6
|
import "./chunk-VZWGYG76.mjs";
|
7
7
|
import {
|
8
8
|
usePagination
|
9
|
-
} from "./chunk-
|
9
|
+
} from "./chunk-ZOXC7X6K.mjs";
|
10
10
|
export {
|
11
11
|
Pagination,
|
12
12
|
usePagination
|
package/dist/pagination-item.js
CHANGED
@@ -109,25 +109,21 @@ var iconMap = {
|
|
109
109
|
var PaginationItem = (0, import_core.forwardRef)(
|
110
110
|
({
|
111
111
|
className,
|
112
|
-
active,
|
113
|
-
children,
|
114
|
-
disabled,
|
115
|
-
disableRipple,
|
116
112
|
isActive,
|
117
|
-
|
113
|
+
active = isActive,
|
118
114
|
page,
|
115
|
+
children = ((_a) => (_a = iconMap[page]) != null ? _a : page)(),
|
116
|
+
isDisabled,
|
117
|
+
disabled = isDisabled,
|
118
|
+
disableRipple,
|
119
119
|
...rest
|
120
120
|
}, ref) => {
|
121
|
-
var _a;
|
122
121
|
const styles = usePaginationContext();
|
123
|
-
const
|
122
|
+
const ellipsis = page === "ellipsis";
|
124
123
|
const { onPointerDown, ...rippleProps } = (0, import_ripple.useRipple)({
|
125
124
|
...rest,
|
126
|
-
|
125
|
+
disabled: disableRipple || disabled || ellipsis
|
127
126
|
});
|
128
|
-
children != null ? children : children = (_a = iconMap[page]) != null ? _a : page;
|
129
|
-
active != null ? active : active = isActive;
|
130
|
-
disabled != null ? disabled : disabled = isDisabled;
|
131
127
|
const css = {
|
132
128
|
alignItems: "center",
|
133
129
|
display: "flex",
|
@@ -138,12 +134,12 @@ var PaginationItem = (0, import_core.forwardRef)(
|
|
138
134
|
...styles.item,
|
139
135
|
...styles[page]
|
140
136
|
};
|
141
|
-
const Component = import_core.ui[
|
137
|
+
const Component = import_core.ui[ellipsis ? "span" : "button"];
|
142
138
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
143
139
|
Component,
|
144
140
|
{
|
145
141
|
ref,
|
146
|
-
...!
|
142
|
+
...!ellipsis ? {
|
147
143
|
type: "button",
|
148
144
|
"data-disabled": (0, import_utils2.dataAttr)(disabled),
|
149
145
|
"data-selected": (0, import_utils2.dataAttr)(active),
|
@@ -151,10 +147,10 @@ var PaginationItem = (0, import_core.forwardRef)(
|
|
151
147
|
} : {},
|
152
148
|
className: (0, import_utils2.cx)(
|
153
149
|
"ui-pagination__item",
|
154
|
-
|
150
|
+
ellipsis ? "ui-pagination__item--ellipsis" : void 0,
|
155
151
|
className
|
156
152
|
),
|
157
|
-
tabIndex: !
|
153
|
+
tabIndex: !ellipsis ? 0 : -1,
|
158
154
|
__css: css,
|
159
155
|
...rest,
|
160
156
|
onPointerDown,
|
@@ -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`, 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"]}
|
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 isActive,\n active = isActive,\n page,\n children = iconMap[page] ?? page,\n isDisabled,\n disabled = isDisabled,\n disableRipple,\n ...rest\n },\n ref,\n ) => {\n const styles = usePaginationContext()\n const ellipsis = page === \"ellipsis\"\n const { onPointerDown, ...rippleProps } = useRipple({\n ...rest,\n disabled: disableRipple || disabled || ellipsis,\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 const Component = ui[ellipsis ? \"span\" : \"button\"]\n\n return (\n <Component\n ref={ref}\n {...(!ellipsis\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 ellipsis ? \"ui-pagination__item--ellipsis\" : undefined,\n className,\n )}\n tabIndex={!ellipsis ? 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 isDisabled = false,\n disabled = isDisabled,\n page,\n siblings: _siblings = 1,\n total,\n onChange: onChangeProp,\n}: UsePaginationProps) => {\n const siblings = useValue(_siblings)\n const boundaries = useValue(_boundaries)\n const [currentPage, setCurrentPage] = useControllableState({\n defaultValue: defaultPage,\n value: page,\n onChange: onChangeProp,\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 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 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 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,8 +106,8 @@ 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,
|
110
109
|
isDisabled = false,
|
110
|
+
disabled = isDisabled,
|
111
111
|
page,
|
112
112
|
siblings: _siblings = 1,
|
113
113
|
total,
|
@@ -115,29 +115,11 @@ var usePagination = ({
|
|
115
115
|
}) => {
|
116
116
|
const siblings = (0, import_use_value.useValue)(_siblings);
|
117
117
|
const boundaries = (0, import_use_value.useValue)(_boundaries);
|
118
|
-
disabled != null ? disabled : disabled = isDisabled;
|
119
118
|
const [currentPage, setCurrentPage] = (0, import_use_controllable_state.useControllableState)({
|
120
119
|
defaultValue: defaultPage,
|
121
120
|
value: page,
|
122
121
|
onChange: onChangeProp
|
123
122
|
});
|
124
|
-
const onFirst = (0, import_react.useCallback)(() => setCurrentPage(1), [setCurrentPage]);
|
125
|
-
const onLast = (0, import_react.useCallback)(
|
126
|
-
() => setCurrentPage(total),
|
127
|
-
[setCurrentPage, total]
|
128
|
-
);
|
129
|
-
const onPrev = (0, import_react.useCallback)(
|
130
|
-
() => setCurrentPage((prev) => prev === 1 ? prev : prev - 1),
|
131
|
-
[setCurrentPage]
|
132
|
-
);
|
133
|
-
const onNext = (0, import_react.useCallback)(
|
134
|
-
() => setCurrentPage((prev) => prev === total ? prev : prev + 1),
|
135
|
-
[setCurrentPage, total]
|
136
|
-
);
|
137
|
-
const onChange = (0, import_react.useCallback)(
|
138
|
-
(page2) => setCurrentPage(page2),
|
139
|
-
[setCurrentPage]
|
140
|
-
);
|
141
123
|
const range = (0, import_react.useMemo)(() => {
|
142
124
|
const minimumTotal = siblings * 2 + 3 + boundaries * 2;
|
143
125
|
if (minimumTotal >= total) return computedRange(1, total);
|
@@ -169,6 +151,23 @@ var usePagination = ({
|
|
169
151
|
...computedRange(total - boundaries + 1, total)
|
170
152
|
];
|
171
153
|
}, [boundaries, siblings, currentPage, total]);
|
154
|
+
const onFirst = (0, import_react.useCallback)(() => setCurrentPage(1), [setCurrentPage]);
|
155
|
+
const onLast = (0, import_react.useCallback)(
|
156
|
+
() => setCurrentPage(total),
|
157
|
+
[setCurrentPage, total]
|
158
|
+
);
|
159
|
+
const onPrev = (0, import_react.useCallback)(
|
160
|
+
() => setCurrentPage((prev) => prev === 1 ? prev : prev - 1),
|
161
|
+
[setCurrentPage]
|
162
|
+
);
|
163
|
+
const onNext = (0, import_react.useCallback)(
|
164
|
+
() => setCurrentPage((prev) => prev === total ? prev : prev + 1),
|
165
|
+
[setCurrentPage, total]
|
166
|
+
);
|
167
|
+
const onChange = (0, import_react.useCallback)(
|
168
|
+
(page2) => setCurrentPage(page2),
|
169
|
+
[setCurrentPage]
|
170
|
+
);
|
172
171
|
return {
|
173
172
|
currentPage,
|
174
173
|
disabled,
|
@@ -194,25 +193,21 @@ var iconMap = {
|
|
194
193
|
var PaginationItem = (0, import_core.forwardRef)(
|
195
194
|
({
|
196
195
|
className,
|
197
|
-
active,
|
198
|
-
children,
|
199
|
-
disabled,
|
200
|
-
disableRipple,
|
201
196
|
isActive,
|
202
|
-
|
197
|
+
active = isActive,
|
203
198
|
page,
|
199
|
+
children = ((_a) => (_a = iconMap[page]) != null ? _a : page)(),
|
200
|
+
isDisabled,
|
201
|
+
disabled = isDisabled,
|
202
|
+
disableRipple,
|
204
203
|
...rest
|
205
204
|
}, ref) => {
|
206
|
-
var _a;
|
207
205
|
const styles = usePaginationContext();
|
208
|
-
const
|
206
|
+
const ellipsis = page === "ellipsis";
|
209
207
|
const { onPointerDown, ...rippleProps } = (0, import_ripple.useRipple)({
|
210
208
|
...rest,
|
211
|
-
|
209
|
+
disabled: disableRipple || disabled || ellipsis
|
212
210
|
});
|
213
|
-
children != null ? children : children = (_a = iconMap[page]) != null ? _a : page;
|
214
|
-
active != null ? active : active = isActive;
|
215
|
-
disabled != null ? disabled : disabled = isDisabled;
|
216
211
|
const css = {
|
217
212
|
alignItems: "center",
|
218
213
|
display: "flex",
|
@@ -223,12 +218,12 @@ var PaginationItem = (0, import_core.forwardRef)(
|
|
223
218
|
...styles.item,
|
224
219
|
...styles[page]
|
225
220
|
};
|
226
|
-
const Component = import_core.ui[
|
221
|
+
const Component = import_core.ui[ellipsis ? "span" : "button"];
|
227
222
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
228
223
|
Component,
|
229
224
|
{
|
230
225
|
ref,
|
231
|
-
...!
|
226
|
+
...!ellipsis ? {
|
232
227
|
type: "button",
|
233
228
|
"data-disabled": (0, import_utils2.dataAttr)(disabled),
|
234
229
|
"data-selected": (0, import_utils2.dataAttr)(active),
|
@@ -236,10 +231,10 @@ var PaginationItem = (0, import_core.forwardRef)(
|
|
236
231
|
} : {},
|
237
232
|
className: (0, import_utils2.cx)(
|
238
233
|
"ui-pagination__item",
|
239
|
-
|
234
|
+
ellipsis ? "ui-pagination__item--ellipsis" : void 0,
|
240
235
|
className
|
241
236
|
),
|
242
|
-
tabIndex: !
|
237
|
+
tabIndex: !ellipsis ? 0 : -1,
|
243
238
|
__css: css,
|
244
239
|
...rest,
|
245
240
|
onPointerDown,
|
@@ -258,13 +253,13 @@ PaginationItem.__ui__ = "PaginationItem";
|
|
258
253
|
var import_jsx_runtime3 = require("react/jsx-runtime");
|
259
254
|
var Pagination = (0, import_core2.forwardRef)((props, ref) => {
|
260
255
|
const [styles, mergedProps] = (0, import_core2.useComponentMultiStyle)("Pagination", props);
|
261
|
-
|
256
|
+
const {
|
262
257
|
className,
|
263
258
|
boundaries,
|
264
259
|
component: Component = PaginationItem,
|
265
260
|
defaultPage,
|
266
|
-
disabled,
|
267
261
|
isDisabled,
|
262
|
+
disabled = isDisabled,
|
268
263
|
page,
|
269
264
|
siblings,
|
270
265
|
total,
|
@@ -283,7 +278,6 @@ var Pagination = (0, import_core2.forwardRef)((props, ref) => {
|
|
283
278
|
} = (0, import_core2.omitThemeProps)(mergedProps);
|
284
279
|
const withControls = (0, import_use_value2.useValue)(_withControls);
|
285
280
|
const withEdges = (0, import_use_value2.useValue)(_withEdges);
|
286
|
-
disabled != null ? disabled : disabled = isDisabled;
|
287
281
|
const { currentPage, range, onChange, onFirst, onLast, onNext, onPrev } = usePagination({
|
288
282
|
boundaries,
|
289
283
|
defaultPage,
|
@@ -318,14 +312,14 @@ var Pagination = (0, import_core2.forwardRef)((props, ref) => {
|
|
318
312
|
{
|
319
313
|
ref,
|
320
314
|
className: (0, import_utils3.cx)("ui-pagination", className),
|
321
|
-
"data-disabled": (0, import_utils3.dataAttr)(
|
315
|
+
"data-disabled": (0, import_utils3.dataAttr)(disabled),
|
322
316
|
__css: css,
|
323
317
|
...containerProps,
|
324
318
|
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
325
319
|
import_core2.ui.ul,
|
326
320
|
{
|
327
321
|
className: "ui-pagination-inner",
|
328
|
-
"data-disabled": (0, import_utils3.dataAttr)(
|
322
|
+
"data-disabled": (0, import_utils3.dataAttr)(disabled),
|
329
323
|
__css: {
|
330
324
|
alignItems: "center",
|
331
325
|
display: "flex",
|
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 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"]}
|
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 disabled = 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 const withControls = useValue(_withControls)\n const withEdges = useValue(_withEdges)\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 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 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(disabled)}\n __css={css}\n {...containerProps}\n >\n <ui.ul\n className=\"ui-pagination-inner\"\n data-disabled={dataAttr(disabled)}\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 isActive,\n active = isActive,\n page,\n children = iconMap[page] ?? page,\n isDisabled,\n disabled = isDisabled,\n disableRipple,\n ...rest\n },\n ref,\n ) => {\n const styles = usePaginationContext()\n const ellipsis = page === \"ellipsis\"\n const { onPointerDown, ...rippleProps } = useRipple({\n ...rest,\n disabled: disableRipple || disabled || ellipsis,\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 const Component = ui[ellipsis ? \"span\" : \"button\"]\n\n return (\n <Component\n ref={ref}\n {...(!ellipsis\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 ellipsis ? \"ui-pagination__item--ellipsis\" : undefined,\n className,\n )}\n tabIndex={!ellipsis ? 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 isDisabled = false,\n disabled = isDisabled,\n page,\n siblings: _siblings = 1,\n total,\n onChange: onChangeProp,\n}: UsePaginationProps) => {\n const siblings = useValue(_siblings)\n const boundaries = useValue(_boundaries)\n const [currentPage, setCurrentPage] = useControllableState({\n defaultValue: defaultPage,\n value: page,\n onChange: onChangeProp,\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 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 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 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-4DT6X722.mjs";
|
5
|
+
import "./chunk-V3A6LHVY.mjs";
|
6
6
|
import "./chunk-VZWGYG76.mjs";
|
7
|
-
import "./chunk-
|
7
|
+
import "./chunk-ZOXC7X6K.mjs";
|
8
8
|
export {
|
9
9
|
Pagination
|
10
10
|
};
|
@@ -54,7 +54,7 @@ interface UsePaginationProps {
|
|
54
54
|
*/
|
55
55
|
onChange?: (page: number) => void;
|
56
56
|
}
|
57
|
-
declare const usePagination: ({ boundaries: _boundaries, defaultPage,
|
57
|
+
declare const usePagination: ({ boundaries: _boundaries, defaultPage, isDisabled, disabled, page, siblings: _siblings, total, onChange: onChangeProp, }: UsePaginationProps) => {
|
58
58
|
currentPage: number;
|
59
59
|
disabled: boolean;
|
60
60
|
range: (number | "ellipsis")[];
|
package/dist/use-pagination.d.ts
CHANGED
@@ -54,7 +54,7 @@ interface UsePaginationProps {
|
|
54
54
|
*/
|
55
55
|
onChange?: (page: number) => void;
|
56
56
|
}
|
57
|
-
declare const usePagination: ({ boundaries: _boundaries, defaultPage,
|
57
|
+
declare const usePagination: ({ boundaries: _boundaries, defaultPage, isDisabled, disabled, page, siblings: _siblings, total, onChange: onChangeProp, }: UsePaginationProps) => {
|
58
58
|
currentPage: number;
|
59
59
|
disabled: boolean;
|
60
60
|
range: (number | "ellipsis")[];
|
package/dist/use-pagination.js
CHANGED
@@ -39,8 +39,8 @@ 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,
|
43
42
|
isDisabled = false,
|
43
|
+
disabled = isDisabled,
|
44
44
|
page,
|
45
45
|
siblings: _siblings = 1,
|
46
46
|
total,
|
@@ -48,29 +48,11 @@ var usePagination = ({
|
|
48
48
|
}) => {
|
49
49
|
const siblings = (0, import_use_value.useValue)(_siblings);
|
50
50
|
const boundaries = (0, import_use_value.useValue)(_boundaries);
|
51
|
-
disabled != null ? disabled : disabled = isDisabled;
|
52
51
|
const [currentPage, setCurrentPage] = (0, import_use_controllable_state.useControllableState)({
|
53
52
|
defaultValue: defaultPage,
|
54
53
|
value: page,
|
55
54
|
onChange: onChangeProp
|
56
55
|
});
|
57
|
-
const onFirst = (0, import_react.useCallback)(() => setCurrentPage(1), [setCurrentPage]);
|
58
|
-
const onLast = (0, import_react.useCallback)(
|
59
|
-
() => setCurrentPage(total),
|
60
|
-
[setCurrentPage, total]
|
61
|
-
);
|
62
|
-
const onPrev = (0, import_react.useCallback)(
|
63
|
-
() => setCurrentPage((prev) => prev === 1 ? prev : prev - 1),
|
64
|
-
[setCurrentPage]
|
65
|
-
);
|
66
|
-
const onNext = (0, import_react.useCallback)(
|
67
|
-
() => setCurrentPage((prev) => prev === total ? prev : prev + 1),
|
68
|
-
[setCurrentPage, total]
|
69
|
-
);
|
70
|
-
const onChange = (0, import_react.useCallback)(
|
71
|
-
(page2) => setCurrentPage(page2),
|
72
|
-
[setCurrentPage]
|
73
|
-
);
|
74
56
|
const range = (0, import_react.useMemo)(() => {
|
75
57
|
const minimumTotal = siblings * 2 + 3 + boundaries * 2;
|
76
58
|
if (minimumTotal >= total) return computedRange(1, total);
|
@@ -102,6 +84,23 @@ var usePagination = ({
|
|
102
84
|
...computedRange(total - boundaries + 1, total)
|
103
85
|
];
|
104
86
|
}, [boundaries, siblings, currentPage, total]);
|
87
|
+
const onFirst = (0, import_react.useCallback)(() => setCurrentPage(1), [setCurrentPage]);
|
88
|
+
const onLast = (0, import_react.useCallback)(
|
89
|
+
() => setCurrentPage(total),
|
90
|
+
[setCurrentPage, total]
|
91
|
+
);
|
92
|
+
const onPrev = (0, import_react.useCallback)(
|
93
|
+
() => setCurrentPage((prev) => prev === 1 ? prev : prev - 1),
|
94
|
+
[setCurrentPage]
|
95
|
+
);
|
96
|
+
const onNext = (0, import_react.useCallback)(
|
97
|
+
() => setCurrentPage((prev) => prev === total ? prev : prev + 1),
|
98
|
+
[setCurrentPage, total]
|
99
|
+
);
|
100
|
+
const onChange = (0, import_react.useCallback)(
|
101
|
+
(page2) => setCurrentPage(page2),
|
102
|
+
[setCurrentPage]
|
103
|
+
);
|
105
104
|
return {
|
106
105
|
currentPage,
|
107
106
|
disabled,
|
@@ -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 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
|
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 isDisabled = false,\n disabled = isDisabled,\n page,\n siblings: _siblings = 1,\n total,\n onChange: onChangeProp,\n}: UsePaginationProps) => {\n const siblings = useValue(_siblings)\n const boundaries = useValue(_boundaries)\n const [currentPage, setCurrentPage] = useControllableState({\n defaultValue: defaultPage,\n value: page,\n onChange: onChangeProp,\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 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 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 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;AAAA,EACb,WAAW;AAAA,EACX;AAAA,EACA,UAAU,YAAY;AAAA,EACtB;AAAA,EACA,UAAU;AACZ,MAA0B;AACxB,QAAM,eAAW,2BAAS,SAAS;AACnC,QAAM,iBAAa,2BAAS,WAAW;AACvC,QAAM,CAAC,aAAa,cAAc,QAAI,oDAAqB;AAAA,IACzD,cAAc;AAAA,IACd,OAAO;AAAA,IACP,UAAU;AAAA,EACZ,CAAC;AACD,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;AACxE,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,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,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.8-dev-
|
3
|
+
"version": "1.1.8-dev-20241215203956",
|
4
4
|
"description": "Yamada UI pagination component",
|
5
5
|
"keywords": [
|
6
6
|
"yamada",
|
@@ -36,12 +36,12 @@
|
|
36
36
|
"url": "https://github.com/yamada-ui/yamada-ui/issues"
|
37
37
|
},
|
38
38
|
"dependencies": {
|
39
|
-
"@yamada-ui/core": "1.16.2-dev-
|
40
|
-
"@yamada-ui/icon": "1.1.17-dev-
|
41
|
-
"@yamada-ui/ripple": "1.0.48-dev-
|
42
|
-
"@yamada-ui/use-controllable-state": "1.0.26-dev-
|
43
|
-
"@yamada-ui/use-value": "1.1.34-dev-
|
44
|
-
"@yamada-ui/utils": "1.6.2-dev-
|
39
|
+
"@yamada-ui/core": "1.16.2-dev-20241215203956",
|
40
|
+
"@yamada-ui/icon": "1.1.17-dev-20241215203956",
|
41
|
+
"@yamada-ui/ripple": "1.0.48-dev-20241215203956",
|
42
|
+
"@yamada-ui/use-controllable-state": "1.0.26-dev-20241215203956",
|
43
|
+
"@yamada-ui/use-value": "1.1.34-dev-20241215203956",
|
44
|
+
"@yamada-ui/utils": "1.6.2-dev-20241215203956"
|
45
45
|
},
|
46
46
|
"devDependencies": {
|
47
47
|
"clean-package": "2.2.0",
|
@@ -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`, 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":[]}
|
@@ -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 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 +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 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":";;;;;;;;;;AASA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,gBAAgB;AACzB,SAAS,IAAI,UAAU,kBAAkB;AACzC,SAAS,eAAe;AAgHd,cA6BF,YA7BE;AA9CH,IAAM,aAAa,WAAkC,CAAC,OAAO,QAAQ;AAC1E,QAAM,CAAC,QAAQ,WAAW,IAAI,uBAAuB,cAAc,KAAK;AACxE,MAAI;AAAA,IACF;AAAA,IACA;AAAA,IACA,WAAW,YAAY;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc,gBAAgB;AAAA,IAC9B,WAAW,aAAa;AAAA,IACxB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,GAAG;AAAA,EACL,IAAI,eAAe,WAAW;AAE9B,QAAM,eAAe,SAAS,aAAa;AAC3C,QAAM,YAAY,SAAS,UAAU;AAErC,2CAAa;AAEb,QAAM,EAAE,aAAa,OAAO,UAAU,SAAS,QAAQ,QAAQ,OAAO,IACpE,cAAc;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,EACZ,CAAC;AAEH,QAAM,WAAW;AAAA,IACf,MACE,MAAM,IAAI,CAACA,OAAM,QACf,oBAAC,GAAG,IAAH,EACC;AAAA,MAAC;AAAA;AAAA,QACC,cAAYA,UAAS,aAAa,cAAcA,KAAI,KAAK;AAAA,QACzD,QAAQ,gBAAgBA;AAAA,QACxB;AAAA,QACC,GAAG;AAAA,QACJ,MAAMA;AAAA,QACN,SAAS;AAAA,UACP,uCAAW;AAAA,UACXA,UAAS,aAAa,MAAM,SAASA,KAAI,IAAI;AAAA,QAC/C;AAAA;AAAA,IACF,KAXU,GAYZ,CACD;AAAA,IACH,CAAC,WAAW,aAAa,UAAU,UAAU,OAAO,SAAS;AAAA,EAC/D;AAEA,QAAM,MAAmB;AAAA,IACvB,GAAG,OAAO;AAAA,EACZ;AAEA,SACE,oBAAC,sBAAmB,OAAO,QACzB;AAAA,IAAC,GAAG;AAAA,IAAH;AAAA,MACC;AAAA,MACA,WAAW,GAAG,iBAAiB,SAAS;AAAA,MACxC,iBAAe,SAAS,UAAU;AAAA,MAClC,OAAO;AAAA,MACN,GAAG;AAAA,MAEJ;AAAA,QAAC,GAAG;AAAA,QAAH;AAAA,UACC,WAAU;AAAA,UACV,iBAAe,SAAS,UAAU;AAAA,UAClC,OAAO;AAAA,YACL,YAAY;AAAA,YACZ,SAAS;AAAA,YACT,GAAG,OAAO;AAAA,UACZ;AAAA,UACC,GAAG;AAAA,UAEH;AAAA,wBACC,oBAAC,GAAG,IAAH,EACC;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,cAAW;AAAA,gBACX,UAAU,YAAY,gBAAgB;AAAA,gBACtC,MAAK;AAAA,gBACJ,GAAG;AAAA,gBACH,GAAG;AAAA,gBACJ,SAAS;AAAA,kBACP,uCAAW;AAAA,kBACX,iDAAgB;AAAA,kBAChB;AAAA,gBACF;AAAA;AAAA,YACF,GACF,IACE;AAAA,YAEH,eACC,oBAAC,GAAG,IAAH,EACC;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,cAAW;AAAA,gBACX,UAAU,YAAY,gBAAgB;AAAA,gBACtC,MAAK;AAAA,gBACJ,GAAG;AAAA,gBACH,GAAG;AAAA,gBACJ,SAAS;AAAA,kBACP,6CAAc;AAAA,kBACd,qDAAkB;AAAA,kBAClB;AAAA,gBACF;AAAA;AAAA,YACF,GACF,IACE;AAAA,YAEH;AAAA,YAEA,eACC,oBAAC,GAAG,IAAH,EACC;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,cAAW;AAAA,gBACX,UAAU,YAAY,gBAAgB;AAAA,gBACtC,MAAK;AAAA,gBACJ,GAAG;AAAA,gBACH,GAAG;AAAA,gBACJ,SAAS;AAAA,kBACP,6CAAc;AAAA,kBACd,qDAAkB;AAAA,kBAClB;AAAA,gBACF;AAAA;AAAA,YACF,GACF,IACE;AAAA,YAEH,YACC,oBAAC,GAAG,IAAH,EACC;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,cAAW;AAAA,gBACX,UAAU,YAAY,gBAAgB;AAAA,gBACtC,MAAK;AAAA,gBACJ,GAAG;AAAA,gBACH,GAAG;AAAA,gBACJ,SAAS;AAAA,kBACP,uCAAW;AAAA,kBACX,+CAAe;AAAA,kBACf;AAAA,gBACF;AAAA;AAAA,YACF,GACF,IACE;AAAA;AAAA;AAAA,MACN;AAAA;AAAA,EACF,GACF;AAEJ,CAAC;AAED,WAAW,cAAc;AACzB,WAAW,SAAS;","names":["page"]}
|