@coopdigital/react 1.1.3 → 1.2.0

package/dist/components/DatePicker/DatePicker.js

@@ -41,7 +41,7 @@ const Calendar = ({ captionLayout = "label", className, disabled, endMonth, form
         }, navLayout: "around", showOutsideDays: showOutsideDays, startMonth: startMonth, weekStartsOn: 1, ...props }));
 };
 const DatePicker = ({ className, closeOnSelect = true, dateFormat = "dd/MM/yyyy", disabled, disabledDates, endDate, error = false, id, initialDate = now, initialSelected = false, mode = "single", name, onChange, onSelect, ref, required = false, size = "md", startDate, ...props }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
     const uid = useId(id);
     initialDate = getInitialDate(mode, initialDate);
     const startDateProp = startDate;
@@ -57,8 +57,12 @@ const DatePicker = ({ className, closeOnSelect = true, dateFormat = "dd/MM/yyyy"
         initialValues = (_a = getDateValues(mode, initialDate, dateFormat, now)) !== null && _a !== void 0 ? _a : {};
     }
     const [state, setState] = useReducer((stale, fresh) => ({ ...stale, ...fresh }), { ...initialState, [mode]: initialValues.state, open: false, view: initialValues.view });
+    const dispatchChanges = useCallback((value) => {
+        typeof onChange === "function" && onChange(value);
+        typeof onSelect === "function" && onSelect(value);
+    }, [onChange, onSelect]);
     const updateValues = useCallback((selected) => {
-        var _a;
+        var _a, _b, _c;
         const values = getDateValues(mode, selected, dateFormat, now);
         if (values) {
             setState({
@@ -71,11 +75,13 @@ const DatePicker = ({ className, closeOnSelect = true, dateFormat = "dd/MM/yyyy"
                 }),
             });
             if (values.validated && values.state) {
-                typeof onChange === "function" && onChange(values.state.field);
-                typeof onSelect === "function" && onSelect(values.state.field);
+                dispatchChanges(values.state.field);
+            }
+            else {
+                dispatchChanges((_c = (_b = values.state) === null || _b === void 0 ? void 0 : _b.input) !== null && _c !== void 0 ? _c : undefined);
             }
         }
-    }, [dateFormat, mode, onChange, onSelect, closeOnSelect]);
+    }, [dateFormat, mode, dispatchChanges, closeOnSelect]);
     const updateFromInput = useCallback((e) => {
         var _a;
         if (shouldSkipParsing(e.currentTarget.value)) {
@@ -84,11 +90,12 @@ const DatePicker = ({ className, closeOnSelect = true, dateFormat = "dd/MM/yyyy"
                 [mode]: { input: e.currentTarget.value },
                 validated: false,
             });
+            dispatchChanges(e.currentTarget.value);
         }
         else {
             updateValues((_a = e.currentTarget) === null || _a === void 0 ? void 0 : _a.value);
         }
-    }, [updateValues, mode]);
+    }, [updateValues, mode, dispatchChanges]);
     const setOpen = useCallback((open) => setState({ open }), []);
     const setView = useCallback((view) => setState({ view }), []);
     const resetState = useCallback(() => setState({ ...initialState, [mode]: undefined }), [mode]);
