@coopdigital/react 1.4.1 → 1.5.1

package/src/components/Fieldset/Fieldset.tsx

@@ -24,7 +24,7 @@ export interface FieldsetProps extends FieldsetHTMLAttributes<HTMLFieldSetElemen
   /** **(Optional)** Specify the size of the Fieldset and all its descendents. */
   size?: StandardSizes
 }
-export const Fieldset = ({
+const Fieldset = ({
   children,
   className,
   disabled,
@@ -83,10 +83,11 @@ const FieldsetLegend = (props: LegendProps) => <BaseLegend {...props} />
 const FieldsetHint = (props: HintProps) => <BaseHint {...props} />
 const FieldsetError = (props: ErrorProps) => <BaseError {...props} />
 
-FieldsetFields.config = { name: "FieldsetField" }
-FieldsetLegend.config = { name: "FieldsetLegend" }
-FieldsetHint.config = { name: "FieldsetHint" }
-FieldsetError.config = { name: "FieldsetError" }
+Fieldset.slot = { name: "Fieldset" }
+FieldsetFields.slot = { name: "FieldsetField" }
+FieldsetLegend.slot = { name: "FieldsetLegend" }
+FieldsetHint.slot = { name: "FieldsetHint" }
+FieldsetError.slot = { name: "FieldsetError" }
 
 Fieldset.Error = FieldsetError
 Fieldset.Fields = FieldsetFields
@@ -94,3 +95,4 @@ Fieldset.Hint = FieldsetHint
 Fieldset.Legend = FieldsetLegend
 
 export default Fieldset
+export { Fieldset, FieldsetError, FieldsetFields, FieldsetHint, FieldsetLegend }

package/src/components/Flourish/Flourish.tsx

@@ -15,7 +15,7 @@ export interface FlourishProps extends SVGProps<SVGSVGElement> {
   ref?: Ref<SVGSVGElement>
 }
 
-export const Flourish = ({
+const Flourish = ({
   children,
   className,
   fill = "brand-blue",
@@ -38,4 +38,7 @@ export const Flourish = ({
   )
 }
 
+Flourish.slot = { name: "Flourish" }
+
 export default Flourish
+export { Flourish }

package/src/components/Form/Form.tsx

@@ -11,7 +11,7 @@ export interface FormProps extends FormHTMLAttributes<HTMLFormElement> {
   ref?: Ref<HTMLFormElement>
 }
 
-export const Form = ({ children, className, ref, ...props }: FormProps): JSX.Element => {
+const Form = ({ children, className, ref, ...props }: FormProps): JSX.Element => {
   const componentProps = {
     className: clsx("coop-form ", className),
     ...props,
@@ -24,4 +24,7 @@ export const Form = ({ children, className, ref, ...props }: FormProps): JSX.Ele
   )
 }
 
+Form.slot = { name: "Form" }
+
 export default Form
+export { Form }

package/src/components/Image/Image.tsx

@@ -36,7 +36,7 @@ const getContentfulParams = (src: string, width: string, height: string | undefi
   }
 }
 
-export const Image = ({
+const Image = ({
   alt,
   crop,
   height,
@@ -64,4 +64,7 @@ export const Image = ({
   )
 }
 
+Image.slot = { name: "Image" }
+
 export default Image
+export { Image }

package/src/components/Pill/Pill.tsx

@@ -35,7 +35,7 @@ const componentSlots = {
   PillBadge: null,
 }
 
-export const Pill = ({
+const Pill = ({
   as,
   children,
   className,
@@ -66,8 +66,10 @@ const PillBadge = ({ children, className }: PillBadgeProps) => {
   )
 }
 
-PillBadge.config = { name: "PillBadge" }
+Pill.slot = { name: "Pill" }
+PillBadge.slot = { name: "PillBadge" }
 
 Pill.Badge = PillBadge
 
 export default Pill
+export { Pill, PillBadge }

package/src/components/Popover/Popover.tsx

@@ -76,7 +76,7 @@ const componentSlots = {
   PopoverTrigger: null,
 }
 
-export const Popover = ({ children, ...props }: PopoverProps): JSX.Element => {
+const Popover = ({ children, ...props }: PopoverProps): JSX.Element => {
   const slots = useSlots(componentSlots, children)
 
   return (
@@ -182,10 +182,11 @@ const PopoverAnchor = ({
   return <RadixPopover.Anchor {...componentProps}>{children}</RadixPopover.Anchor>
 }
 
-PopoverTrigger.config = { name: "PopoverTrigger" }
-PopoverContent.config = { name: "PopoverContent" }
-PopoverClose.config = { name: "PopoverClose" }
-PopoverAnchor.config = { name: "PopoverAnchor" }
+Popover.slot = { name: "Popover" }
+PopoverTrigger.slot = { name: "PopoverTrigger" }
+PopoverContent.slot = { name: "PopoverContent" }
+PopoverClose.slot = { name: "PopoverClose" }
+PopoverAnchor.slot = { name: "PopoverAnchor" }
 
 Popover.Trigger = PopoverTrigger
 Popover.Content = PopoverContent
@@ -193,3 +194,4 @@ Popover.Close = PopoverClose
 Popover.Anchor = PopoverAnchor
 
 export default Popover
+export { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger }

package/src/components/Radio/Radio.tsx

@@ -1,8 +1,9 @@
+"use client"
 import clsx from "clsx"
 import { type InputHTMLAttributes, type JSX, Ref } from "react"
 
-import { useId } from "../../hooks/useId"
-import { ComponentConfig, StandardSizes } from "../../types"
+import { StandardSizes } from "../../types"
+import { useField } from "../Field/Field.context"
 
 export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
   /** **(Optional)** Specify additional CSS classes to be applied to the component. */
@@ -21,7 +22,7 @@ export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
   size?: StandardSizes
 }
 
-export const Radio = ({
+const Radio = ({
   className,
   disabled,
   error = false,
@@ -31,14 +32,14 @@ export const Radio = ({
   size,
   ...props
 }: RadioProps): JSX.Element => {
-  const uid = useId(id)
+  const field = useField()
 
   const componentProps = {
     className: clsx("coop-radio", "coop-field-element", className),
     "data-error": error || undefined,
     "data-size": size ?? undefined,
     disabled,
-    id: uid,
+    id: id ?? field?.id,
     name,
     type: "radio",
     ...props,
@@ -47,9 +48,11 @@ export const Radio = ({
   return <input {...componentProps} ref={ref} />
 }
 
-Radio.config = {
-  isField: true,
-  isInline: true,
-} satisfies ComponentConfig
+Radio.slot = {
+  field: true,
+  inline: true,
+  name: "Radio",
+}
 
 export default Radio
+export { Radio }

package/src/components/RootSVG/RootSVG.tsx

@@ -1,4 +1,4 @@
-export const RootSVG = () => {
+const RootSVG = () => {
   return (
     <svg
       height="0"
@@ -20,4 +20,7 @@ export const RootSVG = () => {
   )
 }
 
+RootSVG.slot = { name: "RootSVG" }
+
 export default RootSVG
+export { RootSVG }

package/src/components/Searchbox/Searchbox.context.tsx

@@ -0,0 +1,20 @@
+import { createContext, RefObject, useContext } from "react"
+
+import { StandardSizes } from "../../types"
+
+interface SearchboxContextValue {
+  buttonId?: string
+  id?: string
+  inputId?: string
+  isLoading?: boolean
+  ref?: RefObject<HTMLFormElement | null> | null
+  size?: StandardSizes
+}
+
+export const SearchboxContext = createContext<SearchboxContextValue>({})
+
+export const useSearchbox = () => {
+  const context = useContext(SearchboxContext)
+  if (!context) throw new Error("Searchbox components must be used inside <Searchbox>")
+  return context
+}

package/src/components/Searchbox/Searchbox.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import type { FormHTMLAttributes, JSX, Ref } from "react"
+import type { FormHTMLAttributes, JSX, RefObject } from "react"
 
 import clsx from "clsx"
 import React, { useCallback, useState } from "react"
@@ -8,11 +8,13 @@ import React, { useCallback, useState } from "react"
 import { useId } from "../../hooks/useId"
 import { useSlots } from "../../hooks/useSlots"
 import { StandardSizes } from "../../types"
-import { hasUserBorder } from "../../utils"
+import { getSlotProp, hasUserBorder } from "../../utils"
 import { Button, type ButtonProps } from "../Button"
 import Field from "../Field"
+import { FieldLabel } from "../Field/Field"
 import { SearchIcon } from "../icons"
 import TextInput, { TextInputProps } from "../TextInput"
+import { SearchboxContext, useSearchbox } from "./Searchbox.context"
 
 export interface SearchboxProps extends FormHTMLAttributes<HTMLFormElement> {
   /** **(Optional)** Specify a server endpoint to submit the form. Will be ignored if onSubmit is also set. */
@@ -34,7 +36,7 @@ export interface SearchboxProps extends FormHTMLAttributes<HTMLFormElement> {
   /** **(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>
+  ref?: RefObject<HTMLFormElement | null>
   /** **(Optional)** Specify the Searchbox size. */
   size?: StandardSizes
   /** **(Optional)** Specify the Searchbox variant. */
@@ -46,7 +48,7 @@ const componentSlots = {
   SearchboxInput: null,
 }
 
-export const Searchbox = ({
+const Searchbox = ({
   action,
   children,
   className,
@@ -59,10 +61,13 @@ export const Searchbox = ({
   variant = "solid",
   ...props
 }: SearchboxProps): JSX.Element => {
-  const slots = { ...useSlots(componentSlots, children) }
+  const slots = useSlots(componentSlots, children)
+  const uid = useId(id)
 
   const [isPending, setIsPending] = useState(false)
-  const uid = useId(id)
+
+  const inputId = getSlotProp<string>(slots.SearchboxInput, "id") ?? uid + "__input"
+  const buttonId = getSlotProp<string>(slots.SearchboxButton, "id") ?? uid + "__button"
 
   const handleSubmit = useCallback(
     async (event: React.SubmitEvent<HTMLFormElement>) => {
@@ -91,63 +96,69 @@ export const Searchbox = ({
     className: clsx("coop-searchbox", borderClass, className),
     "data-size": size ?? undefined,
     "data-variant": variant.length && variant !== "solid" ? variant : undefined,
-    id: uid + "__form",
+    id: id ?? undefined,
     onSubmit: onSubmit ? handleSubmit : undefined,
     ...props,
   }
 
-  slots.SearchboxButton = React.cloneElement(
-    slots.SearchboxButton as React.ReactElement<ButtonProps>,
-    {
-      isLoading: isPending,
-      size,
-    }
-  )
-
-  slots.SearchboxInput = React.cloneElement(
-    slots.SearchboxInput as React.ReactElement<TextInputProps>,
-    {
-      autoCapitalize: "off",
-      id: uid,
-      size,
-      type: "search",
-    }
-  )
-
-  const labelProps = {
-    htmlFor: uid,
-    isVisible: labelVisible,
-  }
-
   return (
-    <form {...formProps} ref={ref}>
-      {label && <Field.Label {...labelProps}>{label}</Field.Label>}
-      <div className={clsx("coop-searchbox--inner")}>
-        <Field>{slots.SearchboxInput}</Field>
-        {slots.SearchboxButton}
-      </div>
-    </form>
+    <SearchboxContext.Provider value={{ buttonId, inputId, isLoading: isPending, ref, size }}>
+      <form {...formProps} ref={ref}>
+        {label && (
+          <FieldLabel htmlFor={inputId ?? uid} isVisible={labelVisible}>
+            {label}
+          </FieldLabel>
+        )}
+        <div className={clsx("coop-searchbox--inner")}>
+          <Field>{slots.SearchboxInput}</Field>
+          {slots.SearchboxButton}
+        </div>
+      </form>
+    </SearchboxContext.Provider>
   )
 }
 
-const SearchboxButton = ({ children, id, ...props }: ButtonProps) => {
-  const uid = useId(id)
+const SearchboxButton = ({ children, ...props }: ButtonProps) => {
+  // const uid = useId(id)
+  const searchbox = useSearchbox()
   const buttonProps = {
     children: children ?? (
-      <SearchIcon alt="Search" id={uid + "__icon"} stroke="currentColor" width="24" />
+      <SearchIcon
+        alt="Search"
+        id={searchbox.buttonId + "__icon"}
+        stroke="currentColor"
+        width="24"
+      />
     ),
+    id: searchbox.buttonId,
+    isLoading: searchbox.isLoading,
+    size: searchbox.size,
     ...props,
   }
 
   return <Button {...buttonProps} />
 }
 
-const SearchboxInput = (props: TextInputProps) => <TextInput {...props} />
+SearchboxButton.displayName = "Searchbox.Button"
+
+const SearchboxInput = (props: TextInputProps) => {
+  const searchbox = useSearchbox()
+
+  return (
+    <TextInput
+      autoCapitalize="off"
+      id={searchbox.inputId}
+      size={searchbox.size}
+      type="search"
+      {...props}
+    />
+  )
+}
+
+SearchboxInput.displayName = "Searchbox.Input"
 
 Searchbox.Button = SearchboxButton
 Searchbox.Input = SearchboxInput
 
-SearchboxButton.config = { name: "SearchboxButton" }
-SearchboxInput.config = { isField: true, name: "SearchboxInput" }
-
 export default Searchbox
+export { Searchbox, SearchboxButton, SearchboxInput }

package/src/components/Select/Select.tsx

@@ -1,3 +1,4 @@
+"use client"
 import type {
   JSX,
   OptgroupHTMLAttributes,
@@ -9,8 +10,8 @@ import type {
 
 import clsx from "clsx"
 
-import { ComponentConfig, StandardSizes } from "../../../src/types"
-import { useId } from "../../hooks/useId"
+import { StandardSizes } from "../../../src/types"
+import { useField } from "../Field/Field.context"
 
 export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "size"> {
   /** **(Optional)** Options inside the Select. This should be a set of `Select.Option` or `Select.OptionGroup` components.  */
@@ -47,7 +48,7 @@ interface SelectOptionProps extends OptionHTMLAttributes<HTMLOptionElement> {
   value: string
 }
 
-export const Select = ({
+const Select = ({
   children,
   className,
   disabled,
@@ -58,13 +59,14 @@ export const Select = ({
   size,
   ...props
 }: SelectProps): JSX.Element => {
-  const uid = useId(id)
+  const field = useField()
+
   const componentProps = {
     className: clsx("coop-select", "coop-field-element", className),
     "data-error": error ?? undefined,
     "data-size": size ?? undefined,
     disabled,
-    id: uid,
+    id: id ?? field?.id,
     name,
     ...props,
   }
@@ -88,14 +90,12 @@ const SelectOption = ({ children, className, ...props }: SelectOptionProps): JSX
   )
 }
 
-SelectOption.config = { name: "SelectOption" }
-SelectOptionGroup.config = { name: "SelectOptionGroup" }
+Select.slot = { name: "Select" }
+SelectOption.slot = { name: "SelectOption" }
+SelectOptionGroup.slot = { name: "SelectOptionGroup" }
 
 Select.OptionGroup = SelectOptionGroup
 Select.Option = SelectOption
 
-Select.config = {
-  isField: true,
-} satisfies ComponentConfig
-
 export default Select
+export { Select, SelectOption, SelectOptionGroup }

package/src/components/Signpost/Signpost.tsx

@@ -24,7 +24,7 @@ export interface SignpostProps extends HTMLAttributes<HTMLDivElement> {
   ref?: Ref<HTMLDivElement>
 }
 
-export const Signpost = ({
+const Signpost = ({
   as,
   children,
   className,
@@ -58,4 +58,7 @@ export const Signpost = ({
   )
 }
 
+Signpost.slot = { name: "Signpost" }
+
 export default Signpost
+export { Signpost }

package/src/components/SkipNav/SkipNav.tsx

@@ -21,7 +21,7 @@ export interface SkipNavProps extends HTMLAttributes<HTMLDivElement> {
 
 const defaultLinks = [{ href: "#main", label: "Skip to main content" }]
 
-export const SkipNav = ({
+const SkipNav = ({
   className,
   isVisible = false,
   links = defaultLinks,
@@ -53,4 +53,7 @@ export const SkipNav = ({
   )
 }
 
+SkipNav.slot = { name: "SkipNav" }
+
 export default SkipNav
+export { SkipNav }

package/src/components/Squircle/Squircle.tsx

@@ -14,7 +14,7 @@ export interface SquircleProps extends HTMLAttributes<HTMLDivElement> {
   size?: "sm" | "md" | "lg"
 }
 
-export const Squircle = ({
+const Squircle = ({
   children,
   className,
   ref,
@@ -34,4 +34,7 @@ export const Squircle = ({
   )
 }
 
+Squircle.slot = { name: "Squircle" }
+
 export default Squircle
+export { Squircle }

package/src/components/Tag/Tag.tsx

@@ -21,7 +21,7 @@ export interface TagProps extends HTMLAttributes<HTMLAnchorElement> {
   size?: "sm" | "md"
 }
 
-export const Tag = ({
+const Tag = ({
   as,
   children,
   className,
@@ -42,4 +42,7 @@ export const Tag = ({
   return React.createElement(element, { ...componentProps, ref }, children)
 }
 
+Tag.slot = { name: "Tag" }
+
 export default Tag
+export { Tag }

package/src/components/TextInput/TextInput.tsx

@@ -1,9 +1,10 @@
+"use client"
 import type { InputHTMLAttributes, JSX, Ref } from "react"
 
 import clsx from "clsx"
 
-import { ComponentConfig, StandardSizes } from "../../../src/types"
-import { useId } from "../../hooks/useId"
+import { StandardSizes } from "../../../src/types"
+import { useField } from "../Field/Field.context"
 
 export interface TextInputProps extends Omit<
   InputHTMLAttributes<HTMLInputElement>,
@@ -49,7 +50,7 @@ export interface TextInputProps extends Omit<
     | "time"
 }
 
-export const TextInput = ({
+const TextInput = ({
   "aria-placeholder": ariaPlaceholder,
   className,
   disabled,
@@ -66,7 +67,7 @@ export const TextInput = ({
   type = "text",
   ...props
 }: TextInputProps): JSX.Element => {
-  const uid = useId(id)
+  const field = useField()
 
   const componentProps = {
     "aria-placeholder": placeholder ?? ariaPlaceholder ?? undefined,
@@ -74,7 +75,7 @@ export const TextInput = ({
     "data-error": error || undefined,
     "data-size": size?.length ? size : undefined,
     disabled,
-    id: uid,
+    id: id ?? field?.id,
     name,
     placeholder,
     type,
@@ -100,8 +101,7 @@ export const TextInput = ({
   )
 }
 
-TextInput.config = {
-  isField: true,
-} satisfies ComponentConfig
+TextInput.slot = { name: "TextInput" }
 
 export default TextInput
+export { TextInput }

package/src/components/Textarea/Textarea.tsx

@@ -6,8 +6,8 @@ import clsx from "clsx"
 import { useState } from "react"
 
 import { useDebounce } from "../../hooks/useDebounce"
-import { useId } from "../../hooks/useId"
-import { ComponentConfig, StandardSizes } from "../../types"
+import { StandardSizes } from "../../types"
+import { useField } from "../Field/Field.context"
 
 const DEBOUNCE_DELAY = 750
 
@@ -47,7 +47,7 @@ export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElemen
   size?: StandardSizes
 }
 
-export const Textarea = ({
+const Textarea = ({
   "aria-placeholder": ariaPlaceholder,
   className,
   cols = 30,
@@ -65,7 +65,7 @@ export const Textarea = ({
   size,
   ...props
 }: TextareaProps): JSX.Element => {
-  const uid = useId(id)
+  const field = useField()
 
   const componentProps = {
     "aria-placeholder": placeholder ?? ariaPlaceholder ?? undefined,
@@ -74,7 +74,7 @@ export const Textarea = ({
     "data-error": error ?? undefined,
     "data-size": size ?? undefined,
     disabled,
-    id: uid,
+    id: id ?? field?.id,
     maxLength: cutoff ? maxLength : undefined,
     name,
     placeholder,
@@ -113,8 +113,7 @@ export const Textarea = ({
   )
 }
 
-Textarea.config = {
-  isField: true,
-} satisfies ComponentConfig
+Textarea.slot = { name: "Textarea" }
 
 export default Textarea
+export { Textarea }

package/src/components/ValidationSummary/ValidationSummary.tsx

@@ -1,5 +1,5 @@
-/* eslint-disable jsx-a11y/anchor-is-valid */
 "use client"
+/* eslint-disable jsx-a11y/anchor-is-valid */
 
 import type { HTMLAttributes, JSX, ReactNode, Ref } from "react"
 
@@ -70,7 +70,7 @@ const componentSlots = {
   ValidationSummaryPrompt: null,
 }
 
-export const ValidationSummary = ({
+const ValidationSummary = ({
   autoScroll = true,
   children,
   className,
@@ -178,12 +178,19 @@ const ValidationSummaryErrors = ({ errors }: ValidationSummaryErrorsProps): JSX.
   ) : null
 }
 
-ValidationSummaryHeading.config = { name: "ValidationSummaryHeading" }
-ValidationSummaryPrompt.config = { name: "ValidationSummaryPrompt" }
-ValidationSummaryErrors.config = { name: "ValidationSummaryErrors" }
+ValidationSummary.slot = { name: "ValidationSummary" }
+ValidationSummaryHeading.slot = { name: "ValidationSummaryHeading" }
+ValidationSummaryPrompt.slot = { name: "ValidationSummaryPrompt" }
+ValidationSummaryErrors.slot = { name: "ValidationSummaryErrors" }
 
 ValidationSummary.Heading = ValidationSummaryHeading
 ValidationSummary.Prompt = ValidationSummaryPrompt
 ValidationSummary.Errors = ValidationSummaryErrors
 
 export default ValidationSummary
+export {
+  ValidationSummary,
+  ValidationSummaryErrors,
+  ValidationSummaryHeading,
+  ValidationSummaryPrompt,
+}