;
}
};
```tsx lines expandable theme={null}
import { Drawer, Button } from "@servicetitan/anvil2";
function App() {
return (
Header textBody textCancel
);
}
export default App;
```
## Common Examples
```tsx theme={null}
import { Button, Drawer } from "@servicetitan/anvil2";
function ExampleComponent() {
return (
Header textBody text
);
}
```
### Closing Drawers
Clicking a `Drawer.CancelButton` or the close button in the `Drawer.Header` will trigger the `onClose` handler. A callback can be added to a `Drawer.CancelButton` or any `Button` in the `Drawer.Footer` to further control the open state of the `Drawer`.
#### Closing callbacks
In addition to `onClose`–which indicates a user has chosen to close a drawer–the component also offers two animation callbacks `onCloseAnimationStart` and `onCloseAnimationComplete`.
You may use these callbacks to perform additional actions related to the presentation of the `Drawer`. For example, if you have a drawer containing a form, you may wish to reset the form state after the close animation has played so that the user doesn't see an empty form briefly when closing the drawer.
```tsx theme={null}
const [open, setOpen] = useState(false);
const [field, setField] = useState("");
const handleSubmit = () => {
setOpen(false);
};
const handleDrawerAnimationComplete = () => {
setField("");
};
return (
<>
setOpen(false)}
onCloseAnimationComplete={handleDrawerAnimationComplete}
>
What is your favorite color? setField(e.target.value)}
style={{ width: "100%" }}
autoComplete="off"
/>
);
```
### Sticky Content
Use the `sticky` prop on `Drawer.Content` to keep important UI elements (like search fields or filters) visible while other content scrolls. This is useful for drawers with long, scrollable content.
```tsx theme={null}
import { Button, Drawer, Flex, TextField, Text } from "@servicetitan/anvil2";
import { useState } from "react";
function ExampleComponent() {
const [isOpen, setIsOpen] = useState(true);
return (
setIsOpen(false)}>
Filter Items
{Array.from({ length: 50 }, (_, i) => (
Item {i + 1}
))}
Cancel
);
}
```
The search field will remain visible at the top while the list of items scrolls below it.
### Drawers and Toasts
Due to the way the HTML `dialog` element renders in the browser's top layer, the `Drawer` component includes an internal `Toaster` for rendering toast messages. This should be unnoticeable to implementors and users, but there may be edge cases the result in toasts not rendering as expected.
Please reach out to us in the [#ask-designsystem](https://servicetitan.enterprise.slack.com/archives/CBSRGHTRS) channel on Slack if any edge cases related to drawers and toasts are found!
## Anti-Patterns
### Conditional rendering
The openness should be controlled by the `open` prop and not by conditional rendering -- this is an anti-pattern for Drawer.
```tsx theme={null}
❌
{condition && ...}
✅
...
```
#### Resetting content
HTML Dialog show/hide content but it doesn't remove from the DOM which means the reset doesn't happen automatically. To do the reset, use `key` on `` . Since `` is always present in DOM, you can add conditional to, or in, the `` as well.
#### More details
Drawer uses HTML Dialog which is powered by HTML top-layers. This puts them on top of EVERYTHING regardless z-index and we use the HTML top-layer to avoid stacking context and z-index issues, ensuring Drawer always appear above all content without needing manual z-index adjustments. Drawer internally has custom mechanism to ensure Toasts to be on top for ServiceTitan app and requires Drawer to be present on page load.
```tsx theme={null}
setIsOpen(false)}
disableCloseOnClickOutside={false}
disableCloseOnEscape={false}
size="medium"
onCloseAnimationComplete={() => {}}
onCloseAnimationStart={() => {}}
onOpenAnimationComplete={() => {}}
onOpenAnimationStart={() => {}}
>
HeaderContent
```
## `Drawer` Props
In addition to the props listed below, the `Drawer` component can accept any valid HTML `dialog` props.
When `true`, clicking outside the drawer will not close it.
When `true`, pressing the escape key will not close the drawer.
Enables scroll chaining behavior.
Given an array of focusable elements, returns the element that should receive initial focus.
Callback when clicking outside the drawer.
Indicates the user has closed the drawer. Use this to update your state.
Callback indicating the drawer has animated out. Use this to clean up views as needed.
Callback indicating the drawer is beginning to animate out.
Callback indicating the drawer has animated in.
Callback indicating the drawer is beginning to animate in.
```tsx theme={null}
Drawer Header
```
## `Drawer.Header` Props
The `Drawer.Header` component can accept any valid HTML `header` props.
```tsx theme={null}
Drawer content
```
## `Drawer.Content` Props
In addition to the props listed below, the `Drawer.Content` component can accept any valid HTML `div` props.
When `true`, the content will stick below the header during scroll.
```tsx theme={null}
```
## `Drawer.Footer` Props
In addition to the props listed below, the `Drawer.Footer` component can accept any valid HTML `footer` props.
