@ui5/webcomponents 0.0.0-a3eca7ade → 0.0.0-a7032d86e

package/src/{Popover.js → Popover.ts}

@@ -1,5 +1,11 @@
+import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
+import type { ComponentStylesData } from "@ui5/webcomponents-base/dist/types.js";
 import { isIOS } from "@ui5/webcomponents-base/dist/Device.js";
+import DOMReference from "@ui5/webcomponents-base/dist/types/DOMReference.js";
 import { getClosedPopupParent } from "@ui5/webcomponents-base/dist/util/PopupUtils.js";
 import clamp from "@ui5/webcomponents-base/dist/util/clamp.js";
 import Popup from "./Popup.js";
@@ -15,225 +21,24 @@ import browserScrollbarCSS from "./generated/themes/BrowserScrollbar.css.js";
 import PopupsCommonCss from "./generated/themes/PopupsCommon.css.js";
 import PopoverCss from "./generated/themes/Popover.css.js";
 
-const arrowSize = 8;
+const ARROW_SIZE = 8;
 
-/**
- * @public
- */
-const metadata = {
-	tag: "ui5-popover",
-	properties: /** @lends sap.ui.webcomponents.main.Popover.prototype */ {
-		/**
-		 * Defines the header text.
-		 * <br><br>
-		 * <b>Note:</b> If <code>header</code> slot is provided, the <code>headerText</code> is ignored.
-		 *
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @public
-		 */
-		headerText: {
-			type: String,
-		},
-
-		/**
-		 * Determines on which side the component is placed at.
-		 * <br><br>
-		 * Available options are:
-		 * <ul>
-		 * <li><code>Left</code></li>
-		 * <li><code>Right</code></li>
-		 * <li><code>Top</code></li>
-		 * <li><code>Bottom</code></li>
-		 * </ul>
-		 *
-		 * @type {PopoverPlacementType}
-		 * @defaultvalue "Right"
-		 * @public
-		 */
-		placementType: {
-			type: PopoverPlacementType,
-			defaultValue: PopoverPlacementType.Right,
-		},
-
-		/**
-		 * Determines the horizontal alignment of the component.
-		 * <br><br>
-		 * Available options are:
-		 * <ul>
-		 * <li><code>Center</code></li>
-		 * <li><code>Left</code></li>
-		 * <li><code>Right</code></li>
-		 * <li><code>Stretch</code></li>
-		 * </ul>
-		 *
-		 * @type {PopoverHorizontalAlign}
-		 * @defaultvalue "Center"
-		 * @public
-		 */
-		horizontalAlign: {
-			type: PopoverHorizontalAlign,
-			defaultValue: PopoverHorizontalAlign.Center,
-		},
-
-		/**
-		 * Determines the vertical alignment of the component.
-		 * <br><br>
-		 * Available options are:
-		 * <ul>
-		 * <li><code>Center</code></li>
-		 * <li><code>Top</code></li>
-		 * <li><code>Bottom</code></li>
-		 * <li><code>Stretch</code></li>
-		 * </ul>
-		 *
-		 * @type {PopoverVerticalAlign}
-		 * @defaultvalue "Center"
-		 * @public
-		 */
-		verticalAlign: {
-			type: PopoverVerticalAlign,
-			defaultValue: PopoverVerticalAlign.Center,
-		},
-
-		/**
-		 * Defines whether the component should close when
-		 * clicking/tapping outside of the popover.
-		 * If enabled, it blocks any interaction with the background.
-		 *
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 */
-		modal: {
-			type: Boolean,
-		},
-
-		/**
-		 * Defines whether the block layer will be shown if modal property is set to true.
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 * @since 1.0.0-rc.10
-		 */
-		hideBackdrop: {
-			type: Boolean,
-		},
-
-		/**
-		 * Determines whether the component arrow is hidden.
-		 *
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 * @since 1.0.0-rc.15
-		 */
-		hideArrow: {
-			type: Boolean,
-		},
-
-		/**
-		 * Determines if there is no enough space, the component can be placed
-		 * over the target.
-		 *
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 */
-		allowTargetOverlap: {
-			type: Boolean,
-		},
-
-		/**
-		 * Defines the opener id of the element that the popover is shown at
-		 * @public
-		 * @type {String}
-		 * @defaultvalue ""
-		 * @since 1.2.0
-		 */
-		opener: {
-			type: String,
-		},
-
-		/**
-		 * Defines whether the content is scrollable.
-		 *
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @private
-		 */
-		disableScrolling: {
-			type: Boolean,
-		},
-
-		/**
-		 * Sets the X translation of the arrow
-		 *
-		 * @private
-		 */
-		arrowTranslateX: {
-			type: Integer,
-			defaultValue: 0,
-			noAttribute: true,
-		},
-
-		/**
-		 * Sets the Y translation of the arrow
-		 *
-		 * @private
-		 */
-		arrowTranslateY: {
-			type: Integer,
-			defaultValue: 0,
-			noAttribute: true,
-		},
-
-		/**
-		 * Returns the calculated placement depending on the free space
-		 *
-		 * @private
-		 */
-		actualPlacementType: {
-			type: PopoverPlacementType,
-			defaultValue: PopoverPlacementType.Right,
-		},
-
-		_maxHeight: {
-			type: Integer,
-			noAttribute: true,
-		},
-		_maxWidth: {
-			type: Integer,
-			noAttribute: true,
-		},
-	},
-	managedSlots: true,
-	slots: /** @lends sap.ui.webcomponents.main.Popover.prototype */ {
-		/**
-		 * Defines the header HTML Element.
-		 *
-		 * @type {HTMLElement[]}
-		 * @slot
-		 * @public
-		 */
-		header: {
-			type: HTMLElement,
-		},
-
-		/**
-		 * Defines the footer HTML Element.
-		 *
-		 * @type {HTMLElement[]}
-		 * @slot
-		 * @public
-		 */
-		footer: {
-			type: HTMLElement,
-		},
-	},
-	events: /** @lends sap.ui.webcomponents.main.Popover.prototype */ {
-	},
-};
+type PopoverSize = {
+	width: number;
+	height: number;
+}
+
+type ArrowPosition = {
+	x: number;
+	y: number;
+}
+
+type CalculatedPlacement = {
+	arrow: ArrowPosition,
+	top: number,
+	left: number,
+	placementType: PopoverPlacementType,
+}
 
 /**
  * @class
@@ -276,22 +81,218 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.Popover
- * @extends Popup
+ * @alias sap.ui.webc.main.Popover
+ * @extends sap.ui.webc.main.Popup
  * @tagname ui5-popover
  * @since 1.0.0-rc.6
  * @public
  */
