feat: allow rendering layers without react portal

Author: abelflopes

packages/providers/layers/src/Layer.tsx

@@ -23,13 +23,15 @@ export interface LayerProps {
 
 export const Layer = ({ elevation, children }: Readonly<LayerProps>): React.ReactNode => {
   const theme = useThemeContext();
-  const { createLayer } = useContext(LayersContext);
+  const { createLayer, usePortal } = useContext(LayersContext);
 
   /** Generates the portal element wrapped by theme */
   const layerElement = useMemo(
     () =>
-      createPortal(<ThemeProvider theme={theme.theme}>{children}</ThemeProvider>, document.body),
-    [children, theme.theme],
+      usePortal
+        ? createPortal(<ThemeProvider theme={theme.theme}>{children}</ThemeProvider>, document.body)
+        : children,
+    [children, theme.theme, usePortal],
   );
 
   /** Renders the layer */

packages/providers/layers/src/LayersProvider.tsx

@@ -6,7 +6,7 @@ import { elevationMap } from "@react-ck/elevation";
 /** Data type for a layer with an additional 'id' property  */
 type LayerList = Array<LayerData & { id: string }>;
 
-export interface LayersProviderProps {
+export interface LayersProviderProps extends Pick<LayersContextProps, "usePortal"> {
   /** The child components to be wrapped by the LayersProvider  */
   children?: React.ReactNode;
 }
@@ -18,7 +18,10 @@ export interface LayersProviderProps {
  * @returns The rendered LayersProvider component
  */
 
-export const LayersProvider = ({ children }: Readonly<LayersProviderProps>): React.ReactElement => {
+export const LayersProvider = ({
+  children,
+  usePortal,
+}: Readonly<LayersProviderProps>): React.ReactElement => {
   const currlayer = useRef<number>(0);
   const [layers, setLayers] = useState<LayerList>([]);
 
@@ -41,7 +44,10 @@ export const LayersProvider = ({ children }: Readonly<LayersProviderProps>): Rea
     };
   }, []);
 
-  const contextValue = useMemo<LayersContextProps>(() => ({ createLayer }), [createLayer]);
+  const contextValue = useMemo<LayersContextProps>(
+    () => ({ createLayer, usePortal }),
+    [createLayer, usePortal],
+  );
 
   // Sort layers by elevation
   const computedLayers = useMemo(

packages/providers/layers/src/context.tsx

@@ -7,10 +7,14 @@ export interface LayerData {
 }
 
 export interface LayersContextProps {
+  /** If true, renders app layers on document body instead of on same level of root element,
+   * if set to false keep in mind that tit might affect positioning of floating elements */
+  usePortal: boolean;
   createLayer: (data: LayerData) => () => void;
 }
 
 export const LayersContext = React.createContext<LayersContextProps>({
+  usePortal: true,
   createLayer: () => {
     throw new Error("Layers context not defined");
   },

packages/providers/manager/src/index.tsx

@@ -1,11 +1,14 @@
 import React from "react";
 import { ThemeProvider, type ThemeProviderProps } from "@react-ck/theme";
-import { LayersProvider } from "@react-ck/layers";
+import { LayersProvider, type LayersProviderProps } from "@react-ck/layers";
 
 /** Props for the Manager component  */
 export interface ManagerProps {
   /** Properties of the {@link ThemeProvider} */
   theme?: Omit<ThemeProviderProps, "children">;
+  /** If true, renders app layers on document body instead of on same level of root element,
+   * if set to false keep in mind that tit might affect positioning of floating elements */
+  usePortal?: LayersProviderProps["usePortal"];
   /** Content slot */
   children: React.ReactNode;
 }
@@ -15,8 +18,12 @@ export interface ManagerProps {
  * @param props - {@link ManagerProps}
  * @returns The provided content wrapped by theme & layers providers.
  */
-export const Manager = ({ theme, children }: Readonly<ManagerProps>): React.ReactElement => (
+export const Manager = ({
+  theme,
+  children,
+  usePortal = true,
+}: Readonly<ManagerProps>): React.ReactElement => (
   <ThemeProvider {...theme}>
-    <LayersProvider>{children}</LayersProvider>
+    <LayersProvider usePortal={usePortal}>{children}</LayersProvider>
   </ThemeProvider>
 );