@descope/web-components-ui 1.0.70 → 1.0.71

package/src/mixins/changeMixin.js

@@ -1,47 +1,21 @@
-import { createDispatchEvent } from "../helpers/mixinsHelpers";
+import { createDispatchEvent, createEventListener } from "../helpers/mixinsHelpers";
 
 export const changeMixin = (superclass) => class ChangeMixinClass extends superclass {
-
-  #boundedHandleChange
-  #boundedHandleBlur  
-  
-  #removeChangeListener
-  #removeBlurListener
-
   #dispatchChange = createDispatchEvent.bind(this, 'change')
 
-  constructor() {
-    super();
-
-    this.#boundedHandleChange = this.#handleChange.bind(this);
-    this.#boundedHandleBlur = this.#handleBlur.bind(this);
-  }
-
-  #handleChange(e) {
-    // we want to listen only to browser events 
-    // and not to events we are dispatching
-    if (e.isTrusted) {
-      // we want to control the change events that dispatched by the component
-      // so we are stopping propagation and handling it in handleBlur
-      e.stopPropagation()
-    }
-  }
-
-  #handleBlur() {
-    // on blur, we want to dispatch a change event
-    this.#dispatchChange()
-  }
-
   connectedCallback() {
     super.connectedCallback?.();
-
-    this.#removeChangeListener = addEventListener.bind()
-    this.addEventListener('change', this.#boundedHandleChange, true)
-    this.addEventListener('blur', this.#boundedHandleBlur)
-  }
-
-  disconnectedCallback() {
-    this.removeEventListener('change', this.#boundedHandleChange)
-    this.removeEventListener('blur', this.#boundedHandleBlur)
+    this.prevValue = this.value
+
+    createEventListener.call(this, 'change', (e) => {
+      e.stopPropagation();
+    })
+
+    createEventListener.call(this, 'blur', () => {
+      if (this.value !== this.prevValue) {
+        this.#dispatchChange()
+        this.prevValue = this.value
+      }
+    })
   }
 }

package/src/mixins/componentNameValidationMixin.js

@@ -1,7 +1,7 @@
 export const componentNameValidationMixin = (superclass) =>
 	class ComponentNameValidationMixinClass extends superclass {
 		#checkComponentName() {
-			const currentComponentName = this.shadowRoot.host.tagName.toLowerCase();
+			const currentComponentName = this.localName;
 
 			if (!superclass.componentName) {
 				throw Error(
@@ -18,8 +18,6 @@ export const componentNameValidationMixin = (superclass) =>
 
 		connectedCallback() {
 			super.connectedCallback?.();
-			if (this.shadowRoot.isConnected) {
-				this.#checkComponentName();
-			}
+			this.#checkComponentName();
 		}
 	};

package/src/mixins/createProxy.js

@@ -1,6 +1,7 @@
 import { createBaseClass } from '../baseClasses/createBaseClass';
 import { isFunction } from '../helpers';
 import { forwardProps, syncAttrs } from '../helpers/componentHelpers';
+import { createDispatchEvent, createEventListener } from '../helpers/mixinsHelpers';
 
 export const createProxy = ({
 	componentName,
@@ -11,71 +12,62 @@ export const createProxy = ({
 	includeAttrsSync = [],
 	includeForwardProps = []
 }) => {
-	const template = `
-		<style id="create-proxy"></style>
-		<${wrappedEleName}>
-		<slot></slot>
-		${slots.map((slot) => `<slot name="${slot}" slot="${slot}"></slot>`).join('')}
-		</${wrappedEleName}>
-	`;
-
 	class ProxyClass extends createBaseClass({ componentName, baseSelector: wrappedEleName }) {
-		constructor() {
-			super().attachShadow({ mode: 'open' }).innerHTML = template;
-			this.hostElement = this.shadowRoot.host;
-			this.shadowRoot.getElementById('create-proxy').innerHTML =
-				isFunction(style) ? style() : style;
-		}
-
-		#boundOnFocus = this.#onFocus.bind(this);
+		#dispatchBlur = createDispatchEvent.bind(this, 'blur')
+		#dispatchFocus = createDispatchEvent.bind(this, 'focus')
 
-		// we want to focus on the proxy element when focusing our WCP
-		#onFocus() {
-			this.proxyElement.focus();
+		constructor() {
+			super().attachShadow({ mode: 'open' }).innerHTML = `
+			<style id="create-proxy">${isFunction(style) ? style() : style
+				}</style>
+			<${wrappedEleName}>
+			<slot></slot>
+			${slots.map((slot) => `<slot name="${slot}" slot="${slot}"></slot>`).join('')}
+			</${wrappedEleName}>
+		`;
 		}
 
-		focus = this.#onFocus
+		focus = () => this.baseElement.focus()
 
 		connectedCallback() {
-			if (this.shadowRoot.isConnected) {
-				this.proxyElement = this.shadowRoot.querySelector(wrappedEleName);
-
-				this.addEventListener('focus', this.#boundOnFocus);
+			super.connectedCallback?.();
 
-				// this is needed for components that uses props, such as combo box
-				forwardProps(this.hostElement, this.proxyElement, includeForwardProps)
+			createEventListener.call(this, 'blur', (e) => {
+				this.#dispatchBlur()
+			}, { element: this.baseElement })
 
-				// `onkeydown` is set on `proxyElement` support proper tab-index navigation
-				// this support is needed since both proxy host and element catch `focus`/`blur` event
-				// which causes faulty behavior.
-				// we need this to happen only when the proxy component is in the light DOM, 
-				// otherwise it will focus the nested proxy element
-				this.proxyElement.onkeydown = (e) => {
-					if (e.shiftKey && e.keyCode === 9 && this.getRootNode() === document) {
-						this.removeAttribute('tabindex');
-						// We want to defer the action of setting the tab index back
-						// so it will happen after focusing the previous element
-						setTimeout(() => this.setAttribute('tabindex', '0'), 0);
-					}
-				};
+			createEventListener.call(this, 'focus', (e) => {
+				this.#dispatchFocus()
+			}, { element: this.baseElement })
 
-				syncAttrs(this.proxyElement, this.hostElement, {
-					excludeAttrs: excludeAttrsSync,
-					includeAttrs: includeAttrsSync
-				});
-			}
-		}
+			createEventListener.call(this, 'focus', (e) => {
+				// if we got a focus event we want to focus the proxy element
+				if (e.isTrusted) {
+					this.focus();
+				}
+			})
 
-		attributeChangedCallback() {
-			if (!this.proxyElement) {
-				return;
-			}
-		}
+			// this is needed for components that uses props, such as combo box
+			forwardProps(this, this.baseElement, includeForwardProps)
 
-		disconnectedCallback() {
-			super.disconnectedCallback?.()
+			// `onkeydown` is set on `baseElement` support proper tab-index navigation
+			// this support is needed since both proxy host and element catch `focus`/`blur` event
+			// which causes faulty behavior.
+			// we need this to happen only when the proxy component is in the light DOM, 
+			// otherwise it will focus the nested proxy element
+			this.baseElement.onkeydown = (e) => {
+				if (e.shiftKey && e.keyCode === 9 && this.getRootNode() === document) {
+					this.removeAttribute('tabindex');
+					// We want to defer the action of setting the tab index back
+					// so it will happen after focusing the previous element
+					setTimeout(() => this.setAttribute('tabindex', '0'), 0);
+				}
+			};
 
-			this.removeEventListener('focus', this.#boundOnFocus);
+			syncAttrs(this.baseElement, this, {
+				excludeAttrs: excludeAttrsSync,
+				includeAttrs: includeAttrsSync
+			});
 		}
 	}
 

package/src/mixins/createStyleMixin/index.js

@@ -131,6 +131,8 @@ export const createStyleMixin =
 			}
 
 			disconnectedCallback() {
+				super.disconnectedCallback?.();
+
 				this.#disconnectThemeManager?.();
 			}
 		};

package/src/mixins/focusMixin.js

@@ -1,130 +1,25 @@
-import { upperFirst } from "../helpers";
-
-const events = [
-  'blur',
-  'focus',
-  'focusin',
-  'focusout',
-]
+import { createEventListener } from "../helpers/mixinsHelpers"
 
 export const focusMixin = (superclass) => class FocusMixinClass extends superclass {
-  #isFocused = false
-  #setFocusTimer
-
-  #boundedHandleFocus
-  #boundedHandleBlur
-  #boundedHandleFocusIn
-  #boundedHandleFocusOut
-
-  constructor() {
-    super();
-
-    for (const event of events) {
-      this[`dispatch${upperFirst(event)}`] = function () {
-        this.dispatchInputEvent(event)
-      }
-    }
-
-    this.#boundedHandleFocus = this.#handleFocus.bind(this);
-    this.#boundedHandleBlur = this.#handleBlur.bind(this);
-    this.#boundedHandleFocusIn = this.#handleFocusIn.bind(this);
-    this.#boundedHandleFocusOut = this.#handleFocusOut.bind(this);
-  }
-
-  #handleFocus(e) {
-    if (this.isReadOnly) {
-      e.stopPropagation()
-      return
-    }
-    // we want to listen only to browser events 
-    // and not to events we are dispatching
-    if (e.isTrusted) { // TODO: check if this is needed, because Vaadin is also dispatching events
-      // we want to control the focus events that dispatched by the component
-      // so we are stopping propagation and handling it in setFocus
-      e.stopPropagation()
-      this.setFocus(true)
-
-      // if the focus event is on the root component (and not on the inner components)
-      // we want to notify the component and let it decide what to do with it
-      if (e.target === this) {
-        this.onFocus(e)
-      }
-    }
-  }
-
-  #handleFocusOut(e) {
-    // we want to listen only to browser events 
-    // and not to events we are dispatching
-    if (e.isTrusted) {
-      // we want to control the focus events that dispatched by the component
-      // so we are stopping propagation and handling it in setFocus
-      e.stopPropagation()
-    }
-  }
-
-  #handleFocusIn(e) {
-    // we want to listen only to browser events 
-    // and not to events we are dispatching
-    if (e.isTrusted) {
-      // we want to control the focus events that dispatched by the component
-      // so we are stopping propagation and handling it in setFocus
-      e.stopPropagation()
-    }
-  }
-
-  #handleBlur(e) {
-    if (e.isTrusted) {
-      e.stopPropagation()
-      this.setFocus(false)
-    }
-  }
-
-  get isReadOnly() {
-    return this.hasAttribute('readonly') && this.getAttribute('readonly') !== 'false'
-  }
-
-  // we want to debounce the calls to this fn
-  // so we can support input like components with multiple inputs inside
-  setFocus(isFocused) {
-    clearTimeout(this.#setFocusTimer)
-
-    this.#setFocusTimer = setTimeout(() => {
-      if (this.#isFocused !== isFocused) {
-        this.#isFocused = isFocused
-        if (isFocused) {
-          this.dispatchFocus();
-          this.dispatchFocusin();
-        }
-        else {
-          this.dispatchBlur()
-          this.dispatchFocusout();
-        }
-      }
-    })
-  }
-
-  onFocus() {
-    console.warn('onFocus', 'is not implemented')
-  }
-
-  dispatchInputEvent(eventName) {
-    this[`on${eventName}`]?.(); // in case we got an event callback as property
-    this.dispatchEvent(new InputEvent(eventName));
-  }
-
+  // we want to block all native events, 
+  // so the input can control when to dispatch it based on its internal behavior
   connectedCallback() {
-    super.connectedCallback?.();
-
-    this.addEventListener('focus', this.#boundedHandleFocus, true)
-    this.addEventListener('blur', this.#boundedHandleBlur, true)
-    this.addEventListener('focusin', this.#boundedHandleFocusIn)
-    this.addEventListener('focusout', this.#boundedHandleFocusOut)
-  }
-
-  disconnectedCallback() {
-    this.removeEventListener('focus', this.#boundedHandleFocus)
-    this.removeEventListener('blur', this.#boundedHandleBlur)
-    this.removeEventListener('focusin', this.#boundedHandleFocusIn)
-    this.removeEventListener('focusout', this.#boundedHandleFocusOut)
+		super.connectedCallback?.();
+		
+    createEventListener.call(this, 'blur', (e) => {
+			e.isTrusted && e.stopImmediatePropagation()
+		})
+
+		createEventListener.call(this, 'focus', (e) => {
+			e.isTrusted && e.stopImmediatePropagation();
+		})
+
+		createEventListener.call(this, 'focusout', (e) => {
+			e.isTrusted && e.stopImmediatePropagation();
+		})
+
+		createEventListener.call(this, 'focusin', (e) => {
+			e.isTrusted && e.stopImmediatePropagation();
+		})
   }
 }

package/src/mixins/hoverableMixin.js

@@ -1,24 +1,18 @@
+import { createEventListener } from "../helpers/mixinsHelpers";
+
 export 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);
+				createEventListener.call(this, 'mouseover', (e) => {
+					this.setAttribute('hover', 'true');
+					e.target.addEventListener(
+						'mouseleave',
+						() => this.removeAttribute('hover'),
+						{ once: true }
+					);
+				}, { element: this.baseElement })
 			}
 		};

package/src/mixins/index.js

@@ -8,3 +8,4 @@ export { focusMixin } from './focusMixin'
 export { inputValidationMixin } from './inputValidationMixin'
 export { portalMixin } from './portalMixin'
 export { changeMixin } from './changeMixin'
+export { normalizeBooleanAttributesMixin } from './normalizeBooleanAttributesMixin'

package/src/mixins/inputValidationMixin.js

@@ -1,4 +1,4 @@
-import { createDispatchEvent } from "../helpers/mixinsHelpers";
+import { createEventListener } from "../helpers/mixinsHelpers";
 
 const observedAttributes = [
   'required',
@@ -21,19 +21,12 @@ export const inputValidationMixin = (superclass) => class InputValidationMixinCl
     return true;
   }
 
-  #dispatchValid = createDispatchEvent.bind(this, 'valid')
-  #dispatchInvalid = createDispatchEvent.bind(this, 'invalid')
-
   #internals
 
-  #boundedHandleInput
-
   constructor() {
     super();
 
     this.#internals = this.attachInternals();
-
-    this.#boundedHandleInput = this.#handleInput.bind(this);
   }
 
   get defaultErrorMsgValueMissing() {
@@ -59,7 +52,7 @@ export const inputValidationMixin = (superclass) => class InputValidationMixinCl
     }
   }
 
-  setValidity() {
+  #setValidity() {
     const validity = this.getValidity()
     this.#internals.setValidity(validity, this.getErrorMessage(validity))
   }
@@ -89,7 +82,7 @@ export const inputValidationMixin = (superclass) => class InputValidationMixinCl
       this.#internals.setValidity({ customError: true }, errorMessage)
     } else {
       this.#internals.setValidity({})
-      this.setValidity()
+      this.#setValidity()
     }
   }
 
@@ -101,37 +94,24 @@ export const inputValidationMixin = (superclass) => class InputValidationMixinCl
     return this.getAttribute('pattern')
   }
 
-  #handleInput() {
-    this.setValidity()
-    this.handleDispatchValidationEvents()
+  get form() {
+    return this.#internals.form
   }
 
   attributeChangedCallback(attrName, oldValue, newValue) {
     super.attributeChangedCallback?.(attrName, oldValue, newValue);
 
     if (observedAttributes.includes(attrName)) {
-      this.setValidity();
-    }
-  }
-
-  handleDispatchValidationEvents() {
-    if (this.checkValidity()) {
-      this.#dispatchValid()
-    } else {
-      this.#dispatchInvalid()
+      this.#setValidity();
     }
   }
 
   connectedCallback() {
     super.connectedCallback?.();
+    createEventListener.call(this, 'change', this.#setValidity)
+    createEventListener.call(this, 'invalid', (e) => e.stopPropagation())
+    createEventListener.call(this, 'input', this.#setValidity)
 
-    this.addEventListener('input', this.#boundedHandleInput)
-
-    this.setValidity();
-    this.handleDispatchValidationEvents();
-  }
-
-  disconnectedCallback() {
-    this.removeEventListener('input', this.#boundedHandleInput)
+    this.#setValidity();
   }
 }

package/src/mixins/normalizeBooleanAttributesMixin.js

@@ -0,0 +1,11 @@
+// we want all the valueless attributes to have "true" value 
+export const normalizeBooleanAttributesMixin = (superclass) => class NormalizeBooleanAttributesMixinClass extends superclass {
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    if (newValue === '') {
+      this.setAttribute(attrName, 'true')
+      newValue = 'true'
+    }
+
+    super.attributeChangedCallback?.(attrName, oldValue, newValue)
+  }
+}

package/src/mixins/proxyInputMixin.js

@@ -1,3 +1,4 @@
+import { createDispatchEvent, createEventListener } from "../helpers/mixinsHelpers";
 import { inputValidationMixin } from "./inputValidationMixin";
 
 const errorAttrs = ['invalid', 'has-error-message'];
@@ -36,26 +37,17 @@ export const proxyInputMixin = (superclass) =>
 
 		#inputElement
 
-		#boundHandleFocus
-		#boundHandleInvalid
-		#boundHandleValid
+		#dispatchChange = createDispatchEvent.bind(this, 'change')
 
 		constructor() {
 			super();
 
 			this.#inputElement = super.inputElement
-
-			this.#boundHandleFocus = this.#handleFocus.bind(this);
-			this.#boundHandleInvalid = this.#handleInvalid.bind(this);
-			this.#boundHandleValid = this.#handleValid.bind(this);
-
-			this.baseEle = this.shadowRoot.querySelector(this.baseSelector);
-
 		}
 
 		get inputElement() {
-			const inputSlot = this.baseEle.shadowRoot.querySelector('slot[name="input"]')
-			const textAreaSlot = this.baseEle.shadowRoot.querySelector('slot[name="textarea"]')
+			const inputSlot = this.baseElement.shadowRoot.querySelector('slot[name="input"]')
+			const textAreaSlot = this.baseElement.shadowRoot.querySelector('slot[name="textarea"]')
 
 			this.#inputElement ??= getNestedInput(inputSlot) || getNestedInput(textAreaSlot)
 
@@ -74,7 +66,6 @@ export const proxyInputMixin = (superclass) =>
 
 		reportValidityOnInternalInput() {
 			setTimeout(() => {
-				this.baseEle.focus() //TODO: check if this is needed
 				this.inputElement.reportValidity()
 			})
 		}
@@ -87,72 +78,74 @@ export const proxyInputMixin = (superclass) =>
 			}
 		}
 
-		setInternalInputErrorMessage() {
-			if (!this.checkValidity()) {
+		handleInternalInputErrorMessage() {
+			if (!this.inputElement.checkValidity()) {
 				this.inputElement.setCustomValidity(this.validationMessage)
 			}
 		}
 
-		// when clicking on the form submit button and the input is invalid
-		// we want it to appear as invalid
-		#handleFocus(e) {
-			if (e.relatedTarget?.form) {
-				if (!this.checkValidity()) {
-					this.setAttribute('invalid', 'true');
-				}
-
-				if (this.hasAttribute('invalid')) {
-					this.reportValidityOnInternalInput()
-				}
-			}
-		}
-
-		#handleInvalid() {
-			this.setInternalInputErrorMessage()
+		#handleErrorMessage() {
+			this.handleInternalInputErrorMessage()
 			this.setAttribute('error-message', this.validationMessage)
 		}
 
-		#handleValid() {
-			this.removeAttribute('invalid')
-		}
-
 		connectedCallback() {
 			super.connectedCallback?.();
 
-			// this is our way to identify that the form was submitted
-			// in this case, we want the input to be in error state if it's not valid
-			this.addEventListener('focus', this.#boundHandleFocus)
+			createEventListener.call(this, 'input', (e) => {
+				if (!this.inputElement.checkValidity()) {
+					this.inputElement.setCustomValidity('')
+					// after updating the input validity we want to trigger set validity on the wrapping element
+					// so we will get the updated validity
+					this.setCustomValidity('')
+
+					// Vaadin is getting the input event before us, 
+					// so in order to make sure they use the updated validity
+					// we calling their fn after updating the input validity
+					this.baseElement.__onInput(e)
+
+					this.#handleErrorMessage()
+				}
+			}, { element: this.inputElement })
 
-			this.addEventListener('invalid', this.#boundHandleInvalid)
-			this.addEventListener('valid', this.#boundHandleValid)
+			createEventListener.call(this, 'change', () => {
+				this.#dispatchChange()
+			}, { element: this.baseElement })
 
-			this.addEventListener('input', () => {
-				this.inputElement.setCustomValidity('')
-				if (!this.inputElement.checkValidity())
-					this.setInternalInputErrorMessage()
+			createEventListener.call(this, 'blur', () => {
+				if (!this.checkValidity()) {
+					this.setAttribute('invalid', 'true')
+					this.#handleErrorMessage()
+				}
 			})
 
+			createEventListener.call(this, 'focus', (e) => {
+				// when clicking on the form submit button and the input is invalid
+				// we want it to appear as invalid
+				if (e.relatedTarget?.form === this.form) {
+					if (!this.checkValidity()) {
+						this.setAttribute('invalid', 'true');
+					}
+
+					if (this.hasAttribute('invalid')) {
+						this.reportValidityOnInternalInput()
+					}
+				}
+			})
+
+			createEventListener.call(this, 'invalid', this.#handleErrorMessage)
+
+			this.handleInternalInputErrorMessage()
+
 			// this is needed in order to make sure the form input validation is working
+			// we do not want it to happen when the component is nested
 			if (!this.hasAttribute('tabindex') && this.getRootNode() === document) {
 				this.setAttribute('tabindex', 0);
 			}
 
 			// sync properties
 			propertyObserver(this, this.inputElement, 'value');
+			propertyObserver(this, this.inputElement, 'selectionStart');
 			this.setSelectionRange = this.inputElement.setSelectionRange?.bind(this.inputElement);
 		}
-
-		disconnectedCallback() {
-			this.removeEventListener('focus', this.#boundHandleFocus)
-			this.removeEventListener('invalid', this.#boundHandleInvalid)
-			this.removeEventListener('valid', this.#boundHandleValid)
-		}
-
-		attributeChangedCallback(attrName, oldValue, newValue) {
-			super.attributeChangedCallback?.(attrName, oldValue, newValue);
-
-			if (attrName === 'invalid' && newValue === '') {
-				this.setAttribute('invalid', 'true')
-			}
-		}
 	};