@yamada-ui/pagination 1.0.43-next-20241021022308 → 1.1.0-dev-20241024011656

Sign up to get free protection for your applications and to get access to all the features.
@@ -189,51 +189,53 @@ var iconMap = {
189
189
  next: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PaginationNextIcon, {}),
190
190
  prev: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PaginationPrevIcon, {})
191
191
  };
192
- var PaginationItem = ({
193
- className,
194
- children,
195
- disableRipple,
196
- isActive,
197
- isDisabled,
198
- page,
199
- ...rest
200
- }) => {
201
- var _a;
202
- const styles = usePaginationContext();
203
- const { onPointerDown, ...rippleProps } = (0, import_ripple.useRipple)({
204
- ...rest,
205
- isDisabled: disableRipple || isDisabled
206
- });
207
- children != null ? children : children = (_a = iconMap[page]) != null ? _a : page;
208
- const css = {
209
- alignItems: "center",
210
- display: "flex",
211
- justifyContent: "center",
212
- overflow: "hidden",
213
- position: "relative",
214
- userSelect: "none",
215
- ...styles.item,
216
- ...styles[page]
217
- };
218
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
219
- import_core.ui.button,
220
- {
221
- type: "button",
222
- className: (0, import_utils2.cx)("ui-pagination__item", className),
223
- "data-disabled": (0, import_utils2.dataAttr)(isDisabled),
224
- "data-selected": (0, import_utils2.dataAttr)(isActive),
225
- disabled: isDisabled,
226
- tabIndex: page !== "ellipsis" ? 0 : -1,
227
- __css: css,
192
+ var PaginationItem = (0, import_core.forwardRef)(
193
+ ({ className, children, disableRipple, isActive, isDisabled, page, ...rest }, ref) => {
194
+ var _a;
195
+ const styles = usePaginationContext();
196
+ const isEllipsis = page === "ellipsis";
197
+ const { onPointerDown, ...rippleProps } = (0, import_ripple.useRipple)({
228
198
  ...rest,
229
- onPointerDown,
230
- children: [
231
- children,
232
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ripple.Ripple, { isDisabled: disableRipple || isDisabled, ...rippleProps })
233
- ]
234
- }
235
- );
236
- };
199
+ isDisabled: disableRipple || isDisabled || isEllipsis
200
+ });
201
+ children != null ? children : children = (_a = iconMap[page]) != null ? _a : page;
202
+ const css = {
203
+ alignItems: "center",
204
+ display: "flex",
205
+ justifyContent: "center",
206
+ overflow: "hidden",
207
+ position: "relative",
208
+ userSelect: "none",
209
+ ...styles.item,
210
+ ...styles[page]
211
+ };
212
+ const Component = import_core.ui[isEllipsis ? "span" : "button"];
213
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
214
+ Component,
215
+ {
216
+ ref,
217
+ ...!isEllipsis ? {
218
+ "data-disabled": (0, import_utils2.dataAttr)(isDisabled),
219
+ "data-selected": (0, import_utils2.dataAttr)(isActive),
220
+ disabled: isDisabled
221
+ } : {},
222
+ className: (0, import_utils2.cx)(
223
+ "ui-pagination__item",
224
+ isEllipsis ? "ui-pagination__item--ellipsis" : void 0,
225
+ className
226
+ ),
227
+ tabIndex: !isEllipsis ? 0 : -1,
228
+ __css: css,
229
+ ...rest,
230
+ onPointerDown,
231
+ children: [
232
+ children,
233
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ripple.Ripple, { isDisabled: disableRipple || isDisabled, ...rippleProps })
234
+ ]
235
+ }
236
+ );
237
+ }
238
+ );
237
239
  PaginationItem.displayName = "PaginationItem";
238
240
  PaginationItem.__ui__ = "PaginationItem";
239
241
 
@@ -252,13 +254,13 @@ var Pagination = (0, import_core2.forwardRef)((props, ref) => {
252
254
  total,
253
255
  withControls: _withControls = true,
254
256
  withEdges: _withEdges = false,
257
+ containerProps,
255
258
  controlNextProps,
256
259
  controlPrevProps,
257
260
  controlProps,
258
261
  edgeFirstProps,
259
262
  edgeLastProps,
260
263
  edgeProps,
261
- innerProps,
262
264
  itemProps,
263
265
  onChange: onChangeProp,
264
266
  ...rest
@@ -275,117 +277,113 @@ var Pagination = (0, import_core2.forwardRef)((props, ref) => {
275
277
  onChange: onChangeProp
276
278
  });
277
279
  const children = (0, import_react2.useMemo)(
278
- () => range.map((page2, key) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
280
+ () => range.map((page2, key) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core2.ui.li, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
279
281
  Component,
280
282
  {
281
- "aria-label": page2 === "ellipsis" ? "Jump to omitted pages" : `Go to page ${page2}`,
283
+ "aria-label": page2 !== "ellipsis" ? `Go to page ${page2}` : void 0,
282
284
  isActive: currentPage === page2,
283
285
  isDisabled,
284
- page: page2,
285
286
  ...itemProps,
287
+ page: page2,
286
288
  onClick: (0, import_utils3.handlerAll)(
287
289
  itemProps == null ? void 0 : itemProps.onClick,
288
290
  page2 !== "ellipsis" ? () => onChange(page2) : void 0
289
291
  )
290
- },
291
- key
292
- )),
292
+ }
293
+ ) }, key)),
293
294
  [Component, currentPage, isDisabled, onChange, range, itemProps]
294
295
  );
295
296
  const css = {
296
- alignItems: "center",
297
- display: "flex",
298
297
  ...styles.container
299
298
  };
