@ui5/webcomponents 0.0.0-78035f8e7 → 0.0.0-7e7d9ea6f

package/dist/Popup.js

@@ -1,34 +1,42 @@
+import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import { isChrome } from "@ui5/webcomponents-base/dist/Device.js";
 import { getFirstFocusableElement, getLastFocusableElement } from "@ui5/webcomponents-base/dist/util/FocusableElements.js";
-import createStyleInHead from "@ui5/webcomponents-base/dist/util/createStyleInHead.js";
+import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+import { hasStyle, createStyle } from "@ui5/webcomponents-base/dist/ManagedStyles.js";
+import { isTabPrevious } from "@ui5/webcomponents-base/dist/Keys.js";
+import { getNextZIndex, getFocusedElement, isFocusedElementWithinNode } from "@ui5/webcomponents-base/dist/util/PopupUtils.js";
+import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import MediaRange from "@ui5/webcomponents-base/dist/MediaRange.js";
 import PopupTemplate from "./generated/templates/PopupTemplate.lit.js";
 import PopupBlockLayer from "./generated/templates/PopupBlockLayerTemplate.lit.js";
-import { getNextZIndex, getFocusedElement } from "./popup-utils/PopupUtils.js";
 import { addOpenedPopup, removeOpenedPopup } from "./popup-utils/OpenedPopupsRegistry.js";
 
 // Styles
 import styles from "./generated/themes/Popup.css.js";
 import staticAreaStyles from "./generated/themes/PopupStaticAreaStyles.css.js";
