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

import ToastNotification from "examples/toast/toast-notification.tsx";
import ToastSameKeyNotification from "examples/toast/toast-same-key-notification.tsx";
import ToastCloseFromOutside from "examples/toast/toast-close-from-outside.tsx";

import { Toast } from "baseui/toast";
import * as ToastExports from "baseui/toast";
import Yard from "../../components/yard/index";
import toastYardConfig from "../../components/yard/config/toast";

export default Layout;

# Toast

<Yard placeholderHeight={52} {...toastYardConfig} />

Toasts can be dismissed and sit on top of a view in various position options - top/right, top/center,
top/left, bottom/right, bottom/center, bottom/left. Toasts are intended to provide feedback to a user
and self-dismiss after a short time with an option to self-dismiss. Each toast can be colored to fit
it’s status type of neutral, positive, warning and alert.

The above example, where the ToasterContainer wraps the child elements, is not SSR safe. The code
examples below, which show the ToasterContainer as a self closing tag alongside other elements, is SSR
safe.

**Using the `toaster` utility:**

Toasts can be created easily with some of the helper functions on `toaster`, as seen in the code sample above. If a key isn't provided, it will auto-generate a unique key for you which will be returned in the instantiation functions (`info, positive, warning, negative`).
If a toast with an identical key already exists, that toast's contents will be updated instead of a new toast being created. The autoHide timeout will reset unless the `resetAutoHideTimerOnUpdate` prop is set to false on the toaster.

## Accessibility

- Toast notification container element has `role="alert"` set on it.
- When multiple alerts are displayed and positioned relative to the browser window they won't overlap but displayed in a column way, latest notifications are displayed at the initial position of a chosen placement.
- By default, `autoHideDuration` is set to `0`, which means a Toast will remain until dismissed by the user. If possible, try setting an `autoHideDuration` that makes sense for the content of the Toast. The `autoHideDuration` countdown will be paused when a user focuses or hovers over the Toast. The countdown will be reset once the user unfocuses or moves their mouse off of the Toast.
- Do not put important actions in Toasts. If you must put an action in a Toast, do not set an `autoHideDuration`.
- You can force focus to the dismiss button when a Toast mounts with the `autoFocus` prop (on both `Toast` and `Toaster`). Use this with caution and keep in mind that screenreaders may read the Toast's content twice (due to the focus shift and alert role).

## Examples

<Example
  title="Toast Notification Basic Usage"
  path="toast/toast-notification.tsx"
>
  <ToastNotification />
</Example>

<Example
  title="Toaster Using Key To Update Open Toasts"
  path="toast/toast-same-key-notification.tsx"
>
  <ToastSameKeyNotification />
</Example>

<Example
  title="Toast Being Closed From Outside"
  path="toast/toast-close-from-outside.tsx"
>
  <ToastCloseFromOutside />
</Example>

<Exports component={ToastExports} title="Toast exports" path="baseui/toast" />