@charcoal-ui/react 5.5.0-beta.0 → 5.5.0-beta.2

package/src/components/Pagination/index.tsx

@@ -1,158 +1,186 @@
 import './index.css'
 
-import { memo, useCallback } from 'react'
-import { usePagerWindow } from './helper'
+import { usePaginationWindow } from './helper'
 import { useClassNames } from '../../_lib/useClassNames'
 import IconButton from '../IconButton'
+import {
+  PaginationContext,
+  usePaginationContext,
+  type LinkComponentProps,
+  type PageRangeDisplayed,
+  type Size,
+} from './PaginationContext'
 
-const Text = 'span'
-
-interface CommonProps {
-  page: number
-  pageCount: number
-  pageRangeDisplayed?: number
+type NavButtonProps = {
+  direction: 'prev' | 'next'
 }
 
-export interface PaginationProps extends CommonProps {
-  onChange(newPage: number): void
-}
-
-export default memo(function Pagination({
-  page,
-  pageCount,
-  pageRangeDisplayed,
-  onChange,
-  className,
-  ...props
-}: PaginationProps & Omit<React.ComponentPropsWithoutRef<'nav'>, 'onChange'>) {
-  const window = usePagerWindow(page, pageCount, pageRangeDisplayed)
-  const makeClickHandler = useCallback(
-    (value: number) => () => {
-      onChange(value)
-    },
-    [onChange],
-  )
+function NavButton({ direction }: NavButtonProps) {
+  'use memo'
+  const {
+    page,
+    pageCount,
+    size,
+    isLinkMode,
+    makeUrl,
+    LinkComponent,
+    makeClickHandler,
+  } = usePaginationContext()
 
-  const hasNext = page < pageCount
-  const hasPrev = page > 1
-  const classNames = useClassNames('charcoal-pagination', className)
+  const isPrev = direction === 'prev'
+  const targetPage = isPrev
+    ? Math.max(1, page - 1)
+    : Math.min(pageCount, page + 1)
+  const disabled = isPrev ? page <= 1 : page >= pageCount
 
   return (
-    <nav {...props} className={classNames}>
+    <IconButton
+      icon={isPrev ? '24/Prev' : '24/Next'}
+      size={size}
+      hidden={disabled}
+      className="charcoal-pagination-nav-button"
+      {...(isLinkMode && makeUrl
+        ? {
+            component: LinkComponent as 'a',
+            href: makeUrl(targetPage),
+            'aria-disabled': disabled,
+          }
+        : {
+            disabled,
+            onClick: makeClickHandler(targetPage),
+          })}
+    />
+  )
+}
+
+function PageItem({ value }: { value: number | string }) {
+  'use memo'
+  const { page, size, isLinkMode, makeUrl, LinkComponent, makeClickHandler } =
+    usePaginationContext()
+  // 省略記号
+  if (value === '...') {
+    return (
       <IconButton
-        icon="24/Prev"
-        size="M"
-        className="charcoal-pagination-button"
-        data-no-background
-        hidden={!hasPrev}
-        disabled={!hasPrev}
-        onClick={makeClickHandler(Math.max(1, page - 1))}
+        icon="24/Dot"
+        size={size}
+        disabled
+        className="charcoal-pagination-spacer"
+        aria-hidden
       />
-      {window.map((p) =>
-        p === '...' ? (
-          <IconButton
-            key={p}
-            icon="24/Dot"
-            size="M"
-            disabled
-            className="charcoal-pagination-button charcoal-pagination-spacer"
-            aria-hidden
-          />
-        ) : p === page ? (
-          // we remove the onClick but don't mark it as disabled to preserve keyboard focus
-          // not doing so causes the focus ring to flicker in and out of existence
-          <button
-            key={p}
-            type="button"
-            className="charcoal-pagination-button"
-            aria-current
-          >
-            <Text>{p}</Text>
-          </button>
-        ) : (
-          <button
-            key={p}
-            type="button"
-            className="charcoal-pagination-button"
-            onClick={makeClickHandler(p)}
-          >
-            <Text>{p}</Text>
-          </button>
-        ),
-      )}
-      <IconButton
-        icon="24/Next"
-        size="M"
+    )
+  }
+  // 現在ページ（クリック不可）
+  if (value === page) {
+    return (
+      <span className="charcoal-pagination-button" aria-current="page">
+        {value}
+      </span>
+    )
+  }
+  if (typeof value !== 'number') return null
+  // リンクモード: ページへのリンク
+  if (isLinkMode && makeUrl) {
+    return (
+      <LinkComponent
+        href={makeUrl(value)}
         className="charcoal-pagination-button"
-        data-no-background
-        hidden={!hasNext}
-        disabled={!hasNext}
-        onClick={makeClickHandler(Math.min(pageCount, page + 1))}
-      />
-    </nav>
+      >
+        {value}
+      </LinkComponent>
+    )
+  }
+  // ボタンモード: クリックでページ遷移
+  return (
+    <button
+      type="button"
+      className="charcoal-pagination-button"
+      onClick={makeClickHandler(value)}
+    >
+      {value}
+    </button>
   )
-})
+}
 
-export interface LinkPaginationProps extends CommonProps {
-  makeUrl(page: number): string
+interface CommonProps {
+  page: number
+  pageCount: number
+  pageRangeDisplayed?: PageRangeDisplayed
+  size?: Size
 }
 
-export function LinkPagination({
+type NavProps = Omit<React.ComponentPropsWithoutRef<'nav'>, 'onChange'>
+
+/**
+ * Pagination component. Use either `onChange` (button mode) or `makeUrl` (link mode).
+ *
+ * @example
+ * // Button mode - for client-side state
+ * <Pagination page={1} pageCount={10} onChange={setPage} />
+ *
+ * @example
+ * // Link mode - for server routing / static pages
+ * <Pagination page={1} pageCount={10} makeUrl={(p) => `?page=${p}`} />
+ *
+ * @example
+ * // Link mode with custom component (e.g. Next.js Link)
+ * <Pagination page={1} pageCount={10} makeUrl={(p) => `?page=${p}`} component={Link} />
+ */
+export type PaginationProps = CommonProps &
+  NavProps &
+  (
+    | { onChange(newPage: number): void; makeUrl?: never; component?: never }
+    | {
+        makeUrl(page: number): string
+        onChange?: never
+        /**
+         * The component used for link elements. Receives `href`, `className`, and `children`.
+         * @default 'a'
+         */
+        component?: React.ElementType<LinkComponentProps>
+      }
+  )
+
+export default function Pagination({
   page,
   pageCount,
   pageRangeDisplayed,
+  size = 'M',
+  onChange,
   makeUrl,
+  component: LinkComponent = 'a',
   className,
-  ...props
-}: LinkPaginationProps & React.ComponentPropsWithoutRef<'nav'>) {
-  const window = usePagerWindow(page, pageCount, pageRangeDisplayed)
-
-  const hasNext = page < pageCount
-  const hasPrev = page > 1
+  ...navProps
+}: PaginationProps) {
+  'use memo'
+  const window = usePaginationWindow(page, pageCount, pageRangeDisplayed)
+  const isLinkMode = makeUrl !== undefined
+  const makeClickHandler = (value: number) => () => onChange?.(value)
   const classNames = useClassNames('charcoal-pagination', className)
 
+  const contextValue = {
+    page,
+    pageCount,
+    size,
+    isLinkMode,
+    makeUrl,
+    LinkComponent,
+    makeClickHandler,
+  }
+
   return (
-    <nav {...props} className={classNames}>
-      <IconButton
-        icon="24/Prev"
-        size="M"
-        component="a"
-        href={makeUrl(Math.max(1, page - 1))}
-        className="charcoal-pagination-button"
-        data-no-background
-        hidden={!hasPrev}
-        aria-disabled={!hasPrev}
-      />
-      {window.map((p) =>
-        p === '...' ? (
-          <IconButton
-            key={p}
-            icon="24/Dot"
-            size="M"
-            disabled
-            className="charcoal-pagination-button charcoal-pagination-spacer"
-            aria-hidden
-          />
-        ) : p === page ? (
-          <span key={p} className="charcoal-pagination-button" aria-current>
-            <Text>{p}</Text>
-          </span>
-        ) : (
-          <a key={p} href={makeUrl(p)} className="charcoal-pagination-button">
-            <Text>{p}</Text>
-          </a>
-        ),
-      )}
-      <IconButton
-        icon="24/Next"
-        size="M"
-        component="a"
-        href={makeUrl(Math.min(pageCount, page + 1))}
-        className="charcoal-pagination-button"
-        data-no-background
-        hidden={!hasNext}
-        aria-disabled={!hasNext}
-      />
-    </nav>
+    <PaginationContext.Provider value={contextValue}>
+      <nav
+        className={classNames}
+        data-size={size}
+        aria-label="Pagination"
+        {...navProps}
+      >
+        <NavButton direction="prev" />
+        {window.map((p) => (
+          <PageItem key={p} value={p} />
+        ))}
+        <NavButton direction="next" />
+      </nav>
+    </PaginationContext.Provider>
   )
 }

package/src/index.ts

@@ -83,3 +83,7 @@ export {
   default as UnstableTextEllipsis,
   type TextEllipsisProps,
 } from './components/TextEllipsis'
+export {
+  default as UnstablePagination,
+  type PaginationProps,
+} from './components/Pagination'