@descope/web-components-ui 1.0.249 → 1.0.251

package/dist/index.esm.js

@@ -42,6 +42,33 @@ const isUrl = (maybeUrl) => {
   }
 };
 
+/**
+ * Compares two arrays unorderedly.
+ * @param {Array} arr1 - The first array to compare.
+ * @param {Array} arr2 - The second array to compare.
+ * @returns {boolean} - Returns true if the arrays are equal unorderedly, false otherwise.
+ */
+const compareArraysUnordered = (arr1, arr2) => {
+  if (!Array.isArray(arr1) || !Array.isArray(arr2)) {
+    return false;
+  }
+
+  if (arr1.length !== arr2.length) {
+    return false;
+  }
+
+  const sortedArr1 = arr1.slice().sort();
+  const sortedArr2 = arr2.slice().sort();
+
+  for (let i = 0; i < sortedArr1.length; i++) {
+    if (sortedArr1[i] !== sortedArr2[i]) {
+      return false;
+    }
+  }
+
+  return true;
+};
+
 const DESCOPE_PREFIX = 'descope';
 const CSS_SELECTOR_SPECIFIER_MULTIPLY = 3;
 const BASE_THEME_SECTION = 'host';
@@ -7433,6 +7460,8 @@ const multiSelectComboBoxMixin = (superclass) =>
 
     #data;
 
+    #value = [];
+
     get defaultValues() {
       const defaultValuesAttr = this.getAttribute('default-values');
       if (defaultValuesAttr) {
@@ -7517,14 +7546,14 @@ const multiSelectComboBoxMixin = (superclass) =>
       if (template) this.innerHTML = template;
     }
 
-    handleSelectedItems() {
+    updateSelectedItems() {
+      // This is a list of all the selected items, including ones that may have been removed from the DOM
       const currentSelected =
         this.baseElement.selectedItems?.map((item) => item.getAttribute('data-id')) || [];
 
-      this.baseElement.selectedItems = [];
-
-      // if previously selected item ID exists in current children, set it as selected
+      // if there are selected items, we want to trigger a potential update to the value if some child elements were removed
       if (currentSelected.length > 0) {
+        // setting the value checks that the selected items are still in the DOM and will not set the value if they are not
         this.value = currentSelected;
       }
 
@@ -7593,7 +7622,7 @@ const multiSelectComboBoxMixin = (superclass) =>
 
         setTimeout(() => {
           // set timeout to ensure this runs after customValueTransformFn had the chance to be overriden
-          this.handleSelectedItems();
+          this.updateSelectedItems();
         }, 0);
       } else {
         this.baseElement.items = [];
@@ -7632,6 +7661,9 @@ const multiSelectComboBoxMixin = (superclass) =>
             value: e.detail,
           });
           this.innerHTML += newItemHtml;
+          // The internal filter needs to be removed, otherwise there's a bug where a new custom item
+          // added can't be removed from the dropdown because of how the vaadin component is implemented
+          this.baseElement._lastFilter = '';
           // The value needs to be set with a timeout because it needs to execute after
           // the custom value is added to items by the children change observer
           setTimeout(() => {
@@ -7666,6 +7698,15 @@ const multiSelectComboBoxMixin = (superclass) =>
         }
         return {};
       };
+
+      // This is required to override the default validity check of the vaadin component
+      // which is triggered when the component is checked for validity after blur
+      // Without this, our minItemsSelection and maxItemsSelection constraints will not be checked
+      const that = this;
+      // eslint-disable-next-line func-names
+      this.baseElement.checkValidity = () => {
+        return that.validity.valid;
+      };
     }
 
     init() {
@@ -7690,18 +7731,40 @@ const multiSelectComboBoxMixin = (superclass) =>
       forwardAttrs(this, this.baseElement, { includeAttrs: ['placeholder'] });
 
       this.setDefaultValues();
+
+      this.baseElement.addEventListener('selected-items-changed', () => {
+        this.#updateInternalValue();
+        this.dispatchEvent(new CustomEvent('input', { bubbles: true }));
+      });
     }
 
     setDefaultValues() {
-      this.value = this.defaultValues;
+      const initialDefaultValues = this.defaultValues;
+      if (initialDefaultValues.length > 0) {
+        this.value = this.defaultValues;
+      }
+    }
+
+    #updateInternalValue() {
+      // This is done here because we don't want to return a different copy of the same array
+      // every time get value is called if a new value wasn't set
+      this.#value =
+        this.baseElement.selectedItems?.map((elem) => elem.getAttribute('data-id')) || [];
     }
 
+    // Updating the value will update the selectedItems, which will trigger an event 'selected-items-changed'
+    // which we listen to in the init function to update the internal value
     set value(vals) {
       if (vals && vals.length > 0) {
-        const children = this.baseElement.items?.filter((item) => vals.includes(item['data-id']));
-
-        if (children?.length > 0) {
-          this.baseElement.selectedItems = children;
+        // Filters the children of the component to find the ones that match the values,
+        // since it's possible that some values that are trying to set are not in the children
+        const selectedChildren = this.baseElement.items?.filter((item) =>
+          vals.includes(item['data-id'])
+        );
+        const newSelectedValues =
+          selectedChildren?.map((child) => child.getAttribute('data-id')) || [];
+        if (!compareArraysUnordered(this.#value, newSelectedValues)) {
+          this.baseElement.selectedItems = selectedChildren;
         }
       } else {
         this.baseElement.selectedItems = [];
@@ -7709,7 +7772,7 @@ const multiSelectComboBoxMixin = (superclass) =>
     }
 
     get value() {
-      return this.baseElement.selectedItems.map((elem) => elem.getAttribute('data-id')) || [];
+      return this.#value;
     }
   };
 
@@ -7846,6 +7909,7 @@ const MultiSelectComboBoxClass = compose(
     },
   }),
   composedProxyInputMixin({ proxyProps: ['selectionStart'], inputEvent: 'selected-items-changed' }),
+  changeMixin,
   componentNameValidationMixin,
   multiSelectComboBoxMixin
 )(