@aurodesignsystem/auro-formkit 2.0.0-beta.3 → 2.0.0-beta.31

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"
@@ -60,8 +60,8 @@
     "postCss:component": "node ../../node_modules/@aurodesignsystem/auro-library/scripts/build/postCss.mjs",
     "sass:render": "sass-render --load-path=../../node_modules 'src/**/*.css' -t ../../node_modules/@aurodesignsystem/auro-library/scripts/build/staticStyles-template.js",
     "serve": "web-dev-server",
-    "test": "wtr --config \"../../packages/config/src/web-test-runner.config.mjs\" --coverage",
-    "test:watch": "wtr --watch",
+    "test": "wtr --config \"../../packages/config/src/web-test-runner.config.mjs\" --coverage --port 7700",
+    "test:watch": "wtr --config \"../../packages/config/src/web-test-runner.config.mjs\" --watch  --port 7700",
     "types": "tsc --project tsconfig.json",
     "lint": "npm-run-all scssLint esLint",
     "scssLint": "stylelint \"./src/**/*.scss\"",

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 the validation message to the 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);
+    }
+
+    // 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 (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);
+      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,8 +333,12 @@ export class AuroSelect extends LitElement {
      * with `auro-select.value`.
      */
     this.menu.addEventListener('auroMenu-selectValueFailure', () => {
-      this.reset();
-      this.updateDisplayedValue(this.placeholder);
+      this.menu.clearSelection();
+    });
+
+    this.menu.addEventListener('auroMenu-selectValueReset', () => {
+      this.optionSelected = this.menu.optionSelected;
+      this.validation.validate(this);
     });
   }
 
@@ -298,7 +358,7 @@ export class AuroSelect extends LitElement {
         this.dropdown.show();
 
         if (this.dropdown.isPopoverVisible) {
-          this.menu.selectNextItem('up');
+          this.menu.navigateOptions('up');
         }
       }
 
@@ -308,7 +368,7 @@ export class AuroSelect extends LitElement {
         this.dropdown.show();
 
         if (this.dropdown.isPopoverVisible) {
-          this.menu.selectNextItem('down');
+          this.menu.navigateOptions('down');
         }
       }
 
@@ -329,8 +389,6 @@ export class AuroSelect extends LitElement {
     this.addEventListener('blur', () => {
       this.validation.validate(this);
     });
-
-    this.labelForSr();
   }
 
   /**
@@ -373,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);
     }
   }
@@ -431,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;
       }
@@ -449,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);
     }
   }
 
@@ -463,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.
@@ -508,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">
@@ -534,23 +571,23 @@ 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>
           <slot name="label" slot="label"></slot>
-          <span slot="helpText">
+          <p slot="helpText">
             ${!this.validity || this.validity === undefined || this.validity === 'valid'
               ? html`
-                <p class="selectElement-helpText" id="${this.uniqueId}" part="helpText">
+                <span id="${this.uniqueId}" part="helpText">
                   <slot name="helpText"></slot>
-                </p>`
+                </span>`
               : html`
-                <p class="selectElement-helpText" id="${this.uniqueId}" role="alert" aria-live="assertive" part="helpText">
+                <span id="${this.uniqueId}" role="alert" aria-live="assertive" part="helpText">
                   ${this.errorMessage}
-                </p>`
+                </span>`
             }
-          </span>
+          </p>
         </${this.dropdownTag}>
         <!-- Help text and error message template -->
       </div>

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}: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;
 }
 
@@ -90,8 +97,9 @@ auro-menuoption {
   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.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;
 }
 
@@ -59,8 +69,15 @@ auro-menuoption {
   padding: var(--ds-size-50, $ds-size-50) 0;
 }
 
-.selectElement-helpText {
-  margin: var(--ds-size-50, $ds-size-50) 0;
-  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);
+    }
+  }
 }