@butternutbox/pawprint-native 2.1.0 → 2.3.0

package/package.json

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

package/src/__mocks__/react-native.tsx

@@ -205,6 +205,9 @@ export const TextInput = React.forwardRef<HTMLInputElement, any>(
   }
 )
 TextInput.displayName = "TextInput"
+;(TextInput as unknown as { State: unknown }).State = {
+  currentlyFocusedInput: () => null
+}
 
 // ─── ScrollView ──────────────────────────────────────────────────────────
 export const ScrollView = React.forwardRef<HTMLDivElement, any>(
@@ -216,11 +219,16 @@ export const ScrollView = React.forwardRef<HTMLDivElement, any>(
       showsHorizontalScrollIndicator: _showsHorizontalScrollIndicator,
       showsVerticalScrollIndicator: _showsVerticalScrollIndicator,
       nestedScrollEnabled: _nestedScrollEnabled,
+      keyboardShouldPersistTaps,
       ..._rest
     },
     ref
   ) => (
-    <div ref={ref} style={contentContainerStyle}>
+    <div
+      ref={ref}
+      style={contentContainerStyle}
+      data-keyboard-should-persist-taps={keyboardShouldPersistTaps}
+    >
       {children}
     </div>
   )
@@ -310,6 +318,7 @@ export const Animated = {
       )
     }
   ),
