@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.30 → 0.0.0-pr624.32

package/components/combobox/demo/api.md

@@ -40,7 +40,7 @@
 | Method     | Type                                   | Description                                      |
 |------------|----------------------------------------|--------------------------------------------------|
 | [focus](#focus)    | `(): void`                             | Focuses the combobox trigger input.              |
-| [isValid](#isValid)  | `(): boolean`                          |                                                  |
+| [isValid](#isValid)  | `(): boolean`                          | Checks if the element is valid.                  |
 | [reset](#reset)    | `(): void`                             | Resets component to initial state.               |
 | [validate](#validate) | `(force?: boolean \| undefined): void` | Validates value.<br /><br />**force**: Whether to force validation. |
 

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

@@ -15984,7 +15984,6 @@ class AuroCombobox extends AuroElement$1 {
 
       /**
        * Value selected for the dropdown menu.
-       * @type {string}
        */
       value: {
         type: String
@@ -16034,6 +16033,10 @@ class AuroCombobox extends AuroElement$1 {
     ];
   }
 
+  /**
+   * Checks if the element is valid.
+   * @returns {boolean} - Returns true if the element is valid, false otherwise.
+   */
   isValid() {
     let valid = true;
 
@@ -16057,87 +16060,95 @@ class AuroCombobox extends AuroElement$1 {
   }
 
   /**
-   * Processes hidden state of all menu options and determines if there are any available options not hidden.
+   * Updates the filter for the available options based on the input value.
    * @private
-   * @returns {void}
    */
-  handleMenuOptions() {
-    // Reset menu matchword UI
-    this.menu.updateItemsState(new Map([
-      [
-        'matchWord',
-        true
-      ]
-    ]));
+  updateFilter() {
 
-    this.generateOptionsArray();
-    this.availableOptions = [];
+    // Reset available options if noFilter is set to false after being true.
+    if (this.noFilter) {
+      this.availableOptions = [...this.options];
+      return;
+    }
 
-    if (this.menu.optionSelected) {
-      // Get first option since combobox is single-select
-      const selected = this.menu.optionSelected;
+    this.noMatchOption = undefined;
 
-      if (!this.optionSelected || this.optionSelected !== selected) {
-        this.optionSelected = selected;
-      }
+    this.options.forEach((option) => {
+      let matchString = option.textContent.toLowerCase();
 
-      if (!this.value || this.value !== selected.value) {
-        this.value = selected.value;
+      if (option.hasAttribute('nomatch')) {
+        this.noMatchOption = option;
+      }
 
-        this.menu.value = this.value;
+      if (option.hasAttribute('persistent')) {
+        this.availableOptions.push(option);
       }
 
-      if (this.input.value !== selected.textContent) {
-        this.input.value = selected.textContent;
+      if (option.hasAttribute('suggest')) {
+        matchString = `${matchString} ${option.getAttribute('suggest')}`.toLowerCase();
       }
 
-      if (this.menu.matchWord !== this.input.value) {
-        this.menu.matchWord = this.input.value;
+      // only count options that match the typed input value AND are not currently selected AND are not static
+      if (this.input.value && matchString.includes(this.input.value.toLowerCase()) && !option.hasAttribute('static')) {
+        option.removeAttribute('hidden');
+        this.availableOptions.push(option);
+      } else if (!option.hasAttribute('persistent')) {
+        // Hide all other non-persistent options
+        option.setAttribute('hidden', '');
       }
+    });
 
-      this.classList.add('combobox-filled');
+    if (this.availableOptions.length === 0) {
+      if (this.noMatchOption) {
+        this.noMatchOption.removeAttribute('hidden');
+      } else {
+        this.hideBib();
+      }
+    } else if (this.noMatchOption) {
+      this.noMatchOption.setAttribute('hidden', '');
     }
+  }
 
-    if (this.noFilter) {
-      this.availableOptions = [...this.options];
-    } else {
-      this.noMatchOption = undefined;
-
-      this.options.forEach((option) => {
-        let matchString = option.textContent.toLowerCase();
+  /**
+   * Syncs the values and states of this component, the input, and the menu, including this.optionSelected and this.menu.optionSelected.
+   * @private
+   * @returns {void}
+   */
+  async syncValuesAndStates() {
 
-        if (option.hasAttribute('nomatch')) {
-          this.noMatchOption = option;
-        }
+    // Sync values
+    this.menu.value = this.value;
+    this.menu.matchWord = this.value;
+    this.input.value = this.value;
 
-        if (option.hasAttribute('persistent')) {
-          this.availableOptions.push(option);
-        }
+    // Wait a lifecycle for child components to update
+    await Promise.all([this.menu.updateComplete]);
+  }
 
-        if (option.hasAttribute('suggest')) {
-          matchString = `${matchString} ${option.getAttribute('suggest')}`.toLowerCase();
-        }
+  /**
+   * Resets the menu matchWord to true.
+   * @private
+   */
+  resetMenuMatchword() {
+    this.menu.updateItemsState(new Map([
+      [
+        'matchWord',
+        true
+      ]
+    ]));
+  };
 
-        // only count options that match the typed input value AND are not currently selected AND are not static
-        if (this.input.value && matchString.includes(this.input.value.toLowerCase()) && !option.hasAttribute('static')) {
-          option.removeAttribute('hidden');
-          this.availableOptions.push(option);
-        } else if (!option.hasAttribute('persistent')) {
-          // Hide all other non-persistent options
-          option.setAttribute('hidden', '');
-        }
-      });
+  /**
+   * Processes hidden state of all menu options and determines if there are any available options not hidden.
+   * @private
+   * @returns {void}
+   */
+  handleMenuOptions() {
 
-      if (this.availableOptions.length === 0) {
-        if (this.noMatchOption) {
-          this.noMatchOption.removeAttribute('hidden');
-        } else {
-          this.hideBib();
-        }
-      } else if (this.noMatchOption) {
-        this.noMatchOption.setAttribute('hidden', '');
-      }
-    }
+    this.resetMenuMatchword();
+    this.generateOptionsArray();
+    this.availableOptions = [];
+    this.updateFilter();
   }
 
   /**
@@ -16295,8 +16306,6 @@ class AuroCombobox extends AuroElement$1 {
           this.menu.matchWord = this.input.value;
         }
 
-        this.classList.add('combobox-filled');
-
         // update the hidden state of options based on newly selected value
         this.handleMenuOptions();
 
@@ -16437,9 +16446,6 @@ class AuroCombobox extends AuroElement$1 {
     // Hide menu if value is empty, otherwise show if there are available suggestions
     if (this.input.value && this.input.value.length === 0) {
       this.hideBib();
-      this.classList.remove('combobox-filled');
-    } else if (!this.dropdown.isPopoverVisible && this.availableOptions) {
-      this.classList.add('combobox-filled');
     }
 
     // Force dropdown bib to hide if input value has no matching suggestions
@@ -16497,7 +16503,6 @@ class AuroCombobox extends AuroElement$1 {
    * @private
    * @returns {void}
    */
-
   performUpdate() {
     super.performUpdate();
 
@@ -16556,30 +16561,18 @@ class AuroCombobox extends AuroElement$1 {
     this.validation.validate(this, force);
   }
 
-  updated(changedProperties) {
+  async updated(changedProperties) {
     // After the component is ready, send direct value changes to auro-menu.
-    if (changedProperties.has('value')) {
-      if (this.value) {
-        if (this.optionSelected && this.optionSelected.value === this.value) {
-          // If value updates and the previously selected option already matches the new value
-          // just update the input value to use the textContent of the optionSelected
-          this.input.value = this.optionSelected.textContent;
-        } else {
-          // Otherwise just enter the value into the input
-          this.optionSelected = undefined;
-
-          const inputValue = this.value;
-          this.input.value = inputValue;
+    if (changedProperties.has('value') && this.value !== changedProperties.get('value')) {
 
-          // Update the menu value and matchWord
-          this.menu.matchWord = inputValue;
-          this.handleMenuOptions();
+      // Sync the input, menu, and optionSelected states
+      await this.syncValuesAndStates();
 
-          // If the value got set programmatically make sure we hide the bib
-          // when input is not taking the focus (input can be in dropdown.trigger or in bibtemplate)
-          if (!this.contains(document.activeElement) && !this.bibtemplate.contains(document.activeElement)) {
-            this.hideBib();
-          }
+      if (this.value) {
+        // If the value got set programmatically make sure we hide the bib
+        // when input is not taking the focus (input can be in dropdown.trigger or in bibtemplate)
+        if (!this.contains(document.activeElement) && !this.bibtemplate.contains(document.activeElement)) {
+          this.hideBib();
         }
       } else {
         this.reset();

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

@@ -15842,7 +15842,6 @@ class AuroCombobox extends AuroElement$1 {
 
       /**
        * Value selected for the dropdown menu.
-       * @type {string}
        */
       value: {
         type: String
@@ -15892,6 +15891,10 @@ class AuroCombobox extends AuroElement$1 {
     ];
   }
 
+  /**
+   * Checks if the element is valid.
+   * @returns {boolean} - Returns true if the element is valid, false otherwise.
+   */
   isValid() {
     let valid = true;
 
@@ -15915,87 +15918,95 @@ class AuroCombobox extends AuroElement$1 {
   }
 
   /**
-   * Processes hidden state of all menu options and determines if there are any available options not hidden.
+   * Updates the filter for the available options based on the input value.
    * @private
-   * @returns {void}
    */
-  handleMenuOptions() {
-    // Reset menu matchword UI
-    this.menu.updateItemsState(new Map([
-      [
-        'matchWord',
-        true
-      ]
-    ]));
+  updateFilter() {
 
-    this.generateOptionsArray();
-    this.availableOptions = [];
+    // Reset available options if noFilter is set to false after being true.
+    if (this.noFilter) {
+      this.availableOptions = [...this.options];
+      return;
+    }
 
-    if (this.menu.optionSelected) {
-      // Get first option since combobox is single-select
-      const selected = this.menu.optionSelected;
+    this.noMatchOption = undefined;
 
-      if (!this.optionSelected || this.optionSelected !== selected) {
-        this.optionSelected = selected;
-      }
+    this.options.forEach((option) => {
+      let matchString = option.textContent.toLowerCase();
 
-      if (!this.value || this.value !== selected.value) {
-        this.value = selected.value;
+      if (option.hasAttribute('nomatch')) {
+        this.noMatchOption = option;
+      }
 
-        this.menu.value = this.value;
+      if (option.hasAttribute('persistent')) {
+        this.availableOptions.push(option);
       }
 
-      if (this.input.value !== selected.textContent) {
-        this.input.value = selected.textContent;
+      if (option.hasAttribute('suggest')) {
+        matchString = `${matchString} ${option.getAttribute('suggest')}`.toLowerCase();
       }
 
-      if (this.menu.matchWord !== this.input.value) {
-        this.menu.matchWord = this.input.value;
+      // only count options that match the typed input value AND are not currently selected AND are not static
+      if (this.input.value && matchString.includes(this.input.value.toLowerCase()) && !option.hasAttribute('static')) {
+        option.removeAttribute('hidden');
+        this.availableOptions.push(option);
+      } else if (!option.hasAttribute('persistent')) {
+        // Hide all other non-persistent options
+        option.setAttribute('hidden', '');
       }
+    });
 
-      this.classList.add('combobox-filled');
+    if (this.availableOptions.length === 0) {
+      if (this.noMatchOption) {
+        this.noMatchOption.removeAttribute('hidden');
+      } else {
+        this.hideBib();
+      }
+    } else if (this.noMatchOption) {
+      this.noMatchOption.setAttribute('hidden', '');
     }
+  }
 
-    if (this.noFilter) {
-      this.availableOptions = [...this.options];
-    } else {
-      this.noMatchOption = undefined;
-
-      this.options.forEach((option) => {
-        let matchString = option.textContent.toLowerCase();
+  /**
+   * Syncs the values and states of this component, the input, and the menu, including this.optionSelected and this.menu.optionSelected.
+   * @private
+   * @returns {void}
+   */
+  async syncValuesAndStates() {
 
-        if (option.hasAttribute('nomatch')) {
-          this.noMatchOption = option;
-        }
+    // Sync values
+    this.menu.value = this.value;
+    this.menu.matchWord = this.value;
+    this.input.value = this.value;
 
-        if (option.hasAttribute('persistent')) {
-          this.availableOptions.push(option);
-        }
+    // Wait a lifecycle for child components to update
+    await Promise.all([this.menu.updateComplete]);
+  }
 
-        if (option.hasAttribute('suggest')) {
-          matchString = `${matchString} ${option.getAttribute('suggest')}`.toLowerCase();
-        }
+  /**
+   * Resets the menu matchWord to true.
+   * @private
+   */
+  resetMenuMatchword() {
+    this.menu.updateItemsState(new Map([
+      [
+        'matchWord',
+        true
+      ]
+    ]));
+  };
 
-        // only count options that match the typed input value AND are not currently selected AND are not static
-        if (this.input.value && matchString.includes(this.input.value.toLowerCase()) && !option.hasAttribute('static')) {
-          option.removeAttribute('hidden');
-          this.availableOptions.push(option);
-        } else if (!option.hasAttribute('persistent')) {
-          // Hide all other non-persistent options
-          option.setAttribute('hidden', '');
-        }
-      });
+  /**
+   * Processes hidden state of all menu options and determines if there are any available options not hidden.
+   * @private
+   * @returns {void}
+   */
+  handleMenuOptions() {
 
-      if (this.availableOptions.length === 0) {
-        if (this.noMatchOption) {
-          this.noMatchOption.removeAttribute('hidden');
-        } else {
-          this.hideBib();
-        }
-      } else if (this.noMatchOption) {
-        this.noMatchOption.setAttribute('hidden', '');
-      }
-    }
+    this.resetMenuMatchword();
+    this.generateOptionsArray();
+    this.availableOptions = [];
+    this.updateFilter();
   }
 
   /**
@@ -16153,8 +16164,6 @@ class AuroCombobox extends AuroElement$1 {
           this.menu.matchWord = this.input.value;
         }
 
-        this.classList.add('combobox-filled');
-
         // update the hidden state of options based on newly selected value
         this.handleMenuOptions();
 
@@ -16295,9 +16304,6 @@ class AuroCombobox extends AuroElement$1 {
     // Hide menu if value is empty, otherwise show if there are available suggestions
     if (this.input.value && this.input.value.length === 0) {
       this.hideBib();
-      this.classList.remove('combobox-filled');
-    } else if (!this.dropdown.isPopoverVisible && this.availableOptions) {
-      this.classList.add('combobox-filled');
     }
 
     // Force dropdown bib to hide if input value has no matching suggestions
@@ -16355,7 +16361,6 @@ class AuroCombobox extends AuroElement$1 {
    * @private
    * @returns {void}
    */
-
   performUpdate() {
     super.performUpdate();
 
@@ -16414,30 +16419,18 @@ class AuroCombobox extends AuroElement$1 {
     this.validation.validate(this, force);
   }
 
-  updated(changedProperties) {
+  async updated(changedProperties) {
     // After the component is ready, send direct value changes to auro-menu.
-    if (changedProperties.has('value')) {
-      if (this.value) {
-        if (this.optionSelected && this.optionSelected.value === this.value) {
-          // If value updates and the previously selected option already matches the new value
-          // just update the input value to use the textContent of the optionSelected
-          this.input.value = this.optionSelected.textContent;
-        } else {
-          // Otherwise just enter the value into the input
-          this.optionSelected = undefined;
-
-          const inputValue = this.value;
-          this.input.value = inputValue;
+    if (changedProperties.has('value') && this.value !== changedProperties.get('value')) {
 
-          // Update the menu value and matchWord
-          this.menu.matchWord = inputValue;
-          this.handleMenuOptions();
+      // Sync the input, menu, and optionSelected states
+      await this.syncValuesAndStates();
 
-          // If the value got set programmatically make sure we hide the bib
-          // when input is not taking the focus (input can be in dropdown.trigger or in bibtemplate)
-          if (!this.contains(document.activeElement) && !this.bibtemplate.contains(document.activeElement)) {
-            this.hideBib();
-          }
+      if (this.value) {
+        // If the value got set programmatically make sure we hide the bib
+        // when input is not taking the focus (input can be in dropdown.trigger or in bibtemplate)
+        if (!this.contains(document.activeElement) && !this.bibtemplate.contains(document.activeElement)) {
+          this.hideBib();
         }
       } else {
         this.reset();

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

@@ -195,9 +195,10 @@ export class AuroCombobox extends AuroElement {
         };
         /**
          * Value selected for the dropdown menu.
-         * @type {string}
          */
-        value: string;
+        value: {
+            type: StringConstructor;
+        };
         /**
          * If declared, make bib.fullscreen.headline in HeadingDisplay.
          * Otherwise, Heading 600
@@ -275,14 +276,34 @@ export class AuroCombobox extends AuroElement {
     bibtemplateTag: any;
     inputTag: any;
     helpTextTag: any;
+    /**
+     * Checks if the element is valid.
+     * @returns {boolean} - Returns true if the element is valid, false otherwise.
+     */
     isValid(): boolean;
+    /**
+     * Updates the filter for the available options based on the input value.
+     * @private
+     */
+    private updateFilter;
+    noMatchOption: any;
+    /**
+     * Syncs the values and states of this component, the input, and the menu, including this.optionSelected and this.menu.optionSelected.
+     * @private
+     * @returns {void}
+     */
+    private syncValuesAndStates;
+    /**
+     * Resets the menu matchWord to true.
+     * @private
+     */
+    private resetMenuMatchword;
     /**
      * Processes hidden state of all menu options and determines if there are any available options not hidden.
      * @private
      * @returns {void}
      */
     private handleMenuOptions;
-    noMatchOption: any;
     /**
      * Determines the element error state based on the `required` attribute and input value.
      * @private
@@ -374,7 +395,7 @@ export class AuroCombobox extends AuroElement {
      * @param {boolean} [force=false] - Whether to force validation.
      */
     validate(force?: boolean): void;
-    updated(changedProperties: any): void;
+    updated(changedProperties: any): Promise<void>;
     /**
      * Applies slotted nodes to a target element with a new slot name.
      * @private