@charcoal-ui/react 5.6.0-beta.0 → 5.6.0-beta.3

package/package.json

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

package/src/components/DropdownSelector/index.tsx

@@ -1,13 +1,6 @@
 import './index.css'
 
-import React, {
-  ReactNode,
-  useState,
-  useRef,
-  useMemo,
-  useCallback,
-  forwardRef,
-} from 'react'
+import React, { ReactNode, useState, useRef, useMemo, useCallback } from 'react'
 import Icon from '../Icon'
 import FieldLabel from '../FieldLabel'
 import { DropdownPopover } from './DropdownPopover'
@@ -40,124 +33,118 @@ export type DropdownSelectorProps = {
   className?: string
 } & Pick<PopoverProps, 'inertWorkaround'>
 
-const DropdownSelector = forwardRef<HTMLSelectElement, DropdownSelectorProps>(
-  ({ onChange, showLabel = false, ...props }: DropdownSelectorProps, ref) => {
-    const triggerRef = useRef<HTMLButtonElement>(null)
-    const [isOpen, setIsOpen] = useState(false)
-    const preview = findPreviewRecursive(props.children, props.value)
+export default function DropdownSelector({
+  onChange,
+  showLabel = false,
+  ...props
+}: DropdownSelectorProps) {
+  const triggerRef = useRef<HTMLButtonElement>(null)
+  const [isOpen, setIsOpen] = useState(false)
+  const preview = findPreviewRecursive(props.children, props.value)
 
-    const isPlaceholder = useMemo(
-      () => props.placeholder !== undefined && preview === undefined,
-      [preview, props.placeholder],
-    )
+  const isPlaceholder = useMemo(
+    () => props.placeholder !== undefined && preview === undefined,
+    [preview, props.placeholder],
+  )
 
-    const propsArray = getValuesRecursive(props.children)
+  const propsArray = getValuesRecursive(props.children)
 
-    const { visuallyHiddenProps } = useVisuallyHidden()
+  const { visuallyHiddenProps } = useVisuallyHidden()
 
-    const handleChange = useCallback(
-      (e: React.ChangeEvent<HTMLSelectElement>) => {
-        onChange(e.target.value)
-      },
-      [onChange],
-    )
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLSelectElement>) => {
+      onChange(e.target.value)
+    },
+    [onChange],
+  )
 
-    const labelId = useId()
-    const describedbyId = useId()
+  const labelId = useId()
+  const describedbyId = useId()
 
-    const classNames = useClassNames(
-      'charcoal-dropdown-selector-root',
-      props.className,
-    )
+  const classNames = useClassNames(
+    'charcoal-dropdown-selector-root',
+    props.className,
+  )
 
-    return (
-      <div className={classNames} aria-disabled={props.disabled}>
-        <FieldLabel
-          id={labelId}
-          label={props.label}
-          required={props.required}
-          requiredText={props.requiredText}
-          subLabel={props.subLabel}
-          {...(!showLabel ? visuallyHiddenProps : {})}
-        />
-        <div {...visuallyHiddenProps} aria-hidden="true">
-          <select
-            ref={ref}
-            name={props.name}
-            value={props.value}
-            onChange={handleChange}
-            tabIndex={-1}
-          >
-            {propsArray.map((itemProps) => {
-              return (
-                <option
-                  key={itemProps.value}
-                  value={itemProps.value}
-                  disabled={itemProps.disabled}
-                >
-                  {itemProps.value}
-                </option>
-              )
-            })}
-          </select>
-        </div>
-        {/* eslint-disable-next-line jsx-a11y/role-supports-aria-props */}
-        <button
-          className="charcoal-dropdown-selector-button"
-          aria-labelledby={labelId}
-          aria-invalid={props.invalid}
-          aria-describedby={
-            props.assistiveText !== undefined ? describedbyId : undefined
-          }
-          disabled={props.disabled}
-          onClick={() => {
-            if (props.disabled === true) return
-            setIsOpen(true)
-          }}
-          ref={triggerRef}
-          type="button"
-          data-active={isOpen}
+  return (
+    <div className={classNames} aria-disabled={props.disabled}>
+      <FieldLabel
+        id={labelId}
+        label={props.label}
+        required={props.required}
+        requiredText={props.requiredText}
+        subLabel={props.subLabel}
+        {...(!showLabel ? visuallyHiddenProps : {})}
+      />
+      <div {...visuallyHiddenProps} aria-hidden="true">
+        <select
+          name={props.name}
+          value={props.value}
+          onChange={handleChange}
+          tabIndex={-1}
         >
-          <span
-            className="charcoal-ui-dropdown-selector-text"
-            data-placeholder={isPlaceholder}
-          >
-            {isPlaceholder ? props.placeholder : preview}
-          </span>
-          <Icon className="charcoal-ui-dropdown-selector-icon" name="16/Menu" />
-        </button>
-        {isOpen && (
-          <DropdownPopover
-            isOpen={isOpen}
-            onClose={() => setIsOpen(false)}
-            triggerRef={triggerRef}
+          {propsArray.map((itemProps) => {
+            return (
+              <option
+                key={itemProps.value}
+                value={itemProps.value}
+                disabled={itemProps.disabled}
+              >
+                {itemProps.value}
+              </option>
+            )
+          })}
+        </select>
+      </div>
+      {/* eslint-disable-next-line jsx-a11y/role-supports-aria-props */}
+      <button
+        className="charcoal-dropdown-selector-button"
+        aria-labelledby={labelId}
+        aria-invalid={props.invalid}
+        aria-describedby={
+          props.assistiveText !== undefined ? describedbyId : undefined
+        }
+        disabled={props.disabled}
+        onClick={() => {
+          if (props.disabled === true) return
+          setIsOpen(true)
+        }}
+        ref={triggerRef}
+        type="button"
+        data-active={isOpen}
+      >
+        <span
+          className="charcoal-ui-dropdown-selector-text"
+          data-placeholder={isPlaceholder}
+        >
+          {isPlaceholder ? props.placeholder : preview}
+        </span>
+        <Icon className="charcoal-ui-dropdown-selector-icon" name="16/Menu" />
+      </button>
+      {isOpen && (
+        <DropdownPopover
+          isOpen={isOpen}
+          onClose={() => setIsOpen(false)}
+          triggerRef={triggerRef}
+          value={props.value}
+          inertWorkaround={props.inertWorkaround}
+        >
+          <MenuList
             value={props.value}
-            inertWorkaround={props.inertWorkaround}
-          >
-            <MenuList
-              value={props.value}
-              onChange={(v) => {
-                onChange(v)
-                setIsOpen(false)
-              }}
-            >
-              {props.children}
-            </MenuList>
-          </DropdownPopover>
-        )}
-        {props.assistiveText !== undefined && (
-          <AssistiveText
-            data-invalid={props.invalid === true}
-            id={describedbyId}
+            onChange={(v) => {
+              onChange(v)
+              setIsOpen(false)
+            }}
           >
-            {props.assistiveText}
-          </AssistiveText>
-        )}
-      </div>
-    )
-  },
-)
-
-DropdownSelector.displayName = 'DropdownSelector'
-
-export default DropdownSelector
+            {props.children}
+          </MenuList>
+        </DropdownPopover>
+      )}
+      {props.assistiveText !== undefined && (
+        <AssistiveText data-invalid={props.invalid === true} id={describedbyId}>
+          {props.assistiveText}
+        </AssistiveText>
+      )}
+    </div>
+  )
+}

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>
   )