@itwin/core-react/lib/core-react/dialog/Dialog.d.ts

A react component library of iTwin.js UI general purpose components

/** @packageDocumentation
 * @module Dialog
 */
import * as React from "react";
import type { DialogButtonDef } from "@itwin/appui-abstract";
import { Button } from "@itwin/itwinui-react";
import type { CommonProps } from "../utils/Props.js";
import "./Dialog.scss";
type ButtonProps = React.ComponentPropsWithoutRef<typeof Button>;
/** Enum for dialog alignment
 * @public
 * @deprecated in 4.12.0. Enum used in a deprecated component {@link Dialog}.
 */
export declare enum DialogAlignment {
    TopLeft = "top-left",
    Top = "top",
    TopRight = "top-right",
    Left = "left",
    Center = "center",
    Right = "right",
    BottomLeft = "bottom-left",
    Bottom = "bottom",
    BottomRight = "bottom-right"
}
/** Properties for the [[Dialog]] component
 * @public
 * @deprecated in 4.12.0. Props of deprecated component {@link Dialog}.
 */
export interface DialogProps extends Omit<React.AllHTMLAttributes<HTMLDivElement>, "title">, CommonProps {
    /** Indicates whether to show dialog or not */
    opened: boolean;
    /** Indicates whether the user can resize dialog with cursor. Default: false */
    resizable?: boolean;
    /** Indicates whether the user can move dialog with cursor. Default: false */
    movable?: boolean;
    /** Indicates whether the content should be inset. Default: true */
    inset?: boolean;
    /** Indicates whether the focus should be trapped within the dialog. Default: false */
    trapFocus?: boolean;
    /** Whether the hide the header. Default: false */
    hideHeader?: boolean;
    /** Override for the header */
    header?: React.ReactNode;
    /** Title to show in title bar of dialog */
    title?: string | React.ReactElement;
    /** Footer to show at bottom of dialog. Note: will override buttonCluster */
    footer?: string | React.ReactElement;
    /** List of DialogButtonDef objects specifying buttons and associated onClick events */
    buttonCluster?: DialogButtonDef[];
    /** Default alignment of dialog. */
    alignment?: DialogAlignment;
    /** Initial x/left position of dialog in px. */
    x?: number;
    /** Initial y/top position of dialog in px. */
    y?: number;
    /** onClick event for X button for dialog */
    onClose?: () => void;
    /** 'keyup' event for Esc key */
    onEscape?: () => void;
    /** Triggered when a click is triggered outside of this dialog. */
    onOutsideClick?: (event: MouseEvent) => any;
    /** Initial width of dialog. Displayed in px if value is a number; otherwise, displayed in specified CSS unit. Default: "50%" */
    width?: string | number;
    /** Initial height of dialog. Displayed in px if value is a number; otherwise, displayed in specified CSS unit. */
    height?: string | number;
    /** Minimum width that the dialog may be resized to. Displayed in px if value is a number; otherwise, displayed in specified CSS unit. Default: 300px */
    minWidth?: string | number;
    /** Minimum height that the dialog may be resized to. Displayed in px if value is a number; otherwise, displayed in specified CSS unit. Default: 135px */
    minHeight?: string | number;
    /** Maximum width that the dialog may be resized to. Displayed in px if value is a number; otherwise, displayed in specified CSS unit. Default: 100% */
    maxWidth?: string | number;
    /** Maximum height that the dialog may be resized to. Displayed in px if value is a number; otherwise, displayed in specified CSS unit. */
    maxHeight?: string | number;
    /** Whether to show background overlay. Default: true.
     * @note Modeless dialogs require an id and an implementation of onModelessPointerDown.
     */
    modal?: boolean;
    /** An id for a modeless dialog */
    modelessId?: string;
    /** Pointer Down event handler when modeless (modal = false) */
    onModelessPointerDown?: (event: React.PointerEvent, id: string) => void;
    /** Custom CSS Style for overlay */
    backgroundStyle?: React.CSSProperties;
    /** Custom CSS Style for title */
    titleStyle?: React.CSSProperties;
    /** Custom CSS Style for footer */
    footerStyle?: React.CSSProperties;
    /** Custom CSS class name for the content */
    contentClassName?: string;
    /** Custom CSS Style for the content */
    contentStyle?: React.CSSProperties;
}
/** Dialog React component with optional resizing and dragging functionality
 * @public
 * @deprecated in 4.12.0. Use {@link https://itwinui.bentley.com/docs/dialog iTwinUI dialog} instead.
 */
export declare class Dialog extends React.Component<DialogProps> {
    private _parentDocument;
    static defaultProps: Partial<DialogProps>;
    constructor(props: DialogProps);
    componentWillUnmount(): void;
    componentDidMount(): void;
    handleRefSet: (containerDiv: HTMLDivElement | null) => void;
    render(): React.ReactElement;
    private getCSSClassNameFromAlignment;
    /** @deprecated in 4.12.0. Use iTwinUI Button instead. */
    protected getFooterButtons(buttonCluster: DialogButtonDef[] | undefined, primaryStyleType?: ButtonProps["styleType"], noCoreButtonClasses?: boolean): React.ReactNode[] | undefined;
    private _handleKeyUp;
    protected _handleContainerPointerDown: (event: React.PointerEvent) => void;
}
export {};
//# sourceMappingURL=Dialog.d.ts.map