@vaadin/vaadin-overlay 23.3.0-alpha3 → 23.3.0-alpha5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/vaadin-overlay",
-  "version": "23.3.0-alpha3",
+  "version": "23.3.0-alpha5",
   "publishConfig": {
     "access": "public"
   },
@@ -34,21 +34,7 @@
     "polymer"
   ],
   "dependencies": {
-    "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "23.3.0-alpha3",
-    "@vaadin/vaadin-lumo-styles": "23.3.0-alpha3",
-    "@vaadin/vaadin-material-styles": "23.3.0-alpha3",
-    "@vaadin/vaadin-themable-mixin": "23.3.0-alpha3"
+    "@vaadin/overlay": "23.3.0-alpha5"
   },
-  "devDependencies": {
-    "@esm-bundle/chai": "^4.3.4",
-    "@polymer/iron-overlay-behavior": "^3.0.0",
-    "@vaadin/button": "23.3.0-alpha3",
-    "@vaadin/radio-group": "23.3.0-alpha3",
-    "@vaadin/testing-helpers": "^0.3.2",
-    "@vaadin/text-field": "23.3.0-alpha3",
-    "lit": "^2.0.0",
-    "sinon": "^13.0.2"
-  },
-  "gitHead": "e86cd2abf3e28bade37711291331415d92c454ec"
+  "gitHead": "0b6fdcf444683e97e3efb433d603e1274d5bcd66"
 }

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

@@ -3,354 +3,4 @@
  * Copyright (c) 2017 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { getAncestorRootNodes } from '@vaadin/component-base/src/dom-utils.js';
