@butternutbox/pawprint-native 1.5.1 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@butternutbox/pawprint-native",
-  "version": "1.5.1",
+  "version": "1.6.0",
   "type": "module",
   "description": "ButternutBox Pawprint Design System - React Native Components",
   "main": "./dist/index.cjs",

package/src/components/molecules/Drawer/Drawer.test.tsx

@@ -6,12 +6,18 @@ import { Drawer } from "./Drawer"
 
 const BasicDrawer = ({
   open,
-  onOpenChange
+  onOpenChange,
+  onExitComplete
 }: {
   open?: boolean
   onOpenChange?: (v: boolean) => void
+  onExitComplete?: () => void
 }) => (
-  <Drawer.Root open={open} onOpenChange={onOpenChange}>
+  <Drawer.Root
+    open={open}
+    onOpenChange={onOpenChange}
+    onExitComplete={onExitComplete}
+  >
     <Drawer.Trigger>
       <button>Open</button>
     </Drawer.Trigger>
@@ -77,6 +83,47 @@ describe("Drawer", () => {
     })
   })
 
+  describe("onExitComplete", () => {
+    it("is not called while the drawer has never closed", () => {
+      const onExitComplete = vi.fn()
+      const { rerender } = renderWithTheme(
+        <BasicDrawer open={false} onExitComplete={onExitComplete} />
+      )
+      rerender(<BasicDrawer open onExitComplete={onExitComplete} />)
+      expect(onExitComplete).not.toHaveBeenCalled()
+    })
+
+    it("is called once the drawer has closed and its content is removed", () => {
+      const onExitComplete = vi.fn(() => {
+        expect(screen.queryByText("Drawer title")).not.toBeInTheDocument()
+      })
+      const { rerender } = renderWithTheme(
+        <BasicDrawer open onExitComplete={onExitComplete} />
+      )
+      rerender(<BasicDrawer open={false} onExitComplete={onExitComplete} />)
+      expect(onExitComplete).toHaveBeenCalledTimes(1)
+    })
+
+    it("is called once per close", () => {
+      const onExitComplete = vi.fn()
+      const { rerender } = renderWithTheme(
+        <BasicDrawer open onExitComplete={onExitComplete} />
+      )
+      rerender(<BasicDrawer open={false} onExitComplete={onExitComplete} />)
+      rerender(<BasicDrawer open onExitComplete={onExitComplete} />)
+      rerender(<BasicDrawer open={false} onExitComplete={onExitComplete} />)
+      expect(onExitComplete).toHaveBeenCalledTimes(2)
+    })
+
+    it("is called when an uncontrolled drawer is closed", () => {
+      const onExitComplete = vi.fn()
+      renderWithTheme(<BasicDrawer onExitComplete={onExitComplete} />)
+      fireEvent.click(screen.getByText("Open"))
+      fireEvent.click(screen.getByLabelText("Close"))
+      expect(onExitComplete).toHaveBeenCalledTimes(1)
+    })
+  })
+
   describe("controlled mode", () => {
     it("respects controlled open=true", () => {
       renderWithTheme(<BasicDrawer open />)

package/src/components/molecules/Drawer/Drawer.tsx

@@ -19,6 +19,14 @@ type DrawerRootOwnProps = {
   open?: boolean
   defaultOpen?: boolean
   onOpenChange?: (open: boolean) => void
+  /**
+   * Called once the drawer has fully closed: the exit animation has finished
+   * and the native `Modal` has been removed. Use it to chain work that can't
+   * overlap the drawer, such as opening another modal drawer (iOS won't present
+   * a second `Modal` while the first is still on screen) or unmounting the
+   * drawer's host.
+   */
+  onExitComplete?: () => void
   /**
    * Whether the drawer shows a dimming backdrop and presents as a blocking
    * modal (default `true`). Set to `false` for a backdrop-less, pass-through
@@ -70,6 +78,7 @@ const DrawerRoot = React.forwardRef<View, DrawerProps>(
       open: controlledOpen,
       defaultOpen = false,
       onOpenChange,
+      onExitComplete,
       backdrop = true,
       children,
       style,
@@ -102,10 +111,23 @@ const DrawerRoot = React.forwardRef<View, DrawerProps>(
       onOpenChange?.(false)
     }, [onOpenChange])
 
-    const onExitComplete = useCallback(() => {
+    const handleExitComplete = useCallback(() => {
       setModalVisible(false)
     }, [])
 
+    const onExitCompleteRef = useRef(onExitComplete)
+    onExitCompleteRef.current = onExitComplete
+    const wasModalVisible = useRef(modalVisible)
+
+    // Fires after the commit that removed the Modal, not from the animation
+    // callback, so consumers never act while the Modal is still mounted.
+    useEffect(() => {
+      if (wasModalVisible.current && !modalVisible) {
+        onExitCompleteRef.current?.()
+      }
+      wasModalVisible.current = modalVisible
+    }, [modalVisible])
+
     const ctx = useMemo(
       () => ({
         isOpen,
@@ -113,9 +135,16 @@ const DrawerRoot = React.forwardRef<View, DrawerProps>(
         backdrop,
         openDrawer,
         closeDrawer,
-        onExitComplete
+        onExitComplete: handleExitComplete
       }),
-      [isOpen, modalVisible, backdrop, openDrawer, closeDrawer, onExitComplete]
+      [
+        isOpen,
+        modalVisible,
+        backdrop,
+        openDrawer,
+        closeDrawer,
+        handleExitComplete
+      ]
     )
 
     return (