+@customElement("ui5-popover")
 class Popover extends Popup {
+	/**
+	 * Defines the header text.
+	 * <br><br>
+	 * <b>Note:</b> If <code>header</code> slot is provided, the <code>headerText</code> is ignored.
+	 *
+	 * @type {string}
+	 * @name sap.ui.webc.main.Popover.prototype.headerText
+	 * @defaultvalue ""
+	 * @public
+	 */
+	@property()
+	headerText!: string;
+
+	/**
+	 * Determines on which side the component is placed at.
+	 * <br><br>
+	 * Available options are:
+	 * <ul>
+	 * <li><code>Left</code></li>
+	 * <li><code>Right</code></li>
+	 * <li><code>Top</code></li>
+	 * <li><code>Bottom</code></li>
+	 * </ul>
+	 *
+	 * @type {sap.ui.webc.main.types.PopoverPlacementType}
+	 * @name sap.ui.webc.main.Popover.prototype.placementType
+	 * @defaultvalue "Right"
+	 * @public
+	 */
+	@property({ type: PopoverPlacementType, defaultValue: PopoverPlacementType.Right })
+	placementType!: PopoverPlacementType;
+
+	/**
+	 * Determines the horizontal alignment of the component.
+	 * <br><br>
+	 * Available options are:
+	 * <ul>
+	 * <li><code>Center</code></li>
+	 * <li><code>Left</code></li>
+	 * <li><code>Right</code></li>
+	 * <li><code>Stretch</code></li>
+	 * </ul>
+	 *
+	 * @type {sap.ui.webc.main.types.PopoverHorizontalAlign}
+	 * @name sap.ui.webc.main.Popover.prototype.horizontalAlign
+	 * @defaultvalue "Center"
+	 * @public
+	 */
+	@property({ type: PopoverHorizontalAlign, defaultValue: PopoverHorizontalAlign.Center })
+	horizontalAlign!: PopoverHorizontalAlign;
+
+	/**
+	 * Determines the vertical alignment of the component.
+	 * <br><br>
+	 * Available options are:
+	 * <ul>
+	 * <li><code>Center</code></li>
+	 * <li><code>Top</code></li>
+	 * <li><code>Bottom</code></li>
+	 * <li><code>Stretch</code></li>
+	 * </ul>
+	 *
+	 * @type {sap.ui.webc.main.types.PopoverVerticalAlign}
+	 * @name sap.ui.webc.main.Popover.prototype.verticalAlign
+	 * @defaultvalue "Center"
+	 * @public
+	 */
+	@property({ type: PopoverVerticalAlign, defaultValue: PopoverVerticalAlign.Center })
+	verticalAlign!: PopoverVerticalAlign;
+
+	/**
+	 * Defines whether the component should close when
+	 * clicking/tapping outside of the popover.
+	 * If enabled, it blocks any interaction with the background.
+	 *
+	 * @type {boolean}
+	 * @name sap.ui.webc.main.Popover.prototype.modal
+	 * @defaultvalue false
+	 * @public
+	 */
+	@property({ type: Boolean })
+	modal!: boolean;
+
+	/**
+	 * Defines whether the block layer will be shown if modal property is set to true.
+	 * @type {boolean}
+	 * @name sap.ui.webc.main.Popover.prototype.hideBackdrop
+	 * @defaultvalue false
+	 * @public
+	 * @since 1.0.0-rc.10
+	 */
+	@property({ type: Boolean })
+	hideBackdrop!: boolean;
+
+	/**
+	 * Determines whether the component arrow is hidden.
+	 *
+	 * @type {boolean}
+	 * @name sap.ui.webc.main.Popover.prototype.hideArrow
+	 * @defaultvalue false
+	 * @public
+	 * @since 1.0.0-rc.15
+	 */
+	@property({ type: Boolean })
+	hideArrow!: boolean;
+
+	/**
+	 * Determines if there is no enough space, the component can be placed
+	 * over the target.
+	 *
+	 * @type {boolean}
+	 * @name sap.ui.webc.main.Popover.prototype.allowTargetOverlap
+	 * @defaultvalue false
+	 * @public
+	 */
+	@property({ type: Boolean })
+	allowTargetOverlap!: boolean;
+
+	/**
+	 * Defines the ID or DOM Reference of the element that the popover is shown at
+	 * @public
+	 * @type {sap.ui.webc.base.types.DOMReference}
+	 * @name sap.ui.webc.main.Popover.prototype.opener
+	 * @defaultvalue undefined
+	 * @since 1.2.0
+	 */
+	@property({ validator: DOMReference })
+	opener?: HTMLElement | string;
+
+	/**
+	 * Defines whether the content is scrollable.
+	 *
+	 * @type {boolean}
+	 * @defaultvalue false
+	 * @private
+	 */
+	@property({ type: Boolean })
+	disableScrolling!: boolean;
+
+	/**
+	 * Sets the X translation of the arrow
+	 *
+	 * @private
+	 */
+	@property({ validator: Integer, defaultValue: 0, noAttribute: true })
+	arrowTranslateX!: number;
+
+	/**
+	 * Sets the Y translation of the arrow
+	 *
+	 * @private
+	 */
+	@property({ validator: Integer, defaultValue: 0, noAttribute: true })
+	arrowTranslateY!: number;
+
+	/**
+	 * Returns the calculated placement depending on the free space
+	 *
+	 * @private
+	 */
+	@property({ type: PopoverPlacementType, defaultValue: PopoverPlacementType.Right })
+	actualPlacementType!: PopoverPlacementType;
+
+	@property({ validator: Integer, noAttribute: true })
+	_maxHeight?: number;
+
+	@property({ validator: Integer, noAttribute: true })
+	_maxWidth?: number;
+
+	/**
+	 * Defines the header HTML Element.
+	 *
+	 * @type {HTMLElement[]}
+	 * @name sap.ui.webc.main.Popover.prototype.header
+	 * @slot
+	 * @public
+	 */
+	@slot({ type: HTMLElement })
+	header!: Array<HTMLElement>;
+
+	/**
+	 * Defines the footer HTML Element.
+	 *
+	 * @type {HTMLElement[]}
+	 * @name sap.ui.webc.main.Popover.prototype.footer
+	 * @slot
+	 * @public
+	 */
+	@slot({ type: HTMLElement })
+	footer!: Array<HTMLElement>;
+
+	_opener?: HTMLElement;
+	_openerRect?: DOMRect;
+	_preventRepositionAndClose?: boolean;
+	_top?: number;
+	_left?: number;
+	_oldPlacement?: CalculatedPlacement;
+	_width?: string;
+
 	constructor() {
 		super();
 	}
 
-	static get metadata() {
-		return metadata;
-	}
-
-	static get styles() {
+	static get styles(): ComponentStylesData {
 		return [browserScrollbarCSS, PopupsCommonCss, PopoverCss];
 	}
 
@@ -303,13 +304,16 @@ class Popover extends Popup {
 		return 10; // px
 	}
 
-	static get ARROW_MARGIN() {
-		return 6; // px
-	}
-
 	onAfterRendering() {
 		if (!this.isOpen() && this.open) {
-			const opener = document.getElementById(this.opener);
+			let opener;
+
+			if (this.opener instanceof HTMLElement) {
+				opener = this.opener;
+			} else if (typeof this.opener === "string") {
+				opener = (this.getRootNode() as Document).getElementById(this.opener);
+			}
+
 			if (!opener) {
 				console.warn("Valid opener id is required."); // eslint-disable-line
 				return;
@@ -321,20 +325,33 @@ class Popover extends Popup {
 		}
 	}
 
-	isOpenerClicked(event) {
-		const target = event.target;
-		return target === this._opener || (target.getFocusDomRef && target.getFocusDomRef() === this._opener) || event.composedPath().indexOf(this._opener) > -1;
+	isOpenerClicked(e: MouseEvent) {
+		const target = e.target as HTMLElement;
+		if (target === this._opener) {
+			return true;
+		}
+
+		const ui5ElementTarget = target as UI5Element;
+
+		if (ui5ElementTarget.getFocusDomRef && ui5ElementTarget.getFocusDomRef() === this._opener) {
+			return true;
+		}
+
+		return e.composedPath().indexOf(this._opener as EventTarget) > -1;
 	}
 
 	/**
 	 * Shows the popover.
 	 * @param {HTMLElement} opener the element that the popover is shown at
-	 * @param {boolean} preventInitialFocus prevents applying the focus inside the popover
+	 * @param {boolean} [preventInitialFocus=false] prevents applying the focus inside the popover
 	 * @public
 	 * @async
+	 * @method
+	 * @name sap.ui.webc.main.Popover#showAt
+	 * @async
 	 * @returns {Promise} Resolved when the popover is open
 	 */
-	async showAt(opener, preventInitialFocus = false) {
+	async showAt(opener: HTMLElement, preventInitialFocus = false) {
 		if (!opener || this.opened) {
 			return;
 		}
@@ -361,7 +378,7 @@ class Popover extends Popup {
 		removeOpenedPopover(this);
 	}
 
-	shouldCloseDueToOverflow(placement, openerRect) {
+	shouldCloseDueToOverflow(placement: PopoverPlacementType, openerRect: DOMRect): boolean {
 		const threshold = 32;
 		const limits = {
 			"Right": openerRect.right,
@@ -370,26 +387,33 @@ class Popover extends Popup {
 			"Bottom": openerRect.bottom,
 		};
 
-		const closedPopupParent = getClosedPopupParent(this._opener);
+		const closedPopupParent = getClosedPopupParent(this._opener!);
 		let overflowsBottom = false;
 		let overflowsTop = false;
 
-		if (closedPopupParent.showAt) {
-			const contentRect = closedPopupParent.contentDOM.getBoundingClientRect();
+		if ((closedPopupParent as Popover).showAt) {
+			const contentRect = (closedPopupParent as Popover).contentDOM.getBoundingClientRect();
 			overflowsBottom = openerRect.top > (contentRect.top + contentRect.height);
 			overflowsTop = (openerRect.top + openerRect.height) < contentRect.top;
 		}
 
-		return (limits[placement] < 0 || (limits[placement] + threshold > closedPopupParent.innerHeight)) || overflowsBottom || overflowsTop;
+		return (limits[placement] < 0 || (limits[placement] + threshold > (closedPopupParent as unknown as Window).innerHeight)) || overflowsBottom || overflowsTop;
 	}
 
-	shouldCloseDueToNoOpener(openerRect) {
+	shouldCloseDueToNoOpener(openerRect: DOMRect): boolean {
 		return openerRect.top === 0
 			&& openerRect.bottom === 0
 			&& openerRect.left === 0
 			&& openerRect.right === 0;
 	}
 
+	isOpenerOutsideViewport(openerRect: DOMRect): boolean {
+		return openerRect.bottom < 0
+			|| openerRect.top > window.innerHeight
+			|| openerRect.right < 0
+			|| openerRect.left > window.innerWidth;
+	}
+
 	/**
 	 * @override
 	 */
@@ -416,52 +440,48 @@ class Popover extends Popup {
 
 		if (this.isOpen()) {
 			// update opener rect if it was changed during the popover being opened
-			this._openerRect = this._opener.getBoundingClientRect();
+			this._openerRect = this._opener!.getBoundingClientRect();
 		}
 
-		if (this.shouldCloseDueToNoOpener(this._openerRect) && this.isFocusWithin()) {
+		if (this.shouldCloseDueToNoOpener(this._openerRect!) && this.isFocusWithin()) {
 			// reuse the old placement as the opener is not available,
 			// but keep the popover open as the focus is within
 			placement = this._oldPlacement;
 		} else {
-			placement = this.calcPlacement(this._openerRect, popoverSize);
+			placement = this.calcPlacement(this._openerRect!, popoverSize);
 		}
 
 		const stretching = this.horizontalAlign === PopoverHorizontalAlign.Stretch;
 
-		if (this._preventRepositionAndClose) {
+		if (this._preventRepositionAndClose || this.isOpenerOutsideViewport(this._openerRect!)) {
 			return this.close();
 		}
 
 		this._oldPlacement = placement;
-		this.actualPlacementType = placement.placementType;
+		this.actualPlacementType = placement!.placementType;
 
 		let left = clamp(
-			this._left,
+			this._left!,
 			Popover.VIEWPORT_MARGIN,
 			document.documentElement.clientWidth - popoverSize.width - Popover.VIEWPORT_MARGIN,
 		);
 
 		if (this.actualPlacementType === PopoverPlacementType.Right) {
-			left = Math.max(left, this._left);
+			left = Math.max(left, this._left!);
 		}
 
 		let top = clamp(
-			this._top,
+			this._top!,
 			Popover.VIEWPORT_MARGIN,
 			document.documentElement.clientHeight - popoverSize.height - Popover.VIEWPORT_MARGIN,
 		);
 
 		if (this.actualPlacementType === PopoverPlacementType.Bottom) {
-			top = Math.max(top, this._top);
+			top = Math.max(top, this._top!);
 		}
 
-		const isVertical = this.actualPlacementType === PopoverPlacementType.Top || this.actualPlacementType === PopoverPlacementType.Bottom;
-		const borderRadius = Number.parseInt(window.getComputedStyle(this).getPropertyValue("border-radius"));
-		const arrow = this._clampArrowPlacement(placement.arrow, isVertical, this._top, this._left, popoverSize, borderRadius);
-
-		this.arrowTranslateX = arrow.x;
-		this.arrowTranslateY = arrow.y;
+		this.arrowTranslateX = placement!.arrow.x;
+		this.arrowTranslateY = placement!.arrow.y;
 
 		top = this._adjustForIOSKeyboard(top);
 
@@ -476,59 +496,6 @@ class Popover extends Popup {
 		}
 	}
 
-	/**
-	 * Restricts the arrow's coordinates within the bounds of the popover.
-	 * @private
-	 * @param {{x: number, y: number}} arrow arrow's coordinates
-	 * @param {boolean} isVertical if the popover is placed vertically relative to the opener
-	 * @param {number} top popover's top
-	 * @param {number} left popover's left
-	 * @param {{width: number, height: number}} popoverSize popover's width and height
-	 * @param {number} borderRadius value of the border-radius property
-	 * @returns {{x: number, y: number}} Arrow's coordinates
-	 */
-	_clampArrowPlacement({ x, y }, isVertical, top, left, { width, height }, borderRadius) {
-		const maxY = this._getArrowRange(height, borderRadius);
-		const maxX = this._getArrowRange(width, borderRadius);
-
-		if (isVertical) {
-			const popoverOnLeftBorderOffset = Popover.VIEWPORT_MARGIN - left;
-			const popoverOnRightBorderOffset = left + width + Popover.VIEWPORT_MARGIN - document.documentElement.clientWidth;
-
-			if (popoverOnLeftBorderOffset > 0) {
-				x = Math.max(x - popoverOnLeftBorderOffset, -maxX);
-			} else if (popoverOnRightBorderOffset > 0) {
-				x = Math.min(x + popoverOnRightBorderOffset, maxX);
-			}
-		}
-
-		if (!isVertical) {
-			const popoverOnTopBorderOffset = Popover.VIEWPORT_MARGIN - top;
-			const popoverOnBottomBorderOffset = top + height + Popover.VIEWPORT_MARGIN - document.documentElement.clientHeight;
-			if (popoverOnTopBorderOffset > 0) {
-				y = Math.max(y - popoverOnTopBorderOffset, -maxY);
-			} else if (popoverOnBottomBorderOffset > 0) {
-				y = Math.min(y + popoverOnBottomBorderOffset, maxY);
-			}
-		}
-
-		return {
-			x: Math.round(x),
-			y: Math.round(y),
-		};
-	}
-
-	/**
-	 * Returns the allowed range for the popover arrow based on its dimension.
-	 * @private
-	 * @param {number} dimension the height or width of the popover
-	 * @param {number} borderRadius border radius of the popover
-	 * @returns {number}
-	 */
-	_getArrowRange(dimension, borderRadius) {
-		return Math.floor((dimension / 2) - (borderRadius + Popover.ARROW_MARGIN));
-	}
-
 	/**
 	 * Adjust the desired top position to compensate for shift of the screen
 	 * caused by opened keyboard on iOS which affects all elements with position:fixed.
@@ -536,7 +503,7 @@ class Popover extends Popup {
 	 * @param {int} top The target top in px.
 	 * @returns {int} The adjusted top in px.
 	 */
-	_adjustForIOSKeyboard(top) {
+	_adjustForIOSKeyboard(top: number): number {
 		if (!isIOS()) {
 			return top;
 		}
@@ -546,7 +513,7 @@ class Popover extends Popup {
 		return top + (Number.parseInt(this.style.top || "0") - actualTop);
 	}
 
-	getPopoverSize() {
+	getPopoverSize(): PopoverSize {
 		if (!this.opened) {
 			Object.assign(this.style, {
 				display: "block",
@@ -562,18 +529,14 @@ class Popover extends Popup {
 		return { width, height };
 	}
 
-	get contentDOM() {
-		return this.shadowRoot.querySelector(".ui5-popup-content");
-	}
-
 	get arrowDOM() {
-		return this.shadowRoot.querySelector(".ui5-popover-arrow");
+		return this.shadowRoot!.querySelector(".ui5-popover-arrow")!;
 	}
 
 	/**
 	 * @private
 	 */
-	calcPlacement(targetRect, popoverSize) {
+	calcPlacement(targetRect: DOMRect, popoverSize: PopoverSize): CalculatedPlacement {
 		let left = 0;
 		let top = 0;
 		const allowTargetOverlap = this.allowTargetOverlap;
@@ -598,7 +561,7 @@ class Popover extends Popup {
 			popoverSize.height = targetRect.height;
 		}
 
-		const arrowOffset = this.hideArrow ? 0 : arrowSize;
+		const arrowOffset = this.hideArrow ? 0 : ARROW_SIZE;
 
 		// calc popover positions
 		switch (placementType) {
@@ -666,7 +629,8 @@ class Popover extends Popup {
 			this._top = Math.round(top);
 		}
 
-		const arrowPos = this.getArrowPosition(targetRect, popoverSize, left, top, isVertical);
+		const borderRadius = Number.parseInt(window.getComputedStyle(this).getPropertyValue("border-radius"));
+		const arrowPos = this.getArrowPosition(targetRect, popoverSize, left, top, isVertical, borderRadius);
 
 		return {
 			arrow: arrowPos,
@@ -680,13 +644,14 @@ class Popover extends Popup {
 	 * Calculates the position for the arrow.
 	 * @private
 	 * @param targetRect BoundingClientRect of the target element
-	 * @param popoverSize Width and height of the popover
+	 * @param {{width: number, height: number}} popoverSize Width and height of the popover
 	 * @param left Left offset of the popover
 	 * @param top Top offset of the popover
-	 * @param isVertical if the popover is positioned vertically to the target element
+	 * @param isVertical If the popover is positioned vertically to the target element
+	 * @param {number} borderRadius Value of the border-radius property
 	 * @returns {{x: number, y: number}} Arrow's coordinates
 	 */
-	getArrowPosition(targetRect, popoverSize, left, top, isVertical) {
+	getArrowPosition(targetRect: DOMRect, popoverSize: PopoverSize, left: number, top: number, isVertical: boolean, borderRadius: number): ArrowPosition {
 		let arrowXCentered = this.horizontalAlign === PopoverHorizontalAlign.Center || this.horizontalAlign === PopoverHorizontalAlign.Stretch;
 
 		if (this.horizontalAlign === PopoverHorizontalAlign.Right && left <= targetRect.left) {
@@ -707,6 +672,22 @@ class Popover extends Popup {
 			arrowTranslateY = targetRect.top + targetRect.height / 2 - top - popoverSize.height / 2;
 		}
 
+		// Restricts the arrow's translate value along each dimension,
+		// so that the arrow does not clip over the popover's rounded borders.
+		const safeRangeForArrowY = popoverSize.height / 2 - borderRadius - ARROW_SIZE / 2;
+		arrowTranslateY = clamp(
+			arrowTranslateY,
+			-safeRangeForArrowY,
+			safeRangeForArrowY,
+		);
+
+		const safeRangeForArrowX = popoverSize.width / 2 - borderRadius - ARROW_SIZE / 2;
+		arrowTranslateX = clamp(
+			arrowTranslateX,
+			-safeRangeForArrowX,
+			safeRangeForArrowX,
+		);
+
 		return {
 			x: Math.round(arrowTranslateX),
 			y: Math.round(arrowTranslateY),
@@ -717,7 +698,7 @@ class Popover extends Popup {
 	 * Fallbacks to new placement, prioritizing <code>Left</code> and <code>Right</code> placements.
 	 * @private
 	 */
-	fallbackPlacement(clientWidth, clientHeight, targetRect, popoverSize) {
+	fallbackPlacement(clientWidth: number, clientHeight: number, targetRect: DOMRect, popoverSize: PopoverSize): PopoverPlacementType | undefined {
 		if (targetRect.left > popoverSize.width) {
 			return PopoverPlacementType.Left;
 		}
@@ -735,7 +716,7 @@ class Popover extends Popup {
 		}
 	}
 
-	getActualPlacementType(targetRect, popoverSize) {
+	getActualPlacementType(targetRect: DOMRect, popoverSize: PopoverSize): PopoverPlacementType {
 		const placementType = this.placementType;
 		let actualPlacementType = placementType;
 
@@ -770,13 +751,12 @@ class Popover extends Popup {
 		return actualPlacementType;
 	}
 
-	getVerticalLeft(targetRect, popoverSize) {
+	getVerticalLeft(targetRect: DOMRect, popoverSize: PopoverSize): number {
 		let left;
 
 		switch (this.horizontalAlign) {
 		case PopoverHorizontalAlign.Center:
 		case PopoverHorizontalAlign.Stretch:
-
 			left = targetRect.left - (popoverSize.width - targetRect.width) / 2;
 			break;
 		case PopoverHorizontalAlign.Left:
@@ -790,7 +770,7 @@ class Popover extends Popup {
 		return left;
 	}
 
-	getHorizontalTop(targetRect, popoverSize) {
+	getHorizontalTop(targetRect: DOMRect, popoverSize: PopoverSize): number {
 		let top;
 
 		switch (this.verticalAlign) {
@@ -818,19 +798,23 @@ class Popover extends Popup {
 	}
 
 	get _ariaLabelledBy() { // Required by Popup.js
-		return this._ariaLabel ? undefined : "ui5-popup-header";
+		if (!this._ariaLabel && this._displayHeader) {
+			return "ui5-popup-header";
+		}
+
+		return undefined;
 	}
 
-	get _ariaModal() { // Required by Popup.js
-		return true;
+	get _ariaModal() {
+		return "true";
 	}
 
 	get styles() {
 		return {
 			...super.styles,
 			root: {
-				"max-height": `${this._maxHeight}px`,
-				"max-width": `${this._maxWidth}px`,
+				"max-height": this._maxHeight ? `${this._maxHeight}px` : "",
+				"max-width": this._maxWidth ? `${this._maxWidth}px` : "",
 			},
 			arrow: {
 				transform: `translate(${this.arrowTranslateX}px, ${this.arrowTranslateY}px)`,
@@ -849,7 +833,7 @@ class Popover extends Popup {
 	 * Hook for descendants to hide header.
 	 */
 	get _displayHeader() {
-		return this.header.length || this.headerText;
+		return !!(this.header.length || this.headerText);
 	}
 
 	/**
@@ -860,6 +844,12 @@ class Popover extends Popup {
 	}
 }
 
+const instanceOfPopover = (object: any): object is Popover => {
+	return "showAt" in object;
+};
+
 Popover.define();
 
 export default Popover;
+
+export { instanceOfPopover };