feat(dialog): additional props for rendering children at the top and …

…bottom of dialog

README.md

@@ -144,6 +144,14 @@ export type AuthDialogProps = PropsWithChildren<{
    * Defaults to `xs`.
    */
   breakpoint?: Breakpoint,
+  /**
+   * Content to render at the bottom of the dialog.
+   */
+  childrenBottom?: React.ReactNode;
+  /**
+   * Content to render at the top of the dialog. Alias for `children` to keep backwards compatibility.
+   */
+  childrenTop?: React.ReactNode;
   /**
    * Disable autofocus of email field.
    */

src/AuthDialog.tsx

@@ -151,6 +151,14 @@ export type AuthDialogProps = PropsWithChildren<{
    * Defaults to `xs`.
    */
   breakpoint?: Breakpoint,
+  /**
+   * Content to render at the bottom of the dialog.
+   */
+  childrenBottom?: React.ReactNode;
+  /**
+   * Content to render at the top of the dialog. Alias for `children` to keep backwards compatibility.
+   */
+  childrenTop?: React.ReactNode;
   /**
    * Disable autofocus of email field.
    */
@@ -310,7 +318,7 @@ export function AuthDialog(props: AuthDialogProps) {
               {props.error || props.DialogContentProps?.children}
             </DialogContentText>
             <Stack spacing={2}>
-              {props.children}
+              {props.children || props.childrenTop}
               {(emailProviderConfig || props.alwaysShowEmailField) && (
                 <EmailField
                   onSubmitEmail={handleSubmitEmail}
@@ -369,6 +377,7 @@ export function AuthDialog(props: AuthDialogProps) {
                     </Typography>
                   </Button>
                 ))}
+              {props.childrenBottom}
             </Stack>
           </>
         )}

src/stories/NextAuthDialog.stories.tsx

@@ -70,11 +70,16 @@ Custom.args = {
   children: (
     <>
       <Typography>
-        Some custom fields
+        Some custom fields at the top
       </Typography>
       <TextField type="text" placeholder="Email" fullWidth />
       <TextField type="password" placeholder="Password" fullWidth />
     </>),
+  childrenBottom: (
+    <Typography>
+      Some custom fields at the bottom
+    </Typography>
+  ),
 };
 
 Custom.parameters = {