@carbon/react
Version:
React components for the Carbon Design System
246 lines (245 loc) • 7.47 kB
TypeScript
/**
* Copyright IBM Corp. 2025
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
import React, { type HTMLAttributes, type RefObject } from 'react';
import { InlineLoadingStatus } from '../InlineLoading/InlineLoading';
/**
* ----------
* Dialog
* ----------
*/
interface DialogProps extends HTMLAttributes<HTMLDialogElement> {
/**
* Provide the contents of the Dialog
*/
children?: React.ReactNode;
/**
* Specify an optional className to be applied to the modal root node
*/
className?: string;
/**
* Provide a ref to return focus to once the dialog is closed.
*/
focusAfterCloseRef?: RefObject<HTMLElement | null>;
/**
* Specifies whether the dialog is modal or non-modal. This cannot be changed
* while open=true
*/
modal?: boolean;
/**
* Specify a handler for the dialog's cancel event.
* The browser fires this event when the user presses the Esc key and is cancelable.
*/
onCancel?: React.ReactEventHandler<HTMLDialogElement>;
/**
* Specify a click handler applied to the dialog.
*/
onClick?: React.ReactEventHandler<HTMLDialogElement>;
/**
* Specify a handler the dialog's close event.
* The browser fires this event after the dialog has closed.
*/
onClose?: React.ReactEventHandler<HTMLDialogElement>;
/**
* Specify a handler for closing Dialog.
* The handler should care of closing Dialog, e.g. changing `open` prop.
*/
onRequestClose?: React.ReactEventHandler<HTMLElement>;
/**
* Specify whether the Dialog is currently open
*/
open?: boolean;
/**
* Specify the role of the dialog for accessibility
* 'dialog' is the default, but 'alertdialog' can be used for important messages requiring user attention
*/
role?: '' | 'alertdialog';
/**
* Specify a label for screen readers
*/
ariaLabel?: string;
/**
* Specify the ID of an element that labels this dialog
*/
ariaLabelledBy?: string;
/**
* Specify the ID of an element that describes this dialog
*/
ariaDescribedBy?: string;
}
declare const Dialog: React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<unknown>>;
/**
* -------------
* DialogHeader
* -------------
*/
interface DialogHeaderProps extends HTMLAttributes<HTMLDivElement> {
/**
* Provide the contents to be rendered inside of this component
*/
children?: React.ReactNode;
}
declare const DialogHeader: React.ForwardRefExoticComponent<DialogHeaderProps & React.RefAttributes<HTMLDivElement>>;
/**
* ---------------
* DialogControls
* ---------------
*/
interface DialogControlsProps extends HTMLAttributes<HTMLDivElement> {
/**
* Provide the contents to be rendered inside of this component
*/
children?: React.ReactNode;
}
declare const DialogControls: React.ForwardRefExoticComponent<DialogControlsProps & React.RefAttributes<HTMLDivElement>>;
/**
* -------------------
* DialogCloseButton
* -------------------
*/
interface DialogCloseButtonProps extends HTMLAttributes<HTMLDivElement> {
/**
* Specify a click handler applied to the IconButton
*/
onClick?: React.MouseEventHandler;
}
declare const DialogCloseButton: React.ForwardRefExoticComponent<DialogCloseButtonProps & React.RefAttributes<HTMLDivElement>>;
/**
* ------------
* DialogTitle
* ------------
*/
interface DialogTitleProps extends HTMLAttributes<HTMLHeadingElement> {
/**
* Provide the contents of the DialogTitle
*/
children?: React.ReactNode;
/**
* Specify an optional className to be applied to the title node
*/
className?: string;
/**
* Specify an optional id for the title element
*/
id?: string;
}
declare const DialogTitle: React.ForwardRefExoticComponent<DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;
/**
* ---------------
* DialogSubtitle
* ---------------
*/
interface DialogSubtitleProps extends HTMLAttributes<HTMLParagraphElement> {
/**
* Provide the contents of the DialogSubtitle
*/
children?: React.ReactNode;
/**
* Specify an optional className to be applied to the subtitle node
*/
className?: string;
/**
* Specify an optional id for the subtitle element
*/
id?: string;
}
declare const DialogSubtitle: React.ForwardRefExoticComponent<DialogSubtitleProps & React.RefAttributes<HTMLParagraphElement>>;
/**
* -----------
* DialogBody
* -----------
*/
interface DialogBodyProps extends HTMLAttributes<HTMLDivElement> {
/**
* Provide the contents of the DialogBody
*/
children?: React.ReactNode;
/**
* Specify an optional className to be applied to the body node
*/
className?: string;
/**
* Specify whether the content has overflow that should be scrollable
*/
hasScrollingContent?: boolean;
}
declare const DialogBody: React.ForwardRefExoticComponent<DialogBodyProps & React.RefAttributes<HTMLDivElement>>;
/**
* -------------
* DialogFooter
* -------------
*/
interface DialogFooterProps extends HTMLAttributes<HTMLDivElement> {
/**
* Provide the contents of the DialogFooter
*/
children?: React.ReactNode;
/**
* Specify an optional className to be applied to the footer node
*/
className?: string;
/**
* Specify a handler for closing dialog (secondary button)
*/
onRequestClose?: React.ReactEventHandler<HTMLElement>;
/**
* Specify a handler for the secondary button.
* Useful if separate handler from `onRequestClose` is desirable
*/
onSecondarySubmit?: React.ReactEventHandler<HTMLElement>;
/**
* Specify a handler for submitting dialog (primary button)
*/
onRequestSubmit?: React.ReactEventHandler<HTMLElement>;
/**
* Specify the text for the primary button
*/
primaryButtonText?: React.ReactNode;
/**
* Specify whether the Button should be disabled, or not
*/
primaryButtonDisabled?: boolean;
/**
* Specify the text for the secondary button
*/
secondaryButtonText?: React.ReactNode;
/**
* Specify an array of config objects for secondary buttons
*/
secondaryButtons?: Array<{
buttonText: React.ReactNode;
onClick: React.MouseEventHandler<HTMLButtonElement>;
}>;
/**
* Specify whether the Dialog is for dangerous actions
*/
danger?: boolean;
/**
* Specify loading status
*/
loadingStatus?: InlineLoadingStatus;
/**
* Specify the description for the loading text
*/
loadingDescription?: string;
/**
* Specify the description for the loading icon
*/
loadingIconDescription?: string;
/**
* Specify an optional handler to be invoked when loading is
* successful
*/
onLoadingSuccess?: () => void;
}
declare const DialogFooter: React.ForwardRefExoticComponent<DialogFooterProps & React.RefAttributes<HTMLDivElement>>;
/**
* -------
* Exports
* -------
*/
export { Dialog, DialogHeader, DialogControls, DialogCloseButton, DialogTitle, DialogSubtitle, DialogBody, DialogFooter, };
export type { DialogProps, DialogHeaderProps, DialogControlsProps, DialogCloseButtonProps, DialogTitleProps, DialogSubtitleProps, DialogBodyProps, DialogFooterProps, };