@vaadin/overlay 24.1.5 → 24.2.0-alpha10

package/src/vaadin-overlay-stack-mixin.js

@@ -0,0 +1,103 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * Returns all attached overlays in visual stacking order.
+ * @private
+ */
+const getAttachedInstances = () =>
+  Array.from(document.body.children)
+    .filter((el) => el instanceof HTMLElement && el._hasOverlayStackMixin && !el.hasAttribute('closing'))
+    .sort((a, b) => a.__zIndex - b.__zIndex || 0);
+
+/**
+ * Returns true if the overlay is the last one in the opened overlays stack.
+ * @param {HTMLElement} overlay
+ * @return {boolean}
+ * @protected
+ */
+export const isLastOverlay = (overlay) => overlay === getAttachedInstances().pop();
+
+/**
+ * @polymerMixin
+ */
+export const OverlayStackMixin = (superClass) =>
+  class OverlayStackMixin extends superClass {
+    constructor() {
+      super();
+
+      this._hasOverlayStackMixin = true;
+    }
+
+    /**
+     * Returns true if this is the last one in the opened overlays stack.
+     *
+     * @return {boolean}
+     * @protected
+     */
+    get _last() {
+      return isLastOverlay(this);
+    }
+
+    /**
+     * Brings the overlay as visually the frontmost one.
+     */
+    bringToFront() {
+      let zIndex = '';
+      const frontmost = getAttachedInstances()
+        .filter((o) => o !== this)
+        .pop();
+      if (frontmost) {
+        const frontmostZIndex = frontmost.__zIndex;
+        zIndex = frontmostZIndex + 1;
+      }
+      this.style.zIndex = zIndex;
+      this.__zIndex = zIndex || parseFloat(getComputedStyle(this).zIndex);
+    }
+
+    /** @protected */
+    _enterModalState() {
+      if (document.body.style.pointerEvents !== 'none') {
+        // Set body pointer-events to 'none' to disable mouse interactions with
+        // other document nodes.
+        this._previousDocumentPointerEvents = document.body.style.pointerEvents;
+        document.body.style.pointerEvents = 'none';
+      }
+
+      // Disable pointer events in other attached overlays
+      getAttachedInstances().forEach((el) => {
+        if (el !== this) {
+          el.$.overlay.style.pointerEvents = 'none';
+        }
+      });
+    }
+
+    /** @protected */
+    _exitModalState() {
+      if (this._previousDocumentPointerEvents !== undefined) {
+        // Restore body pointer-events
+        document.body.style.pointerEvents = this._previousDocumentPointerEvents;
+        delete this._previousDocumentPointerEvents;
+      }
+
+      // Restore pointer events in the previous overlay(s)
+      const instances = getAttachedInstances();
+
+      let el;
+      // Use instances.pop() to ensure the reverse order
+      while ((el = instances.pop())) {
+        if (el === this) {
+          // Skip the current instance
+          continue;
+        }
+        el.$.overlay.style.removeProperty('pointer-events');
+        if (!el.modeless) {
+          // Stop after the last modal
+          break;
+        }
+      }
+    }
+  };

package/src/vaadin-overlay-styles.js

@@ -0,0 +1,66 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css } from 'lit';
+
+export const overlayStyles = css`
+  :host {
+    z-index: 200;
+    position: fixed;
+
+    /* Despite of what the names say, <vaadin-overlay> is just a container
+          for position/sizing/alignment. The actual overlay is the overlay part. */
+
+    /* Default position constraints: the entire viewport. Note: themes can
+          override this to introduce gaps between the overlay and the viewport. */
+    inset: 0;
+    bottom: var(--vaadin-overlay-viewport-bottom);
+
+    /* Use flexbox alignment for the overlay part. */
+    display: flex;
+    flex-direction: column; /* makes dropdowns sizing easier */
+    /* Align to center by default. */
+    align-items: center;
+    justify-content: center;
+
+    /* Allow centering when max-width/max-height applies. */
+    margin: auto;
+
+    /* The host is not clickable, only the overlay part is. */
+    pointer-events: none;
+
+    /* Remove tap highlight on touch devices. */
+    -webkit-tap-highlight-color: transparent;
+
+    /* CSS API for host */
+    --vaadin-overlay-viewport-bottom: 0;
+  }
+
+  :host([hidden]),
+  :host(:not([opened]):not([closing])) {
+    display: none !important;
+  }
+
+  [part='overlay'] {
+    -webkit-overflow-scrolling: touch;
+    overflow: auto;
+    pointer-events: auto;
+
+    /* Prevent overflowing the host */
+    max-width: 100%;
+    box-sizing: border-box;
+
+    -webkit-tap-highlight-color: initial; /* reenable tap highlight inside */
+  }
+
+  [part='backdrop'] {
+    z-index: -1;
+    content: '';
+    background: rgba(0, 0, 0, 0.5);
+    position: fixed;
+    inset: 0;
+    pointer-events: auto;
+  }
+`;

