@fabric-msft/fabric-web 4.0.0 → 5.0.1

package/dist/esm/components/menu/menu.js

@@ -1,6 +1,7 @@
 import { attr, observable, FASTElement, Updates } from '@microsoft/fast-element';
 import { keyEnter, keySpace, keyEscape } from '@microsoft/fast-web-utilities';
-import { debounce } from '../../utils/debounce.js';
+import { debounce } from '../../util/debounce.js';
+import '../menu-list/menu-list.js';
 import { MenuPositions, MenuRepositionModes } from './menu.options.js';
 import { MenuPositioning } from './menu.positioning.js';
 
@@ -15,6 +16,12 @@ var __decorate = globalThis && globalThis.__decorate || function (decorators, ta
  * Menu
  * @summary A Menu component that provides an interactive menu interface with support for various trigger and open behaviors.
  *
+ * When `reposition-mode="auto"` is set the component creates a {@link MenuPositioning} manager backed by
+ * `FlexiblePositionStrategy`. On every open/resize/scroll cycle the strategy measures available space, picks
+ * the best-fitting position from the preferred position plus its fallbacks, and resizes the menu if there is
+ * not enough available space. Supply `overflowBoundary` to scope collision detection to a specific scrolling
+ * container instead of the viewport.
+ *
  * @example
  * ```html
  * <fabric-menu open-on-hover="true" open-on-context="true" close-on-scroll="true" persist-on-item-click="true">
@@ -32,8 +39,10 @@ var __decorate = globalThis && globalThis.__decorate || function (decorators, ta
  * @attr {boolean | undefined} close-on-scroll - Determines if the menu should close on scroll.
  * @attr {boolean | undefined} persist-on-item-click - Determines if the menu open state should persist on click of a menu item.
  * @attr {boolean | undefined} split - Determines if the menu is in split state (for split button pattern).
- * @attr {MenuPosition | undefined} menu-position - Determines whether the menu list is above or below the trigger.
- * @attr {MenuRepositionMode | undefined} reposition-mode - The mode for repositioning the menu. Default is "none".
+ * @attr {MenuPosition | undefined} menu-position - Determines whether the menu list is above or below the trigger. Defaults to `"below"`.
+ * @attr {MenuRepositionMode | undefined} reposition-mode - Controls JS-based repositioning. `"auto"` enables
+ *   `FlexiblePositionStrategy` which detects collisions and flips the menu to the best-fitting position on
+ *   every resize/scroll cycle. `"none"` (default) disables JS repositioning and relies on CSS anchored positioning.
  *
  * @prop {boolean | undefined} openOnHover - Determines if the menu should open on hover.
  * @prop {boolean | undefined} openOnContext - Determines if the menu should open on right click.
@@ -42,9 +51,12 @@ var __decorate = globalThis && globalThis.__decorate || function (decorators, ta
  * @prop {boolean | undefined} split - Determines if the menu is in split state.
  * @prop {MenuList[]} slottedMenuList - Holds the slotted menu list.
  * @prop {HTMLElement[]} slottedTriggers - Holds the slotted triggers.
- * @prop {MenuPosition | undefined} menuPosition - Determines whether the menu list is above or below the trigger.
- * @prop {MenuRepositionMode | undefined} repositionMode - The mode for repositioning the menu.
- * @prop {HTMLElement | undefined} overflowBoundary - The overflow boundary element reference.
+ * @prop {MenuPosition | undefined} menuPosition - Reflects the active resolved position (`"above"` or `"below"`). May
+ *   differ from the authored `menu-position` attribute when `reposition-mode="auto"` has flipped the menu.
+ * @prop {MenuRepositionMode | undefined} repositionMode - The active repositioning mode (`"auto"` | `"none"`).
+ * @prop {HTMLElement | undefined} overflowBoundary - An optional scrolling container used by the
+ *   `FlexiblePositionStrategy` as the collision boundary instead of the viewport. Only relevant when
+ *   `reposition-mode="auto"`.
  *
  * @slot primary-action - Slot for the primary action element (used when split is true).
  * @slot trigger - Slot for the trigger element.
@@ -72,10 +84,10 @@ class Menu extends FASTElement {
   constructor() {
     super(...arguments);
     /**
-     * The array of open positions based on collision detection.
+     * The positioning instance for the menu.
      * @private
      */
-    this.openPositions = [];
+    this.positioning = null;
     /**
      * Determines if the menu should open on hover.
      * @public
@@ -108,8 +120,15 @@ class Menu extends FASTElement {
     this.menuPosition = MenuPositions.below;
     /**
      * The mode for repositioning the menu when it overflows the boundary.
+     *
+     * - `"none"` (default) — no JS-based repositioning; positioning is handled entirely by CSS anchored positioning.
+     * - `"auto"` — enables `FlexiblePositionStrategy`. On every open, resize, and scroll event the strategy
+     *   measures available space, picks the best-fitting position from the preferred position plus its fallbacks,
+     *   and re-applies layout. When the chosen position is `"above"`, bottom-anchored positioning keeps the
+     *   menu's bottom edge pinned to the anchor's top edge so that height constraints shrink it upward.
+     *
      * @public
-     * @default "auto"
+     * @default "none"
      */
     this.repositionMode = MenuRepositionModes.none;
     /**
@@ -128,111 +147,75 @@ class Menu extends FASTElement {
      */
     this._open = false;
     /**
-     * Creates the overflow handler using IntersectionObserver.
-     * Note: When a custom overflowBoundary is set, we use direct rect calculations
-     * instead because popovers render in the top layer and IntersectionObserver
-     * with a custom root won't work correctly.
-     * @private
-     */
-    this.createOverflowHandler = () => {
-      // Only use IntersectionObserver when no custom boundary is set
-      // (uses document/viewport as root)
-      if (!this.overflowBoundary) {
-        const options = {
-          root: document
-        };
-        this.intersectionObserver = new IntersectionObserver(this.handleOverflow, options);
-      }
-    };
-    /**
-     * Checks overflow against custom boundary using direct rect calculations.
-     * Delegates to MenuPositioning for the actual calculation.
+     * Internal open handler used by multiple entry points.
      * @private
      */
-    this.checkOverflowWithBoundary = () => {
-      if (!this.positioning || !this._menuList || !this.overflowBoundary) {
+    this.openMenuInternal = e => {
+      if (this._open) {
         return;
       }
-      const {
-        hasOverflow,
-        suggestedPosition
-      } = this.positioning.checkOverflowWithBoundary();
-      if (hasOverflow) {
-        if (suggestedPosition) {
-          this.openPositions = [suggestedPosition];
-          this.repositionMenu(this.openPositions);
-        }
-        // Apply height constraint if still needed
-        this.applyHeightConstraint();
-      } else {
-        // Menu fits, release any previous constraints
-        if (this.openPositions.length > 0) {
-          this.releasePositions();
-          this.clearHeightConstraint();
-        }
+      if (this.repositionMode == MenuRepositionModes.auto) {
+        this.addRepositioningHandlers();
+        this.createPositioningManager();
+        this.scheduleReposition();
       }
-    };
-    /**
-     * Handles overflow collisions with the menu.
-     * @private
-     */
-    this.handleOverflow = entries => {
-      if (this.positioning) {
-        this.positioning.position = this.originalMenuPosition || this.menuPosition || MenuPositions.below;
+      this.setMenuOpenState(true);
+      this.focusMenuList();
+      if (e && this.openOnContext) {
+        e.preventDefault();
+      }
+      document.addEventListener("click", this.documentClickHandler);
+      if (this.closeOnScroll) {
+        document.addEventListener("scroll", this.closeMenu);
       }
-      entries.forEach(entry => {
-        if (entry.intersectionRatio < 1 && this.positioning) {
-          // Try to reposition (flip) first
-          this.openPositions = this.positioning.findOpenPositionsFromCollision(entry);
-          if (this.openPositions.length > 0) {
-            this.repositionMenu(this.openPositions);
-          }
-          // After repositioning, constrain height if still needed
-          this.applyHeightConstraint();
-        } else if (this.openPositions.length > 0) {
-          this.releasePositions();
-          this.clearHeightConstraint();
-        }
-      });
     };
     /**
-     * Repositions the menu based on collisions.
+     * Internal close handler used by multiple entry points.
      * @private
      */
-    this.repositionMenu = openPositions => {
-      this.menuPosition = openPositions[0];
-      if (this.positioning) {
-        this.positioning.position = this.menuPosition;
+    this.closeMenuInternal = () => {
+      if (!this._open) {
+        return;
+      }
+      this.setMenuOpenState(false);
+      this.removeRepositioningListeners();
+      document.removeEventListener("click", this.documentClickHandler);
+      if (this.closeOnScroll) {
+        document.removeEventListener("scroll", this.closeMenu);
       }
     };
     /**
-     * Updates the menu position on window changes.
+     * Delegates resize + flip logic to the positioning strategy.
      * @private
      */
-    this.updateMenuPosition = () => {
-      if (this._open) {
-        this.observeMenuOverflow();
+    this.repositionMenu = () => {
+      var _a;
+      if (!this.positioning || !this._menuList) {
+        return;
       }
+      this.positioning.position = (_a = this.menuPosition) !== null && _a !== void 0 ? _a : MenuPositions.below;
+      this.positioning.reposition();
     };
     /**
-     * Debounced handler for window changes.
+     * Debounced handler for window resize/scroll changes.
      * @private
      */
     this.handleWindowChanges = debounce(() => {
-      this.updateMenuPosition();
+      if (this._open) {
+        this.scheduleReposition();
+      }
     }, 50);
     /**
      * Toggles the open state of the menu.
      * @public
      */
     this.toggleMenu = () => {
-      var _a;
       this.setComponent();
-      (_a = this._menuList) === null || _a === void 0 ? void 0 : _a.togglePopover(!this._open);
       if (this._open) {
-        this.focusMenuList();
-      } else {
+        this.closeMenuInternal();
         this.focusTrigger();
+      } else {
+        this.openMenuInternal();
       }
     };
     /**
@@ -240,57 +223,14 @@ class Menu extends FASTElement {
      * @public
      */
     this.closeMenu = () => {
-      var _a;
-      if (this._open) {
-        (_a = this._menuList) === null || _a === void 0 ? void 0 : _a.togglePopover(false);
-      }
-      if (this.closeOnScroll) {
-        document.removeEventListener("scroll", this.closeMenu);
-      }
+      this.closeMenuInternal();
     };
     /**
      * Opens the menu.
      * @public
      */
     this.openMenu = e => {
-      var _a;
-      if (!this._open) {
-        (_a = this._menuList) === null || _a === void 0 ? void 0 : _a.togglePopover(true);
-      }
-      if (e && this.openOnContext) {
-        e.preventDefault();
-      }
-      if (this.closeOnScroll) {
-        document.addEventListener("scroll", this.closeMenu);
-      }
-    };
-    /**
-     * Handles the 'toggle' event on the popover.
-     * @public
-     * @param e - the event
-     * @returns void
-     */
-    this.toggleHandler = e => {
-      var _a;
-      if ("newState" in e) {
-        const event = e;
-        const newState = event.newState === "open" ? true : false;
-        (_a = this._trigger) === null || _a === void 0 ? void 0 : _a.setAttribute("aria-expanded", `${newState}`);
-        this._open = newState;
-        if (newState) {
-          // Menu is opening - add repositioning handlers
-          if (!this.originalMenuPosition) {
-            this.originalMenuPosition = this.menuPosition;
-          }
-          this.addRepositioningHandlers();
-          this.createPositioningManager();
-          this.observeMenuOverflow();
-          this.focusMenuList();
-        } else {
-          // Menu is closing - remove repositioning handlers
-          this.removeRepositioningListeners();
-        }
-      }
+      this.openMenuInternal(e);
     };
     /**
      * Handles keyboard interaction for the trigger. Toggles the menu when the Space or Enter key is pressed. If the menu
@@ -314,84 +254,75 @@ class Menu extends FASTElement {
       }
     };
     /**
-     * Handles document click events to close a menu opened with contextmenu in popover="manual" mode.
+     * Handles document click events to close the menu when clicking outside (light dismiss).
      * @internal
      * @param e - The event triggered on document click.
      */
     this.documentClickHandler = e => {
+      if (!this._open) {
+        return;
+      }
       if (!e.composedPath().some(el => el === this._trigger || el === this._menuList)) {
         this.closeMenu();
       }
     };
   }
   /**
-   * Applies height constraint to make menu scrollable when space is limited.
-   * @private
+   * Handles changes to the menuPosition attribute.
+   * Updates the positioning strategy and triggers a reposition if
+   * the menu is currently open, without mutating the public attribute.
+   * @public
    */
-  applyHeightConstraint() {
-    if (!this.positioning || !this._menuList) {
-      return;
+  menuPositionChanged() {
+    var _a;
+    if (this.positioning) {
+      this.positioning.position = (_a = this.menuPosition) !== null && _a !== void 0 ? _a : MenuPositions.below;
     }
-    const {
-      needsConstraint,
-      maxHeight
-    } = this.positioning.calculateConstrainedHeight();
-    if (needsConstraint && maxHeight !== null) {
-      this.style.setProperty("--menu-max-height", `${maxHeight}px`);
-      this._menuList.style.overflow = "auto";
-    } else {
-      this.clearHeightConstraint();
+    if (this._open) {
+      this.scheduleReposition();
     }
   }
   /**
-   * Clears height constraint from the menu.
-   * @private
+   * Handles menu list slot changes.
+   * @internal
    */
-  clearHeightConstraint() {
-    this.style.removeProperty("--menu-max-height");
-    if (this._menuList) {
-      this._menuList.style.overflow = "";
+  slottedMenuListChanged() {
+    this.setComponent();
+    if (this._open) {
+      this.scheduleReposition();
     }
   }
   /**
-   * Releases positions and restores original if valid.
-   * @private
+   * Handles trigger slot changes.
+   * @internal
    */
-  releasePositions() {
-    this.openPositions = [];
-    if (this.positioning) {
-      for (const key in MenuPositions) {
-        const position = MenuPositions[key];
-        const positionOpen = this.positioning.checkPosition(position);
-        if (positionOpen) {
-          this.openPositions.push(position);
-          if (position === this.originalMenuPosition) {
-            this.menuPosition = this.originalMenuPosition;
-          }
-        }
-      }
+  slottedTriggersChanged() {
+    this.setComponent();
+    if (this._open) {
+      this.scheduleReposition();
     }
   }
   /**
-   * Observes the menu for overflow.
+   * Updates menu list open state and ARIA expanded.
    * @private
    */
-  observeMenuOverflow() {
-    var _a, _b;
-    if (this.overflowBoundary) {
-      // Use direct rect calculations for custom boundary
-      // Need a small delay to ensure menu is rendered and positioned
-      requestAnimationFrame(() => {
-        this.checkOverflowWithBoundary();
-      });
-    } else {
-      // Use IntersectionObserver for viewport
-      (_a = this.intersectionObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-      if (this._menuList) {
-        (_b = this.intersectionObserver) === null || _b === void 0 ? void 0 : _b.observe(this._menuList);
-      }
+  setMenuOpenState(isOpen) {
+    var _a;
+    this._open = isOpen;
+    (_a = this._trigger) === null || _a === void 0 ? void 0 : _a.setAttribute("aria-expanded", `${isOpen}`);
+    if (this._menuList) {
+      this._menuList.classList.toggle("menu-open", isOpen);
     }
   }
+  /**
+   * Schedules a reposition on the next microtask.
+   * @private
+   */
+  scheduleReposition() {
+    Updates.enqueue(() => {
+      this.repositionMenu();
+    });
+  }
   /**
    * Adds window event listeners.
    * @private
@@ -423,7 +354,6 @@ class Menu extends FASTElement {
    */
   addRepositioningHandlers() {
     if (this.repositionMode !== MenuRepositionModes.none) {
-      this.createOverflowHandler();
       this.addWindowEventListeners();
       this.addOverflowBoundaryEventListeners();
     }
@@ -434,11 +364,11 @@ class Menu extends FASTElement {
    */
   createPositioningManager() {
     if (this._menuList && this._trigger && this.repositionMode !== MenuRepositionModes.none) {
+      this.positioning = null;
       this.positioning = new MenuPositioning({
         menuReference: this._menuList,
         anchorReference: this._trigger,
-        overflowBoundaryReference: this.overflowBoundary,
-        repositionMode: this.repositionMode
+        overflowBoundaryReference: this.overflowBoundary
       });
     }
   }
@@ -447,11 +377,8 @@ class Menu extends FASTElement {
    * @private
    */
   removeRepositioningListeners() {
-    var _a;
     if (this._menuList) {
       this.removeWindowEventListeners();
-      (_a = this.intersectionObserver) === null || _a === void 0 ? void 0 : _a.unobserve(this._menuList);
-      this.clearHeightConstraint();
     }
   }
   /**
@@ -462,7 +389,6 @@ class Menu extends FASTElement {
     super.connectedCallback();
     Updates.enqueue(() => {
       this.setComponent();
-      this.setMenuPosition();
     });
   }
   /**
@@ -473,6 +399,8 @@ class Menu extends FASTElement {
     super.disconnectedCallback();
     this.removeListeners();
     this.removeRepositioningListeners();
+    document.removeEventListener("click", this.documentClickHandler);
+    document.removeEventListener("scroll", this.closeMenu);
   }
   /**
    * Sets the component.
@@ -484,19 +412,10 @@ class Menu extends FASTElement {
       this._menuList = this.slottedMenuList[0];
       this._trigger.setAttribute("aria-haspopup", "true");
       this._trigger.setAttribute("aria-expanded", `${this._open}`);
-      this._menuList.setAttribute("popover", this.openOnContext ? "manual" : "");
+      this._menuList.setAttribute("data-menu-list", "");
       this.addListeners();
     }
   }
-  /**
-   * Sets the menu position.
-   * @public
-   */
-  setMenuPosition() {
-    if (this.$fastController.isConnected) {
-      this.style.setProperty("--menu-position-area", this.menuPosition === MenuPositions.above ? "block-start span-inline-end" : "block-end span-inline-end");
-    }
-  }
   /**
    * Focuses on the menu list.
    * @public
@@ -523,7 +442,7 @@ class Menu extends FASTElement {
    * @param newValue - The new value of 'openOnHover'.
    * @public
    */
-  openOnHoverChanged(oldValue, newValue) {
+  openOnHoverChanged(_oldValue, newValue) {
     var _a, _b;
     if (newValue) {
       (_a = this._trigger) === null || _a === void 0 ? void 0 : _a.addEventListener("mouseover", this.openMenu);
@@ -538,7 +457,7 @@ class Menu extends FASTElement {
    * @param oldValue - The previous value of 'persistOnItemClick'.
    * @param newValue - The new value of 'persistOnItemClick'.
    */
-  persistOnItemClickChanged(oldValue, newValue) {
+  persistOnItemClickChanged(_oldValue, newValue) {
     var _a, _b;
     if (!newValue) {
       (_a = this._menuList) === null || _a === void 0 ? void 0 : _a.addEventListener("change", this.closeMenu);
@@ -547,25 +466,40 @@ class Menu extends FASTElement {
     }
   }
   /**
-   * Called whenever the 'menuPosition' property changes.
+   * Called whenever the 'repositionMode' property changes.
    *
-   * @param oldValue - The previous value of 'menuPosition'.
-   * @param newValue - The new value of 'menuPosition'.
    * @public
+   * @param oldValue - The previous value of 'repositionMode'.
+   * @param newValue - The new value of 'repositionMode'.
    */
-  menuPositionChanged() {
-    this.setMenuPosition();
+  repositionModeChanged(_oldValue, newValue) {
+    if (newValue === MenuRepositionModes.none) {
+      this.positioning = null;
+    } else if (!this.positioning && this._open) {
+      this.createPositioningManager();
+    }
+    if (this._open) {
+      this.scheduleReposition();
+    }
   }
   /**
-   * Called whenever the 'repositionMode' property changes.
+   * Called whenever the 'overflowBoundary' property changes.
    *
    * @public
-   * @param oldValue - The previous value of 'repositionMode'.
-   * @param newValue - The new value of 'repositionMode'.
    */
-  repositionModeChanged(oldValue, newValue) {
-    if (this.positioning) {
-      this.positioning.repositionMode = newValue;
+  overflowBoundaryChanged(oldValue, newValue) {
+    var _a;
+    if (oldValue) {
+      oldValue.removeEventListener("scroll", this.handleWindowChanges);
+    }
+    if (this._open && this.repositionMode !== MenuRepositionModes.none) {
+      if (newValue) {
+        newValue.addEventListener("scroll", this.handleWindowChanges);
+      }
+      (_a = this.positioning) === null || _a === void 0 ? void 0 : _a.setOverflowBoundaryReference(newValue !== null && newValue !== void 0 ? newValue : null);
+      this.scheduleReposition();
+    } else if (this.positioning) {
+      this.positioning.setOverflowBoundaryReference(newValue !== null && newValue !== void 0 ? newValue : null);
     }
   }
   /**
@@ -575,7 +509,7 @@ class Menu extends FASTElement {
    * @param oldValue - The previous value of 'openOnContext'.
    * @param newValue - The new value of 'openOnContext'.
    */
-  openOnContextChanged(oldValue, newValue) {
+  openOnContextChanged(_oldValue, newValue) {
     var _a, _b;
     if (newValue) {
       (_a = this._trigger) === null || _a === void 0 ? void 0 : _a.addEventListener("contextmenu", this.openMenu);
@@ -590,7 +524,7 @@ class Menu extends FASTElement {
    * @param oldValue - The previous value of 'closeOnScroll'.
    * @param newValue - The new value of 'closeOnScroll'.
    */
-  closeOnScrollChanged(oldValue, newValue) {
+  closeOnScrollChanged(_oldValue, newValue) {
     if (newValue) {
       document.addEventListener("scroll", this.closeMenu);
     } else {
@@ -603,19 +537,17 @@ class Menu extends FASTElement {
    * @internal
    */
   addListeners() {
-    var _a, _b, _c, _d, _e, _f;
-    (_a = this._menuList) === null || _a === void 0 ? void 0 : _a.addEventListener("toggle", this.toggleHandler);
-    (_b = this._trigger) === null || _b === void 0 ? void 0 : _b.addEventListener("keydown", this.triggerKeydownHandler);
+    var _a, _b, _c, _d, _e;
+    (_a = this._trigger) === null || _a === void 0 ? void 0 : _a.addEventListener("keydown", this.triggerKeydownHandler);
     if (!this.persistOnItemClick) {
-      (_c = this._menuList) === null || _c === void 0 ? void 0 : _c.addEventListener("change", this.closeMenu);
+      (_b = this._menuList) === null || _b === void 0 ? void 0 : _b.addEventListener("change", this.closeMenu);
     }
     if (this.openOnHover) {
-      (_d = this._trigger) === null || _d === void 0 ? void 0 : _d.addEventListener("mouseover", this.openMenu);
+      (_c = this._trigger) === null || _c === void 0 ? void 0 : _c.addEventListener("mouseover", this.openMenu);
     } else if (this.openOnContext) {
-      (_e = this._trigger) === null || _e === void 0 ? void 0 : _e.addEventListener("contextmenu", this.openMenu);
-      document.addEventListener("click", this.documentClickHandler);
+      (_d = this._trigger) === null || _d === void 0 ? void 0 : _d.addEventListener("contextmenu", this.openMenu);
     } else {
-      (_f = this._trigger) === null || _f === void 0 ? void 0 : _f.addEventListener("click", this.toggleMenu);
+      (_e = this._trigger) === null || _e === void 0 ? void 0 : _e.addEventListener("click", this.toggleMenu);
     }
   }
   /**
@@ -624,20 +556,18 @@ class Menu extends FASTElement {
    * @internal
    */
   removeListeners() {
-    var _a, _b, _c, _d, _e, _f;
-    (_a = this._menuList) === null || _a === void 0 ? void 0 : _a.removeEventListener("toggle", this.toggleHandler);
-    (_b = this._trigger) === null || _b === void 0 ? void 0 : _b.removeEventListener("keydown", this.triggerKeydownHandler);
+    var _a, _b, _c, _d, _e;
+    (_a = this._trigger) === null || _a === void 0 ? void 0 : _a.removeEventListener("keydown", this.triggerKeydownHandler);
     if (!this.persistOnItemClick) {
-      (_c = this._menuList) === null || _c === void 0 ? void 0 : _c.removeEventListener("change", this.closeMenu);
+      (_b = this._menuList) === null || _b === void 0 ? void 0 : _b.removeEventListener("change", this.closeMenu);
     }
     if (this.openOnHover) {
-      (_d = this._trigger) === null || _d === void 0 ? void 0 : _d.removeEventListener("mouseover", this.openMenu);
+      (_c = this._trigger) === null || _c === void 0 ? void 0 : _c.removeEventListener("mouseover", this.openMenu);
     }
     if (this.openOnContext) {
-      (_e = this._trigger) === null || _e === void 0 ? void 0 : _e.removeEventListener("contextmenu", this.openMenu);
-      document.removeEventListener("click", this.documentClickHandler);
+      (_d = this._trigger) === null || _d === void 0 ? void 0 : _d.removeEventListener("contextmenu", this.openMenu);
     } else {
-      (_f = this._trigger) === null || _f === void 0 ? void 0 : _f.removeEventListener("click", this.toggleMenu);
+      (_e = this._trigger) === null || _e === void 0 ? void 0 : _e.removeEventListener("click", this.toggleMenu);
     }
   }
   /**
@@ -647,7 +577,6 @@ class Menu extends FASTElement {
    * @public
    */
   menuKeydownHandler(e) {
-    var _a;
     if (e.defaultPrevented) {
       return;
     }
@@ -656,7 +585,7 @@ class Menu extends FASTElement {
       case keyEscape:
         e.preventDefault();
         if (this._open) {
-          (_a = this._menuList) === null || _a === void 0 ? void 0 : _a.togglePopover(false);
+          this.closeMenuInternal();
           this.focusTrigger();
         }
         break;