@coopdigital/react 0.45.0 → 0.47.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,4 +1,4 @@
-import type { InputHTMLAttributes, JSX } from "react"
+import type { InputHTMLAttributes, JSX, Ref } from "react"
 
 import clsx from "clsx"
 
@@ -21,12 +21,26 @@ 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. */
   suffix?: React.ReactNode
   /** **(Optional)** Specify the TextInput type. */
-  type?: "text" | "email" | "number" | "password" | "search" | "tel" | "url"
+  type?:
+    | "text"
+    | "email"
+    | "number"
+    | "password"
+    | "search"
+    | "tel"
+    | "url"
+    | "date"
+    | "datetime-local"
+    | "week"
+    | "month"
+    | "time"
 }
 
 export const TextInput = ({
@@ -38,6 +52,7 @@ export const TextInput = ({
   name,
   placeholder,
   prefix,
+  ref,
   size = "md",
   suffix,
   type = "text",
@@ -61,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

package/src/{utils/slots.ts → hooks/useSlots.ts}

@@ -12,7 +12,7 @@ export function getSlotName(node: React.ReactNode): string | false {
     : false
 }
 
-export function getSlots<T>(
+export function useSlots<T>(
   componentSlots: Slots<T>,
   children: React.ReactNode,
   options?: { collect?: string[] }

package/src/index.ts

@@ -9,9 +9,9 @@ export * from "./components/Fieldset"
 export * from "./components/Flourish"
 export * from "./components/Image"
 export * from "./components/Pill"
-export * from "./components/RadioButton"
+export * from "./components/Radio"
 export * from "./components/RootSVG"
-export * from "./components/SearchBox"
+export * from "./components/Searchbox"
 export * from "./components/Signpost"
 export * from "./components/SkipNav"
 export * from "./components/Squircle"

package/dist/components/RadioButton/RadioButton.d.ts

@@ -1,18 +0,0 @@
-import { type InputHTMLAttributes, type JSX } from "react";
-import { StandardSizes } from "src/types";
-export interface RadioButtonProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
-    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
-    className?: string;
-    /** **(Optional)** Specify whether the RadioButton should be disabled. Refer to Experience Library guidance on disabled form controls and accessibility.  */
-    disabled?: boolean;
-    /** **(Optional)** Specify the RadioButton error state. */
-    error?: boolean;
-    /** **(Optional)** Specify the RadioButton id. Will be auto-generated if not set. */
-    id?: string;
-    /** Specify the RadioButton name. */
-    name: string;
-    /** **(Optional)** Specify the RadioButton size. */
-    size?: StandardSizes;
-}
-export declare const RadioButton: ({ className, disabled, error, id, name, size, ...props }: RadioButtonProps) => JSX.Element;
-export default RadioButton;

package/dist/components/RadioButton/RadioButton.js

@@ -1,22 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import clsx from 'clsx';
-import { useId } from 'react';
-
-const RadioButton = ({ className, disabled, error = false, id, name, size = "md", ...props }) => {
-    const internalId = useId();
-    id = id !== null && id !== void 0 ? id : internalId;
-    const componentProps = {
-        className: clsx("coop-radio-button", className),
-        "data-error": error || undefined,
-        "data-size": size.length && size !== "md" ? size : undefined,
-        disabled,
-        id,
-        name,
-        type: "radio",
-        ...props,
-    };
-    //const formItemProps = { "aria-disabled": disabled ? true : undefined }
-    return jsx("input", { ...componentProps });
-};
-
-export { RadioButton, RadioButton as default };

package/dist/components/RadioButton/index.d.ts

@@ -1,4 +0,0 @@
-import RadioButton from "./RadioButton";
-export default RadioButton;
-export { RadioButton };
-export * from "./RadioButton";

package/dist/components/SearchBox/index.d.ts

@@ -1,4 +0,0 @@
-import SearchBox from "./SearchBox";
-export default SearchBox;
-export { SearchBox };
-export * from "./SearchBox";

package/src/components/RadioButton/RadioButton.tsx

@@ -1,48 +0,0 @@
-import clsx from "clsx"
-import { type InputHTMLAttributes, type JSX, useId } from "react"
-import { StandardSizes } from "src/types"
-
-export interface RadioButtonProps
-  extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
-  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
-  className?: string
-  /** **(Optional)** Specify whether the RadioButton should be disabled. Refer to Experience Library guidance on disabled form controls and accessibility.  */
-  disabled?: boolean
-  /** **(Optional)** Specify the RadioButton error state. */
-  error?: boolean
-  /** **(Optional)** Specify the RadioButton id. Will be auto-generated if not set. */
-  id?: string
-  /** Specify the RadioButton name. */
-  name: string
-  /** **(Optional)** Specify the RadioButton size. */
-  size?: StandardSizes
-}
-
-export const RadioButton = ({
-  className,
-  disabled,
-  error = false,
-  id,
-  name,
-  size = "md",
-  ...props
-}: RadioButtonProps): JSX.Element => {
-  const internalId = useId()
-
-  id = id ?? internalId
-
-  const componentProps = {
-    className: clsx("coop-radio-button", className),
-    "data-error": error || undefined,
-    "data-size": size.length && size !== "md" ? size : undefined,
-    disabled,
-    id,
-    name,
-    type: "radio",
-    ...props,
-  }
-  //const formItemProps = { "aria-disabled": disabled ? true : undefined }
-  return <input {...componentProps} />
-}
-
-export default RadioButton

package/src/components/RadioButton/index.ts

@@ -1,5 +0,0 @@
-import RadioButton from "./RadioButton"
-
-export default RadioButton
-export { RadioButton }
-export * from "./RadioButton"

package/src/components/SearchBox/index.ts

@@ -1,5 +0,0 @@
-import SearchBox from "./SearchBox"
-
-export default SearchBox
-export { SearchBox }
-export * from "./SearchBox"