@momentum-design/components 0.129.45 → 0.129.47

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

@@ -18,9 +18,9 @@ import { FocusTrapMixin } from '../../utils/mixins/focus/FocusTrapMixin';
 import { PreventScrollMixin } from '../../utils/mixins/PreventScrollMixin';
 import { Timers } from '../../utils/controllers/Timers';
 import { ACTIONS, KeyToActionMixin } from '../../utils/mixins/KeyToActionMixin';
+import { DepthManager } from '../../utils/controllers/DepthManager';
 import { COLOR, DEFAULTS, POPOVER_PLACEMENT, TIMEOUTS, TRIGGER } from './popover.constants';
 import { PopoverEventManager } from './popover.events';
-import { popoverStack } from './popover.stack';
 import styles from './popover.styles';
 import { PopoverUtils } from './popover.utils';
 /**
@@ -101,21 +101,12 @@ class Popover extends KeyToActionMixin(BackdropMixin(PreventScrollMixin(FocusTra
     /**
      * 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.
+     * If no explicit `z-index` value is provided, then it automatically calculated
+     * to ensure proper stacking order among multiple overlays.
      */
     get zIndex() {
-        if (this.internalZIndex === undefined || !Number.isInteger(this.internalZIndex)) {
-            return DEFAULTS.Z_INDEX + this.popoverDepth * 3;
+        if (!Number.isInteger(this.internalZIndex)) {
+            return this.depthManager.getHostZIndex();
         }
         return this.internalZIndex;
     }
@@ -136,6 +127,10 @@ class Popover extends KeyToActionMixin(BackdropMixin(PreventScrollMixin(FocusTra
     }
     constructor() {
         super();
+        /** track the depth of the popover for z-index calculation
+         * @internal
+         */
+        this.depthManager = new DepthManager(this);
         /**
          * The unique ID of the popover.
          */
@@ -374,15 +369,6 @@ class Popover extends KeyToActionMixin(BackdropMixin(PreventScrollMixin(FocusTra
         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;
         /** @internal */
         this.timers = new Timers(this);
         /** @internal */
@@ -465,7 +451,7 @@ class Popover extends KeyToActionMixin(BackdropMixin(PreventScrollMixin(FocusTra
             }
             if (this.hideOnEscape) {
                 this.removeEventListener('keydown', this.onEscapeKeydown);
-                document.removeEventListener('keydown', this.onEscapeKeydown, { capture: true });
+                document.removeEventListener('keydown', this.onEscapeKeydown);
             }
             if (this.hideOnBlur) {
                 this.removeEventListener('focusout', this.onPopoverFocusOut);
@@ -478,7 +464,7 @@ class Popover extends KeyToActionMixin(BackdropMixin(PreventScrollMixin(FocusTra
          * @internal
          */
         this.onOutsidePopoverClick = (event) => {
-            if (popoverStack.peek() !== this)
+            if (!this.depthManager.isHostOnTop())
                 return;
             const path = event.composedPath();
             const insidePopoverClick = this.contains(event.target) || path.includes(this.triggerElement) || path.includes(this);
@@ -497,7 +483,7 @@ class Popover extends KeyToActionMixin(BackdropMixin(PreventScrollMixin(FocusTra
          * @internal
          */
         this.onEscapeKeydown = (event) => {
-            if (!this.visible || this.getActionForKeyEvent(event) !== ACTIONS.ESCAPE) {
+            if (!this.visible || this.getActionForKeyEvent(event) !== ACTIONS.ESCAPE || !this.depthManager.isHostOnTop()) {
                 return;
             }
             if (!this.propagateEventOnEscape) {
@@ -614,28 +600,6 @@ class Popover extends KeyToActionMixin(BackdropMixin(PreventScrollMixin(FocusTra
             this.timers.clearTimeout(TIMEOUTS.HOVER);
             this.timers.clearTimeout(TIMEOUTS.CLOSE);
         };
-        /**
-         * Shows the popover.
-         */
-        this.show = () => {
-            if (this.shouldSuppressOpening) {
-                return;
-            }
-            this.cancelCloseDelay();
-            if (this.visible) {
-                return;
-            }
-            const callback = () => {
-                this.visible = true;
-            };
-            if (this.openDelay > 0) {
-                this.timers.setTimeout(TIMEOUTS.OPEN, callback, this.openDelay);
-            }
-            else {
-                this.timers.clearTimeout(TIMEOUTS.OPEN);
-                callback();
-            }
-        };
         /**
          * Hides the popover.
          */
@@ -746,6 +710,7 @@ class Popover extends KeyToActionMixin(BackdropMixin(PreventScrollMixin(FocusTra
                 animationFrame: this.animationFrame,
             });
         };
+        this.show = this.show.bind(this);
         this.utils = new PopoverUtils(this);
         this.parseTrigger();
         [this.openDelay, this.closeDelay] = this.utils.setupDelay();
@@ -775,7 +740,6 @@ class Popover extends KeyToActionMixin(BackdropMixin(PreventScrollMixin(FocusTra
         }
         this.utils.cleanupAppendTo();
         PopoverEventManager.onDestroyedPopover(this);
-        popoverStack.remove(this);
     }
     async updated(changedProperties) {
         super.updated(changedProperties);
@@ -838,6 +802,15 @@ class Popover extends KeyToActionMixin(BackdropMixin(PreventScrollMixin(FocusTra
             }
         }
     }
+    /** @internal */
+    onComponentStackChanged(changed) {
+        if (changed === 'removed') {
+            this.hide();
+        }
+        else if (changed === 'moved') {
+            this.requestUpdate('zIndex');
+        }
+    }
     /**
      * Handles the popover visibility change and position the popover.
      * Handles the exit event to close the popover.
@@ -852,8 +825,7 @@ class Popover extends KeyToActionMixin(BackdropMixin(PreventScrollMixin(FocusTra
             return;
         }
         if (newValue && !this.shouldSuppressOpening) {
-            if (popoverStack.peek() !== this) {
-                this.popoverDepth = popoverStack.push(this);
+            if (this.depthManager.pushHost()) {
                 // request update to trigger zIndex recalculation
                 this.requestUpdate('zIndex');
             }
@@ -896,9 +868,7 @@ class Popover extends KeyToActionMixin(BackdropMixin(PreventScrollMixin(FocusTra
             PopoverEventManager.onShowPopover(this);
         }
         else {
-            if (popoverStack.peek() === this) {
-                popoverStack.pop();
-            }
+            this.depthManager.popHost();
             // cleanup floating-ui on closing the popover
             (_a = this.floatingUICleanupFunction) === null || _a === void 0 ? void 0 : _a.call(this);
             if (this.backdrop) {
@@ -931,6 +901,28 @@ class Popover extends KeyToActionMixin(BackdropMixin(PreventScrollMixin(FocusTra
             PopoverEventManager.onHidePopover(this);
         }
     }
+    /**
+     * Shows the popover.
+     */
+    show() {
+        if (this.shouldSuppressOpening) {
+            return;
+        }
+        this.cancelCloseDelay();
+        if (this.visible) {
+            return;
+        }
+        const callback = () => {
+            this.visible = true;
+        };
+        if (this.openDelay > 0) {
+            this.timers.setTimeout(TIMEOUTS.OPEN, callback, this.openDelay);
+        }
+        else {
+            this.timers.clearTimeout(TIMEOUTS.OPEN);
+            callback();
+        }
+    }
     isEventFromTrigger(event) {
         var _a;
         if (!this.triggerID)

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

@@ -92,7 +92,7 @@ declare class Searchpopover extends Searchfield {
      * Override this to make sure this stays on top of other components.
      * @default 1000
      */
-    popoverZIndex: number;
+    popoverZIndex?: number;
     /**
      * The aria-label for the popover within Searchpopover.
      * Use to provide an accessible name for the popover i.e. "Search results".

package/dist/components/searchpopover/searchpopover.component.js

@@ -13,7 +13,7 @@ import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
 import Searchfield from '../searchfield/searchfield.component';
-import { POPOVER_PLACEMENT, DEFAULTS as POPOVER_DEFAULTS } from '../popover/popover.constants';
+import { POPOVER_PLACEMENT } from '../popover/popover.constants';
 import { DEFAULTS as FORMFIELD_DEFAULTS } from '../formfieldwrapper/formfieldwrapper.constants';
 import { ROLE } from '../../utils/roles';
 import styles from './searchpopover.styles';
@@ -111,7 +111,7 @@ class Searchpopover extends Searchfield {
          * Override this to make sure this stays on top of other components.
          * @default 1000
          */
-        this.popoverZIndex = POPOVER_DEFAULTS.Z_INDEX;
+        this.popoverZIndex = undefined;
     }
     renderInputElement() {
         var _a, _b;

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

@@ -114,7 +114,7 @@ declare class Select extends Select_base implements AssociatedFormControl {
      * Override this to make sure this stays on top of other components.
      * @default 1000
      */
-    popoverZIndex: number;
+    popoverZIndex?: number;
     /**
      * Determines whether the dropdown should flip its position when it hits the boundary.
      * @default false

package/dist/components/select/select.component.js

@@ -131,7 +131,7 @@ class Select extends ListNavigationMixin(CaptureDestroyEventForChildElement(Auto
          * Override this to make sure this stays on top of other components.
          * @default 1000
          */
-        this.popoverZIndex = POPOVER_DEFAULTS.Z_INDEX;
+        this.popoverZIndex = undefined;
         /**
          * Determines whether the dropdown should flip its position when it hits the boundary.
          * @default false
@@ -704,8 +704,10 @@ class Select extends ListNavigationMixin(CaptureDestroyEventForChildElement(Auto
           boundary="${ifDefined(this.boundary)}"
           strategy="${ifDefined(this.strategy)}"
           placement="${this.placement}"
-          @closebyescape="${() => {
-            this.displayPopover = false;
+          @closebyescape="${(event) => {
+            if (event.target === event.currentTarget) {
+                this.displayPopover = false;
+            }
         }}"
           @closebyoutsideclick="${() => {
             this.displayPopover = false;

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

@@ -1,6 +1,7 @@
 import { CSSResult } from 'lit';
 import { Component } from '../../models';
 import type { TextType, TagName } from './text.types';
+declare const Text_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/OverflowMixin").OverflowMixinInterface> & typeof Component;
 /**
  * Text component for creating styled text elements.
  * It has to be mounted within the ThemeProvider to access color and font tokens.
@@ -19,7 +20,11 @@ import type { TextType, TagName } from './text.types';
  *
  * @csspart text - The text element
  */
-declare class Text extends Component {
+declare class Text extends Text_base {
+    /**
+     * @internal
+     */
+    private textPartElement;
     /**
      * Specifies the text style to be applied.
      *
@@ -77,7 +82,11 @@ declare class Text extends Component {
      * For instance, setting this attribute to `h2` will render the text element as an `h2` element.
      * Note that the styling is determined by the `type` attribute.
      */
-    tagname?: TagName;
+    tagname: TagName;
+    /**
+     * @internal
+     */
+    protected get overflowElement(): HTMLElement;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
 }

package/dist/components/text/text.component.js

@@ -8,8 +8,9 @@ var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 import { html } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, query } from 'lit/decorators.js';
 import { Component } from '../../models';
+import { OverflowMixin } from '../../utils/mixins/OverflowMixin';
 import styles from './text.styles';
 import { DEFAULTS, VALID_TEXT_TAGS } from './text.constants';
 /**
@@ -30,7 +31,7 @@ import { DEFAULTS, VALID_TEXT_TAGS } from './text.constants';
  *
  * @csspart text - The text element
  */
-class Text extends Component {
+class Text extends OverflowMixin(Component) {
     constructor() {
         super(...arguments);
         /**
@@ -92,6 +93,16 @@ class Text extends Component {
          */
         this.tagname = DEFAULTS.TEXT_ELEMENT_TAGNAME;
     }
+    /**
+     * @internal
+     */
+    get overflowElement() {
+        // span and small are inline elements therefore we need to return the host element itself
+        if ([VALID_TEXT_TAGS.SPAN, VALID_TEXT_TAGS.SMALL].includes(this.tagname)) {
+            return this;
+        }
+        return this.textPartElement;
+    }
     render() {
         // Lit does not support dynamically changing values for the tag name of a custom element.
         // Read more: https://lit.dev/docs/templates/expressions/#invalid-locations
@@ -121,6 +132,10 @@ class Text extends Component {
     }
 }
 Text.styles = [...Component.styles, ...styles];
+__decorate([
+    query(`[part='${DEFAULTS.CSS_PART_TEXT}']`),
+    __metadata("design:type", HTMLElement)
+], Text.prototype, "textPartElement", void 0);
 __decorate([
     property({ attribute: 'type', reflect: true, type: String }),
     __metadata("design:type", String)

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

@@ -38,6 +38,16 @@ declare class Tooltip extends Popover {
      * @default 'description'
      */
     tooltipType: TooltipType;
+    /**
+     * If true, the tooltip will only be shown when the trigger element's content is overflowing on the x-axis.
+     *
+     * Supports the following components:
+     * - mdc-button
+     * - mdc-text
+     *
+     * @default false
+     */
+    onlyShowWhenTriggerOverflows: boolean;
     connectedCallback(): void;
     /**
      * Sets the type attribute for the tooltip component.
@@ -61,7 +71,9 @@ declare class Tooltip extends Popover {
      * @param changedProperties - The changed properties.
      */
     private onTooltipTypeUpdated;
-    update(changedProperties: PropertyValues): Promise<void>;
+    protected isOpenUpdated(oldValue: boolean, newValue: boolean): Promise<void>;
+    update(changedProperties: PropertyValues<this>): Promise<void>;
+    show(): void;
     static styles: Array<CSSResult>;
 }
 export default Tooltip;

package/dist/components/tooltip/tooltip.component.js

@@ -12,6 +12,7 @@ import { v4 as uuidv4 } from 'uuid';
 import { ROLE } from '../../utils/roles';
 import Popover from '../popover/popover.component';
 import { DEFAULTS as POPOVER_DEFAULTS, POPOVER_PLACEMENT } from '../popover/popover.constants';
+import { hasOverflowMixin } from '../../utils/dom';
 import { DEFAULTS, TOOLTIP_TYPES } from './tooltip.constants';
 import styles from './tooltip.styles';
 /**
@@ -52,6 +53,16 @@ class Tooltip extends Popover {
          * @default 'description'
          */
         this.tooltipType = DEFAULTS.TOOLTIP_TYPE;
+        /**
+         * If true, the tooltip will only be shown when the trigger element's content is overflowing on the x-axis.
+         *
+         * Supports the following components:
+         * - mdc-button
+         * - mdc-text
+         *
+         * @default false
+         */
+        this.onlyShowWhenTriggerOverflows = DEFAULTS.ONLY_SHOW_WHEN_TRIGGER_OVERFLOWS;
     }
     connectedCallback() {
         super.connectedCallback();
@@ -153,6 +164,23 @@ class Tooltip extends Popover {
             }
         }
     }
+    async isOpenUpdated(oldValue, newValue) {
+        const { triggerElement } = this;
+        if (oldValue === newValue || !triggerElement) {
+            return;
+        }
+        if (!newValue) {
+            // Timing is critical when the popover pushed/popped from the stack.
+            //
+            // Timing here:
+            // Tooltip closes -> New Popover opens -> Tooltip popped from the stack -> it popes out the new popover as well.
+            //
+            // It happens because by default the popped element automatically pop the element above it in the stack.
+            // To avoid this, we explicitly remove the tooltip from the stack before it is popped.
+            this.depthManager.remove([this]);
+        }
+        await super.isOpenUpdated(oldValue, newValue);
+    }
     async update(changedProperties) {
         super.update(changedProperties);
         if (changedProperties.has('id')) {
@@ -165,10 +193,22 @@ class Tooltip extends Popover {
             this.onTooltipTypeUpdated(changedProperties);
         }
     }
+    show() {
+        if (this.onlyShowWhenTriggerOverflows && this.triggerElement && hasOverflowMixin(this.triggerElement)) {
+            if (!this.triggerElement.isWidthOverflowing()) {
+                return;
+            }
+        }
+        super.show();
+    }
 }
 Tooltip.styles = [...Popover.styles, ...styles];
 __decorate([
     property({ type: String, attribute: 'tooltip-type', reflect: true }),
     __metadata("design:type", String)
 ], Tooltip.prototype, "tooltipType", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'only-show-when-trigger-overflows', reflect: true }),
+    __metadata("design:type", Boolean)
+], Tooltip.prototype, "onlyShowWhenTriggerOverflows", void 0);
 export default Tooltip;

package/dist/components/tooltip/tooltip.constants.d.ts

@@ -16,5 +16,6 @@ declare const DEFAULTS: {
     readonly PLACEMENT: "top";
     readonly SHOW_ARROW: true;
     readonly TOOLTIP_TYPE: "description";
+    readonly ONLY_SHOW_WHEN_TRIGGER_OVERFLOWS: false;
 };
 export { DEFAULTS, TAG_NAME, TOOLTIP_TYPES };

package/dist/components/tooltip/tooltip.constants.js

@@ -18,5 +18,6 @@ const DEFAULTS = {
     PLACEMENT: POPOVER_PLACEMENT.TOP,
     SHOW_ARROW: true,
     TOOLTIP_TYPE: TOOLTIP_TYPES.DESCRIPTION,
+    ONLY_SHOW_WHEN_TRIGGER_OVERFLOWS: false,
 };
 export { DEFAULTS, TAG_NAME, TOOLTIP_TYPES };