+  ScrollView,
   Value: AnimatedValue,
   timing: (_value: any, _config: any) => ({
     start: mockAnim,

package/src/components/atoms/IconButton/IconButton.tsx

@@ -176,6 +176,7 @@ const IconButton = React.forwardRef<View, IconButtonProps>(
       <StyledIconButton
         ref={ref}
         disabled={isDisabled}
+        accessibilityRole="button"
         accessibilityLabel={ariaLabel}
         accessibilityState={{ disabled: isDisabled, busy: loading }}
         onPressIn={() => setPressed(true)}

package/src/components/molecules/DatePicker/DatePicker.tsx

@@ -1,6 +1,6 @@
-import React, { useCallback, useMemo, useState } from "react"
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { format, isBefore, isSameDay, isToday, type Locale } from "date-fns"
-import { View, Pressable, ViewProps } from "react-native"
+import { AccessibilityInfo, View, Pressable, ViewProps } from "react-native"
 import styled from "@emotion/native"
 import { useTheme } from "@emotion/react"
 import {
@@ -52,6 +52,10 @@ const MONTH_SLIDE_EXITING = {
   backward: FadeOutRight.duration(200)
 } as const
 
+// Moving screen-reader focus straight after a tap or a sheet closing is
+// ignored by VoiceOver, so wait for it to settle first.
+const FOCUS_DELAY_MS = 150
+
 const DEFAULT_WEEK_LABELS: [
   string,
   string,
@@ -121,7 +125,13 @@ type DatePickerOwnProps = {
   getMonthLabel?: (year: number, month: number, locale?: Locale) => string
   weekDayLabels?: [string, string, string, string, string, string, string]
   getDateState?: (date: Date) => DateItemState
+  getDateAccessibilityLabel?: (
+    date: Date,
+    state: DateItemState,
+    monthLabel: string
+  ) => string
   isDateDisabled?: (date: Date) => boolean
+  focusDate?: Date | null
   minDate?: Date
   maxDate?: Date
 }
@@ -229,6 +239,10 @@ const StyledIndicator = styled(View)<{
  * @param {[string,string,string,string,string,string,string]} [weekDayLabels] - Day-column labels Mon→Sun.
  * @param {(date: Date) => DateItemState} [getDateState] - Returns the visual state for a date.
  *   Defaults to: past="previous", today="current", future="default".
+ * @param {(date: Date, state: DateItemState, monthLabel: string) => string} [getDateAccessibilityLabel] - Returns the screen-reader label for a date,
+ *   e.g. to announce delivery states. Defaults to "{day} {monthLabel}".
+ * @param {Date | null} [focusDate] - Moves screen-reader focus to this date's cell when it is set or
+ *   changes, e.g. to return focus to a picked date after a confirmation sheet closes.
  * @param {(date: Date) => boolean} [isDateDisabled] - Returns true to disable a date.
  * @param {Date} [minDate] - Dates before this (exclusive of time) will be disabled.
  * @param {Date} [maxDate] - Dates after this (exclusive of time) will be disabled.
@@ -270,7 +284,9 @@ export const DatePicker = React.forwardRef<View, DatePickerProps>(
       getMonthLabel,
       weekDayLabels = DEFAULT_WEEK_LABELS,
       getDateState,
+      getDateAccessibilityLabel,
       isDateDisabled,
+      focusDate,
       minDate,
       maxDate,
       ...rest
@@ -312,6 +328,23 @@ export const DatePicker = React.forwardRef<View, DatePickerProps>(
       [datePicker, dt, theme]
     )
 
+    const cellRefs = useRef(new Map<string, View>())
+    const focusTime = focusDate?.getTime()
+
+    useEffect(() => {
+      if (focusTime === undefined) return
+
+      const target = new Date(focusTime)
+      if (target.getFullYear() !== year || target.getMonth() !== month) return
+
+      const timeout = setTimeout(() => {
+        const cell = cellRefs.current.get(toDateKey(target))
+        if (cell) AccessibilityInfo.sendAccessibilityEvent(cell, "focus")
+      }, FOCUS_DELAY_MS)
+
+      return () => clearTimeout(timeout)
+    }, [focusTime, year, month])
+
     const resolvedGetDateState = useCallback(
       (date: Date) => getDateState?.(date) ?? defaultGetDateState(date),
       [getDateState]
@@ -470,6 +503,7 @@ export const DatePicker = React.forwardRef<View, DatePickerProps>(
               token={datePicker.month.typography}
               align="center"
               color={datePicker.month.colour.text.default}
+              accessibilityRole="header"
             >
               {resolvedMonthLabel}
             </Typography>
@@ -493,11 +527,7 @@ export const DatePicker = React.forwardRef<View, DatePickerProps>(
           entering={MONTH_SLIDE_ENTERING[slideDir]}
           exiting={MONTH_SLIDE_EXITING[slideDir]}
         >
-          <StyledDatesGrid
-            rowGap={rowGap}
-            accessible
-            accessibilityLabel={resolvedMonthLabel}
-          >
+          <StyledDatesGrid rowGap={rowGap}>
             {calendarRows.map((row, rowIdx) => (
               <StyledDateRow key={rowIdx}>
                 {row.map((date, colIdx) =>
@@ -539,6 +569,11 @@ export const DatePicker = React.forwardRef<View, DatePickerProps>(
 
                         return (
                           <Pressable
+                            ref={(node) => {
+                              const key = toDateKey(date)
+                              if (node) cellRefs.current.set(key, node)
+                              else cellRefs.current.delete(key)
+                            }}
                             onPress={
                               !isDisabled
                                 ? () => onDateSelect?.(date)
@@ -547,7 +582,13 @@ export const DatePicker = React.forwardRef<View, DatePickerProps>(
                             disabled={isDisabled}
                             accessible
                             accessibilityRole="button"
-                            accessibilityLabel={`${date.getDate()} ${resolvedMonthLabel}`}
+                            accessibilityLabel={
+                              getDateAccessibilityLabel?.(
+                                date,
+                                state,
+                                resolvedMonthLabel
+                              ) ?? `${date.getDate()} ${resolvedMonthLabel}`
+                            }
                             accessibilityState={{
                               selected: isSelected,
                               disabled: isDisabled

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

@@ -90,6 +90,69 @@ describe("Drawer keyboard lift", () => {
 
     expect(screen.getByText("Row one")).toBeInTheDocument()
   })
+
+  it("keeps its content once the keyboard has settled", () => {
+    renderWithTheme(
+      <Drawer.Root defaultOpen>
+        <Drawer.Portal>
+          <Drawer.Content>
+            <Drawer.Body>
+              <Typography>Row one</Typography>
+            </Drawer.Body>
+          </Drawer.Content>
+        </Drawer.Portal>
+      </Drawer.Root>
+    )
+
+    act(() => {
+      Keyboard.emit("keyboardDidShow", {
+        endCoordinates: { height: 336 },
+        duration: 250
+      })
+    })
+
+    expect(screen.getByText("Row one")).toBeInTheDocument()
+  })
+})
+
+describe("Drawer.Body taps", () => {
+  const persistTapsOf = (text: string) =>
+    screen
+      .getByText(text)
+      .closest("[data-keyboard-should-persist-taps]")
+      ?.getAttribute("data-keyboard-should-persist-taps")
+
+  it("lets taps reach its controls without dismissing the keyboard", () => {
+    renderWithTheme(
+      <Drawer.Root defaultOpen>
+        <Drawer.Portal>
+          <Drawer.Content>
+            <Drawer.Body>
+              <Typography>Row one</Typography>
+            </Drawer.Body>
+          </Drawer.Content>
+        </Drawer.Portal>
+      </Drawer.Root>
+    )
+
+    expect(persistTapsOf("Row one")).toBe("handled")
+  })
+
+  it("respects a consumer's keyboardShouldPersistTaps", () => {
+    renderWithTheme(
+      <Drawer.Root defaultOpen>
+        <Drawer.Portal>
+          <Drawer.Content>
+            <Drawer.Body keyboardShouldPersistTaps="never">
+              <Typography>Row one</Typography>
+            </Drawer.Body>
+          </Drawer.Content>
+        </Drawer.Portal>
+      </Drawer.Root>
+    )
+
+    expect(persistTapsOf("Row one")).toBe("never")
+  })
 })
 
 describe("Drawer", () => {

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

@@ -1,46 +1,62 @@
-import React from "react"
-import { ScrollView, ScrollViewProps, useWindowDimensions } from "react-native"
+import React, { useCallback, useEffect, useMemo, useRef } from "react"
+import {
+  Animated,
+  Keyboard,
+  ScrollView,
+  ScrollViewProps,
+  StyleSheet,
+  TextInput,
+  useWindowDimensions,
+  View,
+  type LayoutChangeEvent,
+  type NativeScrollEvent,
+  type NativeSyntheticEvent
+} from "react-native"
 import styled from "@emotion/native"
 import { useTheme } from "@emotion/react"
 import { useSafeAreaInsets } from "react-native-safe-area-context"
 import { useDrawerHeaderContext } from "./DrawerHeaderContext"
 import { useDrawerFooterContext } from "./DrawerFooterContext"
 import { useDrawerBodyMax } from "./DrawerBodyMaxContext"
+import { useDrawerKeyboardInset } from "./DrawerKeyboardInsetContext"
 
 export type DrawerBodyProps = ScrollViewProps
 
 const parseTokenValue = (value: string): number => parseFloat(value)
 
-const StyledScrollView = styled(ScrollView)<{
+const StyledScrollView = styled(Animated.ScrollView)<{
   bodyPaddingHorizontal: number
   bodyPaddingRight: number
-  bodyMaxHeight: number
   bodyPaddingBottom: number
-}>(
-  ({
-    bodyPaddingHorizontal,
-    bodyPaddingRight,
-    bodyMaxHeight,
-    bodyPaddingBottom
-  }) => ({
-    // No `flex: 1`: the ScrollView self-sizes to its content (up to
-    // `maxHeight`), so the panel wraps tight around short content and scrolls
-    // only when content exceeds the chrome-aware cap.
-    flexGrow: 0,
-    flexShrink: 1,
-    paddingLeft: bodyPaddingHorizontal,
-    paddingRight: bodyPaddingRight,
-    maxHeight: bodyMaxHeight,
-    paddingBottom: bodyPaddingBottom
-  })
-)
+}>(({ bodyPaddingHorizontal, bodyPaddingRight, bodyPaddingBottom }) => ({
+  // No `flex: 1`: the ScrollView self-sizes to its content (up to
+  // `maxHeight`), so the panel wraps tight around short content and scrolls
+  // only when content exceeds the chrome-aware cap.
+  flexGrow: 0,
+  flexShrink: 1,
+  paddingLeft: bodyPaddingHorizontal,
+  paddingRight: bodyPaddingRight,
+  paddingBottom: bodyPaddingBottom
+}))
 
 /**
  * Scrollable content area of the drawer. Sizes to its content up to a
  * chrome-aware `maxHeight`, scrolling beyond that.
  */
 export const DrawerBody = React.forwardRef<ScrollView, DrawerBodyProps>(
-  ({ children, contentContainerStyle, ...props }, ref) => {
+  (
+    {
+      children,
+      contentContainerStyle,
+      keyboardShouldPersistTaps = "handled",
+      scrollEventThrottle = 16,
+      onScroll,
+      onLayout,
+      style,
+      ...props
+    },
+    ref
+  ) => {
     const theme = useTheme()
     const { spacing } = theme.tokens.components.drawer
     const { buttons } = theme.tokens.components
@@ -48,6 +64,7 @@ export const DrawerBody = React.forwardRef<ScrollView, DrawerBodyProps>(
     const headerContext = useDrawerHeaderContext()
     const footerContext = useDrawerFooterContext()
     const providedMaxHeight = useDrawerBodyMax()
+    const keyboardInset = useDrawerKeyboardInset()
     const { height: windowHeight } = useWindowDimensions()
     const insets = useSafeAreaInsets()
 
@@ -60,6 +77,90 @@ export const DrawerBody = React.forwardRef<ScrollView, DrawerBodyProps>(
     // chrome has been measured, so the body still scrolls on the first layout.
     const bodyMaxHeight = providedMaxHeight ?? windowHeight - 300
 
+    const { maxHeight: styleMaxHeight, ...restStyle } =
+      StyleSheet.flatten(style) ?? {}
+    const cap =
+      typeof styleMaxHeight === "number"
+        ? Math.min(styleMaxHeight, bodyMaxHeight)
+        : bodyMaxHeight
+
+    const maxHeight = useMemo(() => {
+      if (!keyboardInset || bodyMaxHeight <= 0) return cap
+      const slack = bodyMaxHeight - cap
+      return keyboardInset.interpolate({
+        inputRange: slack > 0 ? [0, slack, bodyMaxHeight] : [0, bodyMaxHeight],
+        outputRange: slack > 0 ? [cap, cap, 0] : [cap, 0],
+        extrapolate: "clamp"
+      })
+    }, [keyboardInset, bodyMaxHeight, cap])
+
+    const scrollRef = useRef<ScrollView | null>(null)
+    const contentRef = useRef<View>(null)
+    const scrollOffsetRef = useRef(0)
+    const viewportHeightRef = useRef(0)
+
+    const combinedRef = useCallback(
+      (node: ScrollView | null) => {
+        scrollRef.current = node
+        if (typeof ref === "function") {
+          ref(node)
+        } else if (ref) {
+          ;(ref as React.MutableRefObject<ScrollView | null>).current = node
+        }
+      },
+      [ref]
+    )
+
+    const handleScroll = useCallback(
+      (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+        scrollOffsetRef.current = event.nativeEvent.contentOffset.y
+        onScroll?.(event)
+      },
+      [onScroll]
+    )
+
+    const handleLayout = useCallback(
+      (event: LayoutChangeEvent) => {
+        viewportHeightRef.current = event.nativeEvent.layout.height
+        onLayout?.(event)
+      },
+      [onLayout]
+    )
+
+    useEffect(() => {
+      const subscription = Keyboard.addListener("keyboardDidShow", () => {
+        const scrollView = scrollRef.current
+        const focusedInput = TextInput.State.currentlyFocusedInput()
+        const contentView = contentRef.current
+        if (!scrollView || !focusedInput || !contentView) return
+
+        focusedInput.measureLayout(
+          contentView,
+          (_left, inputTop, _width, inputHeight) => {
+            const viewportHeight = viewportHeightRef.current
+            if (viewportHeight <= 0) return
+
+            const visibleTop = scrollOffsetRef.current
+            const visibleBottom = visibleTop + viewportHeight
+            const wantedTop = inputTop - gap
+            const wantedBottom = inputTop + inputHeight + gap
+
+            if (wantedTop < visibleTop) {
+              scrollView.scrollTo({ y: Math.max(0, wantedTop), animated: true })
+            } else if (wantedBottom > visibleBottom) {
+              scrollView.scrollTo({
+                y: Math.min(wantedTop, wantedBottom - viewportHeight),
+                animated: true
+              })
+            }
+          },
+          () => {}
+        )
+      })
+
+      return () => subscription.remove()
+    }, [gap])
+
     // When there's no header the close button floats in the top-right corner.
     // Reserve space on the right so body content doesn't slide under it.
     const paddingRight =
@@ -82,11 +183,12 @@ export const DrawerBody = React.forwardRef<ScrollView, DrawerBodyProps>(
 
     return (
       <StyledScrollView
-        ref={ref}
+        ref={combinedRef}
+        innerViewRef={contentRef as React.RefObject<View>}
         bodyPaddingHorizontal={horizontalPadding}
         bodyPaddingRight={paddingRight}
-        bodyMaxHeight={bodyMaxHeight}
         bodyPaddingBottom={bodyPaddingBottom}
+        style={[restStyle, { maxHeight }]}
         contentContainerStyle={[
           {
             gap,
@@ -95,6 +197,10 @@ export const DrawerBody = React.forwardRef<ScrollView, DrawerBodyProps>(
           },
           contentContainerStyle
         ]}
+        keyboardShouldPersistTaps={keyboardShouldPersistTaps}
+        scrollEventThrottle={scrollEventThrottle}
+        onScroll={handleScroll}
+        onLayout={handleLayout}
         {...props}
       >
         {children}

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

@@ -17,6 +17,7 @@ import { DrawerMeasureContext } from "./DrawerMeasureContext"
 import { useDrawerContext } from "./DrawerContext"
 import { DrawerBodyMaxContext } from "./DrawerBodyMaxContext"
 import { DrawerFooterContext } from "./DrawerFooterContext"
+import { DrawerKeyboardInsetContext } from "./DrawerKeyboardInsetContext"
 import {
   DrawerHeaderContext,
   type DrawerHeaderVariant
@@ -31,6 +32,8 @@ const DISMISS_THRESHOLD = 80
 
 const parseTokenValue = (value: string): number => parseFloat(value)
 
+const claimTouch = () => true
+
 const StyledPanel = styled(View)<{
   panelBorderRadius: number
   panelBgColor: string
@@ -111,9 +114,8 @@ export const DrawerContent = React.forwardRef<View, DrawerContentProps>(
     const { isOpen, closeDrawer, onExitComplete } = useDrawerContext()
 
     const { height: windowHeight } = useWindowDimensions()
-    const [keyboardHeight, setKeyboardHeight] = useState(0)
     const keyboardSpacer = useRef(new Animated.Value(0)).current
-    const maxHeight = (windowHeight - keyboardHeight) * 0.9
+    const maxHeight = windowHeight * 0.9
 
     // Constant parts of the chrome that aren't a measured section: the panel's
     // top border, and (when there's no footer) the body's own bottom padding.
@@ -178,11 +180,9 @@ export const DrawerContent = React.forwardRef<View, DrawerContentProps>(
       }
 
       const shown = Keyboard.addListener(showEvent, (event) => {
-        setKeyboardHeight(event.endCoordinates.height)
         lift(event.endCoordinates.height, event.duration)
       })
       const hidden = Keyboard.addListener(hideEvent, (event) => {
-        setKeyboardHeight(0)
         lift(0, event.duration)
       })
 
@@ -427,19 +427,21 @@ export const DrawerContent = React.forwardRef<View, DrawerContentProps>(
                   panelBorderRadius={parseTokenValue(drawer.borderRadius.top)}
                   panelBgColor={colour.background.container.default}
                   panelMaxWidth={parseTokenValue(drawer.size.maxWidth)}
-                  panelMaxHeight={maxHeight + keyboardHeight}
+                  panelMaxHeight={maxHeight}
                   panelBorderWidth={parseTokenValue(dimensions.borderWidth.sm)}
                   panelBorderColor={colour.border.default}
                   panelShadowColor={modal.shadow.color}
                   panelShadowOffsetY={parseTokenValue(modal.shadow.offsetY)}
                   panelShadowBlur={parseTokenValue(modal.shadow.blur)}
-                  accessible
-                  accessibilityRole="none"
                   accessibilityViewIsModal
+                  onAccessibilityEscape={closeDrawer}
+                  onStartShouldSetResponder={claimTouch}
                   {...props}
                 >
                   <DrawerBodyMaxContext.Provider value={bodyMax}>
-                    {children}
+                    <DrawerKeyboardInsetContext.Provider value={keyboardSpacer}>
+                      {children}
+                    </DrawerKeyboardInsetContext.Provider>
                   </DrawerBodyMaxContext.Provider>
                   <Animated.View style={{ height: keyboardSpacer }} />
                 </StyledPanel>

package/src/components/molecules/Drawer/DrawerKeyboardInsetContext.ts

@@ -0,0 +1,9 @@
+import { createContext, useContext } from "react"
+import type { Animated } from "react-native"
+
+export const DrawerKeyboardInsetContext = createContext<Animated.Value | null>(
+  null
+)
+
+export const useDrawerKeyboardInset = (): Animated.Value | null =>
+  useContext(DrawerKeyboardInsetContext)

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

@@ -180,9 +180,20 @@ export const SelectField = React.forwardRef<View, SelectFieldProps>(
       )
     }, [windowHeight, keyboardHeight, maxDropdownHeight])
 
+    const isOpen = isFocused && !disabled
+
     React.useEffect(() => {
-      if (isFocused) measurePlacement()
-    }, [isFocused, measurePlacement])
+      if (!isOpen) return
+
+      let frame = 0
+      const track = () => {
+        measurePlacement()
+        frame = requestAnimationFrame(track)
+      }
+      track()
+
+      return () => cancelAnimationFrame(frame)
+    }, [isOpen, measurePlacement])
 
     React.useEffect(() => {
       if (!isControlled || isFocused) return
@@ -251,7 +262,6 @@ export const SelectField = React.forwardRef<View, SelectFieldProps>(
     }
 
     const fieldState: InputState = error ? "error" : state
-    const isOpen = isFocused && !disabled
     const clearAction =
       !disabled && inputText.length > 0 ? (
         <Pressable