@descope/web-components-ui 1.0.135 → 1.0.148

package/src/mixins/normalizeBooleanAttributesMixin.js

@@ -1,4 +1,4 @@
-import { observeAttributes } from "../helpers/componentHelpers";
+import { observeAttributes } from '../helpers/componentHelpers';
 
 const booleanAttributesList = [
   'readonly',
@@ -16,31 +16,39 @@ const booleanAttributesList = [
   'focus-ring',
   'opened',
   'active',
-  'password-visible'
-]
+  'password-visible',
+];
 
 const isBooleanAttribute = (attr) => {
-  return booleanAttributesList.includes(attr)
-}
+  return booleanAttributesList.includes(attr);
+};
 // we want all the valueless attributes to have "true" value
 // and all the falsy attribute to be removed
-export const normalizeBooleanAttributesMixin = (superclass) => class NormalizeBooleanAttributesMixinClass extends superclass {
-  init() {
-    super.init?.();
+export const normalizeBooleanAttributesMixin = (superclass) =>
+  class NormalizeBooleanAttributesMixinClass extends superclass {
+    init() {
+      super.init?.();
 
-    observeAttributes(this, (attrs) =>
-      attrs.forEach(attr => {
-        const attrVal = this.getAttribute(attr)
+      observeAttributes(
+        this,
+        (attrs) =>
+          attrs.forEach((attr) => {
+            const attrVal = this.getAttribute(attr);
 
-        if (isBooleanAttribute(attr)) {
-          if (attrVal === '') {
-            this.setAttribute(attr, 'true')
-          } else if (attrVal === 'false') {
-            this.removeAttribute(attr)
-          }
-        } else if (!attrVal) {
-          console.warn(`attribute "${attr}" has no value, should it be added to the boolean attributes list?`)
-        }
-      }), {})
-  }
-}
+            if (isBooleanAttribute(attr)) {
+              if (attrVal === '') {
+                this.setAttribute(attr, 'true');
+              } else if (attrVal === 'false') {
+                this.removeAttribute(attr);
+              }
+            } else if (!attrVal) {
+              // eslint-disable-next-line no-console
+              console.warn(
+                `attribute "${attr}" has no value, should it be added to the boolean attributes list?`
+              );
+            }
+          }),
+        {}
+      );
+    }
+  };

package/src/mixins/portalMixin.js

@@ -1,71 +1,77 @@
-import { PORTAL_THEME_PREFIX } from "../constants";
-import { kebabCaseJoin, upperFirst } from "../helpers";
-import { forwardAttrs } from "../helpers/componentHelpers";
-import { createStyleMixin } from "./createStyleMixin";
-import { createCssVarsList } from "./createStyleMixin/helpers";
+import { PORTAL_THEME_PREFIX } from '../constants';
+import { kebabCaseJoin } from '../helpers';
+import { forwardAttrs } from '../helpers/componentHelpers';
+import { createStyleMixin } from './createStyleMixin';
+import { createCssVarsList } from './createStyleMixin/helpers';
 
 // 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 
+// 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 DISPLAY_NAME_SEPARATOR = '_';
 
 const sanitizeSelector = (selector) => selector.replace(/[^\w\s]/gi, '');
 
 const getDomNode = (maybeDomNode) => maybeDomNode.host || maybeDomNode;
 
