@coopdigital/react 1.27.1 → 1.28.0

package/dist/components/ValidationSummary/ValidationSummary.context.js

@@ -0,0 +1,10 @@
+"use client";
+import { createContext, useContext } from "react";
+//#region src/components/ValidationSummary/ValidationSummary.context.ts
+const ValidationSummaryContext = createContext({
+	fieldOrder: [],
+	getForm: () => null
+});
+const useValidationSummary = () => useContext(ValidationSummaryContext);
+//#endregion
+export { ValidationSummaryContext, useValidationSummary };

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

@@ -1,3 +1,4 @@
+import { FieldError } from "./validationsummary-utils.js";
 import React, { HTMLAttributes, JSX, ReactNode, Ref, RefObject } from "react";
 //#region src/components/ValidationSummary/ValidationSummary.d.ts
 export interface ValidationSummaryProps extends HTMLAttributes<HTMLDivElement> {
@@ -46,14 +47,6 @@ interface ValidationSummaryPromptProps extends HTMLAttributes<HTMLDivElement> {
    */
   children?: React.ReactNode;
 }
-interface FieldError {
-  message?: string | number;
-  ref?: {
-    focus?: () => void;
-    id?: string;
-  };
-  type?: string | number;
-}
 interface ValidationSummaryErrorsProps extends HTMLAttributes<HTMLDivElement> {
   /** Specify the validation error array. Refer to the FieldError type for the shape.. */
   errors?: Record<string, FieldError>;

package/dist/components/ValidationSummary/ValidationSummary.js

@@ -1,10 +1,11 @@
 "use client";
-import { getSlotProp } from "../../utils/index.js";
+import { getSlotProp } from "../../utils/slots.js";
 import { useSlots } from "../../hooks/useSlots.js";
-import { getFieldElement, sanitizeFieldId } from "./validationsummary-utils.js";
+import { getFieldElement, getFieldOrder, getForm, sanitizeFieldId, sortErrorsByFieldOrder } from "./validationsummary-utils.js";
+import { ValidationSummaryContext, useValidationSummary } from "./ValidationSummary.context.js";
 import clsx from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import mergeRefs from "merge-refs";
 //#region src/components/ValidationSummary/ValidationSummary.tsx
 const componentSlots = {
@@ -19,11 +20,18 @@ const ValidationSummary = ({ autoScroll = true, children, className, forceMount
 	const errors = Object.keys(getSlotProp(slots.ValidationSummaryErrors, "errors") ?? {});
 	const hasErrors = errors && errors.length > 0;
 	const internalRef = useRef(null);
+	const [fieldOrder, setFieldOrder] = useState([]);
 	const onSubmit = useCallback(() => {
+		const form = getForm(formRef, internalRef);
+		if (form) setFieldOrder(getFieldOrder(form));
 		setStamp(Date.now());
-	}, []);
+	}, [formRef]);
+	const context = useMemo(() => ({
+		fieldOrder,
+		getForm: () => getForm(formRef, internalRef)
+	}), [fieldOrder, formRef]);
 	useEffect(() => {
-		const form = formRef?.current ?? internalRef.current?.closest("form");
+		const form = getForm(formRef, internalRef);
 		form?.addEventListener("submit", onSubmit);
 		if (form && hasErrors && autoScroll) {
 			if (typeof form?.scrollIntoView === "function") form.scrollIntoView({ behavior: "smooth" });
@@ -46,18 +54,21 @@ const ValidationSummary = ({ autoScroll = true, children, className, forceMount
 		inert: true,
 		ref: mergeRefs(internalRef, ref)
 	});
-	return /* @__PURE__ */ jsxs("div", {
+	return /* @__PURE__ */ jsx("div", {
 		...componentProps,
 		"aria-live": "assertive",
 		ref: mergeRefs(internalRef, ref),
 		role: "alert",
 		tabIndex: -1,
-		children: [
-			slots.ValidationSummaryHeading,
-			slots.ValidationSummaryPrompt,
-			slots.ValidationSummaryErrors,
-			slots.Children
-		]
+		children: /* @__PURE__ */ jsxs(ValidationSummaryContext.Provider, {
+			value: context,
+			children: [
+				slots.ValidationSummaryHeading,
+				slots.ValidationSummaryPrompt,
+				slots.ValidationSummaryErrors,
+				slots.Children
+			]
+		})
 	});
 };
 const ValidationSummaryHeading = ({ as = "h2", children, className }) => {
@@ -71,20 +82,28 @@ const focusable = [
 	"TEXTAREA",
 	"SELECT"
 ];
+const focusOptions = {
+	focusVisible: true,
+	preventScroll: true
+};
 const ValidationSummaryErrors = ({ errors }) => {
 	const errorsArray = (errors && Object.entries(errors)) ?? [];
+	const { fieldOrder, getForm } = useValidationSummary();
+	const sortedErrors = sortErrorsByFieldOrder(errorsArray, fieldOrder);
 	return errorsArray.length ? /* @__PURE__ */ jsx("div", {
 		className: "coop-validation-summary--errors",
-		children: /* @__PURE__ */ jsx("ul", { children: errorsArray.map(([field, error]) => {
+		children: /* @__PURE__ */ jsx("ul", { children: sortedErrors.map(([field, error]) => {
 			const id = error.ref?.id ? sanitizeFieldId(error.ref.id) : void 0;
 			return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", {
 				href: "#",
 				onClick: (e) => {
 					e.preventDefault();
-					const el = getFieldElement(field, id);
-					if (el) {
-						if (focusable.includes(el.nodeName)) el.focus();
-						else el.querySelector("input")?.focus();
+					const form = getForm();
+					const el = form && getFieldElement(form, field, id);
+					if (el instanceof HTMLElement) {
+						el.scrollIntoView({ block: "center" });
+						if (focusable.includes(el.nodeName)) el.focus(focusOptions);
+						else el.querySelector("input")?.focus(focusOptions);
 					}
 				},
 				children: error.message

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

@@ -0,0 +1,11 @@
+import { RefObject } from "react";
+//#region src/components/ValidationSummary/validationsummary-utils.d.ts
+export interface FieldError {
+  message?: string | number;
+  ref?: {
+    focus?: () => void;
+    id?: string;
+  };
+  type?: string | number;
+}
+//#endregion

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

@@ -1,10 +1,33 @@
 //#region src/components/ValidationSummary/validationsummary-utils.ts
 const sanitizeFieldId = (id) => id?.startsWith("#") ? id.slice(1) : id;
-const getFieldElement = (field, id) => {
-	if (id) {
-		const safeId = sanitizeFieldId(id);
-		return document.querySelector(`#${safeId}`) ?? document.querySelector(`[name=${safeId}]`);
-	} else return document.querySelector(`[name=${field}_display]`) ?? document.querySelector(`#${field}`) ?? document.querySelector(`[name=${field}]`);
+const getFieldKeys = (field, id) => [
+	...id ? [sanitizeFieldId(id)] : [],
+	`${field}_display`,
+	field
+];
+const getFieldElement = (form, field, id) => {
+	for (const key of getFieldKeys(field, id)) {
+		const item = form.elements.namedItem(key);
+		const el = item instanceof RadioNodeList ? item[0] : item;
+		if (el instanceof Element) return el;
+	}
+	return null;
+};
+const getForm = (formRef, internalRef) => {
+	return formRef?.current ?? internalRef?.current?.closest("form") ?? null;
+};
+const isFormControl = (el) => el instanceof HTMLInputElement || el instanceof HTMLSelectElement || el instanceof HTMLTextAreaElement;
+const getFieldOrder = (form) => [...form.elements].filter(isFormControl).map(({ id, name }) => ({
+	id,
+	name
+}));
+const getFieldPosition = (fieldOrder, [field, error]) => getFieldKeys(field, error.ref?.id).map((key) => fieldOrder.findIndex((f) => f.id === key || f.name === key)).find((index) => index !== -1) ?? fieldOrder.length;
+const sortErrorsByFieldOrder = (errorsArray, fieldOrder) => {
+	if (!fieldOrder.length) return errorsArray;
+	return errorsArray.map((entry) => ({
+		entry,
+		position: getFieldPosition(fieldOrder, entry)
+	})).sort((a, b) => a.position - b.position).map(({ entry }) => entry);
 };
 //#endregion
-export { getFieldElement, sanitizeFieldId };
+export { getFieldElement, getFieldOrder, getFieldPosition, getForm, sanitizeFieldId, sortErrorsByFieldOrder };

package/dist/hooks/useSlots.js

@@ -1,33 +1,9 @@
+import { getSlotName } from "../utils/slots.js";
 import React from "react";
 //#region src/hooks/useSlots.ts
 function isKey(x, k) {
 	return k in x;
 }
-function isLazy(type) {
-	return typeof type === "object" && type !== null && "_payload" in type && "_init" in type;
-}
-function resolveComponentName(child) {
-	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.name;
-			return resolved.displayName ?? resolved.name ?? null;
-		} catch {
-			return null;
-		}
-		if (typeof type === "function") {
-			if ("slot" in type) return type.slot.name;
-			return type.displayName ?? type.name ?? null;
-		}
-	}
-	return null;
-}
-function getSlotName(node) {
-	const slotName = resolveComponentName(node);
-	if (slotName) return slotName.replaceAll(".", "");
-	return false;
-}
 function useSlots(componentSlots, children, options) {
 	return React.Children.toArray(children).reduce((slots, child) => {
 		const slotName = getSlotName(child);
@@ -39,4 +15,4 @@ function useSlots(componentSlots, children, options) {
 	}, { ...componentSlots });
 }
 //#endregion
-export { getSlotName, isKey, isLazy, resolveComponentName, useSlots };
+export { isKey, useSlots };

package/dist/types/index.d.ts

@@ -1,4 +1,19 @@
 //#region src/types/index.d.ts
 export type StandardSizes = "sm" | "md" | "lg";
 export type StandardSizesWithNone = "none" | "sm" | "md" | "lg";
+export interface SlotConfig {
+  field?: boolean;
+  inline?: boolean;
+  name: string;
+  suffix?: string;
+}
+export interface LazyPayload<T> {
+  default: T;
+}
+export interface LazyComponent<T extends React.ComponentType<any>> {
+  _init: (payload: unknown) => T;
+  _payload: Promise<LazyPayload<T>> | LazyPayload<T>;
+  $$typeof: typeof REACT_LAZY_TYPE;
+}
+export declare const REACT_LAZY_TYPE: any;
 //#endregion

package/dist/utils/classes.d.ts

@@ -0,0 +1,6 @@
+//#region src/utils/classes.d.ts
+export declare const bgPropToClass: (color: string, userClasses?: string) => string;
+export declare const hasUserBg: (userClasses?: string) => boolean;
+export declare const hasUserBorder: (userClasses?: string) => boolean;
+export declare const bgClassToColor: (userClasses: string) => string | null;
+//#endregion

package/dist/utils/classes.js

@@ -0,0 +1,13 @@
+//#region src/utils/classes.ts
+const bgPropToClass = (color, userClasses) => userClasses?.includes("bg-") ? "" : `bg-${color}`;
+const hasUserBg = (userClasses) => {
+	return typeof userClasses === "string" && userClasses?.includes("bg-") ? true : false;
+};
+const hasUserBorder = (userClasses) => {
+	return typeof userClasses === "string" && userClasses?.includes("border-") ? true : false;
+};
+const bgClassToColor = (userClasses) => {
+	return /bg-([^\s]+)/.exec(userClasses)?.[1] ?? null;
+};
+//#endregion
+export { bgClassToColor, bgPropToClass, hasUserBg, hasUserBorder };

package/dist/utils/index.d.ts

@@ -1,7 +1,3 @@
-//#region src/utils/index.d.ts
-export declare const bgPropToClass: (color: string, userClasses?: string) => string;
-export declare const hasUserBg: (userClasses?: string) => boolean;
-export declare const hasUserBorder: (userClasses?: string) => boolean;
-export declare const bgClassToColor: (userClasses: string) => string | null;
-export declare function getSlotProp<R = unknown>(slot: React.ReactNode, prop: string): R | undefined;
-//#endregion
+import { bgClassToColor, bgPropToClass, hasUserBg, hasUserBorder } from "./classes.js";
+import { forEachSlot, getSlotName, getSlotProp, isLazy, resolveComponentName } from "./slots.js";
+export { bgClassToColor, bgPropToClass, forEachSlot, getSlotName, getSlotProp, hasUserBg, hasUserBorder, isLazy, resolveComponentName };

package/dist/utils/index.js

@@ -1,17 +1,3 @@
-import { isValidElement } from "react";
-//#region src/utils/index.ts
-const bgPropToClass = (color, userClasses) => userClasses?.includes("bg-") ? "" : `bg-${color}`;
-const hasUserBg = (userClasses) => {
-	return typeof userClasses === "string" && userClasses?.includes("bg-") ? true : false;
-};
-const hasUserBorder = (userClasses) => {
-	return typeof userClasses === "string" && userClasses?.includes("border-") ? true : false;
-};
-const bgClassToColor = (userClasses) => {
-	return /bg-([^\s]+)/.exec(userClasses)?.[1] ?? null;
-};
-function getSlotProp(slot, prop) {
-	if (isValidElement(slot) && prop in slot.props) return slot.props[prop];
-}
-//#endregion
-export { bgClassToColor, bgPropToClass, getSlotProp, hasUserBg, hasUserBorder };
+import { bgClassToColor, bgPropToClass, hasUserBg, hasUserBorder } from "./classes.js";
+import { forEachSlot, getSlotName, getSlotProp, isLazy, resolveComponentName } from "./slots.js";
+export { bgClassToColor, bgPropToClass, forEachSlot, getSlotName, getSlotProp, hasUserBg, hasUserBorder, isLazy, resolveComponentName };

package/dist/utils/slots.d.ts

@@ -0,0 +1,9 @@
+import { LazyComponent, SlotConfig } from "../types/index.js";
+import React, { ReactElement, ReactNode } from "react";
+//#region src/utils/slots.d.ts
+export declare function getSlotProp<R = unknown>(slot: React.ReactNode, prop: string): R | undefined;
+export declare const forEachSlot: (children: ReactNode, fn: (slot: SlotConfig, child: ReactElement) => void) => void;
+export declare function isLazy<T extends React.ComponentType<any>>(type: unknown): type is LazyComponent<T>;
+export declare function resolveComponentName(child: React.ReactNode): string | null;
+export declare function getSlotName(node: React.ReactNode): string | false;
+//#endregion

package/dist/utils/slots.js

@@ -0,0 +1,37 @@
+import { isValidElement } from "react";
+//#region src/utils/slots.ts
+function getSlotProp(slot, prop) {
+	if (isValidElement(slot) && prop in slot.props) return slot.props[prop];
+}
+const forEachSlot = (children, fn) => {
+	Array.from([children].flat()).forEach((child) => {
+		if (isValidElement(child) && typeof child.type === "function" && "slot" in child.type) fn(child.type.slot, child);
+	});
+};
+function isLazy(type) {
+	return typeof type === "object" && type !== null && "_payload" in type && "_init" in type;
+}
+function resolveComponentName(child) {
+	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.name;
+			return resolved.displayName ?? resolved.name ?? null;
+		} catch {
+			return null;
+		}
+		if (typeof type === "function") {
+			if ("slot" in type) return type.slot.name;
+			return type.displayName ?? type.name ?? null;
+		}
+	}
+	return null;
+}
+function getSlotName(node) {
+	const slotName = resolveComponentName(node);
+	if (slotName) return slotName.replaceAll(".", "");
+	return false;
+}
+//#endregion
+export { forEachSlot, getSlotName, getSlotProp, isLazy, resolveComponentName };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "1.27.1",
+  "version": "1.28.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -107,7 +107,7 @@
     "storybook": "$storybook"
   },
   "dependencies": {
-    "@coopdigital/styles": "^1.18.0",
+    "@coopdigital/styles": "^1.19.0",
     "@radix-ui/react-popover": "^1.1.23",
     "clsx": "^2.1.1",
     "date-fns": "^4.4.0",
@@ -116,5 +116,5 @@
     "merge-refs": "^2.0.0",
     "react-day-picker": "^10.0.2"
   },
-  "gitHead": "9e3d7cf5e1e32c946117d5be84ed2a11d022f2f1"
+  "gitHead": "06d636d392fe951b4dc6b7bf30be44afc74414b1"
 }

package/src/components/Checkbox/Checkbox.tsx

@@ -3,7 +3,7 @@ import type { InputHTMLAttributes, JSX, Ref } from "react"
 
 import clsx from "clsx"
 
-import { useField } from "@/components/Field/Field.context"
+import { getDescribedBy, getFieldError, useField } from "@/components/Field/Field.context"
 import { StandardSizes } from "@/types"
 
 export interface CheckboxProps extends Omit<
@@ -18,8 +18,8 @@ export interface CheckboxProps extends Omit<
   error?: boolean
   /** Specify the component id. Will be auto-generated if not set. */
   id?: string
-  /** Specify the component name. */
-  name: string
+  /** Specify the component name. Without a name, the value is not submitted with a form. */
+  name?: string
   /** Specify a custom React ref for this component. */
   ref?: Ref<HTMLInputElement>
   /** Specify the component size. */
@@ -27,9 +27,10 @@ export interface CheckboxProps extends Omit<
 }
 
 const Checkbox = ({
+  "aria-describedby": ariaDescribedBy,
   className,
   disabled,
-  error = false,
+  error,
   id,
   name,
   ref,
@@ -37,10 +38,12 @@ const Checkbox = ({
   ...props
 }: CheckboxProps): JSX.Element => {
   const field = useField()
+  const hasError = getFieldError(error, field)
 
   const componentProps = {
+    "aria-describedby": getDescribedBy(ariaDescribedBy, field),
+    "aria-invalid": hasError || undefined,
     className: clsx("coop-checkbox", className),
-    "data-error": error || undefined,
     "data-size": size ?? undefined,
     disabled,
     id: id ?? field?.id,

package/src/components/Combobox/Combobox.context.ts

@@ -7,6 +7,7 @@ import { StandardSizes } from "@/types"
 
 interface ComboboxContextValue {
   disabled?: boolean
+  error?: boolean
   items?: ComboboxItem[]
   props?: {
     getInputProps: Function

package/src/components/Combobox/Combobox.tsx

@@ -21,7 +21,7 @@ import {
   normalizeOptions,
 } from "@/components/Combobox/combobox-utils"
 import { ComboboxContext, useComboboxContext } from "@/components/Combobox/Combobox.context"
-import { useField } from "@/components/Field/Field.context"
+import { getFieldError, useField } from "@/components/Field/Field.context"
 import { ChevronDownIcon } from "@/components/icons"
 import { TextInput, TextInputProps } from "@/components/TextInput"
 import { useSlots } from "@/hooks"
@@ -156,6 +156,7 @@ export const Combobox = ({
 }: ComboboxProps): JSX.Element | null => {
   const field = useField()
   const uid = id ?? field?.id
+  const hasError = getFieldError(error, field)
 
   const slots = useSlots(componentSlots, children)
 
@@ -166,7 +167,7 @@ export const Combobox = ({
 
   const componentProps = {
     className: clsx("coop-combobox", className),
-    "data-error": error ?? undefined,
+    "data-field": "",
     "data-size": size ?? undefined,
     id: uid,
     ...props,
@@ -219,7 +220,9 @@ export const Combobox = ({
   // }
 
   return (
-    <ComboboxContext.Provider value={{ disabled, items: inputItems, props: comboboxProps, size }}>
+    <ComboboxContext.Provider
+      value={{ disabled, error: hasError, items: inputItems, props: comboboxProps, size }}
+    >
       <div {...componentProps} ref={ref}>
         {slots.ComboboxControls}
         {slots.ComboboxOptions}
@@ -233,6 +236,7 @@ const ComboboxInput = ({ className, placeholder, ...props }: ComboboxInputProps)
   const componentProps = {
     className,
     disabled: combobox.disabled,
+    error: combobox.error,
     placeholder,
     size: combobox.size,
     ...props,

package/src/components/DatePicker/DatePicker.tsx

@@ -16,7 +16,7 @@ import { DayPicker } from "react-day-picker"
 import type { StandardSizes } from "@/types"
 
 import { Button } from "@/components/Button"
-import { useField } from "@/components/Field/Field.context"
+import { getFieldError, useField } from "@/components/Field/Field.context"
 import { CalendarIcon, CrossIcon, TickIcon } from "@/components/icons"
 import { Popover } from "@/components/Popover"
 import { TextInput } from "@/components/TextInput"
@@ -163,7 +163,7 @@ const DatePicker = ({
   disabled,
   disabledDates,
   endDate,
-  error = false,
+  error,
   id,
   initialDate = now,
   initialSelected = false,
@@ -178,6 +178,7 @@ const DatePicker = ({
   ...props
 }: DatePickerProps): JSX.Element => {
   const field = useField()
+  const hasError = getFieldError(error, field)
 
   initialDate = getInitialDate(mode, initialDate)
 
@@ -262,7 +263,7 @@ const DatePicker = ({
   const componentProps = {
     className: clsx("coop-datepicker", className),
     "data-disabled": disabled ?? undefined,
-    "data-error": error || undefined,
+    "data-field": "",
     "data-mode": mode,
     ...props,
   }
@@ -315,6 +316,7 @@ const DatePicker = ({
             autoComplete="off"
             className="coop-datepicker-input"
             disabled={disabled}
+            error={hasError}
             id={valueProps.id + "_display"}
             //maxLength={dateFormat.length}
             name={name + "_display"}

package/src/components/Field/Field.context.ts

@@ -1,6 +1,8 @@
 "use client"
 import { createContext, useContext } from "react"
 
+import { joinIds, type MarkerIds } from "@/components/FieldMarkers/fieldmarkers-utils"
+
 export interface FieldConfig {
   disabled: boolean
   id: string
@@ -8,8 +10,9 @@ export interface FieldConfig {
   suffix?: string
 }
 
-export interface FieldContextValue {
+export interface FieldContextValue extends Partial<MarkerIds> {
   disabled?: boolean
+  error?: boolean
   id?: string
   inline?: boolean
   suffix?: string
@@ -17,12 +20,15 @@ export interface FieldContextValue {
 
 export const FieldContext = createContext<FieldContextValue | null>(null)
 
-export const useField = () => {
-  const context = useContext(FieldContext)
+export const useField = () => useContext(FieldContext)
 
-  if (!context) {
-    return null
-  }
+// Combine the hint and error ids from the Field with any aria-describedby set on the control
+export const getDescribedBy = (
+  describedBy: string | undefined,
+  field: FieldContextValue | null
+): string | undefined => joinIds(field?.describedBy, describedBy)
 
-  return context
-}
+export const getFieldError = (
+  error: boolean | undefined,
+  field: FieldContextValue | null
+): boolean => error ?? field?.error ?? false