carbon-react
Version:
A library of reusable React components for easily building user interfaces.
94 lines (93 loc) • 4.26 kB
TypeScript
import React, { RefObject } from "react";
import { DialogSizes } from "./dialog.config";
import { ModalProps } from "../../__internal__/modal";
import { TagProps } from "../../__internal__/utils/helpers/tags";
type PaddingValues = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
export interface ContentPaddingInterface {
p?: PaddingValues;
py?: PaddingValues;
px?: PaddingValues;
}
export interface DialogProps extends ModalProps, TagProps {
/** Prop to specify the aria-describedby property of the Dialog component */
"aria-describedby"?: string;
/**
* Prop to specify the aria-label of the Dialog component.
* To be used only when the title prop is not defined, and the component is not labelled by any internal element.
*/
"aria-label"?: string;
/**
* Prop to specify the aria-labelledby property of the Dialog component
* To be used when the title prop is a custom React Node,
* or the component is labelled by an internal element other than the title.
*/
"aria-labelledby"?: string;
/**
* Function to replace focus trap
* @ignore
* @private
*/
bespokeFocusTrap?: (ev: KeyboardEvent, firstElement?: HTMLElement, lastElement?: HTMLElement) => void;
/** Child elements */
children?: React.ReactNode;
/**
* @private
* @ignore
* @internal
* Sets className for component. INTERNAL USE ONLY. */
className?: string;
/** Data tag prop bag for close Button */
closeButtonDataProps?: Pick<TagProps, "data-role" | "data-element">;
/** Padding to be set on the Dialog content */
contentPadding?: ContentPaddingInterface;
/** Reference to the scrollable content element */
contentRef?: React.ForwardedRef<HTMLDivElement>;
/** @private @internal @ignore */
"data-component"?: string;
disableAutoFocus?: boolean;
/** @deprecated Determines if the Dialog can be closed */
disableClose?: boolean;
/**
* [Legacy] Flag to remove padding from content.
* @deprecated Use `contentPadding` instead.
*/
disableContentPadding?: boolean;
disableFocusTrap?: boolean;
/** an optional array of refs to containers whose content should also be reachable by tabbing from the dialog */
focusableContainers?: RefObject<HTMLElement>[];
/** Optional selector to identify the focusable elements, if not provided a default selector is used */
focusableSelectors?: string;
/** Optional reference to an element meant to be focused on open */
focusFirstElement?: RefObject<HTMLElement> | HTMLElement | null;
/** Whether the dialog is full-screen */
fullscreen?: boolean;
/** Change the background color of the content to grey */
greyBackground?: boolean;
/** Container for components to be displayed in the header */
headerChildren?: React.ReactNode;
/** Allows developers to specify a specific height for the dialog. */
height?: string;
/** Adds Help tooltip to Header */
help?: string;
highlightVariant?: string;
/** A custom close event handler */
onCancel?: (ev: React.KeyboardEvent<HTMLElement> | KeyboardEvent | React.MouseEvent<HTMLButtonElement>) => void;
/** @deprecated For legacy styling when used with Pages component. Do not use this unless using Pages within a full-screen Dialog */
pagesStyling?: boolean;
/** The ARIA role to be applied to the Dialog container */
role?: string;
/** Determines if the close icon is shown */
showCloseIcon?: boolean;
/** Size of dialog, default size is 750px */
size?: DialogSizes;
/** Subtitle displayed at top of dialog. Its consumers' responsibility to set a suitable accessible name/description for the Dialog if they pass a node to subtitle prop. */
subtitle?: React.ReactNode;
/** Title displayed at top of dialog. Its consumers' responsibility to set a suitable accessible name/description for the Dialog if they pass a node to title prop. */
title?: React.ReactNode;
}
export type DialogHandle = {
/** Programmatically focus on root container of Dialog. */
focus: () => void;
} | null;
export declare const Dialog: React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<DialogHandle>>;
export default Dialog;