300
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PaginationProvider, { value: styles, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
301
- import_core2.ui.div,
299
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PaginationProvider, { value: styles, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
300
+ import_core2.ui.nav,
302
301
  {
303
302
  ref,
304
303
  className: (0, import_utils3.cx)("ui-pagination", className),
305
- role: "navigation",
306
- __css: css,
307
- ...rest,
308
304
  "data-disabled": (0, import_utils3.dataAttr)(isDisabled),
309
- children: [
310
- withEdges ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
311
- Component,
312
- {
313
- className: "ui-pagination__item--first",
314
- "aria-label": "Go to first page",
315
- isDisabled: isDisabled || currentPage === 1,
316
- page: "first",
317
- ...edgeProps,
318
- ...edgeFirstProps,
319
- onClick: (0, import_utils3.handlerAll)(
320
- edgeProps == null ? void 0 : edgeProps.onClick,
321
- edgeFirstProps == null ? void 0 : edgeFirstProps.onClick,
322
- onFirst
323
- )
324
- }
325
- ) : null,
326
- withControls ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
327
- Component,
328
- {
329
- className: "ui-pagination__item--prev",
330
- "aria-label": "Go to previous page",
331
- isDisabled: isDisabled || currentPage === 1,
332
- page: "prev",
333
- ...controlProps,
334
- ...controlPrevProps,
335
- onClick: (0, import_utils3.handlerAll)(
336
- controlProps == null ? void 0 : controlProps.onClick,
337
- controlPrevProps == null ? void 0 : controlPrevProps.onClick,
338
- onPrev
339
- )
340
- }
341
- ) : null,
342
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
343
- import_core2.ui.div,
344
- {
345
- className: "ui-pagination-inner",
346
- __css: {
347
- alignItems: "center",
348
- display: "flex",
349
- justifyContent: "center",
350
- ...styles.inner
351
- },
352
- ...innerProps,
353
- children
354
- }
355
- ),
356
- withControls ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
357
- Component,
358
- {
359
- className: "ui-pagination__item--next",
360
- "aria-label": "Go to next page",
361
- isDisabled: isDisabled || currentPage === total,
362
- page: "next",
363
- ...controlProps,
364
- ...controlNextProps,
365
- onClick: (0, import_utils3.handlerAll)(
366
- controlProps == null ? void 0 : controlProps.onClick,
367
- controlNextProps == null ? void 0 : controlNextProps.onClick,
368
- onNext
369
- )
370
- }
371
- ) : null,
372
- withEdges ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
373
- Component,
374
- {
375
- className: "ui-pagination__item--last",
376
- "aria-label": "Go to last page",
377
- isDisabled: isDisabled || currentPage === total,
378
- page: "last",
379
- ...edgeProps,
380
- ...edgeLastProps,
381
- onClick: (0, import_utils3.handlerAll)(
382
- edgeProps == null ? void 0 : edgeProps.onClick,
383
- edgeLastProps == null ? void 0 : edgeLastProps.onClick,
384
- onLast
385
- )
386
- }
387
- ) : null
388
- ]
305
+ __css: css,
306
+ ...containerProps,
307
+ children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
308
+ import_core2.ui.ul,
309
+ {
310
+ className: "ui-pagination-inner",
311
+ "data-disabled": (0, import_utils3.dataAttr)(isDisabled),
312
+ __css: {
313
+ alignItems: "center",
314
+ display: "flex",
315
+ ...styles.inner
316
+ },
317
+ ...rest,
318
+ children: [
319
+ withEdges ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core2.ui.li, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
320
+ Component,
321
+ {
322
+ className: "ui-pagination__item--first",
323
+ "aria-label": "Go to first page",
324
+ isDisabled: isDisabled || currentPage === 1,
325
+ page: "first",
326
+ ...edgeProps,
327
+ ...edgeFirstProps,
328
+ onClick: (0, import_utils3.handlerAll)(
329
+ edgeProps == null ? void 0 : edgeProps.onClick,
330
+ edgeFirstProps == null ? void 0 : edgeFirstProps.onClick,
331
+ onFirst
332
+ )
333
+ }
334
+ ) }) : null,
335
+ withControls ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core2.ui.li, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
336
+ Component,
337
+ {
338
+ className: "ui-pagination__item--prev",
339
+ "aria-label": "Go to previous page",
340
+ isDisabled: isDisabled || currentPage === 1,
341
+ page: "prev",
342
+ ...controlProps,
343
+ ...controlPrevProps,
344
+ onClick: (0, import_utils3.handlerAll)(
345
+ controlProps == null ? void 0 : controlProps.onClick,
346
+ controlPrevProps == null ? void 0 : controlPrevProps.onClick,
347
+ onPrev
348
+ )
349
+ }
350
+ ) }) : null,
351
+ children,
352
+ withControls ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core2.ui.li, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
353
+ Component,
354
+ {
355
+ className: "ui-pagination__item--next",
356
+ "aria-label": "Go to next page",
357
+ isDisabled: isDisabled || currentPage === total,
358
+ page: "next",
359
+ ...controlProps,
360
+ ...controlNextProps,
361
+ onClick: (0, import_utils3.handlerAll)(
362
+ controlProps == null ? void 0 : controlProps.onClick,
363
+ controlNextProps == null ? void 0 : controlNextProps.onClick,
364
+ onNext
365
+ )
366
+ }
367
+ ) }) : null,
368
+ withEdges ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core2.ui.li, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
369
+ Component,
370
+ {
371
+ className: "ui-pagination__item--last",
372
+ "aria-label": "Go to last page",
373
+ isDisabled: isDisabled || currentPage === total,
374
+ page: "last",
375
+ ...edgeProps,
376
+ ...edgeLastProps,
377
+ onClick: (0, import_utils3.handlerAll)(
378
+ edgeProps == null ? void 0 : edgeProps.onClick,
379
+ edgeLastProps == null ? void 0 : edgeLastProps.onClick,
380
+ onLast
381
+ )
382
+ }
383
+ ) }) : null
384
+ ]
385
+ }
386
+ )
389
387
  }
390
388
  ) });
391
389
  });
