feat(ui5-popover): support setting "null" for opener (#11995)

Enable setting `null` for the `opener` property of popover-based components, such as: Popover, ResponsivePopover, Menu, UserMenu and more.

The change is mainly to improve dev experience in React as it's typical to initialize [Refs](https://react.dev/reference/react/useRef#manipulating-the-dom-with-a-ref) with `null` (e.g., useRef<T>(null)), not undefined.

Fixes: #11903

**Note:** With this change, when the opener is `null` or `undefined`, and `open` is set to `true`, the popover will be displayed in the top-left corner. Alternatively, we can change this behavior - to `close` the popover and fire `close` event, but either way, the opener should be fixed. Whether it shows in the top-left (0,0) coordinates or does not show at all, the popover won't work without opener.

Author: ilhan007

packages/fiori/src/UserMenu.ts

@@ -157,7 +157,7 @@ class UserMenu extends UI5Element {
 	 * @default undefined
 	 */
 	@property({ converter: DOMReferenceConverter })
-	opener?: HTMLElement | string;
+	opener?: HTMLElement | string | null;
 
 	/**
 	 * Defines if the User Menu shows the Manage Account option.

packages/main/src/ColorPalettePopover.ts

@@ -132,7 +132,7 @@ class ColorPalettePopover extends UI5Element {
 	 * @since 1.21.0
 	 */
 	@property({ converter: DOMReferenceConverter })
-	opener?: HTMLElement | string;
+	opener?: HTMLElement | string | null;
 
 	/**
 	 * Defines the content of the component.

packages/main/src/Menu.ts

@@ -235,7 +235,7 @@ class Menu extends UI5Element {
 	 * @since 1.10.0
 	 */
 	@property({ converter: DOMReferenceConverter })
-	opener?: HTMLElement | string;
+	opener?: HTMLElement | string | null;
 
 	/**
 	 * Defines the items of this component.

packages/main/src/Popover.ts

@@ -190,7 +190,7 @@ class Popover extends Popup {
 	@slot({ type: HTMLElement })
 	footer!: Array<HTMLElement>;
 
-	_opener?: HTMLElement | string;
+	_opener?: HTMLElement | string | null | undefined;
 	_openerRect?: DOMRect;
 	_preventRepositionAndClose?: boolean;
 	_top?: number;
@@ -216,7 +216,7 @@ class Popover extends Popup {
 	 * @since 1.2.0
 	 */
 	@property({ converter: DOMReferenceConverter })
-	set opener(value: HTMLElement | string) {
+	set opener(value: HTMLElement | string | null) {
 		if (this._opener === value) {
 			return;
 		}
@@ -228,7 +228,7 @@ class Popover extends Popup {
 		}
 	}
 
-	get opener(): HTMLElement | string | undefined {
+	get opener(): HTMLElement | string | null | undefined {
 		return this._opener;
 	}
 
@@ -243,7 +243,7 @@ class Popover extends Popup {
 			return;
 		}
 
-		if (this.isOpenerOutsideViewport(opener.getBoundingClientRect())) {
+		if (!opener || this.isOpenerOutsideViewport(opener.getBoundingClientRect())) {
 			await renderFinished();
 			this.open = false;
 			this.fireDecoratorEvent("close");
@@ -290,8 +290,8 @@ class Popover extends Popup {
 		removeOpenedPopover(this);
 	}
 
-	getOpenerHTMLElement(opener: HTMLElement | string | undefined): HTMLElement | null | undefined {
-		if (opener === undefined) {
+	getOpenerHTMLElement(opener: HTMLElement | string | null | undefined): HTMLElement | null | undefined {
+		if (opener === undefined || opener === null) {
 			return opener;
 		}
 
@@ -375,6 +375,14 @@ class Popover extends Popup {
 
 		const opener = this.getOpenerHTMLElement(this.opener);
 
+		if (!opener) {
+			Object.assign(this.style, {
+				top: `0px`,
+				left: `0px`,
+			});
+			return;
+		}
+
 		if (opener && instanceOfUI5Element(opener) && !opener.getDomRef()) {
 			return;
 		}
@@ -393,7 +401,7 @@ class Popover extends Popup {
 
 		if (this.open) {
 			// update opener rect if it was changed during the popover being opened
-			this._openerRect = opener!.getBoundingClientRect();
+			this._openerRect = opener.getBoundingClientRect();
 		}
 
 		if (this._oldPlacement && this.shouldCloseDueToNoOpener(this._openerRect!) && this.isFocusWithin()) {

packages/main/src/Tokenizer.ts

@@ -282,7 +282,7 @@ class Tokenizer extends UI5Element {
 	@property({
 		converter: DOMReferenceConverter,
 	})
-	opener?: HTMLElement;
+	opener?: HTMLElement | string | null;
 
 	/**
 	 * Sets the min-width of the nMore Popover.
@@ -1032,7 +1032,7 @@ class Tokenizer extends UI5Element {
 		return this.getSlottedNodes<Token>("tokens");
 	}
 
-	get morePopoverOpener(): HTMLElement {
+	get morePopoverOpener(): HTMLElement | string | null {
 		// return this.opener ? this : this.opener;
 		if (this.opener) {
 			return this.opener;

packages/main/test/pages/PopoverOpenerNull.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+
+	<title>Popover opener null</title>
+
+	<script data-ui5-config type="application/json">
+		{
+			"language": "EN"
+		}
+	</script>
+	<script src="%VITE_BUNDLE_PATH%" type="module"></script>
+	<script>
+		function init() {
+			const popoverWithoutOpener = document.getElementById("popoverWithoutOpener");
+			const popoverWithoutOpener2 = document.getElementById("popoverWithoutOpener2");
+			popoverWithoutOpener.opener = null;
+			popoverWithoutOpener2.opener = null;
+			setTimeout(() => {
+				popoverWithoutOpener2.opener = "btn1";
+			}, timeout = 1000);
+		}
+	</script>
+</head>
+<body onload="init()">
+	<ui5-button id="btn1" style="margin-top: 100px">Open Popover</ui5-button>
+	<ui5-popover id="popoverWithoutOpener" open>Popover</ui5-popover>
+	<ui5-popover id="popoverWithoutOpener2" open opener="btn1">Popover open</ui5-popover>
+</body>
+</html>