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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/react",
-  "version": "5.5.0-beta.2",
+  "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.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"
+    "@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

@@ -7,6 +7,9 @@ type PaginationStoryArgs = Pick<
   'page' | 'pageCount' | 'pageRangeDisplayed' | 'size'
 >
 
+type LinkPaginationStoryArgs = PaginationStoryArgs &
+  Pick<PaginationProps, 'linkProps'>
+
 function PaginationWithState(args: PaginationStoryArgs) {
   const [page, setPage] = useState(args.page)
   return (
@@ -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(() => {
@@ -45,6 +48,7 @@ function LinkPaginationWithState(args: PaginationStoryArgs) {
         pageRangeDisplayed={args.pageRangeDisplayed}
         size={args.size}
         makeUrl={(p) => `#page-${p}`}
+        linkProps={args.linkProps}
       />
     </div>
   )
@@ -111,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

@@ -10,26 +10,29 @@ export type LinkComponentProps = {
   children?: React.ReactNode
 }
 
-type PaginationContextValue = {
+export type PaginationContextValue<T extends React.ElementType = 'a'> = {
   page: number
   pageCount: number
   size: Size
   isLinkMode: boolean
   makeUrl?: (page: number) => string
-  LinkComponent: React.ElementType<LinkComponentProps>
+  LinkComponent: T
   makeClickHandler: (value: number) => () => void
+  linkProps?: Omit<React.ComponentPropsWithoutRef<T>, 'href' | 'children'>
 }
 
-export const PaginationContext = createContext<PaginationContextValue | null>(
-  null,
-)
+export const PaginationContext = createContext<PaginationContextValue<
+  React.ElementType<LinkComponentProps>
+> | null>(null)
 
-export function usePaginationContext(): PaginationContextValue {
+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
+  return context as PaginationContextValue<T>
 }

package/src/components/Pagination/index.tsx

@@ -7,6 +7,7 @@ import {
   PaginationContext,
   usePaginationContext,
   type LinkComponentProps,
+  type PaginationContextValue,
   type PageRangeDisplayed,
   type Size,
 } from './PaginationContext'
@@ -25,6 +26,7 @@ function NavButton({ direction }: NavButtonProps) {
     makeUrl,
     LinkComponent,
     makeClickHandler,
+    linkProps,
   } = usePaginationContext()
 
   const isPrev = direction === 'prev'
@@ -32,22 +34,28 @@ function NavButton({ direction }: NavButtonProps) {
     ? 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}
-      className="charcoal-pagination-nav-button"
       {...(isLinkMode && makeUrl
         ? {
             component: LinkComponent as 'a',
             href: makeUrl(targetPage),
             'aria-disabled': disabled,
+            ...linkProps,
+            className: navButtonClassName,
           }
         : {
             disabled,
             onClick: makeClickHandler(targetPage),
+            className: navButtonClassName,
           })}
     />
   )
@@ -55,8 +63,20 @@ function NavButton({ direction }: NavButtonProps) {
 
 function PageItem({ value }: { value: number | string }) {
   'use memo'
-  const { page, size, isLinkMode, makeUrl, LinkComponent, makeClickHandler } =
-    usePaginationContext()
+  const {
+    page,
+    size,
+    isLinkMode,
+    makeUrl,
+    LinkComponent,
+    makeClickHandler,
+    linkProps,
+  } = usePaginationContext()
+  const pageItemClassName = useClassNames(
+    'charcoal-pagination-button',
+    linkProps?.className,
+  )
+
   // 省略記号
   if (value === '...') {
     return (
@@ -83,7 +103,8 @@ function PageItem({ value }: { value: number | string }) {
     return (
       <LinkComponent
         href={makeUrl(value)}
-        className="charcoal-pagination-button"
+        {...linkProps}
+        className={pageItemClassName}
       >
         {value}
       </LinkComponent>
@@ -124,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
@@ -136,21 +166,26 @@ 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
@@ -165,15 +200,22 @@ export default function Pagination({
     makeUrl,
     LinkComponent,
     makeClickHandler,
+    linkProps,
   }
 
   return (
-    <PaginationContext.Provider value={contextValue}>
+    <PaginationContext.Provider
+      value={
+        contextValue as PaginationContextValue<
+          React.ElementType<LinkComponentProps>
+        >
+      }
+    >
       <nav
-        className={classNames}
         data-size={size}
         aria-label="Pagination"
         {...navProps}
+        className={classNames}
       >
         <NavButton direction="prev" />
         {window.map((p) => (