import { BasePortalProps, BoxProps, ElementProps, Factory, StylesApiProps } from '@mantine/core'; import { NotificationData, NotificationPosition, notifications, NotificationsStore } from './notifications.store'; export type NotificationsStylesNames = 'root' | 'notification' | 'progress'; export type NotificationsCssVariables = { root: '--notifications-z-index' | '--notifications-container-width'; }; export interface NotificationsProps extends BoxProps, StylesApiProps, ElementProps<'div'> { /** Notifications default position @default 'bottom-right' */ position?: NotificationPosition; /** Auto close timeout for all notifications in ms, `false` to disable auto close, can be overwritten for individual notifications in `notifications.show` function @default 4000 */ autoClose?: number | false; /** Notification transition duration in ms @default 250 */ transitionDuration?: number; /** Determines whether notifications can be dismissed by dragging left or right @default true */ allowDragDismiss?: boolean; /** Determines whether notifications can be dismissed with horizontal scroll gesture while hovered @default true */ allowScrollDismiss?: boolean; /** Notification width, cannot exceed 100% @default 440 */ containerWidth?: number | string; /** Notification `max-height`, used for transitions @default 200 */ notificationMaxHeight?: number | string; /** Maximum number of notifications displayed at a time, other new notifications will be added to queue @default 5 */ limit?: number; /** Notifications container z-index @default 400 */ zIndex?: string | number; /** Props passed down to the `Portal` component */ portalProps?: BasePortalProps; /** Store for notifications state, can be used to create multiple instances of notifications system in your application */ store?: NotificationsStore; /** Determines whether notifications container should be rendered inside `Portal` @default true */ withinPortal?: boolean; /** Determines which notifications should pause auto close on hover, `'all'` – pauses auto close for all notifications when any notification is hovered, `'notification'` – pauses auto close only for the hovered notification @default 'all' */ pauseResetOnHover?: 'all' | 'notification'; /** Custom render function that replaces the default notification, can be overridden per notification */ renderNotification?: (notification: NotificationData) => React.ReactNode; /** Controls how notifications are positioned in the stack, `'default'` – standard vertical list, `'stacked'` – only first notification is fully visible, rest are stacked behind @default 'default' */ layout?: 'default' | 'stacked'; /** Determines whether a progress line that fills up until the notification auto closes is displayed at the bottom of every notification, can be overwritten for individual notifications in `notifications.show` and `notifications.update` functions @default false */ withAutoCloseProgress?: boolean; } export type NotificationsFactory = Factory<{ props: NotificationsProps; ref: HTMLDivElement; stylesNames: NotificationsStylesNames; vars: NotificationsCssVariables; staticComponents: { show: typeof notifications.show; hide: typeof notifications.hide; update: typeof notifications.update; promise: typeof notifications.promise; clean: typeof notifications.clean; cleanQueue: typeof notifications.cleanQueue; updateState: typeof notifications.updateState; }; }>; export declare const Notifications: import("@mantine/core").MantineComponent<{ props: NotificationsProps; ref: HTMLDivElement; stylesNames: NotificationsStylesNames; vars: NotificationsCssVariables; staticComponents: { show: typeof notifications.show; hide: typeof notifications.hide; update: typeof notifications.update; promise: typeof notifications.promise; clean: typeof notifications.clean; cleanQueue: typeof notifications.cleanQueue; updateState: typeof notifications.updateState; }; }>;