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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/react",
-  "version": "5.5.0-beta.0",
+  "version": "5.5.0-beta.1",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -48,16 +48,16 @@
     "@react-aria/switch": "^3.6.0",
     "@react-aria/utils": "^3.23.0",
     "@react-aria/visually-hidden": "^3.8.8",
+    "@react-spring/web": "^10",
     "@react-stately/radio": "^3.10.2",
     "polished": "^4.1.4",
     "react-compiler-runtime": "1.0.0",
-    "react-spring": "^9.0.0",
     "react-stately": "^3.26.0",
     "warning": "^4.0.3",
-    "@charcoal-ui/foundation": "5.5.0-beta.0",
-    "@charcoal-ui/icons": "5.5.0-beta.0",
-    "@charcoal-ui/utils": "5.5.0-beta.0",
-    "@charcoal-ui/theme": "5.5.0-beta.0"
+    "@charcoal-ui/foundation": "5.5.0-beta.1",
+    "@charcoal-ui/theme": "5.5.0-beta.1",
+    "@charcoal-ui/icons": "5.5.0-beta.1",
+    "@charcoal-ui/utils": "5.5.0-beta.1"
   },
   "peerDependencies": {
     "react": ">=17.0.0"

package/src/components/Modal/index.tsx

@@ -2,7 +2,7 @@ import { useContext, forwardRef, memo } from 'react'
 import * as React from 'react'
 import { Overlay } from '@react-aria/overlays'
 import type { AriaDialogProps } from '@react-types/dialog'
-import { animated, useTransition, easings } from 'react-spring'
+import { animated, useTransition, easings } from '@react-spring/web'
 import Button, { ButtonProps } from '../Button'
 import IconButton, { IconButtonProps } from '../IconButton'
 import { useObjectRef } from '@react-aria/utils'

package/src/components/Pagination/Pagination.story.tsx

@@ -1,10 +1,52 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { Meta, StoryObj } from '@storybook/react-webpack5'
-import Pagination, { LinkPagination } from '.'
+import Pagination from '.'
 
-function PaginationWithState(args: React.ComponentProps<typeof Pagination>) {
+type PaginationStoryArgs = {
+  page: number
+  pageCount: number
+  pageRangeDisplayed?: number
+}
+
+function PaginationWithState(args: PaginationStoryArgs) {
   const [page, setPage] = useState(args.page)
-  return <Pagination {...args} page={page} onChange={setPage} />
+  return (
+    <Pagination
+      page={page}
+      pageCount={args.pageCount}
+      pageRangeDisplayed={args.pageRangeDisplayed}
+      onChange={setPage}
+    />
+  )
+}
+
+function parsePageFromHash(fallback: number): number {
+  const match = window.location.hash.match(/^#page-(\d+)$/)
+  return match ? parseInt(match[1], 10) : fallback
+}
+
+function LinkPaginationWithState(args: PaginationStoryArgs) {
+  const [page, setPage] = useState(() => parsePageFromHash(args.page))
+
+  useEffect(() => {
+    const handleHashChange = () => setPage(parsePageFromHash(args.page))
+    window.addEventListener('hashchange', handleHashChange)
+    return () => window.removeEventListener('hashchange', handleHashChange)
+  }, [args.page])
+
+  return (
+    <div>
+      <p style={{ marginBottom: 8, fontSize: 14, color: '#666' }}>
+        Current page: {page}
+      </p>
+      <Pagination
+        page={page}
+        pageCount={args.pageCount}
+        pageRangeDisplayed={args.pageRangeDisplayed}
+        makeUrl={(p) => `#page-${p}`}
+      />
+    </div>
+  )
 }
 
 export default {
@@ -47,11 +89,10 @@ export const ManyPages: StoryObj<typeof Pagination> = {
   render: (args) => <PaginationWithState {...args} />,
 }
 
-export const LinkPaginationStory: StoryObj<typeof LinkPagination> = {
+export const LinkPaginationStory: StoryObj<typeof Pagination> = {
   args: {
     page: 5,
     pageCount: 10,
-    makeUrl: (p) => `#page-${p}`,
   },
-  render: (args) => <LinkPagination {...args} />,
+  render: (args) => <LinkPaginationWithState {...args} />,
 }

package/src/components/Pagination/helper.test.ts

@@ -0,0 +1,58 @@
+import { renderHook } from '@testing-library/react'
+import { usePaginationWindow } from './helper'
+
+describe('usePaginationWindow', () => {
+  describe('7 pages or less (no ellipsis)', () => {
+    it('returns [1,2,3,4,5,6,7] when page=1, pageCount=10', () => {
+      const { result } = renderHook(() => usePaginationWindow(1, 10))
+      expect(result.current).toEqual([1, 2, 3, 4, 5, 6, 7])
+    })
+
+    it('returns [1,2,3,4,5,6,7] when page=2, pageCount=10', () => {
+      const { result } = renderHook(() => usePaginationWindow(2, 10))
+      expect(result.current).toEqual([1, 2, 3, 4, 5, 6, 7])
+    })
+
+    it('returns [1,2,3,4,5,6,7] when page=4, pageCount=10', () => {
+      const { result } = renderHook(() => usePaginationWindow(4, 10))
+      expect(result.current).toEqual([1, 2, 3, 4, 5, 6, 7])
+    })
+  })
+
+  describe('with ellipsis', () => {
+    it('returns [1, ..., 4, 5, 6, 7, 8] when page=5, pageCount=100', () => {
+      const { result } = renderHook(() => usePaginationWindow(5, 100))
+      expect(result.current).toEqual([1, '...', 4, 5, 6, 7, 8])
+    })
+
+    it('returns [1, ..., 96, 97, 98, 99, 100] when page=100, pageCount=100', () => {
+      const { result } = renderHook(() => usePaginationWindow(100, 100))
+      expect(result.current).toEqual([1, '...', 96, 97, 98, 99, 100])
+    })
+  })
+
+  describe('with pageRangeDisplayed specified', () => {
+    it('shows first 5 pages when pageRangeDisplayed=5 (no ellipsis)', () => {
+      const { result } = renderHook(() => usePaginationWindow(2, 20, 5))
+      expect(result.current).toEqual([1, 2, 3, 4, 5])
+    })
+
+    it('shows ellipsis when pageRangeDisplayed=5', () => {
+      const { result } = renderHook(() => usePaginationWindow(5, 20, 5))
+      expect(result.current).toEqual([1, '...', 5, 6, 7])
+    })
+  })
+
+  describe('when arguments change', () => {
+    it('updates window when page changes', () => {
+      const { result, rerender } = renderHook(
+        ({ page, pageCount }) => usePaginationWindow(page, pageCount),
+        { initialProps: { page: 2, pageCount: 10 } },
+      )
+      expect(result.current).toEqual([1, 2, 3, 4, 5, 6, 7])
+
+      rerender({ page: 5, pageCount: 10 })
+      expect(result.current).toEqual([1, '...', 4, 5, 6, 7, 8])
+    })
+  })
+})

package/src/components/Pagination/helper.ts

@@ -1,11 +1,12 @@
-import { useDebugValue, useMemo } from 'react'
+import { useDebugValue } from 'react'
 import warning from 'warning'
 
-export function usePagerWindow(
+export function usePaginationWindow(
   page: number,
   pageCount: number,
   pageRangeDisplayed = 7,
 ) {
+  'use memo'
   // ページャーのリンク生成例:
   //
   //     < [ 1 ] [*2*] [ 3 ] [ 4 ] [ 5 ] [ 6 ] [ 7 ] >
@@ -35,13 +36,13 @@ export function usePagerWindow(
     warning(pageRangeDisplayed > 2, `\`windowSize\` must be greater than 2`)
   }
 
-  const window = useMemo(() => {
-    const visibleFirstPage = 1
-    const visibleLastPage = Math.min(
-      pageCount,
-      Math.max(page + Math.floor(pageRangeDisplayed / 2), pageRangeDisplayed),
-    )
+  const visibleFirstPage = 1
+  const visibleLastPage = Math.min(
+    pageCount,
+    Math.max(page + Math.floor(pageRangeDisplayed / 2), pageRangeDisplayed),
+  )
 
+  const window = (() => {
     if (visibleLastPage <= pageRangeDisplayed) {
       // 表示範囲が1-7ページなら省略は無い。
       return Array.from(
@@ -50,11 +51,11 @@ export function usePagerWindow(
       )
     } else {
       const start = visibleLastPage - (pageRangeDisplayed - 1) + 2
+      // 表示範囲が1-7ページを超えるなら、
+      // - 1ページ目は固定で表示する
+      // - 2ページ目から現在のページの直前までは省略する
       return [
-        // 表示範囲が1-7ページを超えるなら、
-        // - 1ページ目は固定で表示する
         visibleFirstPage,
-        // - 2ページ目から現在のページの直前までは省略する
         '...' as const,
         ...Array.from(
           { length: 1 + visibleLastPage - start },
@@ -62,7 +63,7 @@ export function usePagerWindow(
         ),
       ]
     }
-  }, [page, pageCount, pageRangeDisplayed])
+  })()
 
   useDebugValue(window)
 

package/src/components/Pagination/index.tsx

@@ -1,158 +1,153 @@
 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'
 
-const Text = 'span'
-
 interface CommonProps {
   page: number
   pageCount: number
   pageRangeDisplayed?: number
 }
 
-export interface PaginationProps extends CommonProps {
-  onChange(newPage: number): void
+type LinkComponentProps = {
+  href: string
+  className?: string
+  children?: React.ReactNode
 }
 
-export default memo(function Pagination({
+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,
   onChange,
+  makeUrl,
+  component: LinkComponent = 'a',
   className,
-  ...props
-}: PaginationProps & Omit<React.ComponentPropsWithoutRef<'nav'>, 'onChange'>) {
-  const window = usePagerWindow(page, pageCount, pageRangeDisplayed)
-  const makeClickHandler = useCallback(
-    (value: number) => () => {
-      onChange(value)
-    },
-    [onChange],
-  )
+  ...navProps
+}: PaginationProps) {
+  'use memo'
+  const window = usePaginationWindow(page, pageCount, pageRangeDisplayed)
+  const isLinkMode = makeUrl !== undefined
+
+  // 'use memo' により React Compiler が自動でメモ化するため useCallback は不要
+  const makeClickHandler = (value: number) => () => onChange?.(value)
 
-  const hasNext = page < pageCount
-  const hasPrev = page > 1
   const classNames = useClassNames('charcoal-pagination', className)
 
-  return (
-    <nav {...props} className={classNames}>
-      <IconButton
-        icon="24/Prev"
-        size="M"
-        className="charcoal-pagination-button"
-        data-no-background
-        hidden={!hasPrev}
-        disabled={!hasPrev}
-        onClick={makeClickHandler(Math.max(1, page - 1))}
-      />
-      {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>
-        ),
-      )}
+  const NavButton = ({ direction }: { direction: 'prev' | 'next' }) => {
+    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 (
       <IconButton
-        icon="24/Next"
+        icon={isPrev ? '24/Prev' : '24/Next'}
         size="M"
         className="charcoal-pagination-button"
-        data-no-background
-        hidden={!hasNext}
-        disabled={!hasNext}
-        onClick={makeClickHandler(Math.min(pageCount, page + 1))}
+        hidden={disabled}
+        {...(isLinkMode && makeUrl
+          ? {
+              component: LinkComponent as 'a',
+              href: makeUrl(targetPage),
+              'aria-disabled': disabled,
+            }
+          : {
+              disabled,
+              onClick: makeClickHandler(targetPage),
+            })}
       />
-    </nav>
-  )
-})
+    )
+  }
 
-export interface LinkPaginationProps extends CommonProps {
-  makeUrl(page: number): string
-}
+  const PageItem = ({ value }: { value: number | string }) => {
+    // 省略記号
+    if (value === '...') {
+      return (
+        <IconButton
+          icon="24/Dot"
+          size="M"
+          disabled
+          className="charcoal-pagination-button charcoal-pagination-spacer"
+          aria-hidden
+        />
+      )
+    }
+    // 現在ページ（クリック不可）
+    if (value === page) {
+      return (
+        <span className="charcoal-pagination-button" aria-current="page">
+          {value}
+        </span>
+      )
+    }
 
-export function LinkPagination({
-  page,
-  pageCount,
-  pageRangeDisplayed,
-  makeUrl,
-  className,
-  ...props
-}: LinkPaginationProps & React.ComponentPropsWithoutRef<'nav'>) {
-  const window = usePagerWindow(page, pageCount, pageRangeDisplayed)
+    if (typeof value !== 'number') return null
 
-  const hasNext = page < pageCount
-  const hasPrev = page > 1
-  const classNames = useClassNames('charcoal-pagination', className)
+    // リンクモード: ページへのリンク
+    if (isLinkMode && makeUrl) {
+      return (
+        <LinkComponent
+          href={makeUrl(value)}
+          className="charcoal-pagination-button"
+        >
+          {value}
+        </LinkComponent>
+      )
+    }
+    // ボタンモード: クリックでページ遷移
+    return (
+      <button
+        type="button"
+        className="charcoal-pagination-button"
+        onClick={makeClickHandler(value)}
+      >
+        {value}
+      </button>
+    )
+  }
 
   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 {...navProps} className={classNames} aria-label="Pagination">
+      <NavButton direction="prev" />
+      {window.map((p) => (
+        <PageItem key={p} value={p} />
+      ))}
+      <NavButton direction="next" />
     </nav>
   )
 }