npm - @jirawatpyk/aura-react - Versions diffs - 5.7.2 → 5.7.3 - Mend

@jirawatpyk/aura-react 5.7.2 → 5.7.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/README.md +4 -0
package/dist/aura.bundle.js +40 -4
package/dist/cjs/index.cjs +40 -4
package/dist/esm/FormErrorSummary.js +40 -4
package/dist/index.d.cts +4 -1
package/dist/index.d.ts +4 -1
package/package.json +1 -1

package/README.md CHANGED Viewed

@@ -186,6 +186,10 @@ DataTable with sort and page in the URL (4.17): `onStateChange={({ sort, page })
 - **Time zone**: `timeZone` on AuraProvider, DatePicker, DateRangePicker and Calendar decides "today" (the marker, `min`/`max="today"`, the first month shown); or pass `today` as an ISO date. `todayIn('Asia/Bangkok')` is exported from the root and `/server`.
 - **Toasts** queue past three instead of dropping: six in a row all show, in order, three at a time.
+## 5.7.3 — FormErrorSummary focus follows submits
+- **FormErrorSummary** (item 65): with `focusKey`, the summary takes focus only after a submit — never while someone types. Fed react-hook-form's live `errors`, the list empties and refills as fields are fixed and broken again (RHF re-validates on change after a submit); that used to pull focus out of the field being typed in (WCAG 3.2.2). Now a new `focusKey` arms one focus, taken as soon as the list has errors: at once for client errors, or when a server error arrives through `setError` after a valid submit; typing in the meantime cancels it. A click or key press elsewhere also cancels it, so a later live error (a field validated on blur, a picker set with `setValue`) never takes focus. With live RHF errors always pass `focusKey={formState.submitCount}` — a primitive, not an object made each render — and `useForm({ shouldFocusError: false })`, or RHF moves focus to the first field instead. Without `focusKey` nothing changes: it focuses whenever errors first appear.
 ## 5.7.2 — SideNav labels hyphenate
 - **SideNav** (item 64): a long compound word hyphenates at a syllable (`hyphens: auto`) instead of breaking wherever the line runs out — "Marknadsförings-" / "målgrupp" rather than "Marknadsföringsmålgrup" / "p". The browser's dictionary for the page's `lang` decides — Safari and Firefox ship them; Chrome downloads them on demand, so they can be missing (headless and managed machines especially). Breaking anywhere stays the last resort. Only words of 12+ letters hyphenate, with at least 5 on each side (`hyphenate-limit-chars`, Chrome 109+ and Firefox 137+), so ordinary English labels still wrap between words; a long English word in a two-line label can now hyphenate too. Where no dictionary is available, put a soft hyphen in the label — `'Marknadsförings\u00ADmålgrupp'` — which breaks there everywhere, shows a hyphen only when it breaks, and adds no hyphen to the accessible name (it is an invisible format character screen readers skip). Set `<html lang>` per locale.

package/dist/aura.bundle.js CHANGED Viewed

@@ -3394,14 +3394,50 @@ window.Aura = (() => {
       const auto = uid(), id = props.id || auto;
       const list = items(props.errors);
       const box = React21.useRef(null);
+      const keyed = props.focusKey !== void 0;
+      const lastKey = React21.useRef(null), armed = React21.useRef(false), hadErrors = React21.useRef(false);
+      const has = list.length > 0;
       React21.useEffect(
         function() {
-          const has = list.length > 0;
-          if (has && box.current) box.current.focus();
+          const appeared = has && !hadErrors.current;
+          hadErrors.current = has;
+          if (!keyed) {
+            lastKey.current = null;
+            if (appeared && box.current) box.current.focus();
+            return;
+          }
+          if (!lastKey.current) {
+            lastKey.current = { v: props.focusKey };
+            armed.current = has;
+          } else if (!Object.is(lastKey.current.v, props.focusKey)) {
+            lastKey.current = { v: props.focusKey };
+            armed.current = true;
+          }
+          if (armed.current && has && box.current) {
+            armed.current = false;
+            box.current.focus();
+          }
         },
-        /* focus when errors first appear, and again whenever focusKey changes (each submit) */
         // eslint-disable-next-line react-hooks/exhaustive-deps
-        [list.length > 0, props.focusKey]
+        [has, props.focusKey, keyed]
+      );
+      React21.useEffect(
+        function() {
+          if (!keyed) return;
+          function disarm() {
+            armed.current = false;
+          }
+          const events = ["input", "change", "keydown", "pointerdown"];
+          events.forEach(function(n2) {
+            document.addEventListener(n2, disarm, true);
+          });
+          return function() {
+            events.forEach(function(n2) {
+              document.removeEventListener(n2, disarm, true);
+            });
+          };
+        },
+        [keyed]
       );
       if (!list.length) return null;
       return /* @__PURE__ */ React21.createElement(

package/dist/cjs/index.cjs CHANGED Viewed

@@ -3376,14 +3376,50 @@ var FormErrorSummary = React21.forwardRef(
     const auto = uid(), id = props.id || auto;
     const list = items(props.errors);
     const box = React21.useRef(null);
+    const keyed = props.focusKey !== void 0;
+    const lastKey = React21.useRef(null), armed = React21.useRef(false), hadErrors = React21.useRef(false);
+    const has = list.length > 0;
     React21.useEffect(
       function() {
-        const has = list.length > 0;
-        if (has && box.current) box.current.focus();
+        const appeared = has && !hadErrors.current;
+        hadErrors.current = has;
+        if (!keyed) {
+          lastKey.current = null;
+          if (appeared && box.current) box.current.focus();
+          return;
+        }
+        if (!lastKey.current) {
+          lastKey.current = { v: props.focusKey };
+          armed.current = has;
+        } else if (!Object.is(lastKey.current.v, props.focusKey)) {
+          lastKey.current = { v: props.focusKey };
+          armed.current = true;
+        }
+        if (armed.current && has && box.current) {
+          armed.current = false;
+          box.current.focus();
+        }
       },
-      /* focus when errors first appear, and again whenever focusKey changes (each submit) */
       // eslint-disable-next-line react-hooks/exhaustive-deps
-      [list.length > 0, props.focusKey]
+      [has, props.focusKey, keyed]
+    );
+    React21.useEffect(
+      function() {
+        if (!keyed) return;
+        function disarm() {
+          armed.current = false;
+        }
+        const events = ["input", "change", "keydown", "pointerdown"];
+        events.forEach(function(n2) {
+          document.addEventListener(n2, disarm, true);
+        });
+        return function() {
+          events.forEach(function(n2) {
+            document.removeEventListener(n2, disarm, true);
+          });
+        };
+      },
+      [keyed]
     );
     if (!list.length) return null;
     return /* @__PURE__ */ React21.createElement(

package/dist/esm/FormErrorSummary.js CHANGED Viewed

@@ -37,14 +37,50 @@ const FormErrorSummary = React.forwardRef(
     const auto = uid(), id = props.id || auto;
     const list = items(props.errors);
     const box = React.useRef(null);
+    const keyed = props.focusKey !== void 0;
+    const lastKey = React.useRef(null), armed = React.useRef(false), hadErrors = React.useRef(false);
+    const has = list.length > 0;
     React.useEffect(
       function() {
-        const has = list.length > 0;
-        if (has && box.current) box.current.focus();
+        const appeared = has && !hadErrors.current;
+        hadErrors.current = has;
+        if (!keyed) {
+          lastKey.current = null;
+          if (appeared && box.current) box.current.focus();
+          return;
+        }
+        if (!lastKey.current) {
+          lastKey.current = { v: props.focusKey };
+          armed.current = has;
+        } else if (!Object.is(lastKey.current.v, props.focusKey)) {
+          lastKey.current = { v: props.focusKey };
+          armed.current = true;
+        }
+        if (armed.current && has && box.current) {
+          armed.current = false;
+          box.current.focus();
+        }
       },
-      /* focus when errors first appear, and again whenever focusKey changes (each submit) */
       // eslint-disable-next-line react-hooks/exhaustive-deps
-      [list.length > 0, props.focusKey]
+      [has, props.focusKey, keyed]
+    );
+    React.useEffect(
+      function() {
+        if (!keyed) return;
+        function disarm() {
+          armed.current = false;
+        }
+        const events = ["input", "change", "keydown", "pointerdown"];
+        events.forEach(function(n) {
+          document.addEventListener(n, disarm, true);
+        });
+        return function() {
+          events.forEach(function(n) {
+            document.removeEventListener(n, disarm, true);
+          });
+        };
+      },
+      [keyed]
     );
     if (!list.length) return null;
     return /* @__PURE__ */ React.createElement(

package/dist/index.d.cts CHANGED Viewed

@@ -355,7 +355,10 @@ export interface FormErrorSummaryProps {
 	title?: React$1.ReactNode | undefined;
 	/** Called with the field when a link is followed, e.g. react-hook-form's `setFocus`. Default: focus the element whose id (or name) is the field. */
 	onSelect?: ((field: string) => void) | undefined;
-	/** Change it on every submit (e.g. `formState.submitCount`) to move focus to the summary again. It also takes focus when errors first appear. */
+	/** Change it on every submit (e.g. `formState.submitCount`). With it, the summary takes focus only after a submit —
+	 * never while someone types and live errors come and go (5.7.3). Without it, it takes focus whenever errors
+	 * first appear; with react-hook-form's live `errors`, always pass `focusKey={formState.submitCount}` (a primitive, not a new object
+	 * each render) and `useForm({ shouldFocusError: false })`, so RHF doesn't move focus to the field first. */
 	focusKey?: unknown;
 	className?: string | undefined;
 	id?: string | undefined;

package/dist/index.d.ts CHANGED Viewed

@@ -355,7 +355,10 @@ export interface FormErrorSummaryProps {
 	title?: React$1.ReactNode | undefined;
 	/** Called with the field when a link is followed, e.g. react-hook-form's `setFocus`. Default: focus the element whose id (or name) is the field. */
 	onSelect?: ((field: string) => void) | undefined;
-	/** Change it on every submit (e.g. `formState.submitCount`) to move focus to the summary again. It also takes focus when errors first appear. */
+	/** Change it on every submit (e.g. `formState.submitCount`). With it, the summary takes focus only after a submit —
+	 * never while someone types and live errors come and go (5.7.3). Without it, it takes focus whenever errors
+	 * first appear; with react-hook-form's live `errors`, always pass `focusKey={formState.submitCount}` (a primitive, not a new object
+	 * each render) and `useForm({ shouldFocusError: false })`, so RHF doesn't move focus to the field first. */
 	focusKey?: unknown;
 	className?: string | undefined;
 	id?: string | undefined;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@jirawatpyk/aura-react",
-  "version": "5.7.2",
+  "version": "5.7.3",
   "description": "AURA Design System — React components (Enterprise Standard, Human Creative). Thai-first: Buddhist-era dates, Thai collation.",
   "license": "MIT",
   "type": "module",