package/src/vaadin-overlay.d.ts

@@ -3,12 +3,11 @@
  * Copyright (c) 2017 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { OverlayFocusMixin } from './vaadin-overlay-focus-mixin.js';
+import { OverlayMixin } from './vaadin-overlay-mixin.js';
 
-export type OverlayRenderer = (root: HTMLElement, owner: HTMLElement, model?: object) => void;
+export { OverlayRenderer } from './vaadin-overlay-mixin.js';
 
 /**
  * Fired when the `opened` property changes.
@@ -120,69 +119,7 @@ export type OverlayEventMap = HTMLElementEventMap & OverlayCustomEventMap;
  * @fires {CustomEvent} vaadin-overlay-outside-click - Fired before the overlay is closed on outside click. Calling `preventDefault()` on the event cancels the closing.
  * @fires {CustomEvent} vaadin-overlay-escape-press - Fired before the overlay is closed on Escape key press. Calling `preventDefault()` on the event cancels the closing.
  */
-declare class Overlay extends OverlayFocusMixin(ThemableMixin(DirMixin(HTMLElement))) {
-  /**
-   * When true, the overlay is visible and attached to body.
-   */
-  opened: boolean | null | undefined;
-
-  /**
-   * Owner element passed with renderer function
-   */
-  owner: HTMLElement | null;
-
-  /**
-   * Custom function for rendering the content of the overlay.
-   * Receives three arguments:
-   *
-   * - `root` The root container DOM element. Append your content to it.
-   * - `owner` The host element of the renderer function.
-   * - `model` The object with the properties related with rendering.
-   */
-  renderer: OverlayRenderer | null | undefined;
-
-  /**
-   * When true the overlay has backdrop on top of content when opened.
-   */
-  withBackdrop: boolean;
-
-  /**
-   * Object with properties that is passed to `renderer` function
-   */
-  model: object | null | undefined;
-
-  /**
-   * When true the overlay won't disable the main content, showing
-   * it doesn't change the functionality of the user interface.
-   */
-  modeless: boolean;
-
-  /**
-   * When set to true, the overlay is hidden. This also closes the overlay
-   * immediately in case there is a closing animation in progress.
-   */
-  hidden: boolean;
-
-  /**
-   * Returns true if this is the last one in the opened overlays stack.
-   */
-  protected readonly _last: boolean;
-
-  close(sourceEvent?: Event | null): void;
-
-  /**
-   * Requests an update for the content of the overlay.
-   * While performing the update, it invokes the renderer passed in the `renderer` property.
-   *
-   * It is not guaranteed that the update happens immediately (synchronously) after it is requested.
-   */
-  requestContentUpdate(): void;
-
-  /**
-   * Brings the overlay as visually the frontmost one
-   */
-  bringToFront(): void;
-
+declare class Overlay extends OverlayMixin(ThemableMixin(DirMixin(HTMLElement))) {
   addEventListener<K extends keyof OverlayEventMap>(
     type: K,
     listener: (this: Overlay, ev: OverlayEventMap[K]) => void,
@@ -194,14 +131,6 @@ declare class Overlay extends OverlayFocusMixin(ThemableMixin(DirMixin(HTMLEleme
     listener: (this: Overlay, ev: OverlayEventMap[K]) => void,
     options?: EventListenerOptions | boolean,
   ): void;
-
-  protected _flushAnimation(type: 'closing' | 'opening'): void;
-
-  /**
-   * Whether to close the overlay on outside click or not.
-   * Override this method to customize the closing logic.
-   */
-  protected _shouldCloseOnOutsideClick(event: Event): boolean;
 }
 
 declare global {