Dup

web/packages/base/components/MiniDialog.tsx

@@ -227,6 +227,75 @@ export function MiniDialog({
 //     }
 // }
 
+export interface DialogBoxV2Attributes {
+    icon?: React.ReactNode;
+    /**
+     * The dialog's title.
+     *
+     * Usually this will be a string, but it can be any {@link ReactNode}. Note
+     * that it always gets wrapped in a Typography element to set the font
+     * style, so if your ReactNode wants to do its own thing, it'll need to
+     * reset or override these customizations.
+     */
+    title?: React.ReactNode;
+    staticBackdrop?: boolean;
+    nonClosable?: boolean;
+    /**
+     * The dialog's content.
+     */
+    content?: React.ReactNode;
+    /**
+     * Customize the cancel (dismiss) action button offered by the dialog box.
+     *
+     * Usually dialog boxes should have a cancel action, but this can be skipped
+     * to only show one of the other types of buttons.
+     */
+    close?: {
+        /** The string to use as the label for the cancel button. */
+        text?: string;
+        /** The color of the button. */
+        variant?: ButtonProps["color"];
+        /**
+         * The function to call when the user cancels.
+         *
+         * If provided, this callback is invoked before closing the dialog.
+         */
+        action?: () => void;
+    };
+    /**
+     * Customize the primary action button offered by the dialog box.
+     */
+    proceed?: {
+        /** The string to use as the label for the primary action. */
+        text: string;
+        /**
+         * The function to call when the user presses the primary action button.
+         *
+         * It is passed a {@link setLoading} function that can be used to show
+         * or hide loading indicator or the primary action button.
+         */
+        action:
+            | (() => void | Promise<void>)
+            | ((setLoading: (value: boolean) => void) => void | Promise<void>);
+        variant?: ButtonProps["color"];
+        disabled?: boolean;
+    };
+    secondary?: {
+        text: string;
+        action: () => void;
+        variant?: ButtonProps["color"];
+        disabled?: boolean;
+    };
+    buttonDirection?: "row" | "column";
+}
+
+type DialogBoxV2Props = React.PropsWithChildren<
+    Omit<DialogProps, "onClose"> & {
+        onClose: () => void;
+        attributes?: DialogBoxV2Attributes;
+    }
+>;
+
 /**
  * TODO This is a duplicate of MiniDialog. This is for use by call sites that
  * were using the MiniDialog not as a dialog but as a base container. Such use
@@ -240,7 +309,7 @@ export function DialogBoxV2({
     open,
     onClose,
     ...props
-}: MiniDialogProps) {
+}: DialogBoxV2Props) {
     const [loading, setLoading] = useState(false);
     if (!attributes) {
         return <></>;