@coopdigital/react 1.25.1 → 1.26.1

package/dist/components/Author/Author.js

@@ -12,7 +12,7 @@ const Author = ({ author = "Co-op team", className, date, datePrefix = "", image
 	};
 	const componentProps = {
 		className: clsx("coop-author", className),
-		"data-size": size?.length ? size : void 0,
+		"data-size": size ?? void 0,
 		...props
 	};
 	return /* @__PURE__ */ jsxs("div", {

package/dist/components/Button/Button.d.ts

@@ -1,3 +1,4 @@
+import { StandardSizes } from "../../types/index.js";
 import React, { ButtonHTMLAttributes, ForwardRefExoticComponent, JSX, Ref } from "react";
 //#region src/components/Button/Button.d.ts
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
@@ -25,7 +26,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   /** Specify a custom React ref for this component. */
   ref?: Ref<HTMLElement>;
   /** Specify the component size. */
-  size?: "sm" | "md" | "lg";
+  size?: StandardSizes;
   /** Specify the component variant. */
   variant?: "solid" | "ghost" | "text";
 }

package/dist/components/Combobox/Combobox.d.ts

@@ -1,3 +1,4 @@
+import { StandardSizes } from "../../types/index.js";
 import { ComboboxItem, ComboboxOption } from "./combobox-utils.js";
 import { TextInputProps } from "../TextInput/TextInput.js";
 import "../TextInput/index.js";
@@ -75,7 +76,7 @@ export interface ComboboxProps extends Omit<HTMLAttributes<HTMLDivElement>, "onC
   /** Specify a custom React ref for this component. */
   ref?: Ref<HTMLDivElement>;
   /** Specify the component size. */
-  size?: "sm" | "md" | "lg";
+  size?: StandardSizes;
 }
 export interface ComboboxControlsProps extends HTMLAttributes<HTMLDivElement> {
   /** Content inside the component.

package/dist/components/Pill/Pill.js

@@ -13,7 +13,7 @@ const Pill = ({ as, children, className, href, ref, size, ...props }) => {
 	const slots = useSlots(componentSlots, children);
 	const componentProps = {
 		className: clsx("coop-pill", !hasUserBg(className) && "bg-tint-grey", className),
-		"data-size": size?.length ? size : void 0,
+		"data-size": size ?? void 0,
 		href,
 		...props
 	};

package/dist/components/Section/Section.d.ts

@@ -6,11 +6,11 @@ export interface SectionProps extends HTMLAttributes<HTMLDivElement> {
    * Default: `<section>`
    */
   as?: React.FC<any> | string;
-  /** **(Optional)** Content inside the component. */
+  /** Content inside the component. */
   children?: ReactNode;
-  /** **(Optional)** Specify additional CSS classes. */
+  /** Specify additional CSS classes. */
   className?: string;
-  /** **(Optional)** Specify a custom React ref for this component. */
+  /** Specify a custom React ref for this component. */
   ref?: Ref<HTMLDivElement>;
 }
 export declare const Section: ({ as, children, className, ref, ...props }: SectionProps) => JSX.Element;

package/dist/components/Tag/Tag.js

@@ -6,7 +6,7 @@ const Tag = ({ as, children, className, href, ref, size, ...props }) => {
 	const element = as ?? (href ? "a" : "span");
 	const componentProps = {
 		className: clsx("coop-tag", !hasUserBg(className) && "bg-tint-grey", className),
-		"data-size": size?.length ? size : void 0,
+		"data-size": size ?? void 0,
 		href,
 		...props
 	};

package/dist/components/TextInput/TextInput.js

@@ -9,7 +9,7 @@ const TextInput = ({ className, disabled, error = false, fit = false, id, name,
 		className: clsx("coop-text-input", className),
 		"data-error": error || void 0,
 		"data-fit": fit || void 0,
-		"data-size": size?.length ? size : void 0,
+		"data-size": size ?? void 0,
 		disabled,
 		id: id ?? field?.id,
 		name,

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/dist/components/Wrapper/Wrapper.d.ts

@@ -6,11 +6,11 @@ export interface WrapperProps extends HTMLAttributes<HTMLDivElement> {
    * Default: `<div>`
    */
   as?: React.FC<any> | string;
-  /** **(Optional)** Content inside the component. */
+  /** Content inside the component. */
   children?: ReactNode;
-  /** **(Optional)** Specify additional CSS classes. */
+  /** Specify additional CSS classes. */
   className?: string;
-  /** **(Optional)** Specify a custom React ref for this component. */
+  /** Specify a custom React ref for this component. */
   ref?: Ref<HTMLDivElement>;
 }
 export declare const Wrapper: ({ as, children, className, ref, ...props }: WrapperProps) => JSX.Element;

package/package.json

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

package/src/components/Author/Author.tsx

@@ -43,7 +43,7 @@ const Author = ({
 
   const componentProps = {
     className: clsx("coop-author", className),
-    "data-size": size?.length ? size : undefined,
+    "data-size": size ?? undefined,
     ...props,
   }
   return (

package/src/components/Button/Button.tsx

@@ -6,6 +6,7 @@ import clsx from "clsx"
 import React, { useCallback, useState } from "react"
 
 import { LoadingSpinner } from "@/components/LoadingSpinner"
+import { StandardSizes } from "@/types"
 import { hasUserBg } from "@/utils"
 
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
@@ -34,7 +35,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   /** Specify a custom React ref for this component. */
   ref?: Ref<HTMLElement>
   /** Specify the component size. */
-  size?: "sm" | "md" | "lg"
+  size?: StandardSizes
   /** Specify the component variant. */
   variant?: "solid" | "ghost" | "text"
 }

package/src/components/Combobox/Combobox.tsx

@@ -25,6 +25,7 @@ import { useField } from "@/components/Field/Field.context"
 import { ChevronDownIcon } from "@/components/icons"
 import { TextInput, TextInputProps } from "@/components/TextInput"
 import { useSlots } from "@/hooks"
+import { StandardSizes } from "@/types"
 import { getSlotProp } from "@/utils"
 
 export interface ComboboxProps extends Omit<
@@ -101,7 +102,7 @@ export interface ComboboxProps extends Omit<
   /** Specify a custom React ref for this component. */
   ref?: Ref<HTMLDivElement>
   /** Specify the component size. */
-  size?: "sm" | "md" | "lg"
+  size?: StandardSizes
 }
 
 export interface ComboboxControlsProps extends HTMLAttributes<HTMLDivElement> {

package/src/components/Pill/Pill.tsx

@@ -47,7 +47,7 @@ const Pill = ({ as, children, className, href, ref, size, ...props }: PillProps)
 
   const componentProps = {
     className: clsx("coop-pill", !hasUserBg(className) && "bg-tint-grey", className),
-    "data-size": size?.length ? size : undefined,
+    "data-size": size ?? undefined,
     href,
     ...props,
   }

package/src/components/Section/Section.tsx

@@ -10,11 +10,11 @@ export interface SectionProps extends HTMLAttributes<HTMLDivElement> {
    */
   // oxlint-disable-next-line typescript/no-explicit-any
   as?: React.FC<any> | string
-  /** **(Optional)** Content inside the component. */
+  /** Content inside the component. */
   children?: ReactNode
-  /** **(Optional)** Specify additional CSS classes. */
+  /** Specify additional CSS classes. */
   className?: string
-  /** **(Optional)** Specify a custom React ref for this component. */
+  /** Specify a custom React ref for this component. */
   ref?: Ref<HTMLDivElement>
 }
 

package/src/components/Tag/Tag.tsx

@@ -29,7 +29,7 @@ const Tag = ({ as, children, className, href, ref, size, ...props }: TagProps):
 
   const componentProps = {
     className: clsx("coop-tag", !hasUserBg(className) && "bg-tint-grey", className),
-    "data-size": size?.length ? size : undefined,
+    "data-size": size ?? undefined,
     href,
     ...props,
   }

package/src/components/TextInput/TextInput.tsx

@@ -80,7 +80,7 @@ const TextInput = ({
     className: clsx("coop-text-input", className),
     "data-error": error || undefined,
     "data-fit": fit || undefined,
-    "data-size": size?.length ? size : undefined,
+    "data-size": size ?? undefined,
     disabled,
     id: id ?? field?.id,
     name,

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()

package/src/components/Wrapper/Wrapper.tsx

@@ -10,11 +10,11 @@ export interface WrapperProps extends HTMLAttributes<HTMLDivElement> {
    */
   // oxlint-disable-next-line typescript/no-explicit-any
   as?: React.FC<any> | string
-  /** **(Optional)** Content inside the component. */
+  /** Content inside the component. */
   children?: ReactNode
-  /** **(Optional)** Specify additional CSS classes. */
+  /** Specify additional CSS classes. */
   className?: string
-  /** **(Optional)** Specify a custom React ref for this component. */
+  /** Specify a custom React ref for this component. */
   ref?: Ref<HTMLDivElement>
 }