refactor: use portal to render layers

Author: abelflopes

packages/providers/layers/package.json

@@ -28,6 +28,7 @@
   },
   "dependencies": {
     "@react-ck/elevation": "^1.1.11",
-    "@react-ck/react-utils": "^1.2.9"
+    "@react-ck/react-utils": "^1.2.9",
+    "@react-ck/theme": "^1.7.0"
   }
 }

packages/providers/layers/src/Layer.tsx

@@ -1,7 +1,9 @@
-import React, { isValidElement, useContext, useEffect } from "react";
+import React, { isValidElement, useContext, useEffect, useMemo } from "react";
+import { createPortal } from "react-dom";
 import { LayersContext } from "./context";
 import { type Elevation } from "@react-ck/elevation";
 import { getDisplayName } from "@react-ck/react-utils";
+import { ThemeProvider, useThemeContext } from "@react-ck/theme";
 
 export interface LayerProps {
   /** The elevation level for the layer  */
@@ -12,21 +14,35 @@ export interface LayerProps {
 
 /**
  * Component for creating a layer with a specific elevation level,
- * works like React portal - will render its children on app root
+ * works with React portal - will render its children on document body
+ * It also wraps the content in a theme provider
  *
  * @param props - {@link LayerProps}.
  * @returns The rendered content of the layer
  */
 
 export const Layer = ({ elevation, children }: Readonly<LayerProps>): React.ReactNode => {
+  const theme = useThemeContext();
   const { createLayer } = useContext(LayersContext);
 
+  /** Generates the portal element wrapped by theme */
+  const layerElement = useMemo(
+    () =>
+      createPortal(<ThemeProvider theme={theme.theme}>{children}</ThemeProvider>, document.body),
+    [children, theme.theme],
+  );
+
+  /** Renders the layer */
   useEffect(() => {
-    const removeLayer = createLayer({ elevationKey: elevation, node: children });
+    const removeLayer = createLayer({
+      elevationKey: elevation,
+      node: layerElement,
+    });
 
     return removeLayer;
-  }, [elevation, children, createLayer]);
+  }, [elevation, children, createLayer, theme, layerElement]);
 
+  /** Validate children */
   useEffect(() => {
     // Validate icon usage (icon should be set through specific prop)
     for (const i of React.Children.toArray(children).filter(isValidElement)) {