@descope-ui/common 0.0.1

package/src/componentsMixins/mixins/createStyleMixin/index.js

@@ -0,0 +1,167 @@
+import { BASE_THEME_SECTION, CSS_SELECTOR_SPECIFIER_MULTIPLY } from '../../../constants';
+import { kebabCaseJoin } from '../../../utils';
+import { getCssVarName, observeAttributes } from '../../../componentsHelpers';
+import { componentsThemeManager } from '../../../themeHelpers';
+import { createStyle, createCssVarsList, createClassSelectorSpecifier } from './helpers';
+
+const STYLE_OVERRIDE_ATTR_PREFIX = 'st';
+
+export const createStyleMixin =
+  ({ mappings = {}, componentNameOverride = '' }) =>
+  (superclass) => {
+    const componentName = componentNameOverride || superclass.componentName;
+
+    return class CustomStyleMixinClass extends superclass {
+      static get cssVarList() {
+        return {
+          ...superclass.cssVarList,
+          ...createCssVarsList(componentName, {
+            ...mappings,
+          }),
+        };
+      }
+
+      #overrideStyleEle;
+
+      #themeStyleEle;
+
+      #disconnectThemeManager;
+
+      #componentNameSuffix;
+
+      #themeSection;
+
+      #rootElement;
+
+      #baseSelector;
+
+      #styleAttributes;
+
+      #getRootElement;
+
+      // we are using this mixin also for portalMixin
+      // so we should be able to inject styles to other DOM elements
+      // this is why we need to support these overrides
+      constructor({
+        getRootElement,
+        componentNameSuffix = '',
+        themeSection = BASE_THEME_SECTION,
+        baseSelector,
+      } = {}) {
+        super();
+        this.#componentNameSuffix = componentNameSuffix;
+        this.#themeSection = themeSection;
+        this.#baseSelector = baseSelector ?? this.baseSelector;
+        this.#getRootElement = getRootElement;
+
+        this.#styleAttributes = Object.keys(CustomStyleMixinClass.cssVarList).map((key) =>
+          kebabCaseJoin(STYLE_OVERRIDE_ATTR_PREFIX, componentNameSuffix, key)
+        );
+      }
+
+      // eslint-disable-next-line class-methods-use-this
+      get #componentTheme() {
+        return componentsThemeManager.currentTheme?.[componentName] || '';
+      }
+
+      #onComponentThemeChange() {
+        this.#themeStyleEle.innerHTML = this.#componentTheme[this.#themeSection];
+      }
+
+      #createComponentTheme() {
+        this.#themeStyleEle = document.createElement('style');
+        this.#themeStyleEle.id = `style-mixin-theme__${componentName}`;
+        this.#rootElement.prepend(this.#themeStyleEle);
+        this.#disconnectThemeManager = componentsThemeManager.onCurrentThemeChange(
+          this.#onComponentThemeChange.bind(this)
+        );
+        this.#onComponentThemeChange();
+      }
+
+      #createOverridesStyle() {
+        if (this.#styleAttributes.length) {
+          this.#overrideStyleEle = document.createElement('style');
+          this.#overrideStyleEle.id = `style-mixin-overrides__${componentName}`;
+
+          const classSpecifier = createClassSelectorSpecifier(
+            componentName,
+            CSS_SELECTOR_SPECIFIER_MULTIPLY
+          );
+
+          this.#overrideStyleEle.innerText = `:host(${classSpecifier}) {}`;
+          this.#rootElement.append(this.#overrideStyleEle);
+        }
+      }
+
+      #setAttrOverride(attrName, value) {
+        const style = this.#overrideStyleEle?.sheet?.cssRules[0].style;
+        if (!style) return;
+
+        const varName = getCssVarName(
+          componentName,
+          attrName.replace(new RegExp(`^${STYLE_OVERRIDE_ATTR_PREFIX}-`), '')
+        );
+
+        if (value) style?.setProperty(varName, value);
+        else {
+          style?.removeProperty(varName);
+          this.removeAttribute(attrName);
+        }
+      }
+
+      #updateOverridesStyle(attrs = []) {
+        let shouldUpdate = false;
+
+        attrs.forEach((attr) => {
+          if (this.#styleAttributes.includes(attr)) {
+            this.#setAttrOverride(attr, this.getAttribute(attr));
+            shouldUpdate = true;
+          }
+        });
+
+        if (shouldUpdate) {
+          // we are rewriting the style back to the style tag
+          this.#overrideStyleEle.innerHTML = this.#overrideStyleEle?.sheet?.cssRules[0].cssText;
+        }
+      }
+
+      #createMappingStyle() {
+        if (Object.keys(mappings).length) {
+          const themeStyle = document.createElement('style');
+          themeStyle.id = `style-mixin-mappings__${componentName}`;
+          themeStyle.innerHTML = createStyle(
+            kebabCaseJoin(componentName, this.#componentNameSuffix),
+            this.#baseSelector,
+            mappings
+          );
+          this.#rootElement.prepend(themeStyle);
+        }
+      }
+
+      #addClassName(className) {
+        (this.#rootElement.classList || this.#rootElement.host.classList).add(className);
+      }
+
+      async init() {
+        super.init?.();
+        if (this.shadowRoot.isConnected) {
+          this.#rootElement = (await this.#getRootElement?.(this)) || this.shadowRoot;
+
+          this.#addClassName(componentName);
+
+          this.#createMappingStyle();
+          this.#createComponentTheme();
+          this.#createOverridesStyle();
+
+          // this is instead attributeChangedCallback because we cannot use static methods in this case
+          observeAttributes(this, this.#updateOverridesStyle.bind(this), {});
+        }
+      }
+
+      disconnectedCallback() {
+        super.disconnectedCallback?.();
+
+        this.#disconnectThemeManager?.();
+      }
+    };
+  };

