@coopdigital/react 1.27.2 → 1.28.0

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

@@ -1,17 +1,85 @@
+import { RefObject } from "react"
+
+type FormControl = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
+
+export interface FieldPosition {
+  id: string
+  name: string
+}
+
+export interface FieldError {
+  message?: string | number
+  ref?: {
+    focus?: () => void
+    id?: string
+  }
+  type?: string | number
+}
+
 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}]`)
-    )
+// The keys to look a field up by, in order: the error ref id, then the field
+// name, preferring the _display suffix. Each key can match an id or name.
+const getFieldKeys = (field: string, id?: string): string[] => [
+  ...(id ? [sanitizeFieldId(id)] : []),
+  `${field}_display`,
+  field,
+]
+
+// 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.
+export const getFieldElement = (
+  form: HTMLFormElement,
+  field: string,
+  id?: string
+): Element | null => {
+  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
+}
+
+// Find the associated form. If a formRef is provided use that,
+// otherwise find the closest form ancestor.
+export const getForm = (
+  formRef?: RefObject<HTMLFormElement | null>,
+  internalRef?: RefObject<HTMLDivElement | null>
+): HTMLFormElement | null => {
+  return formRef?.current ?? internalRef?.current?.closest("form") ?? null
+}
+
+const isFormControl = (el: Element): el is FormControl =>
+  el instanceof HTMLInputElement ||
+  el instanceof HTMLSelectElement ||
+  el instanceof HTMLTextAreaElement
+
+// List form fields in document order
+export const getFieldOrder = (form: HTMLFormElement): FieldPosition[] =>
+  [...form.elements].filter(isFormControl).map(({ id, name }) => ({ id, name }))
+
+// Find a field position in the form, with same match logic as
+// getFieldElement. Fields that are not found are just appended.
+export const getFieldPosition = (
+  fieldOrder: FieldPosition[],
+  [field, error]: [string, FieldError]
+) =>
+  getFieldKeys(field, error.ref?.id)
+    .map((key) => fieldOrder.findIndex((f) => f.id === key || f.name === key))
+    .find((index) => index !== -1) ?? fieldOrder.length
+
+// Decorate-sort-undecorate errors array by position of associated field
+export const sortErrorsByFieldOrder = (
+  errorsArray: [string, FieldError][],
+  fieldOrder: FieldPosition[]
+) => {
+  if (!fieldOrder.length) return errorsArray
+
+  return errorsArray
+    .map((entry) => ({ entry, position: getFieldPosition(fieldOrder, entry) }))
+    .sort((a, b) => a.position - b.position)
+    .map(({ entry }) => entry)
 }

package/src/hooks/useSlots.ts

@@ -1,6 +1,6 @@
 import React from "react"
 
-import { LazyComponent, SlotConfig } from "@/types"
+import { getSlotName } from "@/utils/slots"
 
 type Slots<T> = Record<keyof T, React.ReactNode>
 
@@ -8,46 +8,6 @@ export function isKey<T extends object>(x: T, k: PropertyKey): k is keyof T {
   return k in x
 }
 
-// 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
-}
-
-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
-      }
-    }
-
-    if (typeof type === "function") {
-      if ("slot" in type) return (type.slot as SlotConfig).name
-      return (type as React.FC).displayName ?? (type as React.FC).name ?? null
-    }
-  }
-  return null
-}
-
-export function getSlotName(node: React.ReactNode): string | false {
-  const slotName = resolveComponentName(node)
-
-  if (slotName) {
-    return slotName.replaceAll(".", "")
-    // return root && !safeName.startsWith(root) ? root + safeName : safeName
-  }
-  return false
-}
-
 export function useSlots<T>(
   componentSlots: Slots<T>,
   children: React.ReactNode,

package/src/utils/classes.ts

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

package/src/utils/index.ts

@@ -1,24 +1,2 @@
-import { isValidElement } from "react"
-
-export const bgPropToClass = (color: string, userClasses?: string) =>
-  userClasses?.includes("bg-") ? "" : `bg-${color}`
-
-export const hasUserBg = (userClasses?: string) => {
-  return typeof userClasses === "string" && userClasses?.includes("bg-") ? true : false
-}
-
-export const hasUserBorder = (userClasses?: string) => {
-  return typeof userClasses === "string" && userClasses?.includes("border-") ? true : false
-}
-
-export const bgClassToColor = (userClasses: string) => {
-  return /bg-([^\s]+)/.exec(userClasses)?.[1] ?? null
-}
-
-// oxlint-disable-next-line typescript/no-unnecessary-type-parameters
-export function getSlotProp<R = unknown>(slot: React.ReactNode, prop: string): R | undefined {
-  if (isValidElement(slot) && prop in (slot.props as object)) {
-    return (slot.props as Record<string, unknown>)[prop] as R
-  }
-  return undefined
-}
+export * from "./classes"
+export * from "./slots"

package/src/utils/slots.ts

@@ -0,0 +1,63 @@
+import React, { isValidElement, type ReactElement, type ReactNode } from "react"
+
+import type { LazyComponent, SlotConfig } from "@/types"
+
+// oxlint-disable-next-line typescript/no-unnecessary-type-parameters
+export function getSlotProp<R = unknown>(slot: React.ReactNode, prop: string): R | undefined {
+  if (isValidElement(slot) && prop in (slot.props as object)) {
+    return (slot.props as Record<string, unknown>)[prop] as R
+  }
+  return 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)
+    }
+  })
+}
+
+// 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
+}
+
+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
+      }
+    }
+
+    if (typeof type === "function") {
+      if ("slot" in type) return (type.slot as SlotConfig).name
+      return (type as React.FC).displayName ?? (type as React.FC).name ?? null
+    }
+  }
+  return null
+}
+
+export function getSlotName(node: React.ReactNode): string | false {
+  const slotName = resolveComponentName(node)
+
+  if (slotName) {
+    return slotName.replaceAll(".", "")
+    // return root && !safeName.startsWith(root) ? root + safeName : safeName
+  }
+  return false
+}