-
-const PROP_NAMES_VERTICAL = {
-  start: 'top',
-  end: 'bottom',
-};
-
-const PROP_NAMES_HORIZONTAL = {
-  start: 'left',
-  end: 'right',
-};
-
-const targetResizeObserver = new ResizeObserver((entries) => {
-  setTimeout(() => {
-    entries.forEach((entry) => {
-      if (entry.target.__overlay) {
-        entry.target.__overlay._updatePosition();
-      }
-    });
-  });
-});
-
-/**
- * @polymerMixin
- */
-export const PositionMixin = (superClass) =>
-  class PositionMixin extends superClass {
-    static get properties() {
-      return {
-        /**
-         * The element next to which this overlay should be aligned.
-         * The position of the overlay relative to the positionTarget can be adjusted
-         * with properties `horizontalAlign`, `verticalAlign`, `noHorizontalOverlap`
-         * and `noVerticalOverlap`.
-         */
-        positionTarget: {
-          type: Object,
-          value: null,
-        },
-
-        /**
-         * When `positionTarget` is set, this property defines whether to align the overlay's
-         * left or right side to the target element by default.
-         * Possible values are `start` and `end`.
-         * RTL is taken into account when interpreting the value.
-         * The overlay is automatically flipped to the opposite side when it doesn't fit into
-         * the default side defined by this property.
-         */
-        horizontalAlign: {
-          type: String,
-          value: 'start',
-        },
-
-        /**
-         * When `positionTarget` is set, this property defines whether to align the overlay's
-         * top or bottom side to the target element by default.
-         * Possible values are `top` and `bottom`.
-         * The overlay is automatically flipped to the opposite side when it doesn't fit into
-         * the default side defined by this property.
-         */
-        verticalAlign: {
-          type: String,
-          value: 'top',
-        },
-
-        /**
-         * When `positionTarget` is set, this property defines whether the overlay should overlap
-         * the target element in the x-axis, or be positioned right next to it.
-         */
-        noHorizontalOverlap: {
-          type: Boolean,
-          value: false,
-        },
-
-        /**
-         * When `positionTarget` is set, this property defines whether the overlay should overlap
-         * the target element in the y-axis, or be positioned right above/below it.
-         */
-        noVerticalOverlap: {
-          type: Boolean,
-          value: false,
-        },
-      };
-    }
-
-    static get observers() {
-      return [
-        '__positionSettingsChanged(horizontalAlign, verticalAlign, noHorizontalOverlap, noVerticalOverlap)',
-        '__overlayOpenedChanged(opened, positionTarget)',
-      ];
-    }
-
-    constructor() {
-      super();
-
-      this.__onScroll = this.__onScroll.bind(this);
-      this._updatePosition = this._updatePosition.bind(this);
-    }
-
-    /** @protected */
-    connectedCallback() {
-      super.connectedCallback();
-
-      if (this.opened) {
-        this.__addUpdatePositionEventListeners();
-      }
-    }
-
-    /** @protected */
-    disconnectedCallback() {
-      super.disconnectedCallback();
-      this.__removeUpdatePositionEventListeners();
-    }
-
-    /** @private */
-    __addUpdatePositionEventListeners() {
-      window.addEventListener('resize', this._updatePosition);
-
-      this.__positionTargetAncestorRootNodes = getAncestorRootNodes(this.positionTarget);
-      this.__positionTargetAncestorRootNodes.forEach((node) => {
-        node.addEventListener('scroll', this.__onScroll, true);
-      });
-    }
-
-    /** @private */
-    __removeUpdatePositionEventListeners() {
-      window.removeEventListener('resize', this._updatePosition);
-
-      if (this.__positionTargetAncestorRootNodes) {
-        this.__positionTargetAncestorRootNodes.forEach((node) => {
-          node.removeEventListener('scroll', this.__onScroll, true);
-        });
-        this.__positionTargetAncestorRootNodes = null;
-      }
-    }
-
-    /** @private */
-    __overlayOpenedChanged(opened, positionTarget) {
-      this.__removeUpdatePositionEventListeners();
-
-      if (positionTarget) {
-        positionTarget.__overlay = null;
-        targetResizeObserver.unobserve(positionTarget);
-
-        if (opened) {
-          this.__addUpdatePositionEventListeners();
-          positionTarget.__overlay = this;
-          targetResizeObserver.observe(positionTarget);
-        }
-      }
-
-      if (opened) {
-        const computedStyle = getComputedStyle(this);
-        if (!this.__margins) {
-          this.__margins = {};
-          ['top', 'bottom', 'left', 'right'].forEach((propName) => {
-            this.__margins[propName] = parseInt(computedStyle[propName], 10);
-          });
-        }
-        this.setAttribute('dir', computedStyle.direction);
-
-        this._updatePosition();
-        // Schedule another position update (to cover virtual keyboard opening for example)
-        requestAnimationFrame(() => this._updatePosition());
-      }
-    }
-
-    get __isRTL() {
-      return this.getAttribute('dir') === 'rtl';
-    }
-
-    __positionSettingsChanged() {
-      this._updatePosition();
-    }
-
-    /** @private */
-    __onScroll(e) {
-      // If the scroll event occurred inside the overlay, ignore it.
-      if (!this.contains(e.target)) {
-        this._updatePosition();
-      }
-    }
-
-    _updatePosition() {
-      if (!this.positionTarget || !this.opened) {
-        return;
-      }
-
-      const targetRect = this.positionTarget.getBoundingClientRect();
-
-      // Detect the desired alignment and update the layout accordingly
-      const shouldAlignStartVertically = this.__shouldAlignStartVertically(targetRect);
-      this.style.justifyContent = shouldAlignStartVertically ? 'flex-start' : 'flex-end';
-
-      const shouldAlignStartHorizontally = this.__shouldAlignStartHorizontally(targetRect, this.__isRTL);
-      const flexStart =
-        (!this.__isRTL && shouldAlignStartHorizontally) || (this.__isRTL && !shouldAlignStartHorizontally);
-      this.style.alignItems = flexStart ? 'flex-start' : 'flex-end';
-
-      // Get the overlay rect after possible overlay alignment changes
-      const overlayRect = this.getBoundingClientRect();
-
-      // Obtain vertical positioning properties
-      const verticalProps = this.__calculatePositionInOneDimension(
-        targetRect,
-        overlayRect,
-        this.noVerticalOverlap,
-        PROP_NAMES_VERTICAL,
-        this,
-        shouldAlignStartVertically,
-      );
-
-      // Obtain horizontal positioning properties
-      const horizontalProps = this.__calculatePositionInOneDimension(
-        targetRect,
-        overlayRect,
-        this.noHorizontalOverlap,
-        PROP_NAMES_HORIZONTAL,
-        this,
-        shouldAlignStartHorizontally,
-      );
-
-      // Apply the positioning properties to the overlay
-      Object.assign(this.style, verticalProps, horizontalProps);
-
-      this.toggleAttribute('bottom-aligned', !shouldAlignStartVertically);
-      this.toggleAttribute('top-aligned', shouldAlignStartVertically);
-
-      this.toggleAttribute('end-aligned', !flexStart);
-      this.toggleAttribute('start-aligned', flexStart);
-    }
-
-    __shouldAlignStartHorizontally(targetRect, rtl) {
-      // Using previous size to fix a case where window resize may cause the overlay to be squeezed
-      // smaller than its current space before the fit-calculations.
-      const contentWidth = Math.max(this.__oldContentWidth || 0, this.$.overlay.offsetWidth);
-      this.__oldContentWidth = this.$.overlay.offsetWidth;
-
-      const viewportWidth = Math.min(window.innerWidth, document.documentElement.clientWidth);
-      const defaultAlignLeft = (!rtl && this.horizontalAlign === 'start') || (rtl && this.horizontalAlign === 'end');
-
-      return this.__shouldAlignStart(
-        targetRect,
-        contentWidth,
-        viewportWidth,
-        this.__margins,
-        defaultAlignLeft,
-        this.noHorizontalOverlap,
-        PROP_NAMES_HORIZONTAL,
-      );
-    }
-
-    __shouldAlignStartVertically(targetRect) {
-      // Using previous size to fix a case where window resize may cause the overlay to be squeezed
-      // smaller than its current space before the fit-calculations.
-      const contentHeight = Math.max(this.__oldContentHeight || 0, this.$.overlay.offsetHeight);
-      this.__oldContentHeight = this.$.overlay.offsetHeight;
-
-      const viewportHeight = Math.min(window.innerHeight, document.documentElement.clientHeight);
-      const defaultAlignTop = this.verticalAlign === 'top';
-
-      return this.__shouldAlignStart(
-        targetRect,
-        contentHeight,
-        viewportHeight,
-        this.__margins,
-        defaultAlignTop,
-        this.noVerticalOverlap,
-        PROP_NAMES_VERTICAL,
-      );
-    }
-
-    // eslint-disable-next-line max-params
-    __shouldAlignStart(targetRect, contentSize, viewportSize, margins, defaultAlignStart, noOverlap, propNames) {
-      const spaceForStartAlignment =
-        viewportSize - targetRect[noOverlap ? propNames.end : propNames.start] - margins[propNames.end];
-      const spaceForEndAlignment = targetRect[noOverlap ? propNames.start : propNames.end] - margins[propNames.start];
-
-      const spaceForDefaultAlignment = defaultAlignStart ? spaceForStartAlignment : spaceForEndAlignment;
-      const spaceForOtherAlignment = defaultAlignStart ? spaceForEndAlignment : spaceForStartAlignment;
-
-      const shouldGoToDefaultSide =
-        spaceForDefaultAlignment > spaceForOtherAlignment || spaceForDefaultAlignment > contentSize;
-
-      return defaultAlignStart === shouldGoToDefaultSide;
-    }
-
-    /**
-     * Returns an adjusted value after resizing the browser window,
-     * to avoid wrong calculations when e.g. previously set `bottom`
-     * CSS property value is larger than the updated viewport height.
-     * See https://github.com/vaadin/web-components/issues/4604
-     */
-    __adjustBottomProperty(cssPropNameToSet, propNames, currentValue) {
-      let adjustedProp;
-
-      if (cssPropNameToSet === propNames.end) {
-        // Adjust horizontally
-        if (propNames.end === PROP_NAMES_VERTICAL.end) {
-          const viewportHeight = Math.min(window.innerHeight, document.documentElement.clientHeight);
-
-          if (currentValue > viewportHeight && this.__oldViewportHeight) {
-            const heightDiff = this.__oldViewportHeight - viewportHeight;
-            adjustedProp = currentValue - heightDiff;
-          }
-
-          this.__oldViewportHeight = viewportHeight;
-        }
-
-        // Adjust vertically
-        if (propNames.end === PROP_NAMES_HORIZONTAL.end) {
-          const viewportWidth = Math.min(window.innerWidth, document.documentElement.clientWidth);
-
-          if (currentValue > viewportWidth && this.__oldViewportWidth) {
-            const widthDiff = this.__oldViewportWidth - viewportWidth;
-            adjustedProp = currentValue - widthDiff;
-          }
-
-          this.__oldViewportWidth = viewportWidth;
-        }
-      }
-
-      return adjustedProp;
-    }
-
-    /**
-     * Returns an object with CSS position properties to set,
-     * e.g. { top: "100px" }
-     */
-    // eslint-disable-next-line max-params
-    __calculatePositionInOneDimension(targetRect, overlayRect, noOverlap, propNames, overlay, shouldAlignStart) {
-      const cssPropNameToSet = shouldAlignStart ? propNames.start : propNames.end;
-      const cssPropNameToClear = shouldAlignStart ? propNames.end : propNames.start;
-
-      const currentValue = parseFloat(overlay.style[cssPropNameToSet] || getComputedStyle(overlay)[cssPropNameToSet]);
-      const adjustedValue = this.__adjustBottomProperty(cssPropNameToSet, propNames, currentValue);
-
-      const diff =
-        overlayRect[shouldAlignStart ? propNames.start : propNames.end] -
-        targetRect[noOverlap === shouldAlignStart ? propNames.end : propNames.start];
-
-      const valueToSet = adjustedValue
-        ? `${adjustedValue}px`
-        : `${currentValue + diff * (shouldAlignStart ? -1 : 1)}px`;
-
-      return {
-        [cssPropNameToSet]: valueToSet,
-        [cssPropNameToClear]: '',
-      };
-    }
-  };
+export { PositionMixin } from '@vaadin/overlay/src/vaadin-overlay-position-mixin.js';

