@aurodesignsystem/auro-formkit 2.0.0-beta.2 → 2.0.0-beta.20

package/components/select/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@auro-formkit/auro-select",
+  "name": "@aurodesignsystem/auro-select",
   "version": "3.3.0",
   "description": "auro-select HTML custom element",
   "type": "module",
@@ -12,8 +12,8 @@
     "url": "https://github.com/AlaskaAirlines/auro-select"
   },
   "dependencies": {
-    "@auro-formkit/auro-dropdown": "*",
-    "@auro-formkit/auro-menu": "*",
+    "@aurodesignsystem/auro-dropdown": "*",
+    "@aurodesignsystem/auro-menu": "*",
     "chalk": "^5.3.0",
     "lit-element": "^4.1.1",
     "lit-html": "^3.2.1"

package/components/select/src/auro-select.js

@@ -7,6 +7,7 @@
 
 // If using litElement base class
 import { LitElement } from "lit";
+import { classMap } from 'lit/directives/class-map.js';
 import { html } from 'lit/static-html.js';
 
 import AuroFormValidation from '@auro-formkit/form-validation';
@@ -14,9 +15,14 @@ import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/util
 
 import { AuroDependencyVersioning } from '@aurodesignsystem/auro-library/scripts/runtime/dependencyTagVersioning.mjs';
 
-import { AuroDropdown } from '@auro-formkit/auro-dropdown';
+import { AuroDropdown } from '@aurodesignsystem/auro-dropdown';
 import dropdownVersion from './formkit/auro-dropdownVersion.js';
 
+import {
+  arrayConverter,
+  arrayOrUndefinedHasChanged
+} from '@aurodesignsystem/auro-menu';
+
 import styleCss from "./styles/style-css.js";
 import colorCss from "./styles/color-css.js";
 import tokensCss from "./styles/tokens-css.js";
@@ -25,22 +31,10 @@ import tokensCss from "./styles/tokens-css.js";
 /**
  * The auro-select element is a wrapper for auro-dropdown and auro-menu to create a dropdown menu control.
  *
- * @attr {String} validity - Specifies the `validityState` this element is in.
- * @attr {String} setCustomValidity - Sets a custom help text message to display for all validityStates.
- * @attr {String} setCustomValidityCustomError - Custom help text message to display when validity = `customError`.
- * @attr {String} setCustomValidityValueMissing - Custom help text message to display when validity = `valueMissing`.
- * @attr {String} error - When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value.
- * @attr {Boolean} noValidate - If set, disables auto-validation on blur.
- * @attr {Boolean} required - Populates the `required` attribute on the element. Used for client-side validation.
- * @attr {Boolean} flexMenuWidth - If set, makes dropdown bib width match the size of the content, rather than the width of the trigger.
- * @prop {String} placeholder - Define placeholder text to display before a value is manually selected.
- * @prop {String} value - Value selected for the component.
- * @prop {Boolean} disabled - When attribute is present element shows disabled state.
- * @prop {Boolean} noCheckmark - When true, checkmark on selected option will no longer be present.
- * @attr {Object} optionSelected - Specifies the current selected menuOption.
  * @slot - Default slot for the menu content.
  * @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
  * @event auroSelect-valueSet - Notifies that the component has a new value set.
  * @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` values have changed.
  * @csspart helpText - Apply CSS to the help text.
@@ -51,9 +45,8 @@ export class AuroSelect extends LitElement {
   constructor() {
     super();
 
-    this.placeholder = 'Please select option';
     this.optionSelected = undefined;
-    this.validity = undefined;
+    this.value = undefined;
 
     const idLength = 36;
     const idSubstrEnd = 8;
@@ -106,68 +99,131 @@ export class AuroSelect extends LitElement {
   // to understand how to use reflected attributes with your property settings.
   static get properties() {
     return {
-      // ...super.properties,
-      optionSelected: {
-        type: Object
+
+      /**
+       * When attribute is present, element shows disabled state.
+       */
+      disabled: {
+        type: Boolean,
+        reflect: true
       },
-      value: {
-        type: String
+
+      /**
+       * If set, makes dropdown width match the size of the content, rather than the width of the trigger.
+       */
+      flexMenuWidth: {
+        type: Boolean,
+        reflect: true
       },
+
+      /**
+       * When true, checkmark on selected option will no longer be present.
+       */
+      noCheckmark: {
+        type: Boolean,
+        reflect: true
+      },
+
+      /**
+       * If set, disables auto-validation on blur.
+       */
       noValidate: {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * @private
+       */
+      optionActive: {
+        type: Object
+      },
+
+      /**
+       * Specifies the current selected menuOption.
+       */
+      optionSelected: {
+        // Allow HTMLElement[] arrays and undefined
+        converter: arrayConverter,
+        hasChanged: arrayOrUndefinedHasChanged
+      },
+
+      /**
+       * @private
+       */
+      options: {
+        type: Array
+      },
+
+      /**
+       * Populates the `required` attribute on the element. Used for client-side validation.
+       */
       required: {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value.
+       */
       error: {
         type: String,
         reflect: true
       },
+
+      /**
+       * Sets a custom help text message to display for all validityStates.
+       */
       setCustomValidity: {
         type: String
       },
+
+      /**
+       * Custom help text message to display when validity = `customError`.
+       */
       setCustomValidityCustomError: {
         type: String
       },
+
+      /**
+       * Custom help text message to display when validity = `valueMissing`.
+       */
       setCustomValidityValueMissing: {
         type: String
       },
+
+      /**
+       * Specifies the `validityState` this element is in.
+       */
       validity: {
         type: String,
         reflect: true
       },
-      disabled: {
-        type: Boolean,
-        reflect: true
-      },
-      noCheckmark: {
-        type: Boolean,
-        reflect: true
-      },
-      flexMenuWidth: {
-        type: Boolean,
-        reflect: true
-      },
-      placeholder: { type: String },
 
       /**
-       * @private
+       * Value selected for the component.
        */
-      options: { type: Array },
+      value: {
+        // Allow string[] arrays and undefined
+        converter: arrayConverter,
+        hasChanged: arrayOrUndefinedHasChanged
+      },
 
       /**
-       * @private
+       * Sets multi-select mode, allowing multiple options to be selected at once.
        */
-      optionActive: { type: Object },
+      multiSelect: {
+        type: Boolean,
+        reflect: true,
+        attribute: 'multiselect'
+      },
     };
   }
 
   static get styles() {
     return [
-      styleCss,
       colorCss,
+      styleCss,
       tokensCss
     ];
   }
@@ -202,36 +258,31 @@ export class AuroSelect extends LitElement {
   }
 
   /**
-   * Updates the displayed value in an Auro dropdown component based on the provided option.
-   * @param {string|HTMLElement} option - The option to display. If a string, a new span element with the value string is created. If an HTMLElement, the selected option is cloned and non-styling attributes are removed.
+   * Updates the displayed value in an Auro dropdown component based on optionSelected.
    * @private
    * @returns {void}
    */
-  updateDisplayedValue(option) {
+  updateDisplayedValue() {
     const triggerContentEl = this.dropdown.querySelector('#triggerFocus');
 
-    // remove all existing rendered value(s)
-    triggerContentEl.querySelectorAll('auro-menuoption, [valuestr], [auro-menuoption]').forEach((elm) => {
-      elm.remove();
-    });
+    // Clear everything except placeholder
+    const placeholder = triggerContentEl.querySelector('#placeholder');
+    triggerContentEl.innerHTML = '';
+    if (placeholder) {
+      triggerContentEl.appendChild(placeholder);
+    }
 
-    if (typeof option === 'string' && option !== this.placeholder) {
-      // create a new span element with the value string
-      const valueElem = document.createElement('span');
-      valueElem.setAttribute('valuestr', true);
-      valueElem.textContent = option;
-
-      // append the new element into the trigger content
-      triggerContentEl.appendChild(valueElem);
-    } else if (typeof option === 'object') {
-      // clone the selected option and remove attributes that style it
-      const clone = option.cloneNode(true);
-      clone.removeAttribute('selected');
-      clone.removeAttribute('class');
-
-      // insert the non-styled clone into the trigger
-      triggerContentEl.appendChild(clone);
+    // Handle selected options
+    if (this.optionSelected && this.optionSelected.length) {
+      // Create display text from selected options
+      const displayText = this.optionSelected.map((option) => option.textContent).join(', ');
+
+      const span = document.createElement('span');
+      span.textContent = displayText;
+      triggerContentEl.appendChild(span);
     }
+
+    this.dropdown.requestUpdate();
   }
 
   /**
@@ -241,7 +292,7 @@ export class AuroSelect extends LitElement {
    */
   configureMenu() {
     this.menu = this.querySelector('auro-menu, [auro-menu]');
-    this.menu.addEventListener("auroMenu-loadingChange", (event) => this.handleMenuLoadingChange(event));
+
     // racing condition on custom-select with custom-menu
     if (!this.menu) {
       setTimeout(() => {
@@ -250,6 +301,11 @@ export class AuroSelect extends LitElement {
       return;
     }
 
+    if (this.multiSelect) {
+      this.menu.multiSelect = this.multiSelect;
+    }
+
+    this.menu.addEventListener("auroMenu-loadingChange", (event) => this.handleMenuLoadingChange(event));
     this.menu.setAttribute('aria-hidden', 'true');
 
     this.generateOptionsArray();
@@ -259,10 +315,10 @@ export class AuroSelect extends LitElement {
     });
 
     this.menu.addEventListener('auroMenu-selectedOption', () => {
+      // Get array of selected options from menu
       this.optionSelected = this.menu.optionSelected;
-      this.value = this.optionSelected.value;
-
-      this.updateDisplayedValue(this.optionSelected);
+      // For single select, we still use arrays but only take first value
+      this.value = this.menu.value;
 
       if (this.dropdown.isPopoverVisible) {
         this.dropdown.hide();
@@ -277,25 +333,11 @@ export class AuroSelect extends LitElement {
      * with `auro-select.value`.
      */
     this.menu.addEventListener('auroMenu-selectValueFailure', () => {
-      this.menu.optionSelected = undefined;
-      this.optionSelected = this.menu.optionSelected;
-
-      this.validity = 'badInput';
-
-      // Capitalizes the first letter of each word in this.value string
-      const valueStr = this.value.replace(/(^\w{1})|(\s+\w{1})/gu, (letter) => letter.toUpperCase());
-
-      // Pass the new string to the trigger content
-      this.updateDisplayedValue(valueStr);
+      this.menu.clearSelection();
     });
 
     this.menu.addEventListener('auroMenu-selectValueReset', () => {
-      // set the trigger content back to the placeholder
-      this.updateDisplayedValue(this.placeholder);
-
-      this.optionSelected = undefined;
-      this.value = undefined;
-
+      this.optionSelected = this.menu.optionSelected;
       this.validation.validate(this);
     });
   }
@@ -316,7 +358,7 @@ export class AuroSelect extends LitElement {
         this.dropdown.show();
 
         if (this.dropdown.isPopoverVisible) {
-          this.menu.selectNextItem('up');
+          this.menu.navigateOptions('up');
         }
       }
 
@@ -326,7 +368,7 @@ export class AuroSelect extends LitElement {
         this.dropdown.show();
 
         if (this.dropdown.isPopoverVisible) {
-          this.menu.selectNextItem('down');
+          this.menu.navigateOptions('down');
         }
       }
 
@@ -347,8 +389,6 @@ export class AuroSelect extends LitElement {
     this.addEventListener('blur', () => {
       this.validation.validate(this);
     });
-
-    this.labelForSr();
   }
 
   /**
@@ -391,7 +431,7 @@ export class AuroSelect extends LitElement {
      * input as no longer in the initial state.
      */
     if (this.value === undefined) {
-      this.value = '';
+      this.value = undefined;
       this.removeEventListener('focusin', this.handleFocusin);
     }
   }
@@ -449,11 +489,15 @@ export class AuroSelect extends LitElement {
     }
   }
 
-  updated(changedProperties) {
-    // After the component is ready, send direct value changes to auro-menu.
+  async updated(changedProperties) {
     if (changedProperties.has('value')) {
       if (this.value) {
         this.menu.value = this.value;
+
+        // Wait for menu to finish updating its value
+        await this.menu.updateComplete;
+
+        this.optionSelected = this.menu.optionSelected;
       } else {
         this.menu.value = undefined;
       }
@@ -467,8 +511,12 @@ export class AuroSelect extends LitElement {
       }));
     }
 
+    if (changedProperties.has('optionSelected')) {
+      this.updateDisplayedValue();
+    }
+
     if (changedProperties.has('error')) {
-      this.validation.validate(this, true);
+      this.validate(true);
     }
   }
 
@@ -481,44 +529,11 @@ export class AuroSelect extends LitElement {
   }
 
   /**
-   * Handles reading of auro-select by screen readers.
-   * @private
-   * @returns {void}
+   * Validates value.
+   * @param {boolean} [force=false] - Whether to force validation.
    */
-  labelForSr() {
-    const placeholderLabel = document.createElement("div");
-    const textId = "label";
-
-    placeholderLabel.setAttribute("id", textId);
-    placeholderLabel.setAttribute("aria-live", "polite");
-
-    const styles = {
-      position: 'absolute',
-      overflow: 'hidden',
-      clipPath: 'inset(1px, 1px, 1px, 1px)',
-      width: '1px',
-      height: '1px',
-      padding: '0',
-      border: '0'
-    };
-
-    Object.assign(placeholderLabel.style, styles);
-
-    this.addEventListener('focus', () => {
-      document.body.appendChild(placeholderLabel);
-
-      if (!this.optionSelected) {
-        document.getElementById(textId).innerHTML = this.placeholder;
-      } else {
-        document.getElementById(textId).innerHTML = `${this.optionSelected.innerText}, ${this.placeholder}`;
-      }
-    });
-
-    this.addEventListener('blur', () => {
-      if (document.contains(placeholderLabel)) {
-        document.body.removeChild(placeholderLabel);
-      }
-    });
+  validate(force = false) {
+    this.validation.validate(this, force);
   }
 
   // When using auroElement, use the following attribute and function when hiding content from screen readers.
@@ -526,6 +541,10 @@ export class AuroSelect extends LitElement {
 
   // function that renders the HTML and CSS into  the scope of the component
   render() {
+    const placeholderClass = {
+      hidden: this.value,
+    };
+
     return html`
       <div class="outerWrapper">
         <div aria-live="polite" class="util_displayHiddenVisually">
@@ -552,7 +571,7 @@ export class AuroSelect extends LitElement {
           chevron
           part="dropdown">
           <span slot="trigger" aria-haspopup="true" id="triggerFocus">
-            ${this.value ? this.displayValue : html`<span class="placeholder">${this.placeholder}</span>`}
+            <span id="placeholder" class="${classMap(placeholderClass)}"><slot name="placeholder"></slot></span>
           </span>
           <div class="menuWrapper">
           </div>
@@ -565,7 +584,7 @@ export class AuroSelect extends LitElement {
                 </p>`
               : html`
                 <p class="selectElement-helpText" id="${this.uniqueId}" role="alert" aria-live="assertive" part="helpText">
-                  ${this.setCustomValidity}
+                  ${this.errorMessage}
                 </p>`
             }
           </span>

package/components/select/src/dropdownVersion.js

@@ -0,0 +1 @@
+export default '3.0.0';

package/components/select/src/styles/style-css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export default css`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.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}[slot=trigger]{width:100%;padding:0;border:0;cursor:pointer;font-family:inherit;font-size:inherit;text-align:left}[slot=trigger] .nestingSpacer{display:none}:host [auro-dropdown]{position:relative}:host [auro-dropdown]::part(trigger){max-height:var(--ds-size-300, 1.5rem)}:host [auro-dropdown]::part(popover){max-width:-webkit-fill-available;overflow-y:scroll}:host([disabled]) *{user-select:none}.outerWrapper{position:relative}auro-menuoption{pointer-events:none}.menuWrapper{padding:var(--ds-size-50, 0.25rem) 0}.selectElement-helpText{margin:var(--ds-size-50, 0.25rem) 0;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:1rem}`;
+export default css`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.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}[slot=trigger]{width:100%;padding:0;border:0;cursor:pointer;font-family:inherit;font-size:inherit;text-align:left}[slot=trigger] .nestingSpacer{display:none}[slot=trigger] #placeholder.hidden{position:absolute;z-index:-1;opacity:0;pointer-events:none}:host [auro-dropdown]{position:relative}:host [auro-dropdown]::part(trigger){max-height:var(--ds-size-300, 1.5rem)}:host [auro-dropdown]::part(popover){max-width:-webkit-fill-available;overflow-y:scroll}:host([disabled]) *{user-select:none}.outerWrapper{position:relative}auro-menuoption{padding:0;pointer-events:none}.menuWrapper{padding:var(--ds-size-50, 0.25rem) 0}.selectElement-helpText{margin:var(--ds-size-50, 0.25rem) 0;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:1rem}:host([multiselect]) [slot=trigger]{display:flex}:host([multiselect]) auro-menuoption:not(:first-child){margin-left:var(--ds-size-100)}`;

package/components/select/src/styles/style.css

@@ -62,6 +62,12 @@
 [slot=trigger] .nestingSpacer {
   display: none;
 }
+[slot=trigger] #placeholder.hidden {
+  position: absolute;
+  z-index: -1;
+  opacity: 0;
+  pointer-events: none;
+}
 
 :host [auro-dropdown] {
   position: relative;
@@ -83,6 +89,7 @@
 }
 
 auro-menuoption {
+  padding: 0;
   pointer-events: none;
 }
 
@@ -95,3 +102,10 @@ auro-menuoption {
   font-size: var(--ds-text-body-size-xs, 0.75rem);
   line-height: 1rem;
 }
+
+:host([multiselect]) [slot=trigger] {
+  display: flex;
+}
+:host([multiselect]) auro-menuoption:not(:first-child) {
+  margin-left: var(--ds-size-100);
+}

package/components/select/src/styles/style.scss

@@ -24,7 +24,16 @@
   .nestingSpacer {
     display: none;
   }
-}
+
+  #placeholder {
+    &.hidden {
+      position: absolute;
+      z-index: -1;
+      opacity: 0;
+      pointer-events: none;
+    }
+  }
+} 
 
 :host {
   [auro-dropdown] {
@@ -52,6 +61,7 @@
 }
 
 auro-menuoption {
+  padding: 0;
   pointer-events: none;
 }
 
@@ -64,3 +74,16 @@ auro-menuoption {
   font-size: var(--ds-text-body-size-xs, $ds-text-body-size-xs);
   line-height: 1rem;
 }
+
+// Multiselect styles
+:host([multiselect]) {
+  [slot="trigger"] {
+    display: flex;
+  }
+
+  auro-menuoption {
+    &:not(:first-child) {
+      margin-left: var(--ds-size-100);
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurodesignsystem/auro-formkit",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0-beta.20",
   "description": "A collection of web components used to build forms.",
   "type": "module",
   "license": "Apache-2.0",
@@ -11,7 +11,7 @@
   "engines": {
     "node": "^20.x || ^22.x"
   },
-  "packageManager": "npm@10.0.0",
+  "packageManager": "npm@11.0.0",
   "publishConfig": {
     "access": "public"
   },
@@ -40,12 +40,12 @@
     "prepare": "husky"
   },
   "dependencies": {
-    "@aurodesignsystem/auro-library": "^3.0.5"
+    "@aurodesignsystem/auro-library": "^3.0.7"
   },
   "devDependencies": {
     "@aurodesignsystem/eslint-config": "^1.3.3",
-    "@commitlint/cli": "^19.5.0",
-    "@commitlint/config-conventional": "^19.5.0",
+    "@commitlint/cli": "^19.6.1",
+    "@commitlint/config-conventional": "^19.6.0",
     "@open-wc/testing": "^4.0.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
@@ -58,30 +58,30 @@
     "babel-loader": "^9.2.1",
     "compression": "^1.7.5",
     "concat": "^1.0.3",
-    "concurrently": "^9.0.1",
+    "concurrently": "^9.1.2",
     "copyfiles": "^2.4.1",
-    "core-js": "^3.38.1",
-    "eslint": "^9.14.0",
-    "eslint-plugin-jsdoc": "^50.5.0",
+    "core-js": "^3.40.0",
+    "eslint": "^9.18.0",
+    "eslint-plugin-jsdoc": "^50.6.1",
     "husky": "^9.1.7",
     "lodash": "^4.17.21",
-    "markdown-magic": "^2.6.1",
-    "nodemon": "^3.1.7",
+    "markdown-magic": "^3.3.0",
+    "nodemon": "^3.1.9",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.49",
+    "postcss": "^8.5.0",
     "postcss-custom-properties": "^14.0.4",
     "postcss-discard-comments": "^7.0.3",
-    "prettier": "^3.0.0",
-    "sass": "^1.80.7",
-    "semantic-release": "^24.2.0",
-    "stylelint": "^16.10.0",
+    "prettier": "^3.4.2",
+    "sass": "^1.83.1",
+    "semantic-release": "^24.2.1",
+    "stylelint": "^16.13.1",
     "stylelint-config-idiomatic-order": "^10.0.0",
-    "stylelint-config-standard": "^36.0.1",
-    "stylelint-config-standard-scss": "^13.1.0",
+    "stylelint-config-standard": "^37.0.0",
+    "stylelint-config-standard-scss": "^14.0.0",
     "stylelint-order": "^6.0.4",
-    "stylelint-scss": "^6.9.0",
-    "turbo": "^2.3.1",
-    "typescript": "^5.6.3",
+    "stylelint-scss": "^6.10.0",
+    "turbo": "^2.3.3",
+    "typescript": "^5.7.3",
     "whatwg-fetch": "^3.6.20",
     "yaml-lint": "^1.7.0"
   },