@butternutbox/pawprint-native 0.17.0 → 0.18.0

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

@@ -1,5 +1,11 @@
-import React, { useMemo } from "react"
-import { Image, ImageSourcePropType, View, ViewProps } from "react-native"
+import React, { useCallback, useMemo } from "react"
+import {
+  Image,
+  ImageSourcePropType,
+  View,
+  ViewProps,
+  type LayoutChangeEvent
+} from "react-native"
 import styled from "@emotion/native"
 import { useTheme } from "@emotion/react"
 import { DrawerClose } from "./DrawerClose"
@@ -8,6 +14,7 @@ import {
   type DrawerHeaderVariant
 } from "./DrawerHeaderContext"
 import { useDrawerDragContext } from "./DrawerDragContext"
+import { useDrawerMeasureContext } from "./DrawerMeasureContext"
 
 const parseTokenValue = (value: string): number => parseFloat(value)
 
@@ -139,11 +146,25 @@ function splitChildren(children: React.ReactNode) {
  * @param {ImageSourcePropType} [imageSource] - Image source for the `image` variant
  */
 export const DrawerHeader = React.forwardRef<View, DrawerHeaderProps>(
-  ({ variant = "titleAndText", imageSource, children, ...props }, ref) => {
+  (
+    { variant = "titleAndText", imageSource, children, onLayout, ...props },
+    ref
+  ) => {
     const theme = useTheme()
     const { drawer, grabber } = theme.tokens.components
     const { colour, dimensions } = theme.tokens.semantics
     const dragContext = useDrawerDragContext()
+    const measureContext = useDrawerMeasureContext()
+
+    // Report the header's measured height so DrawerContent can reserve it as
+    // chrome directly (rather than deriving it from the panel minus the body).
+    const handleLayout = useCallback(
+      (event: LayoutChangeEvent): void => {
+        measureContext?.setHeaderHeight(event.nativeEvent.layout.height)
+        onLayout?.(event)
+      },
+      [measureContext, onLayout]
+    )
 
     const contextValue = useMemo(() => ({ variant }), [variant])
     const { closeChild, otherChildren } = splitChildren(children)
@@ -219,6 +240,7 @@ export const DrawerHeader = React.forwardRef<View, DrawerHeaderProps>(
               ? drawer.drawerHeader.colour.background.fullBleed
               : undefined
           }
+          onLayout={handleLayout}
           {...props}
         >
           <StyledGrabberWrapper

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

@@ -1,14 +1,17 @@
 import { createContext, useContext } from "react"
 
 /**
- * Lets `DrawerBody` report its scroll content's natural height up to
- * `DrawerContent`, which uses it to re-fit the panel when the content grows or
- * shrinks after open. A ScrollView's content size is measured in an unbounded
- * container, so it reflects the true content height independently of the
- * ScrollView's own (bounded) frame — no measurement feedback loop.
+ * Lets the header and footer report their measured heights up to
+ * `DrawerContent`, which uses them to derive the body ScrollView's chrome-aware
+ * `maxHeight` (`90%·window − header − footer − border`). Measuring the chrome
+ * directly (not by subtraction) keeps that cap correct even when the body grows
+ * after the first layout, so tall content scrolls inside the cap and the footer
+ * is never clipped. The panel itself wraps its content, so there is no body
+ * content-height measurement and no feedback loop.
  */
 export type DrawerMeasureContextValue = {
-  setBodyContentHeight: (height: number) => void
+  setHeaderHeight: (height: number) => void
+  setFooterHeight: (height: number) => void
 }
 
 export const DrawerMeasureContext =

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

@@ -19,7 +19,7 @@ export const DrawerOverlay = React.forwardRef<
   DrawerOverlayProps
 >(({ accessible = false }, _ref) => {
   const theme = useTheme()
-  const { isOpen, closeDrawer } = useDrawerContext()
+  const { isOpen, closeDrawer, backdrop } = useDrawerContext()
   const opacity = useRef(new Animated.Value(0)).current
 
   useEffect(() => {
@@ -30,6 +30,9 @@ export const DrawerOverlay = React.forwardRef<
     }).start()
   }, [isOpen, opacity])
 
+  // A backdrop-less drawer omits the dimming/tap-to-dismiss overlay entirely.
+  if (!backdrop) return null
+
   return (
     <Pressable
       style={StyleSheet.absoluteFillObject}

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

@@ -0,0 +1,21 @@
+import { createContext, useContext, type ComponentType } from "react"
+
+/**
+ * Optional app-provided component rendered on top of *every* modal drawer,
+ * inside the drawer's native `Modal` window.
+ *
+ * A native `Modal` is a separate OS window, so anything mounted at the app root
+ * — e.g. a toast/notification stack — is painted *behind* the drawer. Pointing
+ * this context at that root overlay lets the app render a second instance inside
+ * the drawer's Modal, so it surfaces above the drawer for all modal drawers at
+ * once, with no per-drawer wiring. React context flows through RN Modals, so the
+ * in-Modal instance reads the same app state as the root one.
+ *
+ * Defaults to `null` (nothing extra rendered) — fully opt-in and backward
+ * compatible. Only applies to modal (backdrop) drawers; backdrop-less drawers
+ * render inline, where the app-root overlay already paints on top.
+ */
+export const DrawerOverlayContext = createContext<ComponentType | null>(null)
+
+export const useDrawerOverlay = (): ComponentType | null =>
+  useContext(DrawerOverlayContext)

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

@@ -2,7 +2,8 @@ export { Drawer } from "./Drawer"
 export type {
   DrawerProps,
   DrawerTriggerProps,
-  DrawerPortalProps
+  DrawerPortalProps,
+  DrawerOverlayProviderProps
 } from "./Drawer"
 export type { DrawerContentProps } from "./DrawerContent"
 export type { DrawerOverlayProps } from "./DrawerOverlay"