-export const portalMixin = ({
-  name,
-  selector,
-  mappings = {},
-  forward: { attributes = [], include = true } = {}
-}) => (superclass) => {
-  const eleDisplayName = name || sanitizeSelector(selector)
+export const portalMixin =
+  ({ name, selector, mappings = {}, forward: { attributes = [], include = true } = {} }) =>
+  (superclass) => {
+    const eleDisplayName = name || sanitizeSelector(selector);
 
-  const BaseClass = createStyleMixin({
-    mappings
-  })(superclass)
+    const BaseClass = createStyleMixin({
+      mappings,
+    })(superclass);
 
-  return class PortalMixinClass extends BaseClass {
-    static get cssVarList() {
-      return {
-        ...BaseClass.cssVarList,
-        [eleDisplayName]: createCssVarsList(kebabCaseJoin(superclass.componentName, DISPLAY_NAME_SEPARATOR + eleDisplayName), mappings)
-      };
-    }
+    return class PortalMixinClass extends BaseClass {
+      static get cssVarList() {
+        return {
+          ...BaseClass.cssVarList,
+          [eleDisplayName]: createCssVarsList(
+            kebabCaseJoin(superclass.componentName, DISPLAY_NAME_SEPARATOR + eleDisplayName),
+            mappings
+          ),
+        };
+      }
 
-    #portalEle
+      #portalEle;
 
-    constructor() {
-      // we cannot use "this" before calling "super"
-      const getRootElement = (that) => {
-        const baseEle = that.shadowRoot.querySelector(that.baseSelector)
-        const portal = selector ? baseEle.shadowRoot.querySelector(selector) : baseEle
+      constructor() {
+        // we cannot use "this" before calling "super"
+        const getRootElement = (that) => {
+          const baseEle = that.shadowRoot.querySelector(that.baseSelector);
+          const portal = selector ? baseEle.shadowRoot.querySelector(selector) : baseEle;
 
-        return portal.shadowRoot || portal
-      };
+          return portal.shadowRoot || portal;
+        };
 
-      super({
-        getRootElement,
-        componentNameSuffix: DISPLAY_NAME_SEPARATOR + eleDisplayName,
-        themeSection: PORTAL_THEME_PREFIX + eleDisplayName,
-        baseSelector: ':host'
-      })
+        super({
+          getRootElement,
+          componentNameSuffix: DISPLAY_NAME_SEPARATOR + eleDisplayName,
+          themeSection: PORTAL_THEME_PREFIX + eleDisplayName,
+          baseSelector: ':host',
+        });
 
-      this.#portalEle = getDomNode(getRootElement(this))
-    }
+        this.#portalEle = getDomNode(getRootElement(this));
+      }
 
-    #handleHoverAttribute() {
-      this.#portalEle.onmouseenter = (e) => { e.target.setAttribute('hover', 'true') }
-      this.#portalEle.onmouseleave = (e) => { e.target.removeAttribute('hover') }
-    }
+      #handleHoverAttribute() {
+        this.#portalEle.onmouseenter = (e) => {
+          e.target.setAttribute('hover', 'true');
+        };
+        this.#portalEle.onmouseleave = (e) => {
+          e.target.removeAttribute('hover');
+        };
+      }
 
-    init() {
-      super.init?.();
-      forwardAttrs(this, this.#portalEle, { [include ? 'includeAttrs' : 'excludeAttrs']: attributes })
+      init() {
+        super.init?.();
+        forwardAttrs(this, this.#portalEle, {
+          [include ? 'includeAttrs' : 'excludeAttrs']: attributes,
+        });
 
-      this.#handleHoverAttribute();
-    }
-  }
-}
+        this.#handleHoverAttribute();
+      }
+    };
+  };

package/src/mixins/proxyInputMixin.js

@@ -1,148 +1,154 @@
-import { compose } from "../helpers";
-import { forwardAttrs, getComponentName } from "../helpers/componentHelpers";
-import { createDispatchEvent } from "../helpers/mixinsHelpers";
-import { createStyleMixin } from "./createStyleMixin";
-import { inputValidationMixin } from "./inputValidationMixin";
+/* eslint-disable no-param-reassign */
+import { compose } from '../helpers';
+import { forwardAttrs, getComponentName } from '../helpers/componentHelpers';
+import { createDispatchEvent } from '../helpers/mixinsHelpers';
+import { createStyleMixin } from './createStyleMixin';
+import { inputValidationMixin } from './inputValidationMixin';
 
 const errorAttrs = ['invalid', 'required'];
 
 const propertyObserver = (src, target, property) => {
-	Object.defineProperty(src, property, {
-		set: function (v) {
-			return (target[property] = v);
-		},
-		get: function () {
-			return target[property];
-		},
-		configurable: true
-	});
+  Object.defineProperty(src, property, {
+    set(v) {
+      target[property] = v;
+    },
+    get() {
+      return target[property];
+    },
+    configurable: true,
+  });
 };
 
 // recursively take the first slot child until it finds an element which is not a slot
 // stops after "nestingLevel" times
 const getNestedInput = (ele) => {
-	if (!ele) return;
+  if (!ele) return undefined;
 
-	const nestingLevel = 10
+  const nestingLevel = 10;
 
-	let nonSlotEle = ele
-	for (let i = 0; i < nestingLevel; i++) {
-		nonSlotEle = nonSlotEle.assignedElements()[0]
-		if (nonSlotEle.localName !== 'slot') return nonSlotEle
-	}
-}
+  let nonSlotEle = ele;
+  for (let i = 0; i < nestingLevel; i++) {
+    [nonSlotEle] = nonSlotEle.assignedElements();
+    if (nonSlotEle.localName !== 'slot') return nonSlotEle;
+  }
+  return undefined;
+};
 
 const proxyInputMixin = (superclass) =>
