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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/react",
-  "version": "5.5.0-beta.0",
+  "version": "5.5.0-beta.2",
   "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.2",
+    "@charcoal-ui/theme": "5.5.0-beta.2",
+    "@charcoal-ui/utils": "5.5.0-beta.2",
+    "@charcoal-ui/icons": "5.5.0-beta.2"
   },
   "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,53 @@
-import { useState } from 'react'
-import { Meta, StoryObj } from '@storybook/react-webpack5'
-import Pagination, { LinkPagination } from '.'
+import { useEffect, useState } from 'react'
+import { Meta, StoryObj } from '@storybook/react-vite'
+import Pagination, { type PaginationProps } from '.'
 
-function PaginationWithState(args: React.ComponentProps<typeof Pagination>) {
+type PaginationStoryArgs = Pick<
+  PaginationProps,
+  'page' | 'pageCount' | 'pageRangeDisplayed' | 'size'
+>
+
+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}
+      size={args.size}
+      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}
+        size={args.size}
+        makeUrl={(p) => `#page-${p}`}
+      />
+    </div>
+  )
 }
 
 export default {
@@ -13,6 +56,7 @@ export default {
   parameters: {
     layout: 'centered',
   },
+  render: (args) => <PaginationWithState {...args} />,
 } satisfies Meta<typeof Pagination>
 
 export const Default: StoryObj<typeof Pagination> = {
@@ -20,7 +64,6 @@ export const Default: StoryObj<typeof Pagination> = {
     page: 5,
     pageCount: 10,
   },
-  render: (args) => <PaginationWithState {...args} />,
 }
 
 export const FirstPage: StoryObj<typeof Pagination> = {
@@ -28,7 +71,6 @@ export const FirstPage: StoryObj<typeof Pagination> = {
     page: 1,
     pageCount: 10,
   },
-  render: (args) => <PaginationWithState {...args} />,
 }
 
 export const LastPage: StoryObj<typeof Pagination> = {
@@ -36,7 +78,6 @@ export const LastPage: StoryObj<typeof Pagination> = {
     page: 10,
     pageCount: 10,
   },
-  render: (args) => <PaginationWithState {...args} />,
 }
 
 export const ManyPages: StoryObj<typeof Pagination> = {
@@ -44,14 +85,29 @@ export const ManyPages: StoryObj<typeof Pagination> = {
     page: 50,
     pageCount: 103,
   },
-  render: (args) => <PaginationWithState {...args} />,
 }
 
-export const LinkPaginationStory: StoryObj<typeof LinkPagination> = {
+export const SizeS: StoryObj<typeof Pagination> = {
+  args: {
+    page: 5,
+    pageCount: 10,
+    size: 'S',
+  },
+}
+
+export const PageRange5: StoryObj<typeof Pagination> = {
+  args: {
+    page: 5,
+    pageCount: 10,
+    pageRangeDisplayed: 5,
+    size: 'S',
+  },
+}
+
+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/PaginationContext.ts

@@ -0,0 +1,35 @@
+import { createContext, useContext } from 'react'
+
+export type Size = 'S' | 'M'
+
+export type PageRangeDisplayed = 5 | 7
+
+export type LinkComponentProps = {
+  href: string
+  className?: string
+  children?: React.ReactNode
+}
+
+type PaginationContextValue = {
+  page: number
+  pageCount: number
+  size: Size
+  isLinkMode: boolean
+  makeUrl?: (page: number) => string
+  LinkComponent: React.ElementType<LinkComponentProps>
+  makeClickHandler: (value: number) => () => void
+}
+
+export const PaginationContext = createContext<PaginationContextValue | null>(
+  null,
+)
+
+export function usePaginationContext(): PaginationContextValue {
+  const context = useContext(PaginationContext)
+  if (context == null) {
+    throw new Error(
+      'Pagination components must be used within a Pagination component',
+    )
+  }
+  return context
+}

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,13 @@
-import { useDebugValue, useMemo } from 'react'
+import { useDebugValue } from 'react'
 import warning from 'warning'
+import type { PageRangeDisplayed } from './PaginationContext'
 
-export function usePagerWindow(
+export function usePaginationWindow(
   page: number,
   pageCount: number,
-  pageRangeDisplayed = 7,
+  pageRangeDisplayed: PageRangeDisplayed = 7,
 ) {
+  'use memo'
   // ページャーのリンク生成例:
   //
   //     < [ 1 ] [*2*] [ 3 ] [ 4 ] [ 5 ] [ 6 ] [ 7 ] >
@@ -29,19 +31,18 @@ export function usePagerWindow(
       `\`pageCount\` must be integer (${pageCount})`,
     )
     warning(
-      (pageRangeDisplayed | 0) === pageRangeDisplayed,
-      `\`pageRangeDisplayed\` must be integer (${pageRangeDisplayed})`,
+      pageRangeDisplayed === 5 || pageRangeDisplayed === 7,
+      `\`pageRangeDisplayed\` must be 5 or 7 (${pageRangeDisplayed})`,
     )
-    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.css

@@ -5,35 +5,55 @@
 }
 
 .charcoal-pagination-button {
-  font-size: 1rem;
-  line-height: calc(1em + 8px);
-  text-decoration: none;
-  border: none;
+  cursor: pointer;
+  appearance: none;
+  padding: 0;
+  border-style: none;
   outline: none;
-  touch-action: manipulation;
+  text-decoration: none;
+  font: inherit;
+  margin: 0;
   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 */
+  justify-content: center;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 22px;
+
+  /* HACK:
+   * Safari doesn't correctly repaint the elements when they're reordered in response to interaction.
+   * This forces it to repaint them. This doesn't work if put on the parents either, has to be here.
+   */
   /* stylelint-disable-next-line property-no-vendor-prefix */
   -webkit-transform: translateZ(0);
 
-  background: transparent;
   color: var(--charcoal-text3);
-  border-radius: 48px;
+  background-color: var(--charcoal-transparent);
+  border-radius: 20px;
+  transition:
+    0.2s background-color,
+    0.2s box-shadow;
+}
+
+.charcoal-pagination-button:focus {
+  outline: none;
+}
+
+.charcoal-pagination-button::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.charcoal-pagination[data-size='S'] .charcoal-pagination-button {
+  min-width: 32px;
+  min-height: 32px;
+}
+
+.charcoal-pagination[data-size='M'] .charcoal-pagination-button {
+  min-width: 40px;
+  min-height: 40px;
 }
 
 .charcoal-pagination-button[hidden] {
@@ -41,22 +61,60 @@
   display: block;
 }
 
-.charcoal-pagination-button:hover {
-  background: var(--charcoal-surface3);
-  color: var(--charcoal-text2);
+.charcoal-pagination-button:not(:disabled):not([aria-disabled]):hover,
+.charcoal-pagination-button[aria-disabled='false']:hover {
+  color: var(--charcoal-text3);
+  background-color: var(--charcoal-surface3);
+}
+
+.charcoal-pagination-button:not(:disabled):not([aria-disabled]):active,
+.charcoal-pagination-button[aria-disabled='false']:active {
+  color: var(--charcoal-text3);
+  background-color: var(--charcoal-surface10);
+}
+
+.charcoal-pagination-button:not(:disabled):not([aria-disabled]):focus,
+.charcoal-pagination-button[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+}
+
+.charcoal-pagination-button:not(:disabled):not([aria-disabled]):focus-visible,
+.charcoal-pagination-button[aria-disabled='false']:focus-visible {
+  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+}
+
+.charcoal-pagination-button:not(:disabled):not([aria-disabled]):focus:not(
+    :focus-visible
+  ),
+.charcoal-pagination-button[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
 }
 
 .charcoal-pagination-button[aria-current] {
+  cursor: default;
   background-color: var(--charcoal-surface6);
   color: var(--charcoal-text5);
 }
 
-.charcoal-pagination-button[aria-current]:hover {
+.charcoal-pagination-button[aria-current]:not(:disabled):not(
+    [aria-disabled]
+  ):hover,
+.charcoal-pagination-button[aria-current]:not(:disabled):not(
+    [aria-disabled]
+  ):active {
   background-color: var(--charcoal-surface6);
   color: var(--charcoal-text5);
 }
 
-.charcoal-pagination-spacer {
+.charcoal-pagination-nav-button[hidden] {
+  visibility: hidden;
+  display: block;
+}
+
+.charcoal-pagination-spacer,
+.charcoal-pagination-spacer:hover,
+.charcoal-pagination-spacer:active {
   cursor: default;
   color: var(--charcoal-text3);
   background: none;