@momentum-design/components 0.100.0 → 0.100.2

package/dist/components/menupopover/menupopover.component.js

@@ -19,7 +19,7 @@ import { COLOR } from '../popover/popover.constants';
 import { popoverStack } from '../popover/popover.stack';
 import { DEFAULTS, TAG_NAME as MENU_POPOVER } from './menupopover.constants';
 import styles from './menupopover.styles';
-import { isValidMenuItem, isValidPopover } from './menupopover.utils';
+import { isValidMenuItem, isValidMenuPopover } from './menupopover.utils';
 /**
  * A popover menu component that displays a list of menu items in a floating container.
  * It's designed to work in conjunction with `mdc-menubar` and `mdc-menuitem` to create
@@ -85,6 +85,7 @@ class MenuPopover extends Popover {
          */
         this.placement = DEFAULTS.PLACEMENT;
         this.menuItems = [];
+        this.menuItemsWithSubMenus = [];
         /**
          * Handles outside click events to close the popover.
          * This method checks if the click occurred outside the popover and its trigger element.
@@ -95,29 +96,41 @@ class MenuPopover extends Popover {
         this.onOutsidePopoverClick = (event) => {
             if (popoverStack.peek() !== this)
                 return;
-            const popoverOfTarget = this.findClosestPopover(event.target);
-            // If the click occurred on a submenu, close all popovers until the submenu
-            if (popoverOfTarget && popoverStack.has(popoverOfTarget)) {
-                this.closeAllMenuPopovers(popoverOfTarget);
-                return;
-            }
             const path = event.composedPath();
-            const insidePopoverClick = this.contains(event.target) || path.includes(this.triggerElement);
+            const insidePopoverClick = this.contains(event.target) || path.includes(this.triggerElement) || path.includes(this);
             const clickedOnBackdrop = this.backdropElement ? path.includes(this.backdropElement) : false;
             if (!insidePopoverClick || clickedOnBackdrop) {
                 this.closeAllMenuPopovers();
             }
         };
+        /**
+         * Toggles the visibility of the popover.
+         * This method checks if the trigger element has the `soft-disabled` attribute.
+         * If it does, the popover will not be toggled.
+         * If the popover is currently visible, it hides the popover; otherwise, it shows the popover.
+         * @returns - This method does not return anything.
+         */
         this.togglePopoverVisible = () => {
             var _a;
             if ((_a = this.triggerElement) === null || _a === void 0 ? void 0 : _a.hasAttribute('soft-disabled'))
                 return;
-            if (this.isTriggerClicked) {
-                this.hidePopover();
+            if (this.visible) {
+                this.hide();
             }
             else {
-                this.showPopover();
-                this.isTriggerClicked = true;
+                this.show();
+            }
+        };
+        this.handleItemCreation = (event) => {
+            const item = event.target;
+            if (isValidMenuItem(item)) {
+                // Parent menu popover should not listen on nested menu items
+                event.stopImmediatePropagation();
+                // `destroyed` triggered in the `disconnectedCallback` of the item which executed when the item is removed from the DOM
+                // because of that the event does not bubble up to menupopover, and we need to capture the `destroyed` event on the item itself
+                item.addEventListener('destroyed', this.handleItemChangeEvent);
+                // `disabled` could bubble up, but it is more consistent to handle it the same way as `destroyed`
+                item.addEventListener('disabled', this.handleItemChangeEvent);
             }
         };
         this.handleItemChangeEvent = (event) => {
@@ -137,11 +150,158 @@ class MenuPopover extends Popover {
                 this.resetTabIndexes(0);
             }
         };
+        /**
+         * Handles keydown events for keyboard navigation within the menu popover.
+         * This method allows users to navigate through the menu items using the keyboard.
+         * It supports Home, End, Arrow Up, Arrow Down, Arrow Left, Arrow Right, and Escape keys.
+         *
+         * Also, it handles Enter key to close the menu popover
+         *
+         * @param event - The keyboard event that triggered the keydown action.
+         * @returns - This method does not return anything.
+         */
+        this.handleKeyDown = (event) => {
+            let isKeyHandled = false;
+            this.collectMenuItems();
+            const target = event.target;
+            const currentIndex = this.getCurrentIndex(target);
+            if (currentIndex === -1)
+                return;
+            this.resetTabIndexes(currentIndex);
+            const isRtl = window.getComputedStyle(this).direction === 'rtl';
+            const targetKey = this.resolveDirectionKey(event.key, isRtl);
+            switch (targetKey) {
+                case KEYS.HOME: {
+                    // Move focus to the first menu item
+                    this.resetTabIndexAndSetFocus(0, currentIndex);
+                    isKeyHandled = true;
+                    break;
+                }
+                case KEYS.END: {
+                    // Move focus to the last menu item
+                    this.resetTabIndexAndSetFocus(this.menuItems.length - 1, currentIndex);
+                    isKeyHandled = true;
+                    break;
+                }
+                case KEYS.ARROW_DOWN: {
+                    // Move focus to the next menu item
+                    const newIndex = currentIndex + 1 === this.menuItems.length ? 0 : currentIndex + 1;
+                    this.resetTabIndexAndSetFocus(newIndex, currentIndex);
+                    isKeyHandled = true;
+                    break;
+                }
+                case KEYS.ARROW_UP: {
+                    // Move focus to the prev menu item
+                    const newIndex = currentIndex - 1 === -1 ? this.menuItems.length - 1 : currentIndex - 1;
+                    this.resetTabIndexAndSetFocus(newIndex, currentIndex);
+                    isKeyHandled = true;
+                    break;
+                }
+                case KEYS.ARROW_RIGHT: {
+                    // If there is a submenu, open it.
+                    const subMenu = this.getSubMenuPopoverOfTarget(target);
+                    if (subMenu) {
+                        subMenu.show();
+                        isKeyHandled = true;
+                    }
+                    break;
+                }
+                case KEYS.ARROW_LEFT: {
+                    // If the current popover is a submenu then close this popover.
+                    if (isValidMenuPopover(this.parentElement)) {
+                        this.hide();
+                        this.resetTabIndexAndSetFocus(0, currentIndex);
+                        isKeyHandled = true;
+                    }
+                    break;
+                }
+                case KEYS.ESCAPE: {
+                    this.resetTabIndexAndSetFocus(0, currentIndex);
+                    isKeyHandled = true;
+                    break;
+                }
+                case KEYS.ENTER: {
+                    if (!this.getSubMenuPopoverOfTarget(target)) {
+                        this.closeAllMenuPopovers();
+                        this.fireMenuItemAction(target);
+                        isKeyHandled = true;
+                    }
+                    break;
+                }
+                case KEYS.SPACE: {
+                    // Prevent page scroll when space is pressed down
+                    isKeyHandled = true;
+                    break;
+                }
+                default:
+                    break;
+            }
+            // When menu consume any of the pressed key, we need to stop propagation
+            // to prevent the event from bubbling up and being handled by parent components which might use the same key.
+            if (isKeyHandled) {
+                event.stopPropagation();
+                event.preventDefault();
+            }
+        };
+        /**
+         * Handles keyup events for keyboard navigation within the menu popover.
+         *
+         * Some keys must be handled with keyup event to prevent default action.
+         *
+         * Space key closes the menu when the user presses it on a menu item,
+         * but the same key will trigger a click on the menu opener button.
+         * The button uses the keyup event so we have to handle it here as well
+         * to prevent the meu opener action which would re-open the menu.
+         *
+         * @param event - The keyboard event that triggered the keydown action.
+         * @returns - This method does not return anything.
+         */
+        this.handleKeyUp = (event) => {
+            let isKeyHandled = false;
+            const target = event.target;
+            switch (event.key) {
+                case KEYS.SPACE: {
+                    // If the target is a menu item, trigger its click event
+                    if (!target.matches(`${MENUITEMRADIO_TAGNAME}, ${MENUITEMCHECKBOX_TAGNAME}`)) {
+                        // only close all menu popovers if the target is not opening a menu popover
+                        if (!this.getSubMenuPopoverOfTarget(target)) {
+                            this.closeAllMenuPopovers();
+                            this.fireMenuItemAction(target);
+                            isKeyHandled = true;
+                        }
+                    }
+                    break;
+                }
+                default:
+                    break;
+            }
+            // When menu consume any of the pressed key, we need to stop propagation
+            // to prevent the event from bubbling up and being handled by parent components which might use the same key.
+            if (isKeyHandled) {
+                event.stopPropagation();
+                event.preventDefault();
+            }
+        };
         this.addEventListener('keydown', this.handleKeyDown);
         this.addEventListener('keyup', this.handleKeyUp);
         this.addEventListener('click', this.handleMouseClick);
         this.addEventListener('created', this.handleItemCreation);
     }
