@butternutbox/pawprint-native 1.6.0 → 1.6.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@butternutbox/pawprint-native",
-  "version": "1.6.0",
+  "version": "1.6.2",
   "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/SelectField/SelectField.test.tsx

@@ -1,7 +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 { describe, it, expect, vi, beforeEach, afterEach } from "vitest"
+import { MEASURED_TRIGGER } from "../../../__mocks__/react-native"
 import { renderWithTheme } from "../../../test-utils"
 import { SelectField } from "./SelectField"
 
@@ -697,4 +698,80 @@ describe("SelectField", () => {
       expect(item).toBeInTheDocument()
     })
   })
+  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>
+          <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")
+
+    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])
+      advanceFrames(3)
+
+      expect(triggerPositionOf(container)).toBe(
+        JSON.stringify(MEASURED_TRIGGER)
+      )
+    })
+
+    it("follows the field to where it comes to rest", () => {
+      const { container } = renderSearchable()
+
+      fireEvent.click(screen.getAllByRole("button")[0])
+      advanceFrames(3)
+      MEASURED_TRIGGER.pageY = 380
+      advanceFrames(3)
+
+      expect(triggerPositionOf(container)).toBe(
+        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 track the field while the dropdown is closed", () => {
+      const { container } = renderSearchable()
+
+      advanceFrames(3)
+
+      expect(triggerPositionOf(container)).toBeUndefined()
+    })
+  })
 })

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

@@ -75,6 +75,59 @@ 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
+}
+
+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 { triggerPosition, setTriggerPosition } =
+    SelectPrimitive.useRootContext()
+  const anchoredRef = React.useRef<TriggerPosition | null>(null)
+
+  React.useEffect(() => {
+    anchoredRef.current = triggerPosition ?? null
+  }, [triggerPosition])
+
+  React.useEffect(() => {
+    if (!enabled) return
+
+    let frame: number
+    let previous: TriggerPosition | null = null
+
+    const track = () => {
+      triggerRef.current?.measure((_x, _y, 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)
+    }
+
+    frame = requestAnimationFrame(track)
+
+    return () => cancelAnimationFrame(frame)
+  }, [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 +269,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 +501,7 @@ const SelectFieldRoot = React.forwardRef<View, SelectFieldProps>(
             </InputLabel>
           )}
           <SelectFieldTrigger
+            ref={triggerViewRef}
             state={state}
             leadingIcon={leadingIcon}
             isOpen={isOpen}
@@ -476,6 +531,10 @@ const SelectFieldRoot = React.forwardRef<View, SelectFieldProps>(
           )}
           {error && state === "error" && <InputError>{error}</InputError>}
         </StyledRoot>
+        <SelectFieldAnchor
+          triggerRef={triggerViewRef}
+          enabled={searchable && isOpen}
+        />
         {showContent && hasContentToShow && (
           <SelectFieldContent>
             {isSearching ? (