@aurodesignsystem-dev/auro-formkit 0.0.0-pr785.1 → 0.0.0-pr785.3

package/components/counter/dist/registered.js

@@ -4919,7 +4919,7 @@ class AuroFloatingUI {
       return;
     }
 
-    this.hideBib();
+    this.hideBib("keydown");
   }
 
   setupHideHandlers() {
@@ -4944,7 +4944,7 @@ class AuroFloatingUI {
           document.expandedAuroFormkitDropdown = null;
           document.expandedAuroFloater = this;
         } else {
-          this.hideBib();
+          this.hideBib("click");
         }
       }
     };
@@ -4957,7 +4957,7 @@ class AuroFloatingUI {
           // if something else is open, let it handle itself
           return;
         }
-        this.hideBib();
+        this.hideBib("keydown");
       }
     };
 
@@ -5040,7 +5040,11 @@ class AuroFloatingUI {
     }
   }
 
-  hideBib() {
+  /**
+   * Hides the floating UI element.
+   * @param {String} eventType - The event type that triggered the hiding action.
+   */
+  hideBib(eventType = "unknown") {
     if (!this.element.disabled && !this.element.noToggle) {
       this.lockScroll(false);
       this.element.triggerChevron?.removeAttribute('data-expanded');
@@ -5051,7 +5055,7 @@ class AuroFloatingUI {
       if (this.showing) {
         this.cleanupHideHandlers();
         this.showing = false;
-        this.dispatchEventDropdownToggle();
+        this.dispatchEventDropdownToggle(eventType);
       }
     }
     document.expandedAuroFloater = null;
@@ -5060,11 +5064,13 @@ 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() {
+  dispatchEventDropdownToggle(eventType) {
     const event = new CustomEvent(this.eventPrefix ? `${this.eventPrefix}-toggled` : 'toggled', {
       detail: {
         expanded: this.showing,
+        eventType: eventType || "unknown",
       },
       composed: true
     });
@@ -5074,7 +5080,7 @@ class AuroFloatingUI {
 
   handleClick() {
     if (this.element.isPopoverVisible) {
-      this.hideBib();
+      this.hideBib("click");
     } else {
       this.showBib();
     }
@@ -5110,7 +5116,7 @@ class AuroFloatingUI {
           break;
         case 'mouseleave':
           if (this.element.hoverToggle) {
-            this.hideBib();
+            this.hideBib("mouseleave");
           }
           break;
         case 'focus':
@@ -6936,6 +6942,11 @@ class AuroDropdown extends AuroElement$3 {
     }
   }
 
+  /**
+   * 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;

package/components/datepicker/demo/api.md

@@ -51,7 +51,6 @@
 | Method                        | Type                                   | Description                                      |
 |-------------------------------|----------------------------------------|--------------------------------------------------|
 | [focus](#focus)                       | `(focusInput: string): void`           | Focuses the datepicker trigger input.<br /><br />**focusInput**: Pass in `endDate` to focus on the return input. No parameter is needed to focus on the depart input. |
-| [formatShortDate](#formatShortDate)             | `(date: any): string`                  | Simple formatter that ONLY WORKS FOR US DATES.<br />Returns formatted date like Apr 21 or Dec 25.<br /><br />**date**: undefined |
 | [renderHtmlActionClear](#renderHtmlActionClear)       | `(): TemplateResult`                   |                                                  |
 | [renderHtmlIconCalendar](#renderHtmlIconCalendar)      | `(): TemplateResult`                   |                                                  |
 | [renderHtmlIconError](#renderHtmlIconError)         | `(): TemplateResult`                   |                                                  |

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

@@ -16323,7 +16323,7 @@ class AuroFloatingUI {
       return;
     }
 
-    this.hideBib();
+    this.hideBib("keydown");
   }
 
   setupHideHandlers() {
@@ -16348,7 +16348,7 @@ class AuroFloatingUI {
           document.expandedAuroFormkitDropdown = null;
           document.expandedAuroFloater = this;
         } else {
-          this.hideBib();
+          this.hideBib("click");
         }
       }
     };
@@ -16361,7 +16361,7 @@ class AuroFloatingUI {
           // if something else is open, let it handle itself
           return;
         }
-        this.hideBib();
+        this.hideBib("keydown");
       }
     };
 
@@ -16444,7 +16444,11 @@ class AuroFloatingUI {
     }
   }
 
-  hideBib() {
+  /**
+   * Hides the floating UI element.
+   * @param {String} eventType - The event type that triggered the hiding action.
+   */
+  hideBib(eventType = "unknown") {
     if (!this.element.disabled && !this.element.noToggle) {
       this.lockScroll(false);
       this.element.triggerChevron?.removeAttribute('data-expanded');
@@ -16455,7 +16459,7 @@ class AuroFloatingUI {
       if (this.showing) {
         this.cleanupHideHandlers();
         this.showing = false;
-        this.dispatchEventDropdownToggle();
+        this.dispatchEventDropdownToggle(eventType);
       }
     }
     document.expandedAuroFloater = null;
@@ -16464,11 +16468,13 @@ 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() {
+  dispatchEventDropdownToggle(eventType) {
     const event = new CustomEvent(this.eventPrefix ? `${this.eventPrefix}-toggled` : 'toggled', {
       detail: {
         expanded: this.showing,
+        eventType: eventType || "unknown",
       },
       composed: true
     });
@@ -16478,7 +16484,7 @@ class AuroFloatingUI {
 
   handleClick() {
     if (this.element.isPopoverVisible) {
-      this.hideBib();
+      this.hideBib("click");
     } else {
       this.showBib();
     }
@@ -16514,7 +16520,7 @@ class AuroFloatingUI {
           break;
         case 'mouseleave':
           if (this.element.hoverToggle) {
-            this.hideBib();
+            this.hideBib("mouseleave");
           }
           break;
         case 'focus':
@@ -18340,6 +18346,11 @@ class AuroDropdown extends AuroElement$4 {
     }
   }
 
+  /**
+   * 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;
@@ -29069,7 +29080,8 @@ class AuroDatePicker extends AuroElement$1 {
   /**
    * Simple formatter that ONLY WORKS FOR US DATES.
    * Returns formatted date like Apr 21 or Dec 25.
-   * @param date
+   * @private
+   * @param {string} date - Date format should be in a format Date constructor accepts, like '2023-04-21' or '2023/04/21'.
    * @return {string}
    */
   formatShortDate(date) {

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

@@ -16064,7 +16064,7 @@ class AuroFloatingUI {
       return;
     }
 
-    this.hideBib();
+    this.hideBib("keydown");
   }
 
   setupHideHandlers() {
@@ -16089,7 +16089,7 @@ class AuroFloatingUI {
           document.expandedAuroFormkitDropdown = null;
           document.expandedAuroFloater = this;
         } else {
-          this.hideBib();
+          this.hideBib("click");
         }
       }
     };
@@ -16102,7 +16102,7 @@ class AuroFloatingUI {
           // if something else is open, let it handle itself
           return;
         }
-        this.hideBib();
+        this.hideBib("keydown");
       }
     };
 
@@ -16185,7 +16185,11 @@ class AuroFloatingUI {
     }
   }
 
-  hideBib() {
+  /**
+   * Hides the floating UI element.
+   * @param {String} eventType - The event type that triggered the hiding action.
+   */
+  hideBib(eventType = "unknown") {
     if (!this.element.disabled && !this.element.noToggle) {
       this.lockScroll(false);
       this.element.triggerChevron?.removeAttribute('data-expanded');
@@ -16196,7 +16200,7 @@ class AuroFloatingUI {
       if (this.showing) {
         this.cleanupHideHandlers();
         this.showing = false;
-        this.dispatchEventDropdownToggle();
+        this.dispatchEventDropdownToggle(eventType);
       }
     }
     document.expandedAuroFloater = null;
@@ -16205,11 +16209,13 @@ 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() {
+  dispatchEventDropdownToggle(eventType) {
     const event = new CustomEvent(this.eventPrefix ? `${this.eventPrefix}-toggled` : 'toggled', {
       detail: {
         expanded: this.showing,
+        eventType: eventType || "unknown",
       },
       composed: true
     });
@@ -16219,7 +16225,7 @@ class AuroFloatingUI {
 
   handleClick() {
     if (this.element.isPopoverVisible) {
-      this.hideBib();
+      this.hideBib("click");
     } else {
       this.showBib();
     }
@@ -16255,7 +16261,7 @@ class AuroFloatingUI {
           break;
         case 'mouseleave':
           if (this.element.hoverToggle) {
-            this.hideBib();
+            this.hideBib("mouseleave");
           }
           break;
         case 'focus':
@@ -18081,6 +18087,11 @@ class AuroDropdown extends AuroElement$4 {
     }
   }
 
+  /**
+   * 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;
@@ -28810,7 +28821,8 @@ class AuroDatePicker extends AuroElement$1 {
   /**
    * Simple formatter that ONLY WORKS FOR US DATES.
    * Returns formatted date like Apr 21 or Dec 25.
-   * @param date
+   * @private
+   * @param {string} date - Date format should be in a format Date constructor accepts, like '2023-04-21' or '2023/04/21'.
    * @return {string}
    */
   formatShortDate(date) {

package/components/datepicker/dist/auro-datepicker.d.ts

@@ -531,10 +531,11 @@ export class AuroDatePicker extends AuroElement {
     /**
      * Simple formatter that ONLY WORKS FOR US DATES.
      * Returns formatted date like Apr 21 or Dec 25.
-     * @param date
+     * @private
+     * @param {string} date - Date format should be in a format Date constructor accepts, like '2023-04-21' or '2023/04/21'.
      * @return {string}
      */
-    formatShortDate(date: any): string;
+    private formatShortDate;
     /**
      * Format and render the provided date value.
      * @private

package/components/datepicker/dist/index.js

@@ -16013,7 +16013,7 @@ class AuroFloatingUI {
       return;
     }
 
-    this.hideBib();
+    this.hideBib("keydown");
   }
 
   setupHideHandlers() {
@@ -16038,7 +16038,7 @@ class AuroFloatingUI {
           document.expandedAuroFormkitDropdown = null;
           document.expandedAuroFloater = this;
         } else {
-          this.hideBib();
+          this.hideBib("click");
         }
       }
     };
@@ -16051,7 +16051,7 @@ class AuroFloatingUI {
           // if something else is open, let it handle itself
           return;
         }
-        this.hideBib();
+        this.hideBib("keydown");
       }
     };
 
@@ -16134,7 +16134,11 @@ class AuroFloatingUI {
     }
   }
 
-  hideBib() {
+  /**
+   * Hides the floating UI element.
+   * @param {String} eventType - The event type that triggered the hiding action.
+   */
+  hideBib(eventType = "unknown") {
     if (!this.element.disabled && !this.element.noToggle) {
       this.lockScroll(false);
       this.element.triggerChevron?.removeAttribute('data-expanded');
@@ -16145,7 +16149,7 @@ class AuroFloatingUI {
       if (this.showing) {
         this.cleanupHideHandlers();
         this.showing = false;
-        this.dispatchEventDropdownToggle();
+        this.dispatchEventDropdownToggle(eventType);
       }
     }
     document.expandedAuroFloater = null;
@@ -16154,11 +16158,13 @@ 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() {
+  dispatchEventDropdownToggle(eventType) {
     const event = new CustomEvent(this.eventPrefix ? `${this.eventPrefix}-toggled` : 'toggled', {
       detail: {
         expanded: this.showing,
+        eventType: eventType || "unknown",
       },
       composed: true
     });
@@ -16168,7 +16174,7 @@ class AuroFloatingUI {
 
   handleClick() {
     if (this.element.isPopoverVisible) {
-      this.hideBib();
+      this.hideBib("click");
     } else {
       this.showBib();
     }
@@ -16204,7 +16210,7 @@ class AuroFloatingUI {
           break;
         case 'mouseleave':
           if (this.element.hoverToggle) {
-            this.hideBib();
+            this.hideBib("mouseleave");
           }
           break;
         case 'focus':
@@ -18030,6 +18036,11 @@ class AuroDropdown extends AuroElement$4 {
     }
   }
 
+  /**
+   * 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;
@@ -28746,7 +28757,8 @@ class AuroDatePicker extends AuroElement$1 {
   /**
    * Simple formatter that ONLY WORKS FOR US DATES.
    * Returns formatted date like Apr 21 or Dec 25.
-   * @param date
+   * @private
+   * @param {string} date - Date format should be in a format Date constructor accepts, like '2023-04-21' or '2023/04/21'.
    * @return {string}
    */
   formatShortDate(date) {

package/components/datepicker/dist/registered.js

@@ -16013,7 +16013,7 @@ class AuroFloatingUI {
       return;
     }
 
-    this.hideBib();
+    this.hideBib("keydown");
   }
 
   setupHideHandlers() {
@@ -16038,7 +16038,7 @@ class AuroFloatingUI {
           document.expandedAuroFormkitDropdown = null;
           document.expandedAuroFloater = this;
         } else {
-          this.hideBib();
+          this.hideBib("click");
         }
       }
     };
@@ -16051,7 +16051,7 @@ class AuroFloatingUI {
           // if something else is open, let it handle itself
           return;
         }
-        this.hideBib();
+        this.hideBib("keydown");
       }
     };
 
@@ -16134,7 +16134,11 @@ class AuroFloatingUI {
     }
   }
 
-  hideBib() {
+  /**
+   * Hides the floating UI element.
+   * @param {String} eventType - The event type that triggered the hiding action.
+   */
+  hideBib(eventType = "unknown") {
     if (!this.element.disabled && !this.element.noToggle) {
       this.lockScroll(false);
       this.element.triggerChevron?.removeAttribute('data-expanded');
@@ -16145,7 +16149,7 @@ class AuroFloatingUI {
       if (this.showing) {
         this.cleanupHideHandlers();
         this.showing = false;
-        this.dispatchEventDropdownToggle();
+        this.dispatchEventDropdownToggle(eventType);
       }
     }
     document.expandedAuroFloater = null;
@@ -16154,11 +16158,13 @@ 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() {
+  dispatchEventDropdownToggle(eventType) {
     const event = new CustomEvent(this.eventPrefix ? `${this.eventPrefix}-toggled` : 'toggled', {
       detail: {
         expanded: this.showing,
+        eventType: eventType || "unknown",
       },
       composed: true
     });
@@ -16168,7 +16174,7 @@ class AuroFloatingUI {
 
   handleClick() {
     if (this.element.isPopoverVisible) {
-      this.hideBib();
+      this.hideBib("click");
     } else {
       this.showBib();
     }
@@ -16204,7 +16210,7 @@ class AuroFloatingUI {
           break;
         case 'mouseleave':
           if (this.element.hoverToggle) {
-            this.hideBib();
+            this.hideBib("mouseleave");
           }
           break;
         case 'focus':
@@ -18030,6 +18036,11 @@ class AuroDropdown extends AuroElement$4 {
     }
   }
 
+  /**
+   * 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;
@@ -28746,7 +28757,8 @@ class AuroDatePicker extends AuroElement$1 {
   /**
    * Simple formatter that ONLY WORKS FOR US DATES.
    * Returns formatted date like Apr 21 or Dec 25.
-   * @param date
+   * @private
+   * @param {string} date - Date format should be in a format Date constructor accepts, like '2023-04-21' or '2023/04/21'.
    * @return {string}
    */
   formatShortDate(date) {

package/components/dropdown/demo/api.md

@@ -35,13 +35,12 @@
 
 ## Methods
 
-| Method                 | Type                 | Description                                      |
-|------------------------|----------------------|--------------------------------------------------|
-| [exposeCssParts](#exposeCssParts)       | `(): void`           | Exposes CSS parts for styling from parent components. |
-| [focus](#focus)                | `(): void`           | When bib is open, focus on the first element inside of bib.<br />If not, trigger element will get focus. |
-| [handleDropdownToggle](#handleDropdownToggle) | `(event: any): void` |                                                  |
-| [hide](#hide)                 | `(): void`           | Public method to hide the dropdown.              |
-| [show](#show)                 | `(): void`           | Public method to show the dropdown.              |
+| Method           | Type       | Description                                      |
+|------------------|------------|--------------------------------------------------|
+| [exposeCssParts](#exposeCssParts) | `(): void` | Exposes CSS parts for styling from parent components. |
+| [focus](#focus)          | `(): void` | When bib is open, focus on the first element inside of bib.<br />If not, trigger element will get focus. |
+| [hide](#hide)           | `(): void` | Public method to hide the dropdown.              |
+| [show](#show)           | `(): void` | Public method to show the dropdown.              |
 
 ## Events
 

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

@@ -1973,7 +1973,7 @@ class AuroFloatingUI {
       return;
     }
 
-    this.hideBib();
+    this.hideBib("keydown");
   }
 
   setupHideHandlers() {
@@ -1998,7 +1998,7 @@ class AuroFloatingUI {
           document.expandedAuroFormkitDropdown = null;
           document.expandedAuroFloater = this;
         } else {
-          this.hideBib();
+          this.hideBib("click");
         }
       }
     };
@@ -2011,7 +2011,7 @@ class AuroFloatingUI {
           // if something else is open, let it handle itself
           return;
         }
-        this.hideBib();
+        this.hideBib("keydown");
       }
     };
 
@@ -2094,7 +2094,11 @@ class AuroFloatingUI {
     }
   }
 
-  hideBib() {
+  /**
+   * Hides the floating UI element.
+   * @param {String} eventType - The event type that triggered the hiding action.
+   */
+  hideBib(eventType = "unknown") {
     if (!this.element.disabled && !this.element.noToggle) {
       this.lockScroll(false);
       this.element.triggerChevron?.removeAttribute('data-expanded');
@@ -2105,7 +2109,7 @@ class AuroFloatingUI {
       if (this.showing) {
         this.cleanupHideHandlers();
         this.showing = false;
-        this.dispatchEventDropdownToggle();
+        this.dispatchEventDropdownToggle(eventType);
       }
     }
     document.expandedAuroFloater = null;
@@ -2114,11 +2118,13 @@ 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() {
+  dispatchEventDropdownToggle(eventType) {
     const event = new CustomEvent(this.eventPrefix ? `${this.eventPrefix}-toggled` : 'toggled', {
       detail: {
         expanded: this.showing,
+        eventType: eventType || "unknown",
       },
       composed: true
     });
@@ -2128,7 +2134,7 @@ class AuroFloatingUI {
 
   handleClick() {
     if (this.element.isPopoverVisible) {
-      this.hideBib();
+      this.hideBib("click");
     } else {
       this.showBib();
     }
@@ -2164,7 +2170,7 @@ class AuroFloatingUI {
           break;
         case 'mouseleave':
           if (this.element.hoverToggle) {
-            this.hideBib();
+            this.hideBib("mouseleave");
           }
           break;
         case 'focus':
@@ -3996,6 +4002,11 @@ class AuroDropdown extends AuroElement {
     }
   }
 
+  /**
+   * 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;