@ui5/webcomponents 0.0.0-dcd8e5389 → 0.0.0-ddc5fe31b

package/dist/Popover.d.ts

@@ -1,4 +1,5 @@
 import Popup from "./Popup.js";
+import type { PopupBeforeCloseEventDetail as PopoverBeforeCloseEventDetail } from "./Popup.js";
 import PopoverPlacementType from "./types/PopoverPlacementType.js";
 import PopoverVerticalAlign from "./types/PopoverVerticalAlign.js";
 import PopoverHorizontalAlign from "./types/PopoverHorizontalAlign.js";
@@ -14,7 +15,7 @@ type CalculatedPlacement = {
     arrow: ArrowPosition;
     top: number;
     left: number;
-    placementType: PopoverPlacementType;
+    placementType: `${PopoverPlacementType}`;
 };
 /**
  * @class
@@ -40,28 +41,24 @@ type CalculatedPlacement = {
  * or selects an action within the popover. You can prevent this with the
  * <code>modal</code> property.
  *
- * <h3>CSS Shadow Parts</h3>
- *
- * <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
- * <br>
- * The <code>ui5-popover</code> exposes the following CSS Shadow Parts:
- * <ul>
- * <li>header - Used to style the header of the component</li>
- * <li>content - Used to style the content of the component</li>
- * <li>footer - Used to style the footer of the component</li>
- * </ul>
- *
  * <h3>ES6 Module Import</h3>
  *
  * <code>import "@ui5/webcomponents/dist/Popover.js";</code>
  *
+ * <b>Note: </b> We recommend placing popup-like components (<code>ui5-dialog</code> and <code>ui5-popover</code>)
+ * outside any other components. Preferably, the popup-like components should be placed
+ * in an upper level HTML element. Otherwise, in some cases the parent HTML elements can break
+ * the position and/or z-index management of the popup-like components.
+ *
+ * <b>Note:</b> We don't recommend nesting popup-like components (<code>ui5-dialog</code>, <code>ui5-popover</code>).
+ *
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.Popover
- * @extends sap.ui.webc.main.Popup
- * @tagname ui5-popover
+ * @extends Popup
  * @since 1.0.0-rc.6
  * @public
+ * @csspart header - Used to style the header of the component
+ * @csspart content - Used to style the content of the component
+ * @csspart footer - Used to style the footer of the component
  */
 declare class Popover extends Popup {
     /**
@@ -69,79 +66,43 @@ declare class Popover extends Popup {
      * <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 ""
+     * @default ""
      * @public
      */
     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"
+     * @default "Right"
      * @public
      */
-    placementType: PopoverPlacementType;
+    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"
+     * @default "Center"
      * @public
      */
-    horizontalAlign: PopoverHorizontalAlign;
+    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"
+     * @default "Center"
      * @public
      */
-    verticalAlign: PopoverVerticalAlign;
+    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
+     * @default false
      * @public
      */
     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
+     * @default false
      * @public
      * @since 1.0.0-rc.10
      */
@@ -149,9 +110,7 @@ declare class Popover extends Popup {
     /**
      * Determines whether the component arrow is hidden.
      *
-     * @type {boolean}
-     * @name sap.ui.webc.main.Popover.prototype.hideArrow
-     * @defaultvalue false
+     * @default false
      * @public
      * @since 1.0.0-rc.15
      */
@@ -160,26 +119,21 @@ declare class Popover extends Popup {
      * 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
+     * @default false
      * @public
      */
     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
+     * @default undefined
      * @since 1.2.0
      */
     opener?: HTMLElement | string;
     /**
      * Defines whether the content is scrollable.
      *
-     * @type {boolean}
-     * @defaultvalue false
+     * @default false
      * @private
      */
     disableScrolling: boolean;
@@ -200,24 +154,18 @@ declare class Popover extends Popup {
      *
      * @private
      */
-    actualPlacementType: PopoverPlacementType;
+    actualPlacementType: `${PopoverPlacementType}`;
     _maxHeight?: number;
     _maxWidth?: number;
     /**
      * Defines the header HTML Element.
      *
-     * @type {HTMLElement[]}
-     * @name sap.ui.webc.main.Popover.prototype.header
-     * @slot
      * @public
      */
     header: Array<HTMLElement>;
     /**
      * Defines the footer HTML Element.
      *
-     * @type {HTMLElement[]}
-     * @name sap.ui.webc.main.Popover.prototype.footer
-     * @slot
      * @public
      */
     footer: Array<HTMLElement>;
@@ -234,14 +182,10 @@ declare class Popover extends Popup {
     isOpenerClicked(e: MouseEvent): boolean;
     /**
      * Shows the popover.
-     * @param {HTMLElement} opener the element that the popover is shown at
-     * @param {boolean} [preventInitialFocus=false] prevents applying the focus inside the popover
+     * @param opener the element that the popover is shown at
+     * @param [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
+     * @returns Resolved when the popover is open
      */
     showAt(opener: HTMLElement, preventInitialFocus?: boolean): Promise<void>;
     /**
@@ -254,7 +198,7 @@ declare class Popover extends Popup {
      * @private
      */
     _removeOpenedPopup(): void;
-    shouldCloseDueToOverflow(placement: PopoverPlacementType, openerRect: DOMRect): boolean;
+    shouldCloseDueToOverflow(placement: `${PopoverPlacementType}`, openerRect: DOMRect): boolean;
     shouldCloseDueToNoOpener(openerRect: DOMRect): boolean;
     isOpenerOutsideViewport(openerRect: DOMRect): boolean;
     /**
@@ -267,11 +211,16 @@ declare class Popover extends Popup {
      * 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.
      * @private
-     * @param {int} top The target top in px.
-     * @returns {int} The adjusted top in px.
+     * @param top The target top in px.
+     * @returns The adjusted top in px.
      */
     _adjustForIOSKeyboard(top: number): number;
+    _getContainingBlockClientLocation(): DOMRect | {
+        left: number;
+        top: number;
+    };
     getPopoverSize(): PopoverSize;
+    _showOutsideViewport(): void;
     get arrowDOM(): Element;
     /**
      * @private
@@ -281,12 +230,12 @@ declare class Popover extends Popup {
      * Calculates the position for the arrow.
      * @private
      * @param targetRect BoundingClientRect of the target element
-     * @param {{width: number, height: number}} popoverSize Width and height of the popover
+     * @param 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 {number} borderRadius Value of the border-radius property
-     * @returns {{x: number, y: number}} Arrow's coordinates
+     * @param borderRadius Value of the border-radius property
+     * @returns  Arrow's coordinates
      */
     getArrowPosition(targetRect: DOMRect, popoverSize: PopoverSize, left: number, top: number, isVertical: boolean, borderRadius: number): ArrowPosition;
     /**
@@ -294,7 +243,7 @@ declare class Popover extends Popup {
      * @private
      */
     fallbackPlacement(clientWidth: number, clientHeight: number, targetRect: DOMRect, popoverSize: PopoverSize): PopoverPlacementType | undefined;
-    getActualPlacementType(targetRect: DOMRect, popoverSize: PopoverSize): PopoverPlacementType;
+    getActualPlacementType(targetRect: DOMRect, popoverSize: PopoverSize): `${PopoverPlacementType}`;
     getVerticalLeft(targetRect: DOMRect, popoverSize: PopoverSize): number;
     getHorizontalTop(targetRect: DOMRect, popoverSize: PopoverSize): number;
     get isModal(): boolean;
@@ -322,8 +271,9 @@ declare class Popover extends Popup {
      * Hook for descendants to hide footer.
      */
     get _displayFooter(): boolean;
-    get _actualHorizontalAlign(): PopoverHorizontalAlign;
+    get _actualHorizontalAlign(): "Left" | "Right" | "Center" | "Stretch" | PopoverHorizontalAlign.Left | PopoverHorizontalAlign.Right;
 }
 declare const instanceOfPopover: (object: any) => object is Popover;
 export default Popover;
 export { instanceOfPopover };
+export type { PopoverBeforeCloseEventDetail, };

package/dist/Popover.js

@@ -13,6 +13,8 @@ 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 isElementContainingBlock from "@ui5/webcomponents-base/dist/util/isElementContainingBlock.js";
+import getParentElement from "@ui5/webcomponents-base/dist/util/getParentElement.js";
 import Popup from "./Popup.js";
 import PopoverPlacementType from "./types/PopoverPlacementType.js";
 import PopoverVerticalAlign from "./types/PopoverVerticalAlign.js";
@@ -49,28 +51,24 @@ const ARROW_SIZE = 8;
  * or selects an action within the popover. You can prevent this with the
  * <code>modal</code> property.
  *
- * <h3>CSS Shadow Parts</h3>
- *
- * <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
- * <br>
- * The <code>ui5-popover</code> exposes the following CSS Shadow Parts:
- * <ul>
- * <li>header - Used to style the header of the component</li>
- * <li>content - Used to style the content of the component</li>
- * <li>footer - Used to style the footer of the component</li>
- * </ul>
- *
  * <h3>ES6 Module Import</h3>
  *
  * <code>import "@ui5/webcomponents/dist/Popover.js";</code>
  *
+ * <b>Note: </b> We recommend placing popup-like components (<code>ui5-dialog</code> and <code>ui5-popover</code>)
+ * outside any other components. Preferably, the popup-like components should be placed
+ * in an upper level HTML element. Otherwise, in some cases the parent HTML elements can break
+ * the position and/or z-index management of the popup-like components.
+ *
+ * <b>Note:</b> We don't recommend nesting popup-like components (<code>ui5-dialog</code>, <code>ui5-popover</code>).
+ *
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.Popover
- * @extends sap.ui.webc.main.Popup
- * @tagname ui5-popover
+ * @extends Popup
  * @since 1.0.0-rc.6
  * @public
+ * @csspart header - Used to style the header of the component
+ * @csspart content - Used to style the content of the component
+ * @csspart footer - Used to style the footer of the component
  */
 let Popover = Popover_1 = class Popover extends Popup {
     static get VIEWPORT_MARGIN() {
@@ -80,13 +78,14 @@ let Popover = Popover_1 = class Popover extends Popup {
         super();
     }
     onAfterRendering() {
+        super.onAfterRendering();
         if (!this.isOpen() && this.open) {
             let opener;
             if (this.opener instanceof HTMLElement) {
                 opener = this.opener;
             }
             else if (typeof this.opener === "string") {
-                opener = this.getRootNode().getElementById(this.opener);
+                opener = this.getRootNode().getElementById(this.opener) || document.getElementById(this.opener);
             }
             if (!opener) {
                 console.warn("Valid opener id is required."); // eslint-disable-line
@@ -111,14 +110,10 @@ let Popover = Popover_1 = class Popover extends Popup {
     }
     /**
      * Shows the popover.
-     * @param {HTMLElement} opener the element that the popover is shown at
-     * @param {boolean} [preventInitialFocus=false] prevents applying the focus inside the popover
+     * @param opener the element that the popover is shown at
+     * @param [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
+     * @returns Resolved when the popover is open
      */
     async showAt(opener, preventInitialFocus = false) {
         if (!opener || this.opened) {
@@ -185,8 +180,11 @@ let Popover = Popover_1 = class Popover extends Popup {
         this._show();
     }
     _show() {
-        let placement;
+        if (!this.opened) {
+            this._showOutsideViewport();
+        }
         const popoverSize = this.getPopoverSize();
+        let placement;
         if (popoverSize.width === 0 || popoverSize.height === 0) {
             // size can not be determined properly at this point, popover will be shown with the next reposition
             return;
@@ -195,7 +193,7 @@ let Popover = Popover_1 = class Popover extends Popup {
             // update opener rect if it was changed during the popover being opened
             this._openerRect = this._opener.getBoundingClientRect();
         }
-        if (this.shouldCloseDueToNoOpener(this._openerRect) && this.isFocusWithin()) {
+        if (this.shouldCloseDueToNoOpener(this._openerRect) && this.isFocusWithin() && this._oldPlacement) {
             // reuse the old placement as the opener is not available,
             // but keep the popover open as the focus is within
             placement = this._oldPlacement;
@@ -219,11 +217,13 @@ let Popover = Popover_1 = class Popover extends Popup {
         this.arrowTranslateX = placement.arrow.x;
         this.arrowTranslateY = placement.arrow.y;
         top = this._adjustForIOSKeyboard(top);
+        const containingBlockClientLocation = this._getContainingBlockClientLocation();
+        left -= containingBlockClientLocation.left;
+        top -= containingBlockClientLocation.top;
         Object.assign(this.style, {
             top: `${top}px`,
             left: `${left}px`,
         });
-        super._show();
         if (this.horizontalAlign === PopoverHorizontalAlign.Stretch && this._width) {
             this.style.width = this._width;
         }
@@ -232,8 +232,8 @@ let Popover = Popover_1 = class Popover extends Popup {
      * 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.
      * @private
-     * @param {int} top The target top in px.
-     * @returns {int} The adjusted top in px.
+     * @param top The target top in px.
+     * @returns The adjusted top in px.
      */
     _adjustForIOSKeyboard(top) {
         if (!isIOS()) {
@@ -242,17 +242,27 @@ let Popover = Popover_1 = class Popover extends Popup {
         const actualTop = Math.ceil(this.getBoundingClientRect().top);
         return top + (Number.parseInt(this.style.top || "0") - actualTop);
     }
-    getPopoverSize() {
-        if (!this.opened) {
-            Object.assign(this.style, {
-                display: "block",
-                top: "-10000px",
-                left: "-10000px",
-            });
+    _getContainingBlockClientLocation() {
+        let parentElement = getParentElement(this);
+        while (parentElement) {
+            if (isElementContainingBlock(parentElement)) {
+                return parentElement.getBoundingClientRect();
+            }
+            parentElement = getParentElement(parentElement);
         }
+        return { left: 0, top: 0 };
+    }
+    getPopoverSize() {
         const rect = this.getBoundingClientRect(), width = rect.width, height = rect.height;
         return { width, height };
     }
+    _showOutsideViewport() {
+        Object.assign(this.style, {
+            display: this._displayProp,
+            top: "-10000px",
+            left: "-10000px",
+        });
+    }
     get arrowDOM() {
         return this.shadowRoot.querySelector(".ui5-popover-arrow");
     }
@@ -354,12 +364,12 @@ let Popover = Popover_1 = class Popover extends Popup {
      * Calculates the position for the arrow.
      * @private
      * @param targetRect BoundingClientRect of the target element
-     * @param {{width: number, height: number}} popoverSize Width and height of the popover
+     * @param 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 {number} borderRadius Value of the border-radius property
-     * @returns {{x: number, y: number}} Arrow's coordinates
+     * @param borderRadius Value of the border-radius property
+     * @returns  Arrow's coordinates
      */
     getArrowPosition(targetRect, popoverSize, left, top, isVertical, borderRadius) {
         const horizontalAlign = this._actualHorizontalAlign;
@@ -440,7 +450,7 @@ let Popover = Popover_1 = class Popover extends Popup {
     }
     getVerticalLeft(targetRect, popoverSize) {
         const horizontalAlign = this._actualHorizontalAlign;
-        let left;
+        let left = 0;
         switch (horizontalAlign) {
             case PopoverHorizontalAlign.Center:
             case PopoverHorizontalAlign.Stretch:
@@ -456,7 +466,7 @@ let Popover = Popover_1 = class Popover extends Popup {
         return left;
     }
     getHorizontalTop(targetRect, popoverSize) {
-        let top;
+        let top = 0;
         switch (this.verticalAlign) {
             case PopoverVerticalAlign.Center:
             case PopoverVerticalAlign.Stretch: