feat(Dialog): add useDialogContainer hook

Author: tenphi

src/components/overlays/Dialog/DialogForm.tsx

@@ -85,7 +85,10 @@ export function DialogForm<T extends FieldTypes = FieldTypes>(
     onDismiss?.();
 
     if (!preserve) {
-      form?.resetFields();
+      // let animations finish before resetting the form
+      setTimeout(() => {
+        form?.resetFields();
+      }, 250);
     }
   }
 

src/components/overlays/Dialog/dialog-container.tsx

@@ -1,9 +1,23 @@
-import React, { useState, useMemo } from 'react';
+import React, { useState, useMemo, ReactElement } from 'react';
 
 import { useEvent } from '../../../_internal/index';
 
 import { DialogContainer } from './DialogContainer';
 
+// Overload for dialogs that expect no props
+export function useDialogContainer(Component: React.ComponentType<{}>): {
+  open: () => void;
+  close: () => void;
+  rendered: ReactElement | null;
+};
+
+// Overload for dialogs that require props
+export function useDialogContainer<P>(Component: React.ComponentType<P>): {
+  open: (props: P) => void;
+  close: () => void;
+  rendered: ReactElement | null;
+};
+
 /**
  * Generic hook to manage a dialog component.
  *
@@ -16,7 +30,7 @@ export function useDialogContainer<P>(Component: React.ComponentType<P>) {
 
   // 'open' accepts props required by the Component and opens the dialog
   const open = useEvent((props: P) => {
-    setComponentProps(props);
+    setComponentProps(props === undefined ? ({} as P) : props);
     setIsOpen(true);
   });