@butternutbox/pawprint-native 1.6.1 → 1.6.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@butternutbox/pawprint-native",
-  "version": "1.6.1",
+  "version": "1.6.3",
   "type": "module",
   "description": "ButternutBox Pawprint Design System - React Native Components",
   "main": "./dist/index.cjs",
@@ -22,8 +22,8 @@
     "test": "vitest run"
   },
   "dependencies": {
-    "@butternutbox/pawprint-fonts": "^2.0.0",
-    "@butternutbox/pawprint-tokens": "^0.5.0",
+    "@butternutbox/pawprint-fonts": "^2.0.1",
+    "@butternutbox/pawprint-tokens": "^0.6.0",
     "@emotion/native": "^11.11.0",
     "@emotion/react": "^11.14.0",
     "@rn-primitives/avatar": "^1.4.0",

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

@@ -1,8 +1,8 @@
 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 { describe, it, expect, vi, beforeEach, afterEach } from "vitest"
+import { MEASURED_TRIGGER } from "../../../__mocks__/react-native"
 import { renderWithTheme } from "../../../test-utils"
 import { SelectField } from "./SelectField"
 
@@ -698,7 +698,18 @@ describe("SelectField", () => {
       expect(item).toBeInTheDocument()
     })
   })
-  describe("when the keyboard moves the trigger", () => {
+  describe("when the field moves while the dropdown is open", () => {
+    const restingPageY = MEASURED_TRIGGER.pageY
+
+    beforeEach(() => {
+      vi.useFakeTimers()
+    })
+
+    afterEach(() => {
+      MEASURED_TRIGGER.pageY = restingPageY
+      vi.useRealTimers()
+    })
+
     const renderSearchable = () =>
       renderWithTheme(
         <SelectField label="Breed" placeholder="Select a breed" searchable>
@@ -712,34 +723,53 @@ describe("SelectField", () => {
         .querySelector("[data-trigger-position]")
         ?.getAttribute("data-trigger-position")
 
-    it("re-anchors the dropdown to the trigger when the keyboard shows", () => {
+    const advanceFrames = (count: number) =>
+      act(() => vi.advanceTimersByTime(count * 16))
+
+    it("anchors the dropdown to the field once it has opened", () => {
       const { container } = renderSearchable()
 
       fireEvent.click(screen.getAllByRole("button")[0])
-      expect(triggerPositionOf(container)).toBeUndefined()
-
-      act(() => Keyboard.emit("keyboardDidShow"))
+      advanceFrames(3)
 
       expect(triggerPositionOf(container)).toBe(
         JSON.stringify(MEASURED_TRIGGER)
       )
     })
 
-    it("re-anchors the dropdown when the keyboard hides", () => {
+    it("follows the field to where it comes to rest", () => {
       const { container } = renderSearchable()
 
       fireEvent.click(screen.getAllByRole("button")[0])
-      act(() => Keyboard.emit("keyboardDidHide"))
+      advanceFrames(3)
+      MEASURED_TRIGGER.pageY = 380
+      advanceFrames(3)
 
       expect(triggerPositionOf(container)).toBe(
-        JSON.stringify(MEASURED_TRIGGER)
+        JSON.stringify({ ...MEASURED_TRIGGER, pageY: 380 })
+      )
+    })
+
+    it("holds the dropdown in place while the field is still moving", () => {
+      const { container } = renderSearchable()
+
+      fireEvent.click(screen.getAllByRole("button")[0])
+      advanceFrames(3)
+
+      for (const pageY of [650, 600, 550]) {
+        MEASURED_TRIGGER.pageY = pageY
+        advanceFrames(1)
+      }
+
+      expect(triggerPositionOf(container)).toBe(
+        JSON.stringify({ ...MEASURED_TRIGGER, pageY: restingPageY })
       )
     })
 
-    it("does not re-anchor while the dropdown is closed", () => {
+    it("does not track the field while the dropdown is closed", () => {
       const { container } = renderSearchable()
 
-      act(() => Keyboard.emit("keyboardDidShow"))
+      advanceFrames(3)
 
       expect(triggerPositionOf(container)).toBeUndefined()
     })

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

@@ -80,25 +80,49 @@ type SelectFieldAnchorProps = {
   enabled: boolean
 }
 
+type TriggerPosition = NonNullable<
+  ReturnType<typeof SelectPrimitive.useRootContext>["triggerPosition"]
+>
+
+const isSamePosition = (a: TriggerPosition | null, b: TriggerPosition | null) =>
+  a !== null &&
+  b !== null &&
+  a.width === b.width &&
+  a.height === b.height &&
+  a.pageX === b.pageX &&
+  a.pageY === b.pageY
+
 function SelectFieldAnchor({ triggerRef, enabled }: SelectFieldAnchorProps) {
-  const { setTriggerPosition } = SelectPrimitive.useRootContext()
+  const { triggerPosition, setTriggerPosition } =
+    SelectPrimitive.useRootContext()
+  const anchoredRef = React.useRef<TriggerPosition | null>(null)
+
+  React.useEffect(() => {
+    anchoredRef.current = triggerPosition ?? null
+  }, [triggerPosition])
 
   React.useEffect(() => {
     if (!enabled) return
 
-    const reanchor = () => {
+    let frame: number
+    let previous: TriggerPosition | null = null
+
+    const track = () => {
       triggerRef.current?.measure((_x, _y, width, height, pageX, pageY) => {
-        setTriggerPosition({ width, height, pageX, pageY })
+        const measured = { width, height, pageX, pageY }
+        const settled = isSamePosition(measured, previous)
+        if (settled && !isSamePosition(measured, anchoredRef.current)) {
+          anchoredRef.current = measured
+          setTriggerPosition(measured)
+        }
+        previous = measured
       })
+      frame = requestAnimationFrame(track)
     }
 
-    const shown = Keyboard.addListener("keyboardDidShow", reanchor)
-    const hidden = Keyboard.addListener("keyboardDidHide", reanchor)
+    frame = requestAnimationFrame(track)
 
-    return () => {
-      shown.remove()
-      hidden.remove()
-    }
+    return () => cancelAnimationFrame(frame)
   }, [enabled, setTriggerPosition, triggerRef])
 
   return null