@descope/web-components-ui 1.0.68 → 1.0.70

package/dist/index.esm.js

@@ -420,6 +420,57 @@ const draggableMixin = (superclass) =>
 		}
 	};
 
+const componentNameValidationMixin = (superclass) =>
+	class ComponentNameValidationMixinClass extends superclass {
+		#checkComponentName() {
+			const currentComponentName = this.shadowRoot.host.tagName.toLowerCase();
+
+			if (!superclass.componentName) {
+				throw Error(
+					`component name is not defined on super class, make sure you have a static get for "componentName"`
+				);
+			}
+
+			if (currentComponentName !== superclass.componentName) {
+				throw Error(
+					`component name mismatch, expected "${superclass.componentName}", current "${currentComponentName}"`
+				);
+			}
+		}
+
+		connectedCallback() {
+			super.connectedCallback?.();
+			if (this.shadowRoot.isConnected) {
+				this.#checkComponentName();
+			}
+		}
+	};
+
+const hoverableMixin =
+	(superclass) =>
+		class HoverableMixinClass extends superclass {
+			#boundOnMouseOver = this.#onMouseOver.bind(this)
+
+			#onMouseOver(e) {
+				this.setAttribute('hover', 'true');
+				e.target.addEventListener(
+					'mouseleave',
+					() => this.shadowRoot.host.removeAttribute('hover'),
+					{ once: true }
+				);
+			}
+
+			connectedCallback() {
+				super.connectedCallback?.();
+
+				const baseElement = this.shadowRoot.querySelector(
+					this.baseSelector
+				);
+
+				baseElement.addEventListener('mouseover', this.#boundOnMouseOver);
+			}
+		};
+
 const createBaseClass = ({ componentName, baseSelector = '' }) => {
   class DescopeBaseClass extends HTMLElement {
     static get componentName() {
@@ -829,57 +880,6 @@ const proxyInputMixin = (superclass) =>
 		}
 	};
 
-const componentNameValidationMixin = (superclass) =>
-	class ComponentNameValidationMixinClass extends superclass {
-		#checkComponentName() {
-			const currentComponentName = this.shadowRoot.host.tagName.toLowerCase();
-
-			if (!superclass.componentName) {
-				throw Error(
-					`component name is not defined on super class, make sure you have a static get for "componentName"`
-				);
-			}
-
-			if (currentComponentName !== superclass.componentName) {
-				throw Error(
-					`component name mismatch, expected "${superclass.componentName}", current "${currentComponentName}"`
-				);
-			}
-		}
-
-		connectedCallback() {
-			super.connectedCallback?.();
-			if (this.shadowRoot.isConnected) {
-				this.#checkComponentName();
-			}
-		}
-	};
-
-const hoverableMixin =
-	(superclass) =>
-		class HoverableMixinClass extends superclass {
-			#boundOnMouseOver = this.#onMouseOver.bind(this)
-
-			#onMouseOver(e) {
-				this.setAttribute('hover', 'true');
-				e.target.addEventListener(
-					'mouseleave',
-					() => this.shadowRoot.host.removeAttribute('hover'),
-					{ once: true }
-				);
-			}
-
-			connectedCallback() {
-				super.connectedCallback?.();
-
-				const baseElement = this.shadowRoot.querySelector(
-					this.baseSelector
-				);
-
-				baseElement.addEventListener('mouseover', this.#boundOnMouseOver);
-			}
-		};
-
 const events = [
   'blur',
   'focus',
@@ -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 = {