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

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';
@@ -25,22 +26,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,7 +40,6 @@ export class AuroSelect extends LitElement {
   constructor() {
     super();
 
-    this.placeholder = 'Please select option';
     this.optionSelected = undefined;
     this.validity = undefined;
 
@@ -106,68 +94,118 @@ 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: {
+        type: Object
+      },
+
+      /**
+       * @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 },
-
-      /**
-       * @private
-       */
-      optionActive: { type: Object },
+      value: {
+        type: String
+      }
     };
   }
 
   static get styles() {
     return [
-      styleCss,
       colorCss,
+      styleCss,
       tokensCss
     ];
   }
@@ -202,36 +240,30 @@ 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) => {
+    triggerContentEl.querySelectorAll('auro-menuoption, [auro-menuoption]').forEach((elm) => {
       elm.remove();
     });
 
-    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') {
+    if (this.optionSelected) {
       // clone the selected option and remove attributes that style it
-      const clone = option.cloneNode(true);
+      const clone = this.optionSelected.cloneNode(true);
       clone.removeAttribute('selected');
       clone.removeAttribute('class');
 
       // insert the non-styled clone into the trigger
       triggerContentEl.appendChild(clone);
     }
+
+    // notify dropdown as trigger content is changed
+    this.dropdown.requestUpdate();
   }
 
   /**
@@ -241,7 +273,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 +282,7 @@ export class AuroSelect extends LitElement {
       return;
     }
 
+    this.menu.addEventListener("auroMenu-loadingChange", (event) => this.handleMenuLoadingChange(event));
     this.menu.setAttribute('aria-hidden', 'true');
 
     this.generateOptionsArray();
@@ -262,8 +295,6 @@ export class AuroSelect extends LitElement {
       this.optionSelected = this.menu.optionSelected;
       this.value = this.optionSelected.value;
 
-      this.updateDisplayedValue(this.optionSelected);
-
       if (this.dropdown.isPopoverVisible) {
         this.dropdown.hide();
       }
@@ -278,7 +309,11 @@ export class AuroSelect extends LitElement {
      */
     this.menu.addEventListener('auroMenu-selectValueFailure', () => {
       this.reset();
-      this.updateDisplayedValue(this.placeholder);
+    });
+
+    this.menu.addEventListener('auroMenu-selectValueReset', () => {
+      this.optionSelected = this.menu.optionSelected;
+      this.validation.validate(this);
     });
   }
 
@@ -329,8 +364,6 @@ export class AuroSelect extends LitElement {
     this.addEventListener('blur', () => {
       this.validation.validate(this);
     });
-
-    this.labelForSr();
   }
 
   /**
@@ -449,6 +482,10 @@ export class AuroSelect extends LitElement {
       }));
     }
 
+    if (changedProperties.has('optionSelected')) {
+      this.updateDisplayedValue();
+    }
+
     if (changedProperties.has('error')) {
       this.validation.validate(this, true);
     }
@@ -462,52 +499,15 @@ export class AuroSelect extends LitElement {
     this.validation.reset(this);
   }
 
-  /**
-   * Handles reading of auro-select by screen readers.
-   * @private
-   * @returns {void}
-   */
-  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);
-      }
-    });
-  }
-
   // When using auroElement, use the following attribute and function when hiding content from screen readers.
   // aria-hidden="${this.hideAudible(this.hiddenAudible)}"
 
   // 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,7 +534,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>

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

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;
 }
 

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;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurodesignsystem/auro-formkit",
-  "version": "2.0.0-beta.3",
+  "version": "2.0.0-beta.4",
   "description": "A collection of web components used to build forms.",
   "type": "module",
   "license": "Apache-2.0",

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

@@ -1 +0,0 @@
-{"hash":"1ab37ce15d9be440","duration":6432}

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

@@ -1 +0,0 @@
-{"hash":"1de15d89eed2d760","duration":2801}

package/.turbo/cache/2110a4d14e0d11b2-meta.json

@@ -1 +0,0 @@
-{"hash":"2110a4d14e0d11b2","duration":19210}

package/.turbo/cache/2990aaa7ebc5b967-meta.json

@@ -1 +0,0 @@
-{"hash":"2990aaa7ebc5b967","duration":3836}

package/.turbo/cache/2fd056afdf4eb39d-meta.json

@@ -1 +0,0 @@
-{"hash":"2fd056afdf4eb39d","duration":9944}

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

@@ -1 +0,0 @@
-{"hash":"4f92cea2d8c63de2","duration":2517}

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

@@ -1 +0,0 @@
-{"hash":"5c16ce3cff5c9dff","duration":2968}

package/.turbo/cache/784c03fe9fd5ac05-meta.json

@@ -1 +0,0 @@
-{"hash":"784c03fe9fd5ac05","duration":5298}

package/.turbo/cache/87219c41a4ace9cd-meta.json

@@ -1 +0,0 @@
-{"hash":"87219c41a4ace9cd","duration":19092}

package/.turbo/cache/993dff2edb7b6766-meta.json

@@ -1 +0,0 @@
-{"hash":"993dff2edb7b6766","duration":1110}

package/.turbo/cache/9a097d6576dadd64-meta.json

@@ -1 +0,0 @@
-{"hash":"9a097d6576dadd64","duration":1582}

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

@@ -1 +0,0 @@
-{"hash":"a63cbfecf0f78586","duration":10100}

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

@@ -1 +0,0 @@
-{"hash":"a6a56bb802e1c20f","duration":1720}

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

@@ -1 +0,0 @@
-{"hash":"b2c66328fdd78093","duration":930}

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

@@ -1 +0,0 @@
-{"hash":"d39e6ef95ebc4cc0","duration":21191}

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

@@ -1 +0,0 @@
-{"hash":"f411e2deb0676959","duration":4048}

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

@@ -1 +0,0 @@
-{"hash":"fbbe2704bf9cb90b","duration":2359}