package/src/componentsMixins/mixins/draggableMixin.js

@@ -0,0 +1,62 @@
+export const draggableMixin = (superclass) =>
+  class DraggableMixinClass extends superclass {
+    #styleEle = null;
+
+    static get observedAttributes() {
+      const superAttrs = superclass.observedAttributes || [];
+      return [...superAttrs, 'draggable'];
+    }
+
+    constructor() {
+      super();
+
+      this.#styleEle = document.createElement('style');
+      this.#styleEle.innerText = `* { cursor: inherit!important }`;
+    }
+
+    #handleDraggableStyle(isDraggable) {
+      if (isDraggable) {
+        this.shadowRoot.appendChild(this.#styleEle);
+      } else {
+        this.#styleEle.remove();
+      }
+    }
+
+    get isDraggable() {
+      return this.hasAttribute('draggable') && this.getAttribute('draggable') !== 'false';
+    }
+
+    init() {
+      // because we are delegating the focus from the outer component,
+      // the D&D is not working well in the page editor
+      // in order to solve it we are making the inner component focusable on mouse down
+      // and removing it on complete
+      this.addEventListener('mousedown', (e) => {
+        if (this.isDraggable) {
+          const prevTabIndex = this.baseElement.getAttribute('tabindex');
+          this.baseElement.setAttribute('tabindex', '-1');
+
+          const onComplete = () => {
+            prevTabIndex
+              ? this.baseElement.setAttribute('tabindex', prevTabIndex)
+              : this.baseElement.removeAttribute('tabindex');
+
+            e.target.removeEventListener('mouseup', onComplete);
+            e.target.removeEventListener('dragend', onComplete);
+          };
+
+          e.target.addEventListener('mouseup', onComplete, { once: true });
+          e.target.addEventListener('dragend', onComplete, { once: true });
+        }
+      });
+
+      super.init?.();
+    }
+
+    attributeChangedCallback(attrName, oldValue, newValue) {
+      super.attributeChangedCallback?.(attrName, oldValue, newValue);
+      if (attrName === 'draggable') {
+        this.#handleDraggableStyle(newValue === 'true');
+      }
+    }
+  };

package/src/componentsMixins/mixins/externalInputHelpers.js

