@expressivecss/expressive 0.9.1 → 0.10.1

package/dist/js/chunks/chunk-TK6PX2GC.mjs

@@ -0,0 +1,663 @@
+import {
+  Utils
+} from "./chunk-MISGHDUU.mjs";
+import {
+  Component
+} from "./chunk-QSQ24FYT.mjs";
+
+// src/ts/components/menu.ts
+var MIN_SURFACE_WIDTH = 112;
+var MAX_SURFACE_WIDTH = 280;
+var _defaults = {
+  alignment: "left",
+  autoFocus: true,
+  constrainWidth: true,
+  container: null,
+  coverTrigger: false,
+  closeOnClick: true,
+  hover: false,
+  inDuration: 150,
+  outDuration: 250,
+  onOpenStart: null,
+  onOpenEnd: null,
+  onCloseStart: null,
+  onCloseEnd: null,
+  onItemClick: null
+};
+var SPACE = " ";
+var _Menu = class _Menu extends Component {
+  constructor(el, options) {
+    super(el, options, _Menu);
+    this._pendingTimers = /* @__PURE__ */ new Set();
+    this._transition = 0;
+    this._handleClick = (e) => {
+      e.preventDefault();
+      if (this.isOpen) {
+        this.close();
+      } else {
+        this.open();
+      }
+    };
+    this._handleMouseEnter = () => {
+      this.open();
+    };
+    this._handleMouseLeave = (e) => {
+      const toEl = e.relatedTarget;
+      if (!toEl) {
+        this.close();
+        return;
+      }
+      const leaveToMenuContent = !!(this.menuEl && toEl && this.menuEl.contains(toEl));
+      let leaveToActiveMenuTrigger = false;
+      const closestTrigger = toEl.closest(".menu-trigger");
+      if (closestTrigger && !!closestTrigger["Expressive_Menu"] && closestTrigger["Expressive_Menu"].isOpen) {
+        leaveToActiveMenuTrigger = true;
+      }
+      if (!leaveToActiveMenuTrigger && !leaveToMenuContent) {
+        this.close();
+      }
+    };
+    this._handleDocumentClick = (e) => {
+      const target = e.target;
+      if (this._isSubmenuTriggerClick(target)) return;
+      if (this.options.closeOnClick && this.menuEl?.contains(target) && !this.isTouchMoving) {
+        this.close();
+      } else if (!this.menuEl?.contains(target)) {
+        this._schedule(() => {
+          if (this.isOpen) {
+            this.close();
+          }
+        }, 0);
+      }
+      this.isTouchMoving = false;
+    };
+    this._handleTriggerKeydown = (e) => {
+      const opensMenu = e.key === SPACE || e.key === Utils.keys.ENTER || e.key === Utils.keys.ARROW_DOWN || e.key === Utils.keys.ARROW_UP;
+      if (opensMenu && !this.isOpen) {
+        e.preventDefault();
+        this.open();
+      }
+    };
+    this._handleDocumentTouchmove = (e) => {
+      const target = e.target;
+      if (this.menuEl?.contains(target)) {
+        this.isTouchMoving = true;
+      }
+    };
+    this._handleMenuClick = (e) => {
+      const target = e.target;
+      const li = target.closest("li");
+      if (li?.matches('.disabled, [aria-disabled="true"]')) {
+        e.preventDefault();
+        e.stopPropagation();
+        return;
+      }
+      if (li && this._isSubmenuTriggerClick(target)) {
+        e.preventDefault();
+        e.stopPropagation();
+        this._toggleSubmenu(li);
+        return;
+      }
+      if (li && typeof this.options.onItemClick === "function") {
+        this.options.onItemClick.call(this, li);
+      }
+    };
+    this._handleSubmenuAlign = (e) => {
+      const target = e.target;
+      if (!(target instanceof Element)) return;
+      const li = target.closest("li");
+      if (li?.querySelector(":scope > menu") && this.menuEl?.contains(li)) {
+        this._alignSubmenu(li);
+      }
+    };
+    this._handleMenuKeydown = (e) => {
+      if (!this.isOpen || e.ctrlKey || e.metaKey || e.altKey || e.isComposing) return;
+      const list = this._containingSubmenu(e) ?? this.menuEl;
+      const rtl = getComputedStyle(list).direction === "rtl";
+      const openKey = rtl ? Utils.keys.ARROW_LEFT : Utils.keys.ARROW_RIGHT;
+      const backKey = rtl ? Utils.keys.ARROW_RIGHT : Utils.keys.ARROW_LEFT;
+      if ([openKey, backKey, Utils.keys.ARROW_UP, Utils.keys.ARROW_DOWN, Utils.keys.ESC, Utils.keys.TAB].includes(e.key)) {
+        clearTimeout(this.filterTimeout);
+        this._resetFilterQuery();
+      }
+      const arrowUpOrDown = e.key === Utils.keys.ARROW_DOWN || e.key === Utils.keys.ARROW_UP;
+      if (e.key === Utils.keys.TAB) {
+        e.preventDefault();
+        this.close();
+      } else if (e.key === openKey) {
+        const li = this._focusedRow(e);
+        if (li?.querySelector(":scope > menu") && !li.matches('.disabled, [aria-disabled="true"]')) {
+          e.preventDefault();
+          li.classList.add("open");
+          this._alignSubmenu(li);
+          this._syncSubmenuAria(li, true);
+          const first = Array.from(li.querySelector(":scope > menu").children).find(
+            (child) => child instanceof HTMLElement && child.tabIndex !== -1
+          );
+          if (first) this._focusRow(first);
+        }
+      } else if (e.key === backKey) {
+        const submenu = this._containingSubmenu(e);
+        if (submenu) {
+          e.preventDefault();
+          const parentLi = submenu.parentElement;
+          parentLi.classList.remove("open", "submenu-start");
+          this._syncSubmenuAria(parentLi, false);
+          this._focusRow(parentLi);
+        }
+      } else if (arrowUpOrDown && this.isOpen) {
+        e.preventDefault();
+        const direction = e.key === Utils.keys.ARROW_DOWN ? 1 : -1;
+        const row = this._focusedRow(e);
+        let newFocusedIndex = row ? Array.from(list.children).indexOf(row) : this.focusedIndex;
+        let hasFoundNewIndex = false;
+        do {
+          newFocusedIndex = newFocusedIndex + direction;
+          if (!!list.children[newFocusedIndex] && list.children[newFocusedIndex].tabIndex !== -1) {
+            hasFoundNewIndex = true;
+            break;
+          }
+        } while (newFocusedIndex < list.children.length && newFocusedIndex >= 0);
+        if (hasFoundNewIndex) {
+          if (this.focusedIndex >= 0) list.children[this.focusedIndex]?.classList.remove("active");
+          const item = list.children[newFocusedIndex];
+          item.classList.add("active");
+          this._focusRow(item);
+        }
+      } else if ((e.key === Utils.keys.ENTER || e.key === SPACE) && this.isOpen) {
+        const li = this._focusedRow(e);
+        e.preventDefault();
+        if (li?.matches('.disabled, [aria-disabled="true"]')) return;
+        if (li?.querySelector(":scope > menu")) {
+          this._toggleSubmenu(li);
+          return;
+        }
+        const focusedElement = li ?? this.menuEl.children[this.focusedIndex];
+        const activatableElement = focusedElement?.querySelector(":scope > a, :scope > button");
+        if (!!activatableElement) {
+          activatableElement.click();
+        } else if (focusedElement instanceof HTMLElement) {
+          focusedElement.click();
+        }
+      } else if (e.key === Utils.keys.ESC && this.isOpen) {
+        e.preventDefault();
+        const openSub = this._containingSubmenu(e)?.parentElement ?? Array.from(this.menuEl.querySelectorAll("li.open")).reverse()[0];
+        if (openSub) {
+          openSub.classList.remove("open", "submenu-start");
+          this._syncSubmenuAria(openSub, false);
+          this._focusRow(openSub);
+        } else {
+          this.close();
+        }
+      }
+      const keyText = e.key.toLowerCase();
+      if (e.key.length === 1 && e.key !== SPACE && !e.ctrlKey && !e.metaKey && !e.altKey && !e.isComposing) {
+        this.filterQuery.push(keyText);
+        const string = this.filterQuery.join("");
+        const newOptionEl = Array.from(list.querySelectorAll(":scope > li")).find(
+          (el) => el.tabIndex !== -1 && !el.matches('.disabled, [aria-disabled="true"]') && Array.from(el.childNodes).filter((node) => !(node instanceof Element && node.matches("menu"))).map((node) => node.textContent).join("").trim().toLowerCase().startsWith(string)
+        );
+        if (newOptionEl) {
+          this._focusRow(newOptionEl);
+        }
+        clearTimeout(this.filterTimeout);
+        this.filterTimeout = setTimeout(this._resetFilterQuery, 1e3);
+      }
+    };
+    this._handleWindowResize = () => {
+      if (this.el.offsetParent) {
+        this.recalculateDimensions();
+      }
+    };
+    this._resetFilterQuery = () => {
+      this.filterQuery = [];
+    };
+    /**
+     * Open menu.
+     */
+    this.open = () => {
+      if (this.isOpen || this.el["Expressive_Menu"] !== this) return;
+      const transition = this._clearPendingTimers();
+      this.isOpen = true;
+      if (typeof this.options.onOpenStart === "function") {
+        this.options.onOpenStart.call(this, this.el);
+      }
+      if (transition !== this._transition) return;
+      this._resetMenuStyles();
+      this.menuEl.style.display = "block";
+      this._restoreInert();
+      this._placeMenu();
+      this._schedule(() => this._setupTemporaryEventHandlers(), 0);
+      this._animateIn();
+      this.el.ariaExpanded = "true";
+    };
+    /**
+     * Close menu.
+     */
+    this.close = () => {
+      if (!this.isOpen) return;
+      const transition = this._clearPendingTimers();
+      const root = this.menuEl.getRootNode();
+      const focused = root.activeElement;
+      this.isOpen = false;
+      this.menuEl.setAttribute("inert", "");
+      clearTimeout(this.filterTimeout);
+      this._resetFilterQuery();
+      this.focusedIndex = -1;
+      this._closeSubmenus();
+      if (typeof this.options.onCloseStart === "function") {
+        this.options.onCloseStart.call(this, this.el);
+      }
+      if (transition !== this._transition) return;
+      this._animateOut();
+      this._removeTemporaryEventHandlers();
+      this.el.ariaExpanded = "false";
+      if (this.options.autoFocus && (root.activeElement === focused || !root.activeElement || root.activeElement === document.body)) {
+        this.el.focus();
+      }
+    };
+    /**
+     * While menu is open, you can recalculate its dimensions if its contents have changed.
+     */
+    this.recalculateDimensions = () => {
+      if (this.isOpen) {
+        this._resetMenuPositioningStyles();
+        this._placeMenu();
+      }
+    };
+    this.el["Expressive_Menu"] = this;
+    _Menu._menus.push(this);
+    this.id = Utils.getIdFromTrigger(el);
+    this.menuEl = Utils.getElementById(el, this.id);
+    this._originalInert = this.menuEl?.getAttribute("inert") ?? null;
+    this.options = {
+      ..._Menu.defaults,
+      ...options
+    };
+    this.isOpen = false;
+    this.isScrollable = false;
+    this.isTouchMoving = false;
+    this.focusedIndex = -1;
+    this.filterQuery = [];
+    this.el.ariaExpanded = "false";
+    if (!this.el.hasAttribute("aria-haspopup")) this.el.setAttribute("aria-haspopup", "menu");
+    if (this.id && !this.el.hasAttribute("aria-controls"))
+      this.el.setAttribute("aria-controls", this.id);
+    this._moveMenuToElement();
+    this._setupAccessibility();
+    this._makeMenuFocusable();
+    this._setupSubmenus();
+    this._setupEventHandlers();
+  }
+  static get defaults() {
+    return _defaults;
+  }
+  /**
+   * Initializes instances of Menu.
+   * @param els HTML elements.
+   * @param options Component options.
+   */
+  static init(els, options = {}) {
+    return super.init(els, options, _Menu);
+  }
+  static getInstance(el) {
+    return el["Expressive_Menu"];
+  }
+  destroy() {
+    this._clearPendingTimers();
+    this.isOpen = false;
+    this.el.ariaExpanded = "false";
+    clearTimeout(this.filterTimeout);
+    this._resetMenuStyles();
+    this._restoreInert();
+    this._removeEventHandlers();
+    this._removeTemporaryEventHandlers();
+    const index = _Menu._menus.indexOf(this);
+    if (index >= 0) _Menu._menus.splice(index, 1);
+    this.el["Expressive_Menu"] = void 0;
+  }
+  _setupEventHandlers() {
+    this.el.addEventListener("keydown", this._handleTriggerKeydown);
+    this.menuEl?.addEventListener("click", this._handleMenuClick);
+    if (this.menuEl?.querySelector(":scope > li > menu")) {
+      this.menuEl.addEventListener("mouseover", this._handleSubmenuAlign);
+    }
+    if (this.options.hover) {
+      this.el.addEventListener("mouseenter", this._handleMouseEnter);
+      this.el.addEventListener("mouseleave", this._handleMouseLeave);
+      this.menuEl.addEventListener("mouseleave", this._handleMouseLeave);
+    } else {
+      this.el.addEventListener("click", this._handleClick);
+    }
+  }
+  _removeEventHandlers() {
+    this.el.removeEventListener("keydown", this._handleTriggerKeydown);
+    this.menuEl?.removeEventListener("click", this._handleMenuClick);
+    this.menuEl?.removeEventListener("mouseover", this._handleSubmenuAlign);
+    if (this.options.hover) {
+      this.el.removeEventListener("mouseenter", this._handleMouseEnter);
+      this.el.removeEventListener("mouseleave", this._handleMouseLeave);
+      this.menuEl?.removeEventListener("mouseleave", this._handleMouseLeave);
+    } else {
+      this.el.removeEventListener("click", this._handleClick);
+    }
+  }
+  _setupTemporaryEventHandlers() {
+    document.body.addEventListener("click", this._handleDocumentClick);
+    document.body.addEventListener("touchmove", this._handleDocumentTouchmove, {
+      passive: true
+    });
+    this.menuEl?.addEventListener("keydown", this._handleMenuKeydown);
+    window.addEventListener("resize", this._handleWindowResize);
+  }
+  _removeTemporaryEventHandlers() {
+    document.body.removeEventListener("click", this._handleDocumentClick);
+    document.body.removeEventListener("touchmove", this._handleDocumentTouchmove);
+    this.menuEl?.removeEventListener("keydown", this._handleMenuKeydown);
+    window.removeEventListener("resize", this._handleWindowResize);
+  }
+  _setupAccessibility() {
+    if (!this.menuEl) return;
+    if (!this.menuEl.hasAttribute("role")) this.menuEl.setAttribute("role", "menu");
+    const menus = [this.menuEl, ...this.menuEl.querySelectorAll("menu")];
+    menus.forEach((menu) => {
+      if (!menu.hasAttribute("role")) menu.setAttribute("role", "menu");
+      if (menu.getAttribute("role") !== "menu") return;
+      menu.querySelectorAll(":scope > li").forEach((li) => {
+        if (li.classList.contains("divider")) {
+          if (!li.hasAttribute("role")) li.setAttribute("role", "separator");
+          return;
+        }
+        if (li.classList.contains("gap")) {
+          li.setAttribute("aria-hidden", "true");
+          return;
+        }
+        if (li.classList.contains("label") || li.classList.contains("optgroup")) {
+          if (!li.hasAttribute("role")) li.setAttribute("role", "presentation");
+          return;
+        }
+        if (!li.hasAttribute("role")) li.setAttribute("role", "menuitem");
+        if (li.classList.contains("disabled") && !li.hasAttribute("aria-disabled")) {
+          li.setAttribute("aria-disabled", "true");
+        }
+      });
+    });
+  }
+  _isSubmenuTriggerClick(target) {
+    if (!this.menuEl) return false;
+    const li = target.closest("li");
+    if (!li || !this.menuEl.contains(li)) return false;
+    const submenu = li.querySelector(":scope > menu");
+    if (!submenu) return false;
+    return !submenu.contains(target);
+  }
+  _setupSubmenus() {
+    this.menuEl?.querySelectorAll("li").forEach((li) => {
+      if (!li.querySelector(":scope > menu")) return;
+      const trigger = li.querySelector(":scope > a, :scope > button, :scope > span") ?? li;
+      trigger.setAttribute("aria-haspopup", "menu");
+      trigger.setAttribute("aria-expanded", "false");
+    });
+  }
+  _toggleSubmenu(li) {
+    const open = !li.classList.contains("open");
+    li.parentElement?.querySelectorAll(":scope > li.open").forEach((other) => {
+      if (other !== li) {
+        other.classList.remove("open", "submenu-start");
+        this._syncSubmenuAria(other, false);
+      }
+    });
+    li.classList.toggle("open", open);
+    if (open) this._alignSubmenu(li);
+    this._syncSubmenuAria(li, open);
+  }
+  _syncSubmenuAria(li, open) {
+    const trigger = li.querySelector(":scope > a, :scope > button, :scope > span") ?? li;
+    trigger.setAttribute("aria-expanded", open ? "true" : "false");
+  }
+  _alignSubmenu(li) {
+    const menu = li.querySelector(":scope > menu");
+    if (!menu) return;
+    li.classList.remove("submenu-start");
+    const rect = menu.getBoundingClientRect();
+    if (rect.left < 8 || rect.right > window.innerWidth - 8) li.classList.add("submenu-start");
+  }
+  _closeSubmenus() {
+    this.menuEl?.querySelectorAll("li.open").forEach((li) => {
+      li.classList.remove("open", "submenu-start");
+      this._syncSubmenuAria(li, false);
+    });
+  }
+  _containingSubmenu(e) {
+    const target = e.target;
+    if (!(target instanceof Element)) return null;
+    const submenu = target.closest("li > menu");
+    if (submenu instanceof HTMLElement && this.menuEl?.contains(submenu)) return submenu;
+    return null;
+  }
+  _focusedRow(e) {
+    const target = e.target;
+    if (!(target instanceof Element)) return null;
+    const li = target.closest("li");
+    if (li instanceof HTMLElement && this.menuEl?.contains(li)) return li;
+    return null;
+  }
+  _restoreInert() {
+    if (this._originalInert === null) this.menuEl?.removeAttribute("inert");
+    else this.menuEl?.setAttribute("inert", this._originalInert);
+  }
+  _focusRow(item) {
+    this.focusedIndex = Array.from(item.parentElement.children).indexOf(item);
+    item.focus({ preventScroll: true });
+    item.scrollIntoView({ block: "nearest", inline: "nearest" });
+  }
+  _resetMenuStyles() {
+    this.menuEl.style.display = "";
+    this._resetMenuPositioningStyles();
+    this.menuEl.style.transform = "";
+    this.menuEl.style.opacity = "";
+  }
+  _resetMenuPositioningStyles() {
+    this.menuEl.style.width = "";
+    this.menuEl.style.height = "";
+    this.menuEl.style.left = "";
+    this.menuEl.style.top = "";
+    this.menuEl.style.transformOrigin = "";
+  }
+  _moveMenuToElement(containerEl = null) {
+    if (this.options.container) {
+      this.options.container.append(this.menuEl);
+      return;
+    }
+    if (containerEl) {
+      if (!containerEl.contains(this.menuEl)) containerEl.append(this.menuEl);
+      return;
+    }
+    this.el.after(this.menuEl);
+  }
+  _makeMenuFocusable() {
+    if (!this.menuEl) return;
+    this.menuEl.popover = "";
+    this.menuEl.tabIndex = -1;
+    this.menuEl.querySelectorAll(":scope li, :scope > hr").forEach((el) => {
+      if (el instanceof HTMLHRElement || el.classList.contains("divider") || el.classList.contains("gap") || el.classList.contains("label") || el.classList.contains("optgroup")) {
+        el.setAttribute("tabindex", "-1");
+        return;
+      }
+      if (!el.getAttribute("tabindex")) el.setAttribute("tabindex", "0");
+    });
+  }
+  _focusInitialItem() {
+    if (!this.menuEl || !this.options.autoFocus) return;
+    const first = Array.from(this.menuEl.children).find(
+      (child) => child instanceof HTMLElement && child.tabIndex !== -1
+    );
+    if (!first) return;
+    this.focusedIndex = Array.from(this.menuEl.children).indexOf(first);
+    first.focus({ preventScroll: true });
+  }
+  _focusFocusedItem() {
+    if (this.focusedIndex >= 0 && this.focusedIndex < this.menuEl.children.length && this.options.autoFocus) {
+      this.menuEl.children[this.focusedIndex].focus({
+        preventScroll: true
+      });
+      this.menuEl.children[this.focusedIndex].scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+        inline: "nearest"
+      });
+    }
+  }
+  _getMenuPosition(closestOverflowParent) {
+    const triggerBRect = this.el.getBoundingClientRect();
+    const menuBRect = this.menuEl.getBoundingClientRect();
+    let idealHeight = menuBRect.height;
+    let idealWidth = menuBRect.width;
+    let idealXPos = triggerBRect.left - menuBRect.left;
+    let idealYPos = triggerBRect.top - menuBRect.top;
+    const menuBounds = {
+      left: idealXPos,
+      top: idealYPos,
+      height: idealHeight,
+      width: idealWidth
+    };
+    const alignments = Utils.checkPossibleAlignments(
+      this.el,
+      closestOverflowParent,
+      menuBounds,
+      this.options.coverTrigger ? 0 : triggerBRect.height
+    );
+    let verticalAlignment = "top";
+    let horizontalAlignment = this.options.alignment;
+    idealYPos += this.options.coverTrigger ? 0 : triggerBRect.height;
+    this.isScrollable = false;
+    if (!alignments.top) {
+      if (alignments.bottom) {
+        verticalAlignment = "bottom";
+        if (!this.options.coverTrigger) {
+          idealYPos -= triggerBRect.height;
+        }
+      } else {
+        this.isScrollable = true;
+        idealHeight -= 20;
+        if (alignments.spaceOnTop > alignments.spaceOnBottom) {
+          verticalAlignment = "bottom";
+          idealHeight += alignments.spaceOnTop;
+          idealYPos -= this.options.coverTrigger ? alignments.spaceOnTop - 20 : alignments.spaceOnTop - 20 + triggerBRect.height;
+        } else {
+          idealHeight += alignments.spaceOnBottom;
+        }
+      }
+    }
+    if (!alignments[horizontalAlignment]) {
+      const oppositeAlignment = horizontalAlignment === "left" ? "right" : "left";
+      if (alignments[oppositeAlignment]) {
+        horizontalAlignment = oppositeAlignment;
+      } else {
+        if (alignments.spaceOnLeft > alignments.spaceOnRight) {
+          horizontalAlignment = "right";
+          idealWidth += alignments.spaceOnLeft;
+          idealXPos -= alignments.spaceOnLeft;
+        } else {
+          horizontalAlignment = "left";
+          idealWidth += alignments.spaceOnRight;
+        }
+      }
+    }
+    if (verticalAlignment === "bottom") {
+      idealYPos = idealYPos - menuBRect.height + (this.options.coverTrigger ? triggerBRect.height : 0);
+    }
+    if (horizontalAlignment === "right") {
+      idealXPos = idealXPos - menuBRect.width + triggerBRect.width;
+    }
+    return {
+      x: idealXPos,
+      y: idealYPos,
+      verticalAlignment,
+      horizontalAlignment,
+      height: idealHeight,
+      width: idealWidth
+    };
+  }
+  _schedule(callback, delay) {
+    const timer = setTimeout(() => {
+      this._pendingTimers.delete(timer);
+      callback();
+    }, delay);
+    this._pendingTimers.add(timer);
+  }
+  _clearPendingTimers() {
+    for (const timer of this._pendingTimers) clearTimeout(timer);
+    this._pendingTimers.clear();
+    return ++this._transition;
+  }
+  _animateIn() {
+    const transition = this._transition;
+    const duration = this.options.inDuration;
+    this.menuEl.style.transition = "none";
+    this.menuEl.style.opacity = "0";
+    this.menuEl.style.transform = "scale(0.85)";
+    this._schedule(() => {
+      this.menuEl.style.transition = `opacity ${duration}ms ease, transform ${duration}ms ease`;
+      this.menuEl.style.opacity = "1";
+      this.menuEl.style.transform = "scale(1)";
+    }, 1);
+    this._schedule(() => {
+      this._focusInitialItem();
+      if (transition !== this._transition) return;
+      if (typeof this.options.onOpenEnd === "function") this.options.onOpenEnd.call(this, this.el);
+    }, duration);
+  }
+  _animateOut() {
+    const duration = this.options.outDuration;
+    this.menuEl.style.transition = `opacity ${duration}ms ease, transform ${duration}ms ease`;
+    this.menuEl.style.opacity = "0";
+    this.menuEl.style.transform = "scale(0.85)";
+    this._schedule(() => {
+      this._resetMenuStyles();
+      if (typeof this.options.onCloseEnd === "function")
+        this.options.onCloseEnd.call(this, this.el);
+    }, duration);
+  }
+  _getClosestAncestor(el, condition) {
+    let ancestor = el.parentNode;
+    while (ancestor !== null && ancestor !== void 0 && ancestor !== document) {
+      if (ancestor.nodeType === Node.ELEMENT_NODE && condition(ancestor)) {
+        return ancestor;
+      }
+      ancestor = ancestor.parentNode ?? ancestor.host;
+    }
+    return null;
+  }
+  _placeMenu() {
+    let closestOverflowParent = this._getClosestAncestor(
+      this.menuEl,
+      (ancestor) => {
+        return !["HTML", "BODY"].includes(ancestor.tagName) && getComputedStyle(ancestor).overflow !== "visible";
+      }
+    );
+    if (!closestOverflowParent) {
+      const parent = !!this.menuEl.offsetParent ? this.menuEl.offsetParent : this.menuEl.parentNode;
+      closestOverflowParent = parent.host ?? parent;
+    }
+    if (getComputedStyle(closestOverflowParent).position === "static")
+      closestOverflowParent.style.position = "relative";
+    const natural = this.menuEl.getBoundingClientRect().width;
+    const triggerWidth = this.el.getBoundingClientRect().width;
+    const idealWidth = this.options.constrainWidth && triggerWidth >= MIN_SURFACE_WIDTH ? triggerWidth : Math.min(MAX_SURFACE_WIDTH, Math.max(MIN_SURFACE_WIDTH, natural));
+    this.menuEl.style.width = idealWidth + "px";
+    const positionInfo = this._getMenuPosition(closestOverflowParent);
+    this.menuEl.style.left = positionInfo.x + "px";
+    this.menuEl.style.top = positionInfo.y + "px";
+    this.menuEl.style.height = positionInfo.height + "px";
+    this.menuEl.style.width = positionInfo.width + "px";
+    this.menuEl.style.transformOrigin = `${positionInfo.horizontalAlignment === "left" ? "0" : "100%"} ${positionInfo.verticalAlignment === "top" ? "0" : "100%"}`;
+  }
+};
+_Menu._menus = [];
+var Menu = _Menu;
+
+export {
+  Menu
+};
+//# sourceMappingURL=chunk-TK6PX2GC.mjs.map