From fe745052968ec72480c5b3762ce071dbe1558845 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=8Dtalo=20Andrade?= Date: Sun, 4 Sep 2022 19:55:57 -0300 Subject: [PATCH 1/5] add click-through capability to overlay --- src/mantine-core/src/Drawer/Drawer.tsx | 38 +++++++----------------- src/mantine-core/src/Overlay/Overlay.tsx | 26 ++++++++++++++-- 2 files changed, 34 insertions(+), 30 deletions(-) diff --git a/src/mantine-core/src/Drawer/Drawer.tsx b/src/mantine-core/src/Drawer/Drawer.tsx index b3213f1671b..50ce94ae37a 100644 --- a/src/mantine-core/src/Drawer/Drawer.tsx +++ b/src/mantine-core/src/Drawer/Drawer.tsx @@ -1,12 +1,12 @@ import React, { useEffect } from 'react'; -import { useScrollLock, useFocusTrap, useFocusReturn } from '@mantine/hooks'; +import { useFocusReturn, useFocusTrap, useScrollLock } from '@mantine/hooks'; import { DefaultProps, + getDefaultZIndex, MantineNumberSize, MantineShadow, - Selectors, MantineStyleSystemSize, - getDefaultZIndex, + Selectors, useComponentDefaultProps, } from '@mantine/styles'; import { Paper } from '../Paper'; @@ -25,75 +25,55 @@ export interface DrawerProps Omit, 'title'> { /** If true drawer is mounted to the dom */ opened: boolean; - - /** Called when drawer is closed (Escape key and click outside, depending on options) */ - onClose(): void; - /** Drawer body position */ position?: DrawerPosition; - /** Drawer body width (right | left position) or height (top | bottom position), cannot exceed 100vh for height and 100% for width */ size?: string | number; - /** Drawer body shadow from theme or any css shadow value */ shadow?: MantineShadow; - /** Drawer body padding from theme or number for padding in px */ padding?: MantineNumberSize; - /** Drawer z-index property */ zIndex?: React.CSSProperties['zIndex']; - /** Disables focus trap */ trapFocus?: boolean; - /** Disables scroll lock */ lockScroll?: boolean; - /** Disable onMouseDown trigger for outside events */ closeOnClickOutside?: boolean; - /** Disable onKeyDownCapture trigger for escape key press */ closeOnEscape?: boolean; - /** Drawer appear and disappear transition, see Transition component for full documentation */ transition?: MantineTransition; - /** Transition duration in ms */ transitionDuration?: number; - /** Drawer transitionTimingFunction css property */ transitionTimingFunction?: string; - /** Removes overlay entirely */ withOverlay?: boolean; - /** Overlay opacity, number from 0 to 1 */ overlayOpacity?: number; - /** Overlay color, for example, #000 */ overlayColor?: string; - /** Overlay blur in px */ overlayBlur?: number; - /** Drawer title, displayed in header before close button */ title?: React.ReactNode; - /** Hides close button if set to false, drawer still can be closed with escape key and by clicking outside */ withCloseButton?: boolean; - /** Close button aria-label */ closeButtonLabel?: string; - /** Target element or selector where drawer portal should be rendered */ target?: HTMLElement | string; - /** Determines whether drawer should be rendered within Portal, defaults to true */ withinPortal?: boolean; - /** Determines whether focus should be returned to the last active element when drawer is closed */ withFocusReturn?: boolean; + /** Determines whether overlay should be click-through */ + overlayClickThrough?: boolean; + + /** Called when drawer is closed (Escape key and click outside, depending on options) */ + onClose(): void; } const transitions: Record = { @@ -160,6 +140,7 @@ export function Drawer(props: DrawerProps) { overlayBlur, unstyled, withFocusReturn, + overlayClickThrough, ...others } = useComponentDefaultProps('Drawer', defaultProps, props); @@ -265,6 +246,7 @@ export function Drawer(props: DrawerProps) { overlayColor || (theme.colorScheme === 'dark' ? theme.colors.dark[9] : theme.black) } + clickThrough={overlayClickThrough} /> )} diff --git a/src/mantine-core/src/Overlay/Overlay.tsx b/src/mantine-core/src/Overlay/Overlay.tsx index f8747390c31..d7e2ed4736a 100644 --- a/src/mantine-core/src/Overlay/Overlay.tsx +++ b/src/mantine-core/src/Overlay/Overlay.tsx @@ -27,6 +27,9 @@ export interface OverlayProps extends DefaultProps { /** Value from theme.radius or number to set border-radius in px */ radius?: MantineNumberSize; + + /** Determines whether overlay should be click-through */ + clickThrough?: boolean; } const defaultProps: Partial = { @@ -38,8 +41,19 @@ const defaultProps: Partial = { }; export const _Overlay = forwardRef((props, ref) => { - const { opacity, blur, color, gradient, zIndex, radius, sx, unstyled, className, ...others } = - useComponentDefaultProps('Overlay', defaultProps, props); + const { + opacity, + blur, + color, + gradient, + zIndex, + radius, + sx, + unstyled, + className, + clickThrough, + ...others + } = useComponentDefaultProps('Overlay', defaultProps, props); const { classes, cx } = useStyles({ zIndex }, { name: 'Overlay', unstyled }); const background = gradient ? { backgroundImage: gradient } : { backgroundColor: color }; @@ -52,6 +66,14 @@ export const _Overlay = forwardRef((props, ref) => ...background, opacity, borderRadius: theme.fn.size({ size: radius, sizes: theme.radius }), + ...(clickThrough + ? { + pointerEvents: 'none', + '& > *': { + pointerEvents: 'auto', + }, + } + : {}), }), ...packSx(sx), ]} From d88527968676248be683d3054b84099c619615b2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=8Dtalo=20Andrade?= Date: Sun, 4 Sep 2022 19:57:40 -0300 Subject: [PATCH 2/5] add click-through capability to overlay --- src/mantine-core/src/Drawer/Drawer.tsx | 35 +++++++++++++++++++++----- 1 file changed, 29 insertions(+), 6 deletions(-) diff --git a/src/mantine-core/src/Drawer/Drawer.tsx b/src/mantine-core/src/Drawer/Drawer.tsx index 50ce94ae37a..8db973461bd 100644 --- a/src/mantine-core/src/Drawer/Drawer.tsx +++ b/src/mantine-core/src/Drawer/Drawer.tsx @@ -1,12 +1,12 @@ import React, { useEffect } from 'react'; -import { useFocusReturn, useFocusTrap, useScrollLock } from '@mantine/hooks'; +import { useScrollLock, useFocusTrap, useFocusReturn } from '@mantine/hooks'; import { DefaultProps, - getDefaultZIndex, MantineNumberSize, MantineShadow, - MantineStyleSystemSize, Selectors, + MantineStyleSystemSize, + getDefaultZIndex, useComponentDefaultProps, } from '@mantine/styles'; import { Paper } from '../Paper'; @@ -25,55 +25,78 @@ export interface DrawerProps Omit, 'title'> { /** If true drawer is mounted to the dom */ opened: boolean; + + /** Called when drawer is closed (Escape key and click outside, depending on options) */ + onClose(): void; + /** Drawer body position */ position?: DrawerPosition; + /** Drawer body width (right | left position) or height (top | bottom position), cannot exceed 100vh for height and 100% for width */ size?: string | number; + /** Drawer body shadow from theme or any css shadow value */ shadow?: MantineShadow; + /** Drawer body padding from theme or number for padding in px */ padding?: MantineNumberSize; + /** Drawer z-index property */ zIndex?: React.CSSProperties['zIndex']; + /** Disables focus trap */ trapFocus?: boolean; + /** Disables scroll lock */ lockScroll?: boolean; + /** Disable onMouseDown trigger for outside events */ closeOnClickOutside?: boolean; + /** Disable onKeyDownCapture trigger for escape key press */ closeOnEscape?: boolean; + /** Drawer appear and disappear transition, see Transition component for full documentation */ transition?: MantineTransition; + /** Transition duration in ms */ transitionDuration?: number; + /** Drawer transitionTimingFunction css property */ transitionTimingFunction?: string; + /** Removes overlay entirely */ withOverlay?: boolean; + /** Overlay opacity, number from 0 to 1 */ overlayOpacity?: number; + /** Overlay color, for example, #000 */ overlayColor?: string; + /** Overlay blur in px */ overlayBlur?: number; + /** Drawer title, displayed in header before close button */ title?: React.ReactNode; + /** Hides close button if set to false, drawer still can be closed with escape key and by clicking outside */ withCloseButton?: boolean; + /** Close button aria-label */ closeButtonLabel?: string; + /** Target element or selector where drawer portal should be rendered */ target?: HTMLElement | string; + /** Determines whether drawer should be rendered within Portal, defaults to true */ withinPortal?: boolean; + /** Determines whether focus should be returned to the last active element when drawer is closed */ withFocusReturn?: boolean; + /** Determines whether overlay should be click-through */ overlayClickThrough?: boolean; - - /** Called when drawer is closed (Escape key and click outside, depending on options) */ - onClose(): void; } const transitions: Record = { From 0fbb94626e8cfe87e4cbc33c43452c37da413d7d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=8Dtalo=20Andrade?= Date: Mon, 5 Sep 2022 10:17:38 -0300 Subject: [PATCH 3/5] `withOverlay: false` should let click through the root --- src/mantine-core/src/Drawer/Drawer.styles.ts | 69 +++++++++++--------- src/mantine-core/src/Drawer/Drawer.tsx | 2 +- 2 files changed, 38 insertions(+), 33 deletions(-) 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 8db973461bd..50c8b44b81c 100644 --- a/src/mantine-core/src/Drawer/Drawer.tsx +++ b/src/mantine-core/src/Drawer/Drawer.tsx @@ -168,7 +168,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' } ); From cfbdceef14a7d1c7c91ee862d58e9ccd20145b88 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=8Dtalo=20Andrade?= Date: Mon, 5 Sep 2022 10:18:16 -0300 Subject: [PATCH 4/5] Revert "add click-through capability to overlay" This reverts commit d88527968676248be683d3054b84099c619615b2. --- src/mantine-core/src/Drawer/Drawer.tsx | 35 +++++--------------------- 1 file changed, 6 insertions(+), 29 deletions(-) diff --git a/src/mantine-core/src/Drawer/Drawer.tsx b/src/mantine-core/src/Drawer/Drawer.tsx index 50c8b44b81c..2c5e0e8ac88 100644 --- a/src/mantine-core/src/Drawer/Drawer.tsx +++ b/src/mantine-core/src/Drawer/Drawer.tsx @@ -1,12 +1,12 @@ import React, { useEffect } from 'react'; -import { useScrollLock, useFocusTrap, useFocusReturn } from '@mantine/hooks'; +import { useFocusReturn, useFocusTrap, useScrollLock } from '@mantine/hooks'; import { DefaultProps, + getDefaultZIndex, MantineNumberSize, MantineShadow, - Selectors, MantineStyleSystemSize, - getDefaultZIndex, + Selectors, useComponentDefaultProps, } from '@mantine/styles'; import { Paper } from '../Paper'; @@ -25,78 +25,55 @@ export interface DrawerProps Omit, 'title'> { /** If true drawer is mounted to the dom */ opened: boolean; - - /** Called when drawer is closed (Escape key and click outside, depending on options) */ - onClose(): void; - /** Drawer body position */ position?: DrawerPosition; - /** Drawer body width (right | left position) or height (top | bottom position), cannot exceed 100vh for height and 100% for width */ size?: string | number; - /** Drawer body shadow from theme or any css shadow value */ shadow?: MantineShadow; - /** Drawer body padding from theme or number for padding in px */ padding?: MantineNumberSize; - /** Drawer z-index property */ zIndex?: React.CSSProperties['zIndex']; - /** Disables focus trap */ trapFocus?: boolean; - /** Disables scroll lock */ lockScroll?: boolean; - /** Disable onMouseDown trigger for outside events */ closeOnClickOutside?: boolean; - /** Disable onKeyDownCapture trigger for escape key press */ closeOnEscape?: boolean; - /** Drawer appear and disappear transition, see Transition component for full documentation */ transition?: MantineTransition; - /** Transition duration in ms */ transitionDuration?: number; - /** Drawer transitionTimingFunction css property */ transitionTimingFunction?: string; - /** Removes overlay entirely */ withOverlay?: boolean; - /** Overlay opacity, number from 0 to 1 */ overlayOpacity?: number; - /** Overlay color, for example, #000 */ overlayColor?: string; - /** Overlay blur in px */ overlayBlur?: number; - /** Drawer title, displayed in header before close button */ title?: React.ReactNode; - /** Hides close button if set to false, drawer still can be closed with escape key and by clicking outside */ withCloseButton?: boolean; - /** Close button aria-label */ closeButtonLabel?: string; - /** Target element or selector where drawer portal should be rendered */ target?: HTMLElement | string; - /** Determines whether drawer should be rendered within Portal, defaults to true */ withinPortal?: boolean; - /** Determines whether focus should be returned to the last active element when drawer is closed */ withFocusReturn?: boolean; - /** Determines whether overlay should be click-through */ overlayClickThrough?: boolean; + + /** Called when drawer is closed (Escape key and click outside, depending on options) */ + onClose(): void; } const transitions: Record = { From 243deab2be87df1a77dd26dc67fcab9ee212bf86 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=8Dtalo=20Andrade?= Date: Mon, 5 Sep 2022 10:18:21 -0300 Subject: [PATCH 5/5] Revert "add click-through capability to overlay" This reverts commit fe745052968ec72480c5b3762ce071dbe1558845. --- src/mantine-core/src/Drawer/Drawer.tsx | 38 +++++++++++++++++------- src/mantine-core/src/Overlay/Overlay.tsx | 26 ++-------------- 2 files changed, 30 insertions(+), 34 deletions(-) diff --git a/src/mantine-core/src/Drawer/Drawer.tsx b/src/mantine-core/src/Drawer/Drawer.tsx index 2c5e0e8ac88..6b84b503120 100644 --- a/src/mantine-core/src/Drawer/Drawer.tsx +++ b/src/mantine-core/src/Drawer/Drawer.tsx @@ -1,12 +1,12 @@ import React, { useEffect } from 'react'; -import { useFocusReturn, useFocusTrap, useScrollLock } from '@mantine/hooks'; +import { useScrollLock, useFocusTrap, useFocusReturn } from '@mantine/hooks'; import { DefaultProps, - getDefaultZIndex, MantineNumberSize, MantineShadow, - MantineStyleSystemSize, Selectors, + MantineStyleSystemSize, + getDefaultZIndex, useComponentDefaultProps, } from '@mantine/styles'; import { Paper } from '../Paper'; @@ -25,55 +25,75 @@ export interface DrawerProps Omit, 'title'> { /** If true drawer is mounted to the dom */ opened: boolean; + + /** Called when drawer is closed (Escape key and click outside, depending on options) */ + onClose(): void; + /** Drawer body position */ position?: DrawerPosition; + /** Drawer body width (right | left position) or height (top | bottom position), cannot exceed 100vh for height and 100% for width */ size?: string | number; + /** Drawer body shadow from theme or any css shadow value */ shadow?: MantineShadow; + /** Drawer body padding from theme or number for padding in px */ padding?: MantineNumberSize; + /** Drawer z-index property */ zIndex?: React.CSSProperties['zIndex']; + /** Disables focus trap */ trapFocus?: boolean; + /** Disables scroll lock */ lockScroll?: boolean; + /** Disable onMouseDown trigger for outside events */ closeOnClickOutside?: boolean; + /** Disable onKeyDownCapture trigger for escape key press */ closeOnEscape?: boolean; + /** Drawer appear and disappear transition, see Transition component for full documentation */ transition?: MantineTransition; + /** Transition duration in ms */ transitionDuration?: number; + /** Drawer transitionTimingFunction css property */ transitionTimingFunction?: string; + /** Removes overlay entirely */ withOverlay?: boolean; + /** Overlay opacity, number from 0 to 1 */ overlayOpacity?: number; + /** Overlay color, for example, #000 */ overlayColor?: string; + /** Overlay blur in px */ overlayBlur?: number; + /** Drawer title, displayed in header before close button */ title?: React.ReactNode; + /** Hides close button if set to false, drawer still can be closed with escape key and by clicking outside */ withCloseButton?: boolean; + /** Close button aria-label */ closeButtonLabel?: string; + /** Target element or selector where drawer portal should be rendered */ target?: HTMLElement | string; + /** Determines whether drawer should be rendered within Portal, defaults to true */ withinPortal?: boolean; + /** Determines whether focus should be returned to the last active element when drawer is closed */ withFocusReturn?: boolean; - /** Determines whether overlay should be click-through */ - overlayClickThrough?: boolean; - - /** Called when drawer is closed (Escape key and click outside, depending on options) */ - onClose(): void; } const transitions: Record = { @@ -140,7 +160,6 @@ export function Drawer(props: DrawerProps) { overlayBlur, unstyled, withFocusReturn, - overlayClickThrough, ...others } = useComponentDefaultProps('Drawer', defaultProps, props); @@ -246,7 +265,6 @@ export function Drawer(props: DrawerProps) { overlayColor || (theme.colorScheme === 'dark' ? theme.colors.dark[9] : theme.black) } - clickThrough={overlayClickThrough} /> )} diff --git a/src/mantine-core/src/Overlay/Overlay.tsx b/src/mantine-core/src/Overlay/Overlay.tsx index d7e2ed4736a..f8747390c31 100644 --- a/src/mantine-core/src/Overlay/Overlay.tsx +++ b/src/mantine-core/src/Overlay/Overlay.tsx @@ -27,9 +27,6 @@ export interface OverlayProps extends DefaultProps { /** Value from theme.radius or number to set border-radius in px */ radius?: MantineNumberSize; - - /** Determines whether overlay should be click-through */ - clickThrough?: boolean; } const defaultProps: Partial = { @@ -41,19 +38,8 @@ const defaultProps: Partial = { }; export const _Overlay = forwardRef((props, ref) => { - const { - opacity, - blur, - color, - gradient, - zIndex, - radius, - sx, - unstyled, - className, - clickThrough, - ...others - } = useComponentDefaultProps('Overlay', defaultProps, props); + const { opacity, blur, color, gradient, zIndex, radius, sx, unstyled, className, ...others } = + useComponentDefaultProps('Overlay', defaultProps, props); const { classes, cx } = useStyles({ zIndex }, { name: 'Overlay', unstyled }); const background = gradient ? { backgroundImage: gradient } : { backgroundColor: color }; @@ -66,14 +52,6 @@ export const _Overlay = forwardRef((props, ref) => ...background, opacity, borderRadius: theme.fn.size({ size: radius, sizes: theme.radius }), - ...(clickThrough - ? { - pointerEvents: 'none', - '& > *': { - pointerEvents: 'auto', - }, - } - : {}), }), ...packSx(sx), ]}