@aurodesignsystem/auro-formkit 2.0.0-beta.10 → 2.0.0-beta.11

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

@@ -18,6 +18,11 @@ import { AuroDependencyVersioning } from '@aurodesignsystem/auro-library/scripts
 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";
@@ -41,7 +46,7 @@ export class AuroSelect extends LitElement {
     super();
 
     this.optionSelected = undefined;
-    this.validity = undefined;
+    this.value = undefined;
 
     const idLength = 36;
     const idSubstrEnd = 8;
@@ -138,7 +143,9 @@ export class AuroSelect extends LitElement {
        * Specifies the current selected menuOption.
        */
       optionSelected: {
-        type: Object
+        // Allow HTMLElement[] arrays and undefined
+        converter: arrayConverter,
+        hasChanged: arrayOrUndefinedHasChanged
       },
 
       /**
@@ -197,8 +204,19 @@ export class AuroSelect extends LitElement {
        * Value selected for the component.
        */
       value: {
-        type: String
-      }
+        // Allow string[] arrays and undefined
+        converter: arrayConverter,
+        hasChanged: arrayOrUndefinedHasChanged
+      },
+
+      /**
+       * Sets multi-select mode, allowing multiple options to be selected at once.
+       */
+      multiSelect: {
+        type: Boolean,
+        reflect: true,
+        attribute: 'multiselect'
+      },
     };
   }
 
