@mskcc/carbon-react
Version:
Carbon react components for the MSKCC DSM
489 lines (488 loc) • 17.1 kB
TypeScript
/**
* MSKCC DSM 2021, 2023
*/
import PropTypes from 'prop-types';
import { type ReactNode, type MouseEvent, type ButtonHTMLAttributes, type HTMLAttributes } from 'react';
import { type ButtonProps } from '../Button';
export interface NotificationActionButtonProps extends ButtonProps<'button'> {
/**
* Specify the content of the notification action button.
*/
children?: ReactNode;
/**
* Specify an optional className to be applied to the notification action button
*/
className?: string;
/**
* Specify if the visual treatment of the button should be for an inline notification
*/
inline?: boolean;
/**
* Optionally specify a click handler for the notification action button.
*/
onClick?(): void;
}
export declare function NotificationActionButton({ children, className: customClassName, onClick, ...rest }: NotificationActionButtonProps): JSX.Element;
export declare namespace NotificationActionButton {
var propTypes: {
/**
* Specify the content of the notification action button.
*/
children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
/**
* Specify an optional className to be applied to the notification action button
*/
className: PropTypes.Requireable<string>;
/**
* Specify if the visual treatment of the button should be for an inline notification
*/
inline: PropTypes.Requireable<boolean>;
/**
* Optionally specify a click handler for the notification action button.
*/
onClick: PropTypes.Requireable<(...args: any[]) => any>;
};
}
/**
* NotificationButton
* ==================
*/
export interface NotificationButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
/**
* Specify an optional icon for the Button through a string,
* if provided. However, regular "close" icon is preferred.
*/
name?: string;
/**
* Specify the notification type
*/
notificationType?: 'toast' | 'inline' | 'actionable';
}
export declare function NotificationButton({ 'aria-label': ariaLabel, ariaLabel: deprecatedAriaLabel, className, type, name, notificationType, ...rest }: NotificationButtonProps): JSX.Element;
export declare namespace NotificationButton {
var propTypes: {
/**
* Specify a label to be read by screen readers on the container node
*/
"aria-label": PropTypes.Requireable<string>;
/**
* Deprecated, please use `aria-label` instead.
* Specify a label to be read by screen readers on the container note.
*/
ariaLabel: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
/**
* Specify an optional className to be applied to the notification button
*/
className: PropTypes.Requireable<string>;
/**
* Specify an optional icon for the Button through a string,
* if something but regular "close" icon is desirable
*/
name: PropTypes.Requireable<string>;
/**
* Specify the notification type
*/
notificationType: PropTypes.Requireable<string>;
/**
* Optional prop to specify the type of the Button
*/
type: PropTypes.Requireable<string>;
};
}
/**
* NotificationIcon
* ================
*/
export interface NotificationIconProps {
iconDescription: string;
kind: 'error' | 'success' | 'warning' | 'info';
notificationType: 'inline' | 'toast';
}
/**
* ToastNotification
* =================
*/
export interface ToastNotificationProps extends HTMLAttributes<HTMLDivElement> {
/**
* Provide a description for "close" icon button that can be read by screen readers
*/
'aria-label'?: string;
/**
* Specify the caption
*/
caption?: string;
/**
* Specify the content
*/
children?: ReactNode;
/**
* Specify an optional className to be applied to the notification box
*/
className?: string;
/**
* Specify the close button should be disabled, or not
*/
hideCloseButton?: boolean;
/**
* Specify what state the notification represents
*/
kind: 'error' | 'info' | 'success' | 'warning';
/**
* Specify whether you are using the low contrast variant of the ToastNotification.
*/
lowContrast?: boolean;
/**
* Provide a function that is called when menu is closed
*/
onClose?(event: MouseEvent): boolean | void;
/**
* Provide a function that is called when the close button is clicked
*/
onCloseButtonClick(event: MouseEvent): void;
/**
* By default, this value is "status". You can also provide an alternate
* role if it makes sense from the accessibility-side
*/
role?: 'alert' | 'log' | 'status';
/**
* Provide a description for "status" icon that can be read by screen readers
*/
statusIconDescription?: string;
/**
* Specify the subtitle
*/
subtitle?: string;
/**
* Specify an optional duration the notification should be closed in
*/
timeout?: number;
/**
* Specify the title
*/
title?: string;
}
export declare function ToastNotification({ ['aria-label']: ariaLabel, ariaLabel: deprecatedAriaLabel, role, onClose, onCloseButtonClick, statusIconDescription, className, children, kind, lowContrast, hideCloseButton, timeout, title, caption, subtitle, ...rest }: ToastNotificationProps): JSX.Element | null;
export declare namespace ToastNotification {
var propTypes: {
/**
* Provide a description for "close" icon button that can be read by screen readers
*/
"aria-label": PropTypes.Requireable<string>;
/**
* Deprecated, please use `aria-label` instead.
* Provide a description for "close" icon button that can be read by screen readers
*/
ariaLabel: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
/**
* Specify the caption
*/
caption: PropTypes.Requireable<string>;
/**
* Specify the content
*/
children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
/**
* Specify an optional className to be applied to the notification box
*/
className: PropTypes.Requireable<string>;
/**
* Specify the close button should be disabled, or not
*/
hideCloseButton: PropTypes.Requireable<boolean>;
/**
* Specify what state the notification represents
*/
kind: PropTypes.Requireable<string>;
/**
* Specify whether you are using the low contrast variant of the ToastNotification.
*/
lowContrast: PropTypes.Requireable<boolean>;
/**
* Provide a function that is called when menu is closed
*/
onClose: PropTypes.Requireable<(...args: any[]) => any>;
/**
* Provide a function that is called when the close button is clicked
*/
onCloseButtonClick: PropTypes.Requireable<(...args: any[]) => any>;
/**
* By default, this value is "status". You can also provide an alternate
* role if it makes sense from the accessibility-side
*/
role: PropTypes.Requireable<string>;
/**
* Provide a description for "status" icon that can be read by screen readers
*/
statusIconDescription: PropTypes.Requireable<string>;
/**
* Specify the subtitle
*/
subtitle: PropTypes.Requireable<string>;
/**
* Specify an optional duration the notification should be closed in
*/
timeout: PropTypes.Requireable<number>;
/**
* Specify the title
*/
title: PropTypes.Requireable<string>;
};
}
/**
* InlineNotification
* ==================
*/
export interface InlineNotificationProps extends HTMLAttributes<HTMLDivElement> {
/**
* Provide a description for "close" icon button that can be read by screen readers
*/
'aria-label'?: string;
/**
* Specify the content
*/
children?: ReactNode;
/**
* Specify an optional className to be applied to the notification box
*/
className?: string;
/**
* Specify the close button should be disabled, or not
*/
hideCloseButton?: boolean;
/**
* Specify what state the notification represents
*/
kind: 'error' | 'info' | 'success' | 'warning';
/**
* Specify whether you are using the low contrast variant of the InlineNotification.
*/
lowContrast?: boolean;
/**
* Provide a function that is called when menu is closed
*/
onClose?(event: MouseEvent): boolean | void;
/**
* Provide a function that is called when the close button is clicked
*/
onCloseButtonClick(event: MouseEvent): void;
/**
* By default, this value is "status". You can also provide an alternate
* role if it makes sense from the accessibility-side.
*/
role?: 'alert' | 'log' | 'status';
/**
* Provide a description for "status" icon that can be read by screen readers
*/
statusIconDescription?: string;
/**
* Specify the subtitle
*/
subtitle?: string;
/**
* Specify the title
*/
title?: string;
}
export declare function InlineNotification({ ['aria-label']: ariaLabel, children, title, subtitle, role, onClose, onCloseButtonClick, statusIconDescription, className, kind, lowContrast, hideCloseButton, ...rest }: InlineNotificationProps): JSX.Element | null;
export declare namespace InlineNotification {
var propTypes: {
/**
* Provide a description for "close" icon button that can be read by screen readers
*/
"aria-label": PropTypes.Requireable<string>;
/**
* Specify the content
*/
children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
/**
* Specify an optional className to be applied to the notification box
*/
className: PropTypes.Requireable<string>;
/**
* Specify the close button should be disabled, or not
*/
hideCloseButton: PropTypes.Requireable<boolean>;
/**
* Specify what state the notification represents
*/
kind: PropTypes.Requireable<string>;
/**
* Specify whether you are using the low contrast variant of the InlineNotification.
*/
lowContrast: PropTypes.Requireable<boolean>;
/**
* Provide a function that is called when menu is closed
*/
onClose: PropTypes.Requireable<(...args: any[]) => any>;
/**
* Provide a function that is called when the close button is clicked
*/
onCloseButtonClick: PropTypes.Requireable<(...args: any[]) => any>;
/**
* By default, this value is "status". You can also provide an alternate
* role if it makes sense from the accessibility-side.
*/
role: PropTypes.Requireable<string>;
/**
* Provide a description for "status" icon that can be read by screen readers
*/
statusIconDescription: PropTypes.Requireable<string>;
/**
* Specify the subtitle
*/
subtitle: PropTypes.Requireable<string>;
/**
* Specify the title
*/
title: PropTypes.Requireable<string>;
};
}
/**
* ActionableNotification
* ======================
*/
export interface ActionableNotificationProps extends HTMLAttributes<HTMLDivElement> {
/**
* Pass in the action button label that will be rendered within the ActionableNotification.
*/
actionButtonLabel?: string;
/**
* Provide a description for "close" icon button that can be read by screen readers
*/
'aria-label'?: string;
/**
* Specify the content
*/
children?: ReactNode;
/**
* Specify an optional className to be applied to the notification box
*/
className?: string;
/**
* Specify if pressing the escape key should close notifications
*/
closeOnEscape?: boolean;
/**
* Specify if focus should be moved to the component when the notification contains actions
*/
hasFocus?: boolean;
/**
* Specify the close button should be disabled, or not
*/
hideCloseButton?: boolean;
inline?: boolean;
/**
* Specify what state the notification represents
*/
kind: 'error' | 'info' | 'success' | 'warning';
/**
* Specify whether you are using the low contrast variant of the ActionableNotification.
*/
lowContrast?: boolean;
/**
* Provide a function that is called when the action is clicked
*/
onActionButtonClick?(): void;
/**
* Provide a function that is called when menu is closed.
* Default behavior of hiding the notification is prevented if this function returns false.
*/
onClose?(event: MouseEvent): boolean | void;
/**
* Provide a function that is called when the close button is clicked
*/
onCloseButtonClick(event: MouseEvent): void;
/**
* By default, this value is "alertdialog". You can also provide an alternate
* role if it makes sense from from an accessibility perspective.
*/
role?: string;
/**
* Provide a description for "status" icon that can be read by screen readers
*/
statusIconDescription?: string;
/**
* Specify the subtitle
*/
subtitle?: ReactNode;
/**
* Specify the title
*/
title?: string;
}
export declare function ActionableNotification({ actionButtonLabel, ['aria-label']: ariaLabel, ariaLabel: deprecatedAriaLabel, children, role, onActionButtonClick, onClose, onCloseButtonClick, statusIconDescription, className, inline, kind, lowContrast, hideCloseButton, hasFocus, closeOnEscape, title, subtitle, ...rest }: ActionableNotificationProps): JSX.Element | null;
export declare namespace ActionableNotification {
var propTypes: {
/**
* Pass in the action button label that will be rendered within the ActionableNotification.
*/
actionButtonLabel: PropTypes.Requireable<string>;
/**
* Provide a description for "close" icon button that can be read by screen readers
*/
"aria-label": PropTypes.Requireable<string>;
/**
* Deprecated, please use `aria-label` instead.
* Provide a description for "close" icon button that can be read by screen readers
*/
ariaLabel: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
/**
* Specify the content
*/
children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
/**
* Specify an optional className to be applied to the notification box
*/
className: PropTypes.Requireable<string>;
/**
* Specify if pressing the escape key should close notifications
*/
closeOnEscape: PropTypes.Requireable<boolean>;
/**
* Specify if focus should be moved to the component when the notification contains actions
*/
hasFocus: PropTypes.Requireable<boolean>;
/**
* Specify the close button should be disabled, or not
*/
hideCloseButton: PropTypes.Requireable<boolean>;
inline: PropTypes.Requireable<boolean>;
/**
* Specify what state the notification represents
*/
kind: PropTypes.Validator<string>;
/**
* Specify whether you are using the low contrast variant of the ActionableNotification.
*/
lowContrast: PropTypes.Requireable<boolean>;
/**
* Provide a function that is called when the action is clicked
*/
onActionButtonClick: PropTypes.Requireable<(...args: any[]) => any>;
/**
* Provide a function that is called when menu is closed
*/
onClose: PropTypes.Requireable<(...args: any[]) => any>;
/**
* Provide a function that is called when the close button is clicked
*/
onCloseButtonClick: PropTypes.Requireable<(...args: any[]) => any>;
/**
* By default, this value is "alertdialog". You can also provide an alternate
* role if it makes sense from the accessibility-side.
*/
role: PropTypes.Requireable<string>;
/**
* Provide a description for "status" icon that can be read by screen readers
*/
statusIconDescription: PropTypes.Requireable<string>;
/**
* Specify the subtitle
*/
subtitle: PropTypes.Requireable<PropTypes.ReactNodeLike>;
/**
* Specify the title
*/
title: PropTypes.Requireable<string>;
};
}