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 = {