[@mantine/core] Drawer: Fix withOverlay={false} not letting click-t…

…hrough (#2351) * add click-through capability to overlay * add click-through capability to overlay * `withOverlay: false` should let click through the root * Revert "add click-through capability to overlay" This reverts commit d885279. * Revert "add click-through capability to overlay" This reverts commit fe74505.
mantinedev · Sep 6, 2022 · cd546df · cd546df
1 parent 63961ee
commit cd546df
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 33 deletions.
diff --git a/src/mantine-core/src/Drawer/Drawer.styles.ts b/src/mantine-core/src/Drawer/Drawer.styles.ts
@@ -16,6 +16,7 @@ export interface DrawerStylesParams {
   position: DrawerPosition;
   size: number | string;
   zIndex: React.CSSProperties['zIndex'];
+  withOverlay: boolean;
 }
 
 interface GetPositionStyles {
@@ -47,39 +48,43 @@ function getPositionStyles({
   }
 }
 
-export default createStyles((theme, { position, size, zIndex }: DrawerStylesParams) => ({
-  closeButton: {},
-  overlay: {},
+export default createStyles(
+  (theme, { position, size, zIndex, withOverlay }: DrawerStylesParams) => ({
+    closeButton: {},
+    overlay: {},
 
-  root: {
-    position: 'fixed',
-    zIndex,
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-  },
+    root: {
+      position: 'fixed',
+      zIndex,
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      pointerEvents: withOverlay === false ? 'none' : undefined,
+    },
 
-  drawer: {
-    ...getPositionStyles({ position, size, theme }),
-    maxWidth: '100%',
-    maxHeight: '100vh',
-    position: 'fixed',
-    outline: 0,
-    zIndex: 1,
-  },
+    drawer: {
+      ...getPositionStyles({ position, size, theme }),
+      maxWidth: '100%',
+      maxHeight: '100vh',
+      position: 'fixed',
+      outline: 0,
+      zIndex: 1,
+      pointerEvents: withOverlay === false ? 'auto' : undefined,
+    },
 
-  title: {
-    marginRight: theme.spacing.md,
-    textOverflow: 'ellipsis',
-    display: 'block',
-    wordBreak: 'break-word',
-  },
+    title: {
+      marginRight: theme.spacing.md,
+      textOverflow: 'ellipsis',
+      display: 'block',
+      wordBreak: 'break-word',
+    },
 
-  header: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    marginBottom: theme.spacing.md,
-  },
-}));
+    header: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      marginBottom: theme.spacing.md,
+    },
+  })
+);
diff --git a/src/mantine-core/src/Drawer/Drawer.tsx b/src/mantine-core/src/Drawer/Drawer.tsx
@@ -164,7 +164,7 @@ export function Drawer(props: DrawerProps) {
   } = useComponentDefaultProps('Drawer', defaultProps, props);
 
   const { classes, cx, theme } = useStyles(
-    { size, position, zIndex },
+    { size, position, zIndex, withOverlay },
     { classNames, styles, unstyled, name: 'Drawer' }
   );