@vaadin/overlay 24.0.0-alpha3 → 24.0.0-alpha5

package/package.json

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

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

@@ -0,0 +1,57 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2022 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

@@ -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