@charcoal-ui/react 6.1.0-beta.2 → 6.1.0-beta.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Notification/Toast/index2.js +16 -20
- package/dist/components/Notification/Toast/index2.js.map +1 -1
- package/dist/components/Pagination/index2.js +52 -60
- package/dist/components/Pagination/index2.js.map +1 -1
- package/dist/index.css +661 -661
- package/dist/layered.css +661 -661
- package/dist/layered.css.map +1 -1
- package/package.json +5 -5
|
@@ -40,43 +40,39 @@ const Toast = forwardRef(function Toast({ position = "top", duration, order, ...
|
|
|
40
40
|
});
|
|
41
41
|
function useToast(t0) {
|
|
42
42
|
"use memo";
|
|
43
|
-
const $ = c(
|
|
44
|
-
if ($[0] !== "aad1570b2784f7343f322f27996bd84f97380bf45debf5009829c7eb5dc91e8e") {
|
|
45
|
-
for (let $i = 0; $i < 8; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
|
|
46
|
-
$[0] = "aad1570b2784f7343f322f27996bd84f97380bf45debf5009829c7eb5dc91e8e";
|
|
47
|
-
}
|
|
43
|
+
const $ = c(7);
|
|
48
44
|
let t1;
|
|
49
|
-
if ($[
|
|
45
|
+
if ($[0] !== t0) {
|
|
50
46
|
t1 = t0 === void 0 ? {} : t0;
|
|
51
|
-
$[
|
|
52
|
-
$[
|
|
53
|
-
} else t1 = $[
|
|
47
|
+
$[0] = t0;
|
|
48
|
+
$[1] = t1;
|
|
49
|
+
} else t1 = $[1];
|
|
54
50
|
const props = t1;
|
|
55
51
|
const toastHandlerRef = useRef(null);
|
|
56
52
|
let t2;
|
|
57
|
-
if ($[
|
|
53
|
+
if ($[2] !== props) {
|
|
58
54
|
t2 = /* @__PURE__ */ jsx(Toast, {
|
|
59
55
|
ref: toastHandlerRef,
|
|
60
56
|
...props
|
|
61
57
|
});
|
|
62
|
-
$[
|
|
63
|
-
$[
|
|
64
|
-
} else t2 = $[
|
|
58
|
+
$[2] = props;
|
|
59
|
+
$[3] = t2;
|
|
60
|
+
} else t2 = $[3];
|
|
65
61
|
const element = t2;
|
|
66
62
|
let t3;
|
|
67
|
-
if ($[
|
|
63
|
+
if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
|
|
68
64
|
t3 = function show(message, options) {
|
|
69
65
|
toastHandlerRef.current?.show(message, options);
|
|
70
66
|
};
|
|
71
|
-
$[
|
|
72
|
-
} else t3 = $[
|
|
67
|
+
$[4] = t3;
|
|
68
|
+
} else t3 = $[4];
|
|
73
69
|
const show = t3;
|
|
74
70
|
let t4;
|
|
75
|
-
if ($[
|
|
71
|
+
if ($[5] !== element) {
|
|
76
72
|
t4 = [element, show];
|
|
77
|
-
$[
|
|
78
|
-
$[
|
|
79
|
-
} else t4 = $[
|
|
73
|
+
$[5] = element;
|
|
74
|
+
$[6] = t4;
|
|
75
|
+
} else t4 = $[6];
|
|
80
76
|
return t4;
|
|
81
77
|
}
|
|
82
78
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index2.js","names":["toastHandlerRef"],"sources":["../../../../src/components/Notification/Toast/index.tsx"],"sourcesContent":["import '../layout.css'\nimport './index.css'\n\nimport { forwardRef, useImperativeHandle, useRef } from 'react'\nimport type { ReactNode } from 'react'\nimport { NotificationItem } from '../NotificationItem'\nimport { NotificationRegion } from '../NotificationRegion'\nimport { useNotificationQueue } from '../useNotificationQueue'\nimport type { NotificationProps, Position } from '../types'\n\nexport type ToastType = 'success' | 'error'\n\nexport type ShowToastOptions = {\n type: ToastType\n}\n\nexport type ToastHandler = {\n show: (message: ReactNode, options: ShowToastOptions) => void\n}\n\nexport type ToastProps = Omit<NotificationProps, 'position'> & {\n /**\n * Toast の表示位置\n * @default 'top'\n */\n position?: Position\n}\n\ntype ToastContent = {\n message: ReactNode\n type: ToastType\n}\n\nconst Toast = forwardRef<ToastHandler, ToastProps>(function Toast(\n { position = 'top', duration, order, ...regionProps },\n ref,\n) {\n 'use memo'\n\n const { state, itemRef, enqueue, onHoverStart, onHoverEnd } =\n useNotificationQueue<ToastContent>('toast', { duration, order })\n\n function show(message: ReactNode, options: ShowToastOptions) {\n enqueue({\n message,\n type: options.type,\n })\n }\n\n useImperativeHandle(ref, () => ({ show }))\n\n return (\n <NotificationRegion\n name=\"toast\"\n state={state}\n position={position}\n {...regionProps}\n >\n {state.visibleToasts.map((toast) => (\n <NotificationItem\n key={toast.key}\n name=\"toast\"\n toast={toast}\n state={state}\n itemRef={itemRef}\n onHoverStart={onHoverStart}\n onHoverEnd={onHoverEnd}\n data-type={toast.content.type}\n />\n ))}\n </NotificationRegion>\n )\n})\n\nexport default Toast\n\nexport function useToast(props: ToastProps = {}) {\n 'use memo'\n\n const toastHandlerRef = useRef<ToastHandler>(null)\n const element = <Toast ref={toastHandlerRef} {...props} />\n function show(message: ReactNode, options: ShowToastOptions) {\n toastHandlerRef.current?.show(message, options)\n }\n return [element, show] as const\n}\n"],"mappings":";;;;;;;;;;;AAiCA,MAAM,QAAQ,WAAqC,SAAS,MAC1D,EAAE,WAAW,OAAO,UAAU,OAAO,GAAG,eACxC,KACA;CACA;CAEA,MAAM,EAAE,OAAO,SAAS,SAAS,cAAc,eAC7C,qBAAmC,SAAS;EAAE;EAAU;CAAM,CAAC;CAEjE,SAAS,KAAK,SAAoB,SAA2B;EAC3D,QAAQ;GACN;GACA,MAAM,QAAQ;EAChB,CAAC;CACH;CAEA,oBAAoB,YAAY,EAAE,KAAK,EAAE;CAEzC,OACE,oBAAC,oBAAD;EACE,MAAK;EACE;EACG;EACV,GAAI;YAEH,MAAM,cAAc,KAAK,UACxB,oBAAC,kBAAD;GAEE,MAAK;GACE;GACA;GACE;GACK;GACF;GACZ,aAAW,MAAM,QAAQ;EAAK,GAPzB,MAAM,GAOmB,CAEjC;CACiB;AAExB,CAAC;AAID,SAAO,SAAA,IAAA;CAAA;CAAA,MAAA,IAAA,EAAA,CAAA;CAAA,IAAA
|
|
1
|
+
{"version":3,"file":"index2.js","names":["toastHandlerRef"],"sources":["../../../../src/components/Notification/Toast/index.tsx"],"sourcesContent":["import '../layout.css'\nimport './index.css'\n\nimport { forwardRef, useImperativeHandle, useRef } from 'react'\nimport type { ReactNode } from 'react'\nimport { NotificationItem } from '../NotificationItem'\nimport { NotificationRegion } from '../NotificationRegion'\nimport { useNotificationQueue } from '../useNotificationQueue'\nimport type { NotificationProps, Position } from '../types'\n\nexport type ToastType = 'success' | 'error'\n\nexport type ShowToastOptions = {\n type: ToastType\n}\n\nexport type ToastHandler = {\n show: (message: ReactNode, options: ShowToastOptions) => void\n}\n\nexport type ToastProps = Omit<NotificationProps, 'position'> & {\n /**\n * Toast の表示位置\n * @default 'top'\n */\n position?: Position\n}\n\ntype ToastContent = {\n message: ReactNode\n type: ToastType\n}\n\nconst Toast = forwardRef<ToastHandler, ToastProps>(function Toast(\n { position = 'top', duration, order, ...regionProps },\n ref,\n) {\n 'use memo'\n\n const { state, itemRef, enqueue, onHoverStart, onHoverEnd } =\n useNotificationQueue<ToastContent>('toast', { duration, order })\n\n function show(message: ReactNode, options: ShowToastOptions) {\n enqueue({\n message,\n type: options.type,\n })\n }\n\n useImperativeHandle(ref, () => ({ show }))\n\n return (\n <NotificationRegion\n name=\"toast\"\n state={state}\n position={position}\n {...regionProps}\n >\n {state.visibleToasts.map((toast) => (\n <NotificationItem\n key={toast.key}\n name=\"toast\"\n toast={toast}\n state={state}\n itemRef={itemRef}\n onHoverStart={onHoverStart}\n onHoverEnd={onHoverEnd}\n data-type={toast.content.type}\n />\n ))}\n </NotificationRegion>\n )\n})\n\nexport default Toast\n\nexport function useToast(props: ToastProps = {}) {\n 'use memo'\n\n const toastHandlerRef = useRef<ToastHandler>(null)\n const element = <Toast ref={toastHandlerRef} {...props} />\n function show(message: ReactNode, options: ShowToastOptions) {\n toastHandlerRef.current?.show(message, options)\n }\n return [element, show] as const\n}\n"],"mappings":";;;;;;;;;;;AAiCA,MAAM,QAAQ,WAAqC,SAAS,MAC1D,EAAE,WAAW,OAAO,UAAU,OAAO,GAAG,eACxC,KACA;CACA;CAEA,MAAM,EAAE,OAAO,SAAS,SAAS,cAAc,eAC7C,qBAAmC,SAAS;EAAE;EAAU;CAAM,CAAC;CAEjE,SAAS,KAAK,SAAoB,SAA2B;EAC3D,QAAQ;GACN;GACA,MAAM,QAAQ;EAChB,CAAC;CACH;CAEA,oBAAoB,YAAY,EAAE,KAAK,EAAE;CAEzC,OACE,oBAAC,oBAAD;EACE,MAAK;EACE;EACG;EACV,GAAI;YAEH,MAAM,cAAc,KAAK,UACxB,oBAAC,kBAAD;GAEE,MAAK;GACE;GACA;GACE;GACK;GACF;GACZ,aAAW,MAAM,QAAQ;EAAK,GAPzB,MAAM,GAOmB,CAEjC;CACiB;AAExB,CAAC;AAID,SAAO,SAAA,IAAA;CAAA;CAAA,MAAA,IAAA,EAAA,CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,IAAA;EAAkB,KAAA,OAAA,SAAA,CAAqB,IAArB;EAAsB,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAtB,MAAA,QAAA;CAGvB,MAAA,kBAAwB,OAAqB,IAAI;CAAC,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA;EAClC,KAAA,oBAAC,OAAD;GAAYA,KAAA;GAAe,GAAM;EAAK;EAAI,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAA1D,MAAA,UAAgB;CAA0C,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA,IAAA,2BAAA,GAAA;EAC1D,KAAA,SAAA,KAAA,SAAA,SAAA;GACE,gBAAe,SAAc,KAAC,SAAS,OAAO;EAAC;EAChD,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAFD,MAAA,OAAA;CAEC,IAAA;CAAA,IAAA,EAAA,OAAA,SAAA;EACM,KAAA,CAAC,SAAS,IAAI;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAAf;AAAwB"}
|
|
@@ -10,11 +10,7 @@ import { c } from "react-compiler-runtime";
|
|
|
10
10
|
//#region src/components/Pagination/index.tsx
|
|
11
11
|
function NavButton(t0) {
|
|
12
12
|
"use memo";
|
|
13
|
-
const $ = c(
|
|
14
|
-
if ($[0] !== "6df9a461da70eeb5250dbca07b72d0ce43e952d7b7d08baba19bf889ba545794") {
|
|
15
|
-
for (let $i = 0; $i < 16; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
|
|
16
|
-
$[0] = "6df9a461da70eeb5250dbca07b72d0ce43e952d7b7d08baba19bf889ba545794";
|
|
17
|
-
}
|
|
13
|
+
const $ = c(15);
|
|
18
14
|
const { direction, ariaLabel } = t0;
|
|
19
15
|
const { page, pageCount, size, isLinkMode, makeUrl, LinkComponent, makeClickHandler, linkProps } = usePaginationContext();
|
|
20
16
|
const isPrev = direction === "prev";
|
|
@@ -24,7 +20,7 @@ function NavButton(t0) {
|
|
|
24
20
|
const t1 = isPrev ? "24/Prev" : "24/Next";
|
|
25
21
|
const t2 = disabled || void 0;
|
|
26
22
|
let t3;
|
|
27
|
-
if ($[
|
|
23
|
+
if ($[0] !== LinkComponent || $[1] !== disabled || $[2] !== isLinkMode || $[3] !== linkProps || $[4] !== makeClickHandler || $[5] !== makeUrl || $[6] !== navButtonClassName || $[7] !== targetPage) {
|
|
28
24
|
t3 = isLinkMode && makeUrl ? {
|
|
29
25
|
component: LinkComponent,
|
|
30
26
|
href: makeUrl(targetPage),
|
|
@@ -36,18 +32,18 @@ function NavButton(t0) {
|
|
|
36
32
|
onClick: makeClickHandler(targetPage),
|
|
37
33
|
className: navButtonClassName
|
|
38
34
|
};
|
|
39
|
-
$[
|
|
40
|
-
$[
|
|
41
|
-
$[
|
|
42
|
-
$[
|
|
43
|
-
$[
|
|
44
|
-
$[
|
|
45
|
-
$[
|
|
46
|
-
$[
|
|
47
|
-
$[
|
|
48
|
-
} else t3 = $[
|
|
35
|
+
$[0] = LinkComponent;
|
|
36
|
+
$[1] = disabled;
|
|
37
|
+
$[2] = isLinkMode;
|
|
38
|
+
$[3] = linkProps;
|
|
39
|
+
$[4] = makeClickHandler;
|
|
40
|
+
$[5] = makeUrl;
|
|
41
|
+
$[6] = navButtonClassName;
|
|
42
|
+
$[7] = targetPage;
|
|
43
|
+
$[8] = t3;
|
|
44
|
+
} else t3 = $[8];
|
|
49
45
|
let t4;
|
|
50
|
-
if ($[
|
|
46
|
+
if ($[9] !== ariaLabel || $[10] !== size || $[11] !== t1 || $[12] !== t2 || $[13] !== t3) {
|
|
51
47
|
t4 = /* @__PURE__ */ jsx(IconButton, {
|
|
52
48
|
icon: t1,
|
|
53
49
|
size,
|
|
@@ -55,28 +51,24 @@ function NavButton(t0) {
|
|
|
55
51
|
"aria-label": ariaLabel,
|
|
56
52
|
...t3
|
|
57
53
|
});
|
|
58
|
-
$[
|
|
59
|
-
$[
|
|
60
|
-
$[
|
|
61
|
-
$[
|
|
62
|
-
$[
|
|
63
|
-
$[
|
|
64
|
-
} else t4 = $[
|
|
54
|
+
$[9] = ariaLabel;
|
|
55
|
+
$[10] = size;
|
|
56
|
+
$[11] = t1;
|
|
57
|
+
$[12] = t2;
|
|
58
|
+
$[13] = t3;
|
|
59
|
+
$[14] = t4;
|
|
60
|
+
} else t4 = $[14];
|
|
65
61
|
return t4;
|
|
66
62
|
}
|
|
67
63
|
function PageItem(t0) {
|
|
68
64
|
"use memo";
|
|
69
|
-
const $ = c(
|
|
70
|
-
if ($[0] !== "6df9a461da70eeb5250dbca07b72d0ce43e952d7b7d08baba19bf889ba545794") {
|
|
71
|
-
for (let $i = 0; $i < 20; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
|
|
72
|
-
$[0] = "6df9a461da70eeb5250dbca07b72d0ce43e952d7b7d08baba19bf889ba545794";
|
|
73
|
-
}
|
|
65
|
+
const $ = c(19);
|
|
74
66
|
const { value } = t0;
|
|
75
67
|
const { page, size, isLinkMode, makeUrl, LinkComponent, makeClickHandler, linkProps } = usePaginationContext();
|
|
76
68
|
const pageItemClassName = useClassNames("charcoal-pagination-button", linkProps?.className);
|
|
77
69
|
if (value === "...") {
|
|
78
70
|
let t1;
|
|
79
|
-
if ($[
|
|
71
|
+
if ($[0] !== size) {
|
|
80
72
|
t1 = /* @__PURE__ */ jsx(IconButton, {
|
|
81
73
|
icon: "24/Dot",
|
|
82
74
|
size,
|
|
@@ -84,69 +76,69 @@ function PageItem(t0) {
|
|
|
84
76
|
className: "charcoal-pagination-spacer",
|
|
85
77
|
"aria-hidden": true
|
|
86
78
|
});
|
|
87
|
-
$[
|
|
88
|
-
$[
|
|
89
|
-
} else t1 = $[
|
|
79
|
+
$[0] = size;
|
|
80
|
+
$[1] = t1;
|
|
81
|
+
} else t1 = $[1];
|
|
90
82
|
return t1;
|
|
91
83
|
}
|
|
92
84
|
if (value === page) {
|
|
93
85
|
let t1;
|
|
94
|
-
if ($[
|
|
86
|
+
if ($[2] !== value) {
|
|
95
87
|
t1 = /* @__PURE__ */ jsx("span", {
|
|
96
88
|
className: "charcoal-pagination-button",
|
|
97
89
|
"aria-current": "page",
|
|
98
90
|
children: value
|
|
99
91
|
});
|
|
100
|
-
$[
|
|
101
|
-
$[
|
|
102
|
-
} else t1 = $[
|
|
92
|
+
$[2] = value;
|
|
93
|
+
$[3] = t1;
|
|
94
|
+
} else t1 = $[3];
|
|
103
95
|
return t1;
|
|
104
96
|
}
|
|
105
97
|
if (typeof value !== "number") return null;
|
|
106
98
|
if (isLinkMode && makeUrl) {
|
|
107
99
|
let t1;
|
|
108
|
-
if ($[
|
|
100
|
+
if ($[4] !== makeUrl || $[5] !== value) {
|
|
109
101
|
t1 = makeUrl(value);
|
|
110
|
-
$[
|
|
111
|
-
$[
|
|
112
|
-
$[
|
|
113
|
-
} else t1 = $[
|
|
102
|
+
$[4] = makeUrl;
|
|
103
|
+
$[5] = value;
|
|
104
|
+
$[6] = t1;
|
|
105
|
+
} else t1 = $[6];
|
|
114
106
|
let t2;
|
|
115
|
-
if ($[
|
|
107
|
+
if ($[7] !== LinkComponent || $[8] !== linkProps || $[9] !== pageItemClassName || $[10] !== t1 || $[11] !== value) {
|
|
116
108
|
t2 = /* @__PURE__ */ jsx(LinkComponent, {
|
|
117
109
|
href: t1,
|
|
118
110
|
...linkProps,
|
|
119
111
|
className: pageItemClassName,
|
|
120
112
|
children: value
|
|
121
113
|
});
|
|
122
|
-
$[
|
|
123
|
-
$[
|
|
124
|
-
$[
|
|
125
|
-
$[
|
|
126
|
-
$[
|
|
127
|
-
$[
|
|
128
|
-
} else t2 = $[
|
|
114
|
+
$[7] = LinkComponent;
|
|
115
|
+
$[8] = linkProps;
|
|
116
|
+
$[9] = pageItemClassName;
|
|
117
|
+
$[10] = t1;
|
|
118
|
+
$[11] = value;
|
|
119
|
+
$[12] = t2;
|
|
120
|
+
} else t2 = $[12];
|
|
129
121
|
return t2;
|
|
130
122
|
}
|
|
131
123
|
let t1;
|
|
132
|
-
if ($[
|
|
124
|
+
if ($[13] !== makeClickHandler || $[14] !== value) {
|
|
133
125
|
t1 = makeClickHandler(value);
|
|
134
|
-
$[
|
|
135
|
-
$[
|
|
136
|
-
$[
|
|
137
|
-
} else t1 = $[
|
|
126
|
+
$[13] = makeClickHandler;
|
|
127
|
+
$[14] = value;
|
|
128
|
+
$[15] = t1;
|
|
129
|
+
} else t1 = $[15];
|
|
138
130
|
let t2;
|
|
139
|
-
if ($[
|
|
131
|
+
if ($[16] !== t1 || $[17] !== value) {
|
|
140
132
|
t2 = /* @__PURE__ */ jsx("button", {
|
|
141
133
|
type: "button",
|
|
142
134
|
className: "charcoal-pagination-button",
|
|
143
135
|
onClick: t1,
|
|
144
136
|
children: value
|
|
145
137
|
});
|
|
146
|
-
$[
|
|
147
|
-
$[
|
|
148
|
-
$[
|
|
149
|
-
} else t2 = $[
|
|
138
|
+
$[16] = t1;
|
|
139
|
+
$[17] = value;
|
|
140
|
+
$[18] = t2;
|
|
141
|
+
} else t2 = $[18];
|
|
150
142
|
return t2;
|
|
151
143
|
}
|
|
152
144
|
function Pagination({ page, pageCount, pageRangeDisplayed, size = "M", onChange, makeUrl, component: LinkComponent = "a", linkProps, className, ariaLabelNext = "Next", ariaLabelPrev = "Previous", ...navProps }) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index2.js","names":["size","ariaLabel","value","pageItemClassName"],"sources":["../../../src/components/Pagination/index.tsx"],"sourcesContent":["import './index.css'\n\nimport { usePaginationWindow } from './helper'\nimport { useClassNames } from '../../_lib/useClassNames'\nimport IconButton, { IconButtonProps } from '../IconButton'\nimport {\n PaginationContext,\n usePaginationContext,\n type LinkComponentProps,\n type PaginationContextValue,\n type PageRangeDisplayed,\n type Size,\n} from './PaginationContext'\n\ntype NavButtonProps = {\n direction: 'prev' | 'next'\n ariaLabel: IconButtonProps['aria-label']\n}\n\nfunction NavButton({ direction, ariaLabel }: NavButtonProps) {\n 'use memo'\n const {\n page,\n pageCount,\n size,\n isLinkMode,\n makeUrl,\n LinkComponent,\n makeClickHandler,\n linkProps,\n } = usePaginationContext()\n\n const isPrev = direction === 'prev'\n const targetPage = isPrev\n ? Math.max(1, page - 1)\n : Math.min(pageCount, page + 1)\n const disabled = isPrev ? page <= 1 : page >= pageCount\n const navButtonClassName = useClassNames(\n 'charcoal-pagination-nav-button',\n linkProps?.className,\n )\n\n return (\n <IconButton\n icon={isPrev ? '24/Prev' : '24/Next'}\n size={size}\n /* Use data-hidden, not [hidden]: Tailwind preflight's `[hidden] { display: none !important }` would clobber `visibility: hidden` and collapse the layout space. */\n data-hidden={disabled || undefined}\n aria-label={ariaLabel}\n {...(isLinkMode && makeUrl\n ? {\n component: LinkComponent as 'a',\n href: makeUrl(targetPage),\n 'aria-disabled': disabled,\n ...linkProps,\n className: navButtonClassName,\n }\n : {\n disabled,\n onClick: makeClickHandler(targetPage),\n className: navButtonClassName,\n })}\n />\n )\n}\n\nfunction PageItem({ value }: { value: number | string }) {\n 'use memo'\n const {\n page,\n size,\n isLinkMode,\n makeUrl,\n LinkComponent,\n makeClickHandler,\n linkProps,\n } = usePaginationContext()\n const pageItemClassName = useClassNames(\n 'charcoal-pagination-button',\n linkProps?.className,\n )\n\n // 省略記号\n if (value === '...') {\n return (\n <IconButton\n icon=\"24/Dot\"\n size={size}\n disabled\n className=\"charcoal-pagination-spacer\"\n aria-hidden\n />\n )\n }\n // 現在ページ（クリック不可）\n if (value === page) {\n return (\n <span className=\"charcoal-pagination-button\" aria-current=\"page\">\n {value}\n </span>\n )\n }\n if (typeof value !== 'number') return null\n // リンクモード: ページへのリンク\n if (isLinkMode && makeUrl) {\n return (\n <LinkComponent\n href={makeUrl(value)}\n {...linkProps}\n className={pageItemClassName}\n >\n {value}\n </LinkComponent>\n )\n }\n // ボタンモード: クリックでページ遷移\n return (\n <button\n type=\"button\"\n className=\"charcoal-pagination-button\"\n onClick={makeClickHandler(value)}\n >\n {value}\n </button>\n )\n}\n\ninterface PaginationCommonProps {\n page: number\n pageCount: number\n pageRangeDisplayed?: PageRangeDisplayed\n size?: Size\n ariaLabelPrev?: string\n ariaLabelNext?: string\n}\n\ntype NavProps = Omit<React.ComponentPropsWithoutRef<'nav'>, 'onChange'>\n\n/**\n * Pagination component. Use either `onChange` (button mode) or `makeUrl` (link mode).\n *\n * @example\n * // Button mode - for client-side state\n * <Pagination page={1} pageCount={10} onChange={setPage} />\n *\n * @example\n * // Link mode - for server routing / static pages\n * <Pagination page={1} pageCount={10} makeUrl={(p) => `?page=${p}`} />\n *\n * @example\n * // Link mode with custom component (e.g. Next.js Link)\n * <Pagination page={1} pageCount={10} makeUrl={(p) => `?page=${p}`} component={Link} />\n *\n * @example\n * // Link mode with linkProps (e.g. Next.js scroll)\n * <Pagination page={1} pageCount={10} makeUrl={(p) => `?page=${p}`} component={Link} linkProps={{ scroll: 'marker' }} />\n */\nexport type PaginationProps<T extends React.ElementType = 'a'> =\n PaginationCommonProps &\n NavProps &\n (\n | {\n onChange(newPage: number): void\n makeUrl?: never\n component?: never\n linkProps?: undefined\n }\n | {\n makeUrl(page: number): string\n onChange?: never\n /**\n * The component used for link elements. Receives `href`, `className`, and `children`.\n * @default 'a'\n */\n component?: T\n /**\n * Additional props passed to all link elements (e.g. Next.js Link's scroll, prefetch).\n */\n linkProps?: Omit<\n React.ComponentPropsWithoutRef<T>,\n 'href' | 'children'\n >\n }\n )\n\nexport default function Pagination<T extends React.ElementType = 'a'>({\n page,\n pageCount,\n pageRangeDisplayed,\n size = 'M',\n onChange,\n makeUrl,\n component: LinkComponent = 'a' as T,\n linkProps,\n className,\n ariaLabelNext = 'Next',\n ariaLabelPrev = 'Previous',\n ...navProps\n}: PaginationProps<T>) {\n 'use memo'\n const window = usePaginationWindow(page, pageCount, pageRangeDisplayed)\n const isLinkMode = makeUrl !== undefined\n const makeClickHandler = (value: number) => () => onChange?.(value)\n const classNames = useClassNames('charcoal-pagination', className)\n\n const contextValue = {\n page,\n pageCount,\n size,\n isLinkMode,\n makeUrl,\n LinkComponent,\n makeClickHandler,\n linkProps,\n }\n\n return (\n <PaginationContext.Provider\n value={\n contextValue as PaginationContextValue<\n React.ElementType<LinkComponentProps>\n >\n }\n >\n <nav\n data-size={size}\n aria-label=\"Pagination\"\n {...navProps}\n className={classNames}\n >\n <NavButton direction=\"prev\" ariaLabel={ariaLabelPrev} />\n {window.map((p) => (\n <PageItem key={p} value={p} />\n ))}\n <NavButton direction=\"next\" ariaLabel={ariaLabelNext} />\n </nav>\n </PaginationContext.Provider>\n )\n}\n"],"mappings":";;;;;;;;;;AAmBA,SAAA,UAAA,IAAA;CAAA;CAAA,MAAA,IAAA,EAAA,EAAA;
|
|
1
|
+
{"version":3,"file":"index2.js","names":["size","ariaLabel","value","pageItemClassName"],"sources":["../../../src/components/Pagination/index.tsx"],"sourcesContent":["import './index.css'\n\nimport { usePaginationWindow } from './helper'\nimport { useClassNames } from '../../_lib/useClassNames'\nimport IconButton, { IconButtonProps } from '../IconButton'\nimport {\n PaginationContext,\n usePaginationContext,\n type LinkComponentProps,\n type PaginationContextValue,\n type PageRangeDisplayed,\n type Size,\n} from './PaginationContext'\n\ntype NavButtonProps = {\n direction: 'prev' | 'next'\n ariaLabel: IconButtonProps['aria-label']\n}\n\nfunction NavButton({ direction, ariaLabel }: NavButtonProps) {\n 'use memo'\n const {\n page,\n pageCount,\n size,\n isLinkMode,\n makeUrl,\n LinkComponent,\n makeClickHandler,\n linkProps,\n } = usePaginationContext()\n\n const isPrev = direction === 'prev'\n const targetPage = isPrev\n ? Math.max(1, page - 1)\n : Math.min(pageCount, page + 1)\n const disabled = isPrev ? page <= 1 : page >= pageCount\n const navButtonClassName = useClassNames(\n 'charcoal-pagination-nav-button',\n linkProps?.className,\n )\n\n return (\n <IconButton\n icon={isPrev ? '24/Prev' : '24/Next'}\n size={size}\n /* Use data-hidden, not [hidden]: Tailwind preflight's `[hidden] { display: none !important }` would clobber `visibility: hidden` and collapse the layout space. */\n data-hidden={disabled || undefined}\n aria-label={ariaLabel}\n {...(isLinkMode && makeUrl\n ? {\n component: LinkComponent as 'a',\n href: makeUrl(targetPage),\n 'aria-disabled': disabled,\n ...linkProps,\n className: navButtonClassName,\n }\n : {\n disabled,\n onClick: makeClickHandler(targetPage),\n className: navButtonClassName,\n })}\n />\n )\n}\n\nfunction PageItem({ value }: { value: number | string }) {\n 'use memo'\n const {\n page,\n size,\n isLinkMode,\n makeUrl,\n LinkComponent,\n makeClickHandler,\n linkProps,\n } = usePaginationContext()\n const pageItemClassName = useClassNames(\n 'charcoal-pagination-button',\n linkProps?.className,\n )\n\n // 省略記号\n if (value === '...') {\n return (\n <IconButton\n icon=\"24/Dot\"\n size={size}\n disabled\n className=\"charcoal-pagination-spacer\"\n aria-hidden\n />\n )\n }\n // 現在ページ（クリック不可）\n if (value === page) {\n return (\n <span className=\"charcoal-pagination-button\" aria-current=\"page\">\n {value}\n </span>\n )\n }\n if (typeof value !== 'number') return null\n // リンクモード: ページへのリンク\n if (isLinkMode && makeUrl) {\n return (\n <LinkComponent\n href={makeUrl(value)}\n {...linkProps}\n className={pageItemClassName}\n >\n {value}\n </LinkComponent>\n )\n }\n // ボタンモード: クリックでページ遷移\n return (\n <button\n type=\"button\"\n className=\"charcoal-pagination-button\"\n onClick={makeClickHandler(value)}\n >\n {value}\n </button>\n )\n}\n\ninterface PaginationCommonProps {\n page: number\n pageCount: number\n pageRangeDisplayed?: PageRangeDisplayed\n size?: Size\n ariaLabelPrev?: string\n ariaLabelNext?: string\n}\n\ntype NavProps = Omit<React.ComponentPropsWithoutRef<'nav'>, 'onChange'>\n\n/**\n * Pagination component. Use either `onChange` (button mode) or `makeUrl` (link mode).\n *\n * @example\n * // Button mode - for client-side state\n * <Pagination page={1} pageCount={10} onChange={setPage} />\n *\n * @example\n * // Link mode - for server routing / static pages\n * <Pagination page={1} pageCount={10} makeUrl={(p) => `?page=${p}`} />\n *\n * @example\n * // Link mode with custom component (e.g. Next.js Link)\n * <Pagination page={1} pageCount={10} makeUrl={(p) => `?page=${p}`} component={Link} />\n *\n * @example\n * // Link mode with linkProps (e.g. Next.js scroll)\n * <Pagination page={1} pageCount={10} makeUrl={(p) => `?page=${p}`} component={Link} linkProps={{ scroll: 'marker' }} />\n */\nexport type PaginationProps<T extends React.ElementType = 'a'> =\n PaginationCommonProps &\n NavProps &\n (\n | {\n onChange(newPage: number): void\n makeUrl?: never\n component?: never\n linkProps?: undefined\n }\n | {\n makeUrl(page: number): string\n onChange?: never\n /**\n * The component used for link elements. Receives `href`, `className`, and `children`.\n * @default 'a'\n */\n component?: T\n /**\n * Additional props passed to all link elements (e.g. Next.js Link's scroll, prefetch).\n */\n linkProps?: Omit<\n React.ComponentPropsWithoutRef<T>,\n 'href' | 'children'\n >\n }\n )\n\nexport default function Pagination<T extends React.ElementType = 'a'>({\n page,\n pageCount,\n pageRangeDisplayed,\n size = 'M',\n onChange,\n makeUrl,\n component: LinkComponent = 'a' as T,\n linkProps,\n className,\n ariaLabelNext = 'Next',\n ariaLabelPrev = 'Previous',\n ...navProps\n}: PaginationProps<T>) {\n 'use memo'\n const window = usePaginationWindow(page, pageCount, pageRangeDisplayed)\n const isLinkMode = makeUrl !== undefined\n const makeClickHandler = (value: number) => () => onChange?.(value)\n const classNames = useClassNames('charcoal-pagination', className)\n\n const contextValue = {\n page,\n pageCount,\n size,\n isLinkMode,\n makeUrl,\n LinkComponent,\n makeClickHandler,\n linkProps,\n }\n\n return (\n <PaginationContext.Provider\n value={\n contextValue as PaginationContextValue<\n React.ElementType<LinkComponentProps>\n >\n }\n >\n <nav\n data-size={size}\n aria-label=\"Pagination\"\n {...navProps}\n className={classNames}\n >\n <NavButton direction=\"prev\" ariaLabel={ariaLabelPrev} />\n {window.map((p) => (\n <PageItem key={p} value={p} />\n ))}\n <NavButton direction=\"next\" ariaLabel={ariaLabelNext} />\n </nav>\n </PaginationContext.Provider>\n )\n}\n"],"mappings":"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"}
|