@aurodesignsystem/auro-formkit 2.2.1-beta.2 → 2.2.1

package/components/select/demo/api.min.js

@@ -2155,17 +2155,70 @@ const computePosition = (reference, floating, options) => {
 /* eslint-disable line-comment-position, no-inline-comments */
 
 
+
+const MAX_CONFIGURATION_COUNT = 10;
+
 class AuroFloatingUI {
-  constructor() {
+
+  /**
+   * @private
+   */
+  static isMousePressed = false;
+
+  /**
+   * @private
+   */
+  static isMousePressHandlerInitialized = false;
+
+  /**
+   * @private
+   */
+  static setupMousePressChecker() {
+    if (!AuroFloatingUI.isMousePressHandlerInitialized && window && window.addEventListener) {
+      AuroFloatingUI.isMousePressHandlerInitialized = true;
+
+      const mouseEventGlobalHandler = (event) => {
+        AuroFloatingUI.isMousePressed = event.type === 'mousedown';
+      };
+
+      window.addEventListener('mousedown', mouseEventGlobalHandler);
+      window.addEventListener('mouseup', mouseEventGlobalHandler);
+    }
+  }
+
+  constructor(element, behavior) {
+    this.element = element;
+    this.behavior = behavior;
+
     // Store event listener references for cleanup
     this.focusHandler = null;
     this.clickHandler = null;
     this.keyDownHandler = null;
-    
+
+    /**
+     * @private
+     */
+    this.configureTrial = 0;
+
     /**
      * @private
      */
     this.eventPrefix = undefined;
+
+    /**
+     * @private
+     */
+    this.id = undefined;
+
+    /**
+     * @private
+     */
+    this.showing = false;
+
+    /**
+     * @private
+     */
+    this.strategy = undefined;
   }
 
   /**
@@ -2193,29 +2246,48 @@ class AuroFloatingUI {
    * @private
    * Determines the positioning strategy based on the current viewport size and mobile breakpoint.
    *
-   * This method checks if the current viewport width is less than or equal to the specified mobile fullscreen breakpoint 
+   * This method checks if the current viewport width is less than or equal to the specified mobile fullscreen breakpoint
    * defined in the bib element. If it is, the strategy is set to 'fullscreen'; otherwise, it defaults to 'floating'.
    *
-   * @returns {String} The positioning strategy, either 'fullscreen' or 'floating'.
+   * @returns {String} The positioning strategy, one of 'fullscreen', 'floating', 'cover'.
    */
   getPositioningStrategy() {
-    let strategy = 'floating';
-    if (this.element.bib.mobileFullscreenBreakpoint) {
-      const smallerThanBreakpoint = window.matchMedia(`(max-width: ${this.element.bib.mobileFullscreenBreakpoint})`).matches;
-      if (smallerThanBreakpoint) {
-        strategy = 'fullscreen';
-      }
+    const breakpoint = this.element.bib.mobileFullscreenBreakpoint || this.element.floaterConfig?.fullscreenBreakpoint;
+    switch (this.behavior) {
+      case "tooltip":
+        return "floating";
+      case "dialog":
+      case "drawer":
+        if (breakpoint) {
+          const smallerThanBreakpoint = window.matchMedia(`(max-width: ${breakpoint})`).matches;
+
+          this.element.expanded = smallerThanBreakpoint;
+        }
+        if (this.element.nested) {
+          return "cover";
+        }
+        return 'fullscreen';
+      case "dropdown":
+      case undefined:
+      case null:
+        if (breakpoint) {
+          const smallerThanBreakpoint = window.matchMedia(`(max-width: ${breakpoint})`).matches;
+          if (smallerThanBreakpoint) {
+            return 'fullscreen';
+          }
+        }
+        return "floating";
+      default:
+        return this.behavior;
     }
-
-    return strategy;
   }
 
   /**
    * @private
    * Positions the bib element based on the current configuration and positioning strategy.
    *
-   * This method determines the appropriate positioning strategy (fullscreen or not) and configures the bib accordingly. 
-   * It also sets up middleware for the floater configuration, computes the position of the bib relative to the trigger element, 
+   * This method determines the appropriate positioning strategy (fullscreen or not) and configures the bib accordingly.
+   * It also sets up middleware for the floater configuration, computes the position of the bib relative to the trigger element,
    * and applies the calculated position to the bib's style.
    */
   position() {
@@ -2226,21 +2298,33 @@ class AuroFloatingUI {
       this.mirrorSize();
       // Define the middlware for the floater configuration
       const middleware = [
-        offset(this.element.floaterConfig.offset || 0),
-        ...(this.element.floaterConfig.flip ? [flip()] : []), // Add flip middleware if flip is enabled
-        ...(this.element.floaterConfig.autoPlacement ? [autoPlacement()] : []), // Add autoPlacement middleware if autoPlacement is enabled
+        offset(this.element.floaterConfig?.offset || 0),
+        ...this.element.floaterConfig?.flip ? [flip()] : [], // Add flip middleware if flip is enabled.
+        ...this.element.floaterConfig?.autoPlacement ? [autoPlacement()] : [], // Add autoPlacement middleware if autoPlacement is enabled.
       ];
 
       // Compute the position of the bib
       computePosition(this.element.trigger, this.element.bib, {
-        placement: this.element.floaterConfig.placement || 'bottom',
+        placement: this.element.floaterConfig?.placement,
         middleware: middleware || []
-      }).then(({x, y}) => { // eslint-disable-line id-length
+      }).then(({ x, y }) => { // eslint-disable-line id-length
         Object.assign(this.element.bib.style, {
           left: `${x}px`,
           top: `${y}px`,
         });
       });
+    } else if (strategy === 'cover') {
+      // Compute the position of the bib
+      computePosition(this.element.parentNode, this.element.bib, {
+        placement: 'bottom-start'
+      }).then(({ x, y }) => { // eslint-disable-line id-length
+        Object.assign(this.element.bib.style, {
+          left: `${x}px`,
+          top: `${y - this.element.parentNode.offsetHeight}px`,
+          width: `${this.element.parentNode.offsetWidth}px`,
+          height: `${this.element.parentNode.offsetHeight}px`
+        });
+      });
     }
   }
 
@@ -2269,34 +2353,48 @@ class AuroFloatingUI {
    *
    * @param {string} strategy - The positioning strategy ('fullscreen' or 'floating').
    */
-  configureBibStrategy(strategy) {
-    const prevStrategy = this.element.isBibFullscreen ? 'fullscreen' : 'floating';
-    if (strategy === 'fullscreen') {
+  configureBibStrategy(value) {
+    if (value === 'fullscreen') {
       this.element.isBibFullscreen = true;
       // reset the prev position
+      this.element.bib.setAttribute('isfullscreen', "");
+      this.element.bib.style.position = 'fixed';
       this.element.bib.style.top = "0px";
       this.element.bib.style.left = "0px";
+      this.element.bib.style.width = '';
+      this.element.bib.style.height = '';
 
       // reset the size that was mirroring `size` css-part
       const bibContent = this.element.bib.shadowRoot.querySelector(".container");
-      bibContent.style.width = '';
-      bibContent.style.height = '';
-      bibContent.style.maxWidth = '';
-      bibContent.style.maxHeight = `${window.visualViewport.height}px`;
+      if (bibContent) {
+        bibContent.style.width = '';
+        bibContent.style.height = '';
+        bibContent.style.maxWidth = '';
+        bibContent.style.maxHeight = `${window.visualViewport.height}px`;
+        this.configureTrial = 0;
+      } else if (this.configureTrial < MAX_CONFIGURATION_COUNT) {
+        this.configureTrial += 1;
+
+        setTimeout(() => {
+          this.configureBibStrategy(value);
+        }, 0);
+      }
 
       if (this.element.isPopoverVisible) {
         this.lockScroll(true);
       }
     } else {
+      this.element.bib.style.position = '';
+      this.element.bib.removeAttribute('isfullscreen');
       this.element.isBibFullscreen = false;
-
-      this.lockScroll(false);
     }
 
-    if (prevStrategy !== strategy) {
+    const isChanged = this.strategy && this.strategy !== value;
+    this.strategy = value;
+    if (isChanged) {
       const event = new CustomEvent(this.eventPrefix ? `${this.eventPrefix}-strategy-change` : 'strategy-change', {
         detail: {
-          strategy,
+          value,
         },
         composed: true
       });
@@ -2307,18 +2405,6 @@ class AuroFloatingUI {
 
   updateState() {
     const isVisible = this.element.isPopoverVisible;
-
-    // Refactor this to apply attribute to correct focusable element
-    // Reference Issue: https://github.com/AlaskaAirlines/auro-library/issues/105
-    //
-    // this.element.trigger.setAttribute('aria-expanded', isVisible);
-
-    if (isVisible) {
-      this.element.bib.setAttribute('data-show', true);
-    } else {
-      this.element.bib.removeAttribute('data-show');
-    }
-
     if (!isVisible) {
       this.cleanupHideHandlers();
       try {
@@ -2329,16 +2415,32 @@ class AuroFloatingUI {
     }
   }
 
+  /**
+   * @private
+   * getting called on 'blur' in trigger or `focusin` in document
+   *  
+   * Hides the bib if focus moves outside of the trigger or bib, unless a 'noHideOnThisFocusLoss' flag is set.
+   * This method checks if the currently active element is still within the trigger or bib.
+   * If not, and if the bib isn't in fullscreen mode with focus lost, it hides the bib.
+   */
   handleFocusLoss() {
-    if (this.element.noHideOnThisFocusLoss || 
-        this.element.hasAttribute('noHideOnThisFocusLoss')) {
+    // if mouse 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;
     }
 
-    const {activeElement} = document;
-    if (activeElement === document.querySelector('body') ||
-        this.element.contains(activeElement) ||
-        this.element.bibContent?.contains(activeElement)) {
+    const { activeElement } = document;
+    // if focus is still inside of trigger or bib, do not close
+    if (this.element.contains(activeElement) || this.element.bib?.contains(activeElement)) {
+      return;
+    }
+    // if fullscreen bib is still open and the focus is missing, do not close
+    if (this.element.bib.hasAttribute('isfullscreen') && activeElement === document.body) {
       return;
     }
 
@@ -2346,31 +2448,66 @@ class AuroFloatingUI {
   }
 
   setupHideHandlers() {
+    this.preventFocusLoseOnBibClick = (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+    };
+    this.element.bib.addEventListener('mousedown', this.preventFocusLoseOnBibClick);
+
     // Define handlers & store references
     this.focusHandler = () => this.handleFocusLoss();
 
     this.clickHandler = (evt) => {
-      if (!evt.composedPath().includes(this.element.trigger) && 
-          !evt.composedPath().includes(this.element.bibContent)) {
-        this.hideBib();
+      if ((!evt.composedPath().includes(this.element.trigger) &&
+        !evt.composedPath().includes(this.element.bib)) ||
+        (this.element.bib.backdrop && evt.composedPath().includes(this.element.bib.backdrop))) {
+        const existedVisibleFloatingUI = document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
+
+        if (existedVisibleFloatingUI && existedVisibleFloatingUI.element.isPopoverVisible) {
+          // if something else is open, close that
+          existedVisibleFloatingUI.hideBib();
+          document.expandedAuroFormkitDropdown = null;
+          document.expandedAuroFloater = this;
+        } else {
+          this.hideBib();
+        }
       }
     };
 
     // ESC key handler
     this.keyDownHandler = (evt) => {
       if (evt.key === 'Escape' && this.element.isPopoverVisible) {
+        const existedVisibleFloatingUI = document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
+        if (existedVisibleFloatingUI && existedVisibleFloatingUI !== this && existedVisibleFloatingUI.element.isPopoverVisible) {
+          // if something else is open, let it handle itself
+          return;
+        }
         this.hideBib();
       }
     };
 
-    // Add event listeners using the stored references
-    document.addEventListener('focusin', this.focusHandler);
-    window.addEventListener('click', this.clickHandler);
+    if (this.behavior !== 'drawer' && this.behavior !== 'dialog') {
+      // Add event listeners using the stored references
+      document.addEventListener('focusin', this.focusHandler);
+    }
+
     document.addEventListener('keydown', this.keyDownHandler);
+
+    // send this task to the end of queue to prevent conflicting
+    // it conflicts if showBib gets call from a button that's not this.element.trigger
+    setTimeout(() => {
+      window.addEventListener('click', this.clickHandler);
+    }, 0);
   }
 
   cleanupHideHandlers() {
     // Remove event listeners if they exist
+
+    if (this.preventFocusLoseOnBibClick) {
+      this.element.bib.removeEventListener('mousedown', this.preventFocusLoseOnBibClick);
+      delete this.preventFocusLoseOnBibClick;
+    }
+
     if (this.focusHandler) {
       document.removeEventListener('focusin', this.focusHandler);
       this.focusHandler = null;
@@ -2395,40 +2532,54 @@ class AuroFloatingUI {
 
   updateCurrentExpandedDropdown() {
     // Close any other dropdown that is already open
-    if (document.expandedAuroFormkitDropdown) {
-      document.expandedAuroFormkitDropdown.hide;
+    const existedVisibleFloatingUI = document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
+    if (existedVisibleFloatingUI && existedVisibleFloatingUI !== this &&
+      existedVisibleFloatingUI.isPopoverVisible &&
+      document.expandedAuroFloater.eventPrefix === this.eventPrefix) {
+      document.expandedAuroFloater.hideBib();
     }
 
-    document.expandedAuroFormkitDropdown = this;
+    document.expandedAuroFloater = this;
   }
 
   showBib() {
-    if (!this.element.disabled && !this.element.isPopoverVisible) {
+    if (!this.element.disabled && !this.showing) {
       this.updateCurrentExpandedDropdown();
-      this.element.isPopoverVisible = true;
       this.element.triggerChevron?.setAttribute('data-expanded', true);
-      
-      this.dispatchEventDropdownToggle();
-      this.position();
-      
-      // Clean up any existing handlers before setting up new ones
-      this.cleanupHideHandlers();
-      this.setupHideHandlers();
+
+      // prevent double showing: isPopovervisible gets first and showBib gets called later
+      if (!this.showing) {
+        if (!this.element.modal) {
+          this.setupHideHandlers();
+        }
+        this.showing = true;
+        this.element.isPopoverVisible = true;
+        this.position();
+        this.dispatchEventDropdownToggle();
+      }
 
       // Setup auto update to handle resize and scroll
-      this.element.cleanup = autoUpdate(this.element.trigger, this.element.bib, () => {
+      this.element.cleanup = autoUpdate(this.element.trigger || this.element.parentNode, this.element.bib, () => {
         this.position();
       });
     }
   }
 
   hideBib() {
-    if (this.element.isPopoverVisible && !this.element.disabled && !this.element.noToggle) {
-      this.element.isPopoverVisible = false;
+    if (!this.element.disabled && !this.element.noToggle) {
       this.lockScroll(false);
       this.element.triggerChevron?.removeAttribute('data-expanded');
-      this.dispatchEventDropdownToggle();
+
+      if (this.element.isPopoverVisible) {
+        this.element.isPopoverVisible = false;
+      }
+      if (this.showing) {
+        this.cleanupHideHandlers();
+        this.showing = false;
+        this.dispatchEventDropdownToggle();
+      }
     }
+    document.expandedAuroFloater = null;
   }
 
   /**
@@ -2438,7 +2589,7 @@ class AuroFloatingUI {
   dispatchEventDropdownToggle() {
     const event = new CustomEvent(this.eventPrefix ? `${this.eventPrefix}-toggled` : 'toggled', {
       detail: {
-        expanded: this.element.isPopoverVisible,
+        expanded: this.showing,
       },
       composed: true
     });
@@ -2486,15 +2637,18 @@ class AuroFloatingUI {
           break;
         case 'focus':
           if (this.element.focusShow) {
+
             /*
-              This needs to better handle clicking that gives focus - 
-              currently it shows and then immediately hides the bib 
+              This needs to better handle clicking that gives focus -
+              currently it shows and then immediately hides the bib
             */
             this.showBib();
           }
           break;
         case 'blur':
-          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) {
@@ -2502,7 +2656,7 @@ class AuroFloatingUI {
           }
           this.handleClick();
           break;
-          // Do nothing
+        // Do nothing
       }
     }
   }
@@ -2546,39 +2700,79 @@ class AuroFloatingUI {
     });
   }
 
+  /**
+   *
+   * @param {*} eventPrefix
+   */
+  regenerateBibId() {
+    this.id = this.element.getAttribute('id');
+    if (!this.id) {
+      this.id = window.crypto.randomUUID();
+      this.element.setAttribute('id', this.id);
+    }
+    
+    this.element.bib.setAttribute("id", `${this.id}-floater-bib`);
+  }
+
   configure(elem, eventPrefix) {
+    AuroFloatingUI.setupMousePressChecker();
+
     this.eventPrefix = eventPrefix;
-    this.element = elem;
-    this.element.trigger = this.element.shadowRoot.querySelector('#trigger');
-    this.element.bib = this.element.shadowRoot.querySelector('#bib');
+    if (this.element !== elem) {
+      this.element = elem;
+    }
+
+    if (this.behavior !== this.element.behavior) {
+      this.behavior = this.element.behavior;
+    }
+
+    if (this.element.trigger) {
+      this.disconnect();
+    }
+    this.element.trigger = this.element.triggerElement || this.element.shadowRoot.querySelector('#trigger') || this.element.trigger;
+    this.element.bib = this.element.shadowRoot.querySelector('#bib') || this.element.bib;
     this.element.bibSizer = this.element.shadowRoot.querySelector('#bibSizer');
     this.element.triggerChevron = this.element.shadowRoot.querySelector('#showStateIcon');
 
+
+    if (this.element.floaterConfig) {
+      this.element.hoverToggle = this.element.floaterConfig.hoverToggle;
+    }
+
     document.body.append(this.element.bib);
 
+    this.regenerateBibId();
     this.handleTriggerTabIndex();
 
     this.handleEvent = this.handleEvent.bind(this);
-    this.element.trigger.addEventListener('keydown', this.handleEvent);
-    this.element.trigger.addEventListener('click', this.handleEvent);
-    this.element.trigger.addEventListener('mouseenter', this.handleEvent);
-    this.element.trigger.addEventListener('mouseleave', this.handleEvent);
-    this.element.trigger.addEventListener('focus', this.handleEvent);
-    this.element.trigger.addEventListener('blur', this.handleEvent);
+    if (this.element.trigger) {
+      this.element.trigger.addEventListener('keydown', this.handleEvent);
+      this.element.trigger.addEventListener('click', this.handleEvent);
+      this.element.trigger.addEventListener('mouseenter', this.handleEvent);
+      this.element.trigger.addEventListener('mouseleave', this.handleEvent);
+      this.element.trigger.addEventListener('focus', this.handleEvent);
+      this.element.trigger.addEventListener('blur', this.handleEvent);
+    }
   }
 
   disconnect() {
     this.cleanupHideHandlers();
-    this.element.cleanup?.();
-    
-    // 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) {
+      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);
+      }
     }
   }
 }
@@ -3541,6 +3735,11 @@ class AuroDropdown extends r {
      * @private
      */
     this.helpTextTag = versioning.generateTag('auro-formkit-dropdown-helptext', helpTextVersion, AuroHelpText);
+
+    /**
+     * @private
+     */
+    this.bindFocusEventToTrigger = this.bindFocusEventToTrigger.bind(this);
   }
 
   /**
@@ -3809,6 +4008,7 @@ class AuroDropdown extends r {
   disconnectedCallback() {
     super.disconnectedCallback();
     this.floater.disconnect();
+    this.clearTriggerFocusEventBinding();
   }
 
   updated(changedProperties) {
@@ -3923,6 +4123,62 @@ class AuroDropdown extends r {
     return result;
   }
 
+  /**
+   * @private
+   * Creates and dispatches a duplicate focus event on the trigger element.
+   * @param {Event} event - The original focus event.
+   */
+  bindFocusEventToTrigger(event) {
+    const dupEvent = new FocusEvent(event.type, {
+      bubbles: false,
+      cancelable: false,
+      composed: true,
+    });
+    this.trigger.dispatchEvent(dupEvent);
+  }
+
+  /**
+   * @private
+   * Sets up event listeners to deliver focus and blur events from nested Auro components within the trigger slot to trigger.
+   * This ensures that focus/blur events originating from within these components are propagated to the trigger element itself.
+   */
+  setupTriggerFocusEventBinding() {
+    if (!this.triggerContentSlot || this.triggerContentSlot.length === 0) {
+      return;
+    }
+
+    this.triggerContentSlot.forEach((node) => {
+      if (node.querySelectorAll) {
+        const auroElements = node.querySelectorAll('auro-input, [auro-input], auro-button, [auro-button], button, input');
+        auroElements.forEach((auroEl) => {
+          auroEl.addEventListener('focus', this.bindFocusEventToTrigger);
+          auroEl.addEventListener('blur', this.bindFocusEventToTrigger);
+        });
+      }
+    });
+  }
+
+  /**
+   * Clears focus and blur event listeners from nested Auro components within the trigger slot.
+   * @private
+   * @returns {void}
+   */
+  clearTriggerFocusEventBinding() {
+    if (!this.triggerContentSlot || this.triggerContentSlot.length === 0) {
+      return;
+    }
+
+    this.triggerContentSlot.forEach((node) => {
+      if (node.querySelectorAll) {
+        const auroElements = node.querySelectorAll('auro-input, [auro-input], auro-button, [auro-button], button, input');
+        auroElements.forEach((auroEl) => {
+          auroEl.removeEventListener('focus', this.bindFocusEventToTrigger);
+          auroEl.removeEventListener('blur', this.bindFocusEventToTrigger);
+        });
+      }
+    });
+  }
+
   /**
    * Handles changes to the trigger content slot and updates related properties.
    *
@@ -3970,6 +4226,7 @@ class AuroDropdown extends r {
     }
 
     if (this.triggerContentSlot) {
+      this.setupTriggerFocusEventBinding();
       this.hasTriggerContent = this.triggerContentSlot.some((slot) => {
         if (slot.textContent.trim()) {
           return true;
@@ -4075,6 +4332,7 @@ class AuroDropdown extends r {
         <${this.dropdownBibTag}
           id="bib"
           role="tooltip"
+          ?data-show="${this.isPopoverVisible}"
           ?isfullscreen="${this.isBibFullscreen}"
           ?common="${this.common}"
           ?rounded="${this.common || this.rounded}"