@octopusdeploy/design-system-components
Version:
The design systems component library.
46 lines (45 loc) • 2.33 kB
TypeScript
import type React from "react";
import { type ReactElement } from "react";
import type { ButtonBasicProps, ButtonLinkProps } from "../Button";
import type { ErrorInfo } from "../ErrorSummary";
import type { ProgressTrackerProps } from "../ProgressTracker";
import type { DialogWidthWithSidePanel } from "./dialogBreakpoints.styles";
import type { MultiStepDialogOptions, MultiStepDialogOptionsWithoutSidePanel, MultiStepNeverProps, SingleStepNeverProps } from "./dialogTypes";
export type DialogLimitedActionProps = Pick<ButtonBasicProps, "label" | "onClick" | "disabled" | "importance" | "isSubmit" | "formId"> | Pick<ButtonLinkProps, "label" | "onClick" | "href" | "external" | "importance" | "disabled">;
export type { DialogStep } from "./dialogTypes";
interface DialogCommonProps {
title: string;
open: boolean;
showDismissButton?: boolean;
onClose: () => void;
onClosed?: () => void;
errors?: ErrorInfo[];
isLoading?: boolean;
}
type DialogWithSidePanelProps = {
width: DialogWidthWithSidePanel;
sidePanel?: ReactElement;
defaultSidePanelOpen?: boolean;
};
type DialogWithoutSidePanelProps = {
width: "extraLarge";
sidePanel?: never;
defaultSidePanelOpen?: never;
};
interface SingleStepDialogContent {
primaryAction: DialogLimitedActionProps;
secondaryAction?: DialogLimitedActionProps;
children: React.ReactNode;
progressTracker?: ReactElement<ProgressTrackerProps>;
}
type SingleStepDialogProps = DialogCommonProps & MultiStepNeverProps & SingleStepDialogContent & (DialogWithSidePanelProps | DialogWithoutSidePanelProps);
type MultiStepDialogProps = DialogCommonProps & SingleStepNeverProps & ((MultiStepDialogOptions & DialogWithSidePanelProps) | (MultiStepDialogOptionsWithoutSidePanel & DialogWithoutSidePanelProps));
export type DialogProps = SingleStepDialogProps | MultiStepDialogProps;
/**
* A standard modal dialog with a title, optional dismiss button, scrollable content area,
* optional error panel, primary/secondary footer actions, optional animated side panel,
* and optional multi-step navigation.
*
* @remarks Do not implement directly in Octopus Server code. Use Workflows instead. See https://docs.octopushq.com/docs/frontend/workflows
*/
export declare function Dialog(props: DialogProps): import("react/jsx-runtime").JSX.Element;