@payfit/unity-components 2.47.5 → 2.47.6

package/dist/esm/components/inline-field/InlineField.js

@@ -1,58 +1,49 @@
-import { jsx as R } from "react/jsx-runtime";
-import { useRef as r, useId as b, useMemo as E, useCallback as M, useEffect as v } from "react";
-import { useInlineFieldMode as w } from "./hooks/useInlineFieldMode.js";
-import { InlineFieldContext as V } from "./InlineField.context.js";
-const g = ({
-  children: m,
-  mode: a,
-  defaultMode: F,
-  onModeChange: x,
-  isLoading: o,
-  shouldModeChange: p
-}) => {
-  const t = r(null), e = r(null), l = r(!0), { mode: i, enterEditMode: s, exitEditMode: d } = w({
-    mode: a,
-    defaultMode: F,
-    onModeChange: x,
-    shouldModeChange: p
-  }), n = `inline-field-${b()}`, c = `${n}__edit-view`, I = E(
-    () => ({
-      mode: i,
-      enterEditMode: s,
-      exitEditMode: d,
-      fieldId: n,
-      isLoading: o,
-      triggerRef: t,
-      editViewRef: e,
-      editViewId: c
-    }),
-    [
-      i,
-      s,
-      d,
-      n,
-      o,
-      t,
-      e,
-      c
-    ]
-  ), u = M(() => {
-    if (e.current) {
-      const f = e.current.querySelectorAll(
-        'input, select, textarea, [tabindex]:not([tabindex="-1"])'
-      );
-      f.length > 0 && f[0].focus();
-    }
-  }, [e]);
-  return v(() => {
-    if (l.current) {
-      l.current = !1;
-      return;
-    }
-    i === "edit" ? u() : t.current && t.current.focus();
-  }, [i, u]), /* @__PURE__ */ R(V.Provider, { value: I, children: m });
-};
-g.displayName = "InlineField";
-export {
-  g as InlineField
+import { useInlineFieldMode as e } from "./hooks/useInlineFieldMode.js";
+import { InlineFieldContext as t } from "./InlineField.context.js";
+import { useCallback as n, useEffect as r, useId as i, useMemo as a, useRef as o } from "react";
+import { jsx as s } from "react/jsx-runtime";
+//#region src/components/inline-field/InlineField.tsx
+var c = ({ children: c, mode: l, defaultMode: u, onModeChange: d, isLoading: f, shouldModeChange: p }) => {
+	let m = o(null), h = o(null), g = o(!0), { mode: _, enterEditMode: v, exitEditMode: y } = e({
+		mode: l,
+		defaultMode: u,
+		onModeChange: d,
+		shouldModeChange: p
+	}), b = `inline-field-${i()}`, x = `${b}__edit-view`, S = a(() => ({
+		mode: _,
+		enterEditMode: v,
+		exitEditMode: y,
+		fieldId: b,
+		isLoading: f,
+		triggerRef: m,
+		editViewRef: h,
+		editViewId: x
+	}), [
+		_,
+		v,
+		y,
+		b,
+		f,
+		m,
+		h,
+		x
+	]), C = n(() => {
+		if (h.current) {
+			let e = h.current.querySelectorAll("input, select, textarea, [tabindex]:not([tabindex=\"-1\"])");
+			e.length > 0 && e[0].focus();
+		}
+	}, [h]);
+	return r(() => {
+		if (g.current) {
+			g.current = !1;
+			return;
+		}
+		_ === "edit" ? C() : m.current && m.current.focus();
+	}, [_, C]), /* @__PURE__ */ s(t.Provider, {
+		value: S,
+		children: c
+	});
 };
+c.displayName = "InlineField";
+//#endregion
+export { c as InlineField };

package/dist/esm/components/inline-field/hooks/useInlineFieldMode.js

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

package/dist/esm/components/inline-field/parts/InlineFieldEditView.js

@@ -1,150 +1,114 @@
-import { jsxs as l, jsx as s } from "react/jsx-runtime";
-import { useRef as S, useState as N, useEffect as m, useCallback as v } from "react";
-import { uyTv as L } from "@payfit/unity-themes";
-import { useSelector as P } from "@tanstack/react-store";
-import { Group as T } from "react-aria-components/Group";
-import { FocusScope as R } from "react-aria/FocusScope";
-import { useKeyboard as j } from "react-aria/useKeyboard";
-import { useIntl as K } from "react-intl";
-import { useFormContext as O } from "../../../hooks/tanstack-form-context.js";
-import { TanstackFormFeedbackText as B } from "../../form-field/parts/TanstackFormFeedbackText.js";
-import { TanstackFormHelperText as G } from "../../form-field/parts/TanstackFormHelperText.js";
-import { TanstackFormField as H } from "../../form-field/TanstackFormField.js";
-import { CircularIconButton as h } from "../../icon-button/CircularIconButton.js";
-import { useInlineField as q } from "../InlineField.context.js";
-const z = L({
-  slots: {
-    base: "uy:flex uy:flex-row uy:gap-100 uy:items-start"
-  }
-});
-function J({
-  children: x,
-  onCancel: f,
-  onSave: F,
-  saveLabel: C,
-  cancelLabel: E,
-  helperText: p,
-  errorMessage: b
-}) {
-  const i = q(), n = K(), o = O(), {
-    isDirty: M,
-    isSubmitting: t,
-    submissionAttempts: u,
-    isValid: y,
-    isSubmitSuccessful: r
-  } = P(o.store, (e) => ({
-    isDirty: e.isDirty,
-    isSubmitting: e.isSubmitting,
-    isValid: e.isValid,
-    isSubmitSuccessful: e.isSubmitSuccessful,
-    submissionAttempts: e.submissionAttempts
-  })), a = S(t), w = S(u), [k, d] = N(""), c = i?.mode === "edit";
-  m(() => {
-    t && !a.current && d("");
-  }, [t]), m(() => {
-    a.current && !t && r && i?.exitEditMode();
-  }, [t, r, i]), m(() => {
-    if (a.current && !t && !r && y) {
-      const I = b ?? n.formatMessage({
-        id: "unity:component:inline-field:save-error",
-        defaultMessage: "An error occurred while saving. Please try again."
-      });
-      d(I);
-    }
-  }, [t, r, y, b, n]), m(() => {
-    a.current = t, w.current = u;
-  }, [t, u]);
-  const { base: D } = z(), V = v(
-    (e) => {
-      e.preventDefault(), e.stopPropagation(), o.handleSubmit();
-    },
-    [o]
-  ), g = v(() => {
-    o.reset(), i?.exitEditMode(), d("");
-  }, [o, i]), { keyboardProps: A } = j({
-    onKeyDown: (e) => {
-      e.key === "Escape" && i?.mode === "edit" && (e.preventDefault(), f?.(), g());
-    }
-  });
-  return /* @__PURE__ */ l(
-    "div",
-    {
-      className: D(),
-      ref: i?.editViewRef,
-      hidden: !c,
-      "aria-hidden": !c,
-      ...!c && { inert: "" },
-      children: [
-        /* @__PURE__ */ s(R, { contain: !0, restoreFocus: !0, children: /* @__PURE__ */ s(
-          "form",
-          {
-            ...A,
-            className: "uy:flex uy:flex-1 uy:min-w-0",
-            onSubmit: V,
-            id: i?.editViewId,
-            children: /* @__PURE__ */ l(H, { children: [
-              p && /* @__PURE__ */ s(G, { children: p }),
-              /* @__PURE__ */ l("div", { className: "uy:flex", children: [
-                x,
-                /* @__PURE__ */ l(
-                  T,
-                  {
-                    className: "uy:flex uy:gap-50 uy:items-center uy:ml-100",
-                    "aria-busy": i?.isLoading,
-                    children: [
-                      /* @__PURE__ */ s(
-                        h,
-                        {
-                          asElement: "button",
-                          icon: "CloseOutlined",
-                          onPress: () => {
-                            f?.(), g();
-                          },
-                          isDisabled: i?.isLoading,
-                          title: E ?? n.formatMessage({
-                            id: "unity:component:inline-field:cancel",
-                            defaultMessage: "Cancel"
-                          })
-                        }
-                      ),
-                      /* @__PURE__ */ s(
-                        h,
-                        {
-                          asElement: "button",
-                          icon: "CheckOutlined",
-                          type: "submit",
-                          isLoading: i?.isLoading || t,
-                          isDisabled: !M || i?.isLoading || t,
-                          title: C ?? n.formatMessage({
-                            id: "unity:component:inline-field:save",
-                            defaultMessage: "Save"
-                          }),
-                          onPress: F
-                        }
-                      )
-                    ]
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ s(B, {})
-            ] })
-          }
-        ) }),
-        /* @__PURE__ */ s(
-          "div",
-          {
-            role: "alert",
-            "aria-live": "assertive",
-            "aria-atomic": "true",
-            className: "uy:sr-only",
-            children: k
-          }
-        )
-      ]
-    }
-  );
+import { CircularIconButton as e } from "../../icon-button/CircularIconButton.js";
+import { useFormContext as t } from "../../../hooks/tanstack-form-context.js";
+import { TanstackFormFeedbackText as n } from "../../form-field/parts/TanstackFormFeedbackText.js";
+import { TanstackFormField as r } from "../../form-field/TanstackFormField.js";
+import { TanstackFormHelperText as i } from "../../form-field/parts/TanstackFormHelperText.js";
+import { useInlineField as a } from "../InlineField.context.js";
+import { useCallback as o, useEffect as s, 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 { Group as p } from "react-aria-components/Group";
+import { useIntl as m } from "react-intl";
+import { FocusScope as h } from "react-aria/FocusScope";
+import { useSelector as g } from "@tanstack/react-store";
+import { useKeyboard as _ } from "react-aria/useKeyboard";
+//#region src/components/inline-field/parts/InlineFieldEditView.tsx
+var v = u({ slots: { base: "uy:flex uy:flex-row uy:gap-100 uy:items-start" } });
+function y({ children: u, onCancel: y, onSave: b, saveLabel: x, cancelLabel: S, helperText: C, errorMessage: w }) {
+	let T = a(), E = m(), D = t(), { isDirty: O, isSubmitting: k, submissionAttempts: A, isValid: j, isSubmitSuccessful: M } = g(D.store, (e) => ({
+		isDirty: e.isDirty,
+		isSubmitting: e.isSubmitting,
+		isValid: e.isValid,
+		isSubmitSuccessful: e.isSubmitSuccessful,
+		submissionAttempts: e.submissionAttempts
+	})), N = c(k), P = c(A), [F, I] = l(""), L = T?.mode === "edit";
+	s(() => {
+		k && !N.current && I("");
+	}, [k]), s(() => {
+		N.current && !k && M && T?.exitEditMode();
+	}, [
+		k,
+		M,
+		T
+	]), s(() => {
+		N.current && !k && !M && j && I(w ?? E.formatMessage({
+			id: "unity:component:inline-field:save-error",
+			defaultMessage: "An error occurred while saving. Please try again."
+		}));
+	}, [
+		k,
+		M,
+		j,
+		w,
+		E
+	]), s(() => {
+		N.current = k, P.current = A;
+	}, [k, A]);
+	let { base: R } = v(), z = o((e) => {
+		e.preventDefault(), e.stopPropagation(), D.handleSubmit();
+	}, [D]), B = o(() => {
+		D.reset(), T?.exitEditMode(), I("");
+	}, [D, T]), { keyboardProps: V } = _({ onKeyDown: (e) => {
+		e.key === "Escape" && T?.mode === "edit" && (e.preventDefault(), y?.(), B());
+	} });
+	return /* @__PURE__ */ f("div", {
+		className: R(),
+		ref: T?.editViewRef,
+		hidden: !L,
+		"aria-hidden": !L,
+		...!L && { inert: "" },
+		children: [/* @__PURE__ */ d(h, {
+			contain: !0,
+			restoreFocus: !0,
+			children: /* @__PURE__ */ d("form", {
+				...V,
+				className: "uy:flex uy:flex-1 uy:min-w-0",
+				onSubmit: z,
+				id: T?.editViewId,
+				children: /* @__PURE__ */ f(r, { children: [
+					C && /* @__PURE__ */ d(i, { children: C }),
+					/* @__PURE__ */ f("div", {
+						className: "uy:flex",
+						children: [u, /* @__PURE__ */ f(p, {
+							className: "uy:flex uy:gap-50 uy:items-center uy:ml-100",
+							"aria-busy": T?.isLoading,
+							children: [/* @__PURE__ */ d(e, {
+								asElement: "button",
+								icon: "CloseOutlined",
+								onPress: () => {
+									y?.(), B();
+								},
+								isDisabled: T?.isLoading,
+								title: S ?? E.formatMessage({
+									id: "unity:component:inline-field:cancel",
+									defaultMessage: "Cancel"
+								})
+							}), /* @__PURE__ */ d(e, {
+								asElement: "button",
+								icon: "CheckOutlined",
+								type: "submit",
+								isLoading: T?.isLoading || k,
+								isDisabled: !O || T?.isLoading || k,
+								title: x ?? E.formatMessage({
+									id: "unity:component:inline-field:save",
+									defaultMessage: "Save"
+								}),
+								onPress: b
+							})]
+						})]
+					}),
+					/* @__PURE__ */ d(n, {})
+				] })
+			})
+		}), /* @__PURE__ */ d("div", {
+			role: "alert",
+			"aria-live": "assertive",
+			"aria-atomic": "true",
+			className: "uy:sr-only",
+			children: F
+		})]
+	});
 }
-J.displayName = "InlineFieldEditView";
-export {
-  J as InlineFieldEditView
-};
+y.displayName = "InlineFieldEditView";
+//#endregion
+export { y as InlineFieldEditView };

package/dist/esm/components/inline-field/parts/InlineFieldReadView.js

@@ -1,58 +1,53 @@
-import { jsxs as a, jsx as c } from "react/jsx-runtime";
-import { useState as p, useRef as S, useEffect as r } from "react";
-import { useSelector as b } from "@tanstack/react-store";
-import { useFormContext as R } from "../../../hooks/tanstack-form-context.js";
-import { useInlineField as A } from "../InlineField.context.js";
-const I = 5e3;
-function x({
-  children: l,
-  successMessage: i
-}) {
-  const n = A(), [d, s] = p(""), f = R(), { isSubmitting: e, submissionAttempts: E, isSubmitSuccessful: m } = b(
-    f.store,
-    (t) => ({
-      isSubmitting: t.isSubmitting,
-      isSubmitSuccessful: t.isSubmitSuccessful,
-      submissionAttempts: t.submissionAttempts
-    })
-  ), u = S(e), o = n?.mode === "read";
-  return r(() => {
-    u.current && !e && m && i && s(i);
-  }, [e, m, i, n]), r(() => {
-    if (i && !n?.isLoading && o && m) {
-      s(i);
-      const t = setTimeout(() => {
-        s("");
-      }, I);
-      return () => {
-        clearTimeout(t);
-      };
-    }
-  }, [i, n, o, m]), r(() => {
-    e && !u.current && s("");
-  }, [e]), /* @__PURE__ */ a(
-    "div",
-    {
-      hidden: !o,
-      "aria-hidden": !o,
-      ...!o && { inert: "" },
-      children: [
-        l,
-        /* @__PURE__ */ c(
-          "div",
-          {
-            role: "status",
-            "aria-live": "polite",
-            "aria-atomic": "true",
-            className: "uy:sr-only",
-            children: d
-          }
-        )
-      ]
-    }
-  );
+import { useFormContext as e } from "../../../hooks/tanstack-form-context.js";
+import { useInlineField as t } from "../InlineField.context.js";
+import { useEffect as n, useRef as r, useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { useSelector as s } from "@tanstack/react-store";
+//#region src/components/inline-field/parts/InlineFieldReadView.tsx
+var c = 5e3;
+function l({ children: l, successMessage: u }) {
+	let d = t(), [f, p] = i(""), { isSubmitting: m, submissionAttempts: h, isSubmitSuccessful: g } = s(e().store, (e) => ({
+		isSubmitting: e.isSubmitting,
+		isSubmitSuccessful: e.isSubmitSuccessful,
+		submissionAttempts: e.submissionAttempts
+	})), _ = r(m), v = d?.mode === "read";
+	return n(() => {
+		_.current && !m && g && u && p(u);
+	}, [
+		m,
+		g,
+		u,
+		d
+	]), n(() => {
+		if (u && !d?.isLoading && v && g) {
+			p(u);
+			let e = setTimeout(() => {
+				p("");
+			}, c);
+			return () => {
+				clearTimeout(e);
+			};
+		}
+	}, [
+		u,
+		d,
+		v,
+		g
+	]), n(() => {
+		m && !_.current && p("");
+	}, [m]), /* @__PURE__ */ o("div", {
+		hidden: !v,
+		"aria-hidden": !v,
+		...!v && { inert: "" },
+		children: [l, /* @__PURE__ */ a("div", {
+			role: "status",
+			"aria-live": "polite",
+			"aria-atomic": "true",
+			className: "uy:sr-only",
+			children: f
+		})]
+	});
 }
-x.displayName = "InlineFieldReadView";
-export {
-  x as InlineFieldReadView
-};
+l.displayName = "InlineFieldReadView";
+//#endregion
+export { l as InlineFieldReadView };

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

@@ -1,6 +1,6 @@
 import { createContext as e } from "react";
-const o = e(void 0);
-o.displayName = "InlineFieldGroupContext";
-export {
-  o as InlineFieldGroupContext
-};
+//#region src/components/inline-field-group/InlineFieldGroup.context.tsx
+var t = e(void 0);
+t.displayName = "InlineFieldGroupContext";
+//#endregion
+export { t as InlineFieldGroupContext };