@descope/web-components-ui 1.0.68 → 1.0.69

package/dist/index.esm.js

@@ -1009,10 +1009,14 @@ const focusMixin = (superclass) => class FocusMixinClass extends superclass {
   }
 };
 
-const sanitizeSelector = (selector) => selector.replace(/[^\w\s]/gi, '');
+// this is needed because we might generate the same css vars names
+// e.g. "overlayColor" attribute in style mixin's mapping, 
+// will generate the same var as "color" attribute in portals's mapping 
+// when the portal name is "overlay".
+// because of that, we are adding this separator that is also used as a differentiator
+const DISPLAY_NAME_SEPARATOR = '_';
 
-const appendSuffixToKeys = (obj, suffix) => Object.keys(obj).reduce((acc, key) =>
-  Object.assign(acc, { [suffix + upperFirst(key)]: obj[key] }), {});
+const sanitizeSelector = (selector) => selector.replace(/[^\w\s]/gi, '');
 
 const getDomNode = (maybeDomNode) => maybeDomNode.host || maybeDomNode;
 
@@ -1027,7 +1031,7 @@ const portalMixin = ({ name, selector, mappings = {} }) => (superclass) => {
     static get cssVarList() {
       return {
         ...BaseClass.cssVarList,
-        ...createCssVarsList(superclass.componentName, appendSuffixToKeys(mappings, eleDisplayName))
+        [eleDisplayName]: createCssVarsList(kebabCaseJoin(superclass.componentName, DISPLAY_NAME_SEPARATOR + eleDisplayName), mappings)
       };
     }
 
@@ -1037,14 +1041,14 @@ const portalMixin = ({ name, selector, mappings = {} }) => (superclass) => {
       // we cannot use "this" before calling "super"
       const getRootElement = (that) => {
         const baseEle = that.shadowRoot.querySelector(that.baseSelector);
-        const portal = baseEle.shadowRoot.querySelector(selector);
+        const portal = selector ? baseEle.shadowRoot.querySelector(selector) : baseEle;
 
         return portal.shadowRoot || portal
       };
 
       super({
         getRootElement,
-        componentNameSuffix: eleDisplayName,
+        componentNameSuffix: DISPLAY_NAME_SEPARATOR + eleDisplayName,
         themeSection: PORTAL_THEME_PREFIX + eleDisplayName,
         baseSelector: ':host'
       });
@@ -3335,9 +3339,21 @@ const ComboBoxMixin = (superclass) => class ComboBoxMixinClass extends superclas
 		};
 	}
 
+	// the default vaadin behavior is to attach the overlay to the body when opened
+	// we do not want that because it's difficult to style the overlay in this way
+	// so we override it to open inside the shadow DOM
+	#overrideOverlaySettings() {
+		const overlay = this.baseElement.shadowRoot.querySelector('vaadin-combo-box-overlay');
+
+		overlay._attachOverlay = function () { this.bringToFront(); };
+		overlay._detachOverlay = function () { };
+		overlay._enterModalState = function () { };
+	}
+
 	connectedCallback() {
 		super.connectedCallback?.();
 
+		this.#overrideOverlaySettings();
 		observeChildren(this, this.#onChildrenChange.bind(this));
 	}
 };
@@ -3355,15 +3371,17 @@ const ComboBox = compose(
 			borderWidth: input,
 			cursor: toggle,
 			height: input,
+			// overlayBackground: { property: () => ComboBox.cssVarList.overlay.backgroundColor },
+			// overlayBorder: { property: () => ComboBox.cssVarList.overlay.border }
 		}
 	}),
 	draggableMixin,
 	portalMixin({
 		name: 'overlay',
-		selector: 'vaadin-combo-box-scroller',
+		selector: '',
 		mappings: {
-			border: { selector: () => '::slotted(*)' },
-			backgroundColor: {},
+			// border: { selector: 'vaadin-combo-box-scroller' },
+			// backgroundColor: { selector: 'vaadin-combo-box-item' },
 		}
 	}),
 	proxyInputMixin,
@@ -3400,15 +3418,8 @@ const comboBox = {
 	[vars.borderWidth]: '0',
 	[vars.cursor]: 'pointer',
 	[vars.padding]: '0',
-
-	'@overlay': {
-		[vars.overlayBackgroundColor] : 'red',
-		[vars.overlayBorder]: '3px solid blue',
-
-		_hover: {
-			[vars.overlayBackgroundColor] : 'blue',
-		}
-	}
+	// [vars.overlayBackground]: 'blue',
+	// [vars.overlayBorder]: '3px solid red',
 };
 
 var components = {