@@ -0,0 +1,93 @@
+// since on load we can only sample the color of the placeholder,
+// we need to temporarily populate the input in order to sample the value color
+const getValueColor = (ele, computedStyle) => {
+  // to support setting dynamic values, we have to store the existing value
+  // and re-set it if we are returning from this hack
+  const origVal = ele.value;
+
+  // eslint-disable-next-line no-param-reassign
+  ele.value = '_';
+
+  const valueColor = computedStyle.getPropertyValue('color');
+
+  if (ele.value === '_') {
+    // eslint-disable-next-line no-param-reassign
+    ele.value = origVal;
+  }
+
+  return valueColor;
+};
+
+export const createExternalInputSlot = (slotName, targetSlotName) => {
+  const slotEle = document.createElement('slot');
+
+  slotEle.setAttribute('name', slotName);
+  slotEle.setAttribute('slot', targetSlotName);
+
+  return slotEle;
+};
+
+export const createExternalInputEle = (targetSlotName, type, autocompleteType, inputName) => {
+  const inputEle = document.createElement('input');
+
+  inputEle.setAttribute('slot', targetSlotName);
+  inputEle.setAttribute('type', type);
+  inputEle.setAttribute('name', inputName);
+  inputEle.setAttribute('data-hidden-input', 'true');
+  inputEle.setAttribute('autocomplete', autocompleteType);
+
+  return inputEle;
+};
+
+// We apply the original input's style to the external-input.
+// Eventually, the user should interact directly with the external input.
+// We keep the original input
+export const applyExternalInputStyles = (sourceInputEle, targetInputEle, labelType) => {
+  // We set a timeout here to avoid "Double Print" cases,
+  // caused by sampling the computed style before it's ready.
+  setTimeout(() => {
+    const computedStyle = getComputedStyle(sourceInputEle);
+    // Get minimal set of computed theme properties to set on external input
+    const height = computedStyle.getPropertyValue('height');
+    const paddingLeft = computedStyle.getPropertyValue('padding-left');
+    const paddingRight = computedStyle.getPropertyValue('padding-right');
+    const fontSize = computedStyle.getPropertyValue('font-size');
+    const fontFamily = computedStyle.getPropertyValue('font-family');
+    const letterSpacing = computedStyle.getPropertyValue('letter-spacing');
+    const caretColor = computedStyle.getPropertyValue('caret-color');
+
+    const valueColor = getValueColor(sourceInputEle, computedStyle);
+
+    const commonThemeStyles = [
+      ['all', 'unset'],
+      ['position', 'absolute'],
+      ['background-color', 'transparent'],
+      ['height', height],
+      ['left', paddingLeft],
+      ['right', paddingRight],
+      ['font-size', fontSize],
+      ['font-family', fontFamily],
+      ['letter-spacing', letterSpacing],
+      ['caret-color', caretColor], // this is for seeing caret when focusing on external input
+      ['color', valueColor],
+    ];
+
+    commonThemeStyles.forEach(([key, val]) =>
+      targetInputEle.style.setProperty(key, val, 'important')
+    );
+
+    // Handle floating label theme properties
+    if (labelType === 'floating') {
+      const marginBottom = computedStyle.getPropertyValue('margin-bottom');
+      targetInputEle.style.setProperty('margin-bottom', marginBottom, 'important');
+    }
+
+    // sample and apply width only after original input is ready and fully rendered
+    const width = computedStyle.getPropertyValue('width');
+    targetInputEle.style.setProperty(
+      'width',
+      `calc(${width} - ${paddingLeft} - ${paddingRight}`,
+      'important'
+    );
+  }, 0);
+};

package/src/componentsMixins/mixins/externalInputMixin.js

