@aurodesignsystem/auro-formkit 5.1.0-rc-1223.1 → 5.1.0-rc-1237.1

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

@@ -345,7 +345,7 @@ export class AuroCombobox extends AuroElement {
     bibtemplateTag: any;
     inputTag: any;
     helpTextTag: any;
-    availableOptions: any[];
+    availableOptions: any[] | any[];
     dropdownId: any;
     dropdownOpen: any;
     errorMessage: any;
@@ -384,11 +384,6 @@ export class AuroCombobox extends AuroElement {
      * @private
      */
     private updateTriggerTextDisplay;
-    /**
-     * 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
@@ -401,7 +396,7 @@ export class AuroCombobox extends AuroElement {
      * @returns {void}
      */
     private generateOptionsArray;
-    options: any[] | NodeListOf<Element>;
+    options: any;
     /**
      * Hides the dropdown bib if its open.
      * @returns {void}
@@ -484,6 +479,12 @@ export class AuroCombobox extends AuroElement {
      * @returns {void}
      */
     focus(): void;
+    /**
+     * Sets the menu value if menu is available.
+     * @param {string} value - The value to set on the menu.
+     * @returns {void}
+     */
+    setMenuValue(value: string): void;
     /**
      * Resets component to initial state.
      * @returns {void}

package/components/combobox/dist/index.js

@@ -4113,7 +4113,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$2 = '202511110102';
+var formkitVersion$2 = '202511252346';
 
 let AuroElement$2 = class AuroElement extends LitElement {
   static get properties() {
@@ -10801,6 +10801,7 @@ class BaseInput extends AuroElement$1 {
           const inputEvent = new InputEvent('input', {
             bubbles: true,
             composed: true,
+            cancelable: false
           });
           inputEvent.isProgrammatic = true;
           this.dispatchEvent(inputEvent);
@@ -11730,7 +11731,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$1 = '202511110102';
+var formkitVersion$1 = '202511252346';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -12720,7 +12721,7 @@ class AuroBibtemplate extends LitElement {
   }
 }
 
-var formkitVersion = '202511110102';
+var formkitVersion = '202511252346';
 
 var styleCss$1 = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
 
@@ -13574,8 +13575,14 @@ class AuroCombobox extends AuroElement {
         matchString = `${matchString} ${option.getAttribute('suggest')}`.toLowerCase();
       }
 
-      // 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')) {
+      // If input is empty, show all options (except static ones)
+      if (!this.input.value || this.input.value.length === 0) {
+        if (!option.hasAttribute('static')) {
+          option.removeAttribute('hidden');
+          this.availableOptions.push(option);
+        }
+      } else if (matchString.includes(this.input.value.toLowerCase()) && !option.hasAttribute('static')) {
+        // only count options that match the typed input value AND are not static
         option.removeAttribute('hidden');
         this.availableOptions.push(option);
       } else if (!option.hasAttribute('persistent')) {
@@ -13600,13 +13607,11 @@ class AuroCombobox extends AuroElement {
    * @private
    * @returns {void}
    */
-  async syncValuesAndStates() {
-    this.menu.value = this.value;
-    this.menu.matchWord = this.input.value;
-
-    // Wait a lifecycle for child components to update
-    await Promise.all([this.menu.updateComplete]);
-
+  syncValuesAndStates() {
+    // Only sync matchWord, don't set menu.value here since setMenuValue should handle that
+    if (this.menu) {
+      this.menu.matchWord = this.input.value;
+    }
     this.updateTriggerTextDisplay();
   }
 
@@ -13617,11 +13622,7 @@ class AuroCombobox extends AuroElement {
   updateTriggerTextDisplay() {
     // update the input content if persistInput is false
     if (!this.persistInput) {
-      if (this.menu.optionSelected && this.menu.optionSelected.textContent.length > 0) {
-        this.input.value = this.menu.optionSelected.textContent;
-      } else {
-        this.input.value = this.value;
-      }
+      this.input.value = this.value;
     }
 
     // update the displayValue in the trigger if displayValue slot content is present
@@ -13641,27 +13642,12 @@ class AuroCombobox extends AuroElement {
     this.requestUpdate();
   }
 
-  /**
-   * Resets the menu matchWord to true.
-   * @private
-   */
-  resetMenuMatchword() {
-    this.menu.updateItemsState(new Map([
-      [
-        'matchWord',
-        true
-      ]
-    ]));
-  };
-
   /**
    * Processes hidden state of all menu options and determines if there are any available options not hidden.
    * @private
    * @returns {void}
    */
   handleMenuOptions() {
-    this.resetMenuMatchword();
-
     this.generateOptionsArray();
     this.availableOptions = [];
     this.updateFilter();
@@ -13677,8 +13663,8 @@ class AuroCombobox extends AuroElement {
    * @returns {void}
    */
   generateOptionsArray() {
-    if (this.menu) {
-      this.options = this.menu.querySelectorAll('auro-menuoption, [auro-menuoption]');
+    if (this.menu && this.menu.options) {
+      this.options = this.menu.options;
     } else {
       this.options = [];
     }
@@ -13833,20 +13819,19 @@ class AuroCombobox extends AuroElement {
     this.menu = this.querySelector('auro-menu, [auro-menu]');
     this.defaultMenuShape = this.menu.getAttribute('shape');
 
-    this.menu.value = this.value;
-
-    this.updateMenuShapeSize();
-
-    // a racing condition on custom-combobox with custom-menu
-    if (!this.menu || this.menuShadowRoot === null) {
+    // racing condition on custom-combobox with custom-menu
+    if (!this.menu) {
       setTimeout(() => {
         this.configureMenu();
       }, 0);
       return;
     }
 
-    this.menu.addEventListener('auroMenu-loadingChange', (event) => this.handleMenuLoadingChange(event));
-    this.menu.shadowRoot.addEventListener('slotchange', (event) => this.handleSlotChange(event));
+    this.updateMenuShapeSize();
+
+    // Sync options array like select does
+    this.options = this.menu.options;
+    this.menu.addEventListener("auroMenu-loadingChange", (event) => this.handleMenuLoadingChange(event));
 
     if (this.checkmark) {
       this.menu.removeAttribute('nocheckmark');
@@ -13854,32 +13839,27 @@ class AuroCombobox extends AuroElement {
       this.menu.setAttribute('nocheckmark', '');
     }
 
-    // handle the menu event for an option selection
-    this.menu.addEventListener('auroMenu-selectedOption', (evt) => {
-      if (this.menu.optionSelected) {
-        const selected = this.menu.optionSelected;
-
-        if (!this.optionSelected || this.optionSelected !== selected) {
-          this.optionSelected = selected;
-        }
-
-        if (!this.value || this.value !== this.optionSelected.value) {
-          this.value = this.optionSelected.value;
-          // this.menu.value = this.value;
-        }
+    // Handle menu option selection like select does
+    this.menu.addEventListener('auroMenu-selectedOption', (event) => {
+      // Update the optionSelected from the event details, not manually
+      [this.optionSelected] = event.detail.options;
 
-        this.updateTriggerTextDisplay();
+      // Update the internal value to match the menu's value
+      this.value = event.detail.stringValue;
 
-        if (this.menu.matchWord !== this.input.value) {
-          this.menu.matchWord = this.input.value;
-        }
+      // Update display
+      this.updateTriggerTextDisplay();
 
-        // update the hidden state of options based on newly selected value
-        this.handleMenuOptions();
+      // Update match word for filtering
+      if (this.menu.matchWord !== this.input.value) {
+        this.menu.matchWord = this.input.value;
       }
 
-      // dropdown bib should hide when making a selection
-      if (evt.detail && evt.detail.source !== 'slotchange') {
+      // Update available options based on selection
+      this.handleMenuOptions();
+
+      // Hide dropdown on selection (except during slot changes)
+      if (event.detail && event.detail.source !== 'slotchange') {
         setTimeout(() => {
           this.hideBib();
         }, 0);
@@ -13900,13 +13880,8 @@ class AuroCombobox extends AuroElement {
       });
     });
 
-    this.menu.addEventListener('auroMenu-selectValueFailure', () => {
-      this.menu.clearSelection();
-    });
-
-    this.menu.addEventListener('auroMenu-selectValueReset', () => {
-      this.clear();
-    });
+    // Handle slot changes
+    this.menu.shadowRoot.addEventListener('slotchange', (event) => this.handleSlotChange(event));
   }
 
   /**
@@ -13987,7 +13962,7 @@ class AuroCombobox extends AuroElement {
       this.hideBib();
     }
 
-    this.dispatchEvent(new CustomEvent('inputValue', { detail: { value: this.inputValue} }));
+    this.dispatchEvent(new CustomEvent('inputValue', { detail: { value: this.inputValue } }));
   }
 
   /**
@@ -14044,7 +14019,7 @@ class AuroCombobox extends AuroElement {
           evt.preventDefault();
 
           // navigate on menu only when the focus is on input
-          if (!this.dropdown.isBibFullscreen || this.shadowRoot.activeElement === this.inputInBib) {
+          if (!this.dropdown.isBibFullscreen || this.dropdown.isPopoverVisible) {
             const direction = evt.key.replace('Arrow', '').toLowerCase();
             this.menu.navigateOptions(direction);
           }
@@ -14113,6 +14088,18 @@ class AuroCombobox extends AuroElement {
     }
   }
 
+  /**
+   * Sets the menu value if menu is available.
+   * @param {string} value - The value to set on the menu.
+   * @returns {void}
+   */
+  setMenuValue(value) {
+    if (!this.menu) {
+      return;
+    }
+    this.menu.value = value;
+  }
+
   /**
    * Resets component to initial state.
    * @returns {void}
@@ -14132,12 +14119,17 @@ class AuroCombobox extends AuroElement {
    * @returns {void}
    */
   clear() {
-    this.input.clear();
+    // Clear combobox state first
+    this.optionSelected = undefined;
+    this.value = undefined;
+
+    // Then clear input and menu
+    if (this.input.value) {
+      this.input.clear();
+    }
     if (this.menu.value || this.menu.optionSelected) {
       this.menu.reset();
     }
-    this.optionSelected = undefined;
-    this.value = undefined;
   }
 
   /**
@@ -14157,10 +14149,13 @@ class AuroCombobox extends AuroElement {
         this.hasValue = false;
       }
 
-      if (this.hasValue && !this.input.value && (!this.menu.availableOptions || this.menu.availableOptions.length === 0)) {
+      if (this.hasValue && !this.input.value && (!this.menu.options || this.menu.options.length === 0)) {
         this.input.value = this.value;
       }
 
+      // Use setMenuValue like select does instead of direct assignment
+      this.setMenuValue(this.value);
+
       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)
@@ -14171,13 +14166,19 @@ class AuroCombobox extends AuroElement {
         this.clear();
       }
 
-      // Sync the input, menu, and optionSelected states
-      await this.syncValuesAndStates();
+      // Sync the input and match word, but don't directly set menu.value again
+      if (this.menu) {
+        this.menu.matchWord = this.input.value;
+      }
 
       this.dispatchEvent(new CustomEvent('input', {
         bubbles: true,
         cancelable: false,
         composed: true,
+        detail: {
+          optionSelected: this.menu.optionSelected,
+          value: this.menu.value
+        }
       }));
 
       // Deprecated, need to be removed.
@@ -14197,8 +14198,8 @@ class AuroCombobox extends AuroElement {
     }
 
     if (changedProperties.has('error')) {
-      this.input.setAttribute('error', this.getAttribute('error'));
-      this.validate();
+      await this.input.setAttribute('error', this.getAttribute('error'));
+      this.validate(true);
     }
 
     if (changedProperties.has('shape') && this.menu) {
@@ -14304,11 +14305,11 @@ class AuroCombobox extends AuroElement {
       <div>
         <div aria-live="polite" class="util_displayHiddenVisually">
           ${this.optionActive && this.availableOptions.length > 0
-            ? html`
+        ? html`
               ${`${this.optionActive.textContent}, selected, ${this.availableOptions.indexOf(this.optionActive) + 1} of ${this.availableOptions.length}`}
             `
-            : undefined
-          }
+        : undefined
+      }
         </div>
         <${this.dropdownTag}
           appearance="${this.onDark ? 'inverse' : this.appearance}"
@@ -14390,21 +14391,21 @@ class AuroCombobox extends AuroElement {
 
           <span slot="helpText">
             ${!this.validity || this.validity === 'valid'
-              ? html`
+        ? html`
                 <${this.helpTextTag} class="${classMap(helpTextContentClasses)}" appearance="${this.onDark ? 'inverse' : this.appearance}"">
                   <p id="${this.uniqueId}" part="helpText">
                     <slot name="helpText"></slot>
                   </p>
                 </${this.helpTextTag}>
               `
-              : html`
+        : html`
                 <${this.helpTextTag} class="${classMap(errorTextContentClasses)}" error appearance="${this.onDark ? 'inverse' : this.appearance}"">
                   <p id="${this.uniqueId}" role="alert" aria-live="assertive" part="helpText">
                     ${this.errorMessage}
                   </p>
                 </${this.helpTextTag}>
               `
-            }
+      }
           </span>
         </${this.dropdownTag}>
       </div>