@lion/ui 0.9.0 → 0.10.0

package/components/overlays/src/OverlayMixin.js

@@ -24,6 +24,8 @@ export const OverlayMixinImplementation = superclass =>
       };
     }
 
+    #hasSetup = false;
+
     constructor() {
       super();
       /**
@@ -173,22 +175,23 @@ export const OverlayMixinImplementation = superclass =>
       }
     }
 
-    /**
-     * @param {import('lit-element').PropertyValues } changedProperties
-     */
-    firstUpdated(changedProperties) {
-      super.firstUpdated(changedProperties);
+    connectedCallback() {
+      super.connectedCallback();
 
-      this._setupOverlayCtrl();
+      this.updateComplete.then(() => {
+        if (this.#hasSetup) return;
+        this._setupOverlayCtrl();
+        this.#hasSetup = true;
+      });
     }
 
     async disconnectedCallback() {
       super.disconnectedCallback();
 
-      if (!this._overlayCtrl) return;
-      if (await this.#isMovingInDom()) return;
-
-      this._teardownOverlayCtrl();
+      if (await this._isPermanentlyDisconnected()) {
+        this._teardownOverlayCtrl();
+        this.#hasSetup = false;
+      }
     }
 
     /**
@@ -238,6 +241,8 @@ export const OverlayMixinImplementation = superclass =>
 
     /** @protected */
     _setupOverlayCtrl() {
+      if (this._overlayCtrl) return;
+
       /** @type {OverlayController} */
       this._overlayCtrl = this._defineOverlay({
         contentNode: this._overlayContentNode,
@@ -253,11 +258,12 @@ export const OverlayMixinImplementation = superclass =>
 
     /** @protected */
     _teardownOverlayCtrl() {
+      if (!this._overlayCtrl) return;
+
       this._teardownOpenCloseListeners();
       this.__teardownSyncFromOverlayController();
 
-      /** @type {OverlayController} */
-      (this._overlayCtrl).teardown();
+      /** @type {OverlayController} */ (this._overlayCtrl).teardown();
     }
 
     /**
@@ -396,9 +402,9 @@ export const OverlayMixinImplementation = superclass =>
      * Before we decide to teardown, let's wait to see if we were not just moving nodes around.
      * @return {Promise<boolean>}
      */
-    async #isMovingInDom() {
+    async _isPermanentlyDisconnected() {
       await this.updateComplete;
-      return this.isConnected;
+      return !this.isConnected;
     }
   };
 export const OverlayMixin = dedupeMixin(OverlayMixinImplementation);

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

@@ -103,12 +103,12 @@ const withLocalTestConfig = () =>
 async function createNestedEscControllers(parentContent) {
   const childContent = /** @type {HTMLDivElement} */ (parentContent.querySelector('div[id]'));
   // Assert valid fixure
-  const isValid =
-    (parentContent.id === 'parent-overlay--hidesOnEsc' ||
-      parentContent.id === 'parent-overlay--hidesOnOutsideEsc') &&
-    (childContent.id === 'child-overlay--hidesOnEsc' ||
-      childContent.id === 'child-overlay--hidesOnOutsideEsc');
-  if (!isValid) {
+  const isValidFixture =
+    (parentContent.id.startsWith('parent-overlay--hidesOnEsc') ||
+      parentContent.id.startsWith('parent-overlay--hidesOnOutsideEsc')) &&
+    (childContent.id.startsWith('child-overlay--hidesOnEsc') ||
+      childContent.id.startsWith('child-overlay--hidesOnOutsideEsc'));
+  if (!isValidFixture) {
     throw new Error('Provide a valid fixture');
   }
 
@@ -117,8 +117,8 @@ async function createNestedEscControllers(parentContent) {
     shadowRootParent.appendChild(childContent);
   }
 
-  const parentHasOutsideOnEsc = parentContent.id === 'parent-overlay--hidesOnOutsideEsc';
-  const childHasOutsideOnEsc = childContent.id === 'child-overlay--hidesOnOutsideEsc';
+  const parentHasOutsideOnEsc = parentContent.id.startsWith('parent-overlay--hidesOnOutsideEsc');
+  const childHasOutsideOnEsc = childContent.id.startsWith('child-overlay--hidesOnOutsideEsc');
 
   const parentConfig = parentHasOutsideOnEsc ? { hidesOnOutsideEsc: true } : { hidesOnEsc: true };
   const childConfig = childHasOutsideOnEsc ? { hidesOnOutsideEsc: true } : { hidesOnEsc: true };
@@ -787,6 +787,9 @@ describe('OverlayController', () => {
 
           expect(parentOverlay.isShown).to.be.false;
           expect(childOverlay.isShown).to.be.true;
+
+          await childOverlay.teardown();
+          await parentOverlay.teardown();
         });
 
         it('on [Escape] press outside overlays: parent stays shown, child hides', async () => {

package/components/overlays/test-suites/OverlayMixin.suite.js

@@ -1,18 +1,25 @@
-import { expect, fixture, html, nextFrame, aTimeout } from '@open-wc/testing';
-
-import sinon from 'sinon';
+import {
+  unsafeStatic,
+  nextFrame,
+  aTimeout,
+  defineCE,
+  fixture,
+  expect,
+  html,
+} from '@open-wc/testing';
 import { overlays as overlaysManager, OverlayController } from '@lion/ui/overlays.js';
-
-import '@lion/ui/define/lion-dialog.js';
 import { browserDetection } from '@lion/ui/core.js';
+import { cache } from 'lit/directives/cache.js';
+import '@lion/ui/define/lion-dialog.js';
+import { LitElement } from 'lit';
+import sinon from 'sinon';
 
 /**
- * @typedef {import('../types/OverlayConfig.js').OverlayConfig} OverlayConfig
  * @typedef {import('../types/OverlayMixinTypes.js').DefineOverlayConfig} DefineOverlayConfig
- * @typedef {import('../types/OverlayMixinTypes.js').OverlayHost} OverlayHost
- * @typedef {import('../types/OverlayMixinTypes.js').OverlayMixin} OverlayMixin
- * @typedef {import('lit').LitElement} LitElement
  * @typedef {LitElement & OverlayHost & {_overlayCtrl:OverlayController}} OverlayEl
+ * @typedef {import('../types/OverlayMixinTypes.js').OverlayMixin} OverlayMixin
+ * @typedef {import('../types/OverlayMixinTypes.js').OverlayHost} OverlayHost
+ * @typedef {import('../types/OverlayConfig.js').OverlayConfig} OverlayConfig
  */
 
 function getGlobalOverlayCtrls() {
@@ -331,6 +338,173 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
       }).to.not.throw;
       stub.restore();
     });
+
+    describe('Teardown', () => {
+      it('does not teardown when moving dom nodes', async () => {
+        const el = /** @type {OverlayEl} */ (
+          await fixture(html`
+        <${tag}>
+          <div slot="content">content</div>
+          <button slot="invoker">invoker button</button>
+        </${tag}>
+      `)
+        );
+        // @ts-expect-error [allow-protected] in tests
+        const teardownSpy = sinon.spy(el, '_teardownOverlayCtrl');
+        // @ts-expect-error [allow-protected] in tests
+        const spyDisconnected = sinon.spy(el, '_isPermanentlyDisconnected');
+
+        // move around in dom
+        const newParent = document.createElement('div');
+        document.body.appendChild(newParent);
+        newParent.appendChild(el);
+        expect(spyDisconnected.callCount).to.equal(1);
+
+        const otherParent = document.createElement('div');
+        document.body.appendChild(otherParent);
+        otherParent.appendChild(el);
+        await aTimeout(0);
+
+        expect(spyDisconnected.callCount).to.equal(2);
+        expect(teardownSpy.callCount).to.equal(0);
+
+        // simulate a permanent disconnect
+        otherParent.removeChild(el);
+        await aTimeout(0);
+
+        expect(teardownSpy.callCount).to.equal(1);
+      });
+
+      it('allows to disconnect and reconnect later', async () => {
+        const el = /** @type {OverlayEl} */ (
+          await fixture(html`
+        <${tag}>
+          <div slot="content">content</div>
+          <button slot="invoker">invoker button</button>
+        </${tag}>
+      `)
+        );
+        // @ts-expect-error [allow-protected] in tests
+        const teardownSpy = sinon.spy(el, '_teardownOverlayCtrl');
+        // @ts-expect-error [allow-protected] in tests
+        const spyDisconnected = sinon.spy(el, '_isPermanentlyDisconnected');
+        // @ts-expect-error [allow-protected] in tests
+        const setupSpy = sinon.spy(el, '_setupOverlayCtrl');
+
+        // 'permanently' disconnect (although we will reconnect later)
+        const offlineParent = document.createElement('div');
+        offlineParent.appendChild(el);
+        await aTimeout(0);
+
+        expect(spyDisconnected.callCount).to.equal(1);
+        expect(teardownSpy.callCount).to.equal(1);
+
+        // reconnect
+        document.body.appendChild(offlineParent);
+        await aTimeout(0);
+
+        expect(setupSpy.callCount).to.equal(1);
+      });
+
+      it('works with cache directive when reconnected', async () => {
+        class CachingContext extends LitElement {
+          static properties = {
+            switched: { type: Boolean },
+          };
+
+          constructor() {
+            super();
+
+            this.switched = false;
+          }
+
+          get overlayEl() {
+            return this.shadowRoot?.querySelector('#myOverlay');
+          }
+
+          render() {
+            return html`${cache(
+              this.switched
+                ? html`something else`
+                : html`<${tag} id="myOverlay">
+              <div slot="content">content b</div>
+              <button slot="invoker">invoker button b</button>
+            </${tag}>`,
+            )}`;
+          }
+        }
+
+        const cachingTagName = defineCE(CachingContext);
+        const cachingTag = unsafeStatic(cachingTagName);
+
+        const el = /** @type {CachingContext} */ (
+          await fixture(html`
+        <${cachingTag}></${cachingTag}>
+      `)
+        );
+
+        // @ts-expect-error [allow-protected] in tests
+        const teardownSpy = sinon.spy(el.overlayEl, '_teardownOverlayCtrl');
+        // @ts-expect-error [allow-protected] in tests
+        const spyDisconnected = sinon.spy(el.overlayEl, '_isPermanentlyDisconnected');
+        // @ts-expect-error [allow-protected] in tests
+        const setupSpy = sinon.spy(el.overlayEl, '_setupOverlayCtrl');
+
+        el.switched = true;
+        // render the new content
+        await el.updateComplete;
+        // wait for the teardown to complete
+        await el.updateComplete;
+
+        expect(spyDisconnected.callCount).to.equal(1);
+        expect(teardownSpy.callCount).to.equal(1);
+        expect(setupSpy.callCount).to.equal(0);
+
+        el.switched = false;
+        await el.updateComplete;
+
+        expect(setupSpy.callCount).to.equal(1);
+      });
+
+      it('correctly removes event listeners when disconnected from dom', async () => {
+        const el = /** @type {OverlayEl} */ (
+          await fixture(html`
+          <${tag}>
+            <div slot="content">content</div>
+            <button slot="invoker">invoker button</button>
+          </${tag}>
+        `)
+        );
+
+        const eventRemoveSpy = sinon.spy(el._overlayCtrl, 'removeEventListener');
+        el.parentNode?.removeChild(el);
+        await el.updateComplete;
+
+        expect(eventRemoveSpy.callCount).to.equal(0);
+
+        await el.updateComplete;
+        const hasOneInstanceFor = (
+          /** @type {string} */ eventName,
+          /** @type {any[][]} */ eventsToSearch,
+          /** @type {string} */ methodToRemove,
+        ) =>
+          Boolean(
+            eventsToSearch.filter(
+              ([eventToSearch, methodToSearch]) =>
+                eventToSearch === eventName && methodToSearch === methodToRemove,
+            ).length,
+          );
+
+        // @ts-expect-error [allow-private] in tests
+        expect(hasOneInstanceFor('show', eventRemoveSpy.args, el.__onOverlayCtrlShow)).to.be.true;
+        // @ts-expect-error [allow-private] in tests
+        expect(hasOneInstanceFor('hide', eventRemoveSpy.args, el.__onOverlayCtrlHide)).to.be.true;
+        // @ts-expect-error [allow-private] in tests
+        expect(hasOneInstanceFor('before-show', eventRemoveSpy.args, el.__onBeforeShow)).to.be.true;
+        // @ts-expect-error [allow-private] in tests
+        expect(hasOneInstanceFor('before-hide', eventRemoveSpy.args, el.__onBeforeHide)).to.be.true;
+      });
+    });
   });
 
   describe(`OverlayMixin${suffix} nested`, () => {
@@ -388,6 +562,7 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
         const moveTarget = /** @type {OverlayEl} */ (await fixture('<div id="target"></div>'));
         moveTarget.appendChild(el);
         await el.updateComplete;
+
         expect(getGlobalOverlayCtrls().length).to.equal(1);
       }
     });

package/components/overlays/types/ArrowMixinTypes.ts

@@ -4,25 +4,34 @@ import { Options as PopperOptions, State } from '@popperjs/core/lib/popper.js';
 import { OverlayConfig } from './OverlayConfig.js';
 
 export declare class ArrowHost {
-  static get properties(): {
+  static properties: {
     hasArrow: {
       type: BooleanConstructor;
       reflect: boolean;
       attribute: string;
     };
   };
+
   hasArrow: boolean;
+
   repositionComplete: Promise<void>;
 
-  static get styles(): CSSResultArray;
+  static styles: CSSResultArray;
 
   render(): TemplateResult;
+
   protected _arrowTemplate(): TemplateResult;
+
   protected _arrowNodeTemplate(): TemplateResult;
+
   protected _defineOverlayConfig(): OverlayConfig;
+
   protected _getPopperArrowConfig(popperConfigToExtendFrom: Partial<PopperOptions>): Partial<PopperOptions>;
+
   private __setupRepositionCompletePromise(): void;
+
   get _arrowNode(): Element | null;
+
   private __syncFromPopperState(data: Partial<State>): void;
 }
 

package/components/overlays/types/OverlayConfig.ts

@@ -1,5 +1,20 @@
 import { Options } from '@popperjs/core';
 
+export type ViewportPlacement =
+  | 'center'
+  | 'top-left'
+  | 'top'
+  | 'top-right'
+  | 'right'
+  | 'bottom-right'
+  | 'bottom'
+  | 'bottom-left'
+  | 'left';
+
+
+export interface ViewportConfig {
+  placement: ViewportPlacement;
+}
 export interface OverlayConfig {
   // Positioning
 
@@ -80,17 +95,4 @@ export interface OverlayConfig {
   visibilityTriggerFunction?: Function;
 }
 
-export type ViewportPlacement =
-  | 'center'
-  | 'top-left'
-  | 'top'
-  | 'top-right'
-  | 'right'
-  | 'bottom-right'
-  | 'bottom'
-  | 'bottom-left'
-  | 'left';
 
-export interface ViewportConfig {
-  placement: ViewportPlacement;
-}

package/components/select-rich/src/LionSelectRich.js

@@ -423,6 +423,7 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
    */
   _teardownOverlayCtrl() {
     super._teardownOverlayCtrl();
+
     this._overlayCtrl.removeEventListener('show', this.__overlayOnShow);
     this._overlayCtrl.removeEventListener('before-show', this.__overlayBeforeShow);
     this._overlayCtrl.removeEventListener('hide', this.__overlayOnHide);
@@ -434,11 +435,12 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
    * @protected
    */
   async _alignInvokerWidth() {
+    await this.updateComplete;
+
     if (!this._overlayCtrl?.content) {
       return;
     }
 
-    await this.updateComplete;
     const initContentDisplay = this._overlayCtrl.content.style.display;
     const initContentMinWidth = this._overlayCtrl.contentWrapperNode.style.minWidth;
     const initContentWidth = this._overlayCtrl.contentWrapperNode.style.width;

package/components/select-rich/test/lion-select-rich.test.js

@@ -7,6 +7,7 @@ import '@lion/ui/define/lion-select-rich.js';
 import '@lion/ui/define/lion-listbox.js';
 import '@lion/ui/define/lion-option.js';
 import { LitElement } from 'lit';
+import sinon from 'sinon';
 import {
   fixture as _fixture,
   unsafeStatic,
@@ -711,6 +712,49 @@ describe('lion-select-rich', () => {
     });
   });
 
+  describe('Teardown', () => {
+    it('correctly removes event listeners when disconnected from dom', async () => {
+      const el = await fixture(html`
+        <lion-select-rich label="age">
+          <lion-option .choiceValue=${10}>Item 1</lion-option>
+          <lion-option .choiceValue=${20}>Item 2</lion-option>
+        </lion-select-rich>
+      `);
+
+      const { _overlayCtrl } = getSelectRichMembers(el);
+      const eventRemoveSpy = sinon.spy(_overlayCtrl, 'removeEventListener');
+
+      el.parentNode?.removeChild(el);
+
+      expect(eventRemoveSpy.callCount).to.equal(0);
+
+      await el.updateComplete;
+      expect(eventRemoveSpy.callCount).to.equal(0);
+
+      await el.updateComplete;
+
+      const hasOneInstanceFor = (
+        /** @type {string} */ eventName,
+        /** @type {any[][]} */ eventsToSearch,
+        /** @type {string} */ methodToRemove,
+      ) =>
+        Boolean(
+          eventsToSearch.filter(
+            ([eventToSearch, methodToSearch]) =>
+              eventToSearch === eventName && methodToSearch === methodToRemove,
+          ).length,
+        );
+
+      // @ts-expect-error [allow-private] in tests
+      expect(hasOneInstanceFor('show', eventRemoveSpy.args, el.__overlayOnShow)).to.be.true;
+      // @ts-expect-error [allow-private] in tests
+      expect(hasOneInstanceFor('before-show', eventRemoveSpy.args, el.__overlayBeforeShow)).to.be
+        .true;
+      // @ts-expect-error [allow-private] in tests
+      expect(hasOneInstanceFor('hide', eventRemoveSpy.args, el.__overlayOnHide)).to.be.true;
+    });
+  });
+
   describe('Subclassers', () => {
     it('allows to override the type of overlay', async () => {
       const mySelectTagString = defineCE(