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);
	d(() => {
		if (!b) return () => {};
		document.activeElement instanceof HTMLElement && (A.current = document.activeElement);
		let r = k.current;
		r != null && e(n(r, E));
		let i = (e) => {
			if (e.key === "Escape") {
				x();
				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), A.current?.focus(), A.current = null;
		};
	}, [
		E,
		b,
		x
	]);
	let j = (e) => {
		e.stopPropagation();
	};
	if (!b) return null;
	let M = /* @__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: j,
			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 txvbqbnwy txvbqbok7 txvbqbp6y txvbqblyp txvbqb9ip txvbqbdp7 txvbqbaop txvbqb12g txvbqb1qg txvbqb4rp txvbqb2c7",
					children: w
				})
			]
		})
	})] });
	return typeof document > "u" ? M : v(M, document.body);
};
//#endregion
export { y as Modal };

//# sourceMappingURL=Modal.js.map