feat(layers): allow custom classname

abelflopes · Dec 24, 2024 · 2b45c09 · 2b45c09
1 parent 908c338
commit 2b45c09
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 7 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/providers/layers/package.json b/packages/providers/layers/package.json
@@ -29,6 +29,7 @@
   "dependencies": {
     "@react-ck/elevation": "^1.1.18",
     "@react-ck/react-utils": "^1.4.0",
-    "@react-ck/theme": "^1.12.1"
+    "@react-ck/theme": "^1.12.1",
+    "classnames": "^2.5.1"
   }
 }
diff --git a/packages/providers/layers/src/Layer.tsx b/packages/providers/layers/src/Layer.tsx
@@ -4,12 +4,15 @@ import { LayersContext } from "./context";
 import { type Elevation } from "@react-ck/elevation";
 import { DISPLAY_NAME_ATTRIBUTE, getDisplayName, DISPLAY_NAMES } from "@react-ck/react-utils";
 import { ThemeProvider, useThemeContext } from "@react-ck/theme";
+import classNames from "classnames";
 
 interface LayerProps {
   /** The elevation level for the layer  */
   elevation: Elevation;
   /** The child components to be rendered within the layer */
   children?: React.ReactNode;
+  /** Classname to apply on layer root element */
+  className?: string;
 }
 
 /**
@@ -21,22 +24,22 @@ interface LayerProps {
  * @returns The rendered content of the layer
  */
 
-const Layer = ({ elevation, children }: Readonly<LayerProps>): React.ReactNode => {
+const Layer = ({ elevation, children, className }: Readonly<LayerProps>): React.ReactNode => {
   const theme = useThemeContext();
-  const { createLayer, usePortal, className } = useContext(LayersContext);
+  const { createLayer, usePortal, className: contextClassName } = useContext(LayersContext);
 
   /** Generates the portal element wrapped by theme */
   const layerElement = useMemo(
     () =>
       usePortal
         ? createPortal(
-            <ThemeProvider theme={theme.theme} className={className}>
+            <ThemeProvider theme={theme.theme} className={classNames(contextClassName, className)}>
               {children}
             </ThemeProvider>,
             document.body,
           )
         : children,
-    [children, className, theme.theme, usePortal],
+    [children, contextClassName, className, theme.theme, usePortal],
   );
 
   /** Renders the layer */