import { FASTElement } from "@microsoft/fast-element"; import { MenuList } from "../menu-list/menu-list.js"; import type { MenuPosition, MenuRepositionMode } from "./menu.options.js"; /** * Menu * @summary A Menu component that provides an interactive menu interface with support for various trigger and open behaviors. * * @example * ```html * *
Menu Trigger
* *
* ``` * * @attr {boolean | undefined} open-on-hover - Determines if the menu should open on hover. * @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. * * @csspart trigger - Represents the trigger element of the menu. * @csspart menu-list - Represents the menu list element. * * @method toggleMenu - Toggles the open state of the menu. * @method closeMenu - Closes the menu. * @method openMenu - Opens the menu. * @method focusMenuList - Focuses on the menu list. * @method focusTrigger - Focuses on the menu trigger. * @method menuKeydownHandler - Handles keyboard interaction for the menu. * @method triggerKeydownHandler - Handles keyboard interaction for the trigger. * * @fires toggle - Event fired when the menu is toggled. * @fires change - Event fired when the state of a menu item changes. * * @extends FASTElement * @tagname fabric-menu * @public */ export declare class Menu extends FASTElement { /** * The positioning instance for the menu. * @private */ private positioning; /** * The intersection observer for tracking overflow. * @private */ private intersectionObserver; /** * The original position before repositioning. * @private */ private originalMenuPosition; /** * The array of open positions based on collision detection. * @private */ private openPositions; /** * Determines if the menu should open on hover. * @public */ openOnHover?: boolean; /** * Determines if the menu should open on right click. * @public */ openOnContext?: boolean; /** * Determines if the menu should close on scroll. * @public */ closeOnScroll?: boolean; /** * Determines if the menu open state should persis on click of menu item * @public */ persistOnItemClick?: boolean; /** * Determines if the menu is in split state (for split button pattern). * @public */ split?: boolean; /** * Determines whether the menu list is above or below the trigger. * @public */ menuPosition?: MenuPosition; /** * The mode for repositioning the menu when it overflows the boundary. * @public * @default "auto" */ repositionMode?: MenuRepositionMode; /** * The overflow boundary element reference. * @public */ overflowBoundary?: HTMLElement; /** * Holds the slotted menu list. * @public */ slottedMenuList: MenuList[]; /** * Holds the slotted triggers. * @public */ slottedTriggers: HTMLElement[]; /** * Defines whether the menu is open or not. * @internal */ private _open; /** * The trigger element of the menu. * @internal */ private _trigger?; /** * The menu list element of the menu which has the popover behavior. * @internal */ private _menuList?; /** * 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 */ private createOverflowHandler; /** * Checks overflow against custom boundary using direct rect calculations. * Delegates to MenuPositioning for the actual calculation. * @private */ private checkOverflowWithBoundary; /** * Handles overflow collisions with the menu. * @private */ private handleOverflow; /** * Applies height constraint to make menu scrollable when space is limited. * @private */ private applyHeightConstraint; /** * Clears height constraint from the menu. * @private */ private clearHeightConstraint; /** * Repositions the menu based on collisions. * @private */ private repositionMenu; /** * Releases positions and restores original if valid. * @private */ private releasePositions; /** * Observes the menu for overflow. * @private */ private observeMenuOverflow; /** * Updates the menu position on window changes. * @private */ private updateMenuPosition; /** * Debounced handler for window changes. * @private */ private handleWindowChanges; /** * Adds window event listeners. * @private */ private addWindowEventListeners; /** * Removes window event listeners. * @private */ private removeWindowEventListeners; /** * Adds overflow boundary event listeners. * @private */ private addOverflowBoundaryEventListeners; /** * Adds repositioning handlers. * @private */ private addRepositioningHandlers; /** * Creates the positioning manager. * @private */ private createPositioningManager; /** * Removes repositioning event listeners. * @private */ private removeRepositioningListeners; /** * Called when the element is connected to the DOM. * @public */ connectedCallback(): void; /** * Called when the element is disconnected from the DOM. * @public */ disconnectedCallback(): void; /** * Sets the component. * @public */ setComponent(): void; /** * Sets the menu position. * @public */ setMenuPosition(): void; /** * Toggles the open state of the menu. * @public */ toggleMenu: () => void; /** * Closes the menu. * @public */ closeMenu: () => void; /** * Opens the menu. * @public */ openMenu: (e?: Event) => void; /** * Focuses on the menu list. * @public */ focusMenuList(): void; /** * Focuses on the menu trigger. * @public */ focusTrigger(): void; /** * Handles the 'toggle' event on the popover. * @public * @param e - the event * @returns void */ toggleHandler: (e: Event | ToggleEvent) => void; /** * Called whenever the 'openOnHover' property changes. * * @param oldValue - The previous value of 'openOnHover'. * @param newValue - The new value of 'openOnHover'. * @public */ openOnHoverChanged(oldValue: boolean, newValue: boolean): void; /** * Called whenever the 'persistOnItemClick' property changes. * * @public * @param oldValue - The previous value of 'persistOnItemClick'. * @param newValue - The new value of 'persistOnItemClick'. */ persistOnItemClickChanged(oldValue: boolean, newValue: boolean): void; /** * Called whenever the 'menuPosition' property changes. * * @param oldValue - The previous value of 'menuPosition'. * @param newValue - The new value of 'menuPosition'. * @public */ menuPositionChanged(): void; /** * Called whenever the 'repositionMode' property changes. * * @public * @param oldValue - The previous value of 'repositionMode'. * @param newValue - The new value of 'repositionMode'. */ repositionModeChanged(oldValue: MenuRepositionMode, newValue: MenuRepositionMode): void; /** * Called whenever the 'openOnContext' property changes. * * @public * @param oldValue - The previous value of 'openOnContext'. * @param newValue - The new value of 'openOnContext'. */ openOnContextChanged(oldValue: boolean, newValue: boolean): void; /** * Called whenever the 'closeOnScroll' property changes. * * @public * @param oldValue - The previous value of 'closeOnScroll'. * @param newValue - The new value of 'closeOnScroll'. */ closeOnScrollChanged(oldValue: boolean, newValue: boolean): void; /** * Adds event listeners. * * @internal */ private addListeners; /** * Removes event listeners. * * @internal */ private removeListeners; /** * 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: KeyboardEvent): boolean | void; /** * 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 */ triggerKeydownHandler: (e: KeyboardEvent) => boolean | void; /** * Handles document click events to close a menu opened with contextmenu in popover="manual" mode. * @internal * @param e - The event triggered on document click. */ private documentClickHandler; } //# sourceMappingURL=menu.d.ts.map