@@ -134,7 +141,7 @@ const DatePicker = ({ className, closeOnSelect = true, dateFormat = "dd/MM/yyyy"
                                 // eslint-disable-next-line jsx-a11y/no-autofocus
                                 autoFocus: true, captionLayout: "dropdown", 
                                 //defaultMonth={defaultMonth}
-                                disabled: disabledDates, endMonth: endDate, month: state.view, onMonthChange: setView, onSelect: updateValues, startMonth: startDate, ...calendarProps[mode] }), jsxs("div", { className: "coop-datepicker-actions", children: [jsxs(Button, { "aria-label": "Cancel", className: "bg-tint-grey", onClick: resetState, size: "sm", children: ["Clear ", jsx(CrossIcon, { stroke: "black", strokeWidth: 1 })] }), jsx(Popover.Close, { asChild: true, children: jsxs(Button, { "aria-label": "Accept", size: "sm", children: ["OK ", jsx(TickIcon, { stroke: "white", strokeWidth: 1 })] }) })] })] })] }), jsx("div", { "aria-live": "assertive", className: "sr-only coop-datepicker-status", role: "status", children: (_g = state.message) !== null && _g !== void 0 ? _g : footerMessage[mode] }), mode === "single" && jsx("input", { ...valueProps, value: (_j = (_h = state.single) === null || _h === void 0 ? void 0 : _h.field) !== null && _j !== void 0 ? _j : "" }), mode === "multiple" && jsx("input", { ...valueProps, value: (_l = (_k = state.multiple) === null || _k === void 0 ? void 0 : _k.field) !== null && _l !== void 0 ? _l : "" }), mode === "range" && (jsxs(Fragment, { children: [jsx("input", { ...baseValueProps, id: `${uid}_start`, name: `${name}_start`, value: (_p = (_o = (_m = state.range) === null || _m === void 0 ? void 0 : _m.field) === null || _o === void 0 ? void 0 : _o.from) !== null && _p !== void 0 ? _p : "" }), jsx("input", { ...baseValueProps, id: `${uid}_end`, name: `${name}_end`, value: (_s = (_r = (_q = state.range) === null || _q === void 0 ? void 0 : _q.field) === null || _r === void 0 ? void 0 : _r.to) !== null && _s !== void 0 ? _s : "" })] }))] }));
+                                disabled: disabledDates, endMonth: endDate, month: state.view, onMonthChange: setView, onSelect: updateValues, startMonth: startDate, ...calendarProps[mode] }), jsxs("div", { className: "coop-datepicker-actions", children: [jsxs(Button, { "aria-label": "Cancel", className: "bg-tint-grey", onClick: resetState, size: "sm", children: ["Clear ", jsx(CrossIcon, { stroke: "black", strokeWidth: 1 })] }), jsx(Popover.Close, { asChild: true, children: jsxs(Button, { "aria-label": "Accept", size: "sm", children: ["OK ", jsx(TickIcon, { stroke: "white", strokeWidth: 1 })] }) })] })] })] }), jsx("div", { "aria-live": "assertive", className: "sr-only coop-datepicker-status", role: "status", children: (_g = state.message) !== null && _g !== void 0 ? _g : footerMessage[mode] }), mode === "single" && (jsx("input", { ...valueProps, value: (_l = (_j = (_h = state.single) === null || _h === void 0 ? void 0 : _h.field) !== null && _j !== void 0 ? _j : (_k = state.single) === null || _k === void 0 ? void 0 : _k.input) !== null && _l !== void 0 ? _l : "" })), mode === "multiple" && (jsx("input", { ...valueProps, value: (_q = (_o = (_m = state.multiple) === null || _m === void 0 ? void 0 : _m.field) !== null && _o !== void 0 ? _o : (_p = state.multiple) === null || _p === void 0 ? void 0 : _p.input) !== null && _q !== void 0 ? _q : "" })), mode === "range" && (jsxs(Fragment, { children: [jsx("input", { ...baseValueProps, id: `${uid}_start`, name: `${name}_start`, value: (_v = (_t = (_s = (_r = state.range) === null || _r === void 0 ? void 0 : _r.field) === null || _s === void 0 ? void 0 : _s.from) !== null && _t !== void 0 ? _t : (_u = state.range) === null || _u === void 0 ? void 0 : _u.input) !== null && _v !== void 0 ? _v : "" }), jsx("input", { ...baseValueProps, id: `${uid}_end`, name: `${name}_end`, value: (_0 = (_y = (_x = (_w = state.range) === null || _w === void 0 ? void 0 : _w.field) === null || _x === void 0 ? void 0 : _x.to) !== null && _y !== void 0 ? _y : (_z = state.range) === null || _z === void 0 ? void 0 : _z.input) !== null && _0 !== void 0 ? _0 : "" })] }))] }));
 };
 DatePicker.config = componentConfig;
 

