diff --git a/packages/core/src/components/Drawer/Drawer.tsx b/packages/core/src/components/Drawer/Drawer.tsx index 8465590bb..f442aa9eb 100644 --- a/packages/core/src/components/Drawer/Drawer.tsx +++ b/packages/core/src/components/Drawer/Drawer.tsx @@ -10,13 +10,14 @@ import Header from './Header'; import { DrawerProps, DrawerStaticProps } from './types'; const Component: FC = memo( - forwardRef(({ id, onClose, open, width, children, withOverlay, position, ...props }, ref) => { + forwardRef(({ id, onClose, open, width, children, withOverlay, position, shouldCloseOnOutsideClick, ...props }, ref) => { const isEscPressed = useKeyPress('Escape'), [shouldRender, setRenderState] = useState(open), [scrollState, dispatch] = useReducer(reducer, { scrolledToTop: true, scrolledToBottom: false, scrollPosition: 0 }); const handleBackgroundClick = useCallback( - (event: MouseEvent) => event.currentTarget === event.target && onClose && onClose(), + (event: MouseEvent) => + event.currentTarget === event.target && shouldCloseOnOutsideClick && onClose && onClose(), [onClose] ), handleAnimationEnd = useCallback(() => !open && setRenderState(false), [open]); @@ -52,7 +53,8 @@ Component.defaultProps = { open: false, position: 'right', width: '40rem', - withOverlay: true + withOverlay: true, + shouldCloseOnOutsideClick: true }; export const Drawer: FC & WithStyle & DrawerStaticProps = Object.assign(Component, { Style: DrawerBackground, diff --git a/packages/core/src/components/Drawer/types.ts b/packages/core/src/components/Drawer/types.ts index 4a5524fdf..abfc7e506 100644 --- a/packages/core/src/components/Drawer/types.ts +++ b/packages/core/src/components/Drawer/types.ts @@ -9,6 +9,7 @@ export interface DrawerProps extends HTMLProps { onClose: () => void; width?: string; withOverlay?: boolean; + shouldCloseOnOutsideClick?: boolean; } export interface DrawerStaticProps {