@lion/ui 0.0.9 → 0.0.11

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/configurations/visibility-trigger-partials/withClickInteraction.js

@@ -0,0 +1,32 @@
+/**
+ * @typedef {import('@lion/ui/types/overlays.js').OverlayConfig} OverlayConfig
+ * @typedef {import('@lion/ui/overlays.js').OverlayController} OverlayController
+ */
+
+/**
+ * Use for popovers/dropdowns, (modal) dialogs etc...
+ * @returns {Partial<OverlayConfig>}
+ */
+export function withClickInteraction() {
+  return {
+    visibilityTriggerFunction: (
+      /** @type {{ controller: OverlayController }} */ { controller },
+    ) => {
+      function handleOpenClosed() {
+        if (controller._hasDisabledInvoker()) {
+          return;
+        }
+        controller.toggle();
+      }
+
+      return {
+        init: () => {
+          controller.invokerNode?.addEventListener('click', handleOpenClosed);
+        },
+        teardown: () => {
+          controller.invokerNode?.removeEventListener('click', handleOpenClosed);
+        },
+      };
+    },
+  };
+}

package/components/overlays/src/configurations/visibility-trigger-partials/withHoverInteraction.js

@@ -0,0 +1,76 @@
+/**
+ * @typedef {import('@lion/ui/types/overlays.js').OverlayConfig} OverlayConfig
+ * @typedef {import('@lion/ui/overlays.js').OverlayController} OverlayController
+ */
+
+// N.B. Below logic is tested in LionTooltip
+
+/**
+ * Use for tooltips and [flyout menus](https://www.w3.org/WAI/tutorials/menus/flyout/).
+ * Note that it handles both mouse hover and focus interaction.
+ * Provide delayIn and delayOut when the content needs a small delay before being showed
+ * @param {{ delayIn?: number, delayOut?: number  }} options
+ * @returns {Partial<OverlayConfig>}
+ */
+export function withHoverInteraction({ delayIn = 0, delayOut = 300 }) {
+  return {
+    visibilityTriggerFunction: (
+      /** @type {{ controller: OverlayController }} */ { controller },
+    ) => {
+      let isFocused = false;
+      let isHovered = false;
+      /** @type {NodeJS.Timeout} */
+      let delayTimeout;
+
+      function resetActive() {
+        isFocused = false;
+        isHovered = false;
+      }
+
+      /**
+       * @param {Event} event
+       */
+      function handleOpenClosed(event) {
+        const { type } = event;
+        if (controller._hasDisabledInvoker()) {
+          return;
+        }
+        clearTimeout(delayTimeout);
+        isFocused = type === 'focusout' ? false : isFocused || type === 'focusin';
+        isHovered = type === 'mouseleave' ? false : isHovered || type === 'mouseenter';
+        const shouldOpen = isFocused || isHovered;
+
+        if (shouldOpen) {
+          delayTimeout = setTimeout(() => {
+            controller.show();
+          }, delayIn);
+        } else {
+          delayTimeout = setTimeout(() => {
+            controller.hide();
+          }, delayOut);
+        }
+      }
+
+      return {
+        init: () => {
+          controller.addEventListener('hide', resetActive);
+          controller.contentNode?.addEventListener('mouseenter', handleOpenClosed);
+          controller.contentNode?.addEventListener('mouseleave', handleOpenClosed);
+          controller.invokerNode?.addEventListener('mouseenter', handleOpenClosed);
+          controller.invokerNode?.addEventListener('mouseleave', handleOpenClosed);
+          controller.invokerNode?.addEventListener('focusin', handleOpenClosed);
+          controller.invokerNode?.addEventListener('focusout', handleOpenClosed);
+        },
+        teardown: () => {
+          controller.removeEventListener('hide', resetActive);
+          controller.contentNode?.removeEventListener('mouseenter', handleOpenClosed);
+          controller.contentNode?.removeEventListener('mouseleave', handleOpenClosed);
+          controller.invokerNode?.removeEventListener('mouseenter', handleOpenClosed);
+          controller.invokerNode?.removeEventListener('mouseleave', handleOpenClosed);
+          controller.invokerNode?.removeEventListener('focusin', handleOpenClosed);
+          controller.invokerNode?.removeEventListener('focusout', handleOpenClosed);
+        },
+      };
+    },
+  };
+}

package/components/overlays/src/configurations/withBottomSheetConfig.js

@@ -1,3 +1,5 @@
+import { withClickInteraction } from './visibility-trigger-partials/withClickInteraction.js';
+
 /**
  * @typedef {import('../../types/OverlayConfig.js').OverlayConfig} OverlayConfig
  */
@@ -13,4 +15,5 @@ export const withBottomSheetConfig = () =>
       placement: 'bottom',
     },
     handlesAccessibility: true,
+    ...withClickInteraction(),
   });

package/components/overlays/src/configurations/withDropdownConfig.js

@@ -1,3 +1,5 @@
+import { withClickInteraction } from './visibility-trigger-partials/withClickInteraction.js';
+
 /**
  * @typedef {import('../../types/OverlayConfig.js').OverlayConfig} OverlayConfig
  */
@@ -19,4 +21,5 @@ export const withDropdownConfig = () =>
       ],
     },
     handlesAccessibility: true,
+    ...withClickInteraction(),
   });

package/components/overlays/src/configurations/withModalDialogConfig.js

@@ -1,3 +1,5 @@
+import { withClickInteraction } from './visibility-trigger-partials/withClickInteraction.js';
+
 /**
  * @typedef {import('../../types/OverlayConfig.js').OverlayConfig} OverlayConfig
  */
@@ -13,4 +15,5 @@ export const withModalDialogConfig = () =>
     trapsKeyboardFocus: true,
     hidesOnEsc: true,
     handlesAccessibility: true,
+    ...withClickInteraction(),
   });

package/components/overlays/src/configurations/withTooltipConfig.js

@@ -0,0 +1,29 @@
+import { withHoverInteraction } from './visibility-trigger-partials/withHoverInteraction.js';
+
+/**
+ * @typedef {import('@lion/ui/types/overlays.js').OverlayConfig} OverlayConfig
+ * @typedef {import('@lion/ui/overlays.js').OverlayController} OverlayController
+ */
+
+/**
+ *
+ * @param {{invokerRelation?: 'description'| 'label', delayIn?: number, delayOut?: number  }} options
+ */
+export const withTooltipConfig = ({
+  invokerRelation = 'description',
+  delayIn = 300,
+  delayOut = 300,
+} = {}) =>
+  /** @type {OverlayConfig} */ ({
+    placementMode: 'local',
+    elementToFocusAfterHide: undefined,
+    hidesOnEsc: true,
+    hidesOnOutsideEsc: true,
+    handlesAccessibility: true,
+    isTooltip: true,
+    invokerRelation,
+    popperConfig: {
+      strategy: 'absolute',
+    },
+    ...withHoverInteraction({ delayIn, delayOut }),
+  });

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');
   });