import * as React from 'react'; import { SxProps } from '@mui/system'; import { ClickAwayListenerProps } from '@mui/base/ClickAwayListener'; import { Theme } from '../styles'; import { InternalStandardProps as StandardProps } from '..'; import { SnackbarContentProps } from '../SnackbarContent'; import { TransitionProps } from '../transitions/transition'; import { SnackbarClasses } from './snackbarClasses'; export interface SnackbarOrigin { vertical: 'top' | 'bottom'; horizontal: 'left' | 'center' | 'right'; } export type SnackbarCloseReason = 'timeout' | 'clickaway' | 'escapeKeyDown'; export interface SnackbarProps extends StandardProps> { /** * The action to display. It renders after the message, at the end of the snackbar. */ action?: SnackbarContentProps['action']; /** * The anchor of the `Snackbar`. * On smaller screens, the component grows to occupy all the available width, * the horizontal alignment is ignored. * @default { vertical: 'bottom', horizontal: 'left' } */ anchorOrigin?: SnackbarOrigin; /** * The number of milliseconds to wait before automatically calling the * `onClose` function. `onClose` should then set the state of the `open` * prop to hide the Snackbar. This behavior is disabled by default with * the `null` value. * @default null */ autoHideDuration?: number | null; /** * Replace the `SnackbarContent` component. */ children?: React.ReactElement; /** * Override or extend the styles applied to the component. */ classes?: Partial; /** * Props applied to the `ClickAwayListener` element. */ ClickAwayListenerProps?: Partial; /** * Props applied to the [`SnackbarContent`](/material-ui/api/snackbar-content/) element. */ ContentProps?: Partial; /** * If `true`, the `autoHideDuration` timer will expire even if the window is not focused. * @default false */ disableWindowBlurListener?: boolean; /** * When displaying multiple consecutive snackbars using a single parent-rendered * ``, add the `key` prop to ensure independent treatment of each message. * For instance, use ``. Otherwise, messages might update * in place, and features like `autoHideDuration` could be affected. */ key?: any; /** * The message to display. */ message?: SnackbarContentProps['message']; /** * Callback fired when the component requests to be closed. * Typically `onClose` is used to set state in the parent component, * which is used to control the `Snackbar` `open` prop. * The `reason` parameter can optionally be used to control the response to `onClose`, * for example ignoring `clickaway`. * * @param {React.SyntheticEvent | Event} event The event source of the callback. * @param {string} reason Can be: `"timeout"` (`autoHideDuration` expired), `"clickaway"`, or `"escapeKeyDown"`. */ onClose?: (event: React.SyntheticEvent | Event, reason: SnackbarCloseReason) => void; /** * If `true`, the component is shown. */ open?: boolean; /** * The number of milliseconds to wait before dismissing after user interaction. * If `autoHideDuration` prop isn't specified, it does nothing. * If `autoHideDuration` prop is specified but `resumeHideDuration` isn't, * we default to `autoHideDuration / 2` ms. */ resumeHideDuration?: number; /** * The system prop that allows defining system overrides as well as additional CSS styles. */ sx?: SxProps; /** * The component used for the transition. * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. * @default Grow */ TransitionComponent?: React.JSXElementConstructor< TransitionProps & { children: React.ReactElement } >; /** * The duration for the transition, in milliseconds. * You may specify a single timeout for all transitions, or individually with an object. * @default { * enter: theme.transitions.duration.enteringScreen, * exit: theme.transitions.duration.leavingScreen, * } */ transitionDuration?: TransitionProps['timeout']; /** * Props applied to the transition element. * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component. * @default {} */ TransitionProps?: TransitionProps; } /** * * Demos: * * - [Snackbar](https://mui.com/material-ui/react-snackbar/) * * API: * * - [Snackbar API](https://mui.com/material-ui/api/snackbar/) */ export default function Snackbar(props: SnackbarProps): JSX.Element;