@vaadin/overlay 24.0.0-alpha1 → 24.0.0-alpha10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/overlay",
-  "version": "24.0.0-alpha1",
+  "version": "24.0.0-alpha10",
   "publishConfig": {
     "access": "public"
   },
@@ -34,21 +34,18 @@
     "polymer"
   ],
   "dependencies": {
+    "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "24.0.0-alpha1",
-    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha1",
-    "@vaadin/vaadin-material-styles": "24.0.0-alpha1",
-    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha1"
+    "@vaadin/component-base": "24.0.0-alpha10",
+    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha10",
+    "@vaadin/vaadin-material-styles": "24.0.0-alpha10",
+    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha10"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/button": "24.0.0-alpha1",
-    "@vaadin/polymer-legacy-adapter": "24.0.0-alpha1",
-    "@vaadin/radio-group": "24.0.0-alpha1",
     "@vaadin/testing-helpers": "^0.3.2",
-    "@vaadin/text-field": "24.0.0-alpha1",
     "lit": "^2.0.0",
     "sinon": "^13.0.2"
   },
-  "gitHead": "427527c27c4b27822d61fd41d38d7b170134770b"
+  "gitHead": "2e04534d8b47bcd216f89b5f849bafef1a73b174"
 }

package/src/vaadin-overlay-position-mixin.d.ts

@@ -0,0 +1,57 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { Constructor } from '@open-wc/dedupe-mixin';
+
+export declare function PositionMixin<T extends Constructor<HTMLElement>>(base: T): Constructor<PositionMixinClass> & T;
+
+export declare class PositionMixinClass {
+  /**
+   * 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: HTMLElement;
+
+  /**
+   * 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.
+   *
+   * @attr {start|end} horizontal-align
+   */
+  horizontalAlign: 'end' | '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.
+   *
+   * @attr {top|bottom} vertical-align
+   */
+  verticalAlign: 'bottom' | '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.
+   *
+   * @attr {boolean} no-horizontal-overlap
+   */
+  noHorizontalOverlap: boolean;
+
+  /**
+   * 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.
+   *
+   * @attr {boolean} no-vertical-overlap
+   */
+  noVerticalOverlap: boolean;
+}

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2017 - 2022 Vaadin Ltd.
+ * Copyright (c) 2017 - 2023 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';
@@ -50,6 +50,8 @@ export const PositionMixin = (superClass) =>
          * 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.
+         *
+         * @attr {start|end} horizontal-align
          */
         horizontalAlign: {
           type: String,
@@ -62,6 +64,8 @@ export const PositionMixin = (superClass) =>
          * 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.
+         *
+         * @attr {top|bottom} vertical-align
          */
         verticalAlign: {
           type: String,
@@ -71,6 +75,8 @@ export const PositionMixin = (superClass) =>
         /**
          * 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.
+         *
+         * @attr {boolean} no-horizontal-overlap
          */
         noHorizontalOverlap: {
           type: Boolean,
@@ -80,6 +86,8 @@ export const PositionMixin = (superClass) =>
         /**
          * 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.
+         *
+         * @attr {boolean} no-vertical-overlap
          */
         noVerticalOverlap: {
           type: Boolean,
@@ -170,10 +178,6 @@ export const PositionMixin = (superClass) =>
       }
     }
 
-    get __isRTL() {
-      return this.getAttribute('dir') === 'rtl';
-    }
-
     __positionSettingsChanged() {
       this._updatePosition();
     }
@@ -197,9 +201,9 @@ export const PositionMixin = (superClass) =>
       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);
+      const isRTL = this.__isRTL;
+      const shouldAlignStartHorizontally = this.__shouldAlignStartHorizontally(targetRect, isRTL);
+      const flexStart = (!isRTL && shouldAlignStartHorizontally) || (isRTL && !shouldAlignStartHorizontally);
       this.style.alignItems = flexStart ? 'flex-start' : 'flex-end';
 
       // Get the overlay rect after possible overlay alignment changes

package/src/vaadin-overlay.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2017 - 2022 Vaadin Ltd.
+ * 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';

package/src/vaadin-overlay.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2017 - 2022 Vaadin Ltd.
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
@@ -279,6 +279,16 @@ class Overlay extends ThemableMixin(DirMixin(ControllerMixin(PolymerElement))) {
     return ['_rendererOrDataChanged(renderer, owner, model, opened)'];
   }
 
+  /**
+   * Returns all attached overlays in visual stacking order.
+   * @private
+   */
+  static get __attachedInstances() {
+    return Array.from(document.body.children)
+      .filter((el) => el instanceof Overlay && !el.hasAttribute('closing'))
+      .sort((a, b) => a.__zIndex - b.__zIndex || 0);
+  }
+
   constructor() {
     super();
     this._boundMouseDownListener = this._mouseDownListener.bind(this);
@@ -294,6 +304,15 @@ class Overlay extends ThemableMixin(DirMixin(ControllerMixin(PolymerElement))) {
     this.__focusTrapController = new FocusTrapController(this);
   }
 
+  /**
+   * Returns true if this is the last one in the opened overlays stack
+   * @return {boolean}
+   * @protected
+   */
+  get _last() {
+    return this === Overlay.__attachedInstances.pop();
+  }
+
   /** @protected */
   ready() {
     super.ready();
@@ -633,25 +652,6 @@ class Overlay extends ThemableMixin(DirMixin(ControllerMixin(PolymerElement))) {
     this._placeholder.parentNode.removeChild(this._placeholder);
   }
 
-  /**
-   * Returns all attached overlays in visual stacking order.
-   * @private
-   */
-  static get __attachedInstances() {
-    return Array.from(document.body.children)
-      .filter((el) => el instanceof Overlay && !el.hasAttribute('closing'))
-      .sort((a, b) => a.__zIndex - b.__zIndex || 0);
-  }
-
-  /**
-   * Returns true if this is the last one in the opened overlays stack
-   * @return {boolean}
-   * @protected
-   */
-  get _last() {
-    return this === Overlay.__attachedInstances.pop();
-  }
-
   /** @private */
   _modelessChanged(modeless) {
     if (!modeless) {