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

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

@@ -13,29 +13,22 @@ import { AuroDependencyVersioning } from '@aurodesignsystem/auro-library/scripts
 import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
 import AuroFormValidation from '@auro-formkit/form-validation';
 
-import { AuroDropdown } from '@auro-formkit/auro-dropdown';
+import { AuroDropdown } from '@aurodesignsystem/auro-dropdown';
 import dropdownVersion from './formkit/auro-dropdownVersion.js';
 
-import { AuroInput } from '@auro-formkit/auro-input';
+import { AuroInput } from '@aurodesignsystem/auro-input';
 import inputVersion from './formkit/auro-inputVersion.js';
 
+import {
+  arrayConverter,
+  arrayOrUndefinedHasChanged
+} from '@aurodesignsystem/auro-menu';
+
 // Import touch detection lib
 import styleCss from "./styles/style-css.js";
 
 // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
 /**
- * @prop {Object} optionSelected - Specifies the current selected option.
- * @prop {String} value - Value selected for the dropdown menu.
- * @prop {Boolean} checkmark - When attribute is present auro-menu will apply checkmarks to selected options.
- * @attr {Boolean} error - Sets a persistent error state (e.g. an error state returned from the server).
- * @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 {Boolean} disabled - If set, disables the combobox.
- * @attr {Boolean} noFilter - If set, combobox will not filter menuoptions based in input.
- * @attr {Boolean} noValidate - If set, disables auto-validation on blur.
- * @attr {Boolean} required - Populates the `required` attribute on the input. Used for client-side validation.
- * @attr {Boolean} triggerIcon - If set, the `icon` attribute will be applied to the trigger `auro-input` element.
- * @attr {String} type - Applies the defined value as the type attribute on auro-input.
  * @slot - Default slot for the menu content.
  * @slot label - Defines the content of the label.
  * @slot helpText - Defines the content of the helpText.
@@ -50,32 +43,10 @@ export class AuroCombobox extends LitElement {
 
     this.noFilter = false;
     this.validity = undefined;
-    this.value = null;
-    this.optionSelected = null;
+    this.value = undefined;
+    this.optionSelected = undefined;
 
     this.privateDefaults();
-
-    /**
-     * @private
-     */
-    this.validation = new AuroFormValidation();
-
-    /**
-     * @private
-     */
-    this.runtimeUtils = new AuroLibraryRuntimeUtils();
-
-    /**
-     * @private
-     */
-    this.isHiddenWhileLoading = false;
-
-    /**
-     * Generate unique names for dependency components.
-     */
-    const versioning = new AuroDependencyVersioning();
-    this.dropdownTag = versioning.generateTag('auro-dropdown', dropdownVersion, AuroDropdown);
-    this.inputTag = versioning.generateTag('auro-input', inputVersion, AuroInput);
   }
 
   /**
@@ -86,6 +57,17 @@ export class AuroCombobox extends LitElement {
     this.availableOptions = [];
     this.optionActive = null;
     this.msgSelectionMissing = 'Please select an option.';
+
+    this.validation = new AuroFormValidation();
+
+    this.runtimeUtils = new AuroLibraryRuntimeUtils();
+
+    this.isHiddenWhileLoading = false;
+
+    const versioning = new AuroDependencyVersioning();
+
+    this.dropdownTag = versioning.generateTag('auro-dropdown', dropdownVersion, AuroDropdown);
+    this.inputTag = versioning.generateTag('auro-input', inputVersion, AuroInput);
   }
 
   // This function is to define props used within the scope of this component
@@ -94,82 +76,123 @@ export class AuroCombobox extends LitElement {
   static get properties() {
     return {
       // ...super.properties,
-      error: {
-        type: Boolean,
-        reflect: true
-      },
-      setCustomValidity: {
-        type: String,
-        reflect: true
-      },
-      validity: {
+
+      /**
+       * An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported.
+       */
+      autocomplete: {
         type: String,
         reflect: true
       },
