@butternutbox/pawprint-native 1.6.3 → 2.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@butternutbox/pawprint-native",
-  "version": "1.6.3",
+  "version": "2.0.1",
   "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.1",
-    "@butternutbox/pawprint-tokens": "^0.6.0",
+    "@butternutbox/pawprint-fonts": "^2.0.2",
+    "@butternutbox/pawprint-tokens": "^0.6.1",
     "@emotion/native": "^11.11.0",
     "@emotion/react": "^11.14.0",
     "@rn-primitives/avatar": "^1.4.0",

package/src/__mocks__/react-native.tsx

@@ -28,6 +28,15 @@ const attachMeasure =
           MEASURED_TRIGGER.pageX,
           MEASURED_TRIGGER.pageY
         )
+      ;(node as unknown as { measureInWindow: unknown }).measureInWindow = (
+        callback: (x: number, y: number, width: number, height: number) => void
+      ) =>
+        callback(
+          MEASURED_TRIGGER.pageX,
+          MEASURED_TRIGGER.pageY,
+          MEASURED_TRIGGER.width,
+          MEASURED_TRIGGER.height
+        )
     }
     if (typeof ref === "function") ref(node)
     else if (ref) (ref as React.RefObject<HTMLDivElement | null>).current = node
@@ -162,11 +171,13 @@ export const TextInput = React.forwardRef<HTMLInputElement, any>(
       onChangeText,
       onChange,
       onBlur,
+      onFocus,
       value,
       defaultValue,
       placeholder,
       editable,
       keyboardType: _keyboardType,
+      accessibilityRole,
       accessibilityState,
       ..._rest
     },
