import { i as e } from "../../sanitize-CDxuPfMB.js";
import { n as t, t as n } from "../../utils-C_mWfcFX.js";
//#region src/navigation/menubar/index.ts
var r = class {
	container;
	items;
	className;
	menubarId;
	barEl = null;
	openIndex = -1;
	activeItemIndex = -1;
	dropdownEl = null;
	destroyed = !1;
	handleDocumentClick;
	handleKeyDown;
	constructor(e) {
		this.container = n(e.container), this.items = [...e.items], this.className = e.className, this.menubarId = t("cmm-menubar"), this.handleDocumentClick = (e) => {
			let t = e.target;
			t instanceof Node && this.barEl && !this.barEl.contains(t) && this.dropdownEl && !this.dropdownEl.contains(t) && this.closeMenu();
		}, this.handleKeyDown = (e) => {
			this.onKeyDown(e);
		}, this.render(), document.addEventListener("click", this.handleDocumentClick), document.addEventListener("keydown", this.handleKeyDown);
	}
	update(e) {
		this.destroyed || (this.items.length = 0, this.items.push(...e), this.closeMenu(), this.render());
	}
	destroy() {
		this.destroyed || (this.destroyed = !0, this.closeMenu(), document.removeEventListener("click", this.handleDocumentClick), document.removeEventListener("keydown", this.handleKeyDown), this.container.innerHTML = "", this.barEl = null);
	}
	closeMenu() {
		this.dropdownEl &&= (this.dropdownEl.remove(), null), this.openIndex = -1, this.activeItemIndex = -1, this.updateTriggerStates();
	}
	openMenu(e) {
		this.closeMenu();
		let n = this.items[e];
		if (!n || n.children.length === 0) return;
		this.openIndex = e, this.activeItemIndex = 0, this.updateTriggerStates();
		let r = this.barEl?.querySelectorAll(".cmm-menubar__trigger")?.[e];
		if (!r) return;
		let i = r.getBoundingClientRect(), a = document.createElement("div");
		a.className = "cmm-menubar__dropdown", a.setAttribute("role", "menu"), a.id = t("cmm-menubar-dropdown"), r.setAttribute("aria-controls", a.id), this.renderMenuItems(a, n.children), document.body.appendChild(a), this.dropdownEl = a;
		let o = a.getBoundingClientRect(), s = i.left, c = i.bottom + 2;
		s + o.width > window.innerWidth && (s = window.innerWidth - o.width - 4), c + o.height > window.innerHeight && (c = i.top - o.height - 2), a.style.left = `${String(Math.max(0, s))}px`, a.style.top = `${String(Math.max(0, c))}px`, this.highlightActiveItem();
	}
	renderMenuItems(t, n) {
		for (let r of n) {
			if (r.type === "separator") {
				let e = document.createElement("div");
				e.className = "cmm-menubar__separator", e.setAttribute("role", "separator"), t.appendChild(e);
				continue;
			}
			let n = document.createElement("div");
			if (n.className = "cmm-menubar__item", n.setAttribute("role", "menuitem"), r.disabled === !0 && (n.classList.add("cmm-menubar__item--disabled"), n.setAttribute("aria-disabled", "true")), (r.type === "checkbox" || r.type === "radio") && r.checked === !0) {
				n.classList.add("cmm-menubar__item--checked");
				let e = document.createElement("span");
				e.className = "cmm-menubar__check", e.setAttribute("aria-hidden", "true"), e.textContent = r.type === "radio" ? "●" : "✓", n.appendChild(e);
			}
			if (r.icon) {
				let t = document.createElement("span");
				t.className = "cmm-menubar__icon", t.setAttribute("aria-hidden", "true"), e(t, r.icon), n.appendChild(t);
			}
			if (r.label) {
				let e = document.createElement("span");
				e.className = "cmm-menubar__label", e.textContent = r.label, n.appendChild(e);
			}
			if (r.shortcut) {
				let e = document.createElement("span");
				e.className = "cmm-menubar__shortcut", e.textContent = r.shortcut, n.appendChild(e);
			}
			if (r.children && r.children.length > 0) {
				let e = document.createElement("span");
				e.className = "cmm-menubar__arrow", e.setAttribute("aria-hidden", "true"), e.textContent = "▸", n.appendChild(e);
			}
			r.disabled !== !0 && n.addEventListener("click", (e) => {
				e.stopPropagation(), r.onSelect && r.onSelect(), this.closeMenu();
			}), t.appendChild(n);
		}
	}
	updateTriggerStates() {
		let e = this.barEl?.querySelectorAll(".cmm-menubar__trigger");
		e && e.forEach((e, t) => {
			let n = t === this.openIndex;
			e.setAttribute("aria-expanded", n ? "true" : "false"), n ? e.classList.add("cmm-menubar__trigger--active") : e.classList.remove("cmm-menubar__trigger--active");
		});
	}
	highlightActiveItem() {
		this.dropdownEl && this.dropdownEl.querySelectorAll(".cmm-menubar__item:not(.cmm-menubar__item--disabled)").forEach((e, t) => {
			t === this.activeItemIndex ? e.classList.add("cmm-menubar__item--active") : e.classList.remove("cmm-menubar__item--active");
		});
	}
	getNavigableItemCount() {
		return this.dropdownEl ? this.dropdownEl.querySelectorAll(".cmm-menubar__item:not(.cmm-menubar__item--disabled)").length : 0;
	}
	onKeyDown(e) {
		if (this.destroyed) return;
		let t = e.target;
		if (!(t instanceof Node && this.barEl && !this.barEl.contains(t) && this.dropdownEl?.contains(t) !== !0 && this.openIndex < 0)) {
			if (e.key === "Escape") {
				this.openIndex >= 0 && (e.preventDefault(), this.closeMenu());
				return;
			}
			if (e.key === "ArrowRight") {
				if (e.preventDefault(), this.openIndex >= 0) {
					let e = (this.openIndex + 1) % this.items.length;
					this.openMenu(e);
				}
				return;
			}
			if (e.key === "ArrowLeft") {
				if (e.preventDefault(), this.openIndex >= 0) {
					let e = (this.openIndex - 1 + this.items.length) % this.items.length;
					this.openMenu(e);
				}
				return;
			}
			if (e.key === "ArrowDown") {
				if (e.preventDefault(), this.openIndex >= 0) {
					let e = this.getNavigableItemCount();
					e > 0 && (this.activeItemIndex = Math.min(this.activeItemIndex + 1, e - 1), this.highlightActiveItem());
				}
				return;
			}
			if (e.key === "ArrowUp") {
				e.preventDefault(), this.openIndex >= 0 && (this.activeItemIndex = Math.max(this.activeItemIndex - 1, 0), this.highlightActiveItem());
				return;
			}
			if (e.key === "Home") {
				e.preventDefault(), this.openIndex >= 0 && (this.activeItemIndex = 0, this.highlightActiveItem());
				return;
			}
			if (e.key === "End") {
				if (e.preventDefault(), this.openIndex >= 0) {
					let e = this.getNavigableItemCount();
					this.activeItemIndex = Math.max(0, e - 1), this.highlightActiveItem();
				}
				return;
			}
			if ((e.key === "Enter" || e.key === " ") && this.openIndex >= 0 && this.activeItemIndex >= 0 && this.dropdownEl) {
				e.preventDefault();
				let t = this.dropdownEl.querySelectorAll(".cmm-menubar__item:not(.cmm-menubar__item--disabled)")[this.activeItemIndex];
				t && t.click();
			}
		}
	}
	render() {
		this.container.innerHTML = "";
		let e = document.createElement("div");
		e.className = "cmm-menubar", e.id = this.menubarId, e.setAttribute("role", "menubar"), this.className && e.classList.add(this.className);
		for (let t = 0; t < this.items.length; t++) {
			let n = this.items[t];
			if (!n) continue;
			let r = document.createElement("button");
			r.className = "cmm-menubar__trigger", r.type = "button", r.textContent = n.label, r.setAttribute("aria-haspopup", "true"), r.setAttribute("aria-expanded", "false");
			let i = t;
			r.addEventListener("click", (e) => {
				e.stopPropagation(), this.openIndex === i ? this.closeMenu() : this.openMenu(i);
			}), r.addEventListener("mouseenter", () => {
				this.openIndex >= 0 && this.openIndex !== i && this.openMenu(i);
			}), e.appendChild(r);
		}
		this.container.appendChild(e), this.barEl = e;
	}
};
//#endregion
export { r as Menubar };

//# sourceMappingURL=index.js.map