@@ -0,0 +1,170 @@
+import { syncAttrs } from '../../componentsHelpers';
+import {
+  applyExternalInputStyles,
+  createExternalInputEle,
+  createExternalInputSlot,
+} from './externalInputHelpers';
+
+export const externalInputMixin =
+  ({ inputType, inputName, autocompleteType, includeAttrs = [], noBlurDispatch = false }) =>
+  (superclass) =>
+    class ExternalInputMixinClass extends superclass {
+      #timers = [];
+
+      get isExternalInput() {
+        return this.getAttribute('external-input') === 'true';
+      }
+
+      createExternalInput() {
+        if (!this.isExternalInput || this.isReadOnly || this.isDisabled) {
+          return null;
+        }
+
+        // use original input element as reference
+        const origInput = this.baseElement.querySelector('input');
+
+        if (!origInput) {
+          return null;
+        }
+
+        // to avoid focus loop between external-input and origInput
+        // we set origInput's tabindex to -1
+        // otherwise, shift-tab will never leave the component focus
+        origInput.setAttribute('tabindex', '-1');
+
+        // create external slot
+        const externalInputSlot = createExternalInputSlot('external-input', 'suffix');
+
+        // append external slot to base element
+        this.baseElement.appendChild(externalInputSlot);
+
+        this.externalInput = createExternalInputEle(
+          'external-input',
+          inputType,
+          this.getAutocompleteType(),
+          inputName
+        );
+
+        // apply original input's styles to external input
+        setTimeout(() => {
+          applyExternalInputStyles(origInput, this.externalInput, this.getAttribute('label-type'));
+        });
+
+        // 1Password catches the internal input, so we forward the value to the external input
+        this.forwardInputValue(origInput, this.externalInput);
+
+        syncAttrs(origInput, this.externalInput, {
+          includeAttrs,
+        });
+
+        // We disable Vaadin's original `_setFocused` function, and use handleFocusEvents
+        // and handleBlurEvents functions
+        this.baseElement
+          .querySelector('input')
+          .addEventListener('focusout', (e) => e.stopImmediatePropagation(), true);
+
+        // In order to manage focus/blur events when moving between parts of the component
+        // we're managing the event dispatching by ourselves, with the following strategy:
+        // - If one of the component parts is focused - it means that the component is still focused - so we stop the blur events.
+        // - When none of the component parts is focused, we dispatch blur event.
+        this.handleFocusEvents();
+        this.handleBlurEvents();
+
+        // sync input value
+        this.handlelInputEvents(this.externalInput);
+
+        // append external input to component's DOM
+        this.appendChild(this.externalInput);
+
+        return this.externalInput;
+      }
+
+      clearBlurTimers() {
+        this.#timers.forEach((timer) => clearTimeout(timer));
+        this.#timers.length = 0;
+      }
+
+      dispatchBlur() {
+        return setTimeout(() => {
+          this.dispatchEvent(new Event('blur', { bubbles: true, composed: true }));
+          this.removeAttribute('focused');
+        });
+      }
+
+      handleFocusEvents() {
+        // on baseElement `focus` we forward the focus to the external input.
+        // also, in order to avoid any blur within the component, we clear the blur timers.
+        this.baseElement.addEventListener('focus', () => {
+          this.externalInput.focus();
+          this.clearBlurTimers();
+        });
+
+        // on `focus` of the external input, we manually set the `focused` attribute
+        this.externalInput.addEventListener('focus', () => {
+          this.clearBlurTimers();
+          setTimeout(() => this.baseElement.setAttribute('focused', 'true'));
+        });
+      }
+
+      handleBlurEvents() {
+        this.baseElement.addEventListener(
+          'blur',
+          (e) => {
+            e.stopImmediatePropagation();
+            // some components do not require this synthetic blur dispatch (e.g. Password)
+            // so we allow them to override this dispatch
+            if (noBlurDispatch) return;
+            this.#timers.push(this.dispatchBlur());
+          },
+          true
+        );
+
+        this.externalInput.addEventListener(
+          'blur',
+          (e) => {
+            e.stopImmediatePropagation();
+            this.#timers.push(this.dispatchBlur());
+          },
+          true
+        );
+      }
+
+      handlelInputEvents(externalInput) {
+        // sync value of insible input back to original input
+        externalInput.addEventListener('input', (e) => {
+          this.value = e.target.value;
+        });
+
+        // handle has-value attr
+        externalInput.addEventListener('input', (e) => {
+          if (!e.target.value) {
+            this.removeAttribute('has-value');
+          } else {
+            this.setAttribute('has-value', 'true');
+          }
+        });
+      }
+
+      getAutocompleteType() {
+        return this.getAttribute('autocomplete') || autocompleteType;
+      }
+
+      forwardInputValue(source, target) {
+        // set internal sync events
+        const valueDescriptor = Object.getOwnPropertyDescriptor(
+          this.inputElement.constructor.prototype,
+          'value'
+        );
+
+        Object.defineProperty(source, 'value', {
+          ...valueDescriptor,
+
+          set(v) {
+            valueDescriptor.set.call(this, v);
+            // eslint-disable-next-line no-param-reassign
+            target.value = v;
+          },
+          configurable: true,
+        });
+      }
+    };

package/src/componentsMixins/mixins/hoverableMixin.js

