@fabric-msft/fabric-web 4.0.0-beta.1 → 5.0.0

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

@@ -1,11 +1,17 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
+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 '../menu-list/menu-list.js';
+import { MenuPositions, MenuRepositionModes } from './menu.options.js';
+import { MenuPositioning } from './menu.positioning.js';
+
+var __decorate = globalThis && globalThis.__decorate || function (decorators, target, key, desc) {
+  var c = arguments.length,
+    r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
+    d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { attr, FASTElement, observable, Updates } from "@microsoft/fast-element";
-import { keyEnter, keyEscape, keySpace } from "@microsoft/fast-web-utilities";
 /**
  * Menu
  * @summary A Menu component that provides an interactive menu interface with support for various trigger and open behaviors.
@@ -26,14 +32,22 @@ import { keyEnter, keyEscape, keySpace } from "@microsoft/fast-web-utilities";
  * @attr {boolean | undefined} open-on-context - Determines if the menu should open on right click.
  * @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".
  *
  * @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.
  * @prop {boolean | undefined} closeOnScroll - Determines if the menu should close on scroll.
  * @prop {boolean | undefined} persistOnItemClick - Determines if the menu open state should persist on click of a menu item.
+ * @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.
  *
+ * @slot primary-action - Slot for the primary action element (used when split is true).
  * @slot trigger - Slot for the trigger element.
  * @slot - Default slot for the menu list.
  *
@@ -55,339 +69,630 @@ import { keyEnter, keyEscape, keySpace } from "@microsoft/fast-web-utilities";
  * @tagname fabric-menu
  * @public
  */
-export class Menu extends FASTElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * Determines if the menu should open on hover.
-         * @public
-         */
-        this.openOnHover = false;
-        /**
-         * Determines if the menu should open on right click.
-         * @public
-         */
-        this.openOnContext = false;
-        /**
-         * Determines if the menu should close on scroll.
-         * @public
-         */
-        this.closeOnScroll = false;
-        /**
-         * Determines if the menu open state should persis on click of menu item
-         * @public
-         */
-        this.persistOnItemClick = false;
-        /**
-         * Holds the slotted menu list.
-         * @public
-         */
-        this.slottedMenuList = [];
-        /**
-         * Holds the slotted triggers.
-         * @public
-         */
-        this.slottedTriggers = [];
-        /**
-         * Defines whether the menu is open or not.
-         * @internal
-         */
-        this._open = false;
-        /**
-         * 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.focusTrigger();
-            }
-        };
-        /**
-         * Closes the menu.
-         * @public
-         */
-        this.closeMenu = (event) => {
-            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);
-            }
-        };
-        /**
-         * 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;
-                this.focusMenuList();
-            }
-        };
-        /**
-         * Handles keyboard interaction for the trigger. Toggles the menu when the Space or Enter key is pressed. If the menu
-         *
-         * @param e - the keyboard event
-         * @public
-         */
-        this.triggerKeydownHandler = (e) => {
-            if (e.defaultPrevented) {
-                return;
-            }
-            const key = e.key;
-            switch (key) {
-                case keySpace:
-                case keyEnter:
-                    e.preventDefault();
-                    this.toggleMenu();
-                    break;
-                default:
-                    return true;
-            }
-        };
-        /**
-         * Handles document click events to close a menu opened with contextmenu in popover="manual" mode.
-         * @internal
-         * @param e - The event triggered on document click.
-         */
-        this.documentClickHandler = (e) => {
-            if (!e
-                .composedPath()
-                .some((el) => el === this._trigger || el === this._menuList)) {
-                this.closeMenu();
-            }
-        };
-    }
+class Menu extends FASTElement {
+  constructor() {
+    super(...arguments);
+    /**
+     * The array of open positions based on collision detection.
+     * @private
+     */
+    this.openPositions = [];
     /**
-     * Called when the element is connected to the DOM.
+     * Determines if the menu should open on hover.
      * @public
      */
-    connectedCallback() {
-        super.connectedCallback();
-        Updates.enqueue(() => this.setComponent());
-    }
+    this.openOnHover = false;
     /**
-     * Called when the element is disconnected from the DOM.
+     * Determines if the menu should open on right click.
      * @public
      */
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.removeListeners();
-    }
+    this.openOnContext = false;
     /**
-     * Sets the component.
+     * Determines if the menu should close on scroll.
      * @public
      */
-    setComponent() {
-        if (this.$fastController.isConnected &&
-            this.slottedMenuList.length &&
-            this.slottedTriggers.length) {
-            this._trigger = this.slottedTriggers[0];
-            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.addListeners();
-        }
-    }
+    this.closeOnScroll = false;
     /**
-     * Focuses on the menu list.
+     * Determines if the menu open state should persis on click of menu item
      * @public
      */
-    focusMenuList() {
-        Updates.enqueue(() => {
-            const list = this._menuList;
-            list.focus();
-        });
-    }
+    this.persistOnItemClick = false;
     /**
-     * Focuses on the menu trigger.
+     * Determines if the menu is in split state (for split button pattern).
      * @public
      */
-    focusTrigger() {
-        Updates.enqueue(() => {
-            this._trigger.focus();
-        });
-    }
+    this.split = false;
     /**
-     * Called whenever the 'openOnHover' property changes.
-     *
-     * @param oldValue - The previous value of 'openOnHover'.
-     * @param newValue - The new value of 'openOnHover'.
+     * Determines whether the menu list is above or below the trigger.
      * @public
      */
-    openOnHoverChanged(oldValue, newValue) {
-        var _a, _b;
-        if (newValue) {
-            (_a = this._trigger) === null || _a === void 0 ? void 0 : _a.addEventListener("mouseover", this.openMenu);
-        }
-        else {
-            (_b = this._trigger) === null || _b === void 0 ? void 0 : _b.removeEventListener("mouseover", this.openMenu);
-        }
-    }
+    this.menuPosition = MenuPositions.below;
     /**
-     * Called whenever the 'persistOnItemClick' property changes.
-     *
+     * The mode for repositioning the menu when it overflows the boundary.
      * @public
-     * @param oldValue - The previous value of 'persistOnItemClick'.
-     * @param newValue - The new value of 'persistOnItemClick'.
+     * @default "auto"
      */
-    persistOnItemClickChanged(oldValue, newValue) {
-        var _a, _b;
-        if (!newValue) {
-            (_a = this._menuList) === null || _a === void 0 ? void 0 : _a.addEventListener("change", this.closeMenu);
-        }
-        else {
-            (_b = this._menuList) === null || _b === void 0 ? void 0 : _b.removeEventListener("change", this.closeMenu);
-        }
-    }
+    this.repositionMode = MenuRepositionModes.none;
     /**
-     * Called whenever the 'openOnContext' property changes.
-     *
+     * Holds the slotted menu list.
      * @public
-     * @param oldValue - The previous value of 'openOnContext'.
-     * @param newValue - The new value of 'openOnContext'.
      */
-    openOnContextChanged(oldValue, newValue) {
-        var _a, _b;
-        if (newValue) {
-            (_a = this._trigger) === null || _a === void 0 ? void 0 : _a.addEventListener("contextmenu", this.openMenu);
-        }
-        else {
-            (_b = this._trigger) === null || _b === void 0 ? void 0 : _b.removeEventListener("contextmenu", this.openMenu);
-        }
-    }
+    this.slottedMenuList = [];
     /**
-     * Called whenever the 'closeOnScroll' property changes.
-     *
+     * Holds the slotted triggers.
      * @public
-     * @param oldValue - The previous value of 'closeOnScroll'.
-     * @param newValue - The new value of 'closeOnScroll'.
      */
-    closeOnScrollChanged(oldValue, newValue) {
-        if (newValue) {
-            document.addEventListener("scroll", this.closeMenu);
-        }
-        else {
-            document.removeEventListener("scroll", this.closeMenu);
-        }
-    }
+    this.slottedTriggers = [];
     /**
-     * Adds event listeners.
-     *
+     * Defines whether the menu is open or not.
      * @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);
-        if (!this.persistOnItemClick) {
-            (_c = this._menuList) === null || _c === void 0 ? void 0 : _c.addEventListener("change", this.closeMenu);
-        }
-        if (this.openOnHover) {
-            (_d = this._trigger) === null || _d === void 0 ? void 0 : _d.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);
-        }
-        else {
-            (_f = this._trigger) === null || _f === void 0 ? void 0 : _f.addEventListener("click", this.toggleMenu);
-        }
-    }
+    this._open = false;
     /**
-     * Removes event listeners.
-     *
-     * @internal
+     * 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
      */
-    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);
-        if (!this.persistOnItemClick) {
-            (_c = this._menuList) === null || _c === void 0 ? void 0 : _c.removeEventListener("change", this.closeMenu);
+    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.
+     * @private
+     */
+    this.checkOverflowWithBoundary = () => {
+      if (!this.positioning || !this._menuList || !this.overflowBoundary) {
+        return;
+      }
+      const {
+        hasOverflow,
+        suggestedPosition
+      } = this.positioning.checkOverflowWithBoundary();
+      if (hasOverflow) {
+        if (suggestedPosition) {
+          this.openPositions = [suggestedPosition];
+          this.repositionMenu(this.openPositions);
         }
-        if (this.openOnHover) {
-            (_d = this._trigger) === null || _d === void 0 ? void 0 : _d.removeEventListener("mouseover", this.openMenu);
+        // 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.openOnContext) {
-            (_e = this._trigger) === null || _e === void 0 ? void 0 : _e.removeEventListener("contextmenu", this.openMenu);
-            document.removeEventListener("click", this.documentClickHandler);
+      }
+    };
+    /**
+     * Handles overflow collisions with the menu.
+     * @private
+     */
+    this.handleOverflow = entries => {
+      if (this.positioning) {
+        this.positioning.position = this.originalMenuPosition || this.menuPosition || MenuPositions.below;
+      }
+      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();
         }
-        else {
-            (_f = this._trigger) === null || _f === void 0 ? void 0 : _f.removeEventListener("click", this.toggleMenu);
+      });
+    };
+    /**
+     * Repositions the menu based on collisions.
+     * @private
+     */
+    this.repositionMenu = openPositions => {
+      this.menuPosition = openPositions[0];
+      if (this.positioning) {
+        this.positioning.position = this.menuPosition;
+      }
+    };
+    /**
+     * Updates the menu position on window changes.
+     * @private
+     */
+    this.updateMenuPosition = () => {
+      if (this._open) {
+        this.observeMenuOverflow();
+      }
+    };
+    /**
+     * Debounced handler for window changes.
+     * @private
+     */
+    this.handleWindowChanges = debounce(() => {
+      this.updateMenuPosition();
+    }, 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.focusTrigger();
+      }
+    };
+    /**
+     * Closes the menu.
+     * @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);
+      }
+    };
+    /**
+     * 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();
         }
-    }
+      }
+    };
     /**
-     * Handles keyboard interaction for the menu. Closes the menu and focuses on the trigger when the Escape key is
+     * Handles keyboard interaction for the trigger. Toggles the menu when the Space or Enter key is pressed. If the menu
      *
      * @param e - the keyboard event
      * @public
      */