-	class ProxyInputMixinClass extends inputValidationMixin(superclass) {
-		static get observedAttributes() {
-			return [...superclass.observedAttributes || [], ...errorAttrs];
-		}
-
-		#inputElement
-
-		#dispatchChange = createDispatchEvent.bind(this, 'change')
-
-		constructor() {
-			super();
-
-			this.#inputElement = super.inputElement
-		}
-
-		// the web-component does not loaded immediately, so we want to defer the warning
-		// and show it only if the input element was not found after the component is loaded
-		warnIfInputElementIsMissing() {
-			clearTimeout(this.inputElementTimerId)
-
-			this.inputElementTimerId = setTimeout(() => {
-				!this.#inputElement && console.warn(this.localName, 'no input was found');
-			}, 0)
-		}
-
-		get name () {
-			return this.getAttribute('name');
-		}
-
-		get inputElement() {
-			this.warnIfInputElementIsMissing()
-
-			const inputSlot = this.baseElement.shadowRoot?.querySelector('slot[name="input"]')
-			const textAreaSlot = this.baseElement.shadowRoot?.querySelector('slot[name="textarea"]')
-
-			this.#inputElement ??= getNestedInput(inputSlot) || getNestedInput(textAreaSlot)
-
-			return this.#inputElement
-		}
-
-		set inputElement(ele) {
-			this.#inputElement = ele
-		}
-
-		getValidity() {
-			return this.inputElement?.validity || {}
-		}
+  class ProxyInputMixinClass extends inputValidationMixin(superclass) {
+    static get observedAttributes() {
+      return [...(superclass.observedAttributes || []), ...errorAttrs];
+    }
+
+    #inputElement;
+
+    #dispatchChange = createDispatchEvent.bind(this, 'change');
+
+    constructor() {
+      super();
+
+      this.#inputElement = super.inputElement;
+    }
+
+    // the web-component does not loaded immediately, so we want to defer the warning
+    // and show it only if the input element was not found after the component is loaded
+    warnIfInputElementIsMissing() {
+      clearTimeout(this.inputElementTimerId);
+
+      this.inputElementTimerId = setTimeout(() => {
+        // eslint-disable-next-line no-console
+        !this.#inputElement && console.warn(this.localName, 'no input was found');
+      }, 0);
+    }
+
+    get name() {
+      return this.getAttribute('name');
+    }
+
+    get inputElement() {
+      this.warnIfInputElementIsMissing();
+
+      const inputSlot = this.baseElement.shadowRoot?.querySelector('slot[name="input"]');
+      const textAreaSlot = this.baseElement.shadowRoot?.querySelector('slot[name="textarea"]');
+
+      this.#inputElement ??= getNestedInput(inputSlot) || getNestedInput(textAreaSlot);
+
+      return this.#inputElement;
+    }
+
+    set inputElement(ele) {
+      this.#inputElement = ele;
+    }
+
+    getValidity() {
+      return this.inputElement?.validity || {};
+    }
+
+    handleInternalInputErrorMessage() {
+      if (!this.inputElement.checkValidity()) {
+        this.inputElement.setCustomValidity(this.validationMessage);
+      }
+    }
+
+    #handleErrorMessage() {
+      this.handleInternalInputErrorMessage();
+      this.setAttribute('error-message', this.validationMessage);
+    }
+
+    init() {
+      super.init?.();
+
+      this.inputElement.addEventListener('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();
+        }
+      });
+
+      this.baseElement.addEventListener('change', () => {
+        this.#dispatchChange();
+      });
+
+      this.#inputElement.addEventListener('blur', () => {
+        if (!this.checkValidity()) {
+          this.setAttribute('invalid', 'true');
+          this.#handleErrorMessage();
+        }
+      });
+
+      this.addEventListener('invalid', () => {
+        if (!this.checkValidity()) {
+          this.setAttribute('invalid', 'true');
+        }
+        this.#handleErrorMessage();
+      });
+
+      this.handleInternalInputErrorMessage();
+
+      // sync properties
+      propertyObserver(this, this.inputElement, 'value');
+      propertyObserver(this, this.inputElement, 'selectionStart');
+      this.setSelectionRange = this.inputElement.setSelectionRange?.bind(this.inputElement);
 
