@descope/web-components-ui 1.0.255 → 1.0.257

package/dist/index.esm.js

@@ -7535,7 +7535,7 @@ const multiSelectComboBoxMixin = (superclass) =>
       }
     }
 
-    get allowCustomValue() {
+    get allowCustomValues() {
       return this.getAttribute('allow-custom-value') === 'true';
     }
 
@@ -7674,7 +7674,7 @@ const multiSelectComboBoxMixin = (superclass) =>
     }
 
     #handleCustomValues() {
-      if (this.allowCustomValue) {
+      if (this.allowCustomValues) {
         this.baseElement.addEventListener('custom-value-set', (e) => {
           const newItemHtml = this.#renderItem({
             label: e.detail,
@@ -7782,6 +7782,33 @@ const multiSelectComboBoxMixin = (superclass) =>
         const selectedChildren = this.baseElement.items?.filter((item) =>
           vals.includes(item['data-id'])
         );
+
+        // If the component allows custom values, we need to add the values that are not present in the children
+        if (this.allowCustomValues) {
+          const existingValues =
+            selectedChildren?.map((child) => child.getAttribute('data-id')) || [];
+          const missingValues = vals.filter((val) => !existingValues.includes(val));
+
+          if (missingValues.length) {
+            const newItemsHtml = missingValues.reduce((acc, val) => {
+              const newItemHtml = this.#renderItem({
+                label: val,
+                displayName: val,
+                value: val,
+              });
+              return acc + newItemHtml;
+            }, '');
+            this.innerHTML += newItemsHtml;
+
+            // The value needs to be set with a timeout because it needs to execute after
+            // the custom values are added to the items by the children change observer
+            setTimeout(() => {
+              this.value = vals;
+            }, 0);
+            return;
+          }
+        }
+
         const newSelectedValues =
           selectedChildren?.map((child) => child.getAttribute('data-id')) || [];
         if (!compareArraysUnordered(this.#value, newSelectedValues)) {
@@ -9786,7 +9813,7 @@ const compVars = ModalClass.cssVarList;
 
 const modal = {
   [compVars.overlayBackgroundColor]: globalRefs$4.colors.surface.light,
-  [compVars.overlayShadow]: 'none',
+  [compVars.overlayShadow]: globalRefs$4.shadow.wide['2xl'],
   [compVars.overlayWidth]: '700px',
 };