@aurodesignsystem/auro-library 4.1.0-beta.3 → 4.1.0-beta.4

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Semantic Release Automated Changelog
 
+# [4.1.0-beta.4](https://github.com/AlaskaAirlines/auro-library/compare/v4.1.0-beta.3...v4.1.0-beta.4) (2025-04-11)
+
+
+### Bug Fixes
+
+* add SSR env condition check in floatingUI ([c71a77e](https://github.com/AlaskaAirlines/auro-library/commit/c71a77ed805dc2e61593dd0c483a01c9f19e2a01))
+* not to hide bib on blur event with mouse being pressed ([8808ee6](https://github.com/AlaskaAirlines/auro-library/commit/8808ee6911ccfb81c0e9a0ed23762852983e1239))
+* setup mousePressChecker in floatingUI's configure function ([6136d36](https://github.com/AlaskaAirlines/auro-library/commit/6136d36a980802dc56a0bea9d9aa12b7bf3e6621))
+
 # [4.1.0-beta.3](https://github.com/AlaskaAirlines/auro-library/compare/v4.1.0-beta.2...v4.1.0-beta.3) (2025-04-09)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurodesignsystem/auro-library",
-  "version": "4.1.0-beta.3",
+  "version": "4.1.0-beta.4",
   "description": "This repository holds shared scripts, utilities, and workflows utilized across repositories along the Auro Design System.",
   "repository": {
     "type": "git",

package/scripts/runtime/floatingUI.mjs

@@ -6,6 +6,23 @@ import { autoUpdate, computePosition, offset, autoPlacement, flip } from '@float
 const MAX_CONFIGURATION_COUNT = 10;
 
 export default class AuroFloatingUI {
+
+  static isMousePressed = false;
+
+  static issetupMousePressChecker = false;
+
+  static setupMousePressChecker() {
+    if (!AuroFloatingUI.issetupMousePressChecker && window && window.addEventListener) {
+      AuroFloatingUI.issetupMousePressChecker = true;
+      function mouseEventGlobalHandler(event) {
+        AuroFloatingUI.isMousePressed = event.type === 'mousedown';
+      }
+
+      window.addEventListener('mousedown', mouseEventGlobalHandler);
+      window.addEventListener('mouseup', mouseEventGlobalHandler);
+    }
+  }
+
   constructor(element, behavior) {
     this.element = element;
     this.behavior = behavior;
@@ -197,7 +214,7 @@ export default class AuroFloatingUI {
 
         setTimeout(() => {
           this.configureBibStrategy(value);
-        });
+        }, 0);
       }
 
       if (this.element.isPopoverVisible) {
@@ -244,6 +261,11 @@ export default class AuroFloatingUI {
    * If not, and if the bib isn't in fullscreen mode with focus lost, it hides the bib.
    */
   handleFocusLoss() {
+    // if moused is being pressed, skip and let click event to handle the action
+    if (AuroFloatingUI.isMousePressed) {
+      return;
+    }
+
     if (this.element.noHideOnThisFocusLoss ||
       this.element.hasAttribute('noHideOnThisFocusLoss')) {
       return;
@@ -312,7 +334,7 @@ export default class AuroFloatingUI {
     // it conflicts if showBib gets call from a button that's not this.element.trigger
     setTimeout(() => {
       window.addEventListener('click', this.clickHandler);
-    });
+    }, 0);
   }
 
   cleanupHideHandlers() {
@@ -461,8 +483,9 @@ export default class AuroFloatingUI {
           }
           break;
         case 'blur':
-          // send this task to end of the queue to wait a frame in case focus moves within the floating element/bib
-          setTimeout(() => this.handleFocusLoss());
+          // send this task 100ms later queue to
+          // wait a frame in case focus moves within the floating element/bib
+          setTimeout(() => this.handleFocusLoss(), 0);
           break;
         case 'click':
           if (document.activeElement === document.body) {
@@ -530,6 +553,8 @@ export default class AuroFloatingUI {
   }
 
   configure(elem, eventPrefix) {
+    AuroFloatingUI.setupMousePressChecker();
+
     this.eventPrefix = eventPrefix;
     if (this.element !== elem) {
       this.element = elem;
@@ -570,20 +595,22 @@ export default class AuroFloatingUI {
 
   disconnect() {
     this.cleanupHideHandlers();
-    this.element.cleanup?.();
+    if (this.element) {
+      this.element.cleanup?.();
 
-    if (this.element.bib) {
-      this.element.shadowRoot.append(this.element.bib);
-    }
-
-    // Remove event & keyboard listeners
-    if (this.element?.trigger) {
-      this.element.trigger.removeEventListener('keydown', this.handleEvent);
-      this.element.trigger.removeEventListener('click', this.handleEvent);
-      this.element.trigger.removeEventListener('mouseenter', this.handleEvent);
-      this.element.trigger.removeEventListener('mouseleave', this.handleEvent);
-      this.element.trigger.removeEventListener('focus', this.handleEvent);
-      this.element.trigger.removeEventListener('blur', this.handleEvent);
+      if (this.element.bib) {
+        this.element.shadowRoot.append(this.element.bib);
+      }
+  
+      // Remove event & keyboard listeners
+      if (this.element?.trigger) {
+        this.element.trigger.removeEventListener('keydown', this.handleEvent);
+        this.element.trigger.removeEventListener('click', this.handleEvent);
+        this.element.trigger.removeEventListener('mouseenter', this.handleEvent);
+        this.element.trigger.removeEventListener('mouseleave', this.handleEvent);
+        this.element.trigger.removeEventListener('focus', this.handleEvent);
+        this.element.trigger.removeEventListener('blur', this.handleEvent);
+      }
     }
   }
 }