@coopdigital/react 1.30.1 → 1.30.2

package/src/components/Combobox/Combobox.tsx

@@ -10,6 +10,7 @@ import {
   type UseComboboxState,
   type UseComboboxStateChange,
 } from "downshift"
+import mergeRefs from "merge-refs"
 import { useEffect, useMemo, useRef, useState } from "react"
 
 import {
@@ -26,7 +27,7 @@ import { ComboboxContext, useComboboxContext } from "@/components/Combobox/Combo
 import { getFieldError, useField } from "@/components/Field/Field.context"
 import { ChevronDownIcon } from "@/components/icons"
 import { TextInput, type TextInputProps } from "@/components/TextInput"
-import { useDebounce, useId, useSlots } from "@/hooks"
+import { useDebounce, useFormReset, useId, useSlots } from "@/hooks"
 import { StandardSizes } from "@/types"
 import { getSlotProp } from "@/utils"
 
@@ -247,7 +248,9 @@ const Combobox = ({
   )
 
   const [initialSelectedItem] = useState(() => resolveOption(defaultSelected, items))
-  const selectedItem = selected === undefined ? undefined : resolveOption(selected, items)
+  const defaultSelectedItem = resolveOption(defaultSelected, items)
+  const controlled = selected !== undefined
+  const selectedItem = controlled ? resolveOption(selected, items) : undefined
 
   // Work out the selection from the text in the input, so the two always
   // agree. Returns null when the text does not match and custom values are
@@ -304,6 +307,13 @@ const Combobox = ({
   }
 
   const downshift = useCombobox<ComboboxItem>({
+    // reset() goes back to the current default selection and its text, as a
+    // native field goes back to its current default value when its form is
+    // reset. A controlled selection is left to the consumer.
+    ...(!controlled && {
+      defaultInputValue: toString(defaultSelectedItem),
+      defaultSelectedItem,
+    }),
     getItemId: (index) => visibleItems[index]?.id ?? `${uid}_item_${index}`,
     id: uid,
     initialSelectedItem,
@@ -350,7 +360,7 @@ const Combobox = ({
   const selectionText = toString(selection)
   const selectionValue = selection?.value
   const previousSelection = useRef({ text: selectionText, value: selectionValue })
-  const { inputValue, setInputValue } = downshift
+  const { inputValue, reset, setInputValue } = downshift
 
   useEffect(() => {
     const previous = previousSelection.current
@@ -365,12 +375,22 @@ const Combobox = ({
     }
   }, [inputValue, selectionText, selectionValue, setInputValue])
 
+  // When the form is reset, go back to the default selection
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  useFormReset(inputRef, () => {
+    if (controlled) return
+    reset()
+    setFilterText("")
+  })
+
   return (
     <ComboboxContext.Provider
       value={{
         disabled,
         downshift,
         error: hasError,
+        inputRef,
         items: visibleItems,
         matchCount: matchingItems.length,
         size,
@@ -407,7 +427,11 @@ const ComboboxInput = ({ error, name, size, ...props }: ComboboxInputProps): JSX
 
   // Pass the props through downshift, so it combines its handlers and ref
   // with those given here
-  const inputProps = combobox.downshift.getInputProps({ ...props, disabled })
+  const inputProps = combobox.downshift.getInputProps({
+    ...props,
+    disabled,
+    ref: mergeRefs(combobox.inputRef, props.ref),
+  })
 
   // The visible input shows the option text, which can be a label, so it has
   // no name. The form submits the selected value from a hidden input

package/src/components/Textarea/Textarea.tsx

@@ -3,14 +3,19 @@
 import type { ChangeEvent, JSX, Ref, TextareaHTMLAttributes } from "react"
 
 import clsx from "clsx"
-import { useState } from "react"
+import mergeRefs from "merge-refs"
+import { useRef, useState } from "react"
 
 import { getDescribedBy, getFieldError, useField } from "@/components/Field/Field.context"
 import { useDebounce } from "@/hooks/useDebounce"
+import { useFormReset } from "@/hooks/useFormReset"
 import { StandardSizes } from "@/types"
 
 const DEBOUNCE_DELAY = 750
 
+const lengthOf = (text: TextareaHTMLAttributes<HTMLTextAreaElement>["value"]): number =>
+  String(text ?? "").length
+
 const charCountMessage = (remaining: number) => {
   return `You have ${Math.abs(remaining).toLocaleString()} ${Math.abs(remaining) === 1 ? "character" : "characters"} ${remaining < 0 ? "too many" : "remaining"}`
 }
@@ -94,19 +99,29 @@ const Textarea = ({
     ...props,
   }
 
-  const [remaining, setRemaining] = useState(maxLength)
+  const internalRef = useRef<HTMLTextAreaElement>(null)
+  const controlled = props.value !== undefined
+  // The length typed, when not controlled, starting from the default value
+  const [typedLength, setTypedLength] = useState(() => lengthOf(props.defaultValue))
+  const length = controlled ? lengthOf(props.value) : typedLength
+  const remaining = maxLength == null ? undefined : maxLength - length
   const debouncedRemaining = useDebounce(remaining, DEBOUNCE_DELAY)
+
+  // The browser resets the textarea to its default value, so reset the count
+  useFormReset(internalRef, () => {
+    if (!controlled) setTypedLength(lengthOf(props.defaultValue))
+  })
   const showCounter =
     !disabled && counter && maxLength && remaining != null && debouncedRemaining != null
 
   const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
     userOnChange?.(e)
-    if (maxLength && e.target) setRemaining(maxLength - e.target.value.length)
+    if (!controlled && e.target) setTypedLength(e.target.value.length)
   }
   // const formItemProps = { "aria-disabled": disabled ? true : undefined }
   return (
     <div className="coop-textarea-wrapper">
-      <textarea {...componentProps} onChange={handleChange} ref={ref} />
+      <textarea {...componentProps} onChange={handleChange} ref={mergeRefs(internalRef, ref)} />
       {showCounter && (
         <>
           <small

package/src/hooks/index.ts

@@ -1,3 +1,4 @@
 export { useDebounce } from "./useDebounce"
+export { useFormReset } from "./useFormReset"
 export { useId } from "./useId"
 export { useSlots } from "./useSlots"

package/src/hooks/useFormReset.ts

@@ -0,0 +1,28 @@
+import { type RefObject, useEffect, useRef } from "react"
+
+type FormControl = HTMLButtonElement | HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
+
+// Call onReset when the form that owns the control is reset, so a component
+// that keeps its own state can go back to its default value, as native fields
+// do. React 19 form actions reset the form after they run. The control's form
+// property also covers a control linked to its form with the form attribute.
+// A reset that has been prevented is ignored, as the fields are not reset then.
+export function useFormReset(ref: RefObject<FormControl | null>, onReset: () => void): void {
+  // Keep the latest callback, so the listener sees the latest props without
+  // being added again
+  const onResetRef = useRef(onReset)
+  useEffect(() => {
+    onResetRef.current = onReset
+  })
+
+  useEffect(() => {
+    const form = ref.current?.form
+    if (!form) return
+
+    const handleReset = (event: Event) => {
+      if (!event.defaultPrevented) onResetRef.current()
+    }
+    form.addEventListener("reset", handleReset)
+    return () => form.removeEventListener("reset", handleReset)
+  }, [ref])
+}

package/src/utils/slots.ts

@@ -1,6 +1,6 @@
 import React, { isValidElement, type ReactElement, type ReactNode } from "react"
 
-import type { LazyComponent, SlotConfig } from "@/types"
+import { type LazyComponent, REACT_LAZY_TYPE, type SlotConfig } from "@/types"
 
 // oxlint-disable-next-line typescript/no-unnecessary-type-parameters
 export function getSlotProp<R = unknown>(slot: React.ReactNode, prop: string): R | undefined {
@@ -10,39 +10,53 @@ export function getSlotProp<R = unknown>(slot: React.ReactNode, prop: string): R
   return undefined
 }
 
+// oxlint-disable-next-line typescript/no-explicit-any
+export function isLazy<T extends React.ComponentType<any>>(
+  type: unknown
+): type is LazyComponent<T> {
+  return (
+    typeof type === "object" &&
+    type !== null &&
+    (type as { $$typeof?: unknown }).$$typeof === REACT_LAZY_TYPE
+  )
+}
+
+// The component for an element type. Lazy types, such as client components
+// rendered from a server component, are resolved once loaded. Undefined while
+// still loading, as _init throws a Promise, or if loading failed.
+const resolveType = (type: unknown): unknown => {
+  if (!isLazy(type)) return type
+
+  try {
+    return type._init(type._payload)
+  } catch {
+    return undefined
+  }
+}
+
+const getSlotConfig = (type: unknown): SlotConfig | undefined => {
+  const resolved = resolveType(type)
+  return typeof resolved === "function" && "slot" in resolved
+    ? (resolved.slot as SlotConfig)
+    : undefined
+}
+
 // Call fn for each direct child that is a slot component
 export const forEachSlot = (
   children: ReactNode,
   fn: (slot: SlotConfig, child: ReactElement) => void
 ): void => {
   Array.from([children].flat()).forEach((child) => {
-    if (isValidElement(child) && typeof child.type === "function" && "slot" in child.type) {
-      fn((child.type as { slot: SlotConfig }).slot, child)
-    }
-  })
-}
+    if (!isValidElement(child)) return
 
-// oxlint-disable-next-line typescript/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
+    const slot = getSlotConfig(child.type)
+    if (slot) fn(slot, child)
+  })
 }
 
 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
-      }
-    }
+    const type = resolveType(child.type)
 
     if (typeof type === "function") {
       if ("slot" in type) return (type.slot as SlotConfig).name