# Type Alias DrawerProps

DrawerProps: {
children: React.ReactNode;
className?: string;
closeOnEsc?: boolean;
from?: DrawerFrom;
isOpen: boolean;
onClose: () => void;
onOverlayClick?: () => void | "close" | null;
portal?: boolean | HTMLElement;
scaleContent?: boolean | number;
scaleSelectors?: string | string[];
scaleSelectorsMode?: ScaleMode;
size?: number | string;
}

#### Type declaration

- ##### children: React.ReactNode

- ##### `Optional` className?: string

- ##### `Optional` closeOnEsc?: boolean

- ##### `Optional` from?: DrawerFrom

  Which edge the drawer slides in from. Defaults to `"bottom"`.

- ##### isOpen: boolean

- ##### onClose: () => void

- ##### `Optional` onOverlayClick?: () => void | "close" | null

  What happens when the user clicks (or taps) on the area outside the drawer. Mirrors `Modal`'s prop: `"close"` (default) calls `onClose`, a function is invoked directly, and `null` makes the overlay transparent to pointer/touch events so the underlying page stays interactive. The overlay only renders when there is an "outside" — i.e. `size` is set or `scaleContent` is enabled.

- ##### `Optional` portal?: boolean | HTMLElement

  Where to portal the drawer. `true` (default) portals to `document.body` so the drawer's `position: fixed` always anchors to the viewport — needed when any ancestor establishes a containing block (e.g. via `transform`, `filter`, or `will-change`). Pass an `HTMLElement` to portal to a specific node, or `false` to render in place.

- ##### `Optional` scaleContent?: boolean | number

  When set, scales the targeted page content down while the drawer is open (use with `scaleSelectors`) and fades in a subtle tint over it for a stacked "3D" look. `true` uses the default scale (~0.92), or pass a number to customize (e.g. `0.95`).

- ##### `Optional` scaleSelectors?: string | string[]

  CSS selector (or array tried in order) for what to scale when `scaleContent` is set. The first selector that matches anything wins. Defaults to common app-root selectors `["#__next", "#root", "body>*:first-child"]`.

- ##### `Optional` scaleSelectorsMode?: ScaleMode

  Whether to scale only the first match of the chosen selector (`"first"`, default) or every match (`"all"`).

- ##### `Optional` size?: number | string

  How far the drawer extends along its slide axis. Defaults to filling the whole viewport.

  - positive number — size in pixels (e.g. `300` ⇒ 300px tall/wide).
  - negative number — viewport minus pixels (e.g. `-100` ⇒ `calc(100% - 100px)`).
  - string — any CSS length (e.g. `"50%"`, `"20rem"`).

  When set, the drawer's visible edge gets rounded corners.

- Defined in src/components/ui/drawer/Drawer.tsx:20