@coopdigital/react 0.46.0 → 0.48.0

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,12 +1,14 @@
-import type { InputHTMLAttributes, JSX } from "react"
+import type { InputHTMLAttributes, JSX, Ref } from "react"
 
 import clsx from "clsx"
 
 import { StandardSizes } from "../../../src/types"
 import { useId } from "../../hooks/useId"
 
-export interface TextInputProps
-  extends Omit<InputHTMLAttributes<HTMLInputElement>, "prefix" | "size" | "type"> {
+export interface TextInputProps extends Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  "prefix" | "size" | "type"
+> {
   /** **(Optional)** Specify additional CSS classes to be applied to the component. */
   className?: string
   /** **(Optional)** Specify whether the TextInput should be disabled. Refer to Experience Library guidance on disabled form controls and accessibility. */
@@ -21,6 +23,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 +54,7 @@ export const TextInput = ({
   name,
   placeholder,
   prefix,
+  ref,
   size = "md",
   suffix,
   type = "text",
@@ -59,7 +64,7 @@ export const TextInput = ({
 
   const componentProps = {
     "aria-placeholder": placeholder ?? ariaPlaceholder ?? undefined,
-    className: clsx("coop-text-input", className),
+    className: clsx("coop-text-input", "coop-field-element", className),
     "data-error": error || undefined,
     "data-size": size.length && size !== "md" ? size : undefined,
     disabled,
@@ -73,7 +78,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,22 +60,21 @@ 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,
-    className: clsx("coop-textarea", className),
+    className: clsx("coop-textarea", "coop-field-element", className),
     cols,
     "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

package/src/index.ts

@@ -12,6 +12,7 @@ export * from "./components/Pill"
 export * from "./components/Radio"
 export * from "./components/RootSVG"
 export * from "./components/Searchbox"
+export * from "./components/Select"
 export * from "./components/Signpost"
 export * from "./components/SkipNav"
 export * from "./components/Squircle"