@coopdigital/react 1.4.1 → 1.5.0

package/src/components/DatePicker/DatePicker.tsx

@@ -13,7 +13,7 @@ import clsx from "clsx"
 import { useCallback, useMemo, useReducer } from "react"
 import { DayPicker } from "react-day-picker"
 
-import type { ComponentConfig, StandardSizes } from "../../types"
+import type { StandardSizes } from "../../types"
 import type {
   DateRange,
   DateRangeStr,
@@ -23,8 +23,8 @@ import type {
   TDateSingle,
 } from "./datepicker-utils"
 
-import { useId } from "../../hooks/useId"
 import Button from "../Button"
+import { useField } from "../Field/Field.context"
 import { CalendarIcon, CrossIcon, TickIcon } from "../icons"
 import Popover from "../Popover"
 import TextInput from "../TextInput"
@@ -108,11 +108,6 @@ export interface DatePickerProps extends Omit<
 
 const now = new Date()
 
-const componentConfig: ComponentConfig = {
-  fieldSuffix: "_display",
-  isField: true,
-}
-
 const baseValueProps = {
   readOnly: true,
   type: "hidden",
@@ -162,7 +157,7 @@ const Calendar = ({
   )
 }
 
-export const DatePicker = ({
+const DatePicker = ({
   className,
   closeOnSelect = true,
   dateFormat = "dd/MM/yyyy",
@@ -183,7 +178,7 @@ export const DatePicker = ({
   startDate,
   ...props
 }: DatePickerProps): JSX.Element => {
-  const uid = useId(id)
+  const field = useField()
 
   initialDate = getInitialDate(mode, initialDate)
 
@@ -285,7 +280,7 @@ export const DatePicker = ({
 
   const valueProps = {
     ...baseValueProps,
-    id: uid,
+    id: id ?? field?.id,
     name: name,
   }
 
@@ -309,9 +304,9 @@ export const DatePicker = ({
             autoComplete="off"
             className="coop-datepicker-input"
             disabled={disabled}
-            id={uid + componentConfig.fieldSuffix}
+            id={valueProps.id + "_display"}
             //maxLength={dateFormat.length}
-            name={name + componentConfig.fieldSuffix}
+            name={name + "_display"}
             onChange={updateFromInput}
             placeholder={getPlaceholder()}
             ref={ref}
@@ -381,13 +376,13 @@ export const DatePicker = ({
         <>
           <input
             {...baseValueProps}
-            id={`${uid}_start`}
+            id={`${valueProps.id}_start`}
             name={`${name}_start`}
             value={state.range?.field?.from ?? state.range?.input ?? ""}
           />
           <input
             {...baseValueProps}
-            id={`${uid}_end`}
+            id={`${valueProps.id}_end`}
             name={`${name}_end`}
             value={state.range?.field?.to ?? state.range?.input ?? ""}
           />
@@ -397,6 +392,11 @@ export const DatePicker = ({
   )
 }
 
-DatePicker.config = componentConfig
+DatePicker.slot = {
+  field: true,
+  name: "DatePicker",
+  suffix: "_display",
+}
 
 export default DatePicker
+export { DatePicker }

package/src/components/Expandable/Expandable.tsx

@@ -34,12 +34,7 @@ const componentSlots = {
   ExpandableSummary: null,
 }
 
-export const Expandable = ({
-  children,
-  className,
-  ref,
-  ...props
-}: ExpandableProps): JSX.Element => {
+const Expandable = ({ children, className, ref, ...props }: ExpandableProps): JSX.Element => {
   const slots = useSlots(componentSlots, children)
 
   const componentProps = {
@@ -76,10 +71,12 @@ const ExpandableContent = ({ children, className, ...props }: ExpandableContentP
   )
 }
 
-ExpandableSummary.config = { name: "ExpandableSummary" }
-ExpandableContent.config = { name: "ExpandableContent" }
+Expandable.slot = { name: "Expandable" }
+ExpandableSummary.slot = { name: "ExpandableSummary" }
+ExpandableContent.slot = { name: "ExpandableContent" }
 
 Expandable.Summary = ExpandableSummary
 Expandable.Content = ExpandableContent
 
 export default Expandable
+export { Expandable, ExpandableContent, ExpandableSummary }

package/src/components/Field/Field.context.ts

@@ -0,0 +1,29 @@
+"use client"
+import { createContext, useContext } from "react"
+
+export interface FieldConfig {
+  disabled: boolean
+  id: string
+  inline?: boolean
+  suffix?: string
+}
+
+export interface FieldContextValue {
+  // register: ({ control, inline, suffix, uid }: FieldConfig) => void
+  disabled?: boolean
+  id?: string
+  inline?: boolean
+  suffix?: string
+}
+
+export const FieldContext = createContext<FieldContextValue | null>(null)
+
+export const useField = () => {
+  const context = useContext(FieldContext)
+
+  if (!context) {
+    return null
+  }
+
+  return context
+}

package/src/components/Field/Field.tsx

@@ -1,14 +1,17 @@
-import type { HTMLAttributes, HTMLProps, Ref } from "react"
+"use client"
+import type { HTMLAttributes, Ref } from "react"
 
 import clsx from "clsx"
 import React from "react"
 
 import { useId } from "../../hooks/useId"
 import { useSlots } from "../../hooks/useSlots"
-import { ReactNodeWithConfig } from "../../types"
+import { SlotConfig } from "../../types"
+import { getSlotProp } from "../../utils"
 import { Error as BaseError, type ErrorProps } from "../FieldMarkers/Error"
 import { Hint as BaseHint, type HintProps } from "../FieldMarkers/Hint"
 import { Label as BaseLabel, type LabelProps } from "../FieldMarkers/Label"
+import { FieldConfig, FieldContext } from "./Field.context"
 
 const componentSlots = {
   Children: null,
@@ -35,7 +38,7 @@ interface FieldProps extends HTMLAttributes<HTMLDivElement> {
   ref?: Ref<HTMLDivElement>
 }
 
-export const Field = ({
+const Field = ({
   boxed = false,
   children,
   className,
@@ -47,85 +50,87 @@ export const Field = ({
   const slots = { ...useSlots(componentSlots, children) }
   const hasMarkers = !!(slots.FieldLabel ?? slots.FieldError ?? slots.FieldHint)
 
-  let isInline = false
-  let control: ReactNodeWithConfig
-  let controlSuffix = ""
-  let controlId = useId()
-  let controlDisabled = false
+  const internalId = useId()
 
-  if (Array.isArray(slots.Children)) {
-    slots.Children = slots.Children.filter((child: ReactNodeWithConfig) => {
-      if (child?.type?.config?.isField) {
-        control = child
-        return false
-      }
-      return true
-    })
+  const controlProps: FieldConfig = {
+    disabled: false,
+    id: internalId,
   }
 
-  if (React.isValidElement(control)) {
-    const controlProps = control.props as HTMLProps<HTMLElement>
+  if (Array.isArray(slots.Children)) {
+    slots.Children = slots.Children.filter((child: React.ReactNode) => {
+      //resolveComponentName(child)
 
-    controlId = controlProps.id ?? controlId
-    controlDisabled = controlProps.disabled ?? false
-    controlSuffix = control?.type?.config?.fieldSuffix ?? ""
-    isInline = control?.type?.config?.isInline ?? false
+      if (child && typeof child === "object" && "type" in child) {
+        if (typeof child?.type === "function" && "slot" in child.type) {
+          const { slot } = child?.type as { slot: SlotConfig }
 
-    slots.Control = controlProps.id
-      ? control
-      : React.cloneElement(control as React.ReactElement<HTMLInputElement>, { id: controlId })
-  }
+          slots.Control = child
 
-  if (React.isValidElement(slots.FieldLabel) && !(slots.FieldLabel.props as LabelProps).htmlFor) {
-    slots.FieldLabel = React.cloneElement(slots.FieldLabel as React.ReactElement<LabelProps>, {
-      htmlFor: controlId + controlSuffix,
+          if (slots.Control.props) {
+            controlProps.inline = slot.inline ?? false
+            controlProps.disabled = getSlotProp<boolean>(slots.Control, "disabled") ?? false
+            controlProps.id = getSlotProp<string>(slots.Control, "id") ?? controlProps.id
+            controlProps.suffix = slot.suffix ?? undefined
+          }
+
+          return false
+        }
+      }
+
+      return true
     })
   }
 
   const componentProps = {
     ...props,
-    "aria-disabled": controlDisabled || undefined,
-    className: clsx("coop-field", isInline && "coop-field-inline", className),
+    "aria-disabled": controlProps.disabled || undefined,
+    className: clsx("coop-field", controlProps.inline && "coop-field-inline", className),
     "data-boxed": boxed || undefined,
     "data-error": error || undefined,
     "data-hide-error": hideErrorBar || undefined,
   }
 
   return (
-    <div {...componentProps} ref={ref}>
-      {!isInline && hasMarkers && (
-        <div className="coop-field-markers">
-          {slots.FieldLabel}
-          {slots.FieldHint}
-          {slots.FieldError}
-        </div>
-      )}
-      {slots.Control && (
-        <div className="coop-field-control">
-          {slots.Control}
-          {isInline && hasMarkers && (
-            <div className="coop-field-markers">
-              {slots.FieldLabel}
-              {slots.FieldHint}
-              {slots.FieldError}
-            </div>
-          )}
-        </div>
-      )}
-      {slots.Children}
-    </div>
+    <FieldContext.Provider value={{ ...controlProps }}>
+      <div {...componentProps} ref={ref}>
+        {!controlProps?.inline && hasMarkers && (
+          <div className="coop-field-markers">
+            {slots.FieldLabel}
+            {slots.FieldHint}
+            {slots.FieldError}
+          </div>
+        )}
+        {slots.Control && (
+          <div className="coop-field-control">
+            {slots.Control}
+            {controlProps?.inline && hasMarkers && (
+              <div className="coop-field-markers">
+                {slots.FieldLabel}
+                {slots.FieldHint}
+                {slots.FieldError}
+              </div>
+            )}
+          </div>
+        )}
+        {slots.Children}
+      </div>
+    </FieldContext.Provider>
   )
 }
+
 const FieldLabel = (props: LabelProps) => <BaseLabel {...props} />
 const FieldHint = (props: HintProps) => <BaseHint {...props} />
 const FieldError = (props: ErrorProps) => <BaseError {...props} />
 
-FieldLabel.config = { name: "FieldLabel" }
-FieldHint.config = { name: "FieldHint" }
-FieldError.config = { name: "FieldError" }
+Field.slot = { name: "Field" }
+FieldLabel.slot = { name: "FieldLabel" }
+FieldHint.slot = { name: "FieldHint" }
+FieldError.slot = { name: "FieldError" }
 
 Field.Label = FieldLabel
 Field.Hint = FieldHint
 Field.Error = FieldError
 
 export default Field
+export { Field, FieldError, FieldHint, FieldLabel }

package/src/components/FieldMarkers/Label.tsx

@@ -1,6 +1,8 @@
 import clsx from "clsx"
 import { LabelHTMLAttributes, Ref } from "react"
 
+import { useField } from "../Field/Field.context"
+
 export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
   /** **(Optional)** Main label for the form element. Accepts any valid JSX or string. */
   children?: string | React.ReactNode
@@ -13,8 +15,10 @@ export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
 }
 
 export const Label = ({ children, className, isVisible = true, ref, ...props }: LabelProps) => {
+  const field = useField()
   const componentProps = {
     className: clsx("coop-field-label", !isVisible && "sr-only", className),
+    htmlFor: props.htmlFor ?? (field?.id ? field.id + (field?.suffix ?? "") : undefined),
     ...props,
   }
   return (

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
+}