-		handleInternalInputErrorMessage() {
-			if (!this.inputElement.checkValidity()) {
-				this.inputElement.setCustomValidity(this.validationMessage)
-			}
-		}
-
-		#handleErrorMessage() {
-			this.handleInternalInputErrorMessage()
-			this.setAttribute('error-message', this.validationMessage)
-		}
-
-		init() {
-			super.init?.();
-
-			this.inputElement.addEventListener('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()
-				}
-			})
-
-			this.baseElement.addEventListener('change', () => {
-				this.#dispatchChange()
-			})
-
-			this.#inputElement.addEventListener('blur', () => {
-				if (!this.checkValidity()) {
-					this.setAttribute('invalid', 'true')
-					this.#handleErrorMessage()
-				}
-			})
-
-
-			this.addEventListener('invalid', () => {
-				if (!this.checkValidity()) {
-					this.setAttribute('invalid', 'true');
-				}
-				this.#handleErrorMessage()
-			})
-
-			this.handleInternalInputErrorMessage();
-
-			// sync properties
-			propertyObserver(this, this.inputElement, 'value');
-			propertyObserver(this, this.inputElement, 'selectionStart');
-			this.setSelectionRange = this.inputElement.setSelectionRange?.bind(this.inputElement);
-
-			forwardAttrs(this, this.inputElement, { includeAttrs: ['inputmode'] })
-		}
-	};
+      forwardAttrs(this, this.inputElement, { includeAttrs: ['inputmode'] });
+    }
+  };
 
 const composedProxyInputMixin = compose(
-	proxyInputMixin,
-	createStyleMixin({ componentNameOverride: getComponentName('input-wrapper') }))
-
-export { composedProxyInputMixin as proxyInputMixin }
+  proxyInputMixin,
+  // in order to use input-wrapper across all our input components, we need to inject its theme
+  // to every proxy input mixin, to allow its css vars to be scoped properly and accessible
+  // in the proxy input component
+  createStyleMixin({ componentNameOverride: getComponentName('input-wrapper') })
+);
+
+export { composedProxyInputMixin as proxyInputMixin };

package/src/theme/components/button.js

@@ -6,11 +6,11 @@ const globalRefs = getThemeRefs(globals);
 const compVars = ButtonClass.cssVarList;
 
 const mode = {
-	primary: globalRefs.colors.primary,
-	secondary: globalRefs.colors.secondary,
-	success: globalRefs.colors.success,
-	error: globalRefs.colors.error,
-	surface: globalRefs.colors.surface
+  primary: globalRefs.colors.primary,
+  secondary: globalRefs.colors.secondary,
+  success: globalRefs.colors.success,
+  error: globalRefs.colors.error,
+  surface: globalRefs.colors.surface,
 };
 
 const [helperTheme, helperRefs, helperVars] = createHelperVars({ mode }, componentName);
