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

import { useBreakpointListener as e } from "../../../hooks/use-breakpoint-listener.js";
import { Button as t } from "../../button/Button.js";
import { useFormContext as n } from "../../../hooks/tanstack-form-context.js";
import { InlineFieldGroupContext as r } from "../InlineFieldGroup.context.js";
import { useContext as i, useMemo as a } from "react";
import { uyTv as o } from "@payfit/unity-themes";
import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
import { useIntl as u } from "react-intl";
import { useSelector as d } from "@tanstack/react-store";
//#region src/components/inline-field-group/parts/InlineFieldGroupActions.tsx
var f = o({
	slots: {
		container: "",
		button: ""
	},
	variants: { orientation: {
		horizontal: { container: "uy:flex uy:gap-100 uy:items-center" },
		vertical: {
			container: "uy:flex uy:flex-col uy:gap-100 uy:w-full",
			button: "uy:w-full"
		}
	} },
	defaultVariants: { orientation: "horizontal" }
});
function p({ orientation: o = "horizontal", customActions: p }) {
	let m = u(), h = i(r), g = e(), _ = g === "xs" || g === "sm";
	if (!h) throw Error("InlineFieldGroupActions must be used within InlineFieldGroup");
	let { mode: v, enterEditMode: y, exitEditMode: b, editViewId: x, isLoading: S, editButtonRef: C, editLabel: w, saveLabel: T, cancelLabel: E, onEditPress: D, onSavePress: O, onCancelPress: k } = h, { isDirty: A } = d(n().store, (e) => ({ isDirty: e.isDirty })), { container: j, button: M } = f({ orientation: o }), N = w || m.formatMessage({
		id: "unity:component:inline-field-group:edit",
		defaultMessage: "Edit"
	}), P = T || m.formatMessage({
		id: "unity:component:inline-field-group:save",
		defaultMessage: "Save"
	}), F = E || m.formatMessage({
		id: "unity:component:inline-field-group:cancel",
		defaultMessage: "Cancel"
	}), I = a(() => _ ? /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(t, {
		variant: "primary",
		size: "default",
		isDisabled: !A || S,
		isLoading: S,
		type: "submit",
		onPress: () => {
			O?.();
		},
		className: M(),
		children: P
	}), /* @__PURE__ */ c(t, {
		variant: "secondary",
		size: "default",
		onPress: () => {
			k?.(), b();
		},
		isDisabled: S,
		type: "button",
		className: M(),
		children: F
	})] }) : /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(t, {
		variant: "secondary",
		size: "default",
		onPress: () => {
			k?.(), b();
		},
		isDisabled: S,
		type: "button",
		className: M(),
		children: F
	}), /* @__PURE__ */ c(t, {
		variant: "primary",
		size: "default",
		isDisabled: !A || S,
		isLoading: S,
		type: "submit",
		onPress: () => {
			O?.();
		},
		className: M(),
		children: P
	})] }), [
		M,
		F,
		P,
		b,
		A,
		S,
		_,
		k,
		O
	]);
	return /* @__PURE__ */ l("div", {
		className: j(),
		role: "group",
		children: [p, v === "read" ? /* @__PURE__ */ c(t, {
			ref: C,
			variant: "secondary",
			size: "default",
			onPress: () => {
				D?.(), y();
			},
			isDisabled: S,
			prefixIcon: "PencilSimpleOutlined",
			"aria-expanded": !1,
			"aria-controls": x,
			className: M(),
			children: N
		}) : I]
	});
}
p.displayName = "InlineFieldGroupActions";
//#endregion
export { p as InlineFieldGroupActions };