-    menuKeydownHandler(e) {
-        var _a;
-        if (e.defaultPrevented) {
-            return;
+    this.triggerKeydownHandler = e => {
+      if (e.defaultPrevented) {
+        return;
+      }
+      const key = e.key;
+      switch (key) {
+        case keySpace:
+        case keyEnter:
+          e.preventDefault();
+          this.toggleMenu();
+          break;
+        default:
+          return true;
+      }
+    };
+    /**
+     * Handles document click events to close a menu opened with contextmenu in popover="manual" mode.
+     * @internal
+     * @param e - The event triggered on document click.
+     */
+    this.documentClickHandler = e => {
+      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
+   */
+  applyHeightConstraint() {
+    if (!this.positioning || !this._menuList) {
+      return;
+    }
+    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();
+    }
+  }
+  /**
+   * Clears height constraint from the menu.
+   * @private
+   */
+  clearHeightConstraint() {
+    this.style.removeProperty("--menu-max-height");
+    if (this._menuList) {
+      this._menuList.style.overflow = "";
+    }
+  }
+  /**
+   * Releases positions and restores original if valid.
+   * @private
+   */
+  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;
+          }
         }
-        const key = e.key;
-        switch (key) {
-            case keyEscape:
-                e.preventDefault();
-                if (this._open) {
-                    (_a = this._menuList) === null || _a === void 0 ? void 0 : _a.togglePopover(false);
-                    this.focusTrigger();
-                }
-                break;
-            default:
-                return true;
+      }
+    }
+  }
+  /**
+   * Observes the menu for overflow.
+   * @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);
+      }
+    }
+  }
+  /**
+   * Adds window event listeners.
+   * @private
+   */
+  addWindowEventListeners() {
+    window.addEventListener("resize", this.handleWindowChanges);
+    window.addEventListener("scroll", this.handleWindowChanges);
+  }
+  /**
+   * Removes window event listeners.
+   * @private
+   */
+  removeWindowEventListeners() {
+    window.removeEventListener("resize", this.handleWindowChanges);
+    window.removeEventListener("scroll", this.handleWindowChanges);
+  }
+  /**
+   * Adds overflow boundary event listeners.
+   * @private
+   */
+  addOverflowBoundaryEventListeners() {
+    if (this.overflowBoundary) {
+      this.overflowBoundary.addEventListener("scroll", this.handleWindowChanges);
+    }
+  }
+  /**
+   * Adds repositioning handlers.
+   * @private
+   */
+  addRepositioningHandlers() {
+    if (this.repositionMode !== MenuRepositionModes.none) {
+      this.createOverflowHandler();
+      this.addWindowEventListeners();
+      this.addOverflowBoundaryEventListeners();
+    }
+  }
+  /**
+   * Creates the positioning manager.
+   * @private
+   */
+  createPositioningManager() {
+    if (this._menuList && this._trigger && this.repositionMode !== MenuRepositionModes.none) {
+      this.positioning = new MenuPositioning({
+        menuReference: this._menuList,
+        anchorReference: this._trigger,
+        overflowBoundaryReference: this.overflowBoundary,
+        repositionMode: this.repositionMode
+      });
+    }
+  }
+  /**
+   * Removes repositioning event listeners.
+   * @private
+   */
+  removeRepositioningListeners() {
+    var _a;
+    if (this._menuList) {
+      this.removeWindowEventListeners();
+      (_a = this.intersectionObserver) === null || _a === void 0 ? void 0 : _a.unobserve(this._menuList);
+      this.clearHeightConstraint();
+    }
+  }
+  /**
+   * Called when the element is connected to the DOM.
+   * @public
+   */
+  connectedCallback() {
+    super.connectedCallback();
+    Updates.enqueue(() => {
+      this.setComponent();
+      this.setMenuPosition();
+    });
+  }
+  /**
+   * Called when the element is disconnected from the DOM.
+   * @public
+   */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeListeners();
+    this.removeRepositioningListeners();
+  }
+  /**
+   * Sets the component.
+   * @public
+   */
+  setComponent() {
+    if (this.$fastController.isConnected && this.slottedMenuList.length && this.slottedTriggers.length) {
+      this._trigger = this.slottedTriggers[0];
+      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.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
+   */
+  focusMenuList() {
+    Updates.enqueue(() => {
+      const list = this._menuList;
+      list.focus();
+    });
+  }
+  /**
+   * Focuses on the menu trigger.
+   * @public
+   */
+  focusTrigger() {
+    Updates.enqueue(() => {
+      this._trigger.focus();
+    });
+  }
+  /**
+   * Called whenever the 'openOnHover' property changes.
+   *
+   * @param oldValue - The previous value of 'openOnHover'.
+   * @param newValue - The new value of 'openOnHover'.
+   * @public
+   */
+  openOnHoverChanged(oldValue, newValue) {
+    var _a, _b;
+    if (newValue) {
+      (_a = this._trigger) === null || _a === void 0 ? void 0 : _a.addEventListener("mouseover", this.openMenu);
+    } else {
+      (_b = this._trigger) === null || _b === void 0 ? void 0 : _b.removeEventListener("mouseover", this.openMenu);
+    }
+  }
+  /**
+   * Called whenever the 'persistOnItemClick' property changes.
+   *
+   * @public
+   * @param oldValue - The previous value of 'persistOnItemClick'.
+   * @param newValue - The new value of 'persistOnItemClick'.
+   */
+  persistOnItemClickChanged(oldValue, newValue) {
+    var _a, _b;
+    if (!newValue) {
+      (_a = this._menuList) === null || _a === void 0 ? void 0 : _a.addEventListener("change", this.closeMenu);
+    } else {
+      (_b = this._menuList) === null || _b === void 0 ? void 0 : _b.removeEventListener("change", this.closeMenu);
+    }
+  }
+  /**
+   * Called whenever the 'menuPosition' property changes.
+   *
+   * @param oldValue - The previous value of 'menuPosition'.
+   * @param newValue - The new value of 'menuPosition'.
+   * @public
+   */
+  menuPositionChanged() {
+    this.setMenuPosition();
+  }
+  /**
+   * Called whenever the 'repositionMode' 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;
+    }
+  }
+  /**
+   * Called whenever the 'openOnContext' property changes.
+   *
+   * @public
+   * @param oldValue - The previous value of 'openOnContext'.
+   * @param newValue - The new value of 'openOnContext'.
+   */
+  openOnContextChanged(oldValue, newValue) {
+    var _a, _b;
+    if (newValue) {
+      (_a = this._trigger) === null || _a === void 0 ? void 0 : _a.addEventListener("contextmenu", this.openMenu);
+    } else {
+      (_b = this._trigger) === null || _b === void 0 ? void 0 : _b.removeEventListener("contextmenu", this.openMenu);
+    }
+  }
+  /**
+   * Called whenever the 'closeOnScroll' property changes.
+   *
+   * @public
+   * @param oldValue - The previous value of 'closeOnScroll'.
+   * @param newValue - The new value of 'closeOnScroll'.
+   */
+  closeOnScrollChanged(oldValue, newValue) {
+    if (newValue) {
+      document.addEventListener("scroll", this.closeMenu);
+    } else {
+      document.removeEventListener("scroll", this.closeMenu);
+    }
+  }
+  /**
+   * Adds event listeners.
+   *
+   * @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);
+    if (!this.persistOnItemClick) {
+      (_c = this._menuList) === null || _c === void 0 ? void 0 : _c.addEventListener("change", this.closeMenu);
+    }
+    if (this.openOnHover) {
+      (_d = this._trigger) === null || _d === void 0 ? void 0 : _d.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);
+    } else {
+      (_f = this._trigger) === null || _f === void 0 ? void 0 : _f.addEventListener("click", this.toggleMenu);
+    }
+  }
+  /**
+   * Removes event listeners.
+   *
+   * @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);
+    if (!this.persistOnItemClick) {
+      (_c = this._menuList) === null || _c === void 0 ? void 0 : _c.removeEventListener("change", this.closeMenu);
+    }
+    if (this.openOnHover) {
+      (_d = this._trigger) === null || _d === void 0 ? void 0 : _d.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);
+    } else {
+      (_f = this._trigger) === null || _f === void 0 ? void 0 : _f.removeEventListener("click", this.toggleMenu);
+    }
+  }
+  /**
+   * Handles keyboard interaction for the menu. Closes the menu and focuses on the trigger when the Escape key is
+   *
+   * @param e - the keyboard event
+   * @public
+   */
+  menuKeydownHandler(e) {
+    var _a;
+    if (e.defaultPrevented) {
+      return;
+    }
+    const key = e.key;
+    switch (key) {
+      case keyEscape:
+        e.preventDefault();
+        if (this._open) {
+          (_a = this._menuList) === null || _a === void 0 ? void 0 : _a.togglePopover(false);
+          this.focusTrigger();
         }
+        break;
+      default:
+        return true;
     }
+  }
 }
-__decorate([
-    attr({ attribute: "open-on-hover", mode: "boolean" })
-], Menu.prototype, "openOnHover", void 0);
-__decorate([
-    attr({ attribute: "open-on-context", mode: "boolean" })
-], Menu.prototype, "openOnContext", void 0);
-__decorate([
-    attr({ attribute: "close-on-scroll", mode: "boolean" })
-], Menu.prototype, "closeOnScroll", void 0);
-__decorate([
-    attr({ attribute: "persist-on-item-click", mode: "boolean" })
-], Menu.prototype, "persistOnItemClick", void 0);
-__decorate([
-    observable
-], Menu.prototype, "slottedMenuList", void 0);
-__decorate([
-    observable
-], Menu.prototype, "slottedTriggers", void 0);
-//# sourceMappingURL=menu.js.map
+__decorate([attr({
+  attribute: "open-on-hover",
+  mode: "boolean"
+})], Menu.prototype, "openOnHover", void 0);
+__decorate([attr({
+  attribute: "open-on-context",
+  mode: "boolean"
+})], Menu.prototype, "openOnContext", void 0);
+__decorate([attr({
+  attribute: "close-on-scroll",
+  mode: "boolean"
+})], Menu.prototype, "closeOnScroll", void 0);
+__decorate([attr({
+  attribute: "persist-on-item-click",
+  mode: "boolean"
+})], Menu.prototype, "persistOnItemClick", void 0);
+__decorate([attr({
+  mode: "boolean"
+})], Menu.prototype, "split", void 0);
+__decorate([attr({
+  attribute: "menu-position"
+})], Menu.prototype, "menuPosition", void 0);
+__decorate([attr({
+  attribute: "reposition-mode"
+})], Menu.prototype, "repositionMode", void 0);
+__decorate([observable], Menu.prototype, "overflowBoundary", void 0);
+__decorate([observable], Menu.prototype, "slottedMenuList", void 0);
+__decorate([observable], Menu.prototype, "slottedTriggers", void 0);
+
+export { Menu };