@momentum-design/components 0.127.8 → 0.127.9

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

@@ -3,7 +3,7 @@ import { Component } from '../../models';
 import type { PopoverColor, PopoverPlacement, PopoverStrategy, PopoverTrigger } from './popover.types';
 declare const Popover_base: import("../../utils/mixins/index.types").Constructor<Component & import("../../utils/mixins/BackdropMixin").BackdropMixinInterface> & import("../../utils/mixins/index.types").Constructor<Component & import("../../utils/mixins/PreventScrollMixin").PreventScrollMixinInterface> & import("../../utils/mixins/index.types").Constructor<Component & import("../../utils/mixins/FocusTrapMixin").FocusTrapClassInterface> & typeof Component;
 /**
- * Popover is genric overlay which can be trigered by any actinable element.
+ * Popover is generic overlay which can be triggered by any actionable element.
  *
  * It can be used for tooltips, dropdowns, menus or any showing any other contextual content.
  *
@@ -19,7 +19,7 @@ declare const Popover_base: import("../../utils/mixins/index.types").Constructor
  * aria-expanded and aria-haspopup attributes on the trigger.
  *
  * To prevent unexpected attribute changes on the trigger `disable-aria-expanded` attribute must be set on all linked
- * Popoers except one.
+ * Popovers except one.
  *
  * ### React Popover with append-to attribute
  *
@@ -262,10 +262,22 @@ declare class Popover extends Popover_base {
      */
     size: boolean;
     /**
-     * The z-index of the popover.
-     * @default 1000
+     * The effective z-index of the popover.
+     *
+     * If no explicit `z-index` value is provided, then we calculate
+     * z-index based on the popover’s nesting depth (`popoverDepth`)
+     * to ensure proper stacking order among multiple popovers.
+     *
+     * The formula used is: `DEFAULTS.Z_INDEX + (popoverDepth * 3)`.
+     * This approach guarantees that each nested popover appears above its parent.
+     * Ex: A root-level popover has a z-index of 1000,
+     *    its first-level child popover will have a z-index of 1003,
+     *    and a second-level child popover will have a z-index of 1006, and so on.
+     *
+     * When a value is explicitly set, it overrides the internally computed value.
      */
-    zIndex: number;
+    get zIndex(): number;
+    set zIndex(value: number);
     /**
      * Element ID that the popover append to.
      * @default ''
@@ -345,6 +357,20 @@ declare class Popover extends Popover_base {
     private floatingUICleanupFunction;
     /** @internal */
     protected shouldSuppressOpening: boolean;
