@payfit/unity-components 2.47.4 → 2.47.6

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

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

package/dist/esm/components/inline-field-group/hooks/useInlineFieldGroupMode.js

@@ -1,27 +1,24 @@
-import { useState as m, useCallback as i } from "react";
-function x({
-  mode: d,
-  defaultMode: c = "read",
-  onModeChange: s,
-  shouldModeChange: o
-}) {
-  const [l, u] = m(c), t = d !== void 0, n = t ? d : l, e = i(
-    (r) => {
-      o && o(n, r) === !1 || (t || u(r), s?.(r));
-    },
-    [t, n, s, o]
-  ), a = i(() => {
-    e("edit");
-  }, [e]), f = i(() => {
-    e("read");
-  }, [e]);
-  return {
-    mode: n,
-    enterEditMode: a,
-    exitEditMode: f,
-    isControlled: t
-  };
+import { useCallback as e, useState as t } from "react";
+//#region src/components/inline-field-group/hooks/useInlineFieldGroupMode.ts
+function n({ mode: n, defaultMode: r = "read", onModeChange: i, shouldModeChange: a }) {
+	let [o, s] = t(r), c = n !== void 0, l = c ? n : o, u = e((e) => {
+		a && a(l, e) === !1 || (c || s(e), i?.(e));
+	}, [
+		c,
+		l,
+		i,
+		a
+	]);
+	return {
+		mode: l,
+		enterEditMode: e(() => {
+			u("edit");
+		}, [u]),
+		exitEditMode: e(() => {
+			u("read");
+		}, [u]),
+		isControlled: c
+	};
 }
-export {
-  x as useInlineFieldGroupMode
-};
+//#endregion
+export { n as useInlineFieldGroupMode };