@payfit/unity-components 2.12.2 → 2.12.3

package/dist/esm/components/inline-field-group/InlineFieldGroup.d.ts

@@ -143,7 +143,7 @@ export interface InlineFieldGroupProps extends PropsWithChildren {
  * - The component automatically exits edit mode on successful form submission
  * - Press Escape to cancel editing and reset form values
  * - Focus moves to the first form field when entering edit mode
- * - Focus returns to the edit button when exiting edit mode
+ * - Focus returns to the edit button when exiting edit mode (only if focus hasn't moved elsewhere)
  * - Focus is retained under a scope when in edit mode, to prevent users for leaving unfinished changes
  * - Use `shouldModeChange` to intercept and conditionally prevent mode transitions
  * - Use `successMessage` and `errorMessage` for accessible announcements via live regions

package/dist/esm/components/inline-field-group/InlineFieldGroup.js

@@ -1,111 +1,114 @@
-import { jsx as n, jsxs as te } from "react/jsx-runtime";
-import { forwardRef as ie, useRef as a, useState as O, useEffect as r, useCallback as P, useImperativeHandle as re, useMemo as oe } from "react";
-import { uyTv as se } from "@payfit/unity-themes";
-import { useStore as ne } from "@tanstack/react-form";
-import { useId as ue, useKeyboard as le, FocusScope as ae } from "react-aria";
-import { useIntl as ce } from "react-intl";
+import { jsx as u, jsxs as te } from "react/jsx-runtime";
+import { forwardRef as ie, useRef as a, useState as K, useEffect as o, useCallback as P, useImperativeHandle as oe, useMemo as re } from "react";
+import { uyTv as ne } from "@payfit/unity-themes";
+import { useStore as se } from "@tanstack/react-form";
+import { useId as ue, useKeyboard as le, FocusScope as ce } from "react-aria";
+import { useIntl as ae } from "react-intl";
 import { useFormContext as me } from "../../hooks/tanstack-form-context.js";
 import { useBreakpointListener as de } from "../../hooks/use-breakpoint-listener.js";
 import { useInlineFieldGroupMode as fe } from "./hooks/useInlineFieldGroupMode.js";
 import { InlineFieldGroupContext as pe } from "./InlineFieldGroup.context.js";
 import { InlineFieldGroupActions as be } from "./parts/InlineFieldGroupActions.js";
-const ve = se({
+const ve = ne({
   slots: {
     form: "uy:flex uy:flex-col uy:gap-300"
   }
-}), $ = (c) => {
-  if (!c.current) return;
-  const m = c.current.querySelector(
+}), $ = (m) => {
+  if (!m.current) return;
+  const d = m.current.querySelector(
     '[aria-invalid="true"]'
   );
-  m && m.focus();
-}, H = 5e3, Se = ie(
+  d && d.focus();
+}, H = 5e3, ye = ie(
   ({
-    children: c,
-    mode: m,
+    children: m,
+    mode: d,
     defaultMode: U,
-    onModeChange: z,
-    shouldModeChange: d,
+    onModeChange: W,
+    shouldModeChange: f,
     isLoading: w,
-    className: J,
+    className: z,
     "aria-label": M,
-    containFocus: Q = !1,
-    successMessage: g,
-    errorMessage: f,
+    containFocus: J = !1,
+    successMessage: E,
+    errorMessage: p,
     editLabel: _,
     saveLabel: T,
     cancelLabel: V,
     onEditPress: k,
     onSavePress: C,
     onCancelPress: D
-  }, W) => {
-    const u = ue(), E = `unity-InlineFieldGroup-${u}__header`, q = `unity-InlineFieldGroup-${u}__edit-view`, p = a(null), o = a(null), j = a(!0), [G, R] = O(""), [h, b] = O(""), v = ce(), l = me(), B = de(), X = B === "xs" || B === "sm", { mode: t, enterEditMode: S, exitEditMode: s } = fe({
-      mode: m,
+  }, Q) => {
+    const l = ue(), g = `unity-InlineFieldGroup-${l}__header`, q = `unity-InlineFieldGroup-${l}__edit-view`, b = a(null), r = a(null), B = a(!0), [G, h] = K(""), [R, v] = K(""), y = ae(), c = me(), O = de(), X = O === "xs" || O === "sm", { mode: t, enterEditMode: S, exitEditMode: n } = fe({
+      mode: d,
       defaultMode: U,
-      onModeChange: z,
-      shouldModeChange: d
-    }), { isSubmitting: i, isValid: y, isSubmitSuccessful: F, submissionAttempts: I } = ne(l.store, (e) => ({
+      onModeChange: W,
+      shouldModeChange: f
+    }), { isSubmitting: i, isValid: I, isSubmitSuccessful: F, submissionAttempts: x } = se(c.store, (e) => ({
       isSubmitting: e.isSubmitting,
       isValid: e.isValid,
       isSubmitSuccessful: e.isSubmitSuccessful,
       submissionAttempts: e.submissionAttempts
-    })), x = a(i), K = a(I);
-    r(() => {
-      i && !x.current && (R(""), b(""));
-    }, [i]), r(() => {
-      if (I > K.current && !y) {
-        const A = f ?? v.formatMessage({
+    })), A = a(i), j = a(x);
+    o(() => {
+      i && !A.current && (h(""), v(""));
+    }, [i]), o(() => {
+      if (x > j.current && !I) {
+        const s = p ?? y.formatMessage({
           id: "unity:component:inline-field-group:validation-error",
           defaultMessage: "Please fix the errors before saving."
         });
-        b(A), $(o);
+        v(s), $(r);
       }
-    }, [I, y, f, v]), r(() => {
-      x.current && !i && F && (g && R(g), s());
-    }, [i, F, g, s]), r(() => {
-      if (x.current && !i && !F && y) {
-        const A = f ?? v.formatMessage({
+    }, [x, I, p, y]), o(() => {
+      A.current && !i && F && (E && h(E), n());
+    }, [i, F, E, n]), o(() => {
+      if (A.current && !i && !F && I) {
+        const s = p ?? y.formatMessage({
           id: "unity:component:inline-field-group:save-error",
           defaultMessage: "An error occurred while saving. Please try again."
         });
-        b(A);
+        v(s);
       }
-    }, [i, F, y, f, v]), r(() => {
-      x.current = i, K.current = I;
+    }, [i, F, I, p, y]), o(() => {
+      A.current = i, j.current = x;
     });
     const Y = P(
       (e) => {
-        e.preventDefault(), e.stopPropagation(), l.handleSubmit();
+        e.preventDefault(), e.stopPropagation(), c.handleSubmit();
       },
-      [l]
+      [c]
     ), N = P(() => {
-      d !== void 0 && !d(t, "read") || (l.reset(), s());
-    }, [l, t, s, d]);
-    re(
-      W,
+      f !== void 0 && !f(t, "read") || (c.reset(), n());
+    }, [c, t, n, f]);
+    oe(
+      Q,
       () => ({
         focusFirstInvalidField: () => {
-          $(o);
+          $(r);
         },
-        exitEditMode: s,
+        exitEditMode: n,
         enterEditMode: S
       }),
-      [s, S]
-    ), r(() => {
-      if (j.current) {
-        j.current = !1;
+      [n, S]
+    ), o(() => {
+      if (B.current) {
+        B.current = !1;
         return;
       }
       if (t === "edit") {
-        if (o.current) {
-          const e = o.current.querySelectorAll(
+        if (r.current) {
+          const e = r.current.querySelectorAll(
             'input, select, textarea, [tabindex]:not([tabindex="-1"])'
           );
           e.length > 0 && e[0].focus();
         }
       } else
         requestAnimationFrame(() => {
-          p.current && p.current.focus();
+          const e = r.current?.contains(
+            document.activeElement
+          ), s = document.activeElement === document.body;
+          (e || s) && b.current && b.current.focus();
         });
     }, [t]);
     const { keyboardProps: Z } = le({
@@ -113,36 +116,36 @@ const ve = se({
         e.key === "Escape" && t === "edit" && (e.preventDefault(), N());
       }
     });
-    r(() => {
+    o(() => {
       if (G) {
         const e = setTimeout(() => {
-          R("");
+          h("");
         }, H);
         return () => {
           clearTimeout(e);
         };
       }
-    }, [G]), r(() => {
-      if (h) {
+    }, [G]), o(() => {
+      if (R) {
         const e = setTimeout(() => {
-          b("");
+          v("");
         }, H);
         return () => {
           clearTimeout(e);
         };
       }
-    }, [h]);
-    const L = oe(
+    }, [R]);
+    const L = re(
       () => ({
         mode: t,
         enterEditMode: S,
         exitEditMode: N,
-        groupId: u,
-        headerId: E,
+        groupId: l,
+        headerId: g,
         editViewId: q,
         isLoading: w,
-        editButtonRef: p,
-        editViewRef: o,
+        editButtonRef: b,
+        editViewRef: r,
         editLabel: _,
         saveLabel: T,
         cancelLabel: V,
@@ -154,12 +157,12 @@ const ve = se({
         t,
         S,
         N,
-        u,
-        E,
+        l,
+        g,
         q,
         w,
-        p,
-        o,
+        b,
+        r,
         _,
         T,
         V,
@@ -168,19 +171,19 @@ const ve = se({
         D
       ]
     ), { form: ee } = ve();
-    return /* @__PURE__ */ n(pe.Provider, { value: L, children: /* @__PURE__ */ n(
+    return /* @__PURE__ */ u(pe.Provider, { value: L, children: /* @__PURE__ */ u(
       "form",
       {
         ...Z,
-        id: u,
-        className: ee({ className: J }),
+        id: l,
+        className: ee({ className: z }),
         onSubmit: Y,
         "aria-label": M,
-        "aria-labelledby": M ? void 0 : E,
-        children: /* @__PURE__ */ te(ae, { contain: Q && t === "edit", children: [
-          c,
-          X && /* @__PURE__ */ n("div", { className: "uy:flex", children: /* @__PURE__ */ n(be, { orientation: "vertical" }) }),
-          /* @__PURE__ */ n(
+        "aria-labelledby": M ? void 0 : g,
+        children: /* @__PURE__ */ te(ce, { contain: J && t === "edit", children: [
+          m,
+          X && /* @__PURE__ */ u("div", { className: "uy:flex", children: /* @__PURE__ */ u(be, { orientation: "vertical" }) }),
+          /* @__PURE__ */ u(
             "div",
             {
               role: "status",
@@ -190,14 +193,14 @@ const ve = se({
               children: G
             }
           ),
-          /* @__PURE__ */ n(
+          /* @__PURE__ */ u(
             "div",
             {
               role: "alert",
               "aria-live": "assertive",
               "aria-atomic": "true",
               className: "uy:sr-only",
-              children: h
+              children: R
             }
           )
         ] })
@@ -205,7 +208,7 @@ const ve = se({
     ) });
   }
 );
-Se.displayName = "InlineFieldGroup";
+ye.displayName = "InlineFieldGroup";
 export {
-  Se as InlineFieldGroup
+  ye as InlineFieldGroup
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payfit/unity-components",
-  "version": "2.12.2",
+  "version": "2.12.3",
   "module": "./dist/esm/index.js",
   "type": "module",
   "sideEffects": false,
@@ -42,7 +42,7 @@
     "@hookform/devtools": "4.4.0",
     "@hookform/resolvers": "5.2.1",
     "@internationalized/date": "3.11.0",
-    "@payfit/unity-illustrations": "2.12.2",
+    "@payfit/unity-illustrations": "2.12.3",
     "@radix-ui/react-avatar": "1.1.11",
     "@radix-ui/react-slot": "1.2.4",
     "@react-aria/interactions": "3.27.0",
@@ -74,8 +74,8 @@
   },
   "peerDependencies": {
     "@hookform/devtools": "^4",
-    "@payfit/unity-icons": "2.12.2",
-    "@payfit/unity-themes": "2.12.2",
+    "@payfit/unity-icons": "2.12.3",
+    "@payfit/unity-themes": "2.12.3",
     "@storybook/react-vite": "^10.2.2",
     "@tanstack/react-query": "^5",
     "@tanstack/react-router": "^1.131",
@@ -94,9 +94,9 @@
     "@payfit/hr-apps-tsconfigs": "0.0.0-use.local",
     "@payfit/storybook-addon-console-errors": "0.0.0-use.local",
     "@payfit/storybook-config": "0.0.0-use.local",
-    "@payfit/unity-icons": "2.12.2",
-    "@payfit/unity-illustrations": "2.12.2",
-    "@payfit/unity-themes": "2.12.2",
+    "@payfit/unity-icons": "2.12.3",
+    "@payfit/unity-illustrations": "2.12.3",
+    "@payfit/unity-themes": "2.12.3",
     "@payfit/vite-configs": "0.0.0-use.local",
     "@storybook/addon-a11y": "10.2.13",
     "@storybook/addon-docs": "10.2.13",