@coopdigital/react 1.30.2 → 1.31.0

package/src/components/Squircle/Squircle.tsx

@@ -73,4 +73,4 @@ Squircle.Text = SquircleText
 Squircle.slot = { name: "Squircle" }
 
 export default Squircle
-export { Squircle }
+export { Squircle, SquircleSvg, SquircleText }

package/src/components/ValidationSummary/ValidationSummary.context.ts

@@ -1,7 +1,7 @@
 "use client"
 import { createContext, useContext } from "react"
 
-import type { FieldPosition } from "./validationsummary-utils"
+import type { FieldPosition } from "./validationsummary-internal"
 
 interface ValidationSummaryContextValue {
   /** The order of the fields in the form, read when the form is submitted. Empty until the first submit. */

package/src/components/ValidationSummary/ValidationSummary.tsx

@@ -15,7 +15,7 @@ import {
   getForm,
   sanitizeFieldId,
   sortErrorsByFieldOrder,
-} from "@/components/ValidationSummary/validationsummary-utils"
+} from "@/components/ValidationSummary/validationsummary-internal"
 import {
   useValidationSummary,
   ValidationSummaryContext,

package/src/components/ValidationSummary/{validationsummary-utils.ts → validationsummary-internal.ts}

@@ -27,27 +27,28 @@ const getFieldKeys = (field: string, id?: string): string[] => [
 ]
 
 const VISIBLE_CONTROL = 'input:not([type="hidden"]), select, textarea'
+const INVALID_CONTROL = `:is(${VISIBLE_CONTROL})[aria-invalid="true"]`
 
 const isHiddenInput = (el: Element): el is HTMLInputElement =>
   el instanceof HTMLInputElement && el.type === "hidden"
 
-// Components such as Combobox submit their value from a hidden input, which
-// cannot be focused. Find the visible control in the closest wrapper that
-// has one. The search stops before the form, so a hidden input placed
-// directly in the form is not matched to an unrelated field.
+// Components such as Combobox and DateInput submit their value from a hidden
+// input, which cannot be focused. Find the visible control in the closest
+// wrapper that has one, preferring a control marked as invalid, such as the
+// year of a DateInput. The search stops before the form, so a hidden input
+// placed directly in the form is not matched to an unrelated field.
 const getVisibleControl = (form: HTMLFormElement, el: Element): Element => {
   for (let node = el.parentElement; node && node !== form; node = node.parentElement) {
     const control = node.querySelector(VISIBLE_CONTROL)
-    if (control) return control
+    if (control) return node.querySelector(INVALID_CONTROL) ?? control
   }
 
   return el
 }
 
 // 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. A hidden input is swapped for its visible
-// control.
+// and return if there is a match. For a RadioNodeList, return the first
+// element only. A hidden input is swapped for its visible control.
 export const getFieldElement = (
   form: HTMLFormElement,
   field: string,

package/src/index.ts

@@ -5,6 +5,7 @@ export * from "./components/Button/Button"
 export * from "./components/Card/Card"
 export * from "./components/Checkbox/Checkbox"
 export * from "./components/Combobox"
+export * from "./components/DateInput"
 export * from "./components/DatePicker/DatePicker"
 export * from "./components/Dialog/Dialog"
 export * from "./components/Expandable/Expandable"