-      disabled: {
+
+      /**
+       * When attribute is present auro-menu will apply checkmarks to selected options.
+       */
+      checkmark: {
         type: Boolean,
         reflect: true
       },
-      noFilter: {
+
+      /**
+       * If set, disables the combobox.
+       */
+      disabled: {
         type: Boolean,
         reflect: true
       },
-      optionSelected: { type: Object },
-      noValidate: { type: Boolean },
-      required: {
-        type: Boolean,
+
+      /**
+       * When defined, sets persistent validity to `customError` and sets the validation message to the attribute value.
+       */
+      error: {
+        type: String,
         reflect: true
       },
-      triggerIcon: {
+
+      /**
+       * If set, combobox will not filter menuoptions based in input.
+       */
+      noFilter: {
         type: Boolean,
         reflect: true
       },
-      type: {
-        type: String,
-        reflect: true
+
+      /**
+       * If set, disables auto-validation on blur.
+       */
+      noValidate: {
+        type: Boolean
       },
-      value: {
-        type: String
+
+      /**
+       * Specifies the current selected option.
+       */
+      optionSelected: {
+        type: Object,
+        converter: arrayConverter,
+        hasChanged: arrayOrUndefinedHasChanged
       },
-      checkmark: {
+
+      /**
+       * Populates the `required` attribute on the input. Used for client-side validation.
+       */
+      required: {
         type: Boolean,
         reflect: true
       },
 
       /**
-       * @private
+       * Sets a custom help text message to display for all validityStates.
        */
-      availableOptions: { type: Array },
+      setCustomValidity: {
+        type: String
+      },
 
       /**
-       * @private
+       * Custom help text message to display when validity = `customError`.
        */
-      optionActive: { type: Object },
+      setCustomValidityCustomError: {
+        type: String
+      },
 
       /**
-       * @private
+       * Custom help text message to display when validity = `valueMissing`.
        */
-      msgSelectionMissing: { type: String },
+      setCustomValidityValueMissing: {
+        type: String
+      },
 
       /**
-       * @private
+       * If set, the `icon` attribute will be applied to the trigger `auro-input` element.
        */
-      dropdownElementName: { type: String },
+      triggerIcon: {
+        type: Boolean,
+        reflect: true
+      },
 
       /**
-       * @private
+       * Applies the defined value as the type attribute on auro-input.
        */
-      dropdownTag: { type: Object },
+      type: {
+        type: String,
+        reflect: true
+      },
 
       /**
-       * @private
+       * Specifies the `validityState` this element is in.
        */
-      inputElementName: { type: String },
+      validity: {
+        type: String,
+        reflect: true
+      },
 
       /**
-       * @private
+       * Value selected for the dropdown menu.
        */
-      inputTag: { type: Object }
+      value: {
+        converter: arrayConverter,
+        hasChanged: arrayOrUndefinedHasChanged
+      },
     };
   }
 
@@ -198,6 +221,33 @@ export class AuroCombobox extends LitElement {
     this.generateOptionsArray();
     this.availableOptions = [];
 
+    if (this.menu.optionSelected) {
+      // Get first option since combobox is single-select
+      const [selected] = this.menu.optionSelected;
+
+      if (!this.optionSelected || this.optionSelected[0] !== selected) {
+        // Store as array
+        this.optionSelected = [selected];
+      }
+
+      if (!this.value || this.value[0] !== selected.value) {
+        // Store as array
+        this.value = [selected.value];
+        // Menu already expects array
+        this.menu.value = this.value;
+      }
+
+      if (this.input.value !== selected.textContent) {
+        this.input.value = selected.textContent;
+      }
+
+      if (this.menu.matchWord !== this.input.value) {
+        this.menu.matchWord = this.input.value;
+      }
+
+      this.classList.add('combobox-filled');
+    }
+
     if (this.noFilter) {
       this.availableOptions = [...this.options];
     } else {
@@ -338,16 +388,16 @@ export class AuroCombobox extends LitElement {
 
     // handle the menu event for an option selection
     this.menu.addEventListener('auroMenu-selectedOption', () => {
-      // dropdown bib should hide when making a selection
-      this.hideBib();
-
       if (this.menu.optionSelected) {
-        if (this.optionSelected !== this.menu.optionSelected) {
-          this.optionSelected = this.menu.optionSelected;
+        const [selected] = this.menu.optionSelected;
+
+        if (!this.optionSelected || this.optionSelected[0] !== selected) {
+          this.optionSelected = [selected];
         }
 
-        if (this.value !== this.optionSelected.value) {
-          this.value = this.optionSelected.value;
+        if (!this.value || this.value[0] !== this.optionSelected[0].value) {
+          this.value = [this.optionSelected[0].value];
+          this.menu.value = this.value;
         }
 
         if (this.input.value !== this.optionSelected.textContent) {
@@ -369,6 +419,9 @@ export class AuroCombobox extends LitElement {
           composed: true,
         }));
       }
+
+      // dropdown bib should hide when making a selection
+      this.hideBib();
     });
 
     this.menu.addEventListener('auroMenu-customEventFired', () => {
@@ -380,13 +433,11 @@ export class AuroCombobox extends LitElement {
     });
 
     this.menu.addEventListener('auroMenu-selectValueFailure', () => {
-      this.optionSelected = undefined;
+      this.menu.clearSelection();
     });
 
     this.menu.addEventListener('auroMenu-selectValueReset', () => {
-      this.optionSelected = undefined;
-      this.value = undefined;
-      this.validation.validate(this);
+      this.reset();
     });
   }
 
@@ -407,64 +458,17 @@ export class AuroCombobox extends LitElement {
      */
     this.addEventListener('focusout', () => {
       if (document.activeElement !== this) {
-        this.validation.validate(this);
-      }
-
-      if (typeof this.value === 'object') {
-        this.value = '';
-      }
-    });
-
-    this.input.addEventListener('input', () => {
-      this.menu.matchWord = this.input.value;
-      this.optionActive = null;
-
-      if (this.value !== this.input.value) {
-        this.value = this.input.value;
-      }
-
-      if (this.value !== this.menu.value) {
-        this.menu.value = this.value;
-      }
-
-      if (this.optionSelected && this.input.value !== this.optionSelected.textContent) {
-        this.optionSelected = undefined;
-      }
-
-      this.menu.resetOptionsStates();
-
-      this.handleMenuOptions();
-
-      this.handleInputValueChange();
-      // validate only if the value was set programmatically
-      if (document.activeElement !== this) {
-        this.validation.validate(this);
+        this.validate();
       }
 
-      // hide the menu if the value is empty otherwise show if there are available suggestions
-      if (this.input.value && this.input.value.length === 0) {
-        this.hideBib();
-        this.classList.remove('combobox-filled');
-      } else if (!this.dropdown.isPopoverVisible && this.availableOptions) {
-        const hasFocus = this.contains(document.activeElement);
-
-        // if the focus is within the combobox, then show the bib
-        // this will prevent the bib from being shown while loading & presetting the value
-        if (hasFocus) {
-          this.showBib();
-        }
-
-        this.classList.add('combobox-filled');
-      }
-
-      // force the dropdown bib to hide if the input value has no matching suggestions
-      if (!this.availableOptions || this.availableOptions.length === 0) {
-        this.hideBib();
+      // Set to undefined if empty
+      if (this.value && this.value.length === 0) {
+        this.value = undefined;
       }
     });
 
     this.input.addEventListener('auroFormElement-validated', (evt) => {
-      this.auroInputHelpText = evt.detail.message;
+      this.errorMessage = evt.detail.message;
     });
   }
 
@@ -497,9 +501,15 @@ export class AuroCombobox extends LitElement {
    * @returns {void}
    */
   handleInputValueChange() {
-    if (this.value !== this.input.value) {
-      this.value = this.input.value;
+    this.menu.matchWord = this.input.value;
+    this.optionActive = null;
+
+    let hasChange = false;
 
+    // Store value as array or undefined
+    if (!this.value || this.value[0] !== this.input.value) {
+      this.value = this.input.value ? [this.input.value] : undefined;
+      hasChange = true;
       this.dispatchEvent(new CustomEvent('auroCombobox-valueSet', {
         bubbles: true,
         cancelable: false,
@@ -507,9 +517,47 @@ export class AuroCombobox extends LitElement {
       }));
     }
 
-    // This check prevents the component showing an error when a required datepicker is first rendered
-    if (this.input.value) {
-      this.validation.validate(this);
+    if (this.value !== this.menu.value) {
+      this.menu.value = this.value;
+      hasChange = true;
+    }
+
+    if (this.optionSelected && this.input.value !== this.optionSelected.textContent) {
+      this.optionSelected = undefined;
+      hasChange = true;
+    }
+
+    if (!hasChange) {
+      return;
+    }
+
+    this.menu.clearSelection();
+    this.handleMenuOptions();
+
+    // Validate only if the value was set programmatically
+    if (document.activeElement !== this) {
+      this.validate();
+    }
+
+    // Hide menu if value is empty, otherwise show if there are available suggestions
+    if (this.input.value && this.input.value.length === 0) {
+      this.hideBib();
+      this.classList.remove('combobox-filled');
+    } else if (!this.dropdown.isPopoverVisible && this.availableOptions) {
+      const hasFocus = this.contains(document.activeElement);
+
+      // If focus is within the combobox, show bib
+      // Prevent bib from being shown while loading & presetting the value
+      if (hasFocus) {
+        this.showBib();
+      }
+
+      this.classList.add('combobox-filled');
+    }
+
+    // Force dropdown bib to hide if input value has no matching suggestions
+    if (!this.availableOptions || this.availableOptions.length === 0) {
+      this.hideBib();
     }
   }
 
@@ -547,14 +595,18 @@ export class AuroCombobox extends LitElement {
 
       if (this.dropdown.isPopoverVisible) {
         if (evt.key === 'ArrowUp') {
-          this.menu.selectNextItem('up');
+          this.menu.navigateOptions('up');
         }
 
         if (evt.key === 'ArrowDown') {
-          this.menu.selectNextItem('down');
+          this.menu.navigateOptions('down');
         }
       }
     });
+
+    this.addEventListener('focusin', () => {
+      this.focus();
+    });
   }
 
   /**
@@ -608,25 +660,33 @@ export class AuroCombobox extends LitElement {
    * @returns {void}
    */
   reset() {
-    // Resets the help text of the combobox
-    this.auroInputHelpText = undefined;
-
     this.input.reset();
     this.validation.reset(this);
+    this.menu.value = undefined;
+  }
+
+  /**
+   * Validates value.
+   * @param {boolean} [force=false] - Whether to force validation.
+   */
+  validate(force = false) {
+    this.validation.validate(this, force);
   }
 
   updated(changedProperties) {
     // After the component is ready, send direct value changes to auro-menu.
     if (changedProperties.has('value')) {
       if (this.value) {
-        if (this.optionSelected && this.optionSelected.value === this.value) {
+        if (this.optionSelected && this.optionSelected[0] && this.optionSelected[0].value === this.value[0]) {
           // If value updates and the previously selected option already matches the new value
           // just update the input value to use the textContent of the optionSelected
-          this.input.value = this.optionSelected.textContent;
+          this.input.value = this.optionSelected[0].textContent;
         } else {
           // Otherwise just enter the value into the input
           this.optionSelected = undefined;
-          this.input.value = this.value;
+          // Use first value since combobox is single-select
+          const [inputValue] = this.value;
+          this.input.value = inputValue;
 
           // If the value got set programmatically make sure we hide the bib
           if (!this.contains(document.activeElement)) {
@@ -634,25 +694,20 @@ export class AuroCombobox extends LitElement {
           }
         }
       } else {
-        this.input.value = '';
-        this.menu.value = undefined;
+        this.reset();
       }
     }
 
     if (changedProperties.has('error')) {
       this.input.setAttribute('error', this.getAttribute('error'));
-      this.validation.validate(this);
-    }
-
-    if (changedProperties.has('setCustomValidity')) {
-      this.input.setAttribute('setCustomValidity', this.setCustomValidity);
+      this.validate();
     }
   }
 
   /**
    * Watch for slot changes and recalculate the menuoptions.
    * @private
-   * @param {Event} event - slotchange event
+   * @param {Event} event - `slotchange` event.
    * @returns {void}
    */
   handleSlotChange(event) {
@@ -700,19 +755,25 @@ export class AuroCombobox extends LitElement {
             ?noValidate="${this.noValidate}"
             ?disabled="${this.disabled}"
             ?icon="${this.triggerIcon}"
-            .type="${this.type}">
+            setCustomValidity="${this.setCustomValidity}"
+            setCustomValidityValueMissing="${this.setCustomValidityValueMissing}"
+            setCustomValidityCustomError="${this.setCustomValidityCustomError}"
+            .autocomplete="${this.autocomplete}"
+            .type="${this.type}"
+            @input="${this.handleInputValueChange}">
             <slot name="label" slot="label"></slot>
           </${this.inputTag}>
           <div class="menuWrapper">
           </div>
           <span slot="helpText">
-            ${this.auroInputHelpText
+          <!-- Help text and error message template -->
+            ${!this.validity || this.validity === undefined || this.validity === 'valid'
               ? html`
-                ${this.auroInputHelpText}
-              `
-              : html`
                 <slot name="helpText"></slot>
-              `
+              ` : html`
+                <p role="alert" aria-live="assertive" part="helpText">
+                  ${this.errorMessage}
+                </p>`
             }
           </span>
         </${this.dropdownTag}>

package/components/combobox/src/dropdownVersion.js

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

package/components/combobox/src/inputVersion.js

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