+import globalStyles from "./generated/themes/PopupGlobal.css.js";
 
 /**
  * @public
  */
 const metadata = {
 	managedSlots: true,
-	slots: /** @lends  sap.ui.webcomponents.main.Popup.prototype */ {
+	slots: /** @lends sap.ui.webcomponents.main.Popup.prototype */ {
 
 		/**
 		 * Defines the content of the Popup.
-		 * @type {Node[]}
-		 * @slot
+		 * @type {HTMLElement[]}
+		 * @slot content
 		 * @public
 		 */
 		"default": {
 			type: HTMLElement,
+			propertyName: "content",
 		},
 	},
-	properties: /** @lends  sap.ui.webcomponents.main.Popup.prototype */ {
+	properties: /** @lends sap.ui.webcomponents.main.Popup.prototype */ {
 		/**
 		 * Defines the ID of the HTML Element, which will get the initial focus.
 		 *
@@ -41,26 +49,75 @@ const metadata = {
 		},
 
 		/**
-		 * Indicates if the elements is open
+		 * Defines if the focus should be returned to the previously focused element,
+		 * when the popup closes.
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @public
+		 * @since 1.0.0-rc.8
+		*/
+		preventFocusRestore: {
+			type: Boolean,
+		},
+
+		/**
+		 * Indicates if the element is open
+		 * @public
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @since 1.2.0
+		 */
+		open: {
+			type: Boolean,
+		},
+
+		/**
+		 * Indicates if the element is already open
 		 * @private
+		 * @type {boolean}
+		 * @defaultvalue false
 		 */
 		opened: {
 			type: Boolean,
+			noAttribute: true,
 		},
 
 		/**
-		 * Defines the aria-label attribute for the popup
+		 * Defines the accessible name of the component.
 		 *
-		 * @type {String}
-		 * @defaultvalue: ""
-		 * @private
-		 * @since 1.0.0-rc.8
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @public
+		 * @since 1.0.0-rc.15
 		 */
-		ariaLabel: {
+		accessibleName: {
 			type: String,
 			defaultValue: undefined,
 		},
 
+		/**
+		 * Defines the IDs of the elements that label the component.
+		 *
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @public
+		 * @since 1.1.0
+		 */
+		accessibleNameRef: {
+			type: String,
+			defaultValue: "",
+		},
+
+		/**
+		 * Defines the current media query size.
+		 *
+		 * @type {string}
+		 * @private
+		 */
+		mediaRange: {
+			type: String,
+		},
+
 		/**
 		 * @private
 		 */
@@ -72,67 +129,67 @@ const metadata = {
 			type: Boolean,
 		},
 	},
-	events: /** @lends  sap.ui.webcomponents.main.Popup.prototype */ {
+	events: /** @lends sap.ui.webcomponents.main.Popup.prototype */ {
 
 		/**
-		 * Fired before the component is opened.
+		 * Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening. <b>This event does not bubble.</b>
 		 *
 		 * @public
 		 * @event sap.ui.webcomponents.main.Popup#before-open
+		 * @allowPreventDefault
 		 */
-
 		"before-open": {},
+
 		/**
-		 * Fired after the component is opened.
+		 * Fired after the component is opened. <b>This event does not bubble.</b>
 		 *
 		 * @public
 		 * @event sap.ui.webcomponents.main.Popup#after-open
 		 */
-
 		"after-open": {},
+
 		/**
-		 * Fired before the component is closed.
+		 * Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing. <b>This event does not bubble.</b>
 		 *
 		 * @public
 		 * @event sap.ui.webcomponents.main.Popup#before-close
-		 * @param {Boolean} escPressed Indicates that <code>ESC</code> key has triggered the event.
+		 * @allowPreventDefault
+		 * @param {boolean} escPressed Indicates that <code>ESC</code> key has triggered the event.
 		 */
-
 		"before-close": {
-			escPressed: { type: Boolean },
+			detail: {
+				escPressed: { type: Boolean },
+			},
 		},
 
 		/**
-		 * Fired after the component is closed.
+		 * Fired after the component is closed. <b>This event does not bubble.</b>
 		 *
 		 * @public
 		 * @event sap.ui.webcomponents.main.Popup#after-close
 		 */
 		"after-close": {},
+
+		/**
+		 * Fired whenever the popup content area is scrolled
+		 *
+		 * @private
+		 * @event sap.ui.webcomponents.main.Popup#scroll
+		 */
+		"scroll": {},
 	},
 };
 
-let customBlockingStyleInserted = false;
-
 const createBlockingStyle = () => {
-	if (customBlockingStyleInserted) {
-		return;
+	if (!hasStyle("data-ui5-popup-scroll-blocker")) {
+		createStyle(globalStyles, "data-ui5-popup-scroll-blocker");
 	}
-
-	createStyleInHead(`
-		.ui5-popup-scroll-blocker {
-			width: 100%;
-			height: 100%;
-			position: fixed;
-			overflow: hidden;
-		}
-	`, { "data-ui5-popup-scroll-blocker": "" });
-
-	customBlockingStyleInserted = true;
 };
 
 createBlockingStyle();
 
+const pageScrollingBlockers = new Set();
+
 /**
  * @class
  * <h3 class="comment-api-title">Overview</h3>
@@ -143,7 +200,7 @@ createBlockingStyle();
  *
  * 1. The Popup class handles modality:
  *  - The "isModal" getter can be overridden by derivatives to provide their own conditions when they are modal or not
- *  - Derivatives may call the "blockBodyScrolling" and "unblockBodyScrolling" static methods to temporarily remove scrollbars on the body
+ *  - Derivatives may call the "blockPageScrolling" and "unblockPageScrolling" static methods to temporarily remove scrollbars on the html element
  *  - Derivatives may call the "open" and "close" methods which handle focus, manage the popup registry and for modal popups, manage the blocking layer
  *
  *  2. Provides blocking layer (relevant for modal popups only):
@@ -167,6 +224,12 @@ createBlockingStyle();
  * @public
  */
 class Popup extends UI5Element {
+	constructor() {
+		super();
+
+		this._resizeHandler = this._resize.bind(this);
+	}
+
 	static get metadata() {
 		return metadata;
 	}
@@ -191,23 +254,64 @@ class Popup extends UI5Element {
 		return staticAreaStyles;
 	}
 
+	onEnterDOM() {
+		if (!this.isOpen()) {
+			this._blockLayerHidden = true;
+		}
+
+		ResizeHandler.register(this, this._resizeHandler);
+	}
+
+	onExitDOM() {
+		if (this.isOpen()) {
+			Popup.unblockPageScrolling(this);
+			this._removeOpenedPopup();
+		}
+
+		ResizeHandler.deregister(this, this._resizeHandler);
+	}
+
+	get _displayProp() {
+		return "block";
+	}
+
+	_resize() {
+		this.mediaRange = MediaRange.getCurrentRange(MediaRange.RANGESETS.RANGE_4STEPS, this.getDomRef().offsetWidth);
+	}
+
 	/**
-	 * Temporarily removes scrollbars from the body
+	 * Prevents the user from interacting with the content under the block layer
+	 */
+	_preventBlockLayerFocus(event) {
+		event.preventDefault();
+	}
+
+	/**
+	 * Temporarily removes scrollbars from the html element
 	 * @protected
 	 */
-	static blockBodyScrolling() {
-		document.body.style.top = `-${window.pageYOffset}px`;
-		document.body.classList.add("ui5-popup-scroll-blocker");
+	static blockPageScrolling(popup) {
+		pageScrollingBlockers.add(popup);
+
+		if (pageScrollingBlockers.size !== 1) {
+			return;
+		}
+
+		document.documentElement.classList.add("ui5-popup-scroll-blocker");
 	}
 
 	/**
-	 * Restores scrollbars on the body, if needed
+	 * Restores scrollbars on the html element, if needed
 	 * @protected
 	 */
-	static unblockBodyScrolling() {
-		document.body.classList.remove("ui5-popup-scroll-blocker");
-		window.scrollTo(0, -parseFloat(document.body.style.top));
-		document.body.style.top = "";
+	static unblockPageScrolling(popup) {
+		pageScrollingBlockers.delete(popup);
+
+		if (pageScrollingBlockers.size !== 0) {
+			return;
+		}
+
+		document.documentElement.classList.remove("ui5-popup-scroll-blocker");
 	}
 
 	_scroll(e) {
@@ -217,15 +321,51 @@ class Popup extends UI5Element {
 		});
 	}
 
+	_onkeydown(e) {
+		if (e.target === this._root && isTabPrevious(e)) {
+			e.preventDefault();
+		}
+	}
+
+	_onfocusout(e) {
+		// relatedTarget is the element, which will get focus. If no such element exists, focus the root.
+		// This happens after the mouse is released in order to not interrupt text selection.
+		if (!e.relatedTarget) {
+			this._shouldFocusRoot = true;
+		}
+	}
+
+	_onmousedown(e) {
+		this._root.removeAttribute("tabindex");
+
+		if (this.shadowRoot.contains(e.target)) {
+			this._shouldFocusRoot = true;
+		} else {
+			this._shouldFocusRoot = false;
+		}
+	}
+
+	_onmouseup() {
+		this._root.tabIndex = -1;
+		if (this._shouldFocusRoot) {
+			if (isChrome()) {
+				this._root.focus();
+			}
+			this._shouldFocusRoot = false;
+		}
+	}
+
 	/**
 	 * Focus trapping
 	 * @private
 	 */
-	forwardToFirst() {
-		const firstFocusable = getFirstFocusableElement(this);
+	async forwardToFirst() {
+		const firstFocusable = await getFirstFocusableElement(this);
 
 		if (firstFocusable) {
 			firstFocusable.focus();
+		} else {
+			this._root.focus();
 		}
 	}
 
@@ -233,11 +373,13 @@ class Popup extends UI5Element {
 	 * Focus trapping
 	 * @private
 	 */
-	forwardToLast() {
-		const lastFocusable = getLastFocusableElement(this);
+	async forwardToLast() {
+		const lastFocusable = await getLastFocusableElement(this);
 
 		if (lastFocusable) {
 			lastFocusable.focus();
+		} else {
+			this._root.focus();
 		}
 	}
 
@@ -245,27 +387,35 @@ class Popup extends UI5Element {
 	 * Use this method to focus the element denoted by "initialFocus", if provided, or the first focusable element otherwise.
 	 * @protected
 	 */
-	applyInitialFocus() {
-		this.applyFocus();
+	async applyInitialFocus() {
+		await this.applyFocus();
 	}
 
 	/**
 	 * Focuses the element denoted by <code>initialFocus</code>, if provided,
 	 * or the first focusable element otherwise.
 	 * @public
+	 * @async
+	 * @returns {Promise} Promise that resolves when the focus is applied
 	 */
-	applyFocus() {
+	async applyFocus() {
+		await this._waitForDomRef();
+
 		const element = this.getRootNode().getElementById(this.initialFocus)
 			|| document.getElementById(this.initialFocus)
-			|| getFirstFocusableElement(this);
+			|| await getFirstFocusableElement(this)
+			|| this._root; // in case of no focusable content focus the root
 
 		if (element) {
+			if (element === this._root) {
+				element.tabIndex = -1;
+			}
 			element.focus();
 		}
 	}
 
 	/**
-	 * Override this method to provide custom logic for the popup's open/closed state. Maps to the "opened" property by default.
+	 * Tells if the component is opened
 	 * @public
 	 * @returns {boolean}
 	 */
@@ -273,25 +423,32 @@ class Popup extends UI5Element {
 		return this.opened;
 	}
 
+	isFocusWithin() {
+		return isFocusedElementWithinNode(this.shadowRoot.querySelector(".ui5-popup-root"));
+	}
+
 	/**
 	 * Shows the block layer (for modal popups only) and sets the correct z-index for the purpose of popup stacking
-	 * @param {boolean} preventInitialFocus prevents applying the focus inside the popup
-	 * @public
+	 * @protected
 	 */
-	open(preventInitialFocus) {
-		if (this.isModal) {
+	async _open(preventInitialFocus) {
+		const prevented = !this.fireEvent("before-open", {}, true, false);
+		if (prevented) {
+			return;
+		}
+
+		if (this.isModal && !this.shouldHideBackdrop) {
 			// create static area item ref for block layer
 			this.getStaticAreaItemDomRef();
 			this._blockLayerHidden = false;
-			Popup.blockBodyScrolling();
+			Popup.blockPageScrolling(this);
 		}
 
 		this._zIndex = getNextZIndex();
 		this.style.zIndex = this._zIndex;
-
 		this._focusedElementBeforeOpen = getFocusedElement();
-		this.fireEvent("before-open", {});
-		this.show();
+
+		this._show();
 
 		if (!this._disableInitialFocus && !preventInitialFocus) {
 			this.applyInitialFocus();
@@ -300,7 +457,10 @@ class Popup extends UI5Element {
 		this._addOpenedPopup();
 
 		this.opened = true;
-		this.fireEvent("after-open", {});
+		this.open = true;
+
+		await renderFinished();
+		this.fireEvent("after-open", {}, false, false);
 	}
 
 	/**
@@ -316,28 +476,33 @@ class Popup extends UI5Element {
 	 * @public
 	 */
 	close(escPressed = false, preventRegistryUpdate = false, preventFocusRestore = false) {
-		const prevented = !this.fireEvent("before-close", { escPressed }, true);
-		if (prevented || !this.opened) {
+		if (!this.opened) {
+			return;
+		}
+
+		const prevented = !this.fireEvent("before-close", { escPressed }, true, false);
+		if (prevented) {
 			return;
 		}
 
 		if (this.isModal) {
 			this._blockLayerHidden = true;
-			Popup.unblockBodyScrolling();
+			Popup.unblockPageScrolling(this);
 		}
 
 		this.hide();
 		this.opened = false;
+		this.open = false;
 
 		if (!preventRegistryUpdate) {
 			this._removeOpenedPopup();
 		}
 
-		if (!preventFocusRestore) {
+		if (!this.preventFocusRestore && !preventFocusRestore) {
 			this.resetFocus();
 		}
 
-		this.fireEvent("after-close", {});
+		this.fireEvent("after-close", {}, false, false);
 	}
 
 	/**
@@ -362,14 +527,13 @@ class Popup extends UI5Element {
 	}
 
 	/**
-	 * Sets "block" display to the popup
+	 * Sets "block" display to the popup. The property can be overriden by derivatives of Popup.
 	 * @protected
 	 */
-	show() {
-		this.style.display = "block";
+	_show() {
+		this.style.display = this._displayProp;
 	}
 
-
 	/**
 	 * Sets "none" display to the popup
 	 * @protected
@@ -378,15 +542,8 @@ class Popup extends UI5Element {
 		this.style.display = "none";
 	}
 
-	onExitDOM() {
-		if (this.isOpen()) {
-			Popup.unblockBodyScrolling();
-			this._removeOpenedPopup();
-		}
-	}
-
 	/**
-	 * Implement this getter with relevant logic regarding the modality of the popup (f.e. based on a public property)
+	 * Implement this getter with relevant logic regarding the modality of the popup (e.g. based on a public property)
 	 *
 	 * @protected
 	 * @abstract
@@ -394,12 +551,21 @@ class Popup extends UI5Element {
 	 */
 	get isModal() {} // eslint-disable-line
 
+	/**
+	 * Implement this getter with relevant logic in order to hide the block layer (f.e. based on a public property)
+	 *
+	 * @protected
+	 * @abstract
+	 * @returns {boolean}
+	 */
+	get shouldHideBackdrop() {} // eslint-disable-line
+
 	/**
 	 * Return the ID of an element in the shadow DOM that is going to label this popup
 	 *
 	 * @protected
 	 * @abstract
-	 * @returns {String}
+	 * @returns {string}
 	 */
 	get _ariaLabelledBy() {} // eslint-disable-line
 
@@ -408,17 +574,25 @@ class Popup extends UI5Element {
 	 *
 	 * @protected
 	 * @abstract
-	 * @returns {String}
+	 * @returns {string}
 	 */
 	get _ariaModal() {} // eslint-disable-line
 
 	/**
 	 * Ensures ariaLabel is never null or empty string
-	 * @returns {String|undefined}
+	 * @returns {string|undefined}
 	 * @protected
 	 */
 	get _ariaLabel() {
-		return this.ariaLabel || undefined;
+		return getEffectiveAriaLabelText(this);
+	}
+
+	get _root() {
+		return this.shadowRoot.querySelector(".ui5-popup-root");
+	}
+
+	get contentDOM() {
+		return this.shadowRoot.querySelector(".ui5-popup-content");
 	}
 
 	get styles() {
@@ -433,8 +607,12 @@ class Popup extends UI5Element {
 
 	get classes() {
 		return {
-			root: {},
-			content: {},
+			root: {
+				"ui5-popup-root": true,
+			},
+			content: {
+				"ui5-popup-content": true,
+			},
 		};
 	}
 }