@progress/kendo-react-notification/index.d.ts

React Notification renders a message to the user with information about the status of an app process. KendoReact Notification package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { default as default_2 } from 'prop-types';
import { JSX } from 'react/jsx-runtime';
import * as React_2 from 'react';

/**
 * Represents the [KendoReact Notification component]({% slug overview_notification %}).
 */
declare class Notification_2 extends React_2.Component<NotificationProps> {
    /**
     * @hidden
     */
    static propTypes: {
        className: default_2.Requireable<string>;
        closable: default_2.Requireable<NonNullable<boolean | object | null | undefined>>;
        dir: default_2.Requireable<string>;
        style: default_2.Requireable<object>;
        type: default_2.Requireable<default_2.InferProps<{
            style: default_2.Requireable<string>;
            icon: default_2.Requireable<boolean>;
        }>>;
        onClose: default_2.Requireable<(...args: any[]) => any>;
    };
    /**
     * @hidden
     */
    static defaultProps: {
        closable: boolean;
        type: {
            style: string;
            icon: boolean;
        };
    };
    /**
     * @hidden
     */
    render(): JSX.Element;
}
export { Notification_2 as Notification }

/**
 * The `close` event object of the Notification.
 */
export declare interface NotificationEvent {
    /**
     * A native DOM event.
     */
    nativeEvent: Event;
    /**
     * A React [`SyntheticEvent`](https://react.dev/learn/responding-to-events).
     */
    syntheticEvent: React_2.SyntheticEvent<HTMLElement>;
    /**
     * An event target.
     */
    target: Notification_2;
}

/**
 * Represents the [KendoReact NotificationGroup component]({% slug api_notification_notificationgroup %}).
 */
export declare class NotificationGroup extends React_2.Component<NotificationGroupProps> {
    /**
     * @hidden
     */
    static propTypes: {
        className: default_2.Requireable<string>;
        style: default_2.Requireable<object>;
    };
    /**
     * @hidden
     */
    render(): JSX.Element;
}

/**
 * Represents the props of the [KendoReact NotificationGroup component]({% slug api_notification_notificationgroup %}).
 */
export declare interface NotificationGroupProps {
    /**
     * @hidden
     */
    children?: React_2.ReactNode;
    /**
     * Sets additional classes to the NotificationGroup.
     *
     * @example
     * ```jsx
     * <NotificationGroup className="custom-class" />
     * ```
     */
    className?: string;
    /**
     * The styles that are applied to the NotificationGroup.
     *
     * @example
     * ```jsx
     * <NotificationGroup style={{ backgroundColor: 'lightgray' }} />
     * ```
     */
    style?: React_2.CSSProperties;
}

/**
 * Represents the props of the [KendoReact Notification component]({% slug overview_notification %}).
 */
export declare interface NotificationProps {
    /**
     * @hidden
     */
    children?: React_2.ReactNode;
    /**
     * Sets additional classes to the Notification.
     *
     * @example
     * ```jsx
     * <Notification className="custom-class" />
     * ```
     */
    className?: string;
    /**
     * Sets if the Notification requires a user action to hide.
     * If the property is set to `true`, the Notification renders a **Close** button.
     * If the property is set to an object, the Notification renders a **Close** button
     * by extending the default props with the provided object.
     *
     * @default false
     *
     * @example
     * ```jsx
     * <Notification closable={true} />
     * <Notification closable={{ title: 'Dismiss' }} />
     * ```
     *
     * The possible values are:
     * * `false`
     * * `true`
     * * `{ title: 'Hide', ... }`
     */
    closable?: boolean | React_2.DetailedHTMLProps<React_2.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
    /**
     * Sets the `dir` HTML attribute, which determines the text direction.
     *
     * @example
     * ```jsx
     * <Notification dir="rtl" />
     * ```
     */
    dir?: string;
    /**
     * The styles that are applied to the Notification.
     *
     * @example
     * ```jsx
     * <Notification style={{ backgroundColor: 'lightblue' }} />
     * ```
     */
    style?: React_2.CSSProperties;
    /**
     * Sets the Notification type, which determines its style and icon.
     *
     * @example
     * ```jsx
     * <Notification type={{ style: 'success', icon: true }} />
     * ```
     *
     * The possible values are:
     * * `style: 'none'|'success'|'error'|'warning'|'info'`. The default is `'none'`.
     * * `icon?: 'true'|'false'`. The default is `true`.
     */
    type?: {
        style?: 'base' | 'secondary' | 'success' | 'error' | 'light' | 'inverse' | 'primary' | 'tertiary' | 'warning' | 'info' | 'dark' | 'none';
        icon?: boolean;
    };
    /**
     * Fires when you click the **Close** button.
     *
     * @example
     * ```jsx
     * <Notification onClose={(event) => console.log('Notification closed', event)} />
     * ```
     */
    onClose?: (event: NotificationEvent) => void;
}

export { }