package/src/vaadin-overlay.d.ts

@@ -1,251 +1,18 @@
 /**
  * @license
- * Copyright (c) 2017 - 2022 Vaadin Ltd.
+ * Copyright (c) 2018 - 2022 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';
-
-export type OverlayRenderer = (root: HTMLElement, owner: HTMLElement, model?: object) => void;
-
-/**
- * Fired when the `opened` property changes.
- */
-export type OverlayOpenedChangedEvent = CustomEvent<{ value: boolean }>;
-
-/**
- * Fired after the overlay is opened.
- */
-export type OverlayOpenEvent = CustomEvent;
-
-/**
- * Fired before the overlay will be closed.
- * If canceled the closing of the overlay is canceled as well.
- */
-export type OverlayCloseEvent = CustomEvent;
+import type { Overlay } from '@vaadin/overlay/src/vaadin-overlay.js';
 
 /**
- * Fired when the overlay will be closed.
+ * @deprecated Import `Overlay` from `@vaadin/overlay` instead.
  */
-export type OverlayClosingEvent = CustomEvent;
-
-/**
- * Fired before the overlay will be closed on outside click.
- * If canceled the closing of the overlay is canceled as well.
- */
-export type OverlayOutsideClickEvent = CustomEvent<{ sourceEvent: MouseEvent }>;
-
-/**
- * Fired before the overlay will be closed on ESC button press.
- * If canceled the closing of the overlay is canceled as well.
- */
-export type OverlayEscapePressEvent = CustomEvent<{ sourceEvent: KeyboardEvent }>;
-
-export interface OverlayElementEventMap {
-  'opened-changed': OverlayOpenedChangedEvent;
-  'vaadin-overlay-open': OverlayOpenEvent;
-  'vaadin-overlay-close': OverlayCloseEvent;
-  'vaadin-overlay-closing': OverlayClosingEvent;
-  'vaadin-overlay-outside-click': OverlayOutsideClickEvent;
-  'vaadin-overlay-escape-press': OverlayEscapePressEvent;
-}
-
-export type OverlayEventMap = HTMLElementEventMap & OverlayElementEventMap;
+export type OverlayElement = Overlay;
 
 /**
- * `<vaadin-overlay>` is a Web Component for creating overlays. The content of the overlay
- * can be populated in two ways: imperatively by using renderer callback function and
- * declaratively by using Polymer's Templates.
- *
- * ### Rendering
- *
- * By default, the overlay uses the content provided by using the renderer callback function.
- *
- * The renderer function provides `root`, `owner`, `model` arguments when applicable.
- * Generate DOM content by using `model` object properties if needed, append it to the `root`
- * element and control the state of the host element by accessing `owner`. Before generating new
- * content, users are able to check if there is already content in `root` for reusing it.
- *
- * ```html
- * <vaadin-overlay id="overlay"></vaadin-overlay>
- * ```
- * ```js
- * const overlay = document.querySelector('#overlay');
- * overlay.renderer = function(root) {
- *  root.textContent = "Overlay content";
- * };
- * ```
- *
- * Renderer is called on the opening of the overlay and each time the related model is updated.
- * DOM generated during the renderer call can be reused
- * in the next renderer call and will be provided with the `root` argument.
- * On first call it will be empty.
- *
- * **NOTE:** when the renderer property is defined, the `<template>` content is not used.
- *
- * ### Templating
- *
- * Alternatively, the content can be provided with Polymer Template.
- * Overlay finds the first child template and uses that in case renderer callback function
- * is not provided. You can also set a custom template using the `template` property.
- *
- * After the content from the template is stamped, the `content` property
- * points to the content container.
- *
- * The overlay provides `forwardHostProp` when calling
- * `Polymer.Templatize.templatize` for the template, so that the bindings
- * from the parent scope propagate to the content.
- *
- * ```html
- * <vaadin-overlay>
- *   <template>Overlay content</template>
- * </vaadin-overlay>
- * ```
- *
- * ### Styling
- *
- * To style the overlay content, use styles in the parent scope:
- *
- * - If the overlay is used in a component, then the component styles
- *   apply the overlay content.
- * - If the overlay is used in the global DOM scope, then global styles
- *   apply to the overlay content.
- *
- * See examples for styling the overlay content in the live demos.
- *
- * The following Shadow DOM parts are available for styling the overlay component itself:
- *
- * Part name  | Description
- * -----------|---------------------------------------------------------|
- * `backdrop` | Backdrop of the overlay
- * `overlay`  | Container for position/sizing/alignment of the content
- * `content`  | Content of the overlay
- *
- * The following state attributes are available for styling:
- *
- * Attribute | Description | Part
- * ---|---|---
- * `opening` | Applied just after the overlay is attached to the DOM. You can apply a CSS @keyframe animation for this state. | `:host`
- * `closing` | Applied just before the overlay is detached from the DOM. You can apply a CSS @keyframe animation for this state. | `:host`
- *
- * The following custom CSS properties are available for styling:
- *
- * Custom CSS property | Description | Default value
- * ---|---|---
- * `--vaadin-overlay-viewport-bottom` | Bottom offset of the visible viewport area | `0` or detected offset
- *
- * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
- *
- * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
- * @fires {CustomEvent} vaadin-overlay-open - Fired after the overlay is opened.
- * @fires {CustomEvent} vaadin-overlay-close - Fired before the overlay will be closed. If canceled the closing of the overlay is canceled as well.
- * @fires {CustomEvent} vaadin-overlay-closing - Fired when the overlay will be closed.
- * @fires {CustomEvent} vaadin-overlay-outside-click - Fired before the overlay will be closed on outside click. If canceled the closing of the overlay is canceled as well.
- * @fires {CustomEvent} vaadin-overlay-escape-press - Fired before the overlay will be closed on ESC button press. If canceled the closing of the overlay is canceled as well.
+ * @deprecated Import `Overlay` from `@vaadin/overlay` instead.
  */
