@coopdigital/react 1.30.1 → 1.31.0

package/src/components/Squircle/Squircle.tsx

@@ -73,4 +73,4 @@ Squircle.Text = SquircleText
 Squircle.slot = { name: "Squircle" }
 
 export default Squircle
-export { Squircle }
+export { Squircle, SquircleSvg, SquircleText }

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/components/ValidationSummary/ValidationSummary.context.ts

@@ -1,7 +1,7 @@
 "use client"
 import { createContext, useContext } from "react"
 
-import type { FieldPosition } from "./validationsummary-utils"
+import type { FieldPosition } from "./validationsummary-internal"
 
 interface ValidationSummaryContextValue {
   /** The order of the fields in the form, read when the form is submitted. Empty until the first submit. */

package/src/components/ValidationSummary/ValidationSummary.tsx

@@ -15,7 +15,7 @@ import {
   getForm,
   sanitizeFieldId,
   sortErrorsByFieldOrder,
-} from "@/components/ValidationSummary/validationsummary-utils"
+} from "@/components/ValidationSummary/validationsummary-internal"
 import {
   useValidationSummary,
   ValidationSummaryContext,

package/src/components/ValidationSummary/{validationsummary-utils.ts → validationsummary-internal.ts}

@@ -27,27 +27,28 @@ const getFieldKeys = (field: string, id?: string): string[] => [
 ]
 
 const VISIBLE_CONTROL = 'input:not([type="hidden"]), select, textarea'
+const INVALID_CONTROL = `:is(${VISIBLE_CONTROL})[aria-invalid="true"]`
 
 const isHiddenInput = (el: Element): el is HTMLInputElement =>
   el instanceof HTMLInputElement && el.type === "hidden"
 
-// Components such as Combobox submit their value from a hidden input, which
-// cannot be focused. Find the visible control in the closest wrapper that
-// has one. The search stops before the form, so a hidden input placed
-// directly in the form is not matched to an unrelated field.
+// Components such as Combobox and DateInput submit their value from a hidden
+// input, which cannot be focused. Find the visible control in the closest
+// wrapper that has one, preferring a control marked as invalid, such as the
+// year of a DateInput. The search stops before the form, so a hidden input
+// placed directly in the form is not matched to an unrelated field.
 const getVisibleControl = (form: HTMLFormElement, el: Element): Element => {
   for (let node = el.parentElement; node && node !== form; node = node.parentElement) {
     const control = node.querySelector(VISIBLE_CONTROL)
-    if (control) return control
+    if (control) return node.querySelector(INVALID_CONTROL) ?? control
   }
 
   return el
 }
 
 // Find the field for a validation error. Try each key from getFieldKeys
-// and return immediately if there is a match. For a RadioNodeList,
-// return the first element only. A hidden input is swapped for its visible
-// control.
+// and return if there is a match. For a RadioNodeList, return the first
+// element only. A hidden input is swapped for its visible control.
 export const getFieldElement = (
   form: HTMLFormElement,
   field: string,

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/index.ts

@@ -5,6 +5,7 @@ export * from "./components/Button/Button"
 export * from "./components/Card/Card"
 export * from "./components/Checkbox/Checkbox"
 export * from "./components/Combobox"
+export * from "./components/DateInput"
 export * from "./components/DatePicker/DatePicker"
 export * from "./components/Dialog/Dialog"
 export * from "./components/Expandable/Expandable"

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