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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/react",
-  "version": "5.5.0-beta.1",
+  "version": "5.5.0-beta.3",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -54,10 +54,10 @@
     "react-compiler-runtime": "1.0.0",
     "react-stately": "^3.26.0",
     "warning": "^4.0.3",
-    "@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"
+    "@charcoal-ui/foundation": "5.5.0-beta.3",
+    "@charcoal-ui/icons": "5.5.0-beta.3",
+    "@charcoal-ui/theme": "5.5.0-beta.3",
+    "@charcoal-ui/utils": "5.5.0-beta.3"
   },
   "peerDependencies": {
     "react": ">=17.0.0"

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

@@ -1,12 +1,14 @@
 import { useEffect, useState } from 'react'
-import { Meta, StoryObj } from '@storybook/react-webpack5'
-import Pagination from '.'
+import { Meta, StoryObj } from '@storybook/react-vite'
+import Pagination, { type PaginationProps } from '.'
 
-type PaginationStoryArgs = {
-  page: number
-  pageCount: number
-  pageRangeDisplayed?: number
-}
+type PaginationStoryArgs = Pick<
+  PaginationProps,
+  'page' | 'pageCount' | 'pageRangeDisplayed' | 'size'
+>
+
+type LinkPaginationStoryArgs = PaginationStoryArgs &
+  Pick<PaginationProps, 'linkProps'>
 
 function PaginationWithState(args: PaginationStoryArgs) {
   const [page, setPage] = useState(args.page)
@@ -15,6 +17,7 @@ function PaginationWithState(args: PaginationStoryArgs) {
       page={page}
       pageCount={args.pageCount}
       pageRangeDisplayed={args.pageRangeDisplayed}
+      size={args.size}
       onChange={setPage}
     />
   )
@@ -25,7 +28,7 @@ function parsePageFromHash(fallback: number): number {
   return match ? parseInt(match[1], 10) : fallback
 }
 
-function LinkPaginationWithState(args: PaginationStoryArgs) {
+function LinkPaginationWithState(args: LinkPaginationStoryArgs) {
   const [page, setPage] = useState(() => parsePageFromHash(args.page))
 
   useEffect(() => {
@@ -43,7 +46,9 @@ function LinkPaginationWithState(args: PaginationStoryArgs) {
         page={page}
         pageCount={args.pageCount}
         pageRangeDisplayed={args.pageRangeDisplayed}
+        size={args.size}
         makeUrl={(p) => `#page-${p}`}
+        linkProps={args.linkProps}
       />
     </div>
   )
@@ -55,6 +60,7 @@ export default {
   parameters: {
     layout: 'centered',
   },
+  render: (args) => <PaginationWithState {...args} />,
 } satisfies Meta<typeof Pagination>
 
 export const Default: StoryObj<typeof Pagination> = {
@@ -62,7 +68,6 @@ export const Default: StoryObj<typeof Pagination> = {
     page: 5,
     pageCount: 10,
   },
-  render: (args) => <PaginationWithState {...args} />,
 }
 
 export const FirstPage: StoryObj<typeof Pagination> = {
@@ -70,7 +75,6 @@ export const FirstPage: StoryObj<typeof Pagination> = {
     page: 1,
     pageCount: 10,
   },
-  render: (args) => <PaginationWithState {...args} />,
 }
 
 export const LastPage: StoryObj<typeof Pagination> = {
@@ -78,7 +82,6 @@ export const LastPage: StoryObj<typeof Pagination> = {
     page: 10,
     pageCount: 10,
   },
-  render: (args) => <PaginationWithState {...args} />,
 }
 
 export const ManyPages: StoryObj<typeof Pagination> = {
@@ -86,7 +89,23 @@ export const ManyPages: StoryObj<typeof Pagination> = {
     page: 50,
     pageCount: 103,
   },
-  render: (args) => <PaginationWithState {...args} />,
+}
+
+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> = {
@@ -96,3 +115,19 @@ export const LinkPaginationStory: StoryObj<typeof Pagination> = {
   },
   render: (args) => <LinkPaginationWithState {...args} />,
 }
+
+export const LinkPaginationWithLinkProps: StoryObj<typeof Pagination> = {
+  args: {
+    page: 5,
+    pageCount: 10,
+    linkProps: { scroll: 'marker' },
+  },
+  render: (args) => (
+    <div>
+      <p style={{ marginBottom: 8, fontSize: 14, color: '#666' }}>
+        linkProps を渡した例（scroll: &apos;marker&apos; は Next.js Link 用）
+      </p>
+      <LinkPaginationWithState {...args} />
+    </div>
+  ),
+}

package/src/components/Pagination/PaginationContext.ts

@@ -0,0 +1,38 @@
+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
+}
+
+export type PaginationContextValue<T extends React.ElementType = 'a'> = {
+  page: number
+  pageCount: number
+  size: Size
+  isLinkMode: boolean
+  makeUrl?: (page: number) => string
+  LinkComponent: T
+  makeClickHandler: (value: number) => () => void
+  linkProps?: Omit<React.ComponentPropsWithoutRef<T>, 'href' | 'children'>
+}
+
+export const PaginationContext = createContext<PaginationContextValue<
+  React.ElementType<LinkComponentProps>
+> | null>(null)
+
+export function usePaginationContext<
+  T extends React.ElementType = 'a',
+>(): PaginationContextValue<T> {
+  const context = useContext(PaginationContext)
+  if (context == null) {
+    throw new Error(
+      'Pagination components must be used within a Pagination component',
+    )
+  }
+  return context as PaginationContextValue<T>
+}

package/src/components/Pagination/helper.ts

@@ -1,10 +1,11 @@
 import { useDebugValue } from 'react'
 import warning from 'warning'
+import type { PageRangeDisplayed } from './PaginationContext'
 
 export function usePaginationWindow(
   page: number,
   pageCount: number,
-  pageRangeDisplayed = 7,
+  pageRangeDisplayed: PageRangeDisplayed = 7,
 ) {
   'use memo'
   // ページャーのリンク生成例:
@@ -30,10 +31,9 @@ export function usePaginationWindow(
       `\`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 visibleFirstPage = 1

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;

package/src/components/Pagination/index.tsx

@@ -3,17 +3,130 @@ import './index.css'
 import { usePaginationWindow } from './helper'
 import { useClassNames } from '../../_lib/useClassNames'
 import IconButton from '../IconButton'
+import {
+  PaginationContext,
+  usePaginationContext,
+  type LinkComponentProps,
+  type PaginationContextValue,
+  type PageRangeDisplayed,
+  type Size,
+} from './PaginationContext'
+
+type NavButtonProps = {
+  direction: 'prev' | 'next'
+}
+
+function NavButton({ direction }: NavButtonProps) {
+  'use memo'
+  const {
+    page,
+    pageCount,
+    size,
+    isLinkMode,
+    makeUrl,
+    LinkComponent,
+    makeClickHandler,
+    linkProps,
+  } = usePaginationContext()
+
+  const isPrev = direction === 'prev'
+  const targetPage = isPrev
+    ? Math.max(1, page - 1)
+    : Math.min(pageCount, page + 1)
+  const disabled = isPrev ? page <= 1 : page >= pageCount
+  const navButtonClassName = useClassNames(
+    'charcoal-pagination-nav-button',
+    linkProps?.className,
+  )
+
+  return (
+    <IconButton
+      icon={isPrev ? '24/Prev' : '24/Next'}
+      size={size}
+      hidden={disabled}
+      {...(isLinkMode && makeUrl
+        ? {
+            component: LinkComponent as 'a',
+            href: makeUrl(targetPage),
+            'aria-disabled': disabled,
+            ...linkProps,
+            className: navButtonClassName,
+          }
+        : {
+            disabled,
+            onClick: makeClickHandler(targetPage),
+            className: navButtonClassName,
+          })}
+    />
+  )
+}
+
+function PageItem({ value }: { value: number | string }) {
+  'use memo'
+  const {
+    page,
+    size,
+    isLinkMode,
+    makeUrl,
+    LinkComponent,
+    makeClickHandler,
+    linkProps,
+  } = usePaginationContext()
+  const pageItemClassName = useClassNames(
+    'charcoal-pagination-button',
+    linkProps?.className,
+  )
+
+  // 省略記号
+  if (value === '...') {
+    return (
+      <IconButton
+        icon="24/Dot"
+        size={size}
+        disabled
+        className="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)}
+        {...linkProps}
+        className={pageItemClassName}
+      >
+        {value}
+      </LinkComponent>
+    )
+  }
+  // ボタンモード: クリックでページ遷移
+  return (
+    <button
+      type="button"
+      className="charcoal-pagination-button"
+      onClick={makeClickHandler(value)}
+    >
+      {value}
+    </button>
+  )
+}
 
 interface CommonProps {
   page: number
   pageCount: number
-  pageRangeDisplayed?: number
-}
-
-type LinkComponentProps = {
-  href: string
-  className?: string
-  children?: React.ReactNode
+  pageRangeDisplayed?: PageRangeDisplayed
+  size?: Size
 }
 
 type NavProps = Omit<React.ComponentPropsWithoutRef<'nav'>, 'onChange'>
@@ -32,11 +145,20 @@ type NavProps = Omit<React.ComponentPropsWithoutRef<'nav'>, 'onChange'>
  * @example
  * // Link mode with custom component (e.g. Next.js Link)
  * <Pagination page={1} pageCount={10} makeUrl={(p) => `?page=${p}`} component={Link} />
+ *
+ * @example
+ * // Link mode with linkProps (e.g. Next.js scroll)
+ * <Pagination page={1} pageCount={10} makeUrl={(p) => `?page=${p}`} component={Link} linkProps={{ scroll: 'marker' }} />
  */
-export type PaginationProps = CommonProps &
+export type PaginationProps<T extends React.ElementType = 'a'> = CommonProps &
   NavProps &
   (
-    | { onChange(newPage: number): void; makeUrl?: never; component?: never }
+    | {
+        onChange(newPage: number): void
+        makeUrl?: never
+        component?: never
+        linkProps?: undefined
+      }
     | {
         makeUrl(page: number): string
         onChange?: never
@@ -44,110 +166,63 @@ export type PaginationProps = CommonProps &
          * The component used for link elements. Receives `href`, `className`, and `children`.
          * @default 'a'
          */
-        component?: React.ElementType<LinkComponentProps>
+        component?: T
+        /**
+         * Additional props passed to all link elements (e.g. Next.js Link's scroll, prefetch).
+         */
+        linkProps?: Omit<React.ComponentPropsWithoutRef<T>, 'href' | 'children'>
       }
   )
 
-export default function Pagination({
+export default function Pagination<T extends React.ElementType = 'a'>({
   page,
   pageCount,
   pageRangeDisplayed,
+  size = 'M',
   onChange,
   makeUrl,
-  component: LinkComponent = 'a',
+  component: LinkComponent = 'a' as T,
+  linkProps,
   className,
   ...navProps
-}: PaginationProps) {
+}: PaginationProps<T>) {
   '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 contextValue = {
+    page,
+    pageCount,
+    size,
+    isLinkMode,
+    makeUrl,
+    LinkComponent,
+    makeClickHandler,
+    linkProps,
   }
 
-  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"
+  return (
+    <PaginationContext.Provider
+      value={
+        contextValue as PaginationContextValue<
+          React.ElementType<LinkComponentProps>
         >
-          {value}
-        </LinkComponent>
-      )
-    }
-    // ボタンモード: クリックでページ遷移
-    return (
-      <button
-        type="button"
-        className="charcoal-pagination-button"
-        onClick={makeClickHandler(value)}
+      }
+    >
+      <nav
+        data-size={size}
+        aria-label="Pagination"
+        {...navProps}
+        className={classNames}
       >
-        {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>
+        <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'