@momentum-design/components 0.84.1 → 0.84.3

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

@@ -215,6 +215,8 @@ declare class Popover extends Popover_base {
     /** @internal */
     private hoverTimer;
     /** @internal */
+    private isHovered;
+    /** @internal */
     protected isTriggerClicked: boolean;
     /** @internal */
     private openDelay;
@@ -264,6 +266,23 @@ declare class Popover extends Popover_base {
      * @param newValue - The new value of the visible property.
      */
     private isOpenUpdated;
+    /**
+     *  Handles mouse enter event on the trigger element.
+     *  This method sets the `isHovered` flag to true and shows the popover
+     */
+    private handleMouseEnter;
+    /**
+     *  Handles mouse leave event on the trigger element.
+     *  This method sets the `isHovered` flag to false and starts the close delay
+     *  timer to hide the popover.
+     */
+    private handleMouseLeave;
+    /**
+     *  Handles focus out event on the trigger element.
+     *  This method checks if the popover is not hovered and hides the popover.
+     *  If the popover is hovered, it will not hide the popover.
+     */
+    private handleFocusOut;
     /**
      * Starts the close delay timer.
      * If the popover is not interactive, it will close the popover after the delay.

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

@@ -229,6 +229,8 @@ class Popover extends PreventScrollMixin(FocusTrapMixin(Component)) {
         /** @internal */
         this.hoverTimer = null;
         /** @internal */
+        this.isHovered = false;
+        /** @internal */
         this.isTriggerClicked = false;
         /** @internal */
         this.openDelay = 0;
@@ -280,6 +282,33 @@ class Popover extends PreventScrollMixin(FocusTrapMixin(Component)) {
                 this.hidePopover();
             }
         };
+        /**
+         *  Handles mouse enter event on the trigger element.
+         *  This method sets the `isHovered` flag to true and shows the popover
+         */
+        this.handleMouseEnter = () => {
+            this.isHovered = true;
+            this.showPopover();
+        };
+        /**
+         *  Handles mouse leave event on the trigger element.
+         *  This method sets the `isHovered` flag to false and starts the close delay
+         *  timer to hide the popover.
+         */
+        this.handleMouseLeave = () => {
+            this.isHovered = false;
+            this.startCloseDelay();
+        };
+        /**
+         *  Handles focus out event on the trigger element.
+         *  This method checks if the popover is not hovered and hides the popover.
+         *  If the popover is hovered, it will not hide the popover.
+         */
+        this.handleFocusOut = () => {
+            if (!this.isHovered) {
+                this.hidePopover();
+            }
+        };
         /**
          * Starts the close delay timer.
          * If the popover is not interactive, it will close the popover after the delay.
@@ -394,8 +423,8 @@ class Popover extends PreventScrollMixin(FocusTrapMixin(Component)) {
         }
         if (this.trigger.includes('mouseenter')) {
             const hoverBridge = this.renderRoot.querySelector('.popover-hover-bridge');
-            this.triggerElement.addEventListener('mouseenter', this.showPopover);
-            this.triggerElement.addEventListener('mouseleave', this.startCloseDelay);
+            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);
@@ -403,7 +432,7 @@ class Popover extends PreventScrollMixin(FocusTrapMixin(Component)) {
         if (this.trigger.includes('focusin')) {
             this.triggerElement.addEventListener('focusin', this.showPopover);
             if (!this.interactive) {
-                this.triggerElement.addEventListener('focusout', this.hidePopover);
+                this.triggerElement.addEventListener('focusout', this.handleFocusOut);
             }
         }
         this.addEventListener('focus-trap-exit', this.hidePopover);
@@ -416,12 +445,12 @@ class Popover extends PreventScrollMixin(FocusTrapMixin(Component)) {
             return;
         const hoverBridge = this.renderRoot.querySelector('.popover-hover-bridge');
         this.triggerElement.removeEventListener('click', this.togglePopoverVisible);
-        this.triggerElement.removeEventListener('mouseenter', this.showPopover);
-        this.triggerElement.removeEventListener('mouseleave', this.hidePopover);
+        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.hidePopover);
+        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);
     }