@@ -19,85 +19,90 @@ const verticalPaddingRatio = 3;
 const horizontalPaddingRatio = 2;
 
 const button = {
-	...helperTheme,
-
-	[compVars.fontFamily]: globalRefs.fonts.font1.family,
-
-	[compVars.cursor]: 'pointer',
-
-	[compVars.borderRadius]: globalRefs.radius.sm,
-	[compVars.borderWidth]: '2px',
-	[compVars.borderStyle]: 'solid',
-	[compVars.borderColor]: 'transparent',
-
-	[compVars.labelSpacing]: '0.25em',
-
-	[compVars.verticalPadding]: `calc(var(${compVars.fontSize}) / ${verticalPaddingRatio})`,
-	[compVars.horizontalPadding]: `calc(var(${compVars.fontSize}) / ${horizontalPaddingRatio})`,
-
-	[compVars.outlineWidth]: globals.border.sm,
-	[compVars.outlineOffset]: '1px',
-	[compVars.outlineStyle]: 'solid',
-	[compVars.outlineColor]: 'transparent',
-
-	size: {
-		xs: { [compVars.fontSize]: '12px' },
-		sm: { [compVars.fontSize]: '14px' },
-		md: { [compVars.fontSize]: '16px' },
-		lg: { [compVars.fontSize]: '18px' }
-	},
-
-	_fullWidth: {
-		[compVars.hostWidth]: '100%'
-	},
-
-	_loading: {
-		[compVars.cursor]: 'wait'
-	},
-
-	variant: {
-		contained: {
-			[compVars.labelTextColor]: helperRefs.contrast,
-			[compVars.backgroundColor]: helperRefs.main,
-			_hover: {
-				[compVars.backgroundColor]: helperRefs.dark
-			},
-			_active: {
-				[compVars.backgroundColor]: helperRefs.dark
-			}
-		},
-
-		outline: {
-			[compVars.labelTextColor]: helperRefs.main,
-			[compVars.borderColor]: 'currentColor',
-			_hover: {
-				[compVars.labelTextColor]: helperRefs.dark,
-			},
-			_active: {
-				[compVars.labelTextColor]: helperRefs.light,
-			}
-		},
-
-		link: {
-			[compVars.labelTextColor]: helperRefs.main,
-			_hover: {
-				[compVars.labelTextColor]: helperRefs.main,
-				[compVars.labelTextDecoration]: 'underline'
-			},
-			_active: {
-				[compVars.labelTextColor]: helperRefs.dark
-			}
-		}
-	},
-
-	_focused: {
-		[compVars.outlineColor]: globals.colors.surface.main,
-	}
+  ...helperTheme,
+
+  [compVars.fontFamily]: globalRefs.fonts.font1.family,
+
+  [compVars.cursor]: 'pointer',
+  [compVars.hostHeight]: '3em',
+
+  [compVars.borderRadius]: globalRefs.radius.sm,
+  [compVars.borderWidth]: globalRefs.border.xs,
+  [compVars.borderStyle]: 'solid',
+  [compVars.borderColor]: 'transparent',
+
+  [compVars.labelSpacing]: '0.25em',
+
+  [compVars.verticalPadding]: `calc(var(${compVars.fontSize}) / ${verticalPaddingRatio})`,
+  [compVars.horizontalPadding]: `calc(var(${compVars.fontSize}) / ${horizontalPaddingRatio})`,
+
+  [compVars.outlineWidth]: globals.border.sm,
+  [compVars.outlineOffset]: '0px', // keep `px` unit for external calc
+  [compVars.outlineStyle]: 'solid',
+  [compVars.outlineColor]: 'transparent',
+
+  size: {
+    xs: { [compVars.fontSize]: '12px' },
+    sm: { [compVars.fontSize]: '14px' },
+    md: { [compVars.fontSize]: '16px' },
+    lg: { [compVars.fontSize]: '18px' },
+  },
+
+  _fullWidth: {
+    [compVars.hostWidth]: '100%',
+  },
+
+  _loading: {
+    [compVars.cursor]: 'wait',
+    [compVars.labelTextColor]: helperRefs.main,
+  },
+
+  variant: {
+    contained: {
+      [compVars.labelTextColor]: helperRefs.contrast,
+      [compVars.backgroundColor]: helperRefs.main,
+      _hover: {
+        [compVars.backgroundColor]: helperRefs.dark,
+        _loading: {
+          [compVars.backgroundColor]: helperRefs.main,
+        },
+      },
+      _active: {
+        [compVars.backgroundColor]: helperRefs.main,
+      },
+    },
+
+    outline: {
+      [compVars.labelTextColor]: helperRefs.main,
+      [compVars.borderColor]: 'currentColor',
+      _hover: {
+        [compVars.labelTextColor]: helperRefs.dark,
+      },
+      _active: {
+        [compVars.labelTextColor]: helperRefs.main,
+      },
+    },
+
+    link: {
+      [compVars.labelTextColor]: helperRefs.main,
+      _hover: {
+        [compVars.labelTextColor]: helperRefs.dark,
+        [compVars.labelTextDecoration]: 'underline',
+      },
+      _active: {
+        [compVars.labelTextColor]: helperRefs.dark,
+      },
+    },
+  },
+
+  _focused: {
+    [compVars.outlineColor]: globalRefs.colors.surface.main,
+  },
 };
 
 export default button;
 
 export const vars = {
-	...compVars,
-	...helperVars
+  ...compVars,
+  ...helperVars,
 };