+    /**
+     * The internal z-index of the popover.
+     * @internal
+     */
+    private internalZIndex?;
+    /**
+     * At root-level popover starts with a depth of `0`. Each subsequent
+     * child popover increases the depth by one.
+     *
+     * This value is used to compute stacking order (z-index) dynamically,
+     * ensuring that nested popovers appear above their parent popovers.
+     * @internal
+     */
+    private popoverDepth;
     /** @internal */
     private get connectedTooltip();
     /**

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

@@ -22,7 +22,7 @@ import { popoverStack } from './popover.stack';
 import styles from './popover.styles';
 import { PopoverUtils } from './popover.utils';
 /**
- * Popover is genric overlay which can be trigered by any actinable element.
+ * Popover is generic overlay which can be triggered by any actionable element.
  *
  * It can be used for tooltips, dropdowns, menus or any showing any other contextual content.
  *
@@ -38,7 +38,7 @@ import { PopoverUtils } from './popover.utils';
  * aria-expanded and aria-haspopup attributes on the trigger.
  *
  * To prevent unexpected attribute changes on the trigger `disable-aria-expanded` attribute must be set on all linked
- * Popoers except one.
+ * Popovers except one.
  *
  * ### React Popover with append-to attribute
  *
@@ -96,6 +96,30 @@ import { PopoverUtils } from './popover.utils';
  * @csspart popover-hover-bridge - The hover bridge of the popover.
  */
 class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component))) {
+    /**
+     * The effective z-index of the popover.
+     *
+     * If no explicit `z-index` value is provided, then we calculate
+     * z-index based on the popover’s nesting depth (`popoverDepth`)
+     * to ensure proper stacking order among multiple popovers.
+     *
+     * The formula used is: `DEFAULTS.Z_INDEX + (popoverDepth * 3)`.
+     * This approach guarantees that each nested popover appears above its parent.
+     * Ex: A root-level popover has a z-index of 1000,
+     *    its first-level child popover will have a z-index of 1003,
+     *    and a second-level child popover will have a z-index of 1006, and so on.
+     *
+     * When a value is explicitly set, it overrides the internally computed value.
+     */
+    get zIndex() {
+        if (this.internalZIndex === undefined || !Number.isInteger(this.internalZIndex)) {
+            return DEFAULTS.Z_INDEX + this.popoverDepth * 3;
+        }
+        return this.internalZIndex;
+    }
+    set zIndex(value) {
+        this.internalZIndex = value;
+    }
     /** @internal */
     get connectedTooltip() {
         const connectedTooltips = this.getRootNode().querySelectorAll(`mdc-tooltip[triggerID="${this.triggerID}"]`);
@@ -280,11 +304,6 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
          * @default false
          */
         this.size = DEFAULTS.SIZE;
-        /**
-         * The z-index of the popover.
-         * @default 1000
-         */
-        this.zIndex = DEFAULTS.Z_INDEX;
         /**
          * aria-label attribute to be set for close button accessibility.
          * @default null
@@ -357,6 +376,15 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
         this.floatingUICleanupFunction = null;
         /** @internal */
         this.shouldSuppressOpening = false;
+        /**
+         * At root-level popover starts with a depth of `0`. Each subsequent
+         * child popover increases the depth by one.
+         *
+         * This value is used to compute stacking order (z-index) dynamically,
+         * ensuring that nested popovers appear above their parent popovers.
+         * @internal
+         */
+        this.popoverDepth = 0;
         this.parseTrigger = () => {
             var _a;
             const triggers = ((_a = this.trigger) === null || _a === void 0 ? void 0 : _a.split(' ')) || [];
@@ -684,7 +712,6 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
     }
     connectedCallback() {
         super.connectedCallback();
-        this.style.zIndex = `${this.zIndex}`;
         this.utils.setupAppendTo();
         this.setupTriggerListeners();
     }
@@ -729,9 +756,6 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
         if (changedProperties.has('color')) {
             this.setAttribute('color', Object.values(COLOR).includes(this.color) ? this.color : DEFAULTS.COLOR);
         }
-        if (changedProperties.has('zIndex')) {
-            this.setAttribute('z-index', `${this.zIndex}`);
-        }
         if (changedProperties.has('appendTo')) {
             if (this.appendTo) {
                 this.utils.setupAppendTo();
@@ -787,7 +811,9 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
         }
         if (newValue && !this.shouldSuppressOpening) {
             if (popoverStack.peek() !== this) {
-                popoverStack.push(this);
+                this.popoverDepth = popoverStack.push(this);
+                // request update to trigger zIndex recalculation
+                this.requestUpdate('zIndex');
             }
             if (!this.keepConnectedTooltipOpen) {
                 // If this popover gets visible and keepConnectedTooltipsClosed is true,
@@ -908,6 +934,7 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
         }
     }
     render() {
+        this.style.zIndex = `${this.zIndex}`;
         return html `
       <div part="popover-hover-bridge"></div>
       ${this.closeButton
@@ -1034,8 +1061,9 @@ __decorate([
 ], Popover.prototype, "size", void 0);
 __decorate([
     property({ type: Number, reflect: true, attribute: 'z-index' }),
-    __metadata("design:type", Number)
-], Popover.prototype, "zIndex", void 0);
+    __metadata("design:type", Number),
+    __metadata("design:paramtypes", [Number])
+], Popover.prototype, "zIndex", null);
 __decorate([
     property({ type: String, reflect: true, attribute: 'append-to' }),
     __metadata("design:type", String)

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

@@ -15,8 +15,9 @@ declare class PopoverStack {
      * Adds a popover to the stack
      *
      * @param popover - Popover instance
+     * @returns The new depth of the stack
      */
-    push(popover: Popover): void;
+    push(popover: Popover): number;
     /**
      * Removes the last popover from the stack
      *

package/dist/components/popover/popover.stack.js

@@ -16,9 +16,11 @@ class PopoverStack {
      * Adds a popover to the stack
      *
      * @param popover - Popover instance
+     * @returns The new depth of the stack
      */
     push(popover) {
         this.stack.push(popover);
+        return this.stack.length;
     }
     /**
      * Removes the last popover from the stack