@@ -240,29 +258,30 @@ export class AuroSelect extends LitElement {
   }
 
   /**
-   * Updates the displayed value in an Auro dropdown component based on optionSelected
+   * Updates the displayed value in an Auro dropdown component based on optionSelected.
    * @private
    * @returns {void}
    */
   updateDisplayedValue() {
     const triggerContentEl = this.dropdown.querySelector('#triggerFocus');
 
-    // remove all existing rendered value(s)
-    triggerContentEl.querySelectorAll('auro-menuoption, [auro-menuoption]').forEach((elm) => {
-      elm.remove();
-    });
+    // Clear everything except placeholder
+    const placeholder = triggerContentEl.querySelector('#placeholder');
+    triggerContentEl.innerHTML = '';
+    if (placeholder) {
+      triggerContentEl.appendChild(placeholder);
+    }
 
-    if (this.optionSelected) {
-      // clone the selected option and remove attributes that style it
-      const clone = this.optionSelected.cloneNode(true);
-      clone.removeAttribute('selected');
-      clone.removeAttribute('class');
+    // Handle selected options
+    if (this.optionSelected && this.optionSelected.length) {
+      // Create display text from selected options
+      const displayText = this.optionSelected.map((option) => option.textContent).join(', ');
 
-      // insert the non-styled clone into the trigger
-      triggerContentEl.appendChild(clone);
+      const span = document.createElement('span');
+      span.textContent = displayText;
+      triggerContentEl.appendChild(span);
     }
 
-    // notify dropdown as trigger content is changed
     this.dropdown.requestUpdate();
   }
 
@@ -282,6 +301,10 @@ 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');
 
@@ -292,8 +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;
+      // For single select, we still use arrays but only take first value
+      this.value = this.menu.value;
 
       if (this.dropdown.isPopoverVisible) {
         this.dropdown.hide();
@@ -308,7 +333,7 @@ export class AuroSelect extends LitElement {
      * with `auro-select.value`.
      */
     this.menu.addEventListener('auroMenu-selectValueFailure', () => {
-      this.reset();
+      this.menu.clearSelection();
     });
 
     this.menu.addEventListener('auroMenu-selectValueReset', () => {
@@ -333,7 +358,7 @@ export class AuroSelect extends LitElement {
         this.dropdown.show();
 
         if (this.dropdown.isPopoverVisible) {
-          this.menu.selectNextItem('up');
+          this.menu.navigateOptions('up');
         }
       }
 
@@ -343,7 +368,7 @@ export class AuroSelect extends LitElement {
         this.dropdown.show();
 
         if (this.dropdown.isPopoverVisible) {
-          this.menu.selectNextItem('down');
+          this.menu.navigateOptions('down');
         }
       }
 
@@ -406,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);
     }
   }
@@ -464,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;
       }

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}[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}`;
+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

@@ -102,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

@@ -74,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.10",
+  "version": "2.0.0-beta.11",
   "description": "A collection of web components used to build forms.",
   "type": "module",
   "license": "Apache-2.0",

package/.turbo/cache/026e4d886ba97e63-meta.json

@@ -1 +0,0 @@
-{"hash":"026e4d886ba97e63","duration":4139}

package/.turbo/cache/080ca6155e637d5d-meta.json

@@ -1 +0,0 @@
-{"hash":"080ca6155e637d5d","duration":2708}

package/.turbo/cache/0b115e30ff606299-meta.json

@@ -1 +0,0 @@
-{"hash":"0b115e30ff606299","duration":21859}

package/.turbo/cache/1c630fb3411e4a41-meta.json

@@ -1 +0,0 @@
-{"hash":"1c630fb3411e4a41","duration":6592}

package/.turbo/cache/24b19ac5895e5dd6-meta.json

@@ -1 +0,0 @@
-{"hash":"24b19ac5895e5dd6","duration":818}

package/.turbo/cache/29b72c73cbccb53d-meta.json

@@ -1 +0,0 @@
-{"hash":"29b72c73cbccb53d","duration":20406}

package/.turbo/cache/3e647c5863d32e6f-meta.json

@@ -1 +0,0 @@
-{"hash":"3e647c5863d32e6f","duration":21019}

package/.turbo/cache/43f5206cc4e69b44-meta.json

@@ -1 +0,0 @@
-{"hash":"43f5206cc4e69b44","duration":899}

package/.turbo/cache/4a85ec226b585fd5-meta.json

@@ -1 +0,0 @@
-{"hash":"4a85ec226b585fd5","duration":5450}

package/.turbo/cache/50a29c70b93c57dd-meta.json

@@ -1 +0,0 @@
-{"hash":"50a29c70b93c57dd","duration":2013}

package/.turbo/cache/56455145cd768755-meta.json

@@ -1 +0,0 @@
-{"hash":"56455145cd768755","duration":5730}

package/.turbo/cache/5c06332cf9f132da-meta.json

@@ -1 +0,0 @@
-{"hash":"5c06332cf9f132da","duration":804}

package/.turbo/cache/5e613afc6868d0e2-meta.json

@@ -1 +0,0 @@
-{"hash":"5e613afc6868d0e2","duration":10115}

package/.turbo/cache/639dac15b979bedc-meta.json

@@ -1 +0,0 @@
-{"hash":"639dac15b979bedc","duration":5310}

package/.turbo/cache/664c2e08614fd212-meta.json

@@ -1 +0,0 @@
-{"hash":"664c2e08614fd212","duration":6096}

package/.turbo/cache/6c51b0ebfc086faa-meta.json

@@ -1 +0,0 @@
-{"hash":"6c51b0ebfc086faa","duration":1834}

package/.turbo/cache/7216d994164825fb-meta.json

@@ -1 +0,0 @@
-{"hash":"7216d994164825fb","duration":2054}

package/.turbo/cache/83a167e135cb431a-meta.json

@@ -1 +0,0 @@
-{"hash":"83a167e135cb431a","duration":21107}

package/.turbo/cache/8af27c076dc010c3-meta.json

@@ -1 +0,0 @@
-{"hash":"8af27c076dc010c3","duration":20842}

package/.turbo/cache/953c8216249d3509-meta.json

@@ -1 +0,0 @@
-{"hash":"953c8216249d3509","duration":5039}

package/.turbo/cache/95a5e76ffd8c5110-meta.json

@@ -1 +0,0 @@
-{"hash":"95a5e76ffd8c5110","duration":20620}

package/.turbo/cache/a8b0fa0a9aa707c5-meta.json

@@ -1 +0,0 @@
-{"hash":"a8b0fa0a9aa707c5","duration":9871}

package/.turbo/cache/b22ca87b2f7f9cc2-meta.json

@@ -1 +0,0 @@
-{"hash":"b22ca87b2f7f9cc2","duration":20487}

package/.turbo/cache/b7bbe2e7d44b77f0-meta.json

@@ -1 +0,0 @@
-{"hash":"b7bbe2e7d44b77f0","duration":3725}

package/.turbo/cache/c2b51643f886a493-meta.json

@@ -1 +0,0 @@
-{"hash":"c2b51643f886a493","duration":22094}

package/.turbo/cache/c74d369a0475b124-meta.json

@@ -1 +0,0 @@
-{"hash":"c74d369a0475b124","duration":1114}

package/.turbo/cache/c7f5a276ddb73cf7-meta.json

@@ -1 +0,0 @@
-{"hash":"c7f5a276ddb73cf7","duration":901}

package/.turbo/cache/c96933d40404e4c8-meta.json

@@ -1 +0,0 @@
-{"hash":"c96933d40404e4c8","duration":3597}

package/.turbo/cache/eb1dbe885532c1dc-meta.json

@@ -1 +0,0 @@
-{"hash":"eb1dbe885532c1dc","duration":2772}

package/.turbo/cache/f1f6744948f1b18f-meta.json

@@ -1 +0,0 @@
-{"hash":"f1f6744948f1b18f","duration":2995}

package/.turbo/cache/feefbc25d550c1cd-meta.json

@@ -1 +0,0 @@
-{"hash":"feefbc25d550c1cd","duration":4694}

package/.turbo/cache/ff4dbfffc29255ab-meta.json

@@ -1 +0,0 @@
-{"hash":"ff4dbfffc29255ab","duration":4281}