@momentum-design/components 0.100.0 → 0.100.2

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

@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
+/* eslint-disable no-restricted-syntax */
 import { arrow, autoUpdate, computePosition, flip, offset, shift, size } from '@floating-ui/dom';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -69,6 +70,7 @@ class Popover extends PreventScrollMixin(FocusTrapMixin(Component)) {
          * - **mouseenter**
          * - **focusin**
          * - **manual**
+         *
          * @default click
          */
         this.trigger = DEFAULTS.TRIGGER;
@@ -249,6 +251,13 @@ class Popover extends PreventScrollMixin(FocusTrapMixin(Component)) {
          * @default false
          */
         this.disableAriaHasPopup = DEFAULTS.DISABLE_ARIA_HAS_POPUP;
+        /**
+         * 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.
+         */
+        this.keepConnectedTooltipClosed = DEFAULTS.KEEP_CONNECTED_TOOLTIP_CLOSED;
         this.arrowElement = null;
         this.triggerElement = null;
         /** @internal */
@@ -261,13 +270,107 @@ class Popover extends PreventScrollMixin(FocusTrapMixin(Component)) {
         /** @internal */
         this.isHovered = false;
         /** @internal */
-        this.isTriggerClicked = false;
-        /** @internal */
         this.openDelay = 0;
         /** @internal */
         this.closeDelay = 0;
         /** @internal */
+        this.floatingUICleanupFunction = null;
+        /** @internal */
+        this.shouldSupressOpening = false;
+        /** @internal */
         this.backdropElement = null;
+        /** @internal */
+        this.connectedTooltip = null;
+        this.storeConnectedTooltip = () => {
+            const connectedTooltips = this.getRootNode().querySelectorAll(`mdc-tooltip[triggerID="${this.triggerID}"]`);
+            for (const tooltip of connectedTooltips) {
+                if (tooltip !== this) {
+                    this.connectedTooltip = tooltip;
+                    return;
+                }
+            }
+            this.connectedTooltip = null;
+        };
+        this.cleanupTrigger = () => {
+            var _a;
+            const triggers = ((_a = this.trigger) === null || _a === void 0 ? void 0 : _a.split(' ')) || [];
+            const validTriggers = triggers.filter(trigger => Object.values(TRIGGER).includes(trigger));
+            let newTrigger = validTriggers.length > 0 ? this.trigger : DEFAULTS.TRIGGER;
+            if (newTrigger === 'mouseenter') {
+                if (this.interactive) {
+                    // if the popover is interactive, there is interactive content inside the popover
+                    // so we can't use the focusin trigger, since after closing with escape key, the
+                    // popover keeps opening. So we need to use the click trigger instead.
+                    newTrigger = 'mouseenter click';
+                }
+                else {
+                    // non-interactive popovers with trigger mouseenter (like a tooltip) should also open
+                    // when focusing to the trigger element
+                    newTrigger = 'mouseenter focusin';
+                }
+            }
+            this.trigger = newTrigger;
+        };
+        /**
+         * 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.
+         */
+        this.setupTriggerListeners = () => {
+            if (!this.triggerElement)
+                return;
+            if (this.trigger.includes('click')) {
+                this.triggerElement.addEventListener('click', this.togglePopoverVisible);
+            }
+            if (this.trigger.includes('mouseenter')) {
+                const hoverBridge = this.renderRoot.querySelector('.popover-hover-bridge');
+                hoverBridge === null || hoverBridge === void 0 ? void 0 : hoverBridge.addEventListener('mouseenter', this.show);
+                this.triggerElement.addEventListener('mouseenter', this.handleMouseEnter);
+                this.triggerElement.addEventListener('mouseleave', this.handleMouseLeave);
+                this.addEventListener('mouseenter', this.cancelCloseDelay);
+                this.addEventListener('mouseleave', this.startCloseDelay);
+            }
+            if (this.trigger.includes('focusin')) {
+                this.triggerElement.addEventListener('focusin', this.show);
+                if (!this.interactive) {
+                    this.triggerElement.addEventListener('focusout', this.handleFocusOut);
+                }
+            }
+        };
+        /**
+         * Removes the trigger related event listeners.
+         */
+        this.removeTriggerListeners = () => {
+            var _a, _b, _c, _d, _e;
+            // click trigger
+            (_a = this.triggerElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', this.togglePopoverVisible);
+            // mouseenter trigger
+            const hoverBridge = this.renderRoot.querySelector('.popover-hover-bridge');
+            hoverBridge === null || hoverBridge === void 0 ? void 0 : hoverBridge.removeEventListener('mouseenter', this.show);
+            (_b = this.triggerElement) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseenter', this.handleMouseEnter);
+            (_c = this.triggerElement) === null || _c === void 0 ? void 0 : _c.removeEventListener('mouseleave', this.handleMouseLeave);
+            this.removeEventListener('mouseenter', this.cancelCloseDelay);
+            this.removeEventListener('mouseleave', this.startCloseDelay);
+            // focusin trigger
+            (_d = this.triggerElement) === null || _d === void 0 ? void 0 : _d.removeEventListener('focusin', this.show);
+            (_e = this.triggerElement) === null || _e === void 0 ? void 0 : _e.removeEventListener('focusout', this.handleFocusOut);
+        };
+        /**
+         * Removes all event listeners related to the popover.
+         */
+        this.removeAllListeners = () => {
+            var _a;
+            this.removeTriggerListeners();
+            if (this.hideOnOutsideClick) {
+                document.removeEventListener('click', this.onOutsidePopoverClick);
+            }
+            if (this.hideOnEscape) {
+                this.removeEventListener('keydown', this.onEscapeKeydown);
+                (_a = this.triggerElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', this.onEscapeKeydown);
+            }
+            if (this.hideOnBlur) {
+                this.removeEventListener('focusout', this.onPopoverFocusOut);
+            }
+        };
         /**
          * Handles the outside click event to close the popover.
          *
@@ -276,13 +379,11 @@ class Popover extends PreventScrollMixin(FocusTrapMixin(Component)) {
         this.onOutsidePopoverClick = (event) => {
             if (popoverStack.peek() !== this)
                 return;
-            let insidePopoverClick = false;
             const path = event.composedPath();
-            insidePopoverClick =
-                this.contains(event.target) || path.includes(this.triggerElement) || path.includes(this);
+            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.hidePopover();
+                this.hide();
                 PopoverEventManager.onClickOutside(this);
             }
         };
@@ -302,7 +403,7 @@ class Popover extends PreventScrollMixin(FocusTrapMixin(Component)) {
                 event.stopPropagation();
             }
             event.preventDefault();
-            this.hidePopover();
+            this.hide();
             PopoverEventManager.onEscapeKeyPressed(this);
         };
         /**
@@ -312,7 +413,7 @@ class Popover extends PreventScrollMixin(FocusTrapMixin(Component)) {
          */
         this.onPopoverFocusOut = (event) => {
             if (!this.contains(event.relatedTarget)) {
-                this.hidePopover();
+                this.hide();
             }
         };
         /**
@@ -321,7 +422,7 @@ class Popover extends PreventScrollMixin(FocusTrapMixin(Component)) {
          */
         this.handleMouseEnter = () => {
             this.isHovered = true;
-            this.showPopover();
+            this.show();
         };
         /**
          *  Handles mouse leave event on the trigger element.
@@ -339,7 +440,7 @@ class Popover extends PreventScrollMixin(FocusTrapMixin(Component)) {
          */
         this.handleFocusOut = () => {
             if (!this.isHovered) {
-                this.hidePopover();
+                this.hide();
             }
         };
         /**
@@ -348,11 +449,9 @@ class Popover extends PreventScrollMixin(FocusTrapMixin(Component)) {
          */
         this.startCloseDelay = () => {
             if (!this.interactive) {
-                this.hidePopover();
+                this.hide();
             }
             else {
-                if (this.isTriggerClicked)
-                    return;
                 this.hoverTimer = window.setTimeout(() => {
                     this.visible = false;
                 }, this.closeDelay);
@@ -363,163 +462,184 @@ class Popover extends PreventScrollMixin(FocusTrapMixin(Component)) {
          */
         this.cancelCloseDelay = () => {
             if (this.hoverTimer) {
-                clearTimeout(this.hoverTimer);
+                window.clearTimeout(this.hoverTimer);
                 this.hoverTimer = null;
             }
         };
         /**
          * Shows the popover.
          */
-        this.showPopover = () => {
+        this.show = () => {
+            if (this.visible || this.shouldSupressOpening) {
+                return;
+            }
             this.cancelCloseDelay();
-            setTimeout(() => {
+            if (this.openDelay > 0) {
+                setTimeout(() => {
+                    this.visible = true;
+                }, this.openDelay);
+            }
+            else {
                 this.visible = true;
-            }, this.openDelay);
+            }
         };
         /**
          * Hides the popover.
          */
-        this.hidePopover = () => {
+        this.hide = () => {
             if (this.closeDelay) {
                 setTimeout(() => {
                     this.visible = false;
-                    this.isTriggerClicked = false;
                 }, this.closeDelay);
             }
             else {
                 this.visible = false;
-                this.isTriggerClicked = false;
             }
         };
         /**
          * Toggles the popover visibility.
          */
         this.togglePopoverVisible = () => {
-            if (this.isTriggerClicked) {
-                this.hidePopover();
+            if (this.visible) {
+                this.hide();
             }
             else {
-                this.showPopover();
-                this.isTriggerClicked = true;
+                this.show();
+            }
+        };
+        /**
+         * Positions the popover based on the trigger element.
+         * It also handles the flip, size and arrow placement.
+         * It uses the floating-ui/dom library to calculate the position.
+         */
+        this.positionPopover = () => {
+            if (!this.triggerElement)
+                return;
+            const middleware = [
+                shift({
+                    boundary: !this.boundary || this.boundary === 'clippingAncestors'
+                        ? 'clippingAncestors'
+                        : Array.from(document.querySelectorAll(this.boundary)),
+                    rootBoundary: this.boundaryRoot,
+                    padding: this.boundaryPadding,
+                }),
+            ];
+            let popoverOffset = this.offset;
+            if (this.flip) {
+                middleware.push(flip());
+            }
+            if (this.size) {
+                // expose a CSS variable for the available height
+                // so that it can be used in other components styles
+                const setInternalAvailableHeight = (availableHeight) => {
+                    this.style.setProperty('--mdc-popover-internal-available-height', `${availableHeight}px`);
+                };
+                const popoverContent = this.renderRoot.querySelector('[part="popover-content"]');
+                middleware.push(size({
+                    apply({ availableHeight }) {
+                        if (!popoverContent)
+                            return;
+                        Object.assign(popoverContent.style, {
+                            maxHeight: `${availableHeight}px`,
+                            overflowY: 'auto',
+                        });
+                        setInternalAvailableHeight(availableHeight);
+                    },
+                    padding: 50,
+                }));
+            }
+            if (this.showArrow) {
+                this.arrowElement = this.renderRoot.querySelector('.popover-arrow');
+                if (this.arrowElement) {
+                    const arrowLen = this.arrowElement.offsetHeight;
+                    const arrowOffset = Math.sqrt(2 * arrowLen ** 2) / 2;
+                    popoverOffset += arrowOffset;
+                    middleware.push(arrow({ element: this.arrowElement, padding: 12 }));
+                }
+            }
+            middleware.push(offset(popoverOffset));
+            this.floatingUICleanupFunction = autoUpdate(this.triggerElement, this, async () => {
+                if (!this.triggerElement)
+                    return;
+                const { x, y, middlewareData, placement } = await computePosition(this.triggerElement, this, {
+                    placement: this.placement,
+                    middleware,
+                });
+                this.utils.updatePopoverStyle(x, y);
+                if (middlewareData.arrow && this.arrowElement) {
+                    this.utils.updateArrowStyle(middlewareData.arrow, placement);
+                }
+                if (this.trigger.includes('mouseenter') && this.interactive) {
+                    this.utils.setupHoverBridge(placement);
+                }
+            });
+        };
+        /**
+         * 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.
+         */
+        this.findClosestPopover = (element) => {
+            let el = element;
+            while (el && !(el instanceof Popover)) {
+                el = el.parentElement;
             }
+            return el;
         };
         this.utils = new PopoverUtils(this);
     }
+    setupTriggerRelatedElement() {
+        this.triggerElement = this.getRootNode().querySelector(`[id="${this.triggerID}"]`);
+        this.storeConnectedTooltip();
+    }
     async firstUpdated(changedProperties) {
-        var _a, _b;
         super.firstUpdated(changedProperties);
         this.utils.setupAppendTo();
         [this.openDelay, this.closeDelay] = this.utils.setupDelay();
-        this.setupTriggerListener();
-        this.utils.setupAccessibility();
+        this.setupTriggerRelatedElement();
+        this.cleanupTrigger();
+        this.setupTriggerListeners();
         this.style.zIndex = `${this.zIndex}`;
         PopoverEventManager.onCreatedPopover(this);
-        if (this.visible) {
-            this.positionPopover();
-            this.activatePreventScroll();
-            // If the popover is visible on first update and focustrap is enabled, we need to activate the focus trap
-            if (this.interactive && this.focusTrap) {
-                // Wait for the first update to complete before setting focusable elements
-                await this.updateComplete;
-                (_a = this.activateFocusTrap) === null || _a === void 0 ? void 0 : _a.call(this);
-                (_b = this.setInitialFocus) === null || _b === void 0 ? void 0 : _b.call(this);
-            }
-        }
     }
     async disconnectedCallback() {
-        var _a;
+        var _a, _b;
         super.disconnectedCallback();
-        this.removeEventListeners();
+        this.removeAllListeners();
         (_a = this.deactivateFocusTrap) === null || _a === void 0 ? void 0 : _a.call(this);
         this.deactivatePreventScroll();
-        PopoverEventManager.onDestroyedPopover(this);
-        popoverStack.remove(this);
-    }
-    /**
-     * Sets up the trigger event listeners based on the trigger type.
-     */
-    setupTriggerListener() {
-        if (!this.triggerID)
-            return;
-        this.triggerElement = this.getRootNode().querySelector(`[id="${this.triggerID}"]`);
-        if (!this.triggerElement)
-            return;
-        if (this.trigger === 'mouseenter') {
-            if (this.interactive) {
-                // if the popover is interactive, there is interactive content inside the popover
-                // so we can't use the focusin trigger, since after closing with escape key, the
-                // popover keeps opening. So we need to use the click trigger instead.
-                this.trigger = 'mouseenter click';
+        this.utils.removeBackdrop();
+        (_b = this.floatingUICleanupFunction) === null || _b === void 0 ? void 0 : _b.call(this);
+        // clean timer if there is one set:
+        this.cancelCloseDelay();
+        if (this.keepConnectedTooltipClosed) {
+            if (this.connectedTooltip) {
+                this.connectedTooltip.shouldSupressOpening = false;
             }
-            else {
-                // non-interactive popovers with trigger mouseenter (like a tooltip) should also open
-                // when focusing to the trigger element
-                this.trigger = 'mouseenter focusin';
-            }
-        }
-        if (this.trigger.includes('click')) {
-            this.triggerElement.addEventListener('click', this.togglePopoverVisible);
-        }
-        if (this.trigger.includes('mouseenter')) {
-            const hoverBridge = this.renderRoot.querySelector('.popover-hover-bridge');
-            this.triggerElement.addEventListener('mouseenter', this.handleMouseEnter);
-            this.triggerElement.addEventListener('mouseleave', this.handleMouseLeave);
-            this.addEventListener('mouseenter', this.cancelCloseDelay);
-            this.addEventListener('mouseleave', this.startCloseDelay);
-            hoverBridge === null || hoverBridge === void 0 ? void 0 : hoverBridge.addEventListener('mouseenter', this.showPopover);
         }
-        if (this.trigger.includes('focusin')) {
-            this.triggerElement.addEventListener('focusin', this.showPopover);
-            if (!this.interactive) {
-                this.triggerElement.addEventListener('focusout', this.handleFocusOut);
-            }
-        }
-        this.addEventListener('focus-trap-exit', this.hidePopover);
-    }
-    /**
-     * Removes the trigger event listeners.
-     */
-    removeEventListeners() {
-        if (!this.triggerElement)
-            return;
-        const hoverBridge = this.renderRoot.querySelector('.popover-hover-bridge');
-        this.triggerElement.removeEventListener('click', this.togglePopoverVisible);
-        this.triggerElement.removeEventListener('mouseenter', this.handleMouseEnter);
-        this.triggerElement.removeEventListener('mouseleave', this.handleMouseLeave);
-        this.removeEventListener('mouseenter', this.cancelCloseDelay);
-        this.removeEventListener('mouseleave', this.startCloseDelay);
-        this.triggerElement.removeEventListener('focusin', this.showPopover);
-        this.triggerElement.removeEventListener('focusout', this.handleFocusOut);
-        hoverBridge === null || hoverBridge === void 0 ? void 0 : hoverBridge.removeEventListener('mouseenter', this.showPopover);
-        this.removeEventListener('focus-trap-exit', this.hidePopover);
+        PopoverEventManager.onDestroyedPopover(this);
+        popoverStack.remove(this);
     }
     async updated(changedProperties) {
         super.updated(changedProperties);
-        // If the role is changed to an empty string, set it to null
-        // to avoid setting an invalid role on the popover element.
-        if (changedProperties.has('role')) {
-            if (this.role === '') {
-                this.role = null;
-            }
-        }
         if (changedProperties.has('visible')) {
             const oldValue = changedProperties.get('visible') || false;
             await this.isOpenUpdated(oldValue, this.visible);
             this.utils.updateAriaExpandedAttribute();
         }
+        if (changedProperties.has('trigger')) {
+            this.cleanupTrigger();
+            this.removeTriggerListeners();
+            this.setupTriggerListeners();
+        }
         if (changedProperties.has('placement')) {
             this.setAttribute('placement', Object.values(POPOVER_PLACEMENT).includes(this.placement) ? this.placement : DEFAULTS.PLACEMENT);
         }
         if (changedProperties.has('delay')) {
             [this.openDelay, this.closeDelay] = this.utils.setupDelay();
         }
-        if (changedProperties.has('trigger')) {
-            const triggers = this.trigger.split(' ');
-            const validTriggers = triggers.filter(trigger => Object.values(TRIGGER).includes(trigger));
-            this.setAttribute('trigger', validTriggers.length > 0 ? this.trigger : DEFAULTS.TRIGGER);
-            this.removeEventListeners();
-            this.setupTriggerListener();
-        }
         if (changedProperties.has('color')) {
             this.setAttribute('color', Object.values(COLOR).includes(this.color) ? this.color : DEFAULTS.COLOR);
         }
@@ -532,7 +652,15 @@ class Popover extends PreventScrollMixin(FocusTrapMixin(Component)) {
         if (changedProperties.has('interactive') ||
             changedProperties.has('aria-label') ||
             changedProperties.has('aria-labelledby')) {
-            this.utils.setupAccessibility();
+            this.utils.updateAriaLabels();
+        }
+        if (changedProperties.has('role')) {
+            // If the role is changed to an empty string, set it to null
+            // to avoid setting an invalid role on the popover element.
+            if (this.role === '') {
+                this.role = null;
+            }
+            this.utils.updateAriaModal();
         }
         if (changedProperties.has('disableAriaExpanded')) {
             this.utils.updateAriaExpandedAttribute();
@@ -564,14 +692,22 @@ class Popover extends PreventScrollMixin(FocusTrapMixin(Component)) {
      * @param newValue - The new value of the visible property.
      */
     async isOpenUpdated(oldValue, newValue) {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c, _d, _e;
         if (oldValue === newValue || !this.triggerElement) {
             return;
         }
-        if (newValue) {
+        if (newValue && !this.shouldSupressOpening) {
             if (popoverStack.peek() !== this) {
                 popoverStack.push(this);
             }
+            if (this.keepConnectedTooltipClosed) {
+                // If this popover gets visible and keepConnectedTooltipsClosed is true,
+                // we need to close the connected tooltip.
+                if (this.connectedTooltip) {
+                    this.connectedTooltip.visible = false;
+                    this.connectedTooltip.shouldSupressOpening = true;
+                }
+            }
             if (this.backdrop) {
                 this.utils.createBackdrop();
                 this.triggerElementOriginalStyle = {
@@ -588,33 +724,34 @@ class Popover extends PreventScrollMixin(FocusTrapMixin(Component)) {
                     this.triggerElement.style.pointerEvents = 'none';
                 }
             }
-            if (this.hideOnOutsideClick) {
-                document.addEventListener('click', this.onOutsidePopoverClick);
-            }
             if (this.hideOnEscape) {
                 this.addEventListener('keydown', this.onEscapeKeydown);
                 (_a = this.triggerElement) === null || _a === void 0 ? void 0 : _a.addEventListener('keydown', this.onEscapeKeydown);
             }
             this.activatePreventScroll();
-            if (this.interactive && this.focusTrap) {
-                // Wait for the update to complete before setting focusable elements
-                await this.updateComplete;
-                (_b = this.activateFocusTrap) === null || _b === void 0 ? void 0 : _b.call(this);
-                (_c = this.setInitialFocus) === null || _c === void 0 ? void 0 : _c.call(this);
+            if (this.hideOnOutsideClick) {
+                document.addEventListener('click', this.onOutsidePopoverClick);
             }
+            // make sure popover is fully rendered before activating focus trap
+            setTimeout(() => {
+                var _a, _b;
+                if (this.interactive && this.focusTrap) {
+                    (_a = this.activateFocusTrap) === null || _a === void 0 ? void 0 : _a.call(this);
+                    (_b = this.setInitialFocus) === null || _b === void 0 ? void 0 : _b.call(this);
+                }
+            }, 0);
             PopoverEventManager.onShowPopover(this);
         }
         else {
             if (popoverStack.peek() === this) {
                 popoverStack.pop();
             }
+            // cleanup floating-ui on closing the popover
+            (_b = this.floatingUICleanupFunction) === null || _b === void 0 ? void 0 : _b.call(this);
             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;
+                this.utils.removeBackdrop();
             }
             if (this.hideOnBlur) {
                 this.removeEventListener('focusout', this.onPopoverFocusOut);
@@ -627,7 +764,7 @@ class Popover extends PreventScrollMixin(FocusTrapMixin(Component)) {
             }
             if (this.hideOnEscape) {
                 this.removeEventListener('keydown', this.onEscapeKeydown);
-                (_e = this.triggerElement) === null || _e === void 0 ? void 0 : _e.removeEventListener('keydown', this.onEscapeKeydown);
+                (_c = this.triggerElement) === null || _c === void 0 ? void 0 : _c.removeEventListener('keydown', this.onEscapeKeydown);
             }
             if (this.disableAriaExpanded) {
                 this.triggerElement.removeAttribute('aria-expanded');
@@ -637,93 +774,17 @@ class Popover extends PreventScrollMixin(FocusTrapMixin(Component)) {
                 this.triggerElement.removeAttribute('aria-haspopup');
             }
             this.deactivatePreventScroll();
-            (_f = this.deactivateFocusTrap) === null || _f === void 0 ? void 0 : _f.call(this);
+            (_d = this.deactivateFocusTrap) === null || _d === void 0 ? void 0 : _d.call(this);
             if (this.focusBackToTrigger) {
-                (_g = this.triggerElement) === null || _g === void 0 ? void 0 : _g.focus();
+                (_e = this.triggerElement) === null || _e === void 0 ? void 0 : _e.focus();
             }
-            PopoverEventManager.onHidePopover(this);
-        }
-    }
-    /**
-     * Positions the popover based on the trigger element.
-     * It also handles the flip, size and arrow placement.
-     * It uses the floating-ui/dom library to calculate the position.
-     */
-    positionPopover() {
-        if (!this.triggerElement)
-            return;
-        const middleware = [
-            shift({
-                boundary: !this.boundary || this.boundary === 'clippingAncestors'
-                    ? 'clippingAncestors'
-                    : Array.from(document.querySelectorAll(this.boundary)),
-                rootBoundary: this.boundaryRoot,
-                padding: this.boundaryPadding,
-            }),
-        ];
-        let popoverOffset = this.offset;
-        if (this.flip) {
-            middleware.push(flip());
-        }
-        if (this.size) {
-            // expose a CSS variable for the available height
-            // so that it can be used in other components styles
-            const setInternalAvailableHeight = (availableHeight) => {
-                this.style.setProperty('--mdc-popover-internal-available-height', `${availableHeight}px`);
-            };
-            const popoverContent = this.renderRoot.querySelector('[part="popover-content"]');
-            middleware.push(size({
-                apply({ availableHeight }) {
-                    if (!popoverContent)
-                        return;
-                    Object.assign(popoverContent.style, {
-                        maxHeight: `${availableHeight}px`,
-                        overflowY: 'auto',
-                    });
-                    setInternalAvailableHeight(availableHeight);
-                },
-                padding: 50,
-            }));
-        }
-        if (this.showArrow) {
-            this.arrowElement = this.renderRoot.querySelector('.popover-arrow');
-            if (this.arrowElement) {
-                const arrowLen = this.arrowElement.offsetHeight;
-                const arrowOffset = Math.sqrt(2 * arrowLen ** 2) / 2;
-                popoverOffset += arrowOffset;
-                middleware.push(arrow({ element: this.arrowElement, padding: 12 }));
-            }
-        }
-        middleware.push(offset(popoverOffset));
-        autoUpdate(this.triggerElement, this, async () => {
-            if (!this.triggerElement)
-                return;
-            const { x, y, middlewareData, placement } = await computePosition(this.triggerElement, this, {
-                placement: this.placement,
-                middleware,
-            });
-            this.utils.updatePopoverStyle(x, y);
-            if (middlewareData.arrow && this.arrowElement) {
-                this.utils.updateArrowStyle(middlewareData.arrow, placement);
-            }
-            if (this.trigger.includes('mouseenter') && this.interactive) {
-                this.utils.setupHoverBridge(placement);
+            if (this.keepConnectedTooltipClosed) {
+                if (this.connectedTooltip) {
+                    this.connectedTooltip.shouldSupressOpening = false;
+                }
             }
-        });
-    }
-    /**
-     * 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;
+            PopoverEventManager.onHidePopover(this);
         }
-        return el;
     }
     render() {
         return html `
@@ -735,7 +796,7 @@ class Popover extends PreventScrollMixin(FocusTrapMixin(Component)) {
             variant="tertiary"
             size="20"
             aria-label=${ifDefined(this.closeButtonAriaLabel) || ''}
-            @click="${this.hidePopover}"
+            @click="${this.hide}"
           ></mdc-button>`
             : nothing}
       ${this.showArrow ? html `<div class="popover-arrow"></div>` : nothing}
@@ -874,4 +935,8 @@ __decorate([
     property({ type: Boolean, reflect: true, attribute: 'disable-aria-haspopup' }),
     __metadata("design:type", Boolean)
 ], Popover.prototype, "disableAriaHasPopup", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'keep-connected-tooltip-closed' }),
+    __metadata("design:type", Boolean)
+], Popover.prototype, "keepConnectedTooltipClosed", void 0);
 export default Popover;