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

package/components/select/dist/index.js

@@ -5374,61 +5374,6 @@ function arrayConverter(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(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;
-  }
-}
-
 css`: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}`;
 
 css`: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)}`;
@@ -5454,8 +5399,9 @@ var styleCss = css`:focus:not(:focus-visible){outline:3px solid transparent}.uti
  * @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.
  */
@@ -5590,7 +5536,7 @@ class AuroSelect extends LitElement {
 
       /**
        * If declared, make bib.fullscreen.headline in HeadingDisplay.
-       * Otherwise, Heading 600
+       * Otherwise, Heading 600.
        */
       largeFullscreenHeadline: {
         type: Boolean,
@@ -5648,12 +5594,11 @@ class AuroSelect extends LitElement {
       },
 
       /**
-       * 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,
-        hasChanged: arrayOrUndefinedHasChanged
+        type: Object
       },
 
       /**
@@ -5723,12 +5668,11 @@ class AuroSelect extends LitElement {
       },
 
       /**
-       * 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,
-        hasChanged: arrayOrUndefinedHasChanged
+        type: Object
       },
 
       /**
@@ -5799,21 +5743,21 @@ class AuroSelect extends LitElement {
   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 = '';
 
-      const span = document.createElement('span');
-      span.textContent = displayText;
-      triggerContentEl.appendChild(span);
+      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;
+      }
+
+      valueText.textContent = displayText;
     }
 
     this.dropdown.requestUpdate();
@@ -6057,6 +6001,17 @@ class AuroSelect extends LitElement {
     }
   }
 
+  /**
+   * 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
@@ -6093,13 +6048,20 @@ class AuroSelect extends LitElement {
 
     // 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
@@ -6124,6 +6086,10 @@ class AuroSelect extends LitElement {
         bubbles: true,
         cancelable: true,
         composed: true,
+        detail: {
+          optionSelected: this.optionSelected,
+          value: this.value
+        }
       }));
     }
 
@@ -6171,8 +6137,23 @@ class AuroSelect extends LitElement {
   _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;
+      }
+    }
   }
 
   /**
@@ -6185,10 +6166,13 @@ class AuroSelect extends LitElement {
     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)}"
@@ -6234,7 +6218,13 @@ class AuroSelect extends LitElement {
           ?noFlip="${this.noFlip}"
           part="dropdown">
           <span slot="trigger" aria-haspopup="true" id="triggerFocus">
-            <span id="placeholder" class="${classMap(placeholderClass)}"><slot name="placeholder"></slot></span>
+            <span id="placeholder"
+              class="${classMap(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">

package/components/select/dist/registered.js

@@ -5374,61 +5374,6 @@ function arrayConverter(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(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;
-  }
-}
-
 css`: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}`;
 
 css`: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)}`;
@@ -5454,8 +5399,9 @@ var styleCss = css`:focus:not(:focus-visible){outline:3px solid transparent}.uti
  * @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.
  */
@@ -5590,7 +5536,7 @@ class AuroSelect extends LitElement {
 
       /**
        * If declared, make bib.fullscreen.headline in HeadingDisplay.
-       * Otherwise, Heading 600
+       * Otherwise, Heading 600.
        */
       largeFullscreenHeadline: {
         type: Boolean,
@@ -5648,12 +5594,11 @@ class AuroSelect extends LitElement {
       },
 
       /**
-       * 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,
-        hasChanged: arrayOrUndefinedHasChanged
+        type: Object
       },
 
       /**
@@ -5723,12 +5668,11 @@ class AuroSelect extends LitElement {
       },
 
       /**
-       * 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,
-        hasChanged: arrayOrUndefinedHasChanged
+        type: Object
       },
 
       /**
@@ -5799,21 +5743,21 @@ class AuroSelect extends LitElement {
   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 = '';
 
-      const span = document.createElement('span');
-      span.textContent = displayText;
-      triggerContentEl.appendChild(span);
+      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;
+      }
+
+      valueText.textContent = displayText;
     }
 
     this.dropdown.requestUpdate();
@@ -6057,6 +6001,17 @@ class AuroSelect extends LitElement {
     }
   }
 
+  /**
+   * 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
@@ -6093,13 +6048,20 @@ class AuroSelect extends LitElement {
 
     // 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
@@ -6124,6 +6086,10 @@ class AuroSelect extends LitElement {
         bubbles: true,
         cancelable: true,
         composed: true,
+        detail: {
+          optionSelected: this.optionSelected,
+          value: this.value
+        }
       }));
     }
 
@@ -6171,8 +6137,23 @@ class AuroSelect extends LitElement {
   _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;
+      }
+    }
   }
 
   /**
@@ -6185,10 +6166,13 @@ class AuroSelect extends LitElement {
     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)}"
@@ -6234,7 +6218,13 @@ class AuroSelect extends LitElement {
           ?noFlip="${this.noFlip}"
           part="dropdown">
           <span slot="trigger" aria-haspopup="true" id="triggerFocus">
-            <span id="placeholder" class="${classMap(placeholderClass)}"><slot name="placeholder"></slot></span>
+            <span id="placeholder"
+              class="${classMap(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">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurodesignsystem/auro-formkit",
-  "version": "3.5.0",
+  "version": "4.0.0-rc-658.1.1",
   "description": "A collection of web components used to build forms.",
   "homepage": "https://github.com/AlaskaAirlines/auro-formkit#readme",
   "bugs": {