package/dist/components/DatePicker/datepicker-utils.d.ts

@@ -1,5 +1,5 @@
 import { Mode } from "react-day-picker";
-interface DateRangeStr {
+export interface DateRangeStr {
     from?: string;
     to?: string;
 }

package/dist/components/Searchbox/Searchbox.js

@@ -57,6 +57,7 @@ const Searchbox = ({ action, children, className, id, label, labelVisible = fals
         autoCapitalize: "off",
         id: uid,
         size,
+        type: "search",
     });
     const labelProps = {
         htmlFor: uid,

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

@@ -0,0 +1,64 @@
+import type { HTMLAttributes, JSX, ReactNode, Ref } from "react";
+import React from "react";
+export interface ValidationSummaryProps extends HTMLAttributes<HTMLDivElement> {
+    /** **(Optional)** Specify if the summary should be focused and the parent form scrolled into view if there are errors. */
+    autoScroll?: boolean;
+    /** **(Optional)** This should be a set of `ValidationSummary.Heading`, `ValidationSummary.Prompt` and `ValidationSummary.Errors` components. */
+    children?: ReactNode;
+    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+    className?: string;
+    /** **(Optional)** Specify a custom React ref for this component. */
+    ref?: Ref<HTMLDivElement>;
+}
+interface ValidationSummaryHeadingProps extends HTMLAttributes<HTMLDivElement> {
+    /** **(Optional)** Specify a custom element to use instead of `h2`. */
+    as?: "h2" | "h3" | "h4" | "h5" | "h6";
+    /** **(Optional)** Content inside the Heading.
+     *
+     * Defaults to `There's a problem`.
+     */
+    children?: React.ReactNode;
+    /** **(Optional)** Specify additional CSS classes to be applied to the Heading. */
+    className?: string;
+}
+interface ValidationSummaryPromptProps extends HTMLAttributes<HTMLDivElement> {
+    /** **(Optional)** Content inside the Prompt.
+     *
+     * Defaults to `Check the form. You must:`.
+     */
+    children?: React.ReactNode;
+}
+interface FieldError {
+    message?: string | number;
+    ref?: {
+        focus?: () => void;
+        id?: string;
+    };
+    type?: string | number;
+}
+interface ValidationSummaryErrorsProps extends HTMLAttributes<HTMLDivElement> {
+    /** **(Optional)** Content inside the Errors. */
+    errors?: Record<string, FieldError>;
+}
+export declare const ValidationSummary: {
+    ({ autoScroll, children, className, ref, ...props }: ValidationSummaryProps): JSX.Element | null;
+    Heading: {
+        ({ as, children, className, }: ValidationSummaryHeadingProps): JSX.Element;
+        config: {
+            name: string;
+        };
+    };
+    Prompt: {
+        ({ children, }: ValidationSummaryPromptProps): JSX.Element;
+        config: {
+            name: string;
+        };
+    };
+    Errors: {
+        ({ errors }: ValidationSummaryErrorsProps): JSX.Element | null;
+        config: {
+            name: string;
+        };
+    };
+};
+export default ValidationSummary;

package/dist/components/ValidationSummary/ValidationSummary.js

@@ -0,0 +1,77 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import mergeRefs from '../../node_modules/merge-refs/dist/index.js';
+import React, { useRef, useEffect } from 'react';
+import { useSlots } from '../../hooks/useSlots.js';
+import { sanitizeFieldId, getFieldElement } from './validationsummary-utils.js';
+
+/* eslint-disable jsx-a11y/anchor-is-valid */
+const componentSlots = {
+    Children: null,
+    ValidationSummaryErrors: null,
+    ValidationSummaryHeading: null,
+    ValidationSummaryPrompt: null,
+};
+const ValidationSummary = ({ autoScroll = true, children, className, ref, ...props }) => {
+    var _a;
+    const slots = { ...useSlots(componentSlots, children) };
+    const errors = React.isValidElement(slots.ValidationSummaryErrors) &&
+        Object.keys((_a = slots.ValidationSummaryErrors.props.errors) !== null && _a !== void 0 ? _a : {});
+    const hasErrors = !!(Object.keys(errors).length > 0);
+    const internalRef = useRef(null);
+    useEffect(() => {
+        var _a, _b;
+        if (hasErrors && autoScroll) {
+            const form = (_a = internalRef.current) === null || _a === void 0 ? void 0 : _a.closest("form");
+            if (typeof (form === null || form === void 0 ? void 0 : form.scrollIntoView) === "function")
+                form.scrollIntoView({ behavior: "smooth" });
+            (_b = internalRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+    }, [autoScroll, errors, hasErrors]);
+    if (!hasErrors) {
+        return null;
+    }
+    const componentProps = {
+        className: clsx("coop-validation-summary ", className),
+        ...props,
+    };
+    return (jsxs("div", { ...componentProps, "aria-live": "assertive", ref: mergeRefs(internalRef, ref), role: "alert", tabIndex: -1, children: [slots.ValidationSummaryHeading, slots.ValidationSummaryPrompt, slots.ValidationSummaryErrors, slots.Children] }));
+};
+const ValidationSummaryHeading = ({ as = "h2", children = "There's a problem", className, }) => {
+    return React.createElement(as, { className: clsx("coop-validation-summary--heading", className) }, children);
+};
+const ValidationSummaryPrompt = ({ children = "Check the form. You must:", }) => {
+    return jsx(Fragment, { children: children });
+};
+const focusable = ["INPUT", "TEXTAREA", "SELECT"];
+const ValidationSummaryErrors = ({ errors }) => {
+    var _a;
+    const errorsArray = (_a = (errors && Object.entries(errors))) !== null && _a !== void 0 ? _a : [];
+    return errorsArray.length ? (jsx("div", { className: "coop-validation-summary--errors", children: jsx("ul", { children: errorsArray.map(([field, error]) => {
+                var _a;
+                const id = ((_a = error.ref) === null || _a === void 0 ? void 0 : _a.id) ? sanitizeFieldId(error.ref.id) : undefined;
+                return (jsx("li", { children: jsx("a", { href: "#", onClick: (e) => {
+                            var _a;
+                            e.preventDefault();
+                            const el = getFieldElement(field, id);
+                            if (el) {
+                                if (typeof el.scrollIntoView === "function")
+                                    el.scrollIntoView();
+                                if (focusable.includes(el.nodeName)) {
+                                    el.focus();
+                                }
+                                else {
+                                    (_a = el.querySelector("input")) === null || _a === void 0 ? void 0 : _a.focus();
+                                }
+                            }
+                        }, children: error.message }) }, field));
+            }) }) })) : null;
+};
+ValidationSummaryHeading.config = { name: "ValidationSummaryHeading" };
+ValidationSummaryPrompt.config = { name: "ValidationSummaryPrompt" };
+ValidationSummaryErrors.config = { name: "ValidationSummaryErrors" };
+ValidationSummary.Heading = ValidationSummaryHeading;
+ValidationSummary.Prompt = ValidationSummaryPrompt;
+ValidationSummary.Errors = ValidationSummaryErrors;
+
+export { ValidationSummary, ValidationSummary as default };

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

@@ -0,0 +1,4 @@
+import ValidationSummary from "./ValidationSummary";
+export default ValidationSummary;
+export { ValidationSummary };
+export * from "./ValidationSummary";

package/dist/components/ValidationSummary/validationsummary-utils.d.ts

@@ -0,0 +1,2 @@
+export declare const sanitizeFieldId: (id: string) => string;
+export declare const getFieldElement: (field: string, id?: string) => HTMLInputElement | null;

package/dist/components/ValidationSummary/validationsummary-utils.js

@@ -0,0 +1,13 @@
+const sanitizeFieldId = (id) => ((id === null || id === void 0 ? void 0 : id.startsWith("#")) ? id.slice(1) : id);
+const getFieldElement = (field, id) => {
+    var _a, _b, _c;
+    if (id) {
+        const safeId = sanitizeFieldId(id);
+        return ((_a = document.querySelector(`#${safeId}`)) !== null && _a !== void 0 ? _a : document.querySelector(`[name=${safeId}]`));
+    }
+    else {
+        return ((_c = (_b = document.querySelector(`[name=${field}_display]`)) !== null && _b !== void 0 ? _b : document.querySelector(`#${field}`)) !== null && _c !== void 0 ? _c : document.querySelector(`[name=${field}]`));
+    }
+};
+
+export { getFieldElement, sanitizeFieldId };

package/dist/index.d.ts

@@ -22,3 +22,4 @@ export * from "./components/Squircle";
 export * from "./components/Tag";
 export * from "./components/Textarea";
 export * from "./components/TextInput";
+export * from "./components/ValidationSummary";

package/dist/index.js

@@ -22,3 +22,4 @@ export { Squircle } from './components/Squircle/Squircle.js';
 export { Tag } from './components/Tag/Tag.js';
 export { Textarea } from './components/Textarea/Textarea.js';
 export { TextInput } from './components/TextInput/TextInput.js';
+export { ValidationSummary } from './components/ValidationSummary/ValidationSummary.js';

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

@@ -0,0 +1,36 @@
+/**
+ * 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 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "1.1.3",
+  "version": "1.2.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -84,10 +84,11 @@
     "storybook": "$storybook"
   },
   "dependencies": {
-    "@coopdigital/styles": "^1.1.2",
+    "@coopdigital/styles": "^1.2.0",
     "@radix-ui/react-popover": "^1.1.15",
     "clsx": "^2.1.1",
+    "merge-refs": "^2.0.0",
     "react-day-picker": "^9.12.0"
   },
-  "gitHead": "fd986750a8a2cbc8d0540f7d6d4345984eb8ce85"
+  "gitHead": "ac480f6925495d9a458a410398dfdd6fcbf289d7"
 }

package/src/components/DatePicker/DatePicker.tsx

@@ -16,6 +16,7 @@ import { DayPicker } from "react-day-picker"
 import type { ComponentConfig, StandardSizes } from "../../types"
 import type {
   DateRange,
+  DateRangeStr,
   DateType,
   TDateMultiple,
   TDateRange,
@@ -211,6 +212,14 @@ export const DatePicker = ({
     { ...initialState, [mode]: initialValues.state, open: false, view: initialValues.view }
   )
 
+  const dispatchChanges = useCallback(
+    (value: string | DateRangeStr | undefined) => {
+      typeof onChange === "function" && onChange(value)
+      typeof onSelect === "function" && onSelect(value)
+    },
+    [onChange, onSelect]
+  )
+
   const updateValues = useCallback(
     (selected: DateType) => {
       const values = getDateValues(mode, selected, dateFormat, now)
@@ -227,12 +236,13 @@ export const DatePicker = ({
         })
 
         if (values.validated && values.state) {
-          typeof onChange === "function" && onChange(values.state.field)
-          typeof onSelect === "function" && onSelect(values.state.field)
+          dispatchChanges(values.state.field)
+        } else {
+          dispatchChanges(values.state?.input ?? undefined)
         }
       }
     },
-    [dateFormat, mode, onChange, onSelect, closeOnSelect]
+    [dateFormat, mode, dispatchChanges, closeOnSelect]
   )
 
   const updateFromInput = useCallback(
@@ -243,11 +253,12 @@ export const DatePicker = ({
           [mode]: { input: e.currentTarget.value },
           validated: false,
         })
+        dispatchChanges(e.currentTarget.value)
       } else {
         updateValues(e.currentTarget?.value)
       }
     },
-    [updateValues, mode]
+    [updateValues, mode, dispatchChanges]
   )
 
   const setOpen = useCallback((open: boolean) => setState({ open }), [])
@@ -360,21 +371,25 @@ export const DatePicker = ({
         {state.message ?? footerMessage[mode]}
       </div>
 
-      {mode === "single" && <input {...valueProps} value={state.single?.field ?? ""} />}
-      {mode === "multiple" && <input {...valueProps} value={state.multiple?.field ?? ""} />}
+      {mode === "single" && (
+        <input {...valueProps} value={state.single?.field ?? state.single?.input ?? ""} />
+      )}
+      {mode === "multiple" && (
+        <input {...valueProps} value={state.multiple?.field ?? state.multiple?.input ?? ""} />
+      )}
       {mode === "range" && (
         <>
           <input
             {...baseValueProps}
             id={`${uid}_start`}
             name={`${name}_start`}
-            value={state.range?.field?.from ?? ""}
+            value={state.range?.field?.from ?? state.range?.input ?? ""}
           />
           <input
             {...baseValueProps}
             id={`${uid}_end`}
             name={`${name}_end`}
-            value={state.range?.field?.to ?? ""}
+            value={state.range?.field?.to ?? state.range?.input ?? ""}
           />
         </>
       )}

package/src/components/DatePicker/datepicker-utils.ts

@@ -1,7 +1,7 @@
 import { addYears, format, isBefore, isValid, parse } from "date-fns"
 import { Mode } from "react-day-picker"
 
-interface DateRangeStr {
+export interface DateRangeStr {
   from?: string
   to?: string
 }

package/src/components/Searchbox/Searchbox.tsx

@@ -116,6 +116,7 @@ export const Searchbox = ({
       autoCapitalize: "off",
       id: uid,
       size,
+      type: "search",
     }
   )
 

package/src/components/ValidationSummary/ValidationSummary.tsx

@@ -0,0 +1,180 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+"use client"
+
+import type { HTMLAttributes, JSX, ReactNode, Ref } from "react"
+
+import clsx from "clsx"
+import mergeRefs from "merge-refs"
+import React, { useEffect, useRef } from "react"
+
+import { useSlots } from "../../hooks/useSlots"
+import { getFieldElement, sanitizeFieldId } from "./validationsummary-utils"
+
+export interface ValidationSummaryProps extends HTMLAttributes<HTMLDivElement> {
+  /** **(Optional)** Specify if the summary should be focused and the parent form scrolled into view if there are errors. */
+  autoScroll?: boolean
+  /** **(Optional)** This should be a set of `ValidationSummary.Heading`, `ValidationSummary.Prompt` and `ValidationSummary.Errors` components. */
+  children?: ReactNode
+  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  className?: string
+  /** **(Optional)** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLDivElement>
+}
+
+interface ValidationSummaryHeadingProps extends HTMLAttributes<HTMLDivElement> {
+  /** **(Optional)** Specify a custom element to use instead of `h2`. */
+  as?: "h2" | "h3" | "h4" | "h5" | "h6"
+  /** **(Optional)** Content inside the Heading.
+   *
+   * Defaults to `There's a problem`.
+   */
+  children?: React.ReactNode
+  /** **(Optional)** Specify additional CSS classes to be applied to the Heading. */
+  className?: string
+}
+
+interface ValidationSummaryPromptProps extends HTMLAttributes<HTMLDivElement> {
+  /** **(Optional)** Content inside the Prompt.
+   *
+   * Defaults to `Check the form. You must:`.
+   */
+  children?: React.ReactNode
+}
+
+interface FieldError {
+  message?: string | number
+  ref?: {
+    focus?: () => void
+    id?: string
+  }
+  type?: string | number
+}
+
+interface ValidationSummaryErrorsProps extends HTMLAttributes<HTMLDivElement> {
+  /** **(Optional)** Content inside the Errors. */
+  errors?: Record<string, FieldError>
+}
+
+const componentSlots = {
+  Children: null,
+  ValidationSummaryErrors: null,
+  ValidationSummaryHeading: null,
+  ValidationSummaryPrompt: null,
+}
+
+export const ValidationSummary = ({
+  autoScroll = true,
+  children,
+  className,
+  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 hasErrors = !!(Object.keys(errors).length > 0)
+
+  const internalRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (hasErrors && autoScroll) {
+      const form = internalRef.current?.closest("form")
+      if (typeof form?.scrollIntoView === "function") form.scrollIntoView({ behavior: "smooth" })
+      internalRef.current?.focus()
+    }
+  }, [autoScroll, errors, hasErrors])
+
+  if (!hasErrors) {
+    return null
+  }
+
+  const componentProps = {
+    className: clsx("coop-validation-summary ", className),
+    ...props,
+  }
+
+  return (
+    <div
+      {...componentProps}
+      aria-live="assertive"
+      ref={mergeRefs(internalRef, ref)}
+      role="alert"
+      tabIndex={-1}
+    >
+      {slots.ValidationSummaryHeading}
+      {slots.ValidationSummaryPrompt}
+      {slots.ValidationSummaryErrors}
+      {slots.Children}
+    </div>
+  )
+}
+
+const ValidationSummaryHeading = ({
+  as = "h2",
+  children = "There's a problem",
+  className,
+}: ValidationSummaryHeadingProps): JSX.Element => {
+  return React.createElement(
+    as,
+    { className: clsx("coop-validation-summary--heading", className) },
+    children
+  )
+}
+
+const ValidationSummaryPrompt = ({
+  children = "Check the form. You must:",
+}: ValidationSummaryPromptProps): JSX.Element => {
+  return <>{children}</>
+}
+
+const focusable = ["INPUT", "TEXTAREA", "SELECT"]
+
+const ValidationSummaryErrors = ({ errors }: ValidationSummaryErrorsProps): JSX.Element | null => {
+  const errorsArray = (errors && Object.entries(errors)) ?? []
+
+  return errorsArray.length ? (
+    <div className="coop-validation-summary--errors">
+      <ul>
+        {errorsArray.map(([field, error]) => {
+          const id: string | undefined = error.ref?.id ? sanitizeFieldId(error.ref.id) : undefined
+
+          return (
+            <li key={field}>
+              <a
+                href="#"
+                onClick={(e) => {
+                  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()
+                    }
+                  }
+                }}
+              >
+                {error.message}
+              </a>
+            </li>
+          )
+        })}
+      </ul>
+    </div>
+  ) : null
+}
+
+ValidationSummaryHeading.config = { name: "ValidationSummaryHeading" }
+ValidationSummaryPrompt.config = { name: "ValidationSummaryPrompt" }
+ValidationSummaryErrors.config = { name: "ValidationSummaryErrors" }
+
+ValidationSummary.Heading = ValidationSummaryHeading
+ValidationSummary.Prompt = ValidationSummaryPrompt
+ValidationSummary.Errors = ValidationSummaryErrors
+
+export default ValidationSummary

