@navinc/base-react-components
Version:
Nav's Pattern Library
190 lines (187 loc) • 13 kB
TypeScript
import MuiDialogForType, { type DialogProps as MuiDialogProps } from '@mui/material/Dialog/index.js';
import { ButtonBaseProps } from './button.js';
import { MouseEventHandler, ReactNode } from 'react';
import { IconName } from './icons/index.js';
import { StatusColor, InferComponentProps } from './types.js';
import { IconButton } from './icon-button.js';
/** @deprecated use the wayfinder dialog from @navinc/base-react-components/wayfinder instead */
export declare const DialogHeaderContainer: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components/dist/types.js").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
textAlign: DialogTextAlign;
}>> & string;
/** @deprecated use the wayfinder dialog from @navinc/base-react-components/wayfinder instead */
export declare const DialogContentContainer: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components/dist/types.js").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
textAlign: DialogTextAlign;
}>> & string;
/** @deprecated use the wayfinder dialog from @navinc/base-react-components/wayfinder instead */
export declare const DialogIconContainer: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components/dist/types.js").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
status: StatusColor;
}>> & string;
/** @deprecated use the wayfinder dialog from @navinc/base-react-components/wayfinder instead */
export declare const DialogFooterButtonContainer: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components/dist/types.js").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
direction: DialogButtonsDirection;
}>> & string;
type DialogCloseXProps = InferComponentProps<typeof IconButton> & {
$position?: 'left' | 'right';
};
/** @deprecated use the wayfinder dialog from @navinc/base-react-components/wayfinder instead */
export declare const DialogCloseX: (props: Partial<DialogCloseXProps>) => import("react/jsx-runtime").JSX.Element;
/** @deprecated use the wayfinder dialog from @navinc/base-react-components/wayfinder instead */
export declare const useCreateDialogSx: () => ({ fullWidth, noPadding, backgroundImage, backgroundColor, backgroundPosition, backgroundSize, }: {
fullWidth?: boolean;
noPadding?: boolean;
backgroundImage?: string;
backgroundColor?: string;
backgroundPosition?: string;
backgroundSize?: string;
}) => {
[x: string]: {
maxWidth?: string | undefined;
width?: string | undefined;
borderRadius: string;
boxShadow: string;
margin: string;
padding: () => string;
backgroundImage?: string | undefined;
backgroundPosition?: string | undefined;
backgroundRepeat?: string | undefined;
backgroundSize?: string | undefined;
background: string;
} | {
background: string;
};
};
type InternalDialogProps = {
'data-testid'?: string;
/** If `true` remove padding from Dialog container. */
noPadding?: boolean;
onCloseX?: false | MouseEventHandler<HTMLButtonElement>;
closeXProps?: DialogCloseXProps;
backgroundImage?: string;
backgroundColor?: string;
backgroundPosition?: string;
backgroundSize?: string;
};
export type DialogProps = MuiDialogProps & InternalDialogProps;
/**
* @deprecated use the wayfinder dialog from @navinc/base-react-components/wayfinder instead
The `<Dialog />` component is a wrapper for [Material UI's Dialog component](https://mui.com/material-ui/react-dialog/).
`<ConfirmationDialog />` is the default dialog component exported. It does not have "x" and has 2 buttons instead.
The base MUI dialog component has been exported as `BaseDialog` and both components should accept MUI Dialog props. `BaseDialog` has built in "x" and optional props for adding a custom background. The children are fully customizable.
**/
export declare const BaseDialog: ({ noPadding, "data-testid": dataTestId, fullWidth, sx, children, onCloseX, closeXProps, backgroundImage, backgroundColor, backgroundPosition, backgroundSize, ...props }: DialogProps) => import("react/jsx-runtime").JSX.Element;
type DialogButtonsDirection = 'column' | 'row-reverse';
type DialogTextAlign = 'left' | 'center';
/** @deprecated use the wayfinder dialog from @navinc/base-react-components/wayfinder instead */
export declare const DialogFooterButton: (props: ButtonBaseProps) => import("react/jsx-runtime").JSX.Element;
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'>;
/** @deprecated use the wayfinder dialog from @navinc/base-react-components/wayfinder instead */
export declare const ConfirmationDialog: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<{
/** 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">, never>> & string & Omit<({ header, content, iconName, status, primaryButtonProps, secondaryButtonProps, buttonsDirection, textAlign, ...props }: ConfirmationDialogProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
/** @deprecated use the wayfinder dialog from @navinc/base-react-components/wayfinder instead */
export declare const RawDialog: typeof MuiDialogForType;
/** @deprecated use the wayfinder dialog from @navinc/base-react-components/wayfinder instead */
export declare const useCreateWayfinderDialogSx: () => ({ width, maxWidth }?: {
width?: number | string;
maxWidth?: number | string;
}) => {
[x: string]: {
[x: string]: string | {
alignItems: string;
};
alignItems: string;
background?: undefined;
margin?: undefined;
borderRadius?: undefined;
borderTopLeftRadius?: undefined;
borderTopRightRadius?: undefined;
boxShadow?: undefined;
width?: undefined;
maxWidth?: undefined;
maxHeight?: undefined;
} | {
[x: string]: string | number | {
margin: string;
borderRadius: string;
maxHeight: string;
};
background: "#FFFFFF" | "#2C0309" | "#4F151D" | "#732A33" | "#9A414A" | "#B4656A" | "#CE888B" | "#E7ACAE" | "#FFD1D2" | "#FFF6F7" | "#D83025" | "#F28B82" | "#16140F" | "#302C1F" | "#4D462F" | "#6C623F" | "#8D7F50" | "#AF9D61" | "#D2BD73" | "#F4DD90" | "#FFFFBD" | "#F9AB00" | "#FFC74D" | "#001C0B" | "#053620" | "#1B5337" | "#3F6E54" | "#638B73" | "#87A894" | "#ACC5B5" | "#D2E4D9" | "#F8FFFC" | "#198039" | "#6FDC8D" | "#00191A" | "#003335" | "#0B4F51" | "#326B6D" | "#598889" | "#7EA5A6" | "#A5C3C3" | "#CCE2E2" | "#F4FFFF" | "#2CB3B6" | "#4CEBEB" | "#011430" | "#0E2C52" | "#224777" | "#38639C" | "#5B81B4" | "#7FA0CC" | "#A5C0E4" | "#CBE0FC" | "#F2FFFF" | "#1B72E4" | "#66A5FA" | "#140638" | "#2A1C5E" | "#433487" | "#5E4DB2" | "#7A6FC8" | "#9891DE" | "#B8B4F3" | "#D9D6FF" | "#FBFAFF" | "#705CD6" | "#938CF2" | "#121027" | "#17193D" | "#1F2651" | "#273664" | "#304777" | "#395A8A" | "#426F9C" | "#4C86AE" | "#569EC0" | "#60B7D2" | "#6AD1E3" | "#77D7E8" | "#84DDEC" | "#91E2F0" | "#9FE7F4" | "#AEECF7" | "#BDF1FA" | "#CCF5FC" | "#DCF8FD" | "#ECFCFE" | "#FDFFFF" | "#000000" | "#0E0E11" | "#111114" | "#131316" | "#1B1B1F" | "#1F1F23" | "#2A2A2D" | "#303034" | "#353438" | "#39393C" | "#3C3B3F" | "#47464A" | "#535256" | "#5F5E62" | "#78767A" | "#929094" | "#ADABAE" | "#C8C6C9" | "#DCDBDC" | "#E4E3E4" | "#EAE9EA" | "#EFEFEF" | "#F2F2F2" | "#F5F4F5" | "#FBFAFB" | "#FDFDFD" | "#0D0E15" | "#101018" | "#12131A" | "#1B1B23" | "#1F1F27" | "#292931" | "#303038" | "#34343C" | "#383841" | "#3B3B43" | "#46464F" | "#52525B" | "#5E5D67" | "#777680" | "#91909A" | "#ACAAB4" | "#C7C5D0" | "#DBD9E4" | "#E3E1EC" | "#E9E7F2" | "#EFECF8" | "#F2EFFA" | "#F5F2FD" | "#FBF8FF" | "#FFFBFF";
margin: number;
borderRadius: number;
borderTopLeftRadius: string;
borderTopRightRadius: string;
boxShadow: string;
width: string | number;
maxWidth: string | number;
maxHeight: string;
alignItems?: undefined;
} | {
background: string;
alignItems?: undefined;
margin?: undefined;
borderRadius?: undefined;
borderTopLeftRadius?: undefined;
borderTopRightRadius?: undefined;
boxShadow?: undefined;
width?: undefined;
maxWidth?: undefined;
maxHeight?: undefined;
};
};
declare const WayfinderCloseX: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<{
variation?: import("./button.js").VariationKey;
buttonAriaLabel?: string;
} & Omit<InferComponentProps<import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components/dist/types.js").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, import("./button.js").StyledButtonProps>> & string>, "size"> & Omit<InferComponentProps<import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<{
name: IconName;
size?: string;
} & import("react").SVGProps<SVGSVGElement>, never>> & string & Omit<({ name, size, ...props }: {
name: IconName;
size?: string;
} & import("react").SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element | null, keyof import("react").Component<any, {}, any>>>, "onClick"> & import("react").RefAttributes<HTMLButtonElement>, never>, never>> & string;
/** @deprecated use the wayfinder dialog from @navinc/base-react-components/wayfinder instead */
export declare const DialogWayfinderCloseButton: (props: Partial<InferComponentProps<typeof WayfinderCloseX>>) => import("react/jsx-runtime").JSX.Element;
/** @deprecated use the wayfinder dialog from @navinc/base-react-components/wayfinder instead */
export declare const DialogWayfinderHeader: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
/** @deprecated use the wayfinder dialog from @navinc/base-react-components/wayfinder instead */
export declare const DialogWayfinderHeaderText: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<{
children: string;
className?: string;
}, never>> & string & Omit<({ children, className }: {
children: string;
className?: string;
}) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
/** @deprecated use the wayfinder dialog from @navinc/base-react-components/wayfinder instead */
export declare const DialogWayfinderContent: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
export {};