@six-group/ui-library 0.0.0-insider.a358260 → 0.0.0-insider.d16ec8e

package/dist/collection/components/six-select/six-select.js

@@ -3,7 +3,7 @@ import { getTextContent, hasSlot } from '../../utils/slot';
 import FormControl from '../../functional-components/form-control/form-control';
 import { EventListeners } from '../../utils/event-listeners';
 import { debounce, DEFAULT_DEBOUNCE_FAST } from '../../utils/execution-control';
-import { getValue, isValidValue, isValueEmpty, valueEquals } from './util';
+import { isValueEmpty } from './util';
 let id = 0;
 /**
  * @since 1.0
@@ -68,8 +68,8 @@ export class SixSelect {
         this.value = hasDeselectedOptions ? checkedItems : [];
       }
     };
-    this.handleKeyDown = async (event) => {
-      var _a;
+    this.handleKeyDown = (event) => {
+      var _a, _b, _c, _d;
       const target = event.target;
       const items = this.getItems();
       const firstItem = items[0];
@@ -80,8 +80,8 @@ export class SixSelect {
       }
       // Tabbing out of the control closes it
       if (event.key === 'Tab') {
-        if (this.isOpen && this.dropdown != null) {
-          await this.dropdown.hide();
+        if (this.isOpen) {
+          (_a = this.dropdown) === null || _a === void 0 ? void 0 : _a.hide();
         }
         return;
       }
@@ -89,29 +89,46 @@ export class SixSelect {
       if (['ArrowDown', 'ArrowUp'].includes(event.key)) {
         event.preventDefault();
         // Show the menu if it's not already open
-        if (!this.isOpen && this.dropdown != null) {
-          await this.dropdown.show();
+        if (!this.isOpen) {
+          (_b = this.dropdown) === null || _b === void 0 ? void 0 : _b.show();
         }
         // Focus on a menu item
         if (event.key === 'ArrowDown' && firstItem) {
           firstItem.setFocus();
+          return;
         }
-        else if (event.key === 'ArrowUp' && lastItem) {
+        if (event.key === 'ArrowUp' && lastItem) {
           lastItem.setFocus();
+          return;
         }
       }
       // All other keys open the menu and initiate type to select
-      if (!this.isOpen && this.dropdown != null) {
+      if (!this.isOpen) {
         event.stopPropagation();
         event.preventDefault();
-        await this.dropdown.show();
-        await ((_a = this.menu) === null || _a === void 0 ? void 0 : _a.typeToSelect(event.key));
+        (_c = this.dropdown) === null || _c === void 0 ? void 0 : _c.show();
+        (_d = this.menu) === null || _d === void 0 ? void 0 : _d.typeToSelect(event.key);
       }
     };
     this.handleLabelClick = () => {
       var _a;
       (_a = this.box) === null || _a === void 0 ? void 0 : _a.focus();
     };
+    this.handleMenuSelect = (event) => {
+      const item = event.detail.item;
+      const getValue = () => {
+        if (this.multiple) {
+          return this.value.includes(item.value)
+            ? this.value.filter((v) => v !== item.value)
+            : [...this.value, item.value];
+        }
+        else {
+          return item.value;
+        }
+      };
+      this.value = getValue();
+      this.syncItemsFromValue();
+    };
     this.handleMenuShow = (event) => {
       var _a;
       if (this.disabled) {
@@ -131,7 +148,7 @@ export class SixSelect {
       this.hasHelpTextSlot = hasSlot(this.host, 'help-text');
       this.hasErrorTextSlot = hasSlot(this.host, 'error-text');
       this.hasLabelSlot = hasSlot(this.host, 'label');
-      this.update();
+      this.syncItemsFromValue();
     };
     this.handleTagInteraction = (event) => {
       // Don't toggle the menu when a tag's clear button is activated
@@ -178,97 +195,33 @@ export class SixSelect {
     this.inputDebounce = DEFAULT_DEBOUNCE_FAST;
     this.options = null;
     this.virtualScroll = false;
-    this.defaultValue = undefined;
+    this.defaultValue = this.multiple ? [] : '';
   }
   handleDisabledChange() {
-    if (this.disabled && this.isOpen && this.dropdown != null) {
-      this.dropdown.hide();
+    var _a;
+    if (this.disabled && this.isOpen) {
+      (_a = this.dropdown) === null || _a === void 0 ? void 0 : _a.hide();
     }
   }
   handleLabelChange() {
     this.handleSlotChange();
   }
   handleMultipleChange() {
-    this.update();
+    // Cast to array | string based on `this.multiple`
+    const value = this.getValueAsArray();
+    this.value = this.multiple ? value : value[0] || '';
+    this.syncItemsFromValue();
   }
-  handleValueChange(newValue, oldValue) {
-    var _a;
-    let items = (_a = this.options) !== null && _a !== void 0 ? _a : this.getItems();
-    // normalize invalid values. This will re-trigger this watch handler
-    if (!isValidValue(newValue, this.multiple, items)) {
-      this.value = getValue(newValue, this.multiple, items);
-      return;
+  handleValueChange() {
+    if (this.multiple && !Array.isArray(this.value)) {
+      this.value = [];
     }
-    // avoid re-triggering if old and new values are equal. Needed because
-    // watch does a shallow comparison only.
-    if (valueEquals(getValue(oldValue, this.multiple, items), getValue(newValue, this.multiple, items))) {
-      return;
+    if (!this.multiple && typeof this.value !== 'string') {
+      this.value = '';
     }
-    this.update();
-    this.sixChange.emit({ value: this.value, isSelected: true });
-  }
-  update() {
-    var _a;
-    const items = this.getItems();
-    this.value = getValue(this.value, this.multiple, (_a = this.options) !== null && _a !== void 0 ? _a : items);
-    if (!Array.isArray(this.value)) {
-      // Sync checked states
-      items.forEach((item) => (item.checked = false));
-      const item = items.find((item) => this.value.includes(item.value));
-      if (item != null) {
-        item.checked = true;
-      }
-      // Sync input element content
-      this.displayLabel = this.extractLabelForSelectedItem([this.value], items);
-      this.displayTags = [];
-      const hasSelection = !isValueEmpty(this.value);
-      if (hasSelection) {
-        this.touched = true;
-      }
-      if (this.inputElement && this.touched) {
-        if (!this.autocomplete) {
-          this.inputElement.value = hasSelection ? this.displayLabel : '';
-        }
-        else if (hasSelection) {
-          this.inputElement.value = this.value;
-        }
-        this.inputElement.checkValidity().then((valid) => (this.invalid = !valid));
-      }
-    }
-    else {
-      // Sync checked states
-      items.forEach((item) => (item.checked = this.value.includes(item.value)));
-      // Sync display label
-      const checkedItems = [];
-      this.value.forEach((val) => items.map((item) => (item.value === val ? checkedItems.push(item) : null)));
-      this.displayTags = checkedItems.map((item) => {
-        return (h("six-tag", { exportparts: "base:tag", type: "primary", size: this.size, pill: this.pill, clearable: true, onClick: this.handleTagInteraction, onKeyDown: this.handleTagInteraction, "onSix-tag-clear": (event) => {
-            event.stopPropagation();
-            if (!this.disabled) {
-              this.toggleItem(item);
-            }
-          } }, this.getItemLabel(item)));
-      });
-      if (this.maxTagsVisible > 0 && this.displayTags.length > this.maxTagsVisible) {
-        const total = this.displayTags.length;
-        this.displayLabel = '';
-        this.displayTags = this.displayTags.slice(0, this.maxTagsVisible);
-        this.displayTags.push(h("six-tag", { exportparts: "base:tag", type: "info", size: this.size }, "+", total - this.maxTagsVisible));
-      }
-      // Sync input element content
-      const hasSelection = !isValueEmpty(this.value);
-      if (hasSelection) {
-        this.touched = true;
-      }
-      if (this.inputElement && this.touched) {
-        if (!this.autocomplete) {
-          this.inputElement.value = hasSelection ? this.displayLabel : '';
-        }
-        else if (hasSelection) {
-          this.inputElement.value = this.value.join(',');
-        }
-        this.inputElement.checkValidity().then((valid) => (this.invalid = !valid));
-      }
+    this.syncItemsFromValue();
+    if (this.input) {
+      this.sixChange.emit({ value: this.value, isSelected: true });
     }
   }
   connectedCallback() {
@@ -280,25 +233,30 @@ export class SixSelect {
   }
   componentWillLoad() {
     this.handleSlotChange();
+    if (this.multiple && this.value != null) {
+      this.value = this.getValueAsArray();
+    }
   }
   componentDidLoad() {
-    const inputElement = this.inputElement;
-    if (inputElement == null) {
+    if (this.input == null)
       return;
-    }
+    const input = this.input;
     this.resizeObserver = new ResizeObserver(() => this.resizeMenu());
-    this.eventListeners.add(inputElement, 'invalid', async (event) => {
-      if (this.customValidation || (!this.hasErrorTextSlot && this.errorText === '' && this.customErrorText === '')) {
-        this.customErrorText = await inputElement.getValidationMessage();
+    // We need to do an initial sync after the component has rendered, so this will suppress the re-render warning
+    requestAnimationFrame(() => this.syncItemsFromValue());
+    this.eventListeners.add(this.input, 'invalid', async (event) => {
+      if (this.customValidation || (!this.hasErrorTextSlot && this.errorText == null && this.customErrorText == null)) {
+        this.customErrorText = await input.getValidationMessage();
       }
       event.preventDefault();
     });
-    this.eventListeners.add(inputElement, 'six-input-input', debounce((event) => {
-      const enteredValue = inputElement.value;
+    this.eventListeners.add(input, 'six-input-input', debounce((event) => {
+      const enteredValue = input.value;
       this.clearValues();
       this.sixChange.emit({ value: enteredValue, isSelected: false });
       event.stopPropagation();
     }, this.inputDebounce));
+    input.value = this.hasSelection() ? this.displayLabel : '';
   }
   disconnectedCallback() {
     var _a;
@@ -308,29 +266,30 @@ export class SixSelect {
   /** Checks for validity and shows the browser's validation message if the control is invalid. */
   async reportValidity() {
     var _a;
-    return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.reportValidity();
+    return (_a = this.input) === null || _a === void 0 ? void 0 : _a.reportValidity();
   }
   /** Checks for validity. */
   async checkValidity() {
     var _a;
-    return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.isValid();
+    return (_a = this.input) === null || _a === void 0 ? void 0 : _a.isValid();
   }
   /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */
   async setCustomValidity(message) {
+    if (this.input == null)
+      return;
     this.customErrorText = '';
     this.customValidation = message !== '';
-    if (this.inputElement != null) {
-      await this.inputElement.setCustomValidity(message);
-      this.invalid = !(await this.inputElement.checkValidity());
-    }
+    await this.input.setCustomValidity(message);
+    this.invalid = !(await this.input.checkValidity());
   }
   /** Resets the formcontrol */
   async reset() {
-    var _a;
-    this.clearValues();
+    if (this.input == null)
+      return;
+    this.value = this.defaultValue;
     this.customErrorText = '';
     this.customValidation = false;
-    await ((_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.setCustomValidity(''));
+    await this.input.setCustomValidity('');
     this.invalid = false;
   }
   getItemLabel(item) {
@@ -353,18 +312,59 @@ export class SixSelect {
   hasMenuItems() {
     return this.getItems().length > 0;
   }
+  getValueAsArray() {
+    const values = Array.isArray(this.value) ? this.value : [this.value];
+    // enforce that the values are converted to 'string' before the value is compared
+    return values.map(String);
+  }
   clearValues() {
     var _a;
     this.value = (_a = this.defaultValue) !== null && _a !== void 0 ? _a : (this.multiple ? [] : '');
-    this.update();
+    this.syncItemsFromValue();
   }
-  async resizeMenu() {
-    if (this.menu == null || this.box == null) {
+  resizeMenu() {
+    if (this.menu == null || this.box == null)
       return;
-    }
     this.menu.style.minWidth = `${this.box.clientWidth}px`;
     if (this.dropdown) {
-      await this.dropdown.reposition();
+      this.dropdown.reposition();
+    }
+  }
+  async syncItemsFromValue() {
+    const items = this.getItems();
+    const value = this.getValueAsArray();
+    // Sync checked states
+    items.forEach((item) => (item.checked = value.includes(item.value)));
+    // Sync display label
+    if (this.multiple) {
+      const checkedItems = [];
+      value.forEach((val) => items.map((item) => (item.value === val ? checkedItems.push(item) : null)));
+      this.displayTags = checkedItems.map((item) => {
+        return (h("six-tag", { exportparts: "base:tag", type: "primary", size: this.size, pill: this.pill, clearable: true, onClick: this.handleTagInteraction, onKeyDown: this.handleTagInteraction, "onSix-tag-clear": (event) => {
+            event.stopPropagation();
+            if (!this.disabled) {
+              item.checked = false;
+              this.syncValueFromItems();
+            }
+          } }, this.getItemLabel(item)));
+      });
+      if (this.maxTagsVisible > 0 && this.displayTags.length > this.maxTagsVisible) {
+        const total = this.displayTags.length;
+        this.displayLabel = '';
+        this.displayTags = this.displayTags.slice(0, this.maxTagsVisible);
+        this.displayTags.push(h("six-tag", { exportparts: "base:tag", type: "info", size: this.size }, "+", total - this.maxTagsVisible));
+      }
+    }
+    else {
+      this.displayLabel = this.extractLabelForSelectedItem(value, items);
+      this.displayTags = [];
+    }
+    if (!isValueEmpty(this.value)) {
+      this.touched = true;
+    }
+    if (this.touched && this.input != null) {
+      this.input.value = Array.isArray(this.value) ? this.value.join(',') : this.value;
+      this.invalid = !(await this.input.checkValidity());
     }
   }
   extractLabelForSelectedItem(value, items) {
@@ -378,34 +378,23 @@ export class SixSelect {
     const checkedItem = items.find((item) => item.value === value[0]);
     return checkedItem ? this.getItemLabel(checkedItem) : '';
   }
-  toggleItem(item) {
-    var _a;
-    const value = getValue(this.value, this.multiple, (_a = this.options) !== null && _a !== void 0 ? _a : this.getItems());
-    if (Array.isArray(value)) {
-      const itemFound = value.find((v) => v === item.value);
-      if (itemFound == null) {
-        this.value = [...this.value, item.value];
-      }
-      else {
-        this.value = value.filter((v) => v !== item.value);
-      }
-    }
-    else {
-      if (item.value === value) {
-        this.value = '';
-      }
-      else {
-        this.value = item.value;
-      }
-    }
+  syncValueFromItems() {
+    const items = this.getItems();
+    const checkedItems = items.filter((item) => item.checked);
+    const checkedValues = checkedItems.map((item) => item.value);
+    this.value = this.multiple
+      ? this.getValueAsArray().filter((val) => checkedValues.includes(val))
+      : checkedValues.length > 0
+        ? checkedValues[0]
+        : '';
   }
   displayError() {
     return this.invalid && (!this.errorOnBlur || (!this.hasFocus && !this.isOpen));
   }
   render() {
     var _a;
-    const hasSelection = !isValueEmpty(this.value);
-    return (h(FormControl, { inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, errorTextId: this.errorTextId, errorText: this.customErrorText != null ? this.customErrorText : this.errorText, hasErrorTextSlot: this.hasErrorTextSlot, size: this.size, onLabelClick: this.handleLabelClick, disabled: this.disabled, required: this.required, displayError: this.displayError() }, h("six-dropdown", { part: "base", ref: (el) => (this.dropdown = el), hoist: this.hoist, closeOnSelect: !this.multiple, containingElement: this.host, disableHideOnEnterAndSpace: this.autocomplete, class: {
+    const hasSelection = this.hasSelection();
+    return (h(FormControl, { inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, errorTextId: this.errorTextId, errorText: this.customErrorText != null && this.customErrorText !== '' ? this.customErrorText : this.errorText, hasErrorTextSlot: this.hasErrorTextSlot, size: this.size, onLabelClick: this.handleLabelClick, disabled: this.disabled, required: this.required, displayError: this.displayError() }, h("six-dropdown", { part: "base", ref: (el) => (this.dropdown = el), hoist: this.hoist, closeOnSelect: !this.multiple, containingElement: this.host, disableHideOnEnterAndSpace: this.autocomplete, class: {
         select: true,
         'select--open': this.isOpen,
         'select--empty': ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) === 0,
@@ -424,14 +413,17 @@ export class SixSelect {
         select__box: true,
         'select__box--line': this.line,
         'select__box--autocomplete': this.autocomplete,
-      }, role: "combobox", "aria-labelledby": this.labelId, "aria-describedby": this.helpTextId, "aria-haspopup": "true", "aria-expanded": this.isOpen ? 'true' : 'false', tabIndex: this.disabled ? -1 : 0, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown }, h("span", { class: "select__label" }, this.displayTags.length ? (h("span", { part: "tags", class: "select__tags" }, this.displayTags)) : (this.displayLabel || this.placeholder)), this.clearable && hasSelection && (h("six-icon-button", { exportparts: "base:clear-button", class: "select__clear", name: "clear", size: "small", onClick: this.handleClearClick, tabindex: "-1" })), this.hasMenuItems() && (h("span", { part: "icon", class: "select__icon" }, h("six-icon", { size: "medium" }, "expand_more"))), h("six-input", { ref: (el) => (this.inputElement = el), class: {
+      }, role: "combobox", "aria-labelledby": this.labelId, "aria-describedby": this.helpTextId, "aria-haspopup": "true", "aria-expanded": this.isOpen ? 'true' : 'false', tabIndex: this.disabled ? -1 : 0, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown }, h("span", { class: "select__label" }, this.displayTags.length > 0 ? (h("span", { part: "tags", class: "select__tags" }, this.displayTags)) : (this.displayLabel || this.placeholder)), this.clearable && hasSelection && (h("six-icon-button", { exportparts: "base:clear-button", class: "select__clear", name: "clear", size: "small", onClick: this.handleClearClick, tabindex: "-1" })), this.hasMenuItems() && (h("span", { part: "icon", class: "select__icon" }, h("six-icon", { size: "medium" }, "expand_more"))), h("six-input", { ref: (el) => (this.input = el), class: {
         select__input: true,
         'select__hidden-select': !this.autocomplete,
       }, "aria-hidden": "true", required: this.required, onInvalid: this.handleInvalid, onFocus: this.handleFocus, clearable: this.clearable, placeholder: this.placeholder, pill: this.pill, disabled: this.disabled, size: this.size, tabIndex: -1 })), h("six-menu", { ref: (el) => (this.menu = el), part: "menu", class: {
         select__menu: true,
         'select__menu--filtered': this.filter || this.asyncFilter,
         'select__menu--hidden': !this.hasMenuItems(),
-      }, "onSix-menu-item-selected": (event) => this.toggleItem(event.detail.item), items: this.options, virtualScroll: this.virtualScroll, "remove-box-shadow": true }, h("slot", { onSlotchange: this.handleSlotChange })))));
+      }, "onSix-menu-item-selected": this.handleMenuSelect, items: this.options, virtualScroll: this.virtualScroll, "remove-box-shadow": true }, h("slot", { onSlotchange: this.handleSlotChange })))));
+  }
+  hasSelection() {
+    return this.multiple ? this.value.length > 0 : this.value !== '';
   }
   static get is() { return "six-select"; }
   static get encapsulation() { return "shadow"; }
@@ -542,7 +534,7 @@ export class SixSelect {
         "mutable": false,
         "complexType": {
           "original": "string",
-          "resolved": "string",
+          "resolved": "string | undefined",
           "references": {}
         },
         "required": false,
@@ -865,7 +857,7 @@ export class SixSelect {
         "mutable": false,
         "complexType": {
           "original": "SixMenuItemData[] | null",
-          "resolved": "SixMenuItemData[]",
+          "resolved": "SixMenuItemData[] | null",
           "references": {
             "SixMenuItemData": {
               "location": "import",
@@ -903,7 +895,7 @@ export class SixSelect {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string | string[] | undefined",
+          "original": "string | string[]",
           "resolved": "string | string[]",
           "references": {}
         },
@@ -914,7 +906,8 @@ export class SixSelect {
           "text": "The default value the select will be reverted to when reset is executed"
         },
         "attribute": "default-value",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "this.multiple ? [] : ''"
       }
     };
   }
@@ -996,14 +989,14 @@ export class SixSelect {
     return {
       "reportValidity": {
         "complexType": {
-          "signature": "() => Promise<boolean>",
+          "signature": "() => Promise<boolean | undefined>",
           "parameters": [],
           "references": {
             "Promise": {
               "location": "global"
             }
           },
-          "return": "Promise<boolean>"
+          "return": "Promise<boolean | undefined>"
         },
         "docs": {
           "text": "Checks for validity and shows the browser's validation message if the control is invalid.",
@@ -1012,14 +1005,14 @@ export class SixSelect {
       },
       "checkValidity": {
         "complexType": {
-          "signature": "() => Promise<boolean>",
+          "signature": "() => Promise<boolean | undefined>",
           "parameters": [],
           "references": {
             "Promise": {
               "location": "global"
             }
           },
-          "return": "Promise<boolean>"
+          "return": "Promise<boolean | undefined>"
         },
         "docs": {
           "text": "Checks for validity.",