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

package/package.json

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

package/src/components/DropdownSelector/index.tsx

@@ -1,6 +1,13 @@
 import './index.css'
 
-import React, { ReactNode, useState, useRef, useMemo, useCallback } from 'react'
+import React, {
+  ReactNode,
+  useState,
+  useRef,
+  useMemo,
+  useCallback,
+  forwardRef,
+} from 'react'
 import Icon from '../Icon'
 import FieldLabel from '../FieldLabel'
 import { DropdownPopover } from './DropdownPopover'
@@ -33,118 +40,124 @@ export type DropdownSelectorProps = {
   className?: string
 } & Pick<PopoverProps, 'inertWorkaround'>
 
-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 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)
 
-  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
-          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}
-      >
-        <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}
+    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}
         >
-          <MenuList
+          <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}
-            onChange={(v) => {
-              onChange(v)
-              setIsOpen(false)
-            }}
+            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}
           >
-            {props.children}
-          </MenuList>
-        </DropdownPopover>
-      )}
-      {props.assistiveText !== undefined && (
-        <AssistiveText data-invalid={props.invalid === true} id={describedbyId}>
-          {props.assistiveText}
-        </AssistiveText>
-      )}
-    </div>
-  )
-}
+            {props.assistiveText}
+          </AssistiveText>
+        )}
+      </div>
+    )
+  },
+)
+
+DropdownSelector.displayName = 'DropdownSelector'
+
+export default DropdownSelector

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}`}
+      />
+    )
+  },
+}