@payfit/unity-components/dist/esm/components/inline-field/parts/InlineFieldEditView.js

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
		})]
	});
}
y.displayName = "InlineFieldEditView";
//#endregion
export { y as InlineFieldEditView };