import Example from "../../components/example";
import Layout from "../../components/layout";
import Exports from "../../components/exports";

import * as DrawerExports from "baseui/drawer";
import Anchors from "examples/drawer/anchors.tsx";
import Sizes from "examples/drawer/sizes.tsx";
import SSRRenderAll from "examples/drawer/ssr-render-all.tsx";

import Yard from "../../components/yard/index";
import drawerYardConfig from "../../components/yard/config/drawer";

export default Layout;

# Drawer

<Yard placeholderHeight={0} {...drawerYardConfig} />

<Example title="Drawer with anchor" path="drawer/anchors.tsx">
  <Anchors />
</Example>

<Example title="Drawer with different size" path="drawer/sizes.tsx">
  <Sizes />
</Example>

<Example
  title="Drawer with renderAll for SSR / SEO"
  path="drawer/ssr-render-all.tsx"
>
  <SSRRenderAll />
</Example>

## Accessibility

We have built in functionality based on the recommendations for dialogs and drawers in [WAI-ARIA Authoring Practices 1.1](https://www.w3.org/TR/wai-aria-practices/#dialog_drawer).

- Upon opening, focus will be transferred to the first interactive element (unless `autofocus` is set to false)
- Container element has `aria-label="drawer"`
- `Escape` key closes the drawer
- Click on backdrop (anywhere outside dialog) hides drawer.
- Background is not be scrollable while drawer is open (position: fixed).
- Upon closing, focus should return to element that triggered drawer.

<Exports
  component={DrawerExports}
  title="Drawer exports"
  path="baseui/drawer"
/>