@payfit/unity-components/dist/esm/components/inline-field-group/InlineFieldGroup.js

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 };