@butternutbox/pawprint-native 0.16.1 → 0.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@butternutbox/pawprint-native",
-  "version": "0.16.1",
+  "version": "0.18.0",
   "type": "module",
   "description": "ButternutBox Pawprint Design System - React Native Components",
   "main": "./dist/index.cjs",
@@ -22,7 +22,7 @@
     "test": "vitest run"
   },
   "dependencies": {
-    "@butternutbox/pawprint-tokens": "^0.3.0",
+    "@butternutbox/pawprint-tokens": "^0.4.0",
     "@emotion/native": "^11.11.0",
     "@emotion/react": "^11.14.0",
     "@rn-primitives/avatar": "^1.4.0",

package/src/components/atoms/Button/Button.stories.tsx

@@ -3,6 +3,11 @@ import { View, StyleSheet } from "react-native"
 import { Button } from "./Button"
 import type { ButtonProps } from "./Button"
 import { Typography } from "../Typography"
+import { Icon } from "../Icon"
+import { Check } from "@butternutbox/pawprint-icons/core"
+import { IosShare, Whatsapp } from "@butternutbox/pawprint-icons/marketing"
+
+import { KeyboardDoubleArrowDown } from "@butternutbox/pawprint-icons/core"
 
 export default {
   title: "Atoms/Button",
@@ -118,6 +123,45 @@ export const AllStates = () => (
   </View>
 )
 
+export const WithStartIcon = () => (
+  <View style={styles.column}>
+    {(["sm", "md", "lg"] as const).map((size) => (
+      <View key={size} style={styles.section}>
+        <Typography size="sm" weight="semiBold" color="tertiary">
+          {size}
+        </Typography>
+        <View style={styles.row}>
+          <Button
+            size={size}
+            startIcon={<Icon icon={KeyboardDoubleArrowDown} colour="primary" />}
+          >
+            Add
+          </Button>
+          <Button
+            size={size}
+            startIcon={<Icon icon={IosShare} colour="success" />}
+          >
+            Search
+          </Button>
+          <Button
+            size={size}
+            startIcon={<Icon icon={Whatsapp} colour="warning" />}
+          >
+            Settings
+          </Button>
+          <Button
+            size={size}
+            startIcon={<Icon icon={Check} colour="error" />}
+            colour="secondary"
+          >
+            Confirm
+          </Button>
+        </View>
+      </View>
+    ))}
+  </View>
+)
+
 export const FullWidth = () => (
   <View style={styles.column}>
     {(["filled", "outlined", "text"] as const).map((variant) => (

package/src/components/atoms/Icon/Icon.tsx

@@ -4,7 +4,7 @@ import styled from "@emotion/native"
 import { useTheme } from "@emotion/react"
 
 type IconCategory = "core" | "marketing" | "payments" | "flags"
-type IconSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+type IconSize = "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
 type IconColour =
   | "primary"
   | "secondary"

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

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { Modal, StyleSheet, View, type ViewProps } from "react-native"
 import { Slot } from "@rn-primitives/slot"
 import { DrawerContext } from "./DrawerContext"
+import { DrawerOverlayContext, useDrawerOverlay } from "./DrawerOverlayContext"
 import { DrawerOverlay } from "./DrawerOverlay"
 import { DrawerContent } from "./DrawerContent"
 import { DrawerGrabber } from "./DrawerGrabber"
@@ -18,6 +19,16 @@ type DrawerRootOwnProps = {
   open?: boolean
   defaultOpen?: boolean
   onOpenChange?: (open: boolean) => void
+  /**
+   * Whether the drawer shows a dimming backdrop and presents as a blocking
+   * modal (default `true`). Set to `false` for a backdrop-less, pass-through
+   * drawer: it renders inline instead of in a native `Modal`, omits the
+   * overlay, and lets touches outside the panel reach the content behind it
+   * (so e.g. a calendar stays interactive while the sheet is open). In this
+   * mode the root fills the screen with `pointerEvents="box-none"` so the
+   * panel's bottom-anchored positioning still resolves against the full screen.
+   */
+  backdrop?: boolean
   children: React.ReactNode
 }
 
@@ -59,7 +70,10 @@ const DrawerRoot = React.forwardRef<View, DrawerProps>(
       open: controlledOpen,
       defaultOpen = false,
       onOpenChange,
+      backdrop = true,
       children,
+      style,
+      pointerEvents,
       ...rest
     },
     ref
@@ -93,13 +107,32 @@ const DrawerRoot = React.forwardRef<View, DrawerProps>(
     }, [])
 
     const ctx = useMemo(
-      () => ({ isOpen, modalVisible, openDrawer, closeDrawer, onExitComplete }),
-      [isOpen, modalVisible, openDrawer, closeDrawer, onExitComplete]
+      () => ({
+        isOpen,
+        modalVisible,
+        backdrop,
+        openDrawer,
+        closeDrawer,
+        onExitComplete
+      }),
+      [isOpen, modalVisible, backdrop, openDrawer, closeDrawer, onExitComplete]
     )
 
     return (
       <DrawerContext.Provider value={ctx}>
-        <View ref={ref} {...rest}>
+        <View
+          ref={ref}
+          // A backdrop-less drawer renders inline, so its root must fill the
+          // screen (and stay touch-transparent) for the panel's bottom-anchored
+          // positioning to resolve against the full screen. A normal modal
+          // drawer keeps its inline, content-sized wrapper (the panel lives in a
+          // separate native Modal window).
+          style={backdrop ? style : [StyleSheet.absoluteFill, style]}
+          pointerEvents={
+            backdrop ? pointerEvents : (pointerEvents ?? "box-none")
+          }
+          {...rest}
+        >
           {children}
         </View>
       </DrawerContext.Provider>
@@ -148,10 +181,24 @@ export type DrawerPortalProps = {
  * @param topContent - *(optional)* Additional content rendered on top of the drawer
  */
 const DrawerPortal = ({ children, topContent }: DrawerPortalProps) => {
-  const { modalVisible, closeDrawer } = React.useContext(DrawerContext)
+  const { modalVisible, closeDrawer, backdrop } =
+    React.useContext(DrawerContext)
+  const OverlayComponent = useDrawerOverlay()
 
   if (!modalVisible) return null
 
+  // Backdrop-less drawers render inline (no native Modal) inside the root's
+  // absolute-fill / box-none layer, so touches outside the panel pass through
+  // to the content behind and app-level overlays (toasts) stay above the panel.
+  if (!backdrop) {
+    return (
+      <>
+        {children}
+        {topContent}
+      </>
+    )
+  }
+
   return (
     <Modal
       visible
@@ -163,6 +210,9 @@ const DrawerPortal = ({ children, topContent }: DrawerPortalProps) => {
       <View style={styles.modalContainer}>
         {children}
         {topContent}
+        {/* App-provided overlay (e.g. toasts) rendered inside the Modal so it
+            paints above the drawer instead of behind this native window. */}
+        {OverlayComponent ? <OverlayComponent /> : null}
       </View>
     </Modal>
   )
@@ -170,12 +220,42 @@ const DrawerPortal = ({ children, topContent }: DrawerPortalProps) => {
 
 DrawerPortal.displayName = "Drawer.Portal"
 
+// ─── Overlay provider ─────────────────────────────────────────────────────────
+
+export type DrawerOverlayProviderProps = {
+  /**
+   * Component rendered on top of every modal drawer, inside the drawer's native
+   * Modal window (e.g. an app's toast/notification stack). Pass `null` to render
+   * nothing extra.
+   */
+  component: React.ComponentType | null
+  children: React.ReactNode
+}
+
+/**
+ * Provides an app-level overlay component that every modal `Drawer` renders
+ * inside its native Modal, so app-root overlays (e.g. toasts) surface above the
+ * drawer rather than behind its OS window. Mount once, high in the app tree,
+ * around everything that opens drawers.
+ */
+const DrawerOverlayProvider = ({
+  component,
+  children
+}: DrawerOverlayProviderProps): React.ReactElement => (
+  <DrawerOverlayContext.Provider value={component}>
+    {children}
+  </DrawerOverlayContext.Provider>
+)
+
+DrawerOverlayProvider.displayName = "Drawer.OverlayProvider"
+
 // ─── Compound export ──────────────────────────────────────────────────────────
 
 export const Drawer = Object.assign(DrawerRoot, {
   Root: DrawerRoot,
   Trigger: DrawerTrigger,
   Portal: DrawerPortal,
+  OverlayProvider: DrawerOverlayProvider,
   Overlay: DrawerOverlay,
   Content: DrawerContent,
   Grabber: DrawerGrabber,

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

@@ -1,10 +1,10 @@
-import React, { useCallback } from "react"
+import React from "react"
 import { ScrollView, ScrollViewProps, useWindowDimensions } from "react-native"
 import styled from "@emotion/native"
 import { useTheme } from "@emotion/react"
 import { useDrawerHeaderContext } from "./DrawerHeaderContext"
 import { useDrawerFooterContext } from "./DrawerFooterContext"
-import { useDrawerMeasureContext } from "./DrawerMeasureContext"
+import { useDrawerBodyMax } from "./DrawerBodyMaxContext"
 
 export type DrawerBodyProps = ScrollViewProps
 
@@ -13,55 +13,50 @@ const parseTokenValue = (value: string): number => parseFloat(value)
 const StyledScrollView = styled(ScrollView)<{
   bodyPaddingHorizontal: number
   bodyPaddingRight: number
-  bodyGap: number
   bodyMaxHeight: number
   bodyPaddingBottom: number
 }>(
   ({
     bodyPaddingHorizontal,
     bodyPaddingRight,
-    bodyGap,
     bodyMaxHeight,
     bodyPaddingBottom
   }) => ({
-    flex: 1,
+    // 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,
-    gap: bodyGap,
     maxHeight: bodyMaxHeight,
     paddingBottom: bodyPaddingBottom
   })
 )
 
 /**
- * Scrollable content area of the drawer. Grows to fill available space
- * between the header and footer.
+ * 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, onContentSizeChange, ...props }, ref) => {
+  ({ children, contentContainerStyle, ...props }, ref) => {
     const theme = useTheme()
     const { spacing } = theme.tokens.components.drawer
     const { buttons } = theme.tokens.components
     const { content } = spacing
     const headerContext = useDrawerHeaderContext()
     const footerContext = useDrawerFooterContext()
-    const measureContext = useDrawerMeasureContext()
+    const providedMaxHeight = useDrawerBodyMax()
     const { height: windowHeight } = useWindowDimensions()
 
-    // Report the scroll content's natural height so DrawerContent can re-fit
-    // the panel when the body grows or shrinks.
-    const handleContentSizeChange = useCallback(
-      (width: number, height: number): void => {
-        measureContext?.setBodyContentHeight(height)
-        onContentSizeChange?.(width, height)
-      },
-      [measureContext, onContentSizeChange]
-    )
-
     const gap = parseTokenValue(content.slot.gap)
     const horizontalPadding = parseTokenValue(content.slot.horizontalPadding)
     const topPadding = parseTokenValue(content.slot.verticalPadding)
-    const bodyMaxHeight = windowHeight - 300
+
+    // Prefer the chrome-aware cap from DrawerContent (90%·window minus the
+    // measured header/footer). Fall back to a window-based heuristic until the
+    // chrome has been measured, so the body still scrolls on the first layout.
+    const bodyMaxHeight = providedMaxHeight ?? windowHeight - 300
 
     // 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.
@@ -80,10 +75,8 @@ export const DrawerBody = React.forwardRef<ScrollView, DrawerBodyProps>(
         ref={ref}
         bodyPaddingHorizontal={horizontalPadding}
         bodyPaddingRight={paddingRight}
-        bodyGap={gap}
         bodyMaxHeight={bodyMaxHeight}
         bodyPaddingBottom={bodyPaddingBottom}
-        onContentSizeChange={handleContentSizeChange}
         contentContainerStyle={[
           {
             gap,

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

@@ -0,0 +1,21 @@
+import { createContext, useContext } from "react"
+
+/**
+ * Maximum height the body's ScrollView may occupy, computed by `DrawerContent`
+ * as the panel's height cap (90% of the window) minus the *measured* header and
+ * footer chrome.
+ *
+ * DrawerBody used to cap itself with a fixed `windowHeight - 300` heuristic that
+ * assumed a roughly constant chrome. When the footer (or header) is tall, that
+ * heuristic leaves the body too big, so `header + body + footer` exceeds the
+ * capped panel height and the footer — with its action button — is pushed past
+ * the panel's bottom edge and off-screen. Deriving the cap from the real chrome
+ * keeps the three sections inside the panel, so the footer is never clipped.
+ *
+ * `null` until the chrome has been measured; DrawerBody falls back to its own
+ * window-based heuristic in the meantime.
+ */
+export const DrawerBodyMaxContext = createContext<number | null>(null)
+
+export const useDrawerBodyMax = (): number | null =>
+  useContext(DrawerBodyMaxContext)

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

@@ -13,6 +13,7 @@ import { useTheme } from "@emotion/react"
 import { DrawerDragContext } from "./DrawerDragContext"
 import { DrawerMeasureContext } from "./DrawerMeasureContext"
 import { useDrawerContext } from "./DrawerContext"
+import { DrawerBodyMaxContext } from "./DrawerBodyMaxContext"
 import { DrawerFooterContext } from "./DrawerFooterContext"
 import {
   DrawerHeaderContext,
@@ -31,28 +32,28 @@ const StyledPanel = styled(View)<{
   panelBorderRadius: number
   panelBgColor: string
   panelMaxWidth: number
+  panelMaxHeight: number
   panelBorderWidth: number
   panelBorderColor: string
   panelShadowColor: string
   panelShadowOffsetY: number
   panelShadowBlur: number
-  panelFlex?: number
 }>(
   ({
     panelBorderRadius,
     panelBgColor,
     panelMaxWidth,
+    panelMaxHeight,
     panelBorderWidth,
     panelBorderColor,
     panelShadowColor,
     panelShadowOffsetY,
-    panelShadowBlur,
-    panelFlex
+    panelShadowBlur
   }) => ({
     width: "100%",
     maxWidth: panelMaxWidth,
+    maxHeight: panelMaxHeight,
     alignSelf: "center",
-    ...(panelFlex != null ? { flex: panelFlex } : undefined),
     borderTopLeftRadius: panelBorderRadius,
     borderTopRightRadius: panelBorderRadius,
     borderTopWidth: panelBorderWidth,
@@ -74,13 +75,13 @@ const StyledPanel = styled(View)<{
  * the screen. Uses React Native `Animated` for entrance/exit and `PanResponder`
  * on the grabber for drag-to-dismiss.
  *
- * The panel is given an explicit height (needed so DrawerBody's `flex: 1`
- * ScrollView has a bounded parent and doesn't collapse). That height re-fits
- * when the body content changes: DrawerBody reports its natural scroll-content
- * height, and the panel is sized to `chrome + min(content, bodyMax)` (capped at
- * 90% of the window). `chrome` (header + footer + padding + borders) is
- * measured once from the first, unbounded layout and is invariant thereafter,
- * so there is no measurement feedback loop.
+ * The panel **wraps its content naturally** (no explicit height) and is capped
+ * at 90% of the window via `maxHeight`. The body's `ScrollView` self-sizes to
+ * its content up to a `maxHeight` of `90%·window − chrome`, where `chrome`
+ * (header + footer + border) is measured *directly* from the header and footer
+ * sections. So short content lets the panel wrap tight (no gap), and tall
+ * content scrolls inside the cap (no clipped footer) — without any
+ * explicit-height / content-measurement feedback loop.
  *
  * Must be rendered inside `Drawer.Portal`.
  *
@@ -108,10 +109,11 @@ export const DrawerContent = React.forwardRef<View, DrawerContentProps>(
 
     const { height: windowHeight } = useWindowDimensions()
     const maxHeight = windowHeight * 0.9
-    // Tallest the body content grows before it scrolls. Kept in sync with the
-    // `maxHeight` DrawerBody sets on its own ScrollView, so the panel's re-fit
-    // cap and the body's scroll cap agree.
-    const bodyMaxHeight = windowHeight - 300
+
+    // 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.
+    const topBorder = parseTokenValue(dimensions.borderWidth.sm)
+    const noFooterBodyPadding = parseTokenValue(dimensions.spacing["2xl"])
 
     // Keep a ref so the PanResponder (created once) always calls the latest
     // closeDrawer without becoming a stale closure.
@@ -127,18 +129,22 @@ export const DrawerContent = React.forwardRef<View, DrawerContentProps>(
     const isOpenRef = useRef(isOpen)
     const activeAnim = useRef<Animated.CompositeAnimation | null>(null)
 
-    // Explicit panel height (capped at maxHeight). Applied to the wrapper +
-    // flex:1 on the panel so DrawerBody's ScrollView gets a bounded container
-    // and can scroll correctly.
-    const [panelHeight, setPanelHeight] = useState(0)
-
-    // Re-fit inputs. `chrome` is the invariant non-body height (header + footer
-    // + padding + borders); `bodyContent` is the body's natural content height;
-    // `firstNatural` is the panel's natural height at the first unbounded layout
-    // (before an explicit height is applied), used to derive chrome exactly.
-    const chromeRef = useRef(0)
-    const bodyContentRef = useRef(0)
-    const firstNaturalRef = useRef(0)
+    // Max height the body's ScrollView may occupy: the 90%-of-window cap minus
+    // the measured header/footer chrome. Provided down to DrawerBody as the
+    // 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 [bodyMax, setBodyMax] = useState<number | null>(null)
+    const bodyMaxRef = useRef<number | null>(null)
+
+    // The header/footer heights are measured directly by those sections and
+    // reported up, so the body's chrome-aware `maxHeight` stays correct.
+    // `hasHeader`/`hasFooter` (set during render) tell the calc whether to wait
+    // for those measurements.
+    const headerHeightRef = useRef(0)
+    const footerHeightRef = useRef(0)
+    const hasHeaderRef = useRef(false)
+    const hasFooterRef = useRef(false)
 
     useEffect(() => {
       const id = translateY.addListener(({ value }) => {
@@ -148,10 +154,10 @@ export const DrawerContent = React.forwardRef<View, DrawerContentProps>(
     }, [translateY])
 
     // Clamp the cached panel height when the window shrinks (e.g. orientation
-    // change) so the entry animation never starts from below the screen.
+    // change) so the entry animation never starts from below the screen. This
+    // is animation-only bookkeeping — the panel itself sizes from its content.
     useEffect(() => {
-      if (panelHeightRef.current > 0 && panelHeightRef.current > maxHeight) {
-        setPanelHeight(maxHeight)
+      if (panelHeightRef.current > maxHeight) {
         panelHeightRef.current = maxHeight
       }
     }, [maxHeight])
@@ -203,79 +209,73 @@ export const DrawerContent = React.forwardRef<View, DrawerContentProps>(
       }
     }, [isOpen, runEntry, runExit])
 
-    // Desired panel height = chrome + body content (clamped to bodyMax, then
-    // maxHeight). Only sets state when it actually changes, to avoid loops.
-    const applyRefit = useCallback(() => {
-      const chrome = chromeRef.current
-      const content = bodyContentRef.current
-      if (chrome <= 0 || content <= 0) return
-      const desired = Math.min(
-        chrome + Math.min(content, bodyMaxHeight),
-        maxHeight
-      )
-      if (Math.abs(desired - panelHeightRef.current) > 1) {
-        panelHeightRef.current = desired
-        setPanelHeight(desired)
+    // Non-body chrome, measured directly: header + footer heights + the panel's
+    // top border, plus (when there's no footer) the body's own bottom padding.
+    // Returns 0 until every *present* section has reported, so the re-fit waits
+    // rather than sizing the panel from a partial chrome.
+    const measureChrome = useCallback((): number => {
+      if (hasHeaderRef.current && headerHeightRef.current <= 0) return 0
+      if (hasFooterRef.current && footerHeightRef.current <= 0) return 0
+      const header = hasHeaderRef.current ? headerHeightRef.current : 0
+      const footer = hasFooterRef.current ? footerHeightRef.current : 0
+      const bodyBottomPad = hasFooterRef.current ? 0 : noFooterBodyPadding
+      return header + footer + topBorder + bodyBottomPad
+    }, [noFooterBodyPadding, topBorder])
+
+    // Recompute the body's scroll cap from the measured chrome: the body may
+    // occupy at most `maxHeight - chrome`, so `header + body + footer` always
+    // stays within the 90%-of-window cap and the footer can't be pushed
+    // off-screen. Only sets state when the value actually changes.
+    const applyBodyMax = useCallback(() => {
+      const chrome = measureChrome()
+      if (chrome <= 0) return
+      const availableBody = Math.max(0, maxHeight - chrome)
+      if (Math.abs(availableBody - (bodyMaxRef.current ?? -1)) > 1) {
+        bodyMaxRef.current = availableBody
+        setBodyMax(availableBody)
       }
-    }, [bodyMaxHeight, maxHeight])
-
-    // Lock chrome once, from the first unbounded layout: there the panel wraps
-    // its content, so natural height = chrome + min(content, bodyMax). chrome is
-    // layout-invariant, so it never needs re-deriving (which is what made the
-    // earlier frame-subtraction approach fragile).
-    const lockChrome = useCallback(() => {
-      if (chromeRef.current > 0) return
-      const natural = firstNaturalRef.current
-      const content = bodyContentRef.current
-      if (natural <= 0 || content <= 0) return
-      chromeRef.current = natural - Math.min(content, bodyMaxHeight)
-    }, [bodyMaxHeight])
-
-    const setBodyContentHeight = useCallback(
+    }, [measureChrome, maxHeight])
+
+    const setHeaderHeight = useCallback(
+      (height: number) => {
+        if (height <= 0 || Math.abs(height - headerHeightRef.current) < 1)
+          return
+        headerHeightRef.current = height
+        applyBodyMax()
+      },
+      [applyBodyMax]
+    )
+
+    const setFooterHeight = useCallback(
       (height: number) => {
-        if (height <= 0) return
-        bodyContentRef.current = height
-        lockChrome()
-        applyRefit()
+        if (height <= 0 || Math.abs(height - footerHeightRef.current) < 1)
+          return
+        footerHeightRef.current = height
+        applyBodyMax()
       },
-      [lockChrome, applyRefit]
+      [applyBodyMax]
     )
 
     const measureContextValue = useMemo(
-      () => ({ setBodyContentHeight }),
-      [setBodyContentHeight]
+      () => ({ setHeaderHeight, setFooterHeight }),
+      [setHeaderHeight, setFooterHeight]
     )
 
     const onLayout = useCallback(
       ({ nativeEvent }: { nativeEvent: { layout: { height: number } } }) => {
-        const h = nativeEvent.layout.height
-        const capped = Math.min(h, maxHeight)
+        // The panel wraps its content, so its measured height is the true panel
+        // height. Cache it for the slide-in/out + drag-dismiss animations (which
+        // translate the panel by its own height); it does *not* feed back into
+        // sizing, so there's no measurement loop. Runs the entry animation the
+        // first time we have a height while open.
+        const capped = Math.min(nativeEvent.layout.height, maxHeight)
         if (capped <= 0) return
-
-        // First measurement only: the panel is still wrapping its content
-        // (no explicit height yet), so `h` is the natural height. Capture it to
-        // derive chrome, fix the panel height, and run the entry animation.
-        // Afterwards the panel echoes its fixed height, so re-fitting is driven
-        // solely by the body's content size (setBodyContentHeight).
-        if (entryRanRef.current) return
-
-        if (chromeRef.current <= 0) {
-          firstNaturalRef.current = h
-          lockChrome()
-        }
-
-        if (capped !== panelHeightRef.current) {
-          panelHeightRef.current = capped
-          setPanelHeight(capped)
-        }
-
-        if (isOpenRef.current) {
+        panelHeightRef.current = capped
+        if (!entryRanRef.current && isOpenRef.current) {
           runEntry()
         }
-
-        applyRefit()
       },
-      [runEntry, maxHeight, lockChrome, applyRefit]
+      [runEntry, maxHeight]
     )
 
     const panResponder = useRef(
@@ -350,6 +350,11 @@ export const DrawerContent = React.forwardRef<View, DrawerContentProps>(
         (child.type as { displayName?: string }).displayName === "Drawer.Header"
     ) as React.ReactElement<{ variant?: DrawerHeaderVariant }> | undefined
 
+    // Record which sections are present so the re-fit knows whether to wait for
+    // their measured heights before sizing the panel.
+    hasHeaderRef.current = headerChild != null
+    hasFooterRef.current = hasFooter
+
     const headerContextValue =
       headerChild != null
         ? {
@@ -367,7 +372,6 @@ export const DrawerContent = React.forwardRef<View, DrawerContentProps>(
               <Animated.View
                 style={[
                   styles.animatedWrapper,
-                  panelHeight > 0 ? { height: panelHeight } : undefined,
                   { transform: [{ translateY }] }
                 ]}
               >
@@ -377,7 +381,7 @@ export const DrawerContent = React.forwardRef<View, DrawerContentProps>(
                   panelBorderRadius={parseTokenValue(drawer.borderRadius.top)}
                   panelBgColor={colour.background.container.default}
                   panelMaxWidth={parseTokenValue(drawer.size.maxWidth)}
-                  panelFlex={panelHeight > 0 ? 1 : undefined}
+                  panelMaxHeight={maxHeight}
                   panelBorderWidth={parseTokenValue(dimensions.borderWidth.sm)}
                   panelBorderColor={colour.border.default}
                   panelShadowColor={modal.shadow.color}
@@ -388,7 +392,9 @@ export const DrawerContent = React.forwardRef<View, DrawerContentProps>(
                   accessibilityViewIsModal
                   {...props}
                 >
-                  {children}
+                  <DrawerBodyMaxContext.Provider value={bodyMax}>
+                    {children}
+                  </DrawerBodyMaxContext.Provider>
                 </StyledPanel>
               </Animated.View>
             </DrawerDragContext.Provider>