@aurodesignsystem/auro-formkit 3.5.0 → 4.0.0-rc-658.1.1

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

@@ -14,11 +14,11 @@ function valueExample() {
   const valueExample = document.querySelector('#valueExample');
 
   document.querySelector('#validValueExampleBtn').addEventListener('click', () => {
-    valueExample.value = ['arrival'];
+    valueExample.value = '["arrival", "prefer alaska"]';
   });
 
   document.querySelector('#invalidValueExampleBtn').addEventListener('click', () => {
-    valueExample.value = ['flight course'];
+    valueExample.value = '["flight course"]';
   });
 }
 
@@ -90,6 +90,17 @@ function auroMenuLoadingExample() {
   });
 }
 
+function valueTextExample() {
+  const onValueTextSelectInput = (e) => {
+    const valueText = e.target.querySelector("[slot=valueText]");
+
+    valueText.textContent = e.detail.optionSelected.dataset.display;
+  };
+
+  const select = document.querySelector("#valueTextExample");
+  select.addEventListener('input', onValueTextSelectInput);
+}
+
 /**
  * @license
  * Copyright 2019 Google LLC
@@ -5483,7 +5494,7 @@ i$5`:host{--ds-auro-menu-divider-color: var(--ds-basic-color-border-divider, rgb
  * @throws {Error} - Throws an error if the value is not an array, undefined,
  * or if the value cannot be parsed into an array from a JSON string.
  */