@@ -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 { ComponentPropsWithoutRef, 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 next of the control button element.\n */\n controlNextProps?: HTMLUIProps<\"button\">\n /**\n * Props for previous of the control button element.\n */\n controlPrevProps?: HTMLUIProps<\"button\">\n /**\n * Props for control button element.\n */\n controlProps?: HTMLUIProps<\"button\">\n /**\n * Props for first of the edge button element.\n */\n edgeFirstProps?: HTMLUIProps<\"button\">\n /**\n * Props for last of the edge button element.\n */\n edgeLastProps?: HTMLUIProps<\"button\">\n /**\n * Props for edge button element.\n */\n edgeProps?: HTMLUIProps<\"button\">\n /**\n * Props for inner element.\n */\n innerProps?: HTMLUIProps\n /**\n * Props for button element.\n */\n itemProps?: HTMLUIProps<\"button\">\n}\n\nexport interface PaginationProps\n extends Omit<HTMLUIProps, \"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, \"div\">((props, ref) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"Pagination\", props)\n const {\n className,\n boundaries,\n component: Component = PaginationItem,\n defaultPage,\n isDisabled,\n page,\n siblings,\n total,\n withControls: _withControls = true,\n withEdges: _withEdges = false,\n controlNextProps,\n controlPrevProps,\n controlProps,\n edgeFirstProps,\n edgeLastProps,\n edgeProps,\n innerProps,\n itemProps,\n onChange: onChangeProp,\n ...rest\n } = omitThemeProps(mergedProps)\n\n const withControls = useValue(_withControls)\n const withEdges = useValue(_withEdges)\n\n const { currentPage, range, onChange, onFirst, onLast, onNext, onPrev } =\n usePagination({\n boundaries,\n defaultPage,\n isDisabled,\n page,\n siblings,\n total,\n onChange: onChangeProp,\n })\n\n const children = useMemo(\n () =>\n range.map((page, key) => (\n <Component\n key={key}\n aria-label={\n page === \"ellipsis\" ? \"Jump to omitted pages\" : `Go to page ${page}`\n }\n isActive={currentPage === page}\n isDisabled={isDisabled}\n page={page}\n {...(itemProps as ComponentPropsWithoutRef<\"button\">)}\n onClick={handlerAll(\n itemProps?.onClick,\n page !== \"ellipsis\" ? () => onChange(page) : undefined,\n )}\n />\n )),\n [Component, currentPage, isDisabled, onChange, range, itemProps],\n )\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"flex\",\n ...styles.container,\n }\n\n return (\n <PaginationProvider value={styles}>\n <ui.div\n ref={ref}\n className={cx(\"ui-pagination\", className)}\n role=\"navigation\"\n __css={css}\n {...rest}\n data-disabled={dataAttr(isDisabled)}\n >\n {withEdges ? (\n <Component\n className=\"ui-pagination__item--first\"\n aria-label=\"Go to first page\"\n isDisabled={isDisabled || currentPage === 1}\n page=\"first\"\n {...(edgeProps as ComponentPropsWithoutRef<\"button\">)}\n {...(edgeFirstProps as ComponentPropsWithoutRef<\"button\">)}\n onClick={handlerAll(\n edgeProps?.onClick,\n edgeFirstProps?.onClick,\n onFirst,\n )}\n />\n ) : null}\n\n {withControls ? (\n <Component\n className=\"ui-pagination__item--prev\"\n aria-label=\"Go to previous page\"\n isDisabled={isDisabled || currentPage === 1}\n page=\"prev\"\n {...(controlProps as ComponentPropsWithoutRef<\"button\">)}\n {...(controlPrevProps as ComponentPropsWithoutRef<\"button\">)}\n onClick={handlerAll(\n controlProps?.onClick,\n controlPrevProps?.onClick,\n onPrev,\n )}\n />\n ) : null}\n\n <ui.div\n className=\"ui-pagination-inner\"\n __css={{\n alignItems: \"center\",\n display: \"flex\",\n justifyContent: \"center\",\n ...styles.inner,\n }}\n {...innerProps}\n >\n {children}\n </ui.div>\n\n {withControls ? (\n <Component\n className=\"ui-pagination__item--next\"\n aria-label=\"Go to next page\"\n isDisabled={isDisabled || currentPage === total}\n page=\"next\"\n {...(controlProps as ComponentPropsWithoutRef<\"button\">)}\n {...(controlNextProps as ComponentPropsWithoutRef<\"button\">)}\n onClick={handlerAll(\n controlProps?.onClick,\n controlNextProps?.onClick,\n onNext,\n )}\n />\n ) : null}\n\n {withEdges ? (\n <Component\n className=\"ui-pagination__item--last\"\n aria-label=\"Go to last page\"\n isDisabled={isDisabled || currentPage === total}\n page=\"last\"\n {...(edgeProps as ComponentPropsWithoutRef<\"button\">)}\n {...(edgeLastProps as ComponentPropsWithoutRef<\"button\">)}\n onClick={handlerAll(\n edgeProps?.onClick,\n edgeLastProps?.onClick,\n onLast,\n )}\n />\n ) : null}\n </ui.div>\n </PaginationProvider>\n )\n})\n\nPagination.displayName = \"Pagination\"\nPagination.__ui__ = \"Pagination\"\n","import type { CSSUIObject, FC } from \"@yamada-ui/core\"\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\"\nimport { ui } from \"@yamada-ui/core\"\nimport { Ripple, useRipple } from \"@yamada-ui/ripple\"\nimport { cx, dataAttr } from \"@yamada-ui/utils\"\nimport {\n PaginationEllipsisIcon,\n PaginationFirstIcon,\n PaginationLastIcon,\n PaginationNextIcon,\n PaginationPrevIcon,\n} from \"./pagination-icon\"\nimport { usePaginationContext } from \"./use-pagination\"\n\ninterface PaginationItemOptions {\n /**\n * The type of the page or item assigned to the pagination item.\n */\n page: \"ellipsis\" | \"first\" | \"last\" | \"next\" | \"prev\" | number\n /**\n * If `true`, disable ripple effects when pressing a element.\n *\n * @default false\n */\n disableRipple?: boolean\n /**\n * If `true`, the pagination item will be activated.\n *\n * @default false\n */\n isActive?: boolean\n /**\n * If `true`, the pagination item will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n}\n\nexport interface PaginationItemProps\n extends ComponentPropsWithoutRef<\"button\">,\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: FC<PaginationItemProps> = ({\n className,\n children,\n disableRipple,\n isActive,\n isDisabled,\n page,\n ...rest\n}) => {\n const styles = usePaginationContext()\n const { onPointerDown, ...rippleProps } = useRipple({\n ...rest,\n isDisabled: disableRipple || isDisabled,\n })\n\n children ??= iconMap[page] ?? page\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"flex\",\n justifyContent: \"center\",\n overflow: \"hidden\",\n position: \"relative\",\n userSelect: \"none\",\n ...styles.item,\n ...styles[page],\n }\n\n return (\n <ui.button\n type=\"button\"\n className={cx(\"ui-pagination__item\", className)}\n data-disabled={dataAttr(isDisabled)}\n data-selected={dataAttr(isActive)}\n disabled={isDisabled}\n tabIndex={page !== \"ellipsis\" ? 0 : -1}\n __css={css}\n {...rest}\n onPointerDown={onPointerDown}\n >\n {children}\n\n <Ripple isDisabled={disableRipple || isDisabled} {...rippleProps} />\n </ui.button>\n )\n}\nPaginationItem.displayName = \"PaginationItem\"\nPaginationItem.__ui__ = \"PaginationItem\"\n","import type { FC } from \"@yamada-ui/core\"\nimport type { IconProps } from \"@yamada-ui/icon\"\nimport { Icon } from \"@yamada-ui/icon\"\n\nexport const PaginationEllipsisIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n d=\"M2 8c0-.733.6-1.333 1.333-1.333.734 0 1.334.6 1.334 1.333s-.6 1.333-1.334 1.333C2.6 9.333 2 8.733 2 8zm9.333 0c0-.733.6-1.333 1.334-1.333C13.4 6.667 14 7.267 14 8s-.6 1.333-1.333 1.333c-.734 0-1.334-.6-1.334-1.333zM6.667 8c0-.733.6-1.333 1.333-1.333s1.333.6 1.333 1.333S8.733 9.333 8 9.333 6.667 8.733 6.667 8z\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\n\nPaginationEllipsisIcon.displayName = \"PaginationEllipsisIcon\"\nPaginationEllipsisIcon.__ui__ = \"PaginationEllipsisIcon\"\n\nexport const PaginationFirstIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n d=\"M6.85355 3.85355C7.04882 3.65829 7.04882 3.34171 6.85355 3.14645C6.65829 2.95118 6.34171 2.95118 6.14645 3.14645L2.14645 7.14645C1.95118 7.34171 1.95118 7.65829 2.14645 7.85355L6.14645 11.8536C6.34171 12.0488 6.65829 12.0488 6.85355 11.8536C7.04882 11.6583 7.04882 11.3417 6.85355 11.1464L3.20711 7.5L6.85355 3.85355ZM12.8536 3.85355C13.0488 3.65829 13.0488 3.34171 12.8536 3.14645C12.6583 2.95118 12.3417 2.95118 12.1464 3.14645L8.14645 7.14645C7.95118 7.34171 7.95118 7.65829 8.14645 7.85355L12.1464 11.8536C12.3417 12.0488 12.6583 12.0488 12.8536 11.8536C13.0488 11.6583 13.0488 11.3417 12.8536 11.1464L9.20711 7.5L12.8536 3.85355Z\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\n\nPaginationFirstIcon.displayName = \"PaginationFirstIcon\"\nPaginationFirstIcon.__ui__ = \"PaginationFirstIcon\"\n\nexport const PaginationLastIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n d=\"M2.14645 11.1464C1.95118 11.3417 1.95118 11.6583 2.14645 11.8536C2.34171 12.0488 2.65829 12.0488 2.85355 11.8536L6.85355 7.85355C7.04882 7.65829 7.04882 7.34171 6.85355 7.14645L2.85355 3.14645C2.65829 2.95118 2.34171 2.95118 2.14645 3.14645C1.95118 3.34171 1.95118 3.65829 2.14645 3.85355L5.79289 7.5L2.14645 11.1464ZM8.14645 11.1464C7.95118 11.3417 7.95118 11.6583 8.14645 11.8536C8.34171 12.0488 8.65829 12.0488 8.85355 11.8536L12.8536 7.85355C13.0488 7.65829 13.0488 7.34171 12.8536 7.14645L8.85355 3.14645C8.65829 2.95118 8.34171 2.95118 8.14645 3.14645C7.95118 3.34171 7.95118 3.65829 8.14645 3.85355L11.7929 7.5L8.14645 11.1464Z\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\n\nPaginationLastIcon.displayName = \"PaginationLastIcon\"\nPaginationLastIcon.__ui__ = \"PaginationLastIcon\"\n\nexport const PaginationPrevIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n d=\"M7.219 8l3.3 3.3-.943.943L5.333 8l4.243-4.243.943.943-3.3 3.3z\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\n\nPaginationPrevIcon.displayName = \"PaginationPrevIcon\"\nPaginationPrevIcon.__ui__ = \"PaginationPrevIcon\"\n\nexport const PaginationNextIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n d=\"M8.781 8l-3.3-3.3.943-.943L10.667 8l-4.243 4.243-.943-.943 3.3-3.3z\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\n\nPaginationNextIcon.displayName = \"PaginationNextIcon\"\nPaginationNextIcon.__ui__ = \"PaginationNextIcon\"\n","import type { CSSUIObject, Token } from \"@yamada-ui/core\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { createContext } from \"@yamada-ui/utils\"\nimport { useCallback, useMemo } from \"react\"\n\ninterface PaginationContext {\n [key: string]: CSSUIObject | undefined\n}\n\nexport const [PaginationProvider, usePaginationContext] =\n createContext<PaginationContext>({\n name: \"PaginationContext\",\n errorMessage: `usePaginationContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Pagination />\"`,\n })\n\nexport const computedRange = (start: number, end: number) =>\n Array.from({ length: end - start + 1 }, (_, index) => index + start)\n\nexport interface UsePaginationProps {\n /**\n * The total number of pages in pagination.\n */\n total: number\n /**\n * Number of elements visible on the left/right edges.\n *\n * @default 1\n */\n boundaries?: Token<number>\n /**\n * The initial page of the pagination.\n * Should be less than `total` and greater than `1`.\n *\n * @default 1\n */\n defaultPage?: number\n /**\n * If `true`, the pagination all item will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * The page of the pagination.\n * Should be less than `total` and greater than `1`.\n */\n page?: number\n /** Number of siblings displayed on the left/right side of selected page.\n *\n * @default 1\n */\n siblings?: Token<number>\n /**\n * The callback invoked when the page changes.\n */\n onChange?: (page: number) => void\n}\n\nexport const usePagination = ({\n boundaries: _boundaries = 1,\n defaultPage = 1,\n isDisabled = false,\n page,\n siblings: _siblings = 1,\n total,\n onChange: onChangeProp,\n}: UsePaginationProps) => {\n const siblings = useValue(_siblings)\n const boundaries = useValue(_boundaries)\n\n const [currentPage, setCurrentPage] = useControllableState({\n defaultValue: defaultPage,\n value: page,\n onChange: onChangeProp,\n })\n\n const onFirst = useCallback(() => setCurrentPage(1), [setCurrentPage])\n\n const onLast = useCallback(\n () => setCurrentPage(total),\n [setCurrentPage, total],\n )\n\n const onPrev = useCallback(\n () => setCurrentPage((prev) => (prev === 1 ? prev : prev - 1)),\n [setCurrentPage],\n )\n\n const onNext = useCallback(\n () => setCurrentPage((prev) => (prev === total ? prev : prev + 1)),\n [setCurrentPage, total],\n )\n\n const onChange = useCallback(\n (page: number) => setCurrentPage(page),\n [setCurrentPage],\n )\n\n const range = useMemo((): (\"ellipsis\" | number)[] => {\n const minimumTotal = siblings * 2 + 3 + boundaries * 2\n\n if (minimumTotal >= total) return computedRange(1, total)\n\n const prevSiblings = Math.max(currentPage - siblings, boundaries)\n const nextSiblings = Math.min(currentPage + siblings, total - boundaries)\n\n const prevDots = prevSiblings > boundaries + 2\n const nextDots = nextSiblings < total - (boundaries + 1)\n\n if (!prevDots && nextDots) {\n const prevPages = siblings * 2 + boundaries + 2\n\n return [\n ...computedRange(1, prevPages),\n \"ellipsis\",\n ...computedRange(total - (boundaries - 1), total),\n ]\n }\n\n if (prevDots && !nextDots) {\n const nextPages = boundaries + 1 + 2 * siblings\n\n return [\n ...computedRange(1, boundaries),\n \"ellipsis\",\n ...computedRange(total - nextPages, total),\n ]\n }\n\n return [\n ...computedRange(1, boundaries),\n \"ellipsis\",\n ...computedRange(prevSiblings, nextSiblings),\n \"ellipsis\",\n ...computedRange(total - boundaries + 1, total),\n ]\n }, [boundaries, siblings, currentPage, total])\n\n return {\n currentPage,\n isDisabled,\n range,\n total,\n onChange,\n onFirst,\n onLast,\n onNext,\n onPrev,\n }\n}\n\nexport type UsePaginationReturn = ReturnType<typeof usePagination>\n"],"mappings":"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","names":["import_core","import_use_value","import_utils","import_react","import_utils","page","import_jsx_runtime","import_jsx_runtime","page"]}
1
+ {"version":3,"sources":["../src/pagination.tsx","../src/pagination-item.tsx","../src/pagination-icon.tsx","../src/use-pagination.ts"],"sourcesContent":["import type {\n CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n Token,\n} from \"@yamada-ui/core\"\nimport type { FC } from \"react\"\nimport type { PaginationItemProps } from \"./pagination-item\"\nimport type { UsePaginationProps } from \"./use-pagination\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { cx, dataAttr, handlerAll } from \"@yamada-ui/utils\"\nimport { useMemo } from \"react\"\nimport { PaginationItem } from \"./pagination-item\"\nimport { PaginationProvider, usePagination } from \"./use-pagination\"\n\ninterface PaginationOptions {\n /**\n * The pagination button component to use.\n */\n component?: FC<PaginationItemProps>\n /**\n * If `true`, display the control buttons.\n *\n * @default true\n */\n withControls?: Token<boolean>\n /**\n * If `true`, display the edge buttons.\n *\n * @default false\n */\n withEdges?: Token<boolean>\n /**\n * Props for container element.\n */\n containerProps?: HTMLUIProps<\"nav\">\n /**\n * Props for next of the control button element.\n */\n controlNextProps?: Omit<PaginationItemProps, \"page\">\n /**\n * Props for previous of the control button element.\n */\n controlPrevProps?: Omit<PaginationItemProps, \"page\">\n /**\n * Props for control button element.\n */\n controlProps?: Omit<PaginationItemProps, \"page\">\n /**\n * Props for first of the edge button element.\n */\n edgeFirstProps?: Omit<PaginationItemProps, \"page\">\n /**\n * Props for last of the edge button element.\n */\n edgeLastProps?: Omit<PaginationItemProps, \"page\">\n /**\n * Props for edge button element.\n */\n edgeProps?: Omit<PaginationItemProps, \"page\">\n /**\n * Props for button element.\n */\n itemProps?: Omit<PaginationItemProps, \"page\">\n}\n\nexport interface PaginationProps\n extends Omit<HTMLUIProps<\"ul\">, \"children\" | \"onChange\" | \"page\">,\n ThemeProps<\"Pagination\">,\n UsePaginationProps,\n PaginationOptions {}\n\n/**\n * `Pagination` is a component for managing the pagination and navigation of content.\n *\n * @see Docs https://yamada-ui.com/components/navigation/pagination\n */\nexport const Pagination = forwardRef<PaginationProps, \"ul\">((props, ref) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"Pagination\", props)\n const {\n className,\n boundaries,\n component: Component = PaginationItem,\n defaultPage,\n isDisabled,\n page,\n siblings,\n total,\n withControls: _withControls = true,\n withEdges: _withEdges = false,\n containerProps,\n controlNextProps,\n controlPrevProps,\n controlProps,\n edgeFirstProps,\n edgeLastProps,\n edgeProps,\n itemProps,\n onChange: onChangeProp,\n ...rest\n } = omitThemeProps(mergedProps)\n\n const withControls = useValue(_withControls)\n const withEdges = useValue(_withEdges)\n\n const { currentPage, range, onChange, onFirst, onLast, onNext, onPrev } =\n usePagination({\n boundaries,\n defaultPage,\n isDisabled,\n page,\n siblings,\n total,\n onChange: onChangeProp,\n })\n\n const children = useMemo(\n () =>\n range.map((page, key) => (\n <ui.li key={key}>\n <Component\n aria-label={page !== \"ellipsis\" ? `Go to page ${page}` : undefined}\n isActive={currentPage === page}\n isDisabled={isDisabled}\n {...itemProps}\n page={page}\n onClick={handlerAll(\n itemProps?.onClick,\n page !== \"ellipsis\" ? () => onChange(page) : undefined,\n )}\n />\n </ui.li>\n )),\n [Component, currentPage, isDisabled, onChange, range, itemProps],\n )\n\n const css: CSSUIObject = {\n ...styles.container,\n }\n\n return (\n <PaginationProvider value={styles}>\n <ui.nav\n ref={ref}\n className={cx(\"ui-pagination\", className)}\n data-disabled={dataAttr(isDisabled)}\n __css={css}\n {...containerProps}\n >\n <ui.ul\n className=\"ui-pagination-inner\"\n data-disabled={dataAttr(isDisabled)}\n __css={{\n alignItems: \"center\",\n display: \"flex\",\n ...styles.inner,\n }}\n {...rest}\n >\n {withEdges ? (\n <ui.li>\n <Component\n className=\"ui-pagination__item--first\"\n aria-label=\"Go to first page\"\n isDisabled={isDisabled || currentPage === 1}\n page=\"first\"\n {...edgeProps}\n {...edgeFirstProps}\n onClick={handlerAll(\n edgeProps?.onClick,\n edgeFirstProps?.onClick,\n onFirst,\n )}\n />\n </ui.li>\n ) : null}\n\n {withControls ? (\n <ui.li>\n <Component\n className=\"ui-pagination__item--prev\"\n aria-label=\"Go to previous page\"\n isDisabled={isDisabled || currentPage === 1}\n page=\"prev\"\n {...controlProps}\n {...controlPrevProps}\n onClick={handlerAll(\n controlProps?.onClick,\n controlPrevProps?.onClick,\n onPrev,\n )}\n />\n </ui.li>\n ) : null}\n\n {children}\n\n {withControls ? (\n <ui.li>\n <Component\n className=\"ui-pagination__item--next\"\n aria-label=\"Go to next page\"\n isDisabled={isDisabled || currentPage === total}\n page=\"next\"\n {...controlProps}\n {...controlNextProps}\n onClick={handlerAll(\n controlProps?.onClick,\n controlNextProps?.onClick,\n onNext,\n )}\n />\n </ui.li>\n ) : null}\n\n {withEdges ? (\n <ui.li>\n <Component\n className=\"ui-pagination__item--last\"\n aria-label=\"Go to last page\"\n isDisabled={isDisabled || currentPage === total}\n page=\"last\"\n {...edgeProps}\n {...edgeLastProps}\n onClick={handlerAll(\n edgeProps?.onClick,\n edgeLastProps?.onClick,\n onLast,\n )}\n />\n </ui.li>\n ) : null}\n </ui.ul>\n </ui.nav>\n </PaginationProvider>\n )\n})\n\nPagination.displayName = \"Pagination\"\nPagination.__ui__ = \"Pagination\"\n","import type { CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport type { ReactNode } from \"react\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { Ripple, useRipple } from \"@yamada-ui/ripple\"\nimport { cx, dataAttr } from \"@yamada-ui/utils\"\nimport {\n PaginationEllipsisIcon,\n PaginationFirstIcon,\n PaginationLastIcon,\n PaginationNextIcon,\n PaginationPrevIcon,\n} from \"./pagination-icon\"\nimport { usePaginationContext } from \"./use-pagination\"\n\ninterface PaginationItemOptions {\n /**\n * The type of the page or item assigned to the pagination item.\n */\n page: \"ellipsis\" | \"first\" | \"last\" | \"next\" | \"prev\" | number\n /**\n * If `true`, disable ripple effects when pressing a element.\n *\n * @default false\n */\n disableRipple?: boolean\n /**\n * If `true`, the pagination item will be activated.\n *\n * @default false\n */\n isActive?: boolean\n /**\n * If `true`, the pagination item will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n}\n\nexport interface PaginationItemProps\n extends Omit<HTMLUIProps<\"button\">, \"page\">,\n PaginationItemOptions {}\n\nconst iconMap: {\n [key in \"ellipsis\" | \"first\" | \"last\" | \"next\" | \"prev\" | number]: ReactNode\n} = {\n ellipsis: <PaginationEllipsisIcon />,\n first: <PaginationFirstIcon />,\n last: <PaginationLastIcon />,\n next: <PaginationNextIcon />,\n prev: <PaginationPrevIcon />,\n}\n\nexport const PaginationItem = forwardRef<PaginationItemProps, \"button\">(\n (\n { className, children, disableRipple, isActive, isDisabled, page, ...rest },\n ref,\n ) => {\n const styles = usePaginationContext()\n const isEllipsis = page === \"ellipsis\"\n const { onPointerDown, ...rippleProps } = useRipple({\n ...rest,\n isDisabled: disableRipple || isDisabled || isEllipsis,\n })\n\n children ??= iconMap[page] ?? page\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"flex\",\n justifyContent: \"center\",\n overflow: \"hidden\",\n position: \"relative\",\n userSelect: \"none\",\n ...styles.item,\n ...styles[page],\n }\n\n const Component = ui[isEllipsis ? \"span\" : \"button\"]\n\n return (\n <Component\n ref={ref}\n {...(!isEllipsis\n ? {\n \"data-disabled\": dataAttr(isDisabled),\n \"data-selected\": dataAttr(isActive),\n disabled: isDisabled,\n }\n : {})}\n className={cx(\n \"ui-pagination__item\",\n isEllipsis ? \"ui-pagination__item--ellipsis\" : undefined,\n className,\n )}\n tabIndex={!isEllipsis ? 0 : -1}\n __css={css}\n {...rest}\n onPointerDown={onPointerDown}\n >\n {children}\n\n <Ripple isDisabled={disableRipple || isDisabled} {...rippleProps} />\n </Component>\n )\n },\n)\n\nPaginationItem.displayName = \"PaginationItem\"\nPaginationItem.__ui__ = \"PaginationItem\"\n","import type { FC } from \"@yamada-ui/core\"\nimport type { IconProps } from \"@yamada-ui/icon\"\nimport { Icon } from \"@yamada-ui/icon\"\n\nexport const PaginationEllipsisIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n d=\"M2 8c0-.733.6-1.333 1.333-1.333.734 0 1.334.6 1.334 1.333s-.6 1.333-1.334 1.333C2.6 9.333 2 8.733 2 8zm9.333 0c0-.733.6-1.333 1.334-1.333C13.4 6.667 14 7.267 14 8s-.6 1.333-1.333 1.333c-.734 0-1.334-.6-1.334-1.333zM6.667 8c0-.733.6-1.333 1.333-1.333s1.333.6 1.333 1.333S8.733 9.333 8 9.333 6.667 8.733 6.667 8z\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\n\nPaginationEllipsisIcon.displayName = \"PaginationEllipsisIcon\"\nPaginationEllipsisIcon.__ui__ = \"PaginationEllipsisIcon\"\n\nexport const PaginationFirstIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n d=\"M6.85355 3.85355C7.04882 3.65829 7.04882 3.34171 6.85355 3.14645C6.65829 2.95118 6.34171 2.95118 6.14645 3.14645L2.14645 7.14645C1.95118 7.34171 1.95118 7.65829 2.14645 7.85355L6.14645 11.8536C6.34171 12.0488 6.65829 12.0488 6.85355 11.8536C7.04882 11.6583 7.04882 11.3417 6.85355 11.1464L3.20711 7.5L6.85355 3.85355ZM12.8536 3.85355C13.0488 3.65829 13.0488 3.34171 12.8536 3.14645C12.6583 2.95118 12.3417 2.95118 12.1464 3.14645L8.14645 7.14645C7.95118 7.34171 7.95118 7.65829 8.14645 7.85355L12.1464 11.8536C12.3417 12.0488 12.6583 12.0488 12.8536 11.8536C13.0488 11.6583 13.0488 11.3417 12.8536 11.1464L9.20711 7.5L12.8536 3.85355Z\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\n\nPaginationFirstIcon.displayName = \"PaginationFirstIcon\"\nPaginationFirstIcon.__ui__ = \"PaginationFirstIcon\"\n\nexport const PaginationLastIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n d=\"M2.14645 11.1464C1.95118 11.3417 1.95118 11.6583 2.14645 11.8536C2.34171 12.0488 2.65829 12.0488 2.85355 11.8536L6.85355 7.85355C7.04882 7.65829 7.04882 7.34171 6.85355 7.14645L2.85355 3.14645C2.65829 2.95118 2.34171 2.95118 2.14645 3.14645C1.95118 3.34171 1.95118 3.65829 2.14645 3.85355L5.79289 7.5L2.14645 11.1464ZM8.14645 11.1464C7.95118 11.3417 7.95118 11.6583 8.14645 11.8536C8.34171 12.0488 8.65829 12.0488 8.85355 11.8536L12.8536 7.85355C13.0488 7.65829 13.0488 7.34171 12.8536 7.14645L8.85355 3.14645C8.65829 2.95118 8.34171 2.95118 8.14645 3.14645C7.95118 3.34171 7.95118 3.65829 8.14645 3.85355L11.7929 7.5L8.14645 11.1464Z\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\n\nPaginationLastIcon.displayName = \"PaginationLastIcon\"\nPaginationLastIcon.__ui__ = \"PaginationLastIcon\"\n\nexport const PaginationPrevIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n d=\"M7.219 8l3.3 3.3-.943.943L5.333 8l4.243-4.243.943.943-3.3 3.3z\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\n\nPaginationPrevIcon.displayName = \"PaginationPrevIcon\"\nPaginationPrevIcon.__ui__ = \"PaginationPrevIcon\"\n\nexport const PaginationNextIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n d=\"M8.781 8l-3.3-3.3.943-.943L10.667 8l-4.243 4.243-.943-.943 3.3-3.3z\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\n\nPaginationNextIcon.displayName = \"PaginationNextIcon\"\nPaginationNextIcon.__ui__ = \"PaginationNextIcon\"\n","import type { CSSUIObject, Token } from \"@yamada-ui/core\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { createContext } from \"@yamada-ui/utils\"\nimport { useCallback, useMemo } from \"react\"\n\ninterface PaginationContext {\n [key: string]: CSSUIObject | undefined\n}\n\nexport const [PaginationProvider, usePaginationContext] =\n createContext<PaginationContext>({\n name: \"PaginationContext\",\n errorMessage: `usePaginationContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Pagination />\"`,\n })\n\nexport const computedRange = (start: number, end: number) =>\n Array.from({ length: end - start + 1 }, (_, index) => index + start)\n\nexport interface UsePaginationProps {\n /**\n * The total number of pages in pagination.\n */\n total: number\n /**\n * Number of elements visible on the left/right edges.\n *\n * @default 1\n */\n boundaries?: Token<number>\n /**\n * The initial page of the pagination.\n * Should be less than `total` and greater than `1`.\n *\n * @default 1\n */\n defaultPage?: number\n /**\n * If `true`, the pagination all item will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * The page of the pagination.\n * Should be less than `total` and greater than `1`.\n */\n page?: number\n /** Number of siblings displayed on the left/right side of selected page.\n *\n * @default 1\n */\n siblings?: Token<number>\n /**\n * The callback invoked when the page changes.\n */\n onChange?: (page: number) => void\n}\n\nexport const usePagination = ({\n boundaries: _boundaries = 1,\n defaultPage = 1,\n isDisabled = false,\n page,\n siblings: _siblings = 1,\n total,\n onChange: onChangeProp,\n}: UsePaginationProps) => {\n const siblings = useValue(_siblings)\n const boundaries = useValue(_boundaries)\n\n const [currentPage, setCurrentPage] = useControllableState({\n defaultValue: defaultPage,\n value: page,\n onChange: onChangeProp,\n })\n\n const onFirst = useCallback(() => setCurrentPage(1), [setCurrentPage])\n\n const onLast = useCallback(\n () => setCurrentPage(total),\n [setCurrentPage, total],\n )\n\n const onPrev = useCallback(\n () => setCurrentPage((prev) => (prev === 1 ? prev : prev - 1)),\n [setCurrentPage],\n )\n\n const onNext = useCallback(\n () => setCurrentPage((prev) => (prev === total ? prev : prev + 1)),\n [setCurrentPage, total],\n )\n\n const onChange = useCallback(\n (page: number) => setCurrentPage(page),\n [setCurrentPage],\n )\n\n const range = useMemo((): (\"ellipsis\" | number)[] => {\n const minimumTotal = siblings * 2 + 3 + boundaries * 2\n\n if (minimumTotal >= total) return computedRange(1, total)\n\n const prevSiblings = Math.max(currentPage - siblings, boundaries)\n const nextSiblings = Math.min(currentPage + siblings, total - boundaries)\n\n const prevDots = prevSiblings > boundaries + 2\n const nextDots = nextSiblings < total - (boundaries + 1)\n\n if (!prevDots && nextDots) {\n const prevPages = siblings * 2 + boundaries + 2\n\n return [\n ...computedRange(1, prevPages),\n \"ellipsis\",\n ...computedRange(total - (boundaries - 1), total),\n ]\n }\n\n if (prevDots && !nextDots) {\n const nextPages = boundaries + 1 + 2 * siblings\n\n return [\n ...computedRange(1, boundaries),\n \"ellipsis\",\n ...computedRange(total - nextPages, total),\n ]\n }\n\n return [\n ...computedRange(1, boundaries),\n \"ellipsis\",\n ...computedRange(prevSiblings, nextSiblings),\n \"ellipsis\",\n ...computedRange(total - boundaries + 1, total),\n ]\n }, [boundaries, siblings, currentPage, total])\n\n return {\n currentPage,\n isDisabled,\n range,\n total,\n onChange,\n onFirst,\n onLast,\n onNext,\n onPrev,\n }\n}\n\nexport type UsePaginationReturn = ReturnType<typeof usePagination>\n"],"mappings":"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","names":["import_core","import_use_value","import_utils","import_react","import_utils","page","import_jsx_runtime","import_jsx_runtime","page"]}
@@ -1,8 +1,8 @@
1
1
  "use client"
