@butternutbox/pawprint-native 1.5.1 → 1.6.1

package/package.json

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

package/src/__mocks__/react-native.tsx

@@ -1,5 +1,38 @@
 import React from "react"
 
+export const MEASURED_TRIGGER = {
+  width: 320,
+  height: 52,
+  pageX: 40,
+  pageY: 700
+}
+
+const attachMeasure =
+  (ref: React.Ref<HTMLDivElement>) => (node: HTMLDivElement | null) => {
+    if (node) {
+      ;(node as unknown as { measure: unknown }).measure = (
+        callback: (
+          x: number,
+          y: number,
+          width: number,
+          height: number,
+          pageX: number,
+          pageY: number
+        ) => void
+      ) =>
+        callback(
+          0,
+          0,
+          MEASURED_TRIGGER.width,
+          MEASURED_TRIGGER.height,
+          MEASURED_TRIGGER.pageX,
+          MEASURED_TRIGGER.pageY
+        )
+    }
+    if (typeof ref === "function") ref(node)
+    else if (ref) (ref as React.RefObject<HTMLDivElement | null>).current = node
+  }
+
 // ─── View ────────────────────────────────────────────────────────────────
 export const View = React.forwardRef<HTMLDivElement, any>(
   (
@@ -45,7 +78,7 @@ export const View = React.forwardRef<HTMLDivElement, any>(
         domProps["aria-valuemax"] = String(accessibilityValue.max)
     }
     return (
-      <div ref={ref} style={style} {...domProps}>
+      <div ref={attachMeasure(ref)} style={style} {...domProps}>
         {children}
       </div>
     )
@@ -335,11 +368,19 @@ export const Platform = {
   select: (obj: any) => obj.ios ?? obj.default
 }
 
+const keyboardHandlers = new Map<string, Set<() => void>>()
+
 export const Keyboard = {
-  addListener: (_event: string, _handler: () => void) => ({
-    remove: () => {}
-  }),
-  dismiss: () => {}
+  addListener: (event: string, handler: () => void) => {
+    const handlers = keyboardHandlers.get(event) ?? new Set()
+    handlers.add(handler)
+    keyboardHandlers.set(event, handlers)
+    return { remove: () => handlers.delete(handler) }
+  },
+  dismiss: () => {},
+  emit: (event: string) => {
+    keyboardHandlers.get(event)?.forEach((handler) => handler())
+  }
 }
 
 // ─── Type exports (re-exported as empty for TS compat) ───────────────────

package/src/__mocks__/rn-primitives/select.tsx

@@ -1,9 +1,19 @@
 import React from "react"
 
+type TriggerPosition = {
+  width: number
+  height: number
+  pageX: number
+  pageY: number
+}
+
 const SelectCtx = React.createContext<{
   open: boolean
   setOpen: (open: boolean) => void
-}>({ open: false, setOpen: () => {} })
+  setTriggerPosition: (position: TriggerPosition | null) => void
+}>({ open: false, setOpen: () => {}, setTriggerPosition: () => {} })
+
+export const useRootContext = () => React.useContext(SelectCtx)
 
 export const Root = React.forwardRef<any, any>(
   (
@@ -19,6 +29,8 @@ export const Root = React.forwardRef<any, any>(
     ref
   ) => {
     const [open, setOpenState] = React.useState(false)
+    const [triggerPosition, setTriggerPosition] =
+      React.useState<TriggerPosition | null>(null)
     const [internalValue, setInternalValue] = React.useState(
       value ?? defaultValue ?? null
     )
@@ -37,8 +49,15 @@ export const Root = React.forwardRef<any, any>(
     }
 
     return (
-      <SelectCtx.Provider value={{ open, setOpen }}>
-        <div ref={ref} data-disabled={disabled} {...rest}>
+      <SelectCtx.Provider value={{ open, setOpen, setTriggerPosition }}>
+        <div
+          ref={ref}
+          data-disabled={disabled}
+          data-trigger-position={
+            triggerPosition ? JSON.stringify(triggerPosition) : undefined
+          }
+          {...rest}
+        >
           {typeof children === "function"
             ? children({ value: currentValue, onChange: handleChange })
             : children}

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/molecules/SelectField/SelectField.test.tsx

@@ -2,6 +2,7 @@ import React from "react"
 import { View } from "react-native"
 import { screen, fireEvent, act, waitFor } from "@testing-library/react"
 import { describe, it, expect, vi } from "vitest"
+import { Keyboard, MEASURED_TRIGGER } from "../../../__mocks__/react-native"
 import { renderWithTheme } from "../../../test-utils"
 import { SelectField } from "./SelectField"
 
@@ -697,4 +698,50 @@ describe("SelectField", () => {
       expect(item).toBeInTheDocument()
     })
   })
+  describe("when the keyboard moves the trigger", () => {
+    const renderSearchable = () =>
+      renderWithTheme(
+        <SelectField label="Breed" placeholder="Select a breed" searchable>
+          <SelectField.Item value="lab">Labrador</SelectField.Item>
+          <SelectField.Item value="pug">Pug</SelectField.Item>
+        </SelectField>
+      )
+
+    const triggerPositionOf = (container: HTMLElement) =>
+      container
+        .querySelector("[data-trigger-position]")
+        ?.getAttribute("data-trigger-position")
+
+    it("re-anchors the dropdown to the trigger when the keyboard shows", () => {
+      const { container } = renderSearchable()
+
+      fireEvent.click(screen.getAllByRole("button")[0])
+      expect(triggerPositionOf(container)).toBeUndefined()
+
+      act(() => Keyboard.emit("keyboardDidShow"))
+
+      expect(triggerPositionOf(container)).toBe(
+        JSON.stringify(MEASURED_TRIGGER)
+      )
+    })
+
+    it("re-anchors the dropdown when the keyboard hides", () => {
+      const { container } = renderSearchable()
+
+      fireEvent.click(screen.getAllByRole("button")[0])
+      act(() => Keyboard.emit("keyboardDidHide"))
+
+      expect(triggerPositionOf(container)).toBe(
+        JSON.stringify(MEASURED_TRIGGER)
+      )
+    })
+
+    it("does not re-anchor while the dropdown is closed", () => {
+      const { container } = renderSearchable()
+
+      act(() => Keyboard.emit("keyboardDidShow"))
+
+      expect(triggerPositionOf(container)).toBeUndefined()
+    })
+  })
 })

package/src/components/molecules/SelectField/SelectField.tsx

@@ -75,6 +75,35 @@ type SelectFieldOwnProps<Value = Option | string> = {
 export type SelectFieldProps<Value = Option> = SelectFieldOwnProps<Value> &
   Omit<ViewProps, keyof SelectFieldOwnProps<Value>>
 
+type SelectFieldAnchorProps = {
+  triggerRef: React.RefObject<View | null>
+  enabled: boolean
+}
+
+function SelectFieldAnchor({ triggerRef, enabled }: SelectFieldAnchorProps) {
+  const { setTriggerPosition } = SelectPrimitive.useRootContext()
+
+  React.useEffect(() => {
+    if (!enabled) return
+
+    const reanchor = () => {
+      triggerRef.current?.measure((_x, _y, width, height, pageX, pageY) => {
+        setTriggerPosition({ width, height, pageX, pageY })
+      })
+    }
+
+    const shown = Keyboard.addListener("keyboardDidShow", reanchor)
+    const hidden = Keyboard.addListener("keyboardDidHide", reanchor)
+
+    return () => {
+      shown.remove()
+      hidden.remove()
+    }
+  }, [enabled, setTriggerPosition, triggerRef])
+
+  return null
+}
+
 /**
  * Select field component for choosing a value from a dropdown list.
  * Built on @rn-primitives/select with design system styling.
@@ -216,6 +245,7 @@ const SelectFieldRoot = React.forwardRef<View, SelectFieldProps>(
     const [searchQuery, setSearchQuery] = React.useState("")
     const [clearKey, setClearKey] = React.useState(0)
     const searchInputRef = React.useRef<TextInput>(null)
+    const triggerViewRef = React.useRef<View>(null)
 
     const isQueryMode = searchable && typeof onSearchQuery === "function"
 
@@ -447,6 +477,7 @@ const SelectFieldRoot = React.forwardRef<View, SelectFieldProps>(
             </InputLabel>
           )}
           <SelectFieldTrigger
+            ref={triggerViewRef}
             state={state}
             leadingIcon={leadingIcon}
             isOpen={isOpen}
@@ -476,6 +507,10 @@ const SelectFieldRoot = React.forwardRef<View, SelectFieldProps>(
           )}
           {error && state === "error" && <InputError>{error}</InputError>}
         </StyledRoot>
+        <SelectFieldAnchor
+          triggerRef={triggerViewRef}
+          enabled={searchable && isOpen}
+        />
         {showContent && hasContentToShow && (
           <SelectFieldContent>
             {isSearching ? (