@butternutbox/pawprint-native 1.5.0 → 1.6.0

package/package.json

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

package/src/components/atoms/index.ts

@@ -3,7 +3,6 @@ export * from "./CarouselControls"
 export * from "./Typography"
 export * from "./Badge"
 export * from "./Button"
-export * from "./ChefDogLoader"
 export * from "./Divider"
 export * from "./Hint"
 export * from "./Icon"

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 (

package/src/components/atoms/ChefDogLoader/ChefDogLoader.stories.tsx

@@ -1,21 +0,0 @@
-import React from "react"
-import { ChefDogLoader } from "./ChefDogLoader"
-import type { ChefDogLoaderProps } from "./ChefDogLoader"
-
-export default {
-  title: "Atoms/ChefDogLoader",
-  component: ChefDogLoader,
-  argTypes: {
-    size: {
-      control: { type: "number" },
-      description: "Width and height in points"
-    }
-  }
-}
-
-export const Playground = (args: ChefDogLoaderProps) => (
-  <ChefDogLoader {...args} />
-)
-Playground.args = {
-  size: 240
-}

package/src/components/atoms/ChefDogLoader/ChefDogLoader.test.tsx

@@ -1,33 +0,0 @@
-import React from "react"
-import { View } from "react-native"
-import { screen } from "@testing-library/react"
-import { describe, it, expect } from "vitest"
-import { renderWithTheme } from "../../../test-utils"
-import { ChefDogLoader } from "./ChefDogLoader"
-
-describe("ChefDogLoader", () => {
-  describe("when component is rendering", () => {
-    it("renders with progressbar role", () => {
-      renderWithTheme(<ChefDogLoader />)
-      expect(screen.getByRole("progressbar")).toBeInTheDocument()
-    })
-
-    it("has accessible loading label", () => {
-      renderWithTheme(<ChefDogLoader />)
-      expect(screen.getByLabelText("Loading")).toBeInTheDocument()
-    })
-
-    it("accepts a custom accessibility label", () => {
-      renderWithTheme(<ChefDogLoader accessibilityLabel="Fetching your plan" />)
-      expect(screen.getByLabelText("Fetching your plan")).toBeInTheDocument()
-    })
-  })
-
-  describe("when using with ref", () => {
-    it("forwards ref", () => {
-      const ref = React.createRef<View>()
-      renderWithTheme(<ChefDogLoader ref={ref} />)
-      expect(ref.current).toBeTruthy()
-    })
-  })
-})

package/src/components/atoms/ChefDogLoader/ChefDogLoader.tsx

@@ -1,115 +0,0 @@
-import React from "react"
-import { StyleSheet, View, ViewProps } from "react-native"
-import Svg, { ClipPath, Defs, G, Polygon } from "react-native-svg"
-import Reanimated, {
-  cancelAnimation,
-  Easing,
-  useAnimatedStyle,
-  useReducedMotion,
-  useSharedValue,
-  withRepeat,
-  withTiming
-} from "react-native-reanimated"
-import { LabradorChefsHat } from "@butternutbox/pawprint-illustrations/breeds"
-
-type ChefDogLoaderOwnProps = {
-  size?: number
-}
-
-type ChefDogLoaderProps = ChefDogLoaderOwnProps &
-  Omit<ViewProps, keyof ChefDogLoaderOwnProps>
-
-const DEFAULT_SIZE = 240
-const TAIL_REGION = "0,0 15.5,0 15.5,22.4 12,26.5 0,26.5"
-const BODY_REGION = "15.5,0 48,0 48,48 0,48 0,26.5 12,26.5 15.5,22.4"
-const TAIL_ORIGIN = { x: 13.4 / 48 - 0.5, y: 24.6 / 48 - 0.5 }
-const TAIL_DOWN = -6
-const TAIL_UP = 14
-const WAG_DURATION = 180
-
-/**
- * The labrador in a chef's hat wagging its tail, for indeterminate loading states.
- *
- * @example
- * ```tsx
- * import { ChefDogLoader } from "@butternutbox/pawprint-native"
- *
- * <ChefDogLoader />
- * <ChefDogLoader size={160} />
- * ```
- *
- * @param size - *(optional)* Width and height in points (default: 240)
- */
-const ChefDogLoader = React.forwardRef<View, ChefDogLoaderProps>(
-  ({ size = DEFAULT_SIZE, ...rest }, ref) => {
-    const reducedMotion = useReducedMotion()
-    const rotation = useSharedValue(TAIL_DOWN)
-    const clipId = React.useId().replace(/:/g, "")
-
-    React.useEffect(() => {
-      if (reducedMotion) return
-      rotation.value = withRepeat(
-        withTiming(TAIL_UP, {
-          duration: WAG_DURATION,
-          easing: Easing.inOut(Easing.quad)
-        }),
-        -1,
-        true
-      )
-      return () => cancelAnimation(rotation)
-    }, [reducedMotion, rotation])
-
-    const originX = TAIL_ORIGIN.x * size
-    const originY = TAIL_ORIGIN.y * size
-
-    const tailStyle = useAnimatedStyle(() => ({
-      transform: [
-        { translateX: originX },
-        { translateY: originY },
-        { rotate: `${rotation.value}deg` },
-        { translateX: -originX },
-        { translateY: -originY }
-      ]
-    }))
-
-    return (
-      <View
-        ref={ref}
-        accessibilityRole="progressbar"
-        accessibilityLabel="Loading"
-        {...rest}
-      >
-        <Svg width={size} height={size} viewBox="0 0 48 48">
-          <Defs>
-            <ClipPath id={`${clipId}-body`}>
-              <Polygon points={BODY_REGION} />
-            </ClipPath>
-          </Defs>
-          <G clipPath={`url(#${clipId}-body)`}>
-            <LabradorChefsHat />
-          </G>
-        </Svg>
-        <Reanimated.View
-          pointerEvents="none"
-          style={[StyleSheet.absoluteFill, tailStyle]}
-        >
-          <Svg width={size} height={size} viewBox="0 0 48 48">
-            <Defs>
-              <ClipPath id={`${clipId}-tail`}>
-                <Polygon points={TAIL_REGION} />
-              </ClipPath>
-            </Defs>
-            <G clipPath={`url(#${clipId}-tail)`}>
-              <LabradorChefsHat />
-            </G>
-          </Svg>
-        </Reanimated.View>
-      </View>
-    )
-  }
-)
-
-ChefDogLoader.displayName = "ChefDogLoader"
-
-export { ChefDogLoader }
-export type { ChefDogLoaderProps }

package/src/components/atoms/ChefDogLoader/index.ts

@@ -1,2 +0,0 @@
-export { ChefDogLoader } from "./ChefDogLoader"
-export type { ChefDogLoaderProps } from "./ChefDogLoader"