2
2
  import {
3
3
  Pagination
4
- } from "./chunk-E35BXOXS.mjs";
5
- import "./chunk-PUQ5FNCP.mjs";
4
+ } from "./chunk-2SJMAKWY.mjs";
5
+ import "./chunk-LFUBRVFO.mjs";
6
6
  import "./chunk-VZWGYG76.mjs";
7
7
  import "./chunk-O6EIBNLC.mjs";
8
8
  export {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yamada-ui/pagination",
3
- "version": "1.0.43-next-20241021022308",
3
+ "version": "1.1.0-dev-20241024011656",
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.15.3-next-20241021022308",
40
- "@yamada-ui/icon": "1.1.9-next-20241021022308",
41
- "@yamada-ui/ripple": "1.0.41-next-20241021022308",
42
- "@yamada-ui/use-controllable-state": "1.0.23-next-20241021022308",
43
- "@yamada-ui/use-value": "1.1.28-next-20241021022308",
44
- "@yamada-ui/utils": "1.5.4-next-20241021022308"
39
+ "@yamada-ui/core": "1.15.3-dev-20241024011656",
40
+ "@yamada-ui/icon": "1.1.9-dev-20241024011656",
41
+ "@yamada-ui/ripple": "1.0.41-dev-20241024011656",
42
+ "@yamada-ui/use-controllable-state": "1.0.23-dev-20241024011656",
43
+ "@yamada-ui/use-value": "1.1.28-dev-20241024011656",
44
+ "@yamada-ui/utils": "1.5.4-dev-20241024011656"
45
45
  },