-function arrayConverter$1(value) {
+function arrayConverter(value) {
   // Allow undefined
   if (value === undefined) {
     return undefined;
@@ -5512,61 +5523,6 @@ function arrayConverter$1(value) {
   throw new Error('Invalid value: Input must be an array or undefined');
 }
 
-/**
- * Compare two arrays for equality.
- * @private
- * @param {Array} arr1 - First array to compare.
- * @param {Array} arr2 - Second array to compare.
- * @returns {boolean} True if arrays are equal.
- */
-function arraysAreEqual$1(arr1, arr2) {
-  // If both arrays undefined, they are equal (true)
-  if (arr1 === undefined || arr2 === undefined) {
-    return arr1 === arr2;
-  }
-
-  // If arrays have different lengths, they are not equal
-  if (arr1.length !== arr2.length) {
-    return false;
-  }
-
-  // If every item at each index is the same, return true
-  for (let index = 0; index < arr1.length; index += 1) {
-    if (arr1[index] !== arr2[index]) {
-      return false;
-    }
-  }
-  return true;
-}
-
-/**
- * Compares array for changes.
- * @private
- * @param {Array|any} newVal - New value to compare.
- * @param {Array|any} oldVal - Old value to compare.
- * @returns {boolean} True if arrays have changed.
- */
-function arrayOrUndefinedHasChanged$1(newVal, oldVal) {
-  try {
-    // Check if values are undefined or arrays
-    const isArrayOrUndefined = (val) => val === undefined || Array.isArray(val);
-
-    // If non-array or non-undefined, throw error
-    if (!isArrayOrUndefined(newVal) || !isArrayOrUndefined(oldVal)) {
-      const invalidValue = isArrayOrUndefined(newVal) ? oldVal : newVal;
-      throw new Error(`Value must be an array or undefined, received ${typeof invalidValue}`);
-    }
-
-    // Return true if arrays have changed, false if they are the same
-    return !arraysAreEqual$1(newVal, oldVal);
-  } catch (error) {
-    /* eslint-disable no-console */
-    console.error(error);
-    // If validation fails, it has changed
-    return true;
-  }
-}
-
 i$5`:host{display:flex;align-items:center;padding:var(--ds-size-50, 0.25rem) var(--ds-size-200, 1rem) var(--ds-size-50, 0.25rem) 0;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}:host slot{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-150, 0.75rem);margin-left:var(--ds-size-100, 0.5rem)}:host ::slotted(.nestingSpacer){display:inline-block;width:var(--ds-size-300, 1.5rem)}:host ::slotted(strong){font-weight:700}:host([hidden]){display:none}:host([static]){pointer-events:none}:host([disabled]:hover){cursor:auto}:host([disabled]){user-select:none;pointer-events:none}`;
 
 i$5`:host{background-color:var(--ds-auro-menuoption-container-color);color:var(--ds-auro-menuoption-text-color)}:host svg{fill:var(--ds-auro-menuoption-icon-color)}:host([disabled]){--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:hover),:host(.active){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-neutral-subtle, #f7f7f7)}:host([selected]){--ds-auro-menuoption-container-color: var(--ds-advanced-color-state-selected, #01426a);--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-menuoption-icon-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([selected]):host(:hover),:host([selected]):host(.active){--ds-auro-menuoption-container-color: var(--ds-advanced-color-state-selected-hover, #00274a)}`;
@@ -5592,8 +5548,9 @@ var styleCss$3 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.u
  * @slot label - Defines the content of the label.
  * @slot helpText - Defines the content of the helpText.
  * @slot placeholder - Defines the content of the placeholder to be shown when there is no value
+ * @slot valueText - Dropdown value text display.
  * @event auroSelect-valueSet - Notifies that the component has a new value set.
- * @event input - Notifies every time the value prop of the element is changed.
+ * @event input - Notifies every time the value prop of the element is changed. The updated `value` and `optionSelected` will be delivered in `detail` object.
  * @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` values have changed.
  * @csspart helpText - Apply CSS to the help text.
  */
@@ -5728,7 +5685,7 @@ class AuroSelect extends i$2 {
 
       /**
        * If declared, make bib.fullscreen.headline in HeadingDisplay.
-       * Otherwise, Heading 600
+       * Otherwise, Heading 600.
        */
       largeFullscreenHeadline: {
         type: Boolean,
@@ -5786,12 +5743,11 @@ class AuroSelect extends i$2 {
       },
 
       /**
-       * Specifies the current selected menuOption.
+       * Specifies the current selected menuOption. Default type is `HTMLElement`, changing to `Array<HTMLElement>` when `multiSelect` is true.
+       * @type {HTMLElement|Array<HTMLElement>}
        */
       optionSelected: {
-        // Allow HTMLElement[] arrays and undefined
-        converter: arrayConverter$1,
-        hasChanged: arrayOrUndefinedHasChanged$1
+        type: Object
       },
 
       /**
@@ -5861,12 +5817,11 @@ class AuroSelect extends i$2 {
       },
 
       /**
-       * Value selected for the component.
+       * Value selected for the component. Default type is `String`, changing to `Array<String>` when `multiSelect` is true.
+       * @type {String|Array<String>}
        */
       value: {
-        // Allow string[] arrays and undefined
-        converter: arrayConverter$1,
-        hasChanged: arrayOrUndefinedHasChanged$1
+        type: Object
       },
 
       /**
@@ -5937,21 +5892,21 @@ class AuroSelect extends i$2 {
   updateDisplayedValue() {
     const triggerContentEl = this.dropdown.querySelector('#triggerFocus');
 
-    // Clear everything except placeholder
-    const placeholder = triggerContentEl.querySelector('#placeholder');
-    triggerContentEl.innerHTML = '';
-    if (placeholder) {
-      triggerContentEl.appendChild(placeholder);
-    }
+    const valueText = triggerContentEl.querySelector("#valueText");
+    valueText.textContent = '';
 
     // Handle selected options
-    if (this.optionSelected && this.optionSelected.length) {
-      // Create display text from selected options
-      const displayText = this.optionSelected.map((option) => option.textContent).join(', ');
+    if (this.optionSelected) {
+      let displayText = '';
+
+      if (this.multiSelect && this.optionSelected.length > 0) {
+        // Create display text from selected options
+        displayText = this.optionSelected.map((option) => option.textContent).join(', ');
+      } else {
+        displayText = this.optionSelected.textContent;
+      }
 
-      const span = document.createElement('span');
-      span.textContent = displayText;
-      triggerContentEl.appendChild(span);
+      valueText.textContent = displayText;
     }
 
     this.dropdown.requestUpdate();
@@ -6195,6 +6150,17 @@ class AuroSelect extends i$2 {
     }
   }
 
+  /**
+   * Resets all options to their default state.
+   * @private
+   */
+  clearSelection() {
+    this.value = undefined;
+    this.optionSelected = undefined;
+
+    this.menu.multiSelect = this.multiSelect;
+  }
+
   /**
    * Handle element attributes on update.
    * @private
@@ -6231,13 +6197,20 @@ class AuroSelect extends i$2 {
 
     // Set the initial value in auro-menu if defined
     if (this.hasAttribute('value') && this.getAttribute('value').length > 0) {
+      this.value = this.multiSelect ? arrayConverter(this.getAttribute('value')) : this.getAttribute('value');
       this.menu.value = this.value;
     }
   }
 
   async updated(changedProperties) {
+    if (changedProperties.has('multiSelect')) {
+      this.clearSelection();
+    }
+
     if (changedProperties.has('value')) {
       if (this.value) {
+        this.value = this.multiSelect ? arrayConverter(this.value) : this.value;
+
         this.menu.value = this.value;
 
         // Wait for menu to finish updating its value
@@ -6262,6 +6235,10 @@ class AuroSelect extends i$2 {
         bubbles: true,
         cancelable: true,
         composed: true,
+        detail: {
+          optionSelected: this.optionSelected,
+          value: this.value
+        }
       }));
     }
 
@@ -6309,8 +6286,23 @@ class AuroSelect extends i$2 {
   _handleNativeSelectChange(event) {
     const selectedOption = event.target.options[event.target.selectedIndex];
     const selectedValue = selectedOption.value;
-    const [currentValue] = this.value || [];
-    this.value = !currentValue || currentValue !== selectedValue ? [selectedValue] : this.value;
+
+    if (this.multiSelect) {
+      const currentArray = Array.isArray(this.value) ? this.value : [];
+
+      if (!currentArray.includes(selectedValue)) {
+        this.value = [
+          ...currentArray,
+          selectedValue
+        ];
+      }
+    } else {
+      const currentValue = this.value;
+
+      if (currentValue !== selectedValue) {
+        this.value = selectedValue;
+      }
+    }
   }
 
   /**
@@ -6323,10 +6315,13 @@ class AuroSelect extends i$2 {
     if (!nativeSelect) {
       return;
     }
-    const [value] = this.value || [];
-    nativeSelect.value = value || '';
-  }
 
+    if (this.multiSelect) {
+      nativeSelect.value = this.value ? this.value[0] : '';
+    } else {
+      nativeSelect.value = this.value || '';
+    }
+  }
 
   // When using auroElement, use the following attribute and function when hiding content from screen readers.
   // aria-hidden="${this.hideAudible(this.hiddenAudible)}"
@@ -6372,7 +6367,13 @@ class AuroSelect extends i$2 {
           ?noFlip="${this.noFlip}"
           part="dropdown">
           <span slot="trigger" aria-haspopup="true" id="triggerFocus">
-            <span id="placeholder" class="${e(placeholderClass)}"><slot name="placeholder"></slot></span>
+            <span id="placeholder"
+              class="${e(placeholderClass)}"
+              ?aria-hidden="${this.optionSelected && this.optionSelected.length ? 'true' : false}"
+              >
+              <slot name="placeholder"></slot>
+            </span>
+            <slot name="valueText" id="valueText"></slot>
           </span>
 
           <div class="menuWrapper">
@@ -6432,102 +6433,6 @@ var tokensCss$1 = i$5`:host{--ds-auro-menu-divider-color: var(--ds-basic-color-b
 // Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
-// ---------------------------------------------------------------------
-
-/**
- * Converts value to an array.
- * If the value is a JSON string representing an array, it will be parsed.
- * If the value is already an array, it is returned.
- * If the value is undefined, it returns undefined.
- * @private
- * @param {any} value - The value to be converted. Can be a string, array, or undefined.
- * @returns {Array|undefined} - The converted array or undefined.
- * @throws {Error} - Throws an error if the value is not an array, undefined,
- * or if the value cannot be parsed into an array from a JSON string.
- */
-function arrayConverter(value) {
-  // Allow undefined
-  if (value === undefined) {
-    return undefined;
-  }
-
-  // Return the value if it is already an array
-  if (Array.isArray(value)) {
-    return value;
-  }
-
-  try {
-    // If value is a JSON string, parse it
-    const parsed = typeof value === 'string' ? JSON.parse(value) : value;
-
-    // Check if the parsed value is an array
-    if (Array.isArray(parsed)) {
-      return parsed;
-    }
-  } catch (error) {
-    // If JSON parsing fails, continue to throw an error below
-    /* eslint-disable no-console */
-    console.error('JSON parsing failed:', error);
-  }
-
-  // Throw error if the input is not an array or undefined
-  throw new Error('Invalid value: Input must be an array or undefined');
-}
-
-/**
- * Compare two arrays for equality.
- * @private
- * @param {Array} arr1 - First array to compare.
- * @param {Array} arr2 - Second array to compare.
- * @returns {boolean} True if arrays are equal.
- */
-function arraysAreEqual(arr1, arr2) {
-  // If both arrays undefined, they are equal (true)
-  if (arr1 === undefined || arr2 === undefined) {
-    return arr1 === arr2;
-  }
-
-  // If arrays have different lengths, they are not equal
-  if (arr1.length !== arr2.length) {
-    return false;
-  }
-
-  // If every item at each index is the same, return true
-  for (let index = 0; index < arr1.length; index += 1) {
-    if (arr1[index] !== arr2[index]) {
-      return false;
-    }
-  }
-  return true;
-}
-
-/**
- * Compares array for changes.
- * @private
- * @param {Array|any} newVal - New value to compare.
- * @param {Array|any} oldVal - Old value to compare.
- * @returns {boolean} True if arrays have changed.
- */
-function arrayOrUndefinedHasChanged(newVal, oldVal) {
-  try {
-    // Check if values are undefined or arrays
-    const isArrayOrUndefined = (val) => val === undefined || Array.isArray(val);
-
-    // If non-array or non-undefined, throw error
-    if (!isArrayOrUndefined(newVal) || !isArrayOrUndefined(oldVal)) {
-      const invalidValue = isArrayOrUndefined(newVal) ? oldVal : newVal;
-      throw new Error(`Value must be an array or undefined, received ${typeof invalidValue}`);
-    }
-
-    // Return true if arrays have changed, false if they are the same
-    return !arraysAreEqual(newVal, oldVal);
-  } catch (error) {
-    /* eslint-disable no-console */
-    console.error(error);
-    // If validation fails, it has changed
-    return true;
-  }
-}
 
 /**
  * Validates if an option can be interacted with.
@@ -6561,7 +6466,7 @@ function dispatchMenuEvent(element, eventName, detail = null) {
   element.dispatchEvent(new CustomEvent(eventName, eventConfig));
 }
 
-// Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
 
@@ -6569,14 +6474,14 @@ function dispatchMenuEvent(element, eventName, detail = null) {
 // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
 /**
  * The auro-menu element provides users a way to select from a list of options.
- * @attr {Array<HTMLElement>|undefined} optionSelected - An array of currently selected menu options. In single-select mode, the array will contain only one HTMLElement. `undefined` when no options are selected.
+ * @attr {HTMLElement|Array<HTMLElement>} optionSelected - An array of currently selected menu options, type `HTMLElement` by default. In multi-select mode, `optionSelected` is an array of HTML elements.
  * @attr {object} optionactive - Specifies the current active menuOption.
  * @attr {string} matchword - Specifies a string used to highlight matched string parts in options.
  * @attr {boolean} disabled - When true, the entire menu and all options are disabled;
  * @attr {boolean} nocheckmark - When true, selected option will not show the checkmark.
  * @attr {boolean} loading - When true, displays a loading state using the loadingIcon and loadingText slots if provided.
  * @attr {boolean} multiselect - When true, the selected option can be multiple options.
- * @attr {Array<string>|undefined} value - Value selected for the menu. `undefined` when no selection has been made, otherwise an array of strings. In single-select mode, the array will contain only one value.
+ * @attr {String|Array<string>} value - Value selected for the menu, type `string` by default. In multi-select mode, `value` is an array of strings.
  * @prop {boolean} hasLoadingPlaceholder - Indicates whether the menu has a loadingIcon or loadingText to render when in a loading state.
  * @event {CustomEvent<Element>} auroMenu-activatedOption - Notifies that a menuoption has been made `active`.
  * @event {CustomEvent<any>} auroMenu-customEventFired - Notifies that a custom event has been fired.
@@ -6589,7 +6494,7 @@ function dispatchMenuEvent(element, eventName, detail = null) {
  * @slot - Slot for insertion of menu options.
  */
 
-/* eslint-disable no-magic-numbers, max-lines */
+/* eslint-disable no-magic-numbers, max-lines, no-extra-parens */
 
 class AuroMenu extends i$2 {
   constructor() {
@@ -6669,9 +6574,8 @@ class AuroMenu extends i$2 {
         reflect: true
       },
       optionSelected: {
-        // Allow HTMLElement[] arrays and undefined
-        converter: arrayConverter,
-        hasChanged: arrayOrUndefinedHasChanged
+        // Allow HTMLElement, HTMLElement[] arrays and undefined
+        type: Object
       },
       optionActive: {
         type: Object,
@@ -6687,10 +6591,8 @@ class AuroMenu extends i$2 {
         attribute: 'multiselect'
       },
       value: {
-        // Allow string[] arrays and undefined
-        type: Object,
-        converter: arrayConverter,
-        hasChanged: arrayOrUndefinedHasChanged
+        // Allow string, string[] arrays and undefined
+        type: Object
       }
     };
   }
@@ -6743,30 +6645,39 @@ class AuroMenu extends i$2 {
   }
 
   updated(changedProperties) {
+    if (changedProperties.has('multiSelect')) {
+      // Reset selection if multiSelect mode changes
+      this.clearSelection();
+    }
+
     if (changedProperties.has('value')) {
       // Handle null/undefined case
       if (this.value === undefined || this.value === null) {
         this.optionSelected = undefined;
-        // Reset index tracking
         this.index = -1;
       } else {
-        // Convert single values to arrays
-        const valueArray = Array.isArray(this.value) ? this.value : [this.value];
+        if (this.multiSelect) {
+          // In multiselect mode, this.value should be an array of strings
+          const valueArray = Array.isArray(this.value) ? this.value : [this.value];
+          const matchingOptions = this.items.filter((item) => valueArray.includes(item.value));
 
-        // Find all matching options
-        const matchingOptions = this.items.filter((item) => valueArray.includes(item.value));
+          this.optionSelected = matchingOptions.length > 0 ? matchingOptions : undefined;
+        } else {
+          // In single-select mode, this.value should be a string
+          const matchingOptions = this.items.find((item) => item.value === this.value);
 
-        if (matchingOptions.length > 0) {
-          if (this.multiSelect) {
-            // For multiselect, keep all matching options
+          if (matchingOptions) {
             this.optionSelected = matchingOptions;
+            this.index = this.items.indexOf(matchingOptions);
           } else {
-            // For single select, only use the first match
-            this.optionSelected = [matchingOptions[0]];
-            this.index = this.items.indexOf(matchingOptions[0]);
+            // If no matching option found, reset selection
+            this.optionSelected = undefined;
+            this.index = -1;
           }
-        } else {
-          // No matches found - trigger failure event
+        }
+
+        // If no matching options were found in either mode
+        if (!this.optionSelected || (Array.isArray(this.optionSelected) && this.optionSelected.length === 0)) {
           dispatchMenuEvent(this, 'auroMenu-selectValueFailure');
           this.optionSelected = undefined;
           this.index = -1;
@@ -6918,8 +6829,8 @@ class AuroMenu extends i$2 {
       }
     } else {
       // Single select - use arrays with single values
-      this.value = [option.value];
-      this.optionSelected = [option];
+      this.value = option.value;
+      this.optionSelected = option;
     }
 
     this.index = this.items.indexOf(option);
@@ -7241,8 +7152,13 @@ class AuroMenu extends i$2 {
     if (!this.optionSelected) {
       return false;
     }
-    // Always treat as array for both single and multi-select
-    return Array.isArray(this.optionSelected) && this.optionSelected.includes(option);
+
+    if (this.multiSelect) {
+      // In multi-select mode, check if the option is in the selected array
+      return Array.isArray(this.optionSelected) && this.optionSelected.some((selectedOption) => selectedOption === option);
+    }
+
+    return this.optionSelected === option;
   }
 
   /**
@@ -7750,6 +7666,7 @@ function initExamples(initCount) {
     inDialogExample();
     resetStateExample();
     auroMenuLoadingExample();
+    valueTextExample();
   } catch (err) {
     if (initCount <= 20) {
       // setTimeout handles issue where content is sometimes loaded after the functions get called