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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/react",
-  "version": "5.5.0-beta.3",
+  "version": "5.5.1",
   "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.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"
+    "@charcoal-ui/foundation": "5.5.1",
+    "@charcoal-ui/theme": "5.5.1",
+    "@charcoal-ui/icons": "5.5.1",
+    "@charcoal-ui/utils": "5.5.1"
   },
   "peerDependencies": {
     "react": ">=17.0.0"

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

@@ -131,3 +131,16 @@ export const LinkPaginationWithLinkProps: StoryObj<typeof Pagination> = {
     </div>
   ),
 }
+
+export const ComponentAStory: StoryObj<typeof Pagination> = {
+  render: () => {
+    return (
+      <Pagination
+        page={5}
+        pageCount={100}
+        component="a"
+        makeUrl={(p) => `https://example.com?page=${p}`}
+      />
+    )
+  },
+}

package/src/components/Pagination/index.tsx

@@ -2,7 +2,7 @@ import './index.css'
 
 import { usePaginationWindow } from './helper'
 import { useClassNames } from '../../_lib/useClassNames'
-import IconButton from '../IconButton'
+import IconButton, { IconButtonProps } from '../IconButton'
 import {
   PaginationContext,
   usePaginationContext,
@@ -14,9 +14,10 @@ import {
 
 type NavButtonProps = {
   direction: 'prev' | 'next'
+  ariaLabel: IconButtonProps['aria-label']
 }
 
-function NavButton({ direction }: NavButtonProps) {
+function NavButton({ direction, ariaLabel }: NavButtonProps) {
   'use memo'
   const {
     page,
@@ -44,6 +45,7 @@ function NavButton({ direction }: NavButtonProps) {
       icon={isPrev ? '24/Prev' : '24/Next'}
       size={size}
       hidden={disabled}
+      aria-label={ariaLabel}
       {...(isLinkMode && makeUrl
         ? {
             component: LinkComponent as 'a',
@@ -122,11 +124,13 @@ function PageItem({ value }: { value: number | string }) {
   )
 }
 
-interface CommonProps {
+interface PaginationCommonProps {
   page: number
   pageCount: number
   pageRangeDisplayed?: PageRangeDisplayed
   size?: Size
+  ariaLabelPrev?: string
+  ariaLabelNext?: string
 }
 
 type NavProps = Omit<React.ComponentPropsWithoutRef<'nav'>, 'onChange'>
@@ -150,29 +154,33 @@ type NavProps = Omit<React.ComponentPropsWithoutRef<'nav'>, 'onChange'>
  * // 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<T extends React.ElementType = 'a'> = CommonProps &
-  NavProps &
-  (
-    | {
-        onChange(newPage: number): void
-        makeUrl?: never
-        component?: never
-        linkProps?: undefined
-      }
-    | {
-        makeUrl(page: number): string
-        onChange?: never
-        /**
-         * The component used for link elements. Receives `href`, `className`, and `children`.
-         * @default 'a'
-         */
-        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 type PaginationProps<T extends React.ElementType = 'a'> =
+  PaginationCommonProps &
+    NavProps &
+    (
+      | {
+          onChange(newPage: number): void
+          makeUrl?: never
+          component?: never
+          linkProps?: undefined
+        }
+      | {
+          makeUrl(page: number): string
+          onChange?: never
+          /**
+           * The component used for link elements. Receives `href`, `className`, and `children`.
+           * @default 'a'
+           */
+          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<T extends React.ElementType = 'a'>({
   page,
@@ -184,6 +192,8 @@ export default function Pagination<T extends React.ElementType = 'a'>({
   component: LinkComponent = 'a' as T,
   linkProps,
   className,
+  ariaLabelNext = 'Next',
+  ariaLabelPrev = 'Previous',
   ...navProps
 }: PaginationProps<T>) {
   'use memo'
@@ -217,11 +227,11 @@ export default function Pagination<T extends React.ElementType = 'a'>({
         {...navProps}
         className={classNames}
       >
-        <NavButton direction="prev" />
+        <NavButton direction="prev" ariaLabel={ariaLabelPrev} />
         {window.map((p) => (
           <PageItem key={p} value={p} />
         ))}
-        <NavButton direction="next" />
+        <NavButton direction="next" ariaLabel={ariaLabelNext} />
       </nav>
     </PaginationContext.Provider>
   )