fix(OverflowPopover): make OverflowPopoverContext to a single to issue on multiple instances (#5739)

Fixes #5738

Author: Jianrong-Yu

packages/main/src/components/OverflowToolbarButton/index.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import type { ReactNode } from 'react';
-import React, { forwardRef, useContext } from 'react';
-import { OverflowPopoverContext } from '../../internal/OverflowPopoverContext.js';
+import React, { forwardRef } from 'react';
+import { useOverflowPopoverContext } from '../../internal/OverflowPopoverContext.js';
 import type { ButtonDomRef, ButtonPropTypes } from '../../webComponents/index.js';
 import { Button } from '../../webComponents/index.js';
 
@@ -28,7 +28,7 @@ export interface OverflowToolbarButtonPropTypes extends Omit<ButtonPropTypes, 'c
  */
 const OverflowToolbarButton = forwardRef<ButtonDomRef, OverflowToolbarButtonPropTypes>((props, ref) => {
   const { children, ...rest } = props;
-  const { inPopover } = useContext(OverflowPopoverContext);
+  const { inPopover } = useOverflowPopoverContext();
 
   return (
     <Button {...rest} ref={ref}>

packages/main/src/components/OverflowToolbarToggleButton/index.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import type { ReactNode } from 'react';
-import React, { forwardRef, useContext } from 'react';
-import { OverflowPopoverContext } from '../../internal/OverflowPopoverContext.js';
+import React, { forwardRef } from 'react';
+import { useOverflowPopoverContext } from '../../internal/OverflowPopoverContext.js';
 import type { ToggleButtonDomRef, ToggleButtonPropTypes } from '../../webComponents/index.js';
 import { ToggleButton } from '../../webComponents/index.js';
 
@@ -29,7 +29,7 @@ export interface OverflowToolbarToggleButtonPropTypes extends Omit<ToggleButtonP
 const OverflowToolbarToggleButton = forwardRef<ToggleButtonDomRef, OverflowToolbarToggleButtonPropTypes>(
   (props, ref) => {
     const { children, ...rest } = props;
-    const { inPopover } = useContext(OverflowPopoverContext);
+    const { inPopover } = useOverflowPopoverContext();
 
     return (
       <ToggleButton {...rest} ref={ref}>

packages/main/src/components/Toolbar/OverflowPopover.tsx

@@ -5,7 +5,7 @@ import type { Dispatch, FC, ReactElement, ReactNode, Ref, SetStateAction } from
 import React, { cloneElement, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { ButtonDesign, PopoverPlacementType, PopupAccessibleRole } from '../../enums/index.js';
-import { OverflowPopoverContext } from '../../internal/OverflowPopoverContext.js';
+import { getOverflowPopoverContext } from '../../internal/OverflowPopoverContext.js';
 import { useCanRenderPortal } from '../../internal/ssr.js';
 import { stopPropagation } from '../../internal/stopPropagation.js';
 import { getUi5TagWithSuffix } from '../../internal/utils.js';
@@ -116,8 +116,10 @@ export const OverflowPopover: FC<OverflowPopoverProps> = (props: OverflowPopover
     return a11yConfig?.overflowPopover?.role;
   })();
 
+  const OverflowPopoverContextProvider = getOverflowPopoverContext().Provider;
+
   return (
-    <OverflowPopoverContext.Provider value={{ inPopover: true }}>
+    <OverflowPopoverContextProvider value={{ inPopover: true }}>
       {overflowButton ? (
         cloneElement(overflowButton, { onClick: clonedOverflowButtonClick })
       ) : (
@@ -177,6 +179,6 @@ export const OverflowPopover: FC<OverflowPopoverProps> = (props: OverflowPopover
           </Popover>,
           portalContainer ?? document.body
         )}
-    </OverflowPopoverContext.Provider>
+    </OverflowPopoverContextProvider>
   );
 };

packages/main/src/internal/OverflowPopoverContext.ts

@@ -1,7 +1,18 @@
-import { createContext } from 'react';
+import { createContext, useContext } from 'react';
+
+const SYMBOL = Symbol.for('@ui5/webcomponents-react/OverflowPopoverContext');
 
 interface IOverflowPopoverContext {
   inPopover: boolean;
 }
 
-export const OverflowPopoverContext = createContext<IOverflowPopoverContext>({ inPopover: false });
+const OverflowPopoverContext = createContext<IOverflowPopoverContext>({ inPopover: false });
+
+export function getOverflowPopoverContext(): typeof OverflowPopoverContext {
+  globalThis[SYMBOL] ??= OverflowPopoverContext;
+  return globalThis[SYMBOL];
+}
+
+export function useOverflowPopoverContext() {
+  return useContext(getOverflowPopoverContext());
+}