@aurodesignsystem-dev/auro-formkit 0.0.0-pr783.1 → 0.0.0-pr784.0

package/components/radio/dist/registered.js

@@ -1010,13 +1010,24 @@ class AuroFormValidation {
     this.getInputElements(elem);
     this.getAuroInputs(elem);
 
-    // Validate only if noValidate is not true and the input does not have focus
+    // Check if validation should run
     let validationShouldRun =
+
+      // If the validation was forced
       force ||
-      (!elem.contains(document.activeElement) &&
-        (elem.touched ||
-          (!elem.touched && typeof elem.value !== "undefined"))) ||
-      elem.validateOnInput;
+
+      // If the validation should run on input
+      elem.validateOnInput ||
+
+      // State-based checks
+      (
+        // Element is not currently focused
+        !elem.contains(document.activeElement) && // native input is not focused directly
+        !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
+
+        // And element has been touched or is untouched but has a value
+        ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
+      );
 
     if (elem.hasAttribute('error')) {
       elem.validity = 'customError';

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

@@ -940,13 +940,24 @@ class AuroFormValidation {
     this.getInputElements(elem);
     this.getAuroInputs(elem);
 
-    // Validate only if noValidate is not true and the input does not have focus
+    // Check if validation should run
     let validationShouldRun =
+
+      // If the validation was forced
       force ||
-      (!elem.contains(document.activeElement) &&
-        (elem.touched ||
-          (!elem.touched && typeof elem.value !== "undefined"))) ||
-      elem.validateOnInput;
+
+      // If the validation should run on input
+      elem.validateOnInput ||
+
+      // State-based checks
+      (
+        // Element is not currently focused
+        !elem.contains(document.activeElement) && // native input is not focused directly
+        !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
+
+        // And element has been touched or is untouched but has a value
+        ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
+      );
 
     if (elem.hasAttribute('error')) {
       elem.validity = 'customError';
@@ -2814,7 +2825,7 @@ class AuroFloatingUI {
    */
   mirrorSize() {
     // mirror the boxsize from bibSizer
-    if (this.element.bibSizer && this.element.matchWidth) {
+    if (this.element.bibSizer) {
       const sizerStyle = window.getComputedStyle(this.element.bibSizer);
       const bibContent = this.element.bib.shadowRoot.querySelector(".container");
       if (sizerStyle.width !== '0px') {
@@ -3026,13 +3037,13 @@ class AuroFloatingUI {
     if (this.element.contains(activeElement) || this.element.bib?.contains(activeElement)) {
       return;
     }
-
+    
     // if fullscreen bib is in fullscreen mode, do not close
     if (this.element.bib.hasAttribute('isfullscreen')) {
       return;
     }
 
-    this.hideBib("keydown");
+    this.hideBib();
   }
 
   setupHideHandlers() {
@@ -3057,7 +3068,7 @@ class AuroFloatingUI {
           document.expandedAuroFormkitDropdown = null;
           document.expandedAuroFloater = this;
         } else {
-          this.hideBib("click");
+          this.hideBib();
         }
       }
     };
@@ -3070,7 +3081,7 @@ class AuroFloatingUI {
           // if something else is open, let it handle itself
           return;
         }
-        this.hideBib("keydown");
+        this.hideBib();
       }
     };
 
@@ -3153,11 +3164,7 @@ class AuroFloatingUI {
     }
   }
 
-  /**
-   * Hides the floating UI element.
-   * @param {String} eventType - The event type that triggered the hiding action.
-   */
-  hideBib(eventType = "unknown") {
+  hideBib() {
     if (!this.element.disabled && !this.element.noToggle) {
       this.lockScroll(false);
       this.element.triggerChevron?.removeAttribute('data-expanded');
@@ -3168,7 +3175,7 @@ class AuroFloatingUI {
       if (this.showing) {
         this.cleanupHideHandlers();
         this.showing = false;
-        this.dispatchEventDropdownToggle(eventType);
+        this.dispatchEventDropdownToggle();
       }
     }
     document.expandedAuroFloater = null;
@@ -3177,13 +3184,11 @@ class AuroFloatingUI {
   /**
    * @private
    * @returns {void} Dispatches event with an object showing the state of the dropdown.
-   * @param {String} eventType - The event type that triggered the toggle action.
    */
-  dispatchEventDropdownToggle(eventType) {
+  dispatchEventDropdownToggle() {
     const event = new CustomEvent(this.eventPrefix ? `${this.eventPrefix}-toggled` : 'toggled', {
       detail: {
         expanded: this.showing,
-        eventType: eventType || "unknown",
       },
       composed: true
     });
@@ -3193,7 +3198,7 @@ class AuroFloatingUI {
 
   handleClick() {
     if (this.element.isPopoverVisible) {
-      this.hideBib("click");
+      this.hideBib();
     } else {
       this.showBib();
     }
@@ -3220,7 +3225,7 @@ class AuroFloatingUI {
 
             event.preventDefault();
             this.handleClick();
-          }
+          } 
           break;
         case 'mouseenter':
           if (this.element.hoverToggle) {
@@ -3229,7 +3234,7 @@ class AuroFloatingUI {
           break;
         case 'mouseleave':
           if (this.element.hoverToggle) {
-            this.hideBib("mouseleave");
+            this.hideBib();
           }
           break;
         case 'focus':
@@ -4617,9 +4622,6 @@ class AuroDropdown extends AuroElement$3 {
 
     this.parentBorder = false;
 
-    /** @private */
-    this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
-
     this.privateDefaults();
   }
 
@@ -5053,19 +5055,12 @@ class AuroDropdown extends AuroElement$3 {
     if (changedProperties.size === 0 || changedProperties.has('isPopoverVisible')) {
       this.handleTriggerContentSlotChange();
     }
-  }
 
-  /**
-   * Handles the custom event `auroDropdown-toggled` to update the visibility of the dropdown bib.
-   * @private
-   * @param {CustomEvent} event - The custom event that contains the dropdown toggle information.
-   */
-  handleDropdownToggle(event) {
-    this.updateFocusTrap();
-    this.isPopoverVisible = event.detail.expanded;
-    const eventType = event.detail.eventType || "unknown";
-    if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
-      this.trigger.focus();
+    if (changedProperties.has('isPopoverVisible')) {
+      this.updateFocusTrap();
+      if (!this.isPopoverVisible && this.hasFocus) {
+        this.trigger.focus();
+      }
     }
   }
 
@@ -5073,7 +5068,6 @@ class AuroDropdown extends AuroElement$3 {
 
     // Configure the floater to, this will generate the ID for the bib
     this.floater.configure(this, 'auroDropdown');
-    this.addEventListener('auroDropdown-toggled', this.handleDropdownToggle);
 
     /**
      * @description Let subscribers know that the dropdown ID ha been generated and added.

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

@@ -848,13 +848,24 @@ class AuroFormValidation {
     this.getInputElements(elem);
     this.getAuroInputs(elem);
 
-    // Validate only if noValidate is not true and the input does not have focus
+    // Check if validation should run
     let validationShouldRun =
+
+      // If the validation was forced
       force ||
-      (!elem.contains(document.activeElement) &&
-        (elem.touched ||
-          (!elem.touched && typeof elem.value !== "undefined"))) ||
-      elem.validateOnInput;
+
+      // If the validation should run on input
+      elem.validateOnInput ||
+
+      // State-based checks
+      (
+        // Element is not currently focused
+        !elem.contains(document.activeElement) && // native input is not focused directly
+        !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
+
+        // And element has been touched or is untouched but has a value
+        ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
+      );
 
     if (elem.hasAttribute('error')) {
       elem.validity = 'customError';
@@ -2722,7 +2733,7 @@ class AuroFloatingUI {
    */
   mirrorSize() {
     // mirror the boxsize from bibSizer
-    if (this.element.bibSizer && this.element.matchWidth) {
+    if (this.element.bibSizer) {
       const sizerStyle = window.getComputedStyle(this.element.bibSizer);
       const bibContent = this.element.bib.shadowRoot.querySelector(".container");
       if (sizerStyle.width !== '0px') {
@@ -2934,13 +2945,13 @@ class AuroFloatingUI {
     if (this.element.contains(activeElement) || this.element.bib?.contains(activeElement)) {
       return;
     }
-
+    
     // if fullscreen bib is in fullscreen mode, do not close
     if (this.element.bib.hasAttribute('isfullscreen')) {
       return;
     }
 
-    this.hideBib("keydown");
+    this.hideBib();
   }
 
   setupHideHandlers() {
@@ -2965,7 +2976,7 @@ class AuroFloatingUI {
           document.expandedAuroFormkitDropdown = null;
           document.expandedAuroFloater = this;
         } else {
-          this.hideBib("click");
+          this.hideBib();
         }
       }
     };
@@ -2978,7 +2989,7 @@ class AuroFloatingUI {
           // if something else is open, let it handle itself
           return;
         }
-        this.hideBib("keydown");
+        this.hideBib();
       }
     };
 
@@ -3061,11 +3072,7 @@ class AuroFloatingUI {
     }
   }
 
-  /**
-   * Hides the floating UI element.
-   * @param {String} eventType - The event type that triggered the hiding action.
-   */
-  hideBib(eventType = "unknown") {
+  hideBib() {
     if (!this.element.disabled && !this.element.noToggle) {
       this.lockScroll(false);
       this.element.triggerChevron?.removeAttribute('data-expanded');
@@ -3076,7 +3083,7 @@ class AuroFloatingUI {
       if (this.showing) {
         this.cleanupHideHandlers();
         this.showing = false;
-        this.dispatchEventDropdownToggle(eventType);
+        this.dispatchEventDropdownToggle();
       }
     }
     document.expandedAuroFloater = null;
@@ -3085,13 +3092,11 @@ class AuroFloatingUI {
   /**
    * @private
    * @returns {void} Dispatches event with an object showing the state of the dropdown.
-   * @param {String} eventType - The event type that triggered the toggle action.
    */
-  dispatchEventDropdownToggle(eventType) {
+  dispatchEventDropdownToggle() {
     const event = new CustomEvent(this.eventPrefix ? `${this.eventPrefix}-toggled` : 'toggled', {
       detail: {
         expanded: this.showing,
-        eventType: eventType || "unknown",
       },
       composed: true
     });
@@ -3101,7 +3106,7 @@ class AuroFloatingUI {
 
   handleClick() {
     if (this.element.isPopoverVisible) {
-      this.hideBib("click");
+      this.hideBib();
     } else {
       this.showBib();
     }
@@ -3128,7 +3133,7 @@ class AuroFloatingUI {
 
             event.preventDefault();
             this.handleClick();
-          }
+          } 
           break;
         case 'mouseenter':
           if (this.element.hoverToggle) {
@@ -3137,7 +3142,7 @@ class AuroFloatingUI {
           break;
         case 'mouseleave':
           if (this.element.hoverToggle) {
-            this.hideBib("mouseleave");
+            this.hideBib();
           }
           break;
         case 'focus':
@@ -4525,9 +4530,6 @@ class AuroDropdown extends AuroElement$3 {
 
     this.parentBorder = false;
 
-    /** @private */
-    this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
-
     this.privateDefaults();
   }
 
@@ -4961,19 +4963,12 @@ class AuroDropdown extends AuroElement$3 {
     if (changedProperties.size === 0 || changedProperties.has('isPopoverVisible')) {
       this.handleTriggerContentSlotChange();
     }
-  }
 
-  /**
-   * Handles the custom event `auroDropdown-toggled` to update the visibility of the dropdown bib.
-   * @private
-   * @param {CustomEvent} event - The custom event that contains the dropdown toggle information.
-   */
-  handleDropdownToggle(event) {
-    this.updateFocusTrap();
-    this.isPopoverVisible = event.detail.expanded;
-    const eventType = event.detail.eventType || "unknown";
-    if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
-      this.trigger.focus();
+    if (changedProperties.has('isPopoverVisible')) {
+      this.updateFocusTrap();
+      if (!this.isPopoverVisible && this.hasFocus) {
+        this.trigger.focus();
+      }
     }
   }
 
@@ -4981,7 +4976,6 @@ class AuroDropdown extends AuroElement$3 {
 
     // Configure the floater to, this will generate the ID for the bib
     this.floater.configure(this, 'auroDropdown');
-    this.addEventListener('auroDropdown-toggled', this.handleDropdownToggle);
 
     /**
      * @description Let subscribers know that the dropdown ID ha been generated and added.

package/components/select/dist/index.js

@@ -808,13 +808,24 @@ class AuroFormValidation {
     this.getInputElements(elem);
     this.getAuroInputs(elem);
 
-    // Validate only if noValidate is not true and the input does not have focus
+    // Check if validation should run
     let validationShouldRun =
+
+      // If the validation was forced
       force ||
-      (!elem.contains(document.activeElement) &&
-        (elem.touched ||
-          (!elem.touched && typeof elem.value !== "undefined"))) ||
-      elem.validateOnInput;
+
+      // If the validation should run on input
+      elem.validateOnInput ||
+
+      // State-based checks
+      (
+        // Element is not currently focused
+        !elem.contains(document.activeElement) && // native input is not focused directly
+        !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
+
+        // And element has been touched or is untouched but has a value
+        ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
+      );
 
     if (elem.hasAttribute('error')) {
       elem.validity = 'customError';
@@ -2676,7 +2687,7 @@ class AuroFloatingUI {
    */
   mirrorSize() {
     // mirror the boxsize from bibSizer
-    if (this.element.bibSizer && this.element.matchWidth) {
+    if (this.element.bibSizer) {
       const sizerStyle = window.getComputedStyle(this.element.bibSizer);
       const bibContent = this.element.bib.shadowRoot.querySelector(".container");
       if (sizerStyle.width !== '0px') {
@@ -2888,13 +2899,13 @@ class AuroFloatingUI {
     if (this.element.contains(activeElement) || this.element.bib?.contains(activeElement)) {
       return;
     }
-
+    
     // if fullscreen bib is in fullscreen mode, do not close
     if (this.element.bib.hasAttribute('isfullscreen')) {
       return;
     }
 
-    this.hideBib("keydown");
+    this.hideBib();
   }
 
   setupHideHandlers() {
@@ -2919,7 +2930,7 @@ class AuroFloatingUI {
           document.expandedAuroFormkitDropdown = null;
           document.expandedAuroFloater = this;
         } else {
-          this.hideBib("click");
+          this.hideBib();
         }
       }
     };
@@ -2932,7 +2943,7 @@ class AuroFloatingUI {
           // if something else is open, let it handle itself
           return;
         }
-        this.hideBib("keydown");
+        this.hideBib();
       }
     };
 
@@ -3015,11 +3026,7 @@ class AuroFloatingUI {
     }
   }
 
-  /**
-   * Hides the floating UI element.
-   * @param {String} eventType - The event type that triggered the hiding action.
-   */
-  hideBib(eventType = "unknown") {
+  hideBib() {
     if (!this.element.disabled && !this.element.noToggle) {
       this.lockScroll(false);
       this.element.triggerChevron?.removeAttribute('data-expanded');
@@ -3030,7 +3037,7 @@ class AuroFloatingUI {
       if (this.showing) {
         this.cleanupHideHandlers();
         this.showing = false;
-        this.dispatchEventDropdownToggle(eventType);
+        this.dispatchEventDropdownToggle();
       }
     }
     document.expandedAuroFloater = null;
@@ -3039,13 +3046,11 @@ class AuroFloatingUI {
   /**
    * @private
    * @returns {void} Dispatches event with an object showing the state of the dropdown.
-   * @param {String} eventType - The event type that triggered the toggle action.
    */
-  dispatchEventDropdownToggle(eventType) {
+  dispatchEventDropdownToggle() {
     const event = new CustomEvent(this.eventPrefix ? `${this.eventPrefix}-toggled` : 'toggled', {
       detail: {
         expanded: this.showing,
-        eventType: eventType || "unknown",
       },
       composed: true
     });
@@ -3055,7 +3060,7 @@ class AuroFloatingUI {
 
   handleClick() {
     if (this.element.isPopoverVisible) {
-      this.hideBib("click");
+      this.hideBib();
     } else {
       this.showBib();
     }
@@ -3082,7 +3087,7 @@ class AuroFloatingUI {
 
             event.preventDefault();
             this.handleClick();
-          }
+          } 
           break;
         case 'mouseenter':
           if (this.element.hoverToggle) {
@@ -3091,7 +3096,7 @@ class AuroFloatingUI {
           break;
         case 'mouseleave':
           if (this.element.hoverToggle) {
-            this.hideBib("mouseleave");
+            this.hideBib();
           }
           break;
         case 'focus':
@@ -4479,9 +4484,6 @@ class AuroDropdown extends AuroElement$2 {
 
     this.parentBorder = false;
 
-    /** @private */
-    this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
-
     this.privateDefaults();
   }
 
@@ -4915,19 +4917,12 @@ class AuroDropdown extends AuroElement$2 {
     if (changedProperties.size === 0 || changedProperties.has('isPopoverVisible')) {
       this.handleTriggerContentSlotChange();
     }
-  }
 
-  /**
-   * Handles the custom event `auroDropdown-toggled` to update the visibility of the dropdown bib.
-   * @private
-   * @param {CustomEvent} event - The custom event that contains the dropdown toggle information.
-   */
-  handleDropdownToggle(event) {
-    this.updateFocusTrap();
-    this.isPopoverVisible = event.detail.expanded;
-    const eventType = event.detail.eventType || "unknown";
-    if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
-      this.trigger.focus();
+    if (changedProperties.has('isPopoverVisible')) {
+      this.updateFocusTrap();
+      if (!this.isPopoverVisible && this.hasFocus) {
+        this.trigger.focus();
+      }
     }
   }
 
@@ -4935,7 +4930,6 @@ class AuroDropdown extends AuroElement$2 {
 
     // Configure the floater to, this will generate the ID for the bib
     this.floater.configure(this, 'auroDropdown');
-    this.addEventListener('auroDropdown-toggled', this.handleDropdownToggle);
 
     /**
      * @description Let subscribers know that the dropdown ID ha been generated and added.