@coopdigital/react 0.46.0 → 0.47.0

package/src/components/Image/Image.tsx

@@ -1,4 +1,4 @@
-import type { HTMLAttributes, JSX } from "react"
+import type { HTMLAttributes, JSX, Ref } from "react"
 
 export interface ImageProps extends HTMLAttributes<HTMLImageElement> {
   /** Specify text to describe the image. Refer to Experience Library guidelines on writing good alt text. */
@@ -7,6 +7,8 @@ export interface ImageProps extends HTMLAttributes<HTMLImageElement> {
   crop?: "square" | "wide" | "none"
   /** **(Optional)** Specify the height of the image. */
   height?: string
+  /** **(Optional)** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLImageElement>
   /** Specify the Image source URL. */
   src: string
   /** **(Optional)** Specify the width of the image. */
@@ -38,6 +40,7 @@ export const Image = ({
   alt,
   crop,
   height,
+  ref,
   src,
   width = "640",
   ...props
@@ -56,7 +59,7 @@ export const Image = ({
 
   return (
     <picture>
-      <img alt={alt} loading="lazy" src={params.src} {...dimensions} {...props} />
+      <img alt={alt} loading="lazy" src={params.src} {...dimensions} {...props} ref={ref} />
     </picture>
   )
 }

package/src/components/Pill/Pill.tsx

@@ -1,4 +1,4 @@
-import type { ForwardRefExoticComponent, HTMLAttributes, JSX } from "react"
+import type { ForwardRefExoticComponent, HTMLAttributes, JSX, Ref } from "react"
 
 import clsx from "clsx"
 import React from "react"
@@ -17,6 +17,8 @@ export interface PillProps extends HTMLAttributes<HTMLAnchorElement> {
   className?: string
   /** **(Optional)** Specify the URL that the Pill component will link to when clicked. */
   href?: string
+  /** **(Optional)** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLElement>
   /** **(Optional)** Specify the Pill size. */
   size?: StandardSizes
 }
@@ -38,17 +40,14 @@ export const Pill = ({
   children,
   className,
   href,
+  ref,
   size = "md",
   ...props
 }: PillProps): JSX.Element => {
-  let element: PillProps["as"] = href ? "a" : "span"
+  const element: PillProps["as"] = as ?? (href ? "a" : "span")
 
   const slots = useSlots(componentSlots, children)
 
-  if (as) {
-    element = as
-  }
-
   const componentProps = {
     className: clsx("coop-pill", !hasUserBg(className) && "bg-tint-grey", className),
     "data-size": size.length && size !== "md" ? size : undefined,
@@ -56,7 +55,9 @@ export const Pill = ({
     ...props,
   }
 
-  return React.createElement(element, { ...componentProps }, slots.PillBadge, slots.Children)
+  // https://github.com/facebook/react/issues/34775
+  // eslint-disable-next-line react-hooks/refs
+  return React.createElement(element, { ...componentProps, ref }, slots.PillBadge, slots.Children)
 }
 
 const PillBadge = ({ children, className }: PillBadgeProps) => {

package/src/components/Radio/Radio.tsx

@@ -1,6 +1,8 @@
 import clsx from "clsx"
-import { type InputHTMLAttributes, type JSX, useId } from "react"
-import { StandardSizes } from "src/types"
+import { type InputHTMLAttributes, type JSX, Ref } from "react"
+
+import { useId } from "../../hooks/useId"
+import { StandardSizes } from "../../types"
 
 export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
   /** **(Optional)** Specify additional CSS classes to be applied to the component. */
@@ -13,6 +15,8 @@ export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
   id?: string
   /** Specify the Radio name. */
   name: string
+  /** **(Optional)** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLInputElement>
   /** **(Optional)** Specify the Radio size. */
   size?: StandardSizes
 }
@@ -23,25 +27,24 @@ export const Radio = ({
   error = false,
   id,
   name,
+  ref,
   size = "md",
   ...props
 }: RadioProps): JSX.Element => {
-  const internalId = useId()
-
-  id = id ?? internalId
+  const uid = useId(id)
 
   const componentProps = {
     className: clsx("coop-radio", className),
     "data-error": error || undefined,
     "data-size": size.length && size !== "md" ? size : undefined,
     disabled,
-    id,
+    id: uid,
     name,
     type: "radio",
     ...props,
   }
   //const formItemProps = { "aria-disabled": disabled ? true : undefined }
-  return <input {...componentProps} />
+  return <input {...componentProps} ref={ref} />
 }
 
 export default Radio

package/src/components/Searchbox/Searchbox.tsx

@@ -1,10 +1,11 @@
 "use client"
 
-import type { InputHTMLAttributes, JSX } from "react"
+import type { InputHTMLAttributes, JSX, Ref } from "react"
 
 import clsx from "clsx"
-import React, { useCallback, useId, useState } from "react"
+import React, { useCallback, useState } from "react"
 
+import { useId } from "../../hooks/useId"
 import { StandardSizes } from "../../types"
 import { Button, type ButtonProps } from "../Button"
 import { Label as FieldLabel } from "../FieldMarkers/Label"
@@ -31,6 +32,8 @@ export interface SearchboxProps
   onSubmit?: React.FormEventHandler<HTMLElement> | undefined
   /** **(Optional)** Specify the TextInput placeholder text Do not use in place of a form label. */
   placeholder?: string
+  /** **(Optional)** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLFormElement>
   /** **(Optional)** Specify the Searchbox size. */
   size?: StandardSizes
   /** **(Optional)** Specify the Searchbox variant. */
@@ -64,14 +67,13 @@ export const Searchbox = ({
   name = "query",
   onSubmit,
   placeholder,
+  ref,
   size = "md",
   variant = "green",
   ...props
 }: SearchboxProps): JSX.Element => {
   const [isPending, setIsPending] = useState(false)
-  const internalId = useId()
-
-  id = id ?? internalId
+  const uid = useId(id)
 
   const handleSubmit = useCallback(
     async (event: React.FormEvent<HTMLFormElement>) => {
@@ -95,39 +97,40 @@ export const Searchbox = ({
     className: clsx("coop-searchbox", className),
     "data-size": size && size !== "md" ? size : undefined,
     "data-variant": variant.length && variant !== "green" ? variant : undefined,
+    id: uid,
     onSubmit: onSubmit ? handleSubmit : undefined,
   }
 
-  const buttonProps = {
+  const buttonProps: ButtonProps = {
     className: button?.className,
     isLoading: isPending,
     loadingText: button?.loadingText ?? "",
-    size: size as keyof ButtonProps["size"],
-    variant: variant as keyof ButtonProps["variant"],
+    size,
+    variant,
   }
 
-  const inputProps = {
+  const inputProps: TextInputProps = {
     "aria-placeholder": placeholder ?? ariaPlaceholder ?? undefined,
     autoCapitalize,
     autoComplete,
-    id,
+    id: uid + "--input",
     name,
     placeholder,
-    size: size as keyof TextInputProps["size"],
-    type: "search" as keyof TextInputProps["type"],
+    size,
+    type: "search",
     ...props,
   }
 
+  const labelProps = {
+    htmlFor: uid + "--input",
+    isVisible: labelVisible,
+  }
+
   return (
-    <form {...formProps}>
-      {label && (
-        <FieldLabel htmlFor={id} isVisible={labelVisible}>
-          {label}
-        </FieldLabel>
-      )}
+    <form {...formProps} ref={ref}>
+      {label && <FieldLabel {...labelProps}>{label}</FieldLabel>}
       <div className="coop-searchbox--inner">
         <TextInput {...inputProps} />
-
         <Button {...buttonProps}>{button.label}</Button>
       </div>
     </form>

package/src/components/Signpost/Signpost.tsx

@@ -1,4 +1,4 @@
-import type { AnchorHTMLAttributes, ForwardRefExoticComponent, HTMLAttributes, JSX } from "react"
+import type { ForwardRefExoticComponent, HTMLAttributes, JSX, Ref } from "react"
 
 import clsx from "clsx"
 import React from "react"
@@ -9,7 +9,7 @@ import { Image, ImageProps } from "../Image"
 export interface SignpostProps extends HTMLAttributes<HTMLDivElement> {
   /** **(Optional)** Specify a custom element to override default `a`. */
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  as?: React.FC<AnchorHTMLAttributes<HTMLElement>> | ForwardRefExoticComponent<any> | string
+  as?: React.FC<any> | ForwardRefExoticComponent<any> | string
   /** Main content inside the component. It can be any valid JSX or string. */
   children: React.ReactNode
   /** **(Optional)** Specify additional CSS classes to be applied to the component. */
@@ -17,9 +17,11 @@ export interface SignpostProps extends HTMLAttributes<HTMLDivElement> {
   /** **(Optional)** Specify the level of the Signpost heading. */
   headingLevel?: "h2" | "h3" | "h4" | "h5" | "h6"
   /** Specify the URL that the Signpost component will link to when clicked. */
-  href: string
+  href?: string
   /** **(Optional)** Specify properties of the Signpost Image. */
   image?: ImageProps
+  /** **(Optional)** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLDivElement>
 }
 
 export const Signpost = ({
@@ -29,12 +31,10 @@ export const Signpost = ({
   headingLevel = "h3",
   href,
   image,
+  ref,
   ...props
 }: SignpostProps): JSX.Element => {
-  let element: SignpostProps["as"] = "a"
-  if (as) {
-    element = as
-  }
+  const element: SignpostProps["as"] = as ?? "a"
 
   const componentProps = {
     className: clsx("coop-signpost", className),
@@ -42,7 +42,7 @@ export const Signpost = ({
   }
 
   return (
-    <div {...componentProps}>
+    <div {...componentProps} ref={ref}>
       {image && <Image crop="wide" {...image} />}
       {React.createElement(
         element,

package/src/components/SkipNav/SkipNav.tsx

@@ -1,4 +1,4 @@
-import type { HTMLAttributes, JSX } from "react"
+import type { HTMLAttributes, JSX, Ref } from "react"
 
 import clsx from "clsx"
 
@@ -15,6 +15,8 @@ export interface SkipNavProps extends HTMLAttributes<HTMLDivElement> {
   /** **(Optional)** Specify links to show in the SkipNav.
    * Each item needs a `href` and `label`. Defaults to a single link anchored to `#main`. */
   links?: SkipNavLink[]
+  /** **(Optional)** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLDivElement>
 }
 
 const defaultLinks = [{ href: "#main", label: "Skip to main content" }]
@@ -23,6 +25,7 @@ export const SkipNav = ({
   className,
   isVisible = false,
   links = defaultLinks,
+  ref,
   ...props
 }: SkipNavProps): JSX.Element => {
   const componentProps = {
@@ -31,7 +34,7 @@ export const SkipNav = ({
   }
   const navLinks = links.length > 0 ? links : defaultLinks
   return (
-    <nav {...componentProps}>
+    <nav {...componentProps} ref={ref}>
       <ul>
         {navLinks.map((link) => {
           const linkProps = {

package/src/components/Squircle/Squircle.tsx

@@ -1,4 +1,4 @@
-import type { HTMLAttributes, JSX } from "react"
+import type { HTMLAttributes, JSX, Ref } from "react"
 
 import clsx from "clsx"
 
@@ -8,6 +8,8 @@ export interface SquircleProps extends HTMLAttributes<HTMLDivElement> {
   children?: React.ReactNode
   /** **(Optional)** Specify additional CSS classes to be applied to the component. */
   className?: string
+  /** **(Optional)** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLDivElement>
   /** **(Optional)** Specify the Squircle size. */
   size?: "sm" | "md" | "lg"
 }
@@ -15,6 +17,7 @@ export interface SquircleProps extends HTMLAttributes<HTMLDivElement> {
 export const Squircle = ({
   children,
   className,
+  ref,
   size = "lg",
   ...props
 }: SquircleProps): JSX.Element => {
@@ -25,7 +28,7 @@ export const Squircle = ({
   }
 
   return (
-    <figure {...componentProps}>
+    <figure {...componentProps} ref={ref}>
       <figcaption>{children}</figcaption>
     </figure>
   )

package/src/components/Tag/Tag.tsx

@@ -1,4 +1,4 @@
-import type { AnchorHTMLAttributes, ForwardRefExoticComponent, HTMLAttributes, JSX } from "react"
+import type { ForwardRefExoticComponent, HTMLAttributes, JSX, Ref } from "react"
 
 import clsx from "clsx"
 import React from "react"
@@ -8,13 +8,15 @@ import { hasUserBg } from "../../../src/utils"
 export interface TagProps extends HTMLAttributes<HTMLAnchorElement> {
   /** **(Optional)** Specify a custom element to override default `a` or `span`. */
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  as?: React.FC<AnchorHTMLAttributes<HTMLElement>> | ForwardRefExoticComponent<any> | string
+  as?: React.FC<any> | ForwardRefExoticComponent<any> | string
   /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
   children?: React.ReactNode
   /** **(Optional)** Specify additional CSS classes to be applied to the component. */
   className?: string
   /** **(Optional)** Specify the URL that the Tag component will link to when clicked. */
   href?: string
+  /** **(Optional)** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLElement>
   /** **(Optional)** Specify the Tag size. */
   size?: "sm" | "md"
 }
@@ -24,21 +26,20 @@ export const Tag = ({
   children,
   className,
   href,
+  ref,
   size = "md",
   ...props
 }: TagProps): JSX.Element => {
-  let element: TagProps["as"] = href ? "a" : "span"
+  const element: TagProps["as"] = as ?? (href ? "a" : "span")
+
   const componentProps = {
     className: clsx("coop-tag", !hasUserBg(className) && "bg-tint-grey", className),
     "data-size": size.length && size !== "md" ? size : undefined,
     href,
-
     ...props,
   }
-  if (as) {
-    element = as
-  }
-  return React.createElement(element, { ...componentProps }, children)
+
+  return React.createElement(element, { ...componentProps, ref }, children)
 }
 
 export default Tag

package/src/components/TextInput/TextInput.tsx

@@ -1,4 +1,4 @@
-import type { InputHTMLAttributes, JSX } from "react"
+import type { InputHTMLAttributes, JSX, Ref } from "react"
 
 import clsx from "clsx"
 
@@ -21,6 +21,8 @@ export interface TextInputProps
   placeholder?: string
   /** **(Optional)** Specify the prefix. It can be any valid JSX or string. */
   prefix?: React.ReactNode
+  /** **(Optional)** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLInputElement>
   /** **(Optional)** Specify the TextInput size. */
   size?: StandardSizes
   /** **(Optional)** Specify the suffix. It can be any valid JSX or string. */
@@ -50,6 +52,7 @@ export const TextInput = ({
   name,
   placeholder,
   prefix,
+  ref,
   size = "md",
   suffix,
   type = "text",
@@ -73,7 +76,7 @@ export const TextInput = ({
   return (
     <div className="coop-text-input-wrapper">
       {prefix && <span className="coop-text-input--prefix">{prefix}</span>}
-      <input {...componentProps} />
+      <input {...componentProps} ref={ref} />
       {suffix && <span className="coop-text-input--suffix">{suffix}</span>}
     </div>
   )

package/src/components/Textarea/Textarea.tsx

@@ -1,4 +1,4 @@
-import type { ChangeEvent, JSX, TextareaHTMLAttributes } from "react"
+import type { ChangeEvent, JSX, Ref, TextareaHTMLAttributes } from "react"
 
 import clsx from "clsx"
 import { useState } from "react"
@@ -39,6 +39,8 @@ export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElemen
   name: string
   /** **(Optional)** Specify the Textarea placeholder text. Do not use in place of a form label. */
   placeholder?: string
+  /** **(Optional)** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLTextAreaElement>
   /** Specify the number of rows (lines of text) in the Textarea. Defaults to `4`. */
   rows?: number
   /** **(Optional)** Specify the Textarea size. */
@@ -58,13 +60,12 @@ export const Textarea = ({
   name,
   onChange: userOnChange = undefined,
   placeholder,
+  ref,
   rows = 4,
   size = "md",
   ...props
 }: TextareaProps): JSX.Element => {
-  const internalId = useId()
-
-  id = id ?? internalId
+  const uid = useId(id)
 
   const componentProps = {
     "aria-placeholder": placeholder ?? ariaPlaceholder ?? undefined,
@@ -73,7 +74,7 @@ export const Textarea = ({
     "data-error": error ?? undefined,
     "data-size": size.length && size !== "md" ? size : undefined,
     disabled,
-    id,
+    id: uid,
     maxLength: cutoff ? maxLength : undefined,
     name,
     placeholder,
@@ -98,7 +99,8 @@ export const Textarea = ({
           userOnChange?.(e)
           handleChange(e)
         }}
-      ></textarea>
+        ref={ref}
+      />
       {showCounter && (
         <>
           <small