@charcoal-ui/react 5.6.0-beta.4 → 5.6.0

package/package.json

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

package/src/components/DropdownSelector/index.story.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useRef, useState } from 'react'
 import DropdownSelector from '.'
 import { Divider } from './Divider'
 import MenuItemGroup from './MenuItemGroup'
@@ -453,3 +453,44 @@ export const WithSeconday: StoryObj<typeof DropdownSelector> = {
     )
   },
 }
+
+export const WithRef: StoryObj<typeof DropdownSelector> = {
+  render: function Render(props) {
+    const [selected, setSelected] = useState('1')
+    const [currentValue, setCurrentValue] = useState('')
+    const selectRef = useRef<HTMLSelectElement>(null)
+
+    return (
+      <div
+        style={{
+          width: 288,
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 16,
+        }}
+      >
+        <DropdownSelector
+          {...props}
+          onChange={(value) => {
+            setSelected(value)
+          }}
+          value={selected}
+          label="label"
+          selectRef={selectRef}
+        >
+          <DropdownMenuItem value="1">Option 1</DropdownMenuItem>
+          <DropdownMenuItem value="2">Option 2</DropdownMenuItem>
+          <DropdownMenuItem value="3">Option 3</DropdownMenuItem>
+        </DropdownSelector>
+        <Button
+          onClick={() => {
+            setCurrentValue(selectRef.current?.value ?? 'ref is null')
+          }}
+        >
+          check ref current value
+        </Button>
+        <div>ref current value: {currentValue}</div>
+      </div>
+    )
+  },
+}

package/src/components/DropdownSelector/index.tsx

@@ -31,11 +31,13 @@ export type DropdownSelectorProps = {
   children: MenuListChildren
   onChange: (value: string) => void
   className?: string
+  selectRef?: React.Ref<HTMLSelectElement>
 } & Pick<PopoverProps, 'inertWorkaround'>
 
 export default function DropdownSelector({
   onChange,
   showLabel = false,
+  selectRef,
   ...props
 }: DropdownSelectorProps) {
   const triggerRef = useRef<HTMLButtonElement>(null)
@@ -82,6 +84,7 @@ export default function DropdownSelector({
           value={props.value}
           onChange={handleChange}
           tabIndex={-1}
+          ref={selectRef}
         >
           {propsArray.map((itemProps) => {
             return (

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