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

[vladitasev]

Introduce Common Popup Registry

1. Between different UI5 Web Components runtimes

A new Shared Resources entity was introduced: PopupUtilsData. You can test this in your browser as follows:

document.head.querySelector("ui5-shared-resources").PopupUtilsData.currentZIndex

Thus all UI5 Web Components runtimes will use the same currentZIndex value, stored on the global ui5-shared-resources tag in the head.

2. Between UI5 Web Components runtimes and OpenUI5

Whenever the OpenUI5Support feature is imported by an application:

import "@ui5/webcomponents-base/dist/features/OpenUI5Support.js";

the OpenUI5 popup registry will be used as a source of truth for each popup, opened by UI5 Web Components. This would allow UI5 Web Components popups to stack correctly with OpenUI5 popups.

There are 2 possible scenarios regarding which framework is loaded first:

• OpenUI5 is loaded first: when this is the case, nothing special needs to be done. The first UI5 Web Components popup to be opened will require a new z-index value from OpenUI5 and will get the next eligible OpenUI5 z-index.
• OpenUI5 is loaded lazily after 1 or more popups have already been opened by UI5 Web Components. In this case, OpenUI5 will need to start from the last z-index value, used by UI5 Web Components, although it will still be the source of truth for future popups. In this case, after the application has loaded OpenUI5 on demand, it would need to explicitly synchronize its initial z-index with the one from the UI5 Web Components shared registry.

import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
const OpenUI5Support = getFeature("OpenUI5Support");

sap.ui.getCore().attachInit(() => {
  sap.ui.require(["sap/ui/core/Popup"], () => {
    OpenUI5Support.setInitialZIndex();
  }
});

This will set OpenUI5's initial z-index value to whatever the current one for UI5 Web Components is. From then on, OpenUI5 will be used as a source of truth.

Misc changes:

• PopupUtils.js moved to the base project as now the framework itself will be concerned with z-index management.
• The OpenUI5Support feature will no longer assume that OpenUI5 is already loaded. Therefore the code that gets a reference to the core is moved from the module to a function (getCore) and this function is called every time the presence of OpenUI5 needs to be re-evaluated. This is needed in order to support the OpenUI5 lazy-load scenario.

BREAKING CHANGES:

• Important for developers The @ui5/webcomponents/dist/popup-utils/PopupUtils.js has been moved to the base package. Change your imports from:

import PopupUtils from "@ui5/webcomponents/dist/popup-utils/PopupUtils.js";

to:

import PopupUtils from "@ui5/webcomponents-base/dist/util/PopupUtils.js";

closes: #2973