diff --git a/src/mantine-core/src/Drawer/Drawer.styles.ts b/src/mantine-core/src/Drawer/Drawer.styles.ts index 1741cb3d2dd..d86751ee140 100644 --- 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 index b3213f1671b..6b84b503120 100644 --- 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' } );