package/src/components/ValidationSummary/index.ts

@@ -0,0 +1,5 @@
+import ValidationSummary from "./ValidationSummary"
+
+export default ValidationSummary
+export { ValidationSummary }
+export * from "./ValidationSummary"

package/src/components/ValidationSummary/validationsummary-utils.ts

@@ -0,0 +1,17 @@
+export const sanitizeFieldId = (id: string): string => (id?.startsWith("#") ? id.slice(1) : id)
+
+export const getFieldElement = (field: string, id?: string) => {
+  if (id) {
+    const safeId = sanitizeFieldId(id)
+    return (
+      document.querySelector<HTMLInputElement>(`#${safeId}`) ??
+      document.querySelector<HTMLInputElement>(`[name=${safeId}]`)
+    )
+  } else {
+    return (
+      document.querySelector<HTMLInputElement>(`[name=${field}_display]`) ??
+      document.querySelector<HTMLInputElement>(`#${field}`) ??
+      document.querySelector<HTMLInputElement>(`[name=${field}]`)
+    )
+  }
+}

package/src/index.ts

@@ -22,3 +22,4 @@ export * from "./components/Squircle"
 export * from "./components/Tag"
 export * from "./components/Textarea"
 export * from "./components/TextInput"
+export * from "./components/ValidationSummary"