fix(Drawer): use hideBackdrop prop and prevent backdrop slotProps w…

…hen hidden (#3893)
lumada-design · Dec 13, 2023 · 62c629a · 62c629a
1 parent b47d19d
commit 62c629a
Showing 1 changed file with 20 additions and 15 deletions.
diff --git a/packages/core/src/components/Drawer/Drawer.tsx b/packages/core/src/components/Drawer/Drawer.tsx
@@ -87,6 +87,7 @@ export const HvDrawer = (props: HvDrawerProps) => {
     anchor = "right",
     buttonTitle = "Close",
     showBackdrop = true,
+    hideBackdrop,
     disableBackdropClick = false,
     ...others
   } = useDefaultProps("HvDrawer", props);
@@ -103,6 +104,8 @@ export const HvDrawer = (props: HvDrawerProps) => {
     onClose?.(event, reason);
   };
 
+  const shouldHideBackdrop = hideBackdrop ?? !showBackdrop;
+
   return (
     <MuiDrawer
       className={cx(classes.root, className)}
@@ -114,23 +117,25 @@ export const HvDrawer = (props: HvDrawerProps) => {
           root: classes.paper,
         },
       }}
-      hideBackdrop={!showBackdrop}
-      slotProps={{
-        backdrop: {
-          classes: {
-            root: cx(
-              css({
-                background: hexToRgbA(colors?.atmo4 || theme.colors.atmo4),
-              }),
-              classes.background
-            ),
-          },
-          onClick: (event) => {
-            if (disableBackdropClick) return;
-            onClose?.(event, "backdropClick");
+      hideBackdrop={shouldHideBackdrop}
+      {...(!shouldHideBackdrop && {
+        slotProps: {
+          backdrop: {
+            classes: {
+              root: cx(
+                css({
+                  background: hexToRgbA(colors?.atmo4 || theme.colors.atmo4),
+                }),
+                classes.background
+              ),
+            },
+            onClick: (event) => {
+              if (disableBackdropClick) return;
+              onClose?.(event, "backdropClick");
+            },
           },
         },
-      }}
+      })}
       onClose={handleOnClose}
       {...others}
     >