@lion/ui 0.0.9 → 0.0.10

package/components/overlays/src/OverlayMixin.js

@@ -27,9 +27,8 @@ export const OverlayMixinImplementation = superclass =>
     constructor() {
       super();
       this.opened = false;
-      /** @private */
-      this.__needsSetup = true;
-      /** @type {OverlayConfig} */
+
+      /** @type {Partial<OverlayConfig>} */
       this.config = {};
 
       /** @type {EventListener} */
@@ -91,10 +90,10 @@ export const OverlayMixinImplementation = superclass =>
         ...this.config, // user provided (e.g. in template)
         popperConfig: {
           ...(overlayConfig.popperConfig || {}),
-          ...(this.config.popperConfig || {}),
+          ...(this.config?.popperConfig || {}),
           modifiers: [
             ...(overlayConfig.popperConfig?.modifiers || []),
-            ...(this.config.popperConfig?.modifiers || []),
+            ...(this.config?.popperConfig?.modifiers || []),
           ],
         },
       });
@@ -163,16 +162,13 @@ export const OverlayMixinImplementation = superclass =>
       }
     }
 
-    connectedCallback() {
-      super.connectedCallback();
-      // we do a setup after every connectedCallback as firstUpdated will only be called once
-      this.__needsSetup = true;
-      this.updateComplete.then(() => {
-        if (this.__needsSetup) {
-          this._setupOverlayCtrl();
-        }
-        this.__needsSetup = false;
-      });
+    /**
+     * @param {import('lit-element').PropertyValues } changedProperties
+     */
+    firstUpdated(changedProperties) {
+      super.firstUpdated(changedProperties);
+
+      this._setupOverlayCtrl();
     }
 
     disconnectedCallback() {
@@ -197,9 +193,12 @@ export const OverlayMixinImplementation = superclass =>
     }
 
     get _overlayBackdropNode() {
-      return /** @type {HTMLElement | undefined} */ (
-        Array.from(this.children).find(child => child.slot === 'backdrop')
-      );
+      if (!this.__cachedOverlayBackdropNode) {
+        this.__cachedOverlayBackdropNode = /** @type {HTMLElement | undefined} */ (
+          Array.from(this.children).find(child => child.slot === 'backdrop')
+        );
+      }
+      return this.__cachedOverlayBackdropNode;
     }
 
     get _overlayContentNode() {

package/components/overlays/src/OverlaysManager.js

@@ -3,8 +3,7 @@
  * @typedef {import('./OverlayController.js').OverlayController} OverlayController
  */
 
-import { globalOverlaysStyle } from './globalOverlaysStyle.js';
-import { setSiblingsInert, unsetSiblingsInert } from './utils/inert-siblings.js';
+import { overlayDocumentStyle } from './overlayDocumentStyle.js';
 
 // Export this as protected var, so that we can easily mock it in tests
 // TODO: combine with browserDetection of core?
@@ -23,34 +22,14 @@ export const _browserDetection = {
  * `OverlaysManager` which manages overlays which are rendered into the body
  */
 export class OverlaysManager {
-  static __createGlobalRootNode() {
-    const rootNode = document.createElement('div');
-    rootNode.classList.add('global-overlays');
-    document.body.appendChild(rootNode);
-    return rootNode;
-  }
-
   static __createGlobalStyleNode() {
     const styleTag = document.createElement('style');
-    styleTag.setAttribute('data-global-overlays', '');
-    styleTag.textContent = /** @type {CSSResult} */ (globalOverlaysStyle).cssText;
+    styleTag.setAttribute('data-overlays', '');
+    styleTag.textContent = /** @type {CSSResult} */ (overlayDocumentStyle).cssText;
     document.head.appendChild(styleTag);
     return styleTag;
   }
 
-  /**
-   * no setter as .list is intended to be read-only
-   * You can use .add or .remove to modify it
-   */
-  // eslint-disable-next-line class-methods-use-this
-  get globalRootNode() {
-    if (!OverlaysManager.__globalRootNode) {
-      OverlaysManager.__globalRootNode = OverlaysManager.__createGlobalRootNode();
-      OverlaysManager.__globalStyleNode = OverlaysManager.__createGlobalStyleNode();
-    }
-    return OverlaysManager.__globalRootNode;
-  }
-
   /**
    * no setter as .list is intended to be read-only
    * You can use .add or .remove to modify it
@@ -85,6 +64,10 @@ export class OverlaysManager {
      * @private
      */
     this.__blockingMap = new WeakMap();
+
+    if (!OverlaysManager.__globalStyleNode) {
+      OverlaysManager.__globalStyleNode = OverlaysManager.__createGlobalStyleNode();
+    }
   }
 
   /**
@@ -108,6 +91,7 @@ export class OverlaysManager {
       throw new Error('could not find controller to remove');
     }
     this.__list = this.list.filter(ctrl => ctrl !== ctrlToRemove);
+    this.__shownList = this.shownList.filter(ctrl => ctrl !== ctrlToRemove);
   }
 
   /**
@@ -147,13 +131,7 @@ export class OverlaysManager {
     this.__shownList = [];
     this.__siblingsInert = false;
 
-    const rootNode = OverlaysManager.__globalRootNode;
-    if (rootNode) {
-      if (rootNode.parentElement) {
-        rootNode.parentElement.removeChild(rootNode);
-      }
-      OverlaysManager.__globalRootNode = undefined;
-
+    if (OverlaysManager.__globalStyleNode) {
       document.head.removeChild(
         /** @type {HTMLStyleElement} */ (OverlaysManager.__globalStyleNode),
       );
@@ -180,9 +158,6 @@ export class OverlaysManager {
    */
   informTrapsKeyboardFocusGotEnabled(placementMode) {
     if (this.siblingsInert === false && placementMode === 'global') {
-      if (OverlaysManager.__globalRootNode) {
-        setSiblingsInert(this.globalRootNode);
-      }
       this.__siblingsInert = true;
     }
   }
@@ -199,9 +174,6 @@ export class OverlaysManager {
         next.enableTrapsKeyboardFocus();
       }
     } else if (this.siblingsInert === true) {
-      if (OverlaysManager.__globalRootNode) {
-        unsetSiblingsInert(this.globalRootNode);
-      }
       this.__siblingsInert = false;
     }
   }
@@ -212,27 +184,32 @@ export class OverlaysManager {
   requestToPreventScroll() {
     const { isIOS, isMacSafari } = _browserDetection;
     // no check as classList will dedupe it anyways
-    document.body.classList.add('global-overlays-scroll-lock');
+    document.body.classList.add('overlays-scroll-lock');
     if (isIOS || isMacSafari) {
       // iOS and safar for mac have issues with overlays with input fields. This is fixed by applying
       // position: fixed to the body. As a side effect, this will scroll the body to the top.
-      document.body.classList.add('global-overlays-scroll-lock-ios-fix');
+      document.body.classList.add('overlays-scroll-lock-ios-fix');
     }
     if (isIOS) {
-      document.documentElement.classList.add('global-overlays-scroll-lock-ios-fix');
+      document.documentElement.classList.add('overlays-scroll-lock-ios-fix');
     }
   }
 
   requestToEnableScroll() {
+    const hasOpenSiblingThatPreventsScroll = this.shownList.some(
+      ctrl => ctrl.preventsScroll === true,
+    );
+    if (hasOpenSiblingThatPreventsScroll) {
+      return;
+    }
+
     const { isIOS, isMacSafari } = _browserDetection;
-    if (!this.shownList.some(ctrl => ctrl.preventsScroll === true)) {
-      document.body.classList.remove('global-overlays-scroll-lock');
-      if (isIOS || isMacSafari) {
-        document.body.classList.remove('global-overlays-scroll-lock-ios-fix');
-      }
-      if (isIOS) {
-        document.documentElement.classList.remove('global-overlays-scroll-lock-ios-fix');
-      }
+    document.body.classList.remove('overlays-scroll-lock');
+    if (isIOS || isMacSafari) {
+      document.body.classList.remove('overlays-scroll-lock-ios-fix');
+    }
+    if (isIOS) {
+      document.documentElement.classList.remove('overlays-scroll-lock-ios-fix');
     }
   }
 
@@ -242,8 +219,7 @@ export class OverlaysManager {
    */
   requestToShowOnly(blockingCtrl) {
     const controllersToHide = this.shownList.filter(ctrl => ctrl !== blockingCtrl);
-
-    controllersToHide.map(ctrl => ctrl.hide());
+    controllersToHide.forEach(ctrl => ctrl.hide());
     this.__blockingMap.set(blockingCtrl, controllersToHide);
   }
 
@@ -255,11 +231,10 @@ export class OverlaysManager {
       const controllersWhichGotHidden = /** @type {OverlayController[]} */ (
         this.__blockingMap.get(blockingCtrl)
       );
-      controllersWhichGotHidden.map(ctrl => ctrl.show());
+      controllersWhichGotHidden.forEach(ctrl => ctrl.show());
     }
   }
 }
-/** @type {HTMLElement | undefined} */
-OverlaysManager.__globalRootNode = undefined;
+
 /** @type {HTMLStyleElement | undefined} */
 OverlaysManager.__globalStyleNode = undefined;

package/components/overlays/src/overlayDocumentStyle.js

@@ -0,0 +1,24 @@
+import { css } from 'lit';
+
+export const overlayDocumentStyle = css`
+  body > *[inert] {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    pointer-events: none;
+  }
+
+  body.overlays-scroll-lock {
+    overflow: hidden;
+  }
+
+  body.overlays-scroll-lock-ios-fix {
+    position: fixed;
+    width: 100%;
+  }
+
+  html.overlays-scroll-lock-ios-fix {
+    height: 100vh;
+  }
+`;

package/components/overlays/src/overlayShadowDomStyle.js

@@ -0,0 +1,138 @@
+import { css } from 'lit';
+
+export const overlayShadowDomStyle = css`
+  .overlays {
+    position: fixed;
+    z-index: 200;
+  }
+
+  .overlays__overlay-container {
+    display: flex;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+  }
+
+  .overlays__overlay-container::backdrop {
+    display: none;
+  }
+
+  .overlays__overlay-container--top-left {
+    justify-content: flex-start;
+    align-items: flex-start;
+  }
+
+  .overlays__overlay-container--top {
+    justify-content: center;
+    align-items: flex-start;
+  }
+
+  .overlays__overlay-container--top-right {
+    justify-content: flex-end;
+    align-items: flex-start;
+  }
+
+  .overlays__overlay-container--right {
+    justify-content: flex-end;
+    align-items: center;
+  }
+
+  .overlays__overlay-container--bottom-left {
+    justify-content: flex-start;
+    align-items: flex-end;
+  }
+
+  .overlays__overlay-container--bottom {
+    justify-content: center;
+    align-items: flex-end;
+  }
+
+  .overlays__overlay-container--bottom-right {
+    justify-content: flex-end;
+    align-items: flex-end;
+  }
+
+  .overlays__overlay-container--left {
+    justify-content: flex-start;
+    align-items: center;
+  }
+
+  .overlays__overlay-container--center {
+    justify-content: center;
+    align-items: center;
+  }
+
+  .overlays__overlay--bottom-sheet {
+    width: 100%;
+  }
+
+  ::slotted(.overlays__overlay),
+  .overlays__overlay {
+    pointer-events: auto;
+  }
+
+  .overlays__backdrop {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    background-color: #333333;
+    display: none;
+  }
+
+  .overlays__backdrop--visible {
+    display: block;
+  }
+
+  .overlays__backdrop--animation-in {
+    animation: overlays-backdrop-fade-in 300ms;
+    opacity: 0.3;
+  }
+
+  .overlays__backdrop--animation-out {
+    animation: overlays-backdrop-fade-out 300ms;
+    opacity: 0;
+  }
+
+  @keyframes overlays-backdrop-fade-in {
+    from {
+      opacity: 0;
+    }
+  }
+
+  @keyframes overlays-backdrop-fade-out {
+    from {
+      opacity: 0.3;
+    }
+  }
+
+  @media screen and (prefers-reduced-motion: reduce) {
+    .overlays .overlays__backdrop--animation-in {
+      animation: overlays-backdrop-fade-in 1ms;
+    }
+
+    .overlays .overlays__backdrop--animation-out {
+      animation: overlays-backdrop-fade-out 1ms;
+    }
+  }
+
+  dialog[data-overlay-outer-wrapper] {
+    background-image: none;
+    border-style: none;
+    padding: 0px;
+  }
+
+  /** 
+   * We don't want to use pseudo el ::backdrop.  
+   * We have our own, that creates more flexibility wrt scrolling etc.
+   */
+  dialog[data-overlay-outer-wrapper]::backdrop {
+    display: none;
+  }
+`;

package/components/overlays/src/singleton.js

@@ -1,4 +1,6 @@
 import { singletonManager } from 'singleton-manager';
 import { OverlaysManager } from './OverlaysManager.js';
 
-export const overlays = singletonManager.get('@lion/ui::overlays::0.x') || new OverlaysManager();
+export const overlays =
+  /** @type {OverlaysManager} */
+  (singletonManager.get('@lion/ui::overlays::0.x')) || new OverlaysManager();

package/components/overlays/test/ArrowMixin.test.js

@@ -58,7 +58,6 @@ describe('ArrowMixin', () => {
       `)
     );
     expect(el.hasAttribute('has-arrow')).to.be.true;
-
     const arrowNode = /** @type {Element} */ (el._arrowNode);
     expect(window.getComputedStyle(arrowNode).getPropertyValue('display')).to.equal('block');
   });