-declare class OverlayElement extends ThemableMixin(DirMixin(ControllerMixin(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;
-
-  /**
-   * The template of the overlay content.
-   */
-  template: HTMLTemplateElement | null | undefined;
-
-  /**
-   * References the content container after the template is stamped.
-   */
-  content: HTMLElement | 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;
-
-  /**
-   * When true move focus to the first focusable element in the overlay,
-   * or to the overlay if there are no focusable elements.
-   */
-  focusTrap: boolean;
-
-  /**
-   * Set to true to enable restoring of focus when overlay is closed.
-   */
-  restoreFocusOnClose: boolean;
-
-  /**
-   * Set to specify the element which should be focused on overlay close,
-   * if `restoreFocusOnClose` is set to true.
-   */
-  restoreFocusNode?: HTMLElement;
-
-  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;
-
-  addEventListener<K extends keyof OverlayEventMap>(
-    type: K,
-    listener: (this: OverlayElement, ev: OverlayEventMap[K]) => void,
-    options?: AddEventListenerOptions | boolean,
-  ): void;
-
-  removeEventListener<K extends keyof OverlayEventMap>(
-    type: K,
-    listener: (this: OverlayElement, ev: OverlayEventMap[K]) => void,
-    options?: EventListenerOptions | boolean,
-  ): void;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'vaadin-overlay': OverlayElement;
-  }
-}
+export const OverlayElement: typeof Overlay;
 
-export { OverlayElement };
+export * from '@vaadin/overlay/src/vaadin-overlay.js';