diff --git a/apps/www/src/content/docs/components/drawer/demo.ts b/apps/www/src/content/docs/components/drawer/demo.ts
index 360fd17c8..66e78a6a9 100644
--- a/apps/www/src/content/docs/components/drawer/demo.ts
+++ b/apps/www/src/content/docs/components/drawer/demo.ts
@@ -120,3 +120,83 @@ function ControlledDrawer() {
);
}`
};
+
+export const swipeAreaDemo = {
+ type: 'code',
+ code: `
+function SwipeAreaDemo() {
+ const [container, setContainer] = React.useState(null);
+
+ return (
+
+
+
+ Swipe from the right edge to open the drawer.
+
+
+
+ Library
+ Swipe from the edge whenever you want to jump back into your playlists.
+
+
+
+
+ );
+}`
+};
+
+export const keyboardDemo = {
+ type: 'code',
+ code: `
+
+
+
+ Edit profile
+
+
+
+
+
+
+ `
+};
+
+export const indentDemo = {
+ type: 'code',
+ code: `
+function IndentDemo() {
+ const [container, setContainer] = React.useState(null);
+
+ return (
+
+
+
+
+
+
+
+ Notifications
+ You are all caught up. Good job!
+
+
+
+
+
+
+
+ );
+}`
+};
diff --git a/apps/www/src/content/docs/components/drawer/index.mdx b/apps/www/src/content/docs/components/drawer/index.mdx
index 4c11cf1c6..aa0fd6c7c 100644
--- a/apps/www/src/content/docs/components/drawer/index.mdx
+++ b/apps/www/src/content/docs/components/drawer/index.mdx
@@ -5,7 +5,7 @@ source: packages/react/components/drawer
---
import { playground, basicDemo, positionDemo,
- controlledDemo,
+ controlledDemo, swipeAreaDemo, keyboardDemo, indentDemo,
} from "./demo.ts";
+
```
+The indent is optional. It wraps your app:
+
+```tsx
+
+ {/* your app, with its drawers */}
+
+```
+
## Usage
Pick the edge it enters from, then decide who owns its open state.
@@ -51,6 +61,32 @@ Pass `open` with `onOpenChange` to own the state. Do this when the drawer has to
+ | null;
+}
+
+export interface DrawerSwipeAreaProps {
+ /** The swipe direction that opens the drawer. Defaults to the opposite of the root's `swipeDirection`. */
+ swipeDirection?: 'up' | 'down' | 'left' | 'right';
+
+ /**
+ * Turns off swipe-to-open.
+ * @default false
+ */
+ disabled?: boolean;
+
+ /**
+ * Allows rendering as a different element.
+ * Accepts a React element or a function that receives props and returns an element.
+ *
+ * @remarks `ReactElement | function`
+ */
+ render?: React.ReactElement;
+
+ /** Additional CSS class name. */
+ className?: string;
+}
+
+export interface DrawerProviderProps {
+ /** The app content. An open drawer inside it activates `Drawer.Indent`. */
+ children?: React.ReactNode;
+}
+
+export interface DrawerIndentProps {
+ /** Your app content. */
+ children?: React.ReactNode;
+
+ /**
+ * Allows rendering as a different element.
+ * Accepts a React element or a function that receives props and returns an element.
+ *
+ * @remarks `ReactElement | function`
+ */
+ render?: React.ReactElement;
+
+ /** Additional CSS class name. */
+ className?: string;
}
diff --git a/packages/react/components/drawer/__tests__/data-slots.test.tsx b/packages/react/components/drawer/__tests__/data-slots.test.tsx
index ffd61c696..7c6221f9b 100644
--- a/packages/react/components/drawer/__tests__/data-slots.test.tsx
+++ b/packages/react/components/drawer/__tests__/data-slots.test.tsx
@@ -38,4 +38,21 @@ describe('Drawer data-slot contract', () => {
render(
+
+
+
+
+
+ );
+ expectSlots(document.body, [
+ 'drawer-swipe-area',
+ 'drawer-indent',
+ 'drawer-indent-background'
+ ]);
+ });
});
diff --git a/packages/react/components/drawer/__tests__/drawer.test.tsx b/packages/react/components/drawer/__tests__/drawer.test.tsx
index ccd025528..b2501c02b 100644
--- a/packages/react/components/drawer/__tests__/drawer.test.tsx
+++ b/packages/react/components/drawer/__tests__/drawer.test.tsx
@@ -1,9 +1,16 @@
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import {
+ act,
+ fireEvent,
+ render,
+ screen,
+ waitFor
+} from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { type ReactElement } from 'react';
import { describe, expect, it, vi } from 'vitest';
import { Button } from '~/components/button';
+import { getSlot } from '~/test-utils/data-slots';
import { Drawer } from '../drawer';
import styles from '../drawer.module.css';
@@ -69,6 +76,23 @@ describe('Drawer', () => {
expect(drawer.closest('body')).toBe(document.body);
});
});
+
+ it('renders into the given container', async () => {
+ const container = document.createElement('div');
+ document.body.appendChild(container);
+ render(
+
+
+ {DRAWER_CONTENT}
+
+
+ );
+
+ await waitFor(() => {
+ expect(container).toContainElement(screen.getByRole('dialog'));
+ });
+ container.remove();
+ });
});
describe('Overlay', () => {
@@ -249,4 +273,122 @@ describe('Drawer', () => {
});
});
});
+
+ describe('Swipe Area', () => {
+ const renderSwipeArea = (side?: 'top' | 'right' | 'bottom' | 'left') =>
+ render(
+
+ {DRAWER_CONTENT}
+
+ ).getByTestId('swipe-area');
+
+ it('applies the swipe area class', () => {
+ expect(renderSwipeArea()).toHaveClass(styles.swipeArea);
+ });
+
+ it.each([
+ ['right', 'left'],
+ ['left', 'right'],
+ ['top', 'down'],
+ ['bottom', 'up']
+ ] as const)('opens a %s drawer with a %s swipe', (side, direction) => {
+ expect(renderSwipeArea(side)).toHaveAttribute(
+ 'data-swipe-direction',
+ direction
+ );
+ });
+
+ it('follows a swipeDirection set on the root', () => {
+ const swipeArea = render(
+
+
+ ).getByTestId('swipe-area');
+ expect(swipeArea).toHaveAttribute('data-swipe-direction', 'up');
+ });
+
+ it('accepts its own swipeDirection', () => {
+ const swipeArea = render(
+
+
+ ).getByTestId('swipe-area');
+ expect(swipeArea).toHaveAttribute('data-swipe-direction', 'up');
+ });
+
+ it('marks the swipe area as disabled', () => {
+ const swipeArea = render(
+
+
+ ).getByTestId('swipe-area');
+ expect(swipeArea).toHaveAttribute('data-disabled');
+ });
+ });
+
+ describe('Indent', () => {
+ const IndentedDrawer = ({ open }: { open: boolean }) => (
+
+
+
+ {DRAWER_CONTENT}
+
+
+
+ );
+ const getBackground = () =>
+ getSlot(document.body, 'drawer-indent-background');
+
+ it('renders the background outside the indent', () => {
+ render(
+
+
+
+ );
+ const getInset = () =>
+ getSlot(document.body, 'drawer-viewport')?.style.getPropertyValue(
+ '--drawer-keyboard-inset'
+ );
+
+ it('tracks the keyboard inset when enableVirtualKeyboard is set', async () => {
+ render(
+ const portal = (
+
);
+ return enableVirtualKeyboard ? (
+
+ {portal}
+
+ ) : (
+ portal
+ );
}
DrawerContent.displayName = 'Drawer.Content';
diff --git a/packages/react/components/drawer/drawer-indent.tsx b/packages/react/components/drawer/drawer-indent.tsx
new file mode 100644
index 000000000..2e2f69355
--- /dev/null
+++ b/packages/react/components/drawer/drawer-indent.tsx
@@ -0,0 +1,24 @@
+'use client';
+
+import { Drawer as DrawerPrimitive } from '@base-ui/react/drawer';
+import { cx } from 'class-variance-authority';
+import styles from './drawer.module.css';
+
+export type DrawerIndentProps = DrawerPrimitive.Indent.Props;
+
+export function DrawerIndent({ className, ...props }: DrawerIndentProps) {
+ return (
+ <>
+