@coopdigital/react 1.25.1 → 1.26.0

package/dist/components/ValidationSummary/ValidationSummary.d.ts

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes, JSX, ReactNode, Ref } from "react";
+import React, { HTMLAttributes, JSX, ReactNode, Ref, RefObject } from "react";
 //#region src/components/ValidationSummary/ValidationSummary.d.ts
 export interface ValidationSummaryProps extends HTMLAttributes<HTMLDivElement> {
   /** Specify if the summary should be focused and the parent form scrolled into view if there are errors.
@@ -17,6 +17,11 @@ export interface ValidationSummaryProps extends HTMLAttributes<HTMLDivElement> {
    * Default: `false`
    */
   forceMount?: boolean;
+  /** Specify a React ref for the form this summary is associated with.
+   *
+   * You don't need to set this if you render the summary inside a form.
+   */
+  formRef?: RefObject<HTMLFormElement | null>;
   /** Specify a custom React ref for this component. */
   ref?: Ref<HTMLDivElement>;
 }
@@ -54,7 +59,7 @@ interface ValidationSummaryErrorsProps extends HTMLAttributes<HTMLDivElement> {
   errors?: Record<string, FieldError>;
 }
 declare const ValidationSummary: {
-  ({ autoScroll, children, className, forceMount, ref, ...props }: ValidationSummaryProps): JSX.Element | null;
+  ({ autoScroll, children, className, forceMount, formRef, ref, ...props }: ValidationSummaryProps): JSX.Element | null;
   slot: {
     name: string;
   };

package/dist/components/ValidationSummary/ValidationSummary.js

@@ -1,9 +1,10 @@
 "use client";
+import { getSlotProp } from "../../utils/index.js";
 import { useSlots } from "../../hooks/useSlots.js";
 import { getFieldElement, sanitizeFieldId } from "./validationsummary-utils.js";
 import clsx from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import React, { useEffect, useRef } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import mergeRefs from "merge-refs";
 //#region src/components/ValidationSummary/ValidationSummary.tsx
 const componentSlots = {
@@ -12,27 +13,39 @@ const componentSlots = {
 	ValidationSummaryHeading: null,
 	ValidationSummaryPrompt: null
 };
-const ValidationSummary = ({ autoScroll = true, children, className, forceMount = false, ref, ...props }) => {
-	const slots = { ...useSlots(componentSlots, children) };
-	const errors = React.isValidElement(slots.ValidationSummaryErrors) && Object.keys(slots.ValidationSummaryErrors.props.errors ?? {});
-	const hasErrors = Object.keys(errors).length > 0;
+const ValidationSummary = ({ autoScroll = true, children, className, forceMount = false, formRef, ref, ...props }) => {
+	const [stamp, setStamp] = useState(0);
+	const slots = useSlots(componentSlots, children);
+	const errors = Object.keys(getSlotProp(slots.ValidationSummaryErrors, "errors") ?? {});
+	const hasErrors = errors && errors.length > 0;
 	const internalRef = useRef(null);
+	const onSubmit = useCallback(() => {
+		setStamp(Date.now());
+	}, []);
 	useEffect(() => {
-		if (hasErrors && autoScroll) {
-			const form = internalRef.current?.closest("form");
+		const form = formRef?.current ?? internalRef.current?.closest("form");
+		form?.addEventListener("submit", onSubmit);
+		if (form && hasErrors && autoScroll) {
 			if (typeof form?.scrollIntoView === "function") form.scrollIntoView({ behavior: "smooth" });
-			internalRef.current?.focus();
+			internalRef?.current?.focus({ preventScroll: true });
 		}
+		return () => form?.removeEventListener("submit", onSubmit);
 	}, [
 		autoScroll,
-		errors,
-		hasErrors
+		formRef,
+		hasErrors,
+		stamp,
+		onSubmit
 	]);
-	if (!hasErrors && !forceMount) return null;
 	const componentProps = {
 		className: clsx("coop-validation-summary", className),
 		...props
 	};
+	if (!hasErrors && !forceMount) return /* @__PURE__ */ jsx("div", {
+		hidden: true,
+		inert: true,
+		ref: mergeRefs(internalRef, ref)
+	});
 	return /* @__PURE__ */ jsxs("div", {
 		...componentProps,
 		"aria-live": "assertive",
@@ -70,7 +83,6 @@ const ValidationSummaryErrors = ({ errors }) => {
 					e.preventDefault();
 					const el = getFieldElement(field, id);
 					if (el) {
-						if (typeof el.scrollIntoView === "function") el.scrollIntoView();
 						if (focusable.includes(el.nodeName)) el.focus();
 						else el.querySelector("input")?.focus();
 					}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "1.25.1",
+  "version": "1.26.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -116,5 +116,5 @@
     "merge-refs": "^2.0.0",
     "react-day-picker": "^10.0.1"
   },
-  "gitHead": "cd6a31d17eff8e2b96dfba2eee5363c0d96aa80c"
+  "gitHead": "3835a0b5cd0562f01905240d8df20d4b042323db"
 }

package/src/components/ValidationSummary/ValidationSummary.tsx

@@ -1,17 +1,18 @@
 "use client"
 /* oxlint-disable jsx-a11y/anchor-is-valid */
 
-import type { HTMLAttributes, JSX, ReactNode, Ref } from "react"
+import type { HTMLAttributes, JSX, ReactNode, Ref, RefObject } from "react"
 
 import clsx from "clsx"
 import mergeRefs from "merge-refs"
-import React, { useEffect, useRef } from "react"
+import React, { useCallback, useEffect, useRef, useState } from "react"
 
 import {
   getFieldElement,
   sanitizeFieldId,
 } from "@/components/ValidationSummary/validationsummary-utils"
 import { useSlots } from "@/hooks/useSlots"
+import { getSlotProp } from "@/utils"
 
 export interface ValidationSummaryProps extends HTMLAttributes<HTMLDivElement> {
   /** Specify if the summary should be focused and the parent form scrolled into view if there are errors.
@@ -30,6 +31,11 @@ export interface ValidationSummaryProps extends HTMLAttributes<HTMLDivElement> {
    * Default: `false`
    */
   forceMount?: boolean
+  /** Specify a React ref for the form this summary is associated with.
+   *
+   * You don't need to set this if you render the summary inside a form.
+   */
+  formRef?: RefObject<HTMLFormElement | null>
   /** Specify a custom React ref for this component. */
   ref?: Ref<HTMLDivElement>
 }
@@ -83,36 +89,43 @@ const ValidationSummary = ({
   children,
   className,
   forceMount = false,
+  formRef,
   ref,
   ...props
 }: ValidationSummaryProps): JSX.Element | null => {
-  const slots = { ...useSlots(componentSlots, children) }
-
-  const errors =
-    React.isValidElement(slots.ValidationSummaryErrors) &&
-    Object.keys((slots.ValidationSummaryErrors.props as ValidationSummaryErrorsProps).errors ?? {})
+  const [stamp, setStamp] = useState(0)
+  const slots = useSlots(componentSlots, children)
 
-  const hasErrors = Object.keys(errors).length > 0
+  const errors = Object.keys(getSlotProp<FieldError>(slots.ValidationSummaryErrors, "errors") ?? {})
 
+  const hasErrors = errors && errors.length > 0
   const internalRef = useRef<HTMLDivElement>(null)
 
+  const onSubmit = useCallback(() => {
+    setStamp(Date.now())
+  }, [])
+
   useEffect(() => {
-    if (hasErrors && autoScroll) {
-      const form = internalRef.current?.closest("form")
-      if (typeof form?.scrollIntoView === "function") form.scrollIntoView({ behavior: "smooth" })
-      internalRef.current?.focus()
+    const form = formRef?.current ?? internalRef.current?.closest("form")
+    form?.addEventListener("submit", onSubmit)
+    if (form && hasErrors && autoScroll) {
+      if (typeof form?.scrollIntoView === "function") {
+        form.scrollIntoView({ behavior: "smooth" })
+      }
+      internalRef?.current?.focus({ preventScroll: true })
     }
-  }, [autoScroll, errors, hasErrors])
-
-  if (!hasErrors && !forceMount) {
-    return null
-  }
+    return () => form?.removeEventListener("submit", onSubmit)
+  }, [autoScroll, formRef, hasErrors, stamp, onSubmit])
 
   const componentProps = {
     className: clsx("coop-validation-summary", className),
     ...props,
   }
 
+  if (!hasErrors && !forceMount) {
+    return <div hidden inert ref={mergeRefs(internalRef, ref)} />
+  }
+
   return (
     <div
       {...componentProps}
@@ -154,7 +167,7 @@ const ValidationSummaryErrors = ({ errors }: ValidationSummaryErrorsProps): JSX.
     <div className="coop-validation-summary--errors">
       <ul>
         {errorsArray.map(([field, error]) => {
-          const id: string | undefined = error.ref?.id ? sanitizeFieldId(error.ref.id) : undefined
+          const id = error.ref?.id ? sanitizeFieldId(error.ref.id) : undefined
 
           return (
             <li key={field}>
@@ -164,7 +177,7 @@ const ValidationSummaryErrors = ({ errors }: ValidationSummaryErrorsProps): JSX.
                   e.preventDefault()
                   const el = getFieldElement(field, id)
                   if (el) {
-                    if (typeof el.scrollIntoView === "function") el.scrollIntoView()
+                    // if (typeof el.scrollIntoView === "function") el.scrollIntoView()
 
                     if (focusable.includes(el.nodeName)) {
                       el.focus()