+    /**
+     * Retrieves the submenu popover associated with a given target element.
+     * This method checks if the target element has an `id` attribute and uses it to find the corresponding submenu popover.
+     * If a submenu popover is found, it returns it; otherwise, it returns `undefined` or `null`.
+     * @param target - The target element for which to find the submenu popover.
+     * @returns - The submenu popover instance or `undefined`/`null` if not found.
+     * @internal
+     */
+    getSubMenuPopoverOfTarget(target) {
+        var _a, _b;
+        const id = target.getAttribute('id');
+        if (!id)
+            return null;
+        return (_b = (_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector) === null || _b === void 0 ? void 0 : _b.call(_a, `${MENU_POPOVER}[triggerid="${id}"]`);
+    }
     /** @internal */
     collectMenuItems() {
         var _a;
@@ -156,6 +316,23 @@ class MenuPopover extends Popover {
         })
             .flat()
             .filter(node => !!node && !node.hasAttribute('disabled'));
+        this.menuItemsWithSubMenus = this.menuItems.filter(item => {
+            const submenu = this.getSubMenuPopoverOfTarget(item);
+            return submenu;
+        });
+    }
+    /** @internal */
+    getOpenSubMenusOfItems(items) {
+        const subMenus = [];
+        if (!items || items.length === 0)
+            return subMenus;
+        items.forEach(item => {
+            const submenu = this.getSubMenuPopoverOfTarget(item);
+            if (submenu && submenu.visible) {
+                subMenus.push(submenu);
+            }
+        });
+        return subMenus;
     }
     connectedCallback() {
         super.connectedCallback();
@@ -183,6 +360,15 @@ class MenuPopover extends Popover {
         if (newValue) {
             this.backdrop = !(this.triggerElement.tagName.toLowerCase() === MENUITEM_TAGNAME);
         }
+        // if the current menupopover is closed, close all submenus
+        if (newValue === false) {
+            this.menuItemsWithSubMenus.forEach(item => {
+                const submenu = this.getSubMenuPopoverOfTarget(item);
+                if (submenu) {
+                    submenu.hide();
+                }
+            });
+        }
         this.resetMenuNavigation();
         return super.isOpenUpdated(oldValue, newValue);
     }
@@ -236,9 +422,11 @@ class MenuPopover extends Popover {
      */
     closeAllMenuPopovers(until) {
         while (popoverStack.peek() !== until) {
+            if (!isValidMenuPopover(popoverStack.peek()))
+                break;
             const popover = popoverStack.pop();
             if (popover) {
-                popover.hidePopover();
+                popover.hide();
             }
             else {
                 break;
@@ -246,32 +434,27 @@ class MenuPopover extends Popover {
         }
     }
     /**
-     * Checks if the menu popover has a submenu with the specified trigger ID.
-     * This method is used to determine if a menu item has a submenu associated with it,
-     * which is indicated by the presence of a `triggerid` attribute in the submenu popover.
-     * It queries the parent element for any popover with the specified trigger ID.
-     * @param id - The ID of the menu item to check for a submenu.
-     * @returns - A boolean indicating whether a submenu with the specified trigger ID exists.
+     * Closes all other submenus on the same level as the target menu item.
+     * This method is used to ensure that only one submenu is open at a time.
+     * It finds all other menu items with submenus and closes their submenus.
+     * @param target - The target menu item that was clicked.
      */
-    hasSubmenuWithTriggerId(id) {
-        var _a, _b;
-        return !!id && ((_b = (_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector) === null || _b === void 0 ? void 0 : _b.call(_a, `${MENU_POPOVER}[triggerid="${id}"]`)) !== null;
+    closeOtherSubMenusOnSameLevel(target) {
+        const otherMenuItemsOnSameLevel = this.menuItemsWithSubMenus.filter(item => item !== target);
+        const otherOpenSubMenus = this.getOpenSubMenusOfItems(otherMenuItemsOnSameLevel);
+        otherOpenSubMenus.forEach(subMenu => {
+            subMenu.hide();
+        });
     }
     /**
-     * Determines whether to close the menu based on the clicked target.
-     *
-     * @param target - The target element that was clicked.
+     * Fires the 'action' event on the target menu item.
+     * This method is used to trigger the action associated with a menu item when it is clicked or activated.
+     * It checks if the target element matches the `MENUITEM_TAGNAME` and dispatches an 'action' event.
+     * @param target - The target menu item that was clicked or activated.
      */
-    closeMenu(target) {
-        const triggerId = target.getAttribute('id');
-        if (isValidMenuItem(target) &&
-            !this.hasSubmenuWithTriggerId(triggerId) &&
-            this === target.closest(MENU_POPOVER) // Ensure close all popover called only once
-        ) {
-            this.closeAllMenuPopovers();
-            if (target.matches(MENUITEM_TAGNAME)) {
-                target.dispatchEvent(new Event('action', { bubbles: true, composed: true }));
-            }
+    fireMenuItemAction(target) {
+        if (target.matches(MENUITEM_TAGNAME)) {
+            target.dispatchEvent(new Event('action', { bubbles: true, composed: true }));
         }
     }
     /**
@@ -282,22 +465,20 @@ class MenuPopover extends Popover {
      */
     handleMouseClick(event) {
         const target = event.target;
-        if (event.isTrusted) {
-            // skip manually dispatched clicks from listItem
-            this.closeMenu(target);
-        }
-    }
-    handleItemCreation(event) {
-        const item = event.target;
-        if (isValidMenuItem(item)) {
-            // Parent menu popover should not listen on nested menu items
-            event.stopImmediatePropagation();
-            // `destroyed` triggered in the `disconnectedCallback` of the item which executed when the item is removed from the DOM
-            // because of that the event does not bubble up to menupopover, and we need to capture the `destroyed` event on the item itself
-            item.addEventListener('destroyed', this.handleItemChangeEvent);
-            // `disabled` could bubble up, but it is more consistent to handle it the same way as `destroyed`
-            item.addEventListener('disabled', this.handleItemChangeEvent);
+        // stopPropagation to prevent the click from bubbling up to parent elements
+        event.stopPropagation();
+        // if the target is not a valid menu item or if the event is not trusted (
+        // e.g., triggered by keydown originally), do nothing. Pressing space and enter
+        // is handled separately in the respective handler.
+        if (!isValidMenuItem(target) || !event.isTrusted)
+            return;
+        // If the target has a submenu, show it and close other submenus on the same level
+        if (this.getSubMenuPopoverOfTarget(target)) {
+            this.closeOtherSubMenusOnSameLevel(target);
+            return;
         }
+        this.closeAllMenuPopovers();
+        this.fireMenuItemAction(target);
     }
     /**
      * Resolves the key pressed by the user based on the direction of the layout.
@@ -320,135 +501,6 @@ class MenuPopover extends Popover {
                 return key;
         }
     }
-    /**
-     * Handles keydown events for keyboard navigation within the menu popover.
-     * This method allows users to navigate through the menu items using the keyboard.
-     * It supports Home, End, Arrow Up, Arrow Down, Arrow Left, Arrow Right, and Escape keys.
-     *
-     * Also, it handles Enter key to close the menu popover
-     *
-     * @param event - The keyboard event that triggered the keydown action.
-     * @returns - This method does not return anything.
-     */
-    handleKeyDown(event) {
-        var _a, _b;
-        let isKeyHandled = false;
-        this.collectMenuItems();
-        const target = event.target;
-        const currentIndex = this.getCurrentIndex(target);
-        if (currentIndex === -1)
-            return;
-        this.resetTabIndexes(currentIndex);
-        const isRtl = window.getComputedStyle(this).direction === 'rtl';
-        const targetKey = this.resolveDirectionKey(event.key, isRtl);
-        switch (targetKey) {
-            case KEYS.HOME: {
-                // Move focus to the first menu item
-                this.resetTabIndexAndSetFocus(0, currentIndex);
-                isKeyHandled = true;
-                break;
-            }
-            case KEYS.END: {
-                // Move focus to the last menu item
-                this.resetTabIndexAndSetFocus(this.menuItems.length - 1, currentIndex);
-                isKeyHandled = true;
-                break;
-            }
-            case KEYS.ARROW_DOWN: {
-                // Move focus to the next menu item
-                const newIndex = currentIndex + 1 === this.menuItems.length ? 0 : currentIndex + 1;
-                this.resetTabIndexAndSetFocus(newIndex, currentIndex);
-                isKeyHandled = true;
-                break;
-            }
-            case KEYS.ARROW_UP: {
-                // Move focus to the prev menu item
-                const newIndex = currentIndex - 1 === -1 ? this.menuItems.length - 1 : currentIndex - 1;
-                this.resetTabIndexAndSetFocus(newIndex, currentIndex);
-                isKeyHandled = true;
-                break;
-            }
-            case KEYS.ARROW_RIGHT: {
-                // If there is a submenu, open it.
-                const triggerId = (_a = this.menuItems[currentIndex]) === null || _a === void 0 ? void 0 : _a.getAttribute('id');
-                if (this.hasSubmenuWithTriggerId(triggerId)) {
-                    const submenu = (_b = this.parentElement) === null || _b === void 0 ? void 0 : _b.querySelector(`${MENU_POPOVER}[triggerid="${triggerId}"]`);
-                    if (submenu) {
-                        submenu.showPopover();
-                        isKeyHandled = true;
-                    }
-                }
-                break;
-            }
-            case KEYS.ARROW_LEFT: {
-                // If the current popover is a submenu then close this popover.
-                if (isValidPopover(this.parentElement)) {
-                    this.hidePopover();
-                    this.resetTabIndexAndSetFocus(0, currentIndex);
-                    isKeyHandled = true;
-                }
-                break;
-            }
-            case KEYS.ESCAPE: {
-                this.resetTabIndexAndSetFocus(0, currentIndex);
-                isKeyHandled = true;
-                break;
-            }
-            case KEYS.ENTER: {
-                this.closeMenu(target);
-                isKeyHandled = true;
-                break;
-            }
-            case KEYS.SPACE: {
-                // Prevent page scroll when space is pressed down
-                isKeyHandled = true;
-                break;
-            }
-            default:
-                break;
-        }
-        // When menu consume any of the pressed key, we need to stop propagation
-        // to prevent the event from bubbling up and being handled by parent components which might use the same key.
-        if (isKeyHandled) {
-            event.stopPropagation();
-            event.preventDefault();
-        }
-    }
-    /**
-     * Handles keyup events for keyboard navigation within the menu popover.
-     *
-     * Some keys must be handled with keyup event to prevent default action.
-     *
-     * Space key closes the menu when the user presses it on a menu item,
-     * but the same key will trigger a click on the menu opener button.
-     * The button uses the keyup event so we have to handle it here as well
-     * to prevent the meu opener action which would re-open the menu.
-     *
-     * @param event - The keyboard event that triggered the keydown action.
-     * @returns - This method does not return anything.
-     */
-    handleKeyUp(event) {
-        let isKeyHandled = false;
-        const target = event.target;
-        switch (event.key) {
-            case KEYS.SPACE: {
-                // If the target is a menu item, trigger its click event
-                if (!target.matches(`${MENUITEMRADIO_TAGNAME}, ${MENUITEMCHECKBOX_TAGNAME}`)) {
-                    this.closeMenu(target);
-                    isKeyHandled = true;
-                }
-                break;
-            }
-            default:
-                break;
-        }
-        // When menu consume any of the pressed key, we need to stop propagation
-        // to prevent the event from bubbling up and being handled by parent components which might use the same key.
-        if (isKeyHandled) {
-            event.stopPropagation();
-            event.preventDefault();
-        }
-    }
 }
 MenuPopover.styles = [...Popover.styles, ...styles];
 __decorate([

package/dist/components/menupopover/menupopover.utils.d.ts

@@ -5,5 +5,5 @@ import type MenuPopover from './menupopover.component';
  * @returns True if the menu item is a valid menu item, false otherwise.
  */
 declare const isValidMenuItem: (menuItem: Element | null) => boolean;
-declare const isValidPopover: (el: Element | null) => el is MenuPopover;
-export { isValidMenuItem, isValidPopover };
+declare const isValidMenuPopover: (el: Element | null) => el is MenuPopover;
+export { isValidMenuItem, isValidMenuPopover };

package/dist/components/menupopover/menupopover.utils.js

@@ -12,5 +12,5 @@ const isValidMenuItem = (menuItem) => {
     const role = (_a = menuItem.getAttribute('role')) === null || _a === void 0 ? void 0 : _a.toLowerCase();
     return role === ROLE.MENUITEM || role === ROLE.MENUITEMCHECKBOX || role === ROLE.MENUITEMRADIO;
 };
-const isValidPopover = (el) => { var _a; return ((_a = el === null || el === void 0 ? void 0 : el.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === MENUPOPOVER_TAGNAME; };
-export { isValidMenuItem, isValidPopover };
+const isValidMenuPopover = (el) => { var _a; return ((_a = el === null || el === void 0 ? void 0 : el.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === MENUPOPOVER_TAGNAME; };
+export { isValidMenuItem, isValidMenuPopover };

package/dist/components/navmenuitem/navmenuitem.component.js

@@ -81,7 +81,7 @@ class NavMenuItem extends IconNameMixin(MenuItem) {
             });
             this.dispatchEvent(event);
         };
-        this.addEventListener('click', this.handleClickEvent);
+        this.addEventListener('click', this.handleClickEvent.bind(this));
     }
     connectedCallback() {
         super.connectedCallback();

package/dist/components/popover/popover.component.d.ts

@@ -50,6 +50,7 @@ declare class Popover extends Popover_base {
      * - **mouseenter**
      * - **focusin**
      * - **manual**
+     *
      * @default click
      */
     trigger: PopoverTrigger;
@@ -246,6 +247,13 @@ declare class Popover extends Popover_base {
      * @default false
      */
     disableAriaHasPopup: boolean;
+    /**
+     * If a tooltip is connected to the same trigger element,
+     * this property will keep the connected tooltip closed if this popover is open.
+     * This is useful when you want to show a popover with a tooltip
+     * but you don't want the tooltip to be shown at the same time.
+     */
+    keepConnectedTooltipClosed: boolean;
     arrowElement: HTMLElement | null;
     triggerElement: HTMLElement | null;
     /** @internal */
@@ -255,26 +263,38 @@ declare class Popover extends Popover_base {
     /** @internal */
     private isHovered;
     /** @internal */
-    protected isTriggerClicked: boolean;
-    /** @internal */
     private openDelay;
     /** @internal */
     protected closeDelay: number;
     /** @internal */
     private utils;
     /** @internal */
+    private floatingUICleanupFunction;
+    /** @internal */
+    protected shouldSupressOpening: boolean;
+    /** @internal */
     backdropElement: HTMLElement | null;
+    /** @internal */
+    private connectedTooltip;
     constructor();
+    private storeConnectedTooltip;
+    private setupTriggerRelatedElement;
+    private cleanupTrigger;
     protected firstUpdated(changedProperties: PropertyValues): Promise<void>;
     disconnectedCallback(): Promise<void>;
     /**
-     * Sets up the trigger event listeners based on the trigger type.
+     * Sets up the trigger related event listeners, based on the trigger type.
+     * Includes fallback for mouseenter trigger to also handle focusin for non-interactive popovers.
+     */
+    private setupTriggerListeners;
+    /**
+     * Removes the trigger related event listeners.
      */
-    private setupTriggerListener;
+    private removeTriggerListeners;
     /**
-     * Removes the trigger event listeners.
+     * Removes all event listeners related to the popover.
      */
-    private removeEventListeners;
+    private removeAllListeners;
     protected updated(changedProperties: PropertyValues): Promise<void>;
     /**
      * Handles the outside click event to close the popover.
@@ -333,11 +353,11 @@ declare class Popover extends Popover_base {
     /**
      * Shows the popover.
      */
-    showPopover: () => void;
+    show: () => void;
     /**
      * Hides the popover.
      */
-    hidePopover: () => void;
+    hide: () => void;
     /**
      * Toggles the popover visibility.
      */
@@ -355,7 +375,7 @@ declare class Popover extends Popover_base {
      *
      * @param element - The element to start searching from.
      */
-    protected findClosestPopover(element: Element): Popover | null;
+    protected findClosestPopover: (element: Element) => Popover | null;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
 }