@navinc/base-react-components/cjs/dialog.d.ts

Nav's Pattern Library

import { DialogProps as MuiDialogProps } from '@mui/material/Dialog';
import { ButtonBaseProps } from './button';
import { ReactNode } from 'react';
import { IconName } from './icons';
import { StatusColor } from './theme';
import { IconButton } from './icon-button';
import { InferComponentProps } from './types';
export declare const DialogIconContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
    status: StatusColor;
}, never>;
type CloseXProps = InferComponentProps<typeof IconButton> & {
    $position?: 'left' | 'right';
};
type InternalDialogProps = {
    'data-testid'?: string;
    /** If `true` remove padding from Dialog container. */
    noPadding?: boolean;
    onCloseX?: false | ((e: any) => void);
    closeXProps?: CloseXProps;
    backgroundImage?: string;
    backgroundColor?: string;
    backgroundPosition?: string;
    backgroundSize?: string;
};
export type DialogProps = MuiDialogProps & InternalDialogProps;
export declare const BaseDialog: ({ noPadding, "data-testid": dataTestId, fullWidth, sx, children, onCloseX, closeXProps, backgroundImage, backgroundColor, backgroundPosition, backgroundSize, ...props }: DialogProps) => JSX.Element;
type DialogButtonsDirection = 'column' | 'row-reverse';
type DialogTextAlign = 'left' | 'center';
export type ConfirmationDialogProps = {
    /** Text shown in dialog header. */
    header: string;
    /** Slotted dialog content. */
    content: ReactNode;
    /** Props passed to primary button. It is recommended to have at least `children` and `onClick`. */
    primaryButtonProps: ButtonBaseProps;
    /** Props passed to secondary button. It is recommended to have at least `children` and `onClick`. */
    secondaryButtonProps: ButtonBaseProps;
    /** Sets the icon `color` and `background-color` styles. */
    status?: StatusColor;
    /** Name of the icon. */
    iconName?: IconName;
    /** Controls the header and content text alignment. */
    textAlign?: DialogTextAlign;
    /** Defines the `flex-direction` style property of button container. Buttons will always be stacked in a `column` on mobile. */
    buttonsDirection?: DialogButtonsDirection;
} & Omit<DialogProps, 'children'>;
export declare const ConfirmationDialog: import("styled-components").StyledComponent<({ header, content, iconName, status, primaryButtonProps, secondaryButtonProps, buttonsDirection, textAlign, ...props }: ConfirmationDialogProps) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
export {};