@momentum-design/components 0.89.0 → 0.90.0

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

@@ -49,6 +49,7 @@ declare class MenuPopover extends Popover {
     /** @internal */
     get menuItems(): Array<HTMLElement>;
     connectedCallback(): void;
+    protected isOpenUpdated(oldValue: boolean, newValue: boolean): Promise<void>;
     firstUpdated(changedProperties: PropertyValues): Promise<void>;
     /**
      * Retrieves the current index of the menu item that triggered the event.

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

@@ -10,6 +10,7 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 import { property } from 'lit/decorators.js';
 import { KEYS } from '../../utils/keys';
 import { ROLE } from '../../utils/roles';
+import { TAG_NAME as MENUITEM_TAGNAME } from '../menuitem/menuitem.constants';
 import { TAG_NAME as MENUSECTION_TAGNAME } from '../menusection/menusection.constants';
 import Popover from '../popover/popover.component';
 import { COLOR } from '../popover/popover.constants';
@@ -73,7 +74,7 @@ class MenuPopover extends Popover {
         this.onOutsidePopoverClick = (event) => {
             if (popoverStack.peek() !== this)
                 return;
-            const popoverOfTarget = event.target.closest(MENU_POPOVER);
+            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);
@@ -132,6 +133,18 @@ class MenuPopover extends Popover {
         this.closeButton = false;
         this.closeButtonAriaLabel = null;
     }
+    async isOpenUpdated(oldValue, newValue) {
+        if (oldValue === newValue || !this.triggerElement)
+            return Promise.resolve();
+        // Set backdrop to true when the popover is opened with other than menu item.
+        //
+        // make sure backdrop is set before showing the popover, but it does not change when popover is closing, otherwise
+        // `super.isOpenUpdated` will skip the backdrop cleanup
+        if (newValue) {
+            this.backdrop = !(this.triggerElement.tagName.toLowerCase() === MENUITEM_TAGNAME);
+        }
+        return super.isOpenUpdated(oldValue, newValue);
+    }
     async firstUpdated(changedProperties) {
         var _a;
         await super.firstUpdated(changedProperties);

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

@@ -8,8 +8,10 @@ import { TAG_NAME as MENUPOPOVER_TAGNAME } from './menupopover.constants';
  * @returns True if the menu item is a valid menu item, false otherwise.
  */
 const isValidMenuItem = (menuItem) => {
-    var _a, _b;
-    return [MENUITEM_TAGNAME, MENUITEMCHECKBOX_TAGNAME, MENUITEMRADIO_TAGNAME].includes((_b = (_a = menuItem === null || menuItem === void 0 ? void 0 : menuItem.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase) === null || _b === void 0 ? void 0 : _b.call(_a));
+    if (!menuItem)
+        return false;
+    const tagName = menuItem.tagName.toLowerCase();
+    return [MENUITEM_TAGNAME, MENUITEMCHECKBOX_TAGNAME, MENUITEMRADIO_TAGNAME].includes(tagName);
 };
 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; };
 const isActiveMenuItem = (menuItem) => { var _a, _b; return ((_b = (_a = menuItem === null || menuItem === void 0 ? void 0 : menuItem.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase) === null || _b === void 0 ? void 0 : _b.call(_a)) === MENUITEM_TAGNAME && !menuItem.hasAttribute('disabled'); };

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

@@ -213,6 +213,8 @@ declare class Popover extends Popover_base {
     arrowElement: HTMLElement | null;
     triggerElement: HTMLElement | null;
     /** @internal */
+    private triggerElementOriginalStyle;
+    /** @internal */
     private hoverTimer;
     /** @internal */
     private isHovered;
@@ -265,7 +267,7 @@ declare class Popover extends Popover_base {
      * @param oldValue - The old value of the visible property.
      * @param newValue - The new value of the visible property.
      */
-    private isOpenUpdated;
+    protected isOpenUpdated(oldValue: boolean, newValue: boolean): Promise<void>;
     /**
      *  Handles mouse enter event on the trigger element.
      *  This method sets the `isHovered` flag to true and shows the popover
@@ -310,6 +312,14 @@ declare class Popover extends Popover_base {
      * It uses the floating-ui/dom library to calculate the position.
      */
     private positionPopover;
+    /**
+     * Finds the closest popover to the passed element in the DOM tree.
+     *
+     * Useful when need to find the parent popover in a nested popover scenario.
+     *
+     * @param element - The element to start searching from.
+     */
+    protected findClosestPopover(element: Element): Popover | null;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
 }

package/dist/components/popover/popover.component.js

@@ -227,6 +227,11 @@ class Popover extends PreventScrollMixin(FocusTrapMixin(Component)) {
         this.arrowElement = null;
         this.triggerElement = null;
         /** @internal */
+        this.triggerElementOriginalStyle = {
+            zIndex: '',
+            position: '',
+        };
+        /** @internal */
         this.hoverTimer = null;
         /** @internal */
         this.isHovered = false;
@@ -534,6 +539,11 @@ class Popover extends PreventScrollMixin(FocusTrapMixin(Component)) {
             }
             if (this.backdrop) {
                 this.utils.createBackdrop();
+                this.triggerElementOriginalStyle = {
+                    position: this.triggerElement.style.position,
+                    zIndex: this.triggerElement.style.zIndex,
+                };
+                this.triggerElement.style.position = 'relative';
                 this.triggerElement.style.zIndex = `${this.zIndex}`;
             }
             this.positionPopover();
@@ -563,6 +573,10 @@ class Popover extends PreventScrollMixin(FocusTrapMixin(Component)) {
             if (popoverStack.peek() === this) {
                 popoverStack.pop();
             }
+            if (this.backdrop) {
+                this.triggerElement.style.position = this.triggerElementOriginalStyle.position;
+                this.triggerElement.style.zIndex = this.triggerElementOriginalStyle.zIndex;
+            }
             if (this.backdropElement) {
                 (_d = this.backdropElement) === null || _d === void 0 ? void 0 : _d.remove();
                 this.backdropElement = null;
@@ -648,6 +662,20 @@ class Popover extends PreventScrollMixin(FocusTrapMixin(Component)) {
             }
         });
     }
+    /**
+     * Finds the closest popover to the passed element in the DOM tree.
+     *
+     * Useful when need to find the parent popover in a nested popover scenario.
+     *
+     * @param element - The element to start searching from.
+     */
+    findClosestPopover(element) {
+        let el = element;
+        while (el && !(el instanceof Popover)) {
+            el = el.parentElement;
+        }
+        return el;
+    }
     render() {
         return html `
       <div class="popover-hover-bridge"></div>