[ElementCallComponent] Use compound-web's PortalRoot in EC.

component/api.ts

@@ -121,4 +121,16 @@ export interface ElementCallProps {
    * the most recently set language wins for all of them.
    */
   language?: string;
+  /**
+   * Where the parts of Element Call that float above it — its menus and
+   * tooltips, which Compound portals out of the call — are rendered. Left out,
+   * they go into the host document's body, as they do for any other component
+   * on the host's page.
+   *
+   * A host that moves Element Call's DOM into another document, such as a
+   * Document Picture-in-Picture window, passes that document's body here so
+   * that a menu opens in the window its button is in. Changes take effect at
+   * once.
+   */
+  portalRoot?: HTMLElement | null;
 }

component/index.tsx

@@ -50,7 +50,7 @@ import {
 } from "react";
 import { logger } from "matrix-js-sdk/lib/logger";
 import { I18nextProvider } from "react-i18next";
-import { TooltipProvider } from "@vector-im/compound-web";
+import { PortalRoot, TooltipProvider } from "@vector-im/compound-web";
 import { ErrorBoundary } from "@sentry/react";
 import { shouldPolyfill as shouldPolyfillSegmenter } from "@formatjs/intl-segmenter/should-polyfill";
 import { shouldPolyfill as shouldPolyfillDurationFormat } from "@formatjs/intl-durationformat/should-polyfill.js";
@@ -154,6 +154,7 @@ export const ElementCall: FC<ElementCallProps> = ({
   ref,
   theme,
   language,
+  portalRoot = null,
 }): ReactNode => {
   const hostBridge = useComponentHostBridge(suppliedHostBridge, ref, theme);
 
@@ -240,34 +241,38 @@ export const ElementCall: FC<ElementCallProps> = ({
               // Stands in for the standalone page's `#root`: see `.content`
               // in ElementCall.module.css
               <div className={styles.content}>
-                <RootElementProvider value={container}>
-                  {/* Whatever goes wrong in here is shown in here. Left to
-                  propagate, an error would unmount the host's own tree. */}
-                  <ErrorBoundary
-                    fallback={(error) => <ErrorPage error={error} />}
-                    // A broken call should not hold the host on screen
-                    onError={() => void hostBridge.setAlwaysOnScreen(false)}
-                  >
-                    <Decoration>
-                      <TooltipProvider>
-                        <ClientProvider client={client}>
-                          <MediaDevicesContext value={mediaDevices}>
-                            <ProcessorProvider>
-                              <CallView
-                                client={client}
-                                rtcSession={rtcSession}
-                                isPasswordlessUser={false}
-                                confineToRoom={params.confineToRoom}
-                                preload={params.preload}
-                                skipLobby={params.skipLobby}
-                              />
-                            </ProcessorProvider>
-                          </MediaDevicesContext>
-                        </ClientProvider>
-                      </TooltipProvider>
-                    </Decoration>
-                  </ErrorBoundary>
-                </RootElementProvider>
+                {/* Where Compound floats the call's menus and tooltips: the
+                host's body unless the host says otherwise (see `portalRoot`) */}
+                <PortalRoot root={portalRoot}>
+                  <RootElementProvider value={container}>
+                    {/* Whatever goes wrong in here is shown in here. Left to
+                    propagate, an error would unmount the host's own tree. */}
+                    <ErrorBoundary
+                      fallback={(error) => <ErrorPage error={error} />}
+                      // A broken call should not hold the host on screen
+                      onError={() => void hostBridge.setAlwaysOnScreen(false)}
+                    >
+                      <Decoration>
+                        <TooltipProvider>
+                          <ClientProvider client={client}>
+                            <MediaDevicesContext value={mediaDevices}>
+                              <ProcessorProvider>
+                                <CallView
+                                  client={client}
+                                  rtcSession={rtcSession}
+                                  isPasswordlessUser={false}
+                                  confineToRoom={params.confineToRoom}
+                                  preload={params.preload}
+                                  skipLobby={params.skipLobby}
+                                />
+                              </ProcessorProvider>
+                            </MediaDevicesContext>
+                          </ClientProvider>
+                        </TooltipProvider>
+                      </Decoration>
+                    </ErrorBoundary>
+                  </RootElementProvider>
+                </PortalRoot>
               </div>
             )}
           </div>

component/package.json

@@ -39,7 +39,7 @@
   },
   "peerDependencies": {
     "@vector-im/compound-design-tokens": "^11.0.0",
-    "@vector-im/compound-web": "^10.0.0",
+    "@vector-im/compound-web": "^10.3.1",
     "matrix-js-sdk": "*",
     "react": "^19",
     "react-dom": "^19"