46
46
  "devDependencies": {
47
47
  "clean-package": "2.2.0",
@@ -1,177 +0,0 @@
1
- "use client"
2
- import {
3
- PaginationItem
4
- } from "./chunk-PUQ5FNCP.mjs";
5
- import {
6
- PaginationProvider,
7
- usePagination
8
- } from "./chunk-O6EIBNLC.mjs";
9
-
10
- // src/pagination.tsx
11
- import {
12
- forwardRef,
13
- omitThemeProps,
14
- ui,
15
- useComponentMultiStyle
16
- } from "@yamada-ui/core";
17
- import { useValue } from "@yamada-ui/use-value";
18
- import { cx, dataAttr, handlerAll } from "@yamada-ui/utils";
19
- import { useMemo } from "react";
20
- import { jsx, jsxs } from "react/jsx-runtime";
21
- var Pagination = forwardRef((props, ref) => {
22
- const [styles, mergedProps] = useComponentMultiStyle("Pagination", props);
23
- const {
24
- className,
25
- boundaries,
26
- component: Component = PaginationItem,
27
- defaultPage,
28
- isDisabled,
29
- page,
30
- siblings,
31
- total,
32
- withControls: _withControls = true,
33
- withEdges: _withEdges = false,
34
- controlNextProps,
35
- controlPrevProps,
36
- controlProps,
37
- edgeFirstProps,
38
- edgeLastProps,
39
- edgeProps,
40
- innerProps,
41
- itemProps,
42
- onChange: onChangeProp,
43
- ...rest
44
- } = omitThemeProps(mergedProps);
45
- const withControls = useValue(_withControls);
46
- const withEdges = useValue(_withEdges);
47
- const { currentPage, range, onChange, onFirst, onLast, onNext, onPrev } = usePagination({
48
- boundaries,
49
- defaultPage,
50
- isDisabled,
51
- page,
52
- siblings,
53
- total,
54
- onChange: onChangeProp
55
- });
56
- const children = useMemo(
57
- () => range.map((page2, key) => /* @__PURE__ */ jsx(
58
- Component,
59
- {
60
- "aria-label": page2 === "ellipsis" ? "Jump to omitted pages" : `Go to page ${page2}`,
61
- isActive: currentPage === page2,
62
- isDisabled,
63
- page: page2,
64
- ...itemProps,
65
- onClick: handlerAll(
66
- itemProps == null ? void 0 : itemProps.onClick,
67
- page2 !== "ellipsis" ? () => onChange(page2) : void 0
68
- )
69
- },
70
- key
71
- )),
72
- [Component, currentPage, isDisabled, onChange, range, itemProps]
73
- );
74
- const css = {
75
- alignItems: "center",
76
- display: "flex",
77
- ...styles.container
78
- };
79
- return /* @__PURE__ */ jsx(PaginationProvider, { value: styles, children: /* @__PURE__ */ jsxs(
80
- ui.div,
81
- {
82
- ref,
83
- className: cx("ui-pagination", className),
84
- role: "navigation",
85
- __css: css,
86
- ...rest,
87
- "data-disabled": dataAttr(isDisabled),
88
- children: [
89
- withEdges ? /* @__PURE__ */ jsx(
90
- Component,
91
- {
92
- className: "ui-pagination__item--first",
93
- "aria-label": "Go to first page",
94
- isDisabled: isDisabled || currentPage === 1,
95
- page: "first",
96
- ...edgeProps,
97
- ...edgeFirstProps,
98
- onClick: handlerAll(
99
- edgeProps == null ? void 0 : edgeProps.onClick,
100
- edgeFirstProps == null ? void 0 : edgeFirstProps.onClick,
101
- onFirst
102
- )
103
- }
104
- ) : null,
105
- withControls ? /* @__PURE__ */ jsx(
106
- Component,
107
- {
108
- className: "ui-pagination__item--prev",
109
- "aria-label": "Go to previous page",
110
- isDisabled: isDisabled || currentPage === 1,
111
- page: "prev",
112
- ...controlProps,
113
- ...controlPrevProps,
114
- onClick: handlerAll(
115
- controlProps == null ? void 0 : controlProps.onClick,
116
- controlPrevProps == null ? void 0 : controlPrevProps.onClick,
117
- onPrev
118
- )
119
- }
120
- ) : null,
121
- /* @__PURE__ */ jsx(
122
- ui.div,
123
- {
124
- className: "ui-pagination-inner",
125
- __css: {
126
- alignItems: "center",
127
- display: "flex",
128
- justifyContent: "center",
129
- ...styles.inner
130
- },
131
- ...innerProps,
132
- children
133
- }
134
- ),
135
- withControls ? /* @__PURE__ */ jsx(
136
- Component,
137
- {
138
- className: "ui-pagination__item--next",
139
- "aria-label": "Go to next page",
140
- isDisabled: isDisabled || currentPage === total,
141
- page: "next",
142
- ...controlProps,
143
- ...controlNextProps,
144
- onClick: handlerAll(
145
- controlProps == null ? void 0 : controlProps.onClick,
146
- controlNextProps == null ? void 0 : controlNextProps.onClick,
147
- onNext
148
- )
149
- }
150
- ) : null,
151
- withEdges ? /* @__PURE__ */ jsx(
152
- Component,
153
- {
154
- className: "ui-pagination__item--last",
155
- "aria-label": "Go to last page",
156
- isDisabled: isDisabled || currentPage === total,
157
- page: "last",
158
- ...edgeProps,
159
- ...edgeLastProps,
160
- onClick: handlerAll(
161
- edgeProps == null ? void 0 : edgeProps.onClick,
162
- edgeLastProps == null ? void 0 : edgeLastProps.onClick,
163
- onLast
164
- )
165
- }
166
- ) : null
167
- ]
168
- }
169
- ) });
170
- });
171
- Pagination.displayName = "Pagination";
172
- Pagination.__ui__ = "Pagination";
173
-
174
- export {
175
- Pagination
176
- };
177
- //# sourceMappingURL=chunk-E35BXOXS.mjs.map