mirror of
https://github.com/element-hq/element-call.git
synced 2026-09-16 06:12:37 +00:00
Valere
0dca5835f6
Element Call writes its theme classes, background and layout attributes straight onto document.body, and portals its modals there too. That is only correct while it owns the page; embedded in a host application it has to confine itself to the container it was mounted into. Add a RootElementContext, defaulting to document.body so that the standalone and widget builds are unaffected, and point the theme classes, data-background, no-scroll-body and the fullscreen target at it. Give the Modal and Toast portals an explicit container as well. Radix and vaul both default to document.body, so without this every modal, drawer and toast would render outside the container and lose the theme and platform attributes set on it. No functional change: the root element is document.body until an embedder provides otherwise.
31 lines
1.1 KiB
TypeScript
31 lines
1.1 KiB
TypeScript
/*
|
|
Copyright 2026 Element Creations Ltd.
|
|
|
|
SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
|
|
Please see LICENSE in the repository root for full details.
|
|
*/
|
|
|
|
import { createContext, use } from "react";
|
|
|
|
/**
|
|
* The element that Element Call treats as the root of its own interface.
|
|
*
|
|
* Element Call decorates this element with the theme, layout and background
|
|
* attributes its stylesheets key off, and portals its modals into it. When
|
|
* Element Call owns the page this is simply the document body; when it is
|
|
* embedded in a host application it is the container the host mounted it into,
|
|
* so that Element Call does not reach outside its own subtree.
|
|
*/
|
|
const RootElementContext = createContext<HTMLElement | null>(null);
|
|
|
|
export const RootElementProvider = RootElementContext.Provider;
|
|
|
|
/**
|
|
* The element Element Call should decorate and portal into.
|
|
*
|
|
* Defaults to the document body, so that the standalone and widget builds work
|
|
* without a provider.
|
|
*/
|
|
export const useRootElement = (): HTMLElement =>
|
|
use(RootElementContext) ?? document.body;
|