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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/react",
-  "version": "5.4.4",
+  "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.4.4",
-    "@charcoal-ui/icons": "5.4.4",
-    "@charcoal-ui/theme": "5.4.4",
-    "@charcoal-ui/utils": "5.4.4"
+    "@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

@@ -0,0 +1,98 @@
+import { useEffect, useState } from 'react'
+import { Meta, StoryObj } from '@storybook/react-webpack5'
+import Pagination from '.'
+
+type PaginationStoryArgs = {
+  page: number
+  pageCount: number
+  pageRangeDisplayed?: number
+}
+
+function PaginationWithState(args: PaginationStoryArgs) {
+  const [page, setPage] = useState(args.page)
+  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 {
+  title: 'react/Pagination',
+  component: Pagination,
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof Pagination>
+
+export const Default: StoryObj<typeof Pagination> = {
+  args: {
+    page: 5,
+    pageCount: 10,
+  },
+  render: (args) => <PaginationWithState {...args} />,
+}
+
+export const FirstPage: StoryObj<typeof Pagination> = {
+  args: {
+    page: 1,
+    pageCount: 10,
+  },
+  render: (args) => <PaginationWithState {...args} />,
+}
+
+export const LastPage: StoryObj<typeof Pagination> = {
+  args: {
+    page: 10,
+    pageCount: 10,
+  },
+  render: (args) => <PaginationWithState {...args} />,
+}
+
+export const ManyPages: StoryObj<typeof Pagination> = {
+  args: {
+    page: 50,
+    pageCount: 103,
+  },
+  render: (args) => <PaginationWithState {...args} />,
+}
+
+export const LinkPaginationStory: StoryObj<typeof Pagination> = {
+  args: {
+    page: 5,
+    pageCount: 10,
+  },
+  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

@@ -0,0 +1,71 @@
+import { useDebugValue } from 'react'
+import warning from 'warning'
+
+export function usePaginationWindow(
+  page: number,
+  pageCount: number,
+  pageRangeDisplayed = 7,
+) {
+  'use memo'
+  // ページャーのリンク生成例:
+  //
+  //     < [ 1 ] [*2*] [ 3 ] [ 4 ] [ 5 ] [ 6 ] [ 7 ] >
+  //
+  //     < [ 1 ] [ 2 ] [ 3 ] [*4*] [ 5 ] [ 6 ] [ 7 ] >
+  //
+  //     < [ 1 ]  ...  [ 4 ] [*5*] [ 6 ] [ 7 ] [ 8 ] >
+  //
+  //     < [ 1 ]  ...  [ 99 ] [*100*] [ 101 ] [ 102 ] [ 103 ] >
+  //
+  //     < [ 1 ]  ...  [ 99 ] [ 100 ] [ 101 ] [ 102 ] [*103*]
+  //
+  //       [*1*] [ 2 ] >
+  //
+  // デザインの意図: 前後移動時のカーソル移動を最小限にする。
+
+  if (process.env.NODE_ENV !== 'production') {
+    warning((page | 0) === page, `\`page\` must be integer (${page})`)
+    warning(
+      (pageCount | 0) === pageCount,
+      `\`pageCount\` must be integer (${pageCount})`,
+    )
+    warning(
+      (pageRangeDisplayed | 0) === pageRangeDisplayed,
+      `\`pageRangeDisplayed\` must be integer (${pageRangeDisplayed})`,
+    )
+    warning(pageRangeDisplayed > 2, `\`windowSize\` must be greater than 2`)
+  }
+
+  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(
+        { length: 1 + visibleLastPage - visibleFirstPage },
+        (_, i) => visibleFirstPage + i,
+      )
+    } else {
+      const start = visibleLastPage - (pageRangeDisplayed - 1) + 2
+      // 表示範囲が1-7ページを超えるなら、
+      // - 1ページ目は固定で表示する
+      // - 2ページ目から現在のページの直前までは省略する
+      return [
+        visibleFirstPage,
+        '...' as const,
+        ...Array.from(
+          { length: 1 + visibleLastPage - start },
+          (_, i) => start + i,
+        ),
+      ]
+    }
+  })()
+
+  useDebugValue(window)
+
+  return window
+}

package/src/components/Pagination/index.css

@@ -0,0 +1,67 @@
+.charcoal-pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.charcoal-pagination-button {
+  font-size: 1rem;
+  line-height: calc(1em + 8px);
+  text-decoration: none;
+  border: none;
+  outline: none;
+  touch-action: manipulation;
+  user-select: none;
+  transition:
+    box-shadow 0.2s ease 0s,
+    color 0.2s ease 0s,
+    background 0.2s ease 0s,
+    opacity 0.2s ease 0s;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: content-box;
+  min-width: 24px;
+  min-height: 24px;
+  padding: 8px;
+  cursor: pointer;
+  font-weight: bold;
+  /* HACK: Safari repaint fix */
+  /* stylelint-disable-next-line property-no-vendor-prefix */
+  -webkit-transform: translateZ(0);
+
+  background: transparent;
+  color: var(--charcoal-text3);
+  border-radius: 48px;
+}
+
+.charcoal-pagination-button[hidden] {
+  visibility: hidden;
+  display: block;
+}
+
+.charcoal-pagination-button:hover {
+  background: var(--charcoal-surface3);
+  color: var(--charcoal-text2);
+}
+
+.charcoal-pagination-button[aria-current] {
+  background-color: var(--charcoal-surface6);
+  color: var(--charcoal-text5);
+}
+
+.charcoal-pagination-button[aria-current]:hover {
+  background-color: var(--charcoal-surface6);
+  color: var(--charcoal-text5);
+}
+
+.charcoal-pagination-spacer {
+  cursor: default;
+  color: var(--charcoal-text3);
+  background: none;
+}
+
+.charcoal-pagination-spacer.charcoal-icon-button:disabled {
+  opacity: 1;
+}

package/src/components/Pagination/index.tsx

@@ -0,0 +1,153 @@
+import './index.css'
+
+import { usePaginationWindow } from './helper'
+import { useClassNames } from '../../_lib/useClassNames'
+import IconButton from '../IconButton'
+
+interface CommonProps {
+  page: number
+  pageCount: number
+  pageRangeDisplayed?: number
+}
+
+type LinkComponentProps = {
+  href: string
+  className?: string
+  children?: React.ReactNode
+}
+
+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,
+  ...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 classNames = useClassNames('charcoal-pagination', className)
+
+  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={isPrev ? '24/Prev' : '24/Next'}
+        size="M"
+        className="charcoal-pagination-button"
+        hidden={disabled}
+        {...(isLinkMode && makeUrl
+          ? {
+              component: LinkComponent as 'a',
+              href: makeUrl(targetPage),
+              'aria-disabled': disabled,
+            }
+          : {
+              disabled,
+              onClick: makeClickHandler(targetPage),
+            })}
+      />
+    )
+  }
+
+  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>
+      )
+    }
+
+    if (typeof value !== 'number') return null
+
+    // リンクモード: ページへのリンク
+    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 {...navProps} className={classNames} aria-label="Pagination">
+      <NavButton direction="prev" />
+      {window.map((p) => (
+        <PageItem key={p} value={p} />
+      ))}
+      <NavButton direction="next" />
+    </nav>
+  )
+}