@@ -0,0 +1,13 @@
+export const hoverableMixin = (superclass) =>
+  class HoverableMixinClass extends superclass {
+    init() {
+      super.init?.();
+
+      this.baseElement.addEventListener('mouseover', (e) => {
+        this.setAttribute('hover', 'true');
+        e.target.addEventListener('mouseleave', () => this.removeAttribute('hover'), {
+          once: true,
+        });
+      });
+    }
+  };

package/src/componentsMixins/mixins/index.js

@@ -0,0 +1,14 @@
+export { createStyleMixin } from './createStyleMixin';
+export { draggableMixin } from './draggableMixin';
+export { createProxy } from './createProxy';
+export { proxyInputMixin } from './proxyInputMixin';
+export { componentNameValidationMixin } from './componentNameValidationMixin';
+export { hoverableMixin } from './hoverableMixin';
+export { inputValidationMixin } from './inputValidationMixin';
+export { portalMixin } from './portalMixin';
+export { changeMixin } from './changeMixin';
+export { normalizeBooleanAttributesMixin } from './normalizeBooleanAttributesMixin';
+export { lifecycleEventsMixin } from './lifecycleEventsMixin';
+export { inputEventsDispatchingMixin } from './inputEventsDispatchingMixin';
+export { externalInputMixin } from './externalInputMixin';
+export {componentsContextMixin} from './componentsContextMixin'

package/src/componentsMixins/mixins/inputEventsDispatchingMixin.js

@@ -0,0 +1,76 @@
+import { createDispatchEvent } from '../helpers/mixinsHelpers';
+
+export const inputEventsDispatchingMixin = (superclass) =>
+  class InputEventsDispatchingMixinClass extends superclass {
+    init() {
+      this.#blockNativeEvents();
+
+      super.init?.();
+    }
+
+    // we want to block the native (trusted) events and control when these events are being dispatched
+    #blockNativeEvents() {
+      ['blur', 'focus', 'focusin', 'focusout'].forEach((event) => {
+        this.addEventListener(event, (e) => {
+          e.isTrusted && e.target === this && e.stopImmediatePropagation();
+        });
+      });
+    }
+
+    handleFocusEventsDispatching(inputs) {
+      let timerId;
+
+      // in order to simulate blur & focusout on root input element
+      // we are checking if focus on one of the inner elements happened immediately after blur
+      // if not, the component is no longer focused and we should dispatch blur & focusout
+      inputs?.forEach((input) => {
+        input?.addEventListener('focusout', (e) => {
+          e.stopImmediatePropagation();
+          timerId = setTimeout(() => {
+            timerId = null;
+
+            createDispatchEvent.call(this, 'blur');
+            createDispatchEvent.call(this, 'focusout', { bubbles: true });
+          });
+        });
+
+        // in order to simulate focus & focusin on the root input element
+        // we are holding a timer id and clearing it on focusin
+        // if there is a timer id, it means that the root input is still focused
+        // otherwise, it was not focused before, and we should dispatch focus & focusin
+        const onFocus = (e) => {
+          e.stopImmediatePropagation();
+          clearTimeout(timerId);
+          if (!timerId) {
+            createDispatchEvent.call(this, 'focus');
+            createDispatchEvent.call(this, 'focusin', { bubbles: true });
+          }
+        };
+
+        // some components are not dispatching focusin but only focus
+        input?.addEventListener('focusin', onFocus);
+        input?.addEventListener('focus', onFocus);
+      });
+    }
+
+    // we want to block the input events from propagating in case the value of the root input wasn't change
+    // this can happen if we are sanitizing characters on the internal inputs and do not want it to affect the root input element value
+    // in this case, on each input event, we are comparing the root input value to the previous one, and only if it does not match, we are allowing the input event to propagate
+    handleInputEventDispatching() {
+      let previousRootComponentValue = this.value;
+
+      // we are comparing the previous value to the new one,
+      // and if they have the same value, we are blocking the input event
+      this.addEventListener('input', (e) => {
+        // We don't want to block our own event that we fire from handleInputEventDispatching
+        if (this !== e.target) {
+          e.stopImmediatePropagation();
+
+          if (previousRootComponentValue !== this.value) {
+            previousRootComponentValue = this.value;
+            createDispatchEvent.call(this, 'input', { bubbles: true, composed: true });
+          }
+        }
+      });
+    }
+  };