@lion/ui 0.8.4 → 0.8.6

package/components/core/src/ScopedElementsMixin.js

@@ -89,8 +89,8 @@ const ScopedElementsMixinImplementation = superclass =>
      */
     defineScopedElement(tagName, classToBeRegistered) {
       const registeredClass = this.registry.get(tagName);
-      const isAlreadyRegistered = registeredClass && registeredClass === classToBeRegistered;
-      if (isAlreadyRegistered && !supportsScopedRegistry()) {
+      const isNewClassWithSameName = registeredClass && registeredClass !== classToBeRegistered;
+      if (!supportsScopedRegistry() && isNewClassWithSameName) {
         // eslint-disable-next-line no-console
         console.error(
           [

package/components/core/test/ScopedElementsMixin.test.js

@@ -6,9 +6,9 @@ import {
 } from '@lit-labs/testing/fixtures.js';
 import { LitElement, html } from 'lit';
 import sinon from 'sinon';
-import { browserDetection } from '../src/browserDetection.js';
 
 import { ScopedElementsMixin, supportsScopedRegistry } from '../src/ScopedElementsMixin.js';
+import { browserDetection } from '../src/browserDetection.js';
 
 const hasRealScopedRegistrySupport = supportsScopedRegistry();
 const originalShadowRootProps = {
@@ -78,6 +78,8 @@ describe('ScopedElementsMixin', () => {
 
   describe('When scoped registries are supported', () => {
     it('registers elements on local registry', async () => {
+      if (!hasRealScopedRegistrySupport) return;
+
       const ceDefineSpy = sinon.spy(customElements, 'define');
 
       const el = /** @type {ScopedElementsHost} */ (
@@ -127,5 +129,36 @@ describe('ScopedElementsMixin', () => {
       expect(ceDefineSpy.calledWith('scoped-elements-child-no-reg')).to.be.true;
       ceDefineSpy.restore();
     });
+
+    it('fails when different classes are registered under different name', async () => {
+      class ScopedElementsHostNoReg2 extends ScopedElementsMixin(LitElement) {
+        static scopedElements = { 'scoped-elements-child-no-reg': class extends HTMLElement {} };
+
+        render() {
+          return html`<scoped-elements-child-no-reg></scoped-elements-child-no-reg>`;
+        }
+      }
+      customElements.define('scoped-elements-host-no-reg-2', ScopedElementsHostNoReg2);
+
+      const errorSpy = sinon.spy(console, 'error');
+      /** @type {ScopedElementsHostNoReg2} */ (
+        await fixture(html`<scoped-elements-host-no-reg></scoped-elements-host-no-reg>`)
+      );
+      /** @type {ScopedElementsHostNoReg2} */ (
+        await fixture(html`<scoped-elements-host-no-reg-2></scoped-elements-host-no-reg-2>`)
+      );
+
+      expect(errorSpy.args[0][0]).to.equal(
+        [
+          'You are trying to re-register the "scoped-elements-child-no-reg" custom element with a different class via ScopedElementsMixin.',
+          'This is only possible with a CustomElementRegistry.',
+          'Your browser does not support this feature so you will need to load a polyfill for it.',
+          'Load "@webcomponents/scoped-custom-element-registry" before you register ANY web component to the global customElements registry.',
+          'e.g. add "<script src="/node_modules/@webcomponents/scoped-custom-element-registry/scoped-custom-element-registry.min.js"></script>" as your first script tag.',
+          'For more details you can visit https://open-wc.org/docs/development/scoped-elements/',
+        ].join('\n'),
+      );
+      errorSpy.restore();
+    });
   });
 });

package/components/core/test/SlotMixin.test.js

@@ -1,31 +1,14 @@
-import sinon from 'sinon';
 import { defineCE, expect, fixture, fixtureSync, unsafeStatic, html } from '@open-wc/testing';
-import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
 import { SlotMixin } from '@lion/ui/core.js';
 import { LitElement } from 'lit';
+import sinon from 'sinon';
+
+import { ScopedElementsMixin, supportsScopedRegistry } from '../src/ScopedElementsMixin.js';
 
 /**
  * @typedef {import('../types/SlotMixinTypes.js').SlotHost} SlotHost
  */
 
-// @ts-ignore
-const createElementNative = ShadowRoot.prototype.createElement;
-function mockScopedRegistry() {
-  const outputObj = { createElementCallCount: 0 };
-  // @ts-expect-error wait for browser support
-  ShadowRoot.prototype.createElement = (tagName, options) => {
-    outputObj.createElementCallCount += 1;
-    // Return an element that lit can use as render target
-    return createElementNative(tagName, options);
-  };
-  return outputObj;
-}
-
-function unMockScopedRegistry() {
-  // @ts-expect-error wait for browser support
-  ShadowRoot.prototype.createElement = createElementNative;
-}
-
 describe('SlotMixin', () => {
   it('inserts provided element into light dom and sets slot', async () => {
     const tag = defineCE(
@@ -568,8 +551,11 @@ describe('SlotMixin', () => {
   });
 
   describe('Scoped Registries', () => {
-    it('supports scoped elements when polyfill loaded', async () => {
-      const outputObj = mockScopedRegistry();
+    it('supports scoped elements when scoped registries supported (or polyfill loaded)', async () => {
+      if (!supportsScopedRegistry()) return;
+
+      // @ts-expect-error
+      const createElSpy = sinon.spy(ShadowRoot.prototype, 'createElement');
 
       class ScopedEl extends LitElement {}
 
@@ -600,14 +586,14 @@ describe('SlotMixin', () => {
       const tag = unsafeStatic(tagName);
       await fixture(html`<${tag}></${tag}>`);
 
-      expect(outputObj.createElementCallCount).to.equal(1);
+      expect(createElSpy.callCount).to.equal(1);
 
-      unMockScopedRegistry();
+      createElSpy.restore();
     });
 
-    it('does not scope elements when polyfill not loaded', async () => {
-      // @ts-expect-error
-      ShadowRoot.prototype.createElement = null;
+    it('does not scope elements when scoped registries not supported (or polyfill not loaded)', async () => {
+      if (supportsScopedRegistry()) return;
+
       class ScopedEl extends LitElement {}
 
       const tagName = defineCE(
@@ -645,7 +631,6 @@ describe('SlotMixin', () => {
 
       document.body.removeChild(renderTarget);
       docSpy.restore();
-      unMockScopedRegistry();
     });
   });
 });

package/components/form-core/src/FormControlMixin.js

@@ -274,7 +274,7 @@ const FormControlMixinImplementation = superclass =>
       super.updated(changedProperties);
 
       if (changedProperties.has('disabled')) {
-        this._inputNode?.setAttribute('aria-disabled', this.disabled.toString());
+        this._inputNode?.setAttribute('aria-disabled', `${Boolean(this.disabled)}`);
       }
 
       if (changedProperties.has('_ariaLabelledNodes')) {

package/components/form-core/src/validate/ValidateMixin.js

@@ -10,10 +10,10 @@ import { SyncUpdatableMixin } from '../utils/SyncUpdatableMixin.js';
 import { LionValidationFeedback } from './LionValidationFeedback.js';
 import { ResultValidator as MetaValidator } from './ResultValidator.js';
 import { Unparseable } from './Unparseable.js';
-import { Validator } from './Validator.js';
 import { Required } from './validators/Required.js';
 import { FormControlMixin } from '../FormControlMixin.js';
-
+// eslint-disable-next-line no-unused-vars
+import { Validator } from './Validator.js';
 // TODO: [v1] make all @readOnly => @readonly and actually make sure those values cannot be set
 
 /**
@@ -460,7 +460,9 @@ export const ValidateMixinImplementation = superclass =>
 
       if (isEmpty) {
         const hasSingleValue = !(/** @type {*  & ValidateHost} */ (this)._isFormOrFieldset);
-        const requiredValidator = this._allValidators.find(v => v instanceof Required);
+        const requiredValidator = this._allValidators.find(
+          v => /** @type {typeof Validator} */ (v.constructor)?.validatorName === 'Required',
+        );
         if (requiredValidator) {
           this.__syncValidationResult = [{ validator: requiredValidator, outcome: true }];
         }
@@ -685,7 +687,10 @@ export const ValidateMixinImplementation = superclass =>
       }
 
       for (const validatorToSetup of this._allValidators) {
-        if (!(validatorToSetup instanceof Validator)) {
+        // disable dot notation to avoid the renaming for the prop during build/minification
+        const validatorCtor = /** @type {typeof Validator}  */ (validatorToSetup.constructor);
+        // eslint-disable-next-line dot-notation
+        if (validatorCtor['_$isValidator$'] === undefined) {
           // throws in constructor are not visible to end user so we do both
           const errorType = Array.isArray(validatorToSetup) ? 'array' : typeof validatorToSetup;
           const errorMessage = `Validators array only accepts class instances of Validator. Type "${errorType}" found. This may be caused by having multiple installations of "@lion/ui/form-core.js".`;

package/components/form-core/src/validate/Validator.js

@@ -1,10 +1,10 @@
 /**
  * @typedef {import('../../types/validate/index.js').FeedbackMessageData} FeedbackMessageData
- * @typedef {import('../../types/validate/index.js').ValidatorParam} ValidatorParam
- * @typedef {import('../../types/validate/index.js').ValidatorConfig} ValidatorConfig
  * @typedef {import('../../types/validate/index.js').ValidatorOutcome} ValidatorOutcome
- * @typedef {import('../../types/validate/index.js').ValidatorName} ValidatorName
+ * @typedef {import('../../types/validate/index.js').ValidatorConfig} ValidatorConfig
+ * @typedef {import('../../types/validate/index.js').ValidatorParam} ValidatorParam
  * @typedef {import('../../types/validate/index.js').ValidationType} ValidationType
+ * @typedef {import('../../types/validate/index.js').ValidatorName} ValidatorName
  * @typedef {import('../FormControlMixin.js').FormControlHost} FormControlHost
  */
 
@@ -32,8 +32,22 @@ export class Validator extends EventTarget {
      * @type {ValidationType}
      */
     this.type = config?.type || 'error';
+    /**
+     * Disable dot notation to avoid the renaming for the prop during build/minification
+     */
   }
 
+  /**
+   * This unique marker allows us to identify Validator instances across different lion versions.
+   * It's meant to be used as a replacement for an instanceof check.
+   *
+   * N.B. it's important to keep the bracket notation, as `static _$isValidator$ = true;` will
+   * be renamed during minification and that leads to different names across different
+   * lion versions.
+   * @type {boolean}
+   */
+  static ['_$isValidator$'] = true;
+
   /**
    * The name under which validation results get registered. For convenience and predictability, this
    * should always be the same as the constructor name (since it will be obfuscated in js builds,

package/components/form-core/test/validate/Validator.test.js

@@ -1,3 +1,4 @@
+/* eslint-disable dot-notation */
 import { LitElement } from 'lit';
 import { defineCE, expect, fixture, html, unsafeStatic } from '@open-wc/testing';
 import sinon from 'sinon';
@@ -187,6 +188,13 @@ describe('Validator', () => {
     expect(disconnectSpy.calledWith(el)).to.equal(true);
   });
 
+  it('adds static ["_$isValidator$"] property as a marker to identify the Validator class across different lion versions (as instanceof cannot be used)', async () => {
+    const myValidator = new Validator();
+
+    expect(myValidator.constructor['_$isValidator$']).to.exist;
+    expect(myValidator.constructor['_$isValidator$']).to.be.true;
+  });
+
   describe('Types', () => {
     it('has type "error" by default', async () => {
       expect(new Validator().type).to.equal('error');

package/components/form-core/test-suites/ValidateMixin.suite.js

@@ -2,25 +2,25 @@ import { LitElement } from 'lit';
 import { aTimeout, defineCE, expect, fixture, html, unsafeStatic } from '@open-wc/testing';
 import {
   getFormControlMembers,
-  AlwaysInvalid,
-  AlwaysValid,
   AsyncAlwaysInvalid,
   AsyncAlwaysValid,
+  AlwaysInvalid,
+  AlwaysValid,
 } from '@lion/ui/form-core-test-helpers.js';
 import sinon from 'sinon';
 import {
+  ResultValidator,
+  ValidateMixin,
   EqualsLength,
+  Unparseable,
   MaxLength,
   MinLength,
-  Required,
-  ResultValidator,
-  Unparseable,
-  ValidateMixin,
   Validator,
+  Required,
 } from '@lion/ui/form-core.js';
 
-import '@lion/ui/define/lion-field.js';
 import '@lion/ui/define/lion-validation-feedback.js';
+import '@lion/ui/define/lion-field.js';
 
 /**
  * @typedef {import('@lion/ui/form-core.js').LionField} LionField

package/components/overlays/src/OverlayController.js

@@ -192,7 +192,6 @@ export class OverlayController extends EventTarget {
       zIndex: 9999,
     };
 
-    this.manager.add(this);
     /** @protected */
     this._contentId = `overlay-content--${Math.random().toString(36).slice(2, 10)}`;
     /** @private */
@@ -475,6 +474,14 @@ export class OverlayController extends EventTarget {
     this._init();
     /** @private */
     this.__elementToFocusAfterHide = undefined;
+
+    if (!this.#isRegisteredOnManager()) {
+      this.manager.add(this);
+    }
+  }
+
+  #isRegisteredOnManager() {
+    return Boolean(this.manager.list.find(ctrl => this === ctrl));
   }
 
   /**
@@ -1285,6 +1292,14 @@ export class OverlayController extends EventTarget {
           wasMouseUpInside = false;
         });
       };
+
+      /** @type {EventListenerOrEventListenerObject} */
+      this.__onWindowBlur = () => {
+        // When the current window loses the focus (clicking outside iframe) the overlay gets hidden
+        setTimeout(() => {
+          this.hide();
+        });
+      };
     }
 
     this.contentWrapperNode[addOrRemoveListener](
@@ -1321,6 +1336,11 @@ export class OverlayController extends EventTarget {
       (this.__onDocumentMouseUp),
       true,
     );
+    window[addOrRemoveListener](
+      'blur',
+      /** @type {EventListenerOrEventListenerObject} */
+      (this.__onWindowBlur),
+    );
   }
 
   /**
@@ -1341,6 +1361,10 @@ export class OverlayController extends EventTarget {
     this.__handleOverlayStyles({ phase: 'teardown' });
     this._handleFeatures({ phase: 'teardown' });
     this.__wrappingDialogNode?.removeEventListener('cancel', this.__cancelHandler);
+
+    if (this.#isRegisteredOnManager()) {
+      this.manager.remove(this);
+    }
   }
 
   /** @private */

package/components/overlays/src/OverlayMixin.js

@@ -182,11 +182,13 @@ export const OverlayMixinImplementation = superclass =>
       this._setupOverlayCtrl();
     }
 
-    disconnectedCallback() {
+    async disconnectedCallback() {
       super.disconnectedCallback();
-      if (this._overlayCtrl) {
-        this._teardownOverlayCtrl();
-      }
+
+      if (!this._overlayCtrl) return;
+      if (await this.#isMovingInDom()) return;
+
+      this._teardownOverlayCtrl();
     }
 
     /**
@@ -253,6 +255,7 @@ export const OverlayMixinImplementation = superclass =>
     _teardownOverlayCtrl() {
       this._teardownOpenCloseListeners();
       this.__teardownSyncFromOverlayController();
+
       /** @type {OverlayController} */
       (this._overlayCtrl).teardown();
     }
@@ -387,5 +390,15 @@ export const OverlayMixinImplementation = superclass =>
         ctrl._popper.update();
       }
     }
+
+    /**
+     * When we're moving around in dom, disconnectedCallback gets called.
+     * Before we decide to teardown, let's wait to see if we were not just moving nodes around.
+     * @return {Promise<boolean>}
+     */
+    async #isMovingInDom() {
+      await this.updateComplete;
+      return this.isConnected;
+    }
   };
 export const OverlayMixin = dedupeMixin(OverlayMixinImplementation);

package/components/overlays/src/utils/adopt-styles.js

@@ -25,7 +25,7 @@ export const _adoptStyleUtils = {
   adoptStyles: undefined,
 };
 
-const styleCache = new Map();
+const styleCache = new WeakMap();
 
 /**
  * @param {CSSStyleSheet} cssStyleSheet
@@ -81,10 +81,10 @@ function adoptStyleWhenAdoptedStylesheetsNotSupported(
  */
 function handleCache(renderRoot, style, { teardown = false } = {}) {
   let haltFurtherExecution = false;
-  if (!styleCache.has(renderRoot)) {
+  if (renderRoot && !styleCache.has(renderRoot)) {
     styleCache.set(renderRoot, []);
   }
-  const addedStylesForRoot = styleCache.get(renderRoot);
+  const addedStylesForRoot = styleCache.get(renderRoot) ?? [];
   const foundStyle = addedStylesForRoot.find(
     (/** @type {import("lit").CSSResultOrNative} */ addedStyle) => style === addedStyle,
   );

package/components/overlays/test/OverlayController.test.js

@@ -36,6 +36,14 @@ async function mimicEscapePress(element) {
   await aTimeout(0);
 }
 
+/**
+ * @param {OverlayController} ctrlToFind
+ * @returns {boolean}
+ */
+function isRegisteredOnManager(ctrlToFind) {
+  return Boolean(ctrlToFind.manager?.list?.find(ctrl => ctrlToFind === ctrl));
+}
+
 /**
  * Make sure that all browsers serialize html in a similar way
  * (Firefox tends to output empty style attrs)
@@ -275,8 +283,18 @@ describe('OverlayController', () => {
     });
   });
 
-  // TODO: Add teardown feature tests
-  describe('Teardown', () => {});
+  // TODO: Add more teardown feature tests
+  describe('Teardown', () => {
+    it('unregisters itself from overlayManager', async () => {
+      const ctrl = new OverlayController(withGlobalTestConfig());
+
+      expect(isRegisteredOnManager(ctrl)).to.be.true;
+
+      ctrl.teardown();
+
+      expect(isRegisteredOnManager(ctrl)).to.be.false;
+    });
+  });
 
   describe('Node Configuration', () => {
     describe('Content', async () => {
@@ -1092,6 +1110,19 @@ describe('OverlayController', () => {
 
         expect(ctrl.isShown).to.be.true;
       });
+
+      it('hides when window is blurred (useful for iframes)', async () => {
+        const ctrl = new OverlayController({
+          ...withGlobalTestConfig(),
+          hidesOnOutsideClick: true,
+        });
+        await ctrl.show();
+
+        window.dispatchEvent(new Event('blur'));
+        await aTimeout(0);
+
+        expect(ctrl.isShown).to.be.false;
+      });
     });
 
     describe('elementToFocusAfterHide', () => {