@lion/overlays - npm Package Compare versions

Comparing version 0.17.0 to 0.18.0

CHANGELOG.md

 # Change Log
 
+## 0.18.0
+
+### Minor Changes
+
+- 26f683d0: - Make the OverlayController constructor phase synchronous.
+  - Trigger a setup of the OverlayController on every connectedCallback
+  - Execute a new OverlayController after (shadowDom) rendering of the element is done
+  - Teardown the OverlayController on every disconnectedCallback
+  - This means moving a dialog triggers teardown in the old location and setup in the new location
+  - Restore the original light dom (if needed) in the teardown phase of the OverlayController
+
+### Patch Changes
+
+- Updated dependencies [874ff483]
+  - @lion/core@0.11.0
+
 ## 0.17.0
@@ -4,0 +20,0 @@

docs/40-system-configuration.md

@@ -94,5 +94,3 @@ [//]: # 'AUTO INSERT HEADER PREPUBLISH'
       </button>
-      <div slot="content" class="demo-overlay">
-        Hello!
-      </div>
+      <div slot="content" class="demo-overlay">Hello!</div>
     </demo-overlay-system>
@@ -99,0 +97,0 @@ `;

package.json

 {
   "name": "@lion/overlays",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "description": "Overlays System using lit-html for rendering",
@@ -35,3 +35,3 @@ "license": "MIT",
   "dependencies": {
-    "@lion/core": "0.10.0",
+    "@lion/core": "0.11.0",
     "popper.js": "^1.15.0",
@@ -38,0 +38,0 @@ "singleton-manager": "1.1.2"

src/OverlayController.js

@@ -271,4 +271,4 @@ import '@lion/core/src/differentKeyEventNamesShimIE.js';
 
-  async _init({ cfgToAdd }) {
-    this.__initcontentWrapperNode({ cfgToAdd });
+  _init({ cfgToAdd }) {
+    this.__initContentWrapperNode({ cfgToAdd });
     this.__initConnectionTarget();
@@ -314,3 +314,3 @@
    */
-  __initcontentWrapperNode({ cfgToAdd }) {
+  __initContentWrapperNode({ cfgToAdd }) {
     if (this.config.contentWrapperNode && this.placementMode === 'local') {
@@ -573,3 +573,3 @@ /** config [l2],[l3],[l4] */
    */
-  async _handleFeatures({ phase }) {
+  _handleFeatures({ phase }) {
     this._handleZIndex({ phase });
@@ -862,7 +862,11 @@
 
+    if (this.placementMode === 'global' && this.__isContentNodeProjected) {
+      this.__originalContentParent.appendChild(this.contentNode);
+    }
+
     // Remove the content node wrapper from the global rootnode
-    this._teardowncontentWrapperNode();
+    this._teardownContentWrapperNode();
   }
 
-  _teardowncontentWrapperNode() {
+  _teardownContentWrapperNode() {
     if (
@@ -869,0 +873,0 @@ this.placementMode === 'global' &&

src/OverlayMixin.js

@@ -25,7 +25,4 @@ import { dedupeMixin } from '@lion/core';
         this.opened = false;
+        this.__needsSetup = true;
         this.config = {};
-
-        this._overlaySetupComplete = new Promise(resolve => {
-          this.__overlaySetupCompleteResolve = resolve;
-        });
       }
@@ -138,19 +135,11 @@
       connectedCallback() {
-        if (super.connectedCallback) {
-          super.connectedCallback();
-        }
-
-        // Wait for DOM to be ready before setting up the overlay, else extensions like rich select breaks
+        super.connectedCallback();
+        // we do a setup after every connectedCallback as firstUpdated will only be called once
+        this.__needsSetup = true;
         this.updateComplete.then(() => {
-          if (!this.__isOverlaySetup) {
+          if (this.__needsSetup) {
             this._setupOverlayCtrl();
           }
+          this.__needsSetup = false;
         });
-
-        // When dom nodes are being moved around (meaning connected/disconnected are being fired
-        // repeatedly), we need to delay the teardown until we find a 'permanent disconnect'
-        if (this.__rejectOverlayDisconnectComplete) {
-          // makes sure _overlayDisconnectComplete never resolves: we don't want a teardown
-          this.__rejectOverlayDisconnectComplete();
-        }
       }
@@ -162,25 +151,5 @@
         }
-
-        if (!this._overlayCtrl) {
-          return;
+        if (this._overlayCtrl) {
+          this._teardownOverlayCtrl();
         }
-
-        this._overlayDisconnectComplete = new Promise((resolve, reject) => {
-          this.__resolveOverlayDisconnectComplete = resolve;
-          this.__rejectOverlayDisconnectComplete = reject;
-        });
-
-        setTimeout(() => {
-          // we start the teardown below
-          this.__resolveOverlayDisconnectComplete();
-        });
-
-        // We need to prevent that we create a setup/teardown cycle during startup, where it
-        // is common that the overlay system moves around nodes. Therefore, we make the
-        // teardown async, so that it only happens when we are permanently disconnecting from dom
-        this._overlayDisconnectComplete
-          .then(() => {
-            this._teardownOverlayCtrl();
-          })
-          .catch(() => {});
       }
@@ -219,4 +188,2 @@
         this._setupOpenCloseListeners();
-        this.__overlaySetupCompleteResolve();
-        this.__isOverlaySetup = true;
       }
@@ -228,3 +195,2 @@
         this._overlayCtrl.teardown();
-        this.__isOverlaySetup = false;
       }
@@ -231,0 +197,0 @@

test/local-positioning.test.js

@@ -106,5 +106,3 @@ import { expect, fixture, fixtureSync, html } from '@open-wc/testing';
       await fixture(html`
-        <div style="position: absolute; top: 0;">
-          ${ctrl.invokerNode}${ctrl.content}
-        </div>
+        <div style="position: absolute; top: 0;">${ctrl.invokerNode}${ctrl.content}</div>
       `);
@@ -111,0 +109,0 @@

test/OverlayController.test.js

@@ -70,7 +70,3 @@ /* eslint-disable no-new */
         if (mode === 'inline') {
-          contentNode = await fixture(html`
-            <div>
-              I should be on top
-            </div>
-          `);
+          contentNode = await fixture(html` <div>I should be on top</div> `);
           contentNode.style.zIndex = zIndexVal;
@@ -196,2 +192,38 @@ }
     });
+
+    it('[global] restores contentNode if it was/is a projected node', async () => {
+      const shadowHost = document.createElement('div');
+      shadowHost.id = 'shadowHost';
+      shadowHost.attachShadow({ mode: 'open' });
+      shadowHost.shadowRoot.innerHTML = `
+        <div id="contentWrapperNode">
+          <slot name="contentNode"></slot>
+          <my-arrow></my-arrow>
+        </div>
+      `;
+      const contentNode = document.createElement('div');
+      contentNode.slot = 'contentNode';
+      shadowHost.appendChild(contentNode);
+
+      const wrapper = await fixture('<div id="wrapper"></div>');
+      // Ensure the contentNode is connected to DOM
+      wrapper.appendChild(shadowHost);
+
+      // has one child = <div slot="contentNode"></div>
+      expect(shadowHost.children.length).to.equal(1);
+
+      const ctrl = new OverlayController({
+        ...withLocalTestConfig(),
+        placementMode: 'global',
+        contentNode,
+        contentWrapperNode: shadowHost,
+      });
+
+      // has no children as content gets moved to the body
+      expect(shadowHost.children.length).to.equal(0);
+      ctrl.teardown();
+
+      // restores original light dom in teardown
+      expect(shadowHost.children.length).to.equal(1);
+    });
   });
@@ -1381,3 +1413,3 @@
 
-    it('throws if contentNodewrapper is not provided for projected contentNode', async () => {
+    it('throws if contentNodeWrapper is not provided for projected contentNode', async () => {
       const shadowHost = document.createElement('div');
@@ -1384,0 +1416,0 @@ shadowHost.attachShadow({ mode: 'open' });

test/utils-tests/contain-focus.test.js

@@ -38,5 +38,3 @@ import { expect, fixture, html } from '@open-wc/testing';
     <button id="outside-1">outside 1</button>
-    <div id="rootElement">
-      ${interactionElementsNode}
-    </div>
+    <div id="rootElement">${interactionElementsNode}</div>
     <button id="outside-2">outside 2</button>
@@ -43,0 +41,0 @@ </div>

No alert changes

Improved metrics

Total package byte prevSize

233424

increased by0.22%

Worsened metrics

Lines of code

4234

decreased by-0.05%

Dependency changes

• + Added@lion/core@0.11.0(transitive)

• - Removed@lion/core@0.10.0(transitive)

• Updated@lion/core@0.11.0