Headless Core — Drawer

Powers Drawer internally. Same shape as Modal with one addition: placement, exposed as data-side on the content element for slide-in styling.

Usage

import { createDrawer } from '@andersseen/headless-components/drawer';

const drawer = createDrawer({
  placement: 'left',
  closeOnEscape: true,
  closeOnOverlayClick: true,
  onOpenChange: isOpen => console.log('Drawer:', isOpen),
});

drawer.actions.open();
window.addEventListener('keydown', drawer.handleKeyDown);

Config

Option	Type	Default	Notes
defaultOpen	boolean	false
placement	'top' | 'bottom' | 'left' | 'right'	'left'
onOpenChange	(isOpen: boolean) => void	—
closeOnEscape	boolean	true
closeOnOverlayClick	boolean	true
disabled	boolean	false
label	string	'Drawer'

State

isOpen, placement, disabled.

Actions

open(), close(), toggle(), setPlacement(v), setDisabled(v) — no queries bucket; read drawer.state.isOpen directly.

Prop-getters & handlers

Getter	Returns
getOverlayProps()	data-state, aria-hidden
getContentProps()	role: 'dialog', aria-modal: true, aria-hidden, aria-label, data-state, data-side (the placement), tabindex: -1
getCloseButtonProps()	aria-label: 'Close', type: 'button'

handleKeyDown(event) / handleOverlayClick() — identical contract to Modal.

Live example

Toggle drawer Switch side

Next steps

Modal — the same factory shape without the placement side.