feat(framework): Maintain a common z-index for all UI5 Web Components instances and OpenUI5 (#2980)

Author: vladitasev

packages/base/hash.txt

@@ -1 +1 @@
-MUfM5wQo+eUhgUm/wAfVuvW4G7E=
+LnA57prVpk1aAMvC39RJd6Yc7Kg=

packages/base/src/features/OpenUI5Support.js

@@ -1,32 +1,41 @@
 import { registerFeature } from "../FeaturesRegistry.js";
 import { setTheme } from "../config/Theme.js";
+import { getCurrentZIndex } from "../util/PopupUtils.js";
 
-const sap = window.sap;
-const core = sap && sap.ui && typeof sap.ui.getCore === "function" && sap.ui.getCore();
+const getCore = () => {
+	const sap = window.sap;
+	const core = sap && sap.ui && typeof sap.ui.getCore === "function" && sap.ui.getCore();
+	return core;
+};
 
 const isLoaded = () => {
-	return !!core;
+	return !!getCore();
 };
 
 const init = () => {
+	const core = getCore();
 	if (!core) {
 		return Promise.resolve();
 	}
 
 	return new Promise(resolve => {
 		core.attachInit(() => {
-			sap.ui.require(["sap/ui/core/LocaleData"], resolve);
+			window.sap.ui.require(["sap/ui/core/LocaleData", "sap/ui/core/Popup"], (LocaleData, Popup) => {
+				Popup.setInitialZIndex(getCurrentZIndex());
+				resolve();
+			});
 		});
 	});
 };
 
 const getConfigurationSettingsObject = () => {
+	const core = getCore();
 	if (!core) {
 		return;
 	}
 
 	const config = core.getConfiguration();
-	const LocaleData = sap.ui.require("sap/ui/core/LocaleData");
+	const LocaleData = window.sap.ui.require("sap/ui/core/LocaleData");
 
 	return {
 		animationMode: config.getAnimationMode(),
@@ -41,23 +50,26 @@ const getConfigurationSettingsObject = () => {
 };
 
 const getLocaleDataObject = () => {
+	const core = getCore();
 	if (!core) {
 		return;
 	}
 
 	const config = core.getConfiguration();
-	const LocaleData = sap.ui.require("sap/ui/core/LocaleData");
+	const LocaleData = window.sap.ui.require("sap/ui/core/LocaleData");
 	return LocaleData.getInstance(config.getLocale())._get();
 };
 
 const listenForThemeChange = () => {
+	const core = getCore();
 	const config = core.getConfiguration();
 	core.attachThemeChanged(async () => {
 		await setTheme(config.getTheme());
 	});
 };
 
 const attachListeners = () => {
+	const core = getCore();
 	if (!core) {
 		return;
 	}
@@ -66,6 +78,7 @@ const attachListeners = () => {
 };
 
 const cssVariablesLoaded = () => {
+	const core = getCore();
 	if (!core) {
 		return;
 	}
@@ -78,13 +91,35 @@ const cssVariablesLoaded = () => {
 	return !!link.href.match(/\/css(-|_)variables\.css/);
 };
 
+const getNextZIndex = () => {
+	const core = getCore();
+	if (!core) {
+		return;
+	}
+
+	const Popup = window.sap.ui.require("sap/ui/core/Popup");
+	return Popup.getNextZIndex();
+};
+
+const setInitialZIndex = () => {
+	const core = getCore();
+	if (!core) {
+		return;
+	}
+
+	const Popup = window.sap.ui.require("sap/ui/core/Popup");
+	Popup.setInitialZIndex(getCurrentZIndex());
+};
+
 const OpenUI5Support = {
 	isLoaded,
 	init,
 	getConfigurationSettingsObject,
 	getLocaleDataObject,
 	attachListeners,
 	cssVariablesLoaded,
+	getNextZIndex,
+	setInitialZIndex,
 };
 
 registerFeature("OpenUI5Support", OpenUI5Support);

packages/main/src/popup-utils/PopupUtils.js renamed to packages/base/src/util/PopupUtils.js

@@ -1,6 +1,9 @@
-import getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement.js";
+import getSharedResource from "../getSharedResource.js";
+import { getFeature } from "../FeaturesRegistry.js";
+import getActiveElement from "./getActiveElement.js";
 
-let currentZIndex = 100;
+const PopupUtilsData = getSharedResource("PopupUtilsData", {});
+PopupUtilsData.currentZIndex = PopupUtilsData.currentZIndex || 100;
 
 const getFocusedElement = () => {
 	const element = getActiveElement();
@@ -67,14 +70,24 @@ const getClosedPopupParent = el => {
 };
 
 const getNextZIndex = () => {
-	currentZIndex += 2;
-	return currentZIndex;
+	const OpenUI5Support = getFeature("OpenUI5Support");
+	if (OpenUI5Support && OpenUI5Support.isLoaded()) { // use OpenUI5 for getting z-index values, if loaded
+		return OpenUI5Support.getNextZIndex();
+	}
+
+	PopupUtilsData.currentZIndex += 2;
+	return PopupUtilsData.currentZIndex;
+};
+
+const getCurrentZIndex = () => {
+	return PopupUtilsData.currentZIndex;
 };
 
 export {
 	getFocusedElement,
 	isClickInRect,
 	getClosedPopupParent,
 	getNextZIndex,
+	getCurrentZIndex,
 	isFocusedElementWithinNode,
 };

packages/main/src/Popover.js

@@ -1,11 +1,11 @@
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import { getClosedPopupParent } from "@ui5/webcomponents-base/dist/util/PopupUtils.js";
 import Popup from "./Popup.js";
 import PopoverPlacementType from "./types/PopoverPlacementType.js";
 import PopoverVerticalAlign from "./types/PopoverVerticalAlign.js";
 import PopoverHorizontalAlign from "./types/PopoverHorizontalAlign.js";
 import { addOpenedPopover, removeOpenedPopover } from "./popup-utils/PopoverRegistry.js";
-import { getClosedPopupParent } from "./popup-utils/PopupUtils.js";
 
 // Template
 import PopoverTemplate from "./generated/templates/PopoverTemplate.lit.js";

packages/main/src/Popup.js

@@ -5,9 +5,9 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import { getFirstFocusableElement, getLastFocusableElement } from "@ui5/webcomponents-base/dist/util/FocusableElements.js";
 import createStyleInHead from "@ui5/webcomponents-base/dist/util/createStyleInHead.js";
 import { isTabPrevious } from "@ui5/webcomponents-base/dist/Keys.js";
+import { getNextZIndex, getFocusedElement, isFocusedElementWithinNode } from "@ui5/webcomponents-base/dist/util/PopupUtils.js";
 import PopupTemplate from "./generated/templates/PopupTemplate.lit.js";
 import PopupBlockLayer from "./generated/templates/PopupBlockLayerTemplate.lit.js";
-import { getNextZIndex, getFocusedElement, isFocusedElementWithinNode } from "./popup-utils/PopupUtils.js";
 import { addOpenedPopup, removeOpenedPopup } from "./popup-utils/OpenedPopupsRegistry.js";
 
 // Styles

packages/main/src/ResponsivePopover.js

@@ -1,7 +1,7 @@
 import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
 import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getNextZIndex } from "@ui5/webcomponents-base/dist/util/PopupUtils.js";
 import { RESPONSIVE_POPOVER_CLOSE_DIALOG_BUTTON } from "./generated/i18n/i18n-defaults.js";
-import { getNextZIndex } from "./popup-utils/PopupUtils.js";
 import ResponsivePopoverTemplate from "./generated/templates/ResponsivePopoverTemplate.lit.js";
 import Popover from "./Popover.js";
 import Dialog from "./Dialog.js";

packages/main/src/Toast.js

@@ -1,8 +1,8 @@
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import { getNextZIndex } from "@ui5/webcomponents-base/dist/util/PopupUtils.js";
 import ToastPlacement from "./types/ToastPlacement.js";
-import { getNextZIndex } from "./popup-utils/PopupUtils.js";
 
 // Template
 import ToastTemplate from "./generated/templates/ToastTemplate.lit.js";

packages/main/src/popup-utils/PopoverRegistry.js

@@ -1,4 +1,4 @@
-import { isClickInRect } from "./PopupUtils.js";
+import { isClickInRect } from "@ui5/webcomponents-base/dist/util/PopupUtils.js";
 import { getOpenedPopups, addOpenedPopup, removeOpenedPopup } from "./OpenedPopupsRegistry.js";
 
 let updateInterval = null;