@coopdigital/react 1.4.1 → 1.5.0

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

package/src/hooks/useSlots.ts

@@ -1,6 +1,6 @@
 import React from "react"
 
-import { ReactNodeWithConfig } from "../types"
+import { LazyComponent, SlotConfig } from "../types"
 
 type Slots<T> = Record<keyof T, React.ReactNode>
 
@@ -8,22 +8,50 @@ export function isKey<T extends object>(x: T, k: PropertyKey): k is keyof T {
   return k in x
 }
 
-export function getSlotName(node: ReactNodeWithConfig): string | false {
-  if (
-    React.isValidElement(node) &&
-    node.type &&
-    typeof node.type !== "string" &&
-    typeof node.type !== "symbol"
-  ) {
-    return node.type?.config?.name ?? node.type.name
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function isLazy<T extends React.ComponentType<any>>(
+  type: unknown
+): type is LazyComponent<T> {
+  return typeof type === "object" && type !== null && "_payload" in type && "_init" in type
+}
+
+export function resolveComponentName(child: React.ReactNode): string | null {
+  if (child && typeof child === "object" && "type" in child) {
+    const type = child.type
+
+    if (isLazy(type)) {
+      try {
+        const resolved = type._init(type._payload)
+        if ("slot" in resolved) return (resolved.slot as SlotConfig).name
+        return resolved.displayName ?? resolved.name ?? null
+      } catch {
+        // _init throws a Promise if the payload is still pending
+        return null
+      }
+    }
+
+    if (typeof type === "function") {
+      if ("slot" in type) return (type.slot as SlotConfig).name
+      return (type as React.FC).displayName ?? (type as React.FC).name ?? null
+    }
   }
+  return null
+}
+
+export function getSlotName(node: React.ReactNode): string | false {
+  const slotName = resolveComponentName(node)
 
+  if (slotName) {
+    return slotName.replaceAll(".", "")
+    // return root && !safeName.startsWith(root) ? root + safeName : safeName
+  }
   return false
 }
 
 export function useSlots<T>(
   componentSlots: Slots<T>,
   children: React.ReactNode,
+
   options?: { collect?: string[] }
 ): Slots<T> {
   return React.Children.toArray(children).reduce(

package/src/types/index.ts

@@ -1,19 +1,23 @@
 export type StandardSizes = "sm" | "md" | "lg"
 
-export type FormFieldError = { message?: string; type?: string } | boolean | null | undefined
+// export type FormFieldError = { message?: string; type?: string } | boolean | null | undefined
 
-export type ReactNodeWithConfig =
-  | (React.ReactNode & {
-      type?: {
-        config?: ComponentConfig
-      }
-    })
-  | undefined
-  | null
+export interface SlotConfig {
+  field?: boolean
+  inline?: boolean
+  name: string
+  suffix?: string
+}
+
+export interface LazyPayload<T> {
+  default: T
+}
 
-export interface ComponentConfig {
-  fieldSuffix?: string
-  isField?: boolean
-  isInline?: boolean
-  name?: string
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export interface LazyComponent<T extends React.ComponentType<any>> {
+  _init: (payload: unknown) => T
+  _payload: Promise<LazyPayload<T>> | LazyPayload<T>
+  $$typeof: typeof REACT_LAZY_TYPE
 }
+
+export const REACT_LAZY_TYPE = Symbol.for("react.lazy")

package/src/utils/index.ts

@@ -1,3 +1,5 @@
+import { isValidElement } from "react"
+
 export const bgPropToClass = (color: string, userClasses?: string) =>
   userClasses?.includes("bg-") ? "" : `bg-${color}`
 
@@ -11,11 +13,11 @@ export const hasUserBorder = (userClasses?: string) => {
 
 export const bgClassToColor = (userClasses: string) => {
   return /bg-([^\s]+)/.exec(userClasses)?.[1] ?? null
+}
 
-  // return (
-  //   userClasses
-  //     .split(" ")
-  //     .find((c) => c.startsWith("bg"))
-  //     ?.replace("bg-", "") ?? ""
-  // )
+export function getSlotProp<R = unknown>(slot: React.ReactNode, prop: string): R | undefined {
+  if (isValidElement(slot) && prop in (slot.props as object)) {
+    return (slot.props as Record<string, unknown>)[prop] as R
+  }
+  return undefined
 }

package/dist/node_modules/merge-refs/dist/index.js

@@ -1,36 +0,0 @@
-/**
- * A function that merges React refs into one.
- * Supports both functions and ref objects created using createRef() and useRef().
- *
- * Usage:
- * ```tsx
- * <div ref={mergeRefs(ref1, ref2, ref3)} />
- * ```
- *
- * @param {(React.Ref<T> | undefined)[]} inputRefs Array of refs
- * @returns {React.Ref<T> | React.RefCallback<T>} Merged refs
- */
-function mergeRefs() {
-    var inputRefs = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        inputRefs[_i] = arguments[_i];
-    }
-    var filteredInputRefs = inputRefs.filter(Boolean);
-    if (filteredInputRefs.length <= 1) {
-        var firstRef = filteredInputRefs[0];
-        return firstRef || null;
-    }
-    return function mergedRefs(ref) {
-        for (var _i = 0, filteredInputRefs_1 = filteredInputRefs; _i < filteredInputRefs_1.length; _i++) {
-            var inputRef = filteredInputRefs_1[_i];
-            if (typeof inputRef === 'function') {
-                inputRef(ref);
-            }
-            else if (inputRef) {
-                inputRef.current = ref;
-            }
-        }
-    };
-}
-
-export { mergeRefs as default };