From 232853068ab9ec95cd123ccf378b044ad7861ba1 Mon Sep 17 00:00:00 2001
From: ShumRain <shumrainchen@gmail.com>
Date: Wed, 16 Mar 2022 02:13:50 +0800
Subject: [PATCH] feat(modal): add onCloseComplete prop to Modal (#5402)

* feat(modal): add onCloseComplete prop to Modal

* chore: add changeset

* chore: update changeset

Co-authored-by: Tim Kolberger <tim@kolberger.eu>
---
 .changeset/twenty-plants-burn.md | 5 +++++
 packages/modal/src/modal.tsx     | 7 ++++++-
 2 files changed, 11 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/twenty-plants-burn.md

diff --git a/.changeset/twenty-plants-burn.md b/.changeset/twenty-plants-burn.md
new file mode 100644
index 00000000000..26180401d1d
--- /dev/null
+++ b/.changeset/twenty-plants-burn.md
@@ -0,0 +1,5 @@
+---
+"@chakra-ui/modal": minor
+---
+
+Add `onCloseComplete` prop to Modal which is called when all DOM nodes of the `Modal` are removed.
diff --git a/packages/modal/src/modal.tsx b/packages/modal/src/modal.tsx
index 45d4e308ff2..5b432d8de5f 100644
--- a/packages/modal/src/modal.tsx
+++ b/packages/modal/src/modal.tsx
@@ -115,6 +115,10 @@ export interface ModalProps
    * The transition that should be used for the modal
    */
   motionPreset?: MotionPreset
+  /**
+   * Fires when all exiting nodes have completed animating out
+   */
+  onCloseComplete?: () => void
 }
 
 interface ModalContext extends ModalOptions, UseModalReturn {
@@ -153,6 +157,7 @@ export const Modal: React.FC<ModalProps> = (props) => {
     preserveScrollBarGap,
     motionPreset,
     lockFocusAcrossFrames,
+    onCloseComplete,
   } = props
 
   const styles = useMultiStyleConfig("Modal", props)
@@ -175,7 +180,7 @@ export const Modal: React.FC<ModalProps> = (props) => {
   return (
     <ModalContextProvider value={context}>
       <StylesProvider value={styles}>
-        <AnimatePresence>
+        <AnimatePresence onExitComplete={onCloseComplete}>
           {context.isOpen && <Portal {...portalProps}>{children}</Portal>}
         </AnimatePresence>
       </StylesProvider>