@@ -180,7 +191,10 @@ export const TextInput = React.forwardRef<HTMLInputElement, any>(
         defaultValue={defaultValue}
         placeholder={placeholder}
         disabled={editable === false}
+        role={accessibilityRole}
         aria-disabled={accessibilityState?.disabled}
+        aria-expanded={accessibilityState?.expanded}
+        onFocus={onFocus}
         onBlur={onBlur}
         onChange={(e) => {
           onChangeText?.(e.target.value)
@@ -355,9 +369,16 @@ export const PanResponder = {
 }
 
 // ─── Easing ──────────────────────────────────────────────────────────────
+type EasingFn = (t: number) => number
+
 export const Easing = {
   linear: (t: number) => t,
   ease: (t: number) => t,
+  quad: (t: number) => t * t,
+  cubic: (t: number) => t * t * t,
+  in: (fn: EasingFn = (t) => t) => fn,
+  out: (fn: EasingFn = (t) => t) => fn,
+  inOut: (fn: EasingFn = (t) => t) => fn,
   bezier: (_x1: number, _y1: number, _x2: number, _y2: number) => (t: number) =>
     t
 }
@@ -368,18 +389,25 @@ export const Platform = {
   select: (obj: any) => obj.ios ?? obj.default
 }
 
-const keyboardHandlers = new Map<string, Set<() => void>>()
+const keyboardHandlers = new Map<string, Set<(event?: unknown) => void>>()
+
+const DEFAULT_KEYBOARD_EVENT = {
+  endCoordinates: { height: 336, screenX: 0, screenY: 476, width: 375 }
+}
 
 export const Keyboard = {
-  addListener: (event: string, handler: () => void) => {
+  addListener: (event: string, handler: (event?: unknown) => 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())
+  dismiss: () => {
+    const active = document.activeElement
+    if (active instanceof HTMLElement) active.blur()
+  },
+  emit: (event: string, payload: unknown = DEFAULT_KEYBOARD_EVENT) => {
+    keyboardHandlers.get(event)?.forEach((handler) => handler(payload))
   }
 }
 

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

@@ -0,0 +1,71 @@
+import React from "react"
+
+type PortalMap = Map<string, Map<string, React.ReactNode>>
+
+const DEFAULT_HOST = "INTERNAL_PRIMITIVE_DEFAULT_HOST_NAME"
+
+const portals: PortalMap = new Map([[DEFAULT_HOST, new Map()]])
+const listeners = new Set<() => void>()
+
+const notify = () => listeners.forEach((listener) => listener())
+
+const subscribe = (listener: () => void) => {
+  listeners.add(listener)
+  return () => {
+    listeners.delete(listener)
+  }
+}
+
+let version = 0
+const getSnapshot = () => version
+
+export const PortalHost = ({ name = DEFAULT_HOST }: { name?: string }) => {
+  React.useSyncExternalStore(subscribe, getSnapshot, getSnapshot)
+  const host = portals.get(name)
+  if (!host || host.size === 0) return null
+  return (
+    <>
+      {Array.from(host.entries()).map(([key, node]) => (
+        <React.Fragment key={key}>{node}</React.Fragment>
+      ))}
+    </>
+  )
+}
+PortalHost.displayName = "PortalHost"
+
+export const Portal = ({
+  name,
+  hostName = DEFAULT_HOST,
+  children
+}: {
+  name: string
+  hostName?: string
+  children: React.ReactNode
+}) => {
+  React.useEffect(() => {
+    const host = portals.get(hostName) ?? new Map()
+    host.set(name, children)
+    portals.set(hostName, host)
+    version += 1
+    notify()
+  }, [hostName, name, children])
+
+  React.useEffect(
+    () => () => {
+      portals.get(hostName)?.delete(name)
+      version += 1
+      notify()
+    },
+    [hostName, name]
+  )
+
+  return null
+}
+Portal.displayName = "Portal"
+
+export const useModalPortalRoot = () => ({
+  ref: { current: null },
+  sideOffset: 0,
+  onLayout: () => {},
+  style: { flex: 1 }
+})

package/src/components/atoms/Input/InputField.tsx

@@ -27,6 +27,7 @@ type InputFieldOwnProps = {
   containerWidth?: number
   containerHeight?: number
   hasInlineHelp?: boolean
+  onPress?: () => void
 }
 
 export type InputFieldProps = InputFieldOwnProps &
@@ -131,6 +132,7 @@ export const InputField = React.forwardRef<TextInput, InputFieldProps>(
       editable,
       onFocus,
       onBlur,
+      onPress,
       ...rest
     },
     ref
@@ -154,7 +156,11 @@ export const InputField = React.forwardRef<TextInput, InputFieldProps>(
       },
       [ref]
     )
-    const isDisabled = editable === false
+    // `editable={false}` on its own means a disabled field. Paired with
+    // `onPress` it means a field that displays a value and opens something else
+    // (e.g. SelectDrawerField), which is interactive and must not render in the
+    // disabled palette.
+    const isDisabled = editable === false && onPress === undefined
     const hasState = state === "error" || state === "success"
 
     const baseBorderWidth = parseTokenValue(borderWidth.field.default)
@@ -242,7 +248,7 @@ export const InputField = React.forwardRef<TextInput, InputFieldProps>(
     }
 
     return (
-      <Pressable onPress={handleWrapperPress}>
+      <Pressable onPress={onPress ?? handleWrapperPress}>
         <StyledInputWrapper
           isDisabled={isDisabled}
           containerWidth={containerWidth}
@@ -275,6 +281,10 @@ export const InputField = React.forwardRef<TextInput, InputFieldProps>(
             style={style}
             placeholderTextColor={colour.field.text.placeholder}
             editable={editable}
+            // A non-editable TextInput still captures touches in its own area
+            // and does nothing with them, so without this only taps on the
+            // surrounding padding would reach the wrapper's `onPress`.
+            pointerEvents={onPress ? "none" : undefined}
             onFocus={handleFocus}
             onBlur={handleBlur}
             hasInlineHelp={hasInlineHelp}

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

@@ -1,7 +1,9 @@
 import React from "react"
-import { screen, fireEvent } from "@testing-library/react"
-import { describe, it, expect, vi } from "vitest"
+import { screen, fireEvent, act } from "@testing-library/react"
+import { describe, it, expect, vi, afterEach } from "vitest"
+import { Keyboard } from "react-native"
 import { renderWithTheme } from "../../../test-utils"
+import { Typography } from "../../atoms/Typography"
 import { Drawer } from "./Drawer"
 
 const BasicDrawer = ({
@@ -40,6 +42,56 @@ const BasicDrawer = ({
   </Drawer.Root>
 )
 
+describe("Drawer keyboard lift", () => {
+  afterEach(() => {
+    Keyboard.emit("keyboardDidHide", {
+      endCoordinates: { height: 0 },
+      duration: 0
+    })
+  })
+
+  it("renders its content while the keyboard is closed", () => {
+    renderWithTheme(
+      <Drawer.Root defaultOpen>
+        <Drawer.Portal>
+          <Drawer.Overlay />
+          <Drawer.Content>
+            <Drawer.Body>
+              <Typography>Row one</Typography>
+            </Drawer.Body>
+          </Drawer.Content>
+        </Drawer.Portal>
+      </Drawer.Root>
+    )
+
+    expect(screen.getByText("Row one")).toBeInTheDocument()
+  })
+
+  it("keeps its content when the keyboard opens", () => {
+    renderWithTheme(
+      <Drawer.Root defaultOpen>
+        <Drawer.Portal>
+          <Drawer.Overlay />
+          <Drawer.Content>
+            <Drawer.Body>
+              <Typography>Row one</Typography>
+            </Drawer.Body>
+          </Drawer.Content>
+        </Drawer.Portal>
+      </Drawer.Root>
+    )
+
+    act(() => {
+      Keyboard.emit("keyboardWillShow", {
+        endCoordinates: { height: 336 },
+        duration: 250
+      })
+    })
+
+    expect(screen.getByText("Row one")).toBeInTheDocument()
+  })
+})
+
 describe("Drawer", () => {
   describe("rendering", () => {
     it("renders the trigger", () => {

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

@@ -6,11 +6,8 @@ import { useSafeAreaInsets } from "react-native-safe-area-context"
 import { useDrawerHeaderContext } from "./DrawerHeaderContext"
 import { useDrawerFooterContext } from "./DrawerFooterContext"
 import { useDrawerBodyMax } from "./DrawerBodyMaxContext"
-import { useDrawerKeyboardAvoidance } from "../../../hooks/useDrawerKeyboardAvoidance"
 
-export type DrawerBodyProps = ScrollViewProps & {
-  ignoreKeyboardAvoidance?: boolean
-}
+export type DrawerBodyProps = ScrollViewProps
 
 const parseTokenValue = (value: string): number => parseFloat(value)
 
@@ -43,15 +40,7 @@ const StyledScrollView = styled(ScrollView)<{
  * chrome-aware `maxHeight`, scrolling beyond that.
  */
 export const DrawerBody = React.forwardRef<ScrollView, DrawerBodyProps>(
-  (
-    {
-      children,
-      contentContainerStyle,
-      ignoreKeyboardAvoidance = false,
-      ...props
-    },
-    ref
-  ) => {
+  ({ children, contentContainerStyle, ...props }, ref) => {
     const theme = useTheme()
     const { spacing } = theme.tokens.components.drawer
     const { buttons } = theme.tokens.components
@@ -61,9 +50,6 @@ export const DrawerBody = React.forwardRef<ScrollView, DrawerBodyProps>(
     const providedMaxHeight = useDrawerBodyMax()
     const { height: windowHeight } = useWindowDimensions()
     const insets = useSafeAreaInsets()
-    const { contentContainerStyle: keyboardStyle } =
-      useDrawerKeyboardAvoidance()
-    const effectiveKeyboardStyle = ignoreKeyboardAvoidance ? {} : keyboardStyle
 
     const gap = parseTokenValue(content.slot.gap)
     const horizontalPadding = parseTokenValue(content.slot.horizontalPadding)
@@ -107,7 +93,6 @@ export const DrawerBody = React.forwardRef<ScrollView, DrawerBodyProps>(
             paddingTop: topPadding,
             paddingBottom: 0
           },
-          effectiveKeyboardStyle,
           contentContainerStyle
         ]}
         {...props}

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

@@ -5,6 +5,8 @@ import {
   PanResponder,
   StyleSheet,
   View,
+  Keyboard,
+  Platform,
   useWindowDimensions,
   type ViewProps
 } from "react-native"
@@ -22,6 +24,7 @@ import {
 
 export type DrawerContentProps = Omit<ViewProps, "style">
 
+const KEYBOARD_DURATION = 250
 const OPEN_DURATION = 320
 const CLOSE_DURATION = 220
 const DISMISS_THRESHOLD = 80
@@ -108,7 +111,9 @@ export const DrawerContent = React.forwardRef<View, DrawerContentProps>(
     const { isOpen, closeDrawer, onExitComplete } = useDrawerContext()
 
     const { height: windowHeight } = useWindowDimensions()
-    const maxHeight = windowHeight * 0.9
+    const [keyboardHeight, setKeyboardHeight] = useState(0)
+    const keyboardSpacer = useRef(new Animated.Value(0)).current
+    const maxHeight = (windowHeight - keyboardHeight) * 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.
@@ -134,6 +139,7 @@ export const DrawerContent = React.forwardRef<View, DrawerContentProps>(
     // ScrollView's `maxHeight`, so tall content scrolls within the cap and short
     // content lets the panel wrap tight. Null until the chrome is measured, in
     // which case DrawerBody falls back to its own window-based heuristic.
+    const applyBodyMaxRef = useRef<(() => void) | null>(null)
     const [bodyMax, setBodyMax] = useState<number | null>(null)
     const bodyMaxRef = useRef<number | null>(null)
 
@@ -153,6 +159,39 @@ export const DrawerContent = React.forwardRef<View, DrawerContentProps>(
       return () => translateY.removeListener(id)
     }, [translateY])
 
+    useEffect(() => {
+      const showEvent =
+        Platform.OS === "ios" ? "keyboardWillShow" : "keyboardDidShow"
+      const hideEvent =
+        Platform.OS === "ios" ? "keyboardWillHide" : "keyboardDidHide"
+
+      // Height, not transform: translating the panel would lift it off the
+      // bottom of the screen and show the backdrop beneath it. Height can't be
+      // native-driven, but it is one view for the keyboard's own duration.
+      const lift = (toValue: number, duration: number | undefined) => {
+        Animated.timing(keyboardSpacer, {
+          toValue,
+          duration: duration && duration > 0 ? duration : KEYBOARD_DURATION,
+          easing: Easing.out(Easing.ease),
+          useNativeDriver: false
+        }).start()
+      }
+
+      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)
+      })
+
+      return () => {
+        shown.remove()
+        hidden.remove()
+      }
+    }, [keyboardSpacer])
+
     // Clamp the cached panel height when the window shrinks (e.g. orientation
     // change) so the entry animation never starts from below the screen. This
     // is animation-only bookkeeping — the panel itself sizes from its content.
@@ -162,6 +201,10 @@ export const DrawerContent = React.forwardRef<View, DrawerContentProps>(
       }
     }, [maxHeight])
 
+    useEffect(() => {
+      applyBodyMaxRef.current?.()
+    }, [maxHeight])
+
     const runEntry = useCallback(() => {
       if (panelHeightRef.current === 0) return
       translateY.setValue(panelHeightRef.current)
@@ -236,6 +279,8 @@ export const DrawerContent = React.forwardRef<View, DrawerContentProps>(
       }
     }, [measureChrome, maxHeight])
 
+    applyBodyMaxRef.current = applyBodyMax
+
     const setHeaderHeight = useCallback(
       (height: number) => {
         if (height <= 0 || Math.abs(height - headerHeightRef.current) < 1)
@@ -370,6 +415,7 @@ export const DrawerContent = React.forwardRef<View, DrawerContentProps>(
           <DrawerMeasureContext.Provider value={measureContextValue}>
             <DrawerDragContext.Provider value={dragContextValue}>
               <Animated.View
+                pointerEvents="box-none"
                 style={[
                   styles.animatedWrapper,
                   { transform: [{ translateY }] }
@@ -381,7 +427,7 @@ export const DrawerContent = React.forwardRef<View, DrawerContentProps>(
                   panelBorderRadius={parseTokenValue(drawer.borderRadius.top)}
                   panelBgColor={colour.background.container.default}
                   panelMaxWidth={parseTokenValue(drawer.size.maxWidth)}
-                  panelMaxHeight={maxHeight}
+                  panelMaxHeight={maxHeight + keyboardHeight}
                   panelBorderWidth={parseTokenValue(dimensions.borderWidth.sm)}
                   panelBorderColor={colour.border.default}
                   panelShadowColor={modal.shadow.color}
@@ -395,6 +441,7 @@ export const DrawerContent = React.forwardRef<View, DrawerContentProps>(
                   <DrawerBodyMaxContext.Provider value={bodyMax}>
                     {children}
                   </DrawerBodyMaxContext.Provider>
+                  <Animated.View style={{ height: keyboardSpacer }} />
                 </StyledPanel>
               </Animated.View>
             </DrawerDragContext.Provider>

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

@@ -1,5 +1,10 @@
 import React, { useEffect, useRef } from "react"
-import { Animated, Pressable, StyleSheet } from "react-native"
+import {
+  Animated,
+  Pressable,
+  StyleSheet,
+  useWindowDimensions
+} from "react-native"
 import { useTheme } from "@emotion/react"
 import { useDrawerContext } from "./DrawerContext"
 
@@ -19,6 +24,7 @@ export const DrawerOverlay = React.forwardRef<
   DrawerOverlayProps
 >(({ accessible = false }, _ref) => {
   const theme = useTheme()
+  const { width: screenWidth, height: screenHeight } = useWindowDimensions()
   const { isOpen, closeDrawer, backdrop } = useDrawerContext()
   const opacity = useRef(new Animated.Value(0)).current
 
@@ -34,22 +40,28 @@ export const DrawerOverlay = React.forwardRef<
   if (!backdrop) return null
 
   return (
-    <Pressable
-      style={StyleSheet.absoluteFillObject}
-      onPress={closeDrawer}
-      accessible={accessible}
-      accessibilityLabel="Close drawer"
+    <Animated.View
+      pointerEvents="box-none"
+      style={[
+        StyleSheet.absoluteFillObject,
+        { width: screenWidth, height: screenHeight, opacity }
+      ]}
     >
-      <Animated.View
-        style={[
-          StyleSheet.absoluteFillObject,
-          {
-            backgroundColor: theme.tokens.components.modal.overlay.colour,
-            opacity
-          }
-        ]}
-      />
-    </Pressable>
+      <Pressable
+        style={{ width: screenWidth, height: screenHeight }}
+        onPress={closeDrawer}
+        accessible={accessible}
+        accessibilityLabel="Close drawer"
+      >
+        <Animated.View
+          style={{
+            width: screenWidth,
+            height: screenHeight,
+            backgroundColor: theme.tokens.components.modal.overlay.colour
+          }}
+        />
+      </Pressable>
+    </Animated.View>
   )
 })