import { focusElement as e, getFocusableElements as t, resolveInitialFocusTarget as n } from "../../../focus/focusable.js";
import { ModalCloseSvg as r } from "../../../icons/ModalCloseSvg.js";
import { Overlay as i } from "../overlay/Overlay.js";
import { closeButton as a, modal as o, modalContainer as s, modalContent as c, modalHeader as l, modalTitle as u } from "./modal.css.js";
import { useEffect as d, useId as f, useRef as p } from "react";
import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
import { useTranslation as _ } from "react-i18next";
import { createPortal as v } from "react-dom";
//#region src/atomic/atoms/modal/Modal.tsx
var y = (y) => {
	let { isOpen: b, onClose: x, title: S, children: C, footer: w, closeAriaLabel: T, initialFocus: E } = y, { t: D } = _("ui"), O = f(), k = p(null), A = p(null), j = p(E), M = p(x);
	d(() => {
		j.current = E, M.current = x;
	}), d(() => {
		if (!b) return;
		document.activeElement instanceof HTMLElement && (A.current = document.activeElement);
		let r = k.current;
		r != null && e(n(r, j.current));
		let i = (e) => {
			if (e.key === "Escape") {
				M.current();
				return;
			}
			if (e.key !== "Tab") return;
			let n = k.current;
			if (n == null) return;
			let r = t(n), i = r[0], a = r[r.length - 1];
			if (i == null || a == null) {
				e.preventDefault(), n.focus();
				return;
			}
			if (e.shiftKey && document.activeElement === i) {
				e.preventDefault(), a.focus();
				return;
			}
			!e.shiftKey && document.activeElement === a && (e.preventDefault(), i.focus());
		};
		return window.addEventListener("keydown", i), () => {
			window.removeEventListener("keydown", i);
			let e = A.current;
			e != null && e.isConnected && document.contains(e) && e.focus(), A.current = null;
		};
	}, [b]);
	let N = (e) => {
		e.stopPropagation();
	};
	if (!b) return null;
	let P = /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h(i, {
		isVisible: b,
		onClick: x
	}), /* @__PURE__ */ h("div", {
		className: s,
		children: /* @__PURE__ */ g("div", {
			className: o,
			ref: k,
			onClick: N,
			role: "dialog",
			"aria-modal": "true",
			"aria-labelledby": O,
			tabIndex: -1,
			children: [
				/* @__PURE__ */ g("div", {
					className: l,
					children: [/* @__PURE__ */ h("h2", {
						id: O,
						className: u,
						children: S
					}), /* @__PURE__ */ h("button", {
						className: a,
						onClick: x,
						"aria-label": T ?? D("common.actions.close"),
						type: "button",
						children: /* @__PURE__ */ h(r, {
							width: 20,
							height: 20,
							"aria-hidden": "true"
						})
					})]
				}),
				/* @__PURE__ */ h("div", {
					className: c,
					children: C
				}),
				w != null && /* @__PURE__ */ h("div", {
					className: "_1uzccdf8 txvbqb10o0 txvbqb11ll txvbqb12ig txvbqbxuj txvbqbfpn txvbqblsh txvbqbheb txvbqb1tv txvbqb2sj txvbqb8p8 txvbqb3td",
					children: w
				})
			]
		})
	})] });
	return typeof document > "u" ? P : v(P, document.body);
};
//#endregion
export { y as Modal };

//# sourceMappingURL=Modal.js.map