@butternutbox/pawprint-native 0.10.8 → 0.10.9

package/package.json

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

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

@@ -205,6 +205,55 @@ export const LongContent = () => (
   </View>
 )
 
+// Exercises the panel re-fit: toggling the extra paragraphs grows/shrinks the
+// body after the drawer has opened. The panel should track the content —
+// growing (up to its max, then scrolling) and shrinking back — never leaving a
+// gap or clipping. Regression guard for the 0.10.8 re-measure feedback loop.
+export const DynamicContent = () => {
+  const [expanded, setExpanded] = useState(false)
+  return (
+    <View style={styles.container}>
+      <Drawer.Root>
+        <Drawer.Trigger>
+          <Button variant="filled" colour="primary">
+            Open dynamic drawer
+          </Button>
+        </Drawer.Trigger>
+        <Drawer.Portal>
+          <Drawer.Overlay />
+          <Drawer.Content>
+            <Drawer.Header variant="titleAndText">
+              <Drawer.Title>Delivery details</Drawer.Title>
+              <Drawer.Close />
+            </Drawer.Header>
+            <Drawer.Body>
+              <Typography>{bodyText}</Typography>
+              <Button
+                variant="outlined"
+                colour="secondary"
+                onPress={() => setExpanded((prev) => !prev)}
+              >
+                {expanded ? "Show less" : "Show more"}
+              </Button>
+              {expanded &&
+                Array.from({ length: 12 }, (_, i) => (
+                  <Typography
+                    key={i}
+                  >{`More detail ${i + 1}: ${bodyText}`}</Typography>
+                ))}
+            </Drawer.Body>
+            <Drawer.Footer>
+              <Button variant="filled" colour="primary">
+                Confirm
+              </Button>
+            </Drawer.Footer>
+          </Drawer.Content>
+        </Drawer.Portal>
+      </Drawer.Root>
+    </View>
+  )
+}
+
 export const Controlled = () => {
   const [open, setOpen] = useState(false)
   return (
@@ -321,116 +370,6 @@ export const WithTopContent = () => {
   )
 }
 
-/**
- * Exercises the panel re-measuring its height when body content changes.
- * Use "Add"/"Remove" to grow and shrink the content: the drawer should re-fit
- * its height each time, and once the content exceeds ~90% of the screen it
- * should cap and the body should scroll instead of growing further.
- */
-export const DynamicContent = () => {
-  const [count, setCount] = useState(1)
-
-  return (
-    <View style={styles.container}>
-      <Drawer.Root defaultOpen>
-        <Drawer.Trigger>
-          <Button variant="filled" colour="primary">
-            Open resizable drawer
-          </Button>
-        </Drawer.Trigger>
-        <Drawer.Portal>
-          <Drawer.Overlay />
-          <Drawer.Content>
-            <Drawer.Header variant="titleAndText">
-              <Drawer.Title>Resizable content</Drawer.Title>
-              <Drawer.Description>{`${count} paragraph${
-                count === 1 ? "" : "s"
-              }`}</Drawer.Description>
-              <Drawer.Close />
-            </Drawer.Header>
-            <Drawer.Body>
-              {Array.from({ length: count }, (_, i) => (
-                <Typography
-                  key={i}
-                >{`Paragraph ${i + 1}: ${bodyText}`}</Typography>
-              ))}
-            </Drawer.Body>
-            <Drawer.Footer>
-              <View style={styles.row}>
-                <Button
-                  variant="filled"
-                  colour="primary"
-                  onPress={() => setCount((c) => c + 1)}
-                >
-                  Add
-                </Button>
-                <Button
-                  variant="outlined"
-                  colour="secondary"
-                  onPress={() => setCount((c) => Math.max(0, c - 1))}
-                >
-                  Remove
-                </Button>
-              </View>
-            </Drawer.Footer>
-          </Drawer.Content>
-        </Drawer.Portal>
-      </Drawer.Root>
-    </View>
-  )
-}
-
-/**
- * Simulates async content loading: the drawer opens compact with a loading
- * message, then re-fits taller once the "loaded" content arrives. Tap "Reload"
- * to replay.
- */
-export const AsyncContent = () => {
-  const [loaded, setLoaded] = useState(false)
-
-  const load = () => {
-    setLoaded(false)
-    setTimeout(() => setLoaded(true), 1200)
-  }
-
-  return (
-    <View style={styles.container}>
-      <Drawer.Root onOpenChange={(open) => open && load()}>
-        <Drawer.Trigger>
-          <Button variant="filled" colour="primary">
-            Open async drawer
-          </Button>
-        </Drawer.Trigger>
-        <Drawer.Portal>
-          <Drawer.Overlay />
-          <Drawer.Content>
-            <Drawer.Header variant="titleAndText">
-              <Drawer.Title>Delivery details</Drawer.Title>
-              <Drawer.Close />
-            </Drawer.Header>
-            <Drawer.Body>
-              {loaded ? (
-                Array.from({ length: 5 }, (_, i) => (
-                  <Typography
-                    key={i}
-                  >{`Detail ${i + 1}: ${bodyText}`}</Typography>
-                ))
-              ) : (
-                <Typography>Loading…</Typography>
-              )}
-            </Drawer.Body>
-            <Drawer.Footer>
-              <Button variant="filled" colour="primary" onPress={load}>
-                Reload
-              </Button>
-            </Drawer.Footer>
-          </Drawer.Content>
-        </Drawer.Portal>
-      </Drawer.Root>
-    </View>
-  )
-}
-
 const styles = StyleSheet.create({
   container: {
     padding: 16

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

@@ -1,14 +1,9 @@
-import React, { useCallback } from "react"
-import {
-  type LayoutChangeEvent,
-  ScrollView,
-  ScrollViewProps
-} from "react-native"
+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"
 
 export type DrawerBodyProps = ScrollViewProps
 
@@ -18,22 +13,21 @@ const StyledScrollView = styled(ScrollView)<{
   bodyPaddingHorizontal: number
   bodyPaddingRight: number
   bodyGap: number
+  bodyMaxHeight: number
   bodyPaddingBottom: number
 }>(
   ({
     bodyPaddingHorizontal,
     bodyPaddingRight,
     bodyGap,
+    bodyMaxHeight,
     bodyPaddingBottom
   }) => ({
-    // flex: 1 fills the bounded panel so the ScrollView can scroll. The panel
-    // (DrawerContent) is the single height authority — the body must NOT set
-    // its own maxHeight, or it would cap independently of the panel and corrupt
-    // the panel's chrome measurement.
     flex: 1,
     paddingLeft: bodyPaddingHorizontal,
     paddingRight: bodyPaddingRight,
     gap: bodyGap,
+    maxHeight: bodyMaxHeight,
     paddingBottom: bodyPaddingBottom
   })
 )
@@ -43,45 +37,19 @@ const StyledScrollView = styled(ScrollView)<{
  * between the header and footer.
  */
 export const DrawerBody = React.forwardRef<ScrollView, DrawerBodyProps>(
-  (
-    {
-      children,
-      contentContainerStyle,
-      onLayout,
-      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 { height: windowHeight } = useWindowDimensions()
 
     const gap = parseTokenValue(content.slot.gap)
     const horizontalPadding = parseTokenValue(content.slot.horizontalPadding)
     const topPadding = parseTokenValue(content.slot.verticalPadding)
-
-    // Report the ScrollView's frame and content heights so DrawerContent can
-    // re-fit the panel when the body content changes.
-    const handleLayout = useCallback(
-      (event: LayoutChangeEvent) => {
-        measureContext?.setBodyFrameHeight(event.nativeEvent.layout.height)
-        onLayout?.(event)
-      },
-      [measureContext, onLayout]
-    )
-
-    const handleContentSizeChange = useCallback(
-      (width: number, height: number) => {
-        measureContext?.setBodyContentHeight(height)
-        onContentSizeChange?.(width, height)
-      },
-      [measureContext, onContentSizeChange]
-    )
+    const bodyMaxHeight = 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.
@@ -101,9 +69,8 @@ export const DrawerBody = React.forwardRef<ScrollView, DrawerBodyProps>(
         bodyPaddingHorizontal={horizontalPadding}
         bodyPaddingRight={paddingRight}
         bodyGap={gap}
+        bodyMaxHeight={bodyMaxHeight}
         bodyPaddingBottom={bodyPaddingBottom}
-        onLayout={handleLayout}
-        onContentSizeChange={handleContentSizeChange}
         contentContainerStyle={[
           {
             gap,

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
+import React, { useCallback, useEffect, useMemo, useRef } from "react"
 import {
   Animated,
   Easing,
@@ -11,7 +11,6 @@ import {
 import styled from "@emotion/native"
 import { useTheme } from "@emotion/react"
 import { DrawerDragContext } from "./DrawerDragContext"
-import { DrawerMeasureContext } from "./DrawerMeasureContext"
 import { useDrawerContext } from "./DrawerContext"
 import { DrawerFooterContext } from "./DrawerFooterContext"
 import {
@@ -36,7 +35,7 @@ const StyledPanel = styled(View)<{
   panelShadowColor: string
   panelShadowOffsetY: number
   panelShadowBlur: number
-  panelFlex?: number
+  panelMaxHeight: number
 }>(
   ({
     panelBorderRadius,
@@ -47,12 +46,17 @@ const StyledPanel = styled(View)<{
     panelShadowColor,
     panelShadowOffsetY,
     panelShadowBlur,
-    panelFlex
+    panelMaxHeight
   }) => ({
     width: "100%",
     maxWidth: panelMaxWidth,
+    // The panel wraps its content and caps at maxHeight. It is intentionally
+    // NOT given a fixed height: letting it size to content means it re-fits
+    // automatically whenever the body grows or shrinks (async load, expanding
+    // sections). The body's own maxHeight (see DrawerBody) bounds scrolling and
+    // keeps the ScrollView from collapsing, so no fixed panel height is needed.
+    maxHeight: panelMaxHeight,
     alignSelf: "center",
-    ...(panelFlex != null ? { flex: panelFlex } : undefined),
     borderTopLeftRadius: panelBorderRadius,
     borderTopRightRadius: panelBorderRadius,
     borderTopWidth: panelBorderWidth,
@@ -100,10 +104,6 @@ export const DrawerContent = React.forwardRef<View, DrawerContentProps>(
 
     const { height: windowHeight } = useWindowDimensions()
     const maxHeight = windowHeight * 0.9
-    // Tallest the body content is allowed to grow before it scrolls. Enforced
-    // here (via the panel height) rather than as a maxHeight on the body
-    // ScrollView, so the panel stays the single height authority.
-    const bodyMaxHeight = windowHeight - 300
 
     // Keep a ref so the PanResponder (created once) always calls the latest
     // closeDrawer without becoming a stale closure.
@@ -119,12 +119,6 @@ export const DrawerContent = React.forwardRef<View, DrawerContentProps>(
     const isOpenRef = useRef(isOpen)
     const activeAnim = useRef<Animated.CompositeAnimation | null>(null)
 
-    // After the first onLayout we know the real rendered height (capped at
-    // MAX_HEIGHT). We immediately kick off the entry animation from that height
-    // and then set explicit height + flex: 1 on the panel so DrawerBody's
-    // ScrollView gets a bounded container and can scroll correctly.
-    const [panelHeight, setPanelHeight] = useState(0)
-
     useEffect(() => {
       const id = translateY.addListener(({ value }) => {
         translateYValue.current = value
@@ -132,15 +126,6 @@ export const DrawerContent = React.forwardRef<View, DrawerContentProps>(
       return () => translateY.removeListener(id)
     }, [translateY])
 
-    // Clamp the cached panel height when the window shrinks (e.g. orientation
-    // change) so the entry animation never starts from below the screen.
-    useEffect(() => {
-      if (panelHeightRef.current > 0 && panelHeightRef.current > maxHeight) {
-        setPanelHeight(maxHeight)
-        panelHeightRef.current = maxHeight
-      }
-    }, [maxHeight])
-
     const runEntry = useCallback(() => {
       if (panelHeightRef.current === 0) return
       translateY.setValue(panelHeightRef.current)
@@ -190,85 +175,25 @@ export const DrawerContent = React.forwardRef<View, DrawerContentProps>(
 
     const onLayout = useCallback(
       ({ nativeEvent }: { nativeEvent: { layout: { height: number } } }) => {
-        // This only bootstraps the first measurement and the entry animation.
-        // After entry has run, applyDesiredHeight (driven by the body's
-        // content size) is the SOLE authority for panel height — this handler
-        // must not keep overriding it, or the two fight and the panel gets
-        // pinned to chrome + bodyFrame (leaving a gap) instead of
-        // chrome + content.
-        if (entryRanRef.current) return
-
         const h = nativeEvent.layout.height
         const capped = Math.min(h, maxHeight)
         if (capped <= 0) return
 
-        if (capped !== panelHeightRef.current) {
-          setPanelHeight(capped)
-          panelHeightRef.current = capped
-        }
+        // The panel wraps its content, so this fires again whenever the body
+        // grows or shrinks. Keep the cached height current for the entry/exit
+        // and drag-dismiss animations; the panel re-fits itself via layout, so
+        // there is nothing else to do here (no state, no feedback loop).
+        panelHeightRef.current = capped
 
-        if (isOpenRef.current) {
+        // Kick off the entry animation on the first measurement. translateY is
+        // still off-screen (9999) at this point, so there is no visible jump.
+        if (isOpenRef.current && !entryRanRef.current) {
           runEntry()
         }
       },
       [runEntry, maxHeight]
     )
 
-    // Re-fit the panel height whenever the body content changes. Desired height
-    // is the absolute `chrome + content` (clamped to bodyMax, then maxHeight).
-    // `chrome` (header + footer + padding + borders) is invariant for a given
-    // drawer, so it is measured ONCE and locked. Deriving it repeatedly from
-    // `panelHeight - bodyFrame` is unsafe: those two are only consistent at a
-    // settled layout, and mid-resize the frame lags, which inflates chrome and
-    // pins the panel to chrome + frame (a gap) instead of chrome + content.
-    const chromeRef = useRef(0)
-    const bodyContentRef = useRef(0)
-
-    const applyDesiredHeight = useCallback(() => {
-      const chrome = chromeRef.current
-      const content = bodyContentRef.current
-      const current = panelHeightRef.current
-      if (chrome <= 0 || content <= 0 || current <= 0) return
-      const desired = Math.min(
-        chrome + Math.min(content, bodyMaxHeight),
-        maxHeight
-      )
-      if (Math.abs(desired - current) > 1) {
-        panelHeightRef.current = desired
-        setPanelHeight(desired)
-      }
-    }, [maxHeight, bodyMaxHeight])
-
-    const setBodyFrameHeight = useCallback(
-      (frameHeight: number) => {
-        // Lock chrome once, from the first settled measurement (initial layout,
-        // before any content toggling), where panelHeight and bodyFrame are
-        // consistent. It stays fixed thereafter.
-        if (chromeRef.current <= 0) {
-          const current = panelHeightRef.current
-          if (frameHeight > 0 && current > frameHeight) {
-            chromeRef.current = current - frameHeight
-          }
-        }
-        applyDesiredHeight()
-      },
-      [applyDesiredHeight]
-    )
-
-    const setBodyContentHeight = useCallback(
-      (contentHeight: number) => {
-        if (contentHeight <= 0) return
-        bodyContentRef.current = contentHeight
-        applyDesiredHeight()
-      },
-      [applyDesiredHeight]
-    )
-
-    const measureContextValue = useMemo(
-      () => ({ setBodyFrameHeight, setBodyContentHeight }),
-      [setBodyFrameHeight, setBodyContentHeight]
-    )
-
     const panResponder = useRef(
       PanResponder.create({
         // Claim the responder as soon as a touch starts on the grabber so the
@@ -353,37 +278,31 @@ export const DrawerContent = React.forwardRef<View, DrawerContentProps>(
     return (
       <DrawerHeaderContext.Provider value={headerContextValue}>
         <DrawerFooterContext.Provider value={hasFooter}>
-          <DrawerMeasureContext.Provider value={measureContextValue}>
-            <DrawerDragContext.Provider value={dragContextValue}>
-              <Animated.View
-                style={[
-                  styles.animatedWrapper,
-                  panelHeight > 0 ? { height: panelHeight } : undefined,
-                  { transform: [{ translateY }] }
-                ]}
+          <DrawerDragContext.Provider value={dragContextValue}>
+            <Animated.View
+              style={[styles.animatedWrapper, { transform: [{ translateY }] }]}
+            >
+              <StyledPanel
+                ref={ref}
+                onLayout={onLayout}
+                panelBorderRadius={parseTokenValue(drawer.borderRadius.top)}
+                panelBgColor={colour.background.container.default}
+                panelMaxWidth={parseTokenValue(drawer.size.maxWidth)}
+                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
+                {...props}
               >
-                <StyledPanel
-                  ref={ref}
-                  onLayout={onLayout}
-                  panelBorderRadius={parseTokenValue(drawer.borderRadius.top)}
-                  panelBgColor={colour.background.container.default}
-                  panelMaxWidth={parseTokenValue(drawer.size.maxWidth)}
-                  panelFlex={panelHeight > 0 ? 1 : undefined}
-                  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
-                  {...props}
-                >
-                  {children}
-                </StyledPanel>
-              </Animated.View>
-            </DrawerDragContext.Provider>
-          </DrawerMeasureContext.Provider>
+                {children}
+              </StyledPanel>
+            </Animated.View>
+          </DrawerDragContext.Provider>
         </DrawerFooterContext.Provider>
       </DrawerHeaderContext.Provider>
     )

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

@@ -1,22 +0,0 @@
-import React from "react"
-
-export type DrawerMeasureContextValue = {
-  /**
-   * The drawer body's ScrollView frame height (its laid-out size). Together
-   * with the panel height this yields the fixed "chrome" (header + footer +
-   * padding), since panel height always equals chrome + body frame.
-   */
-  setBodyFrameHeight: (height: number) => void
-  /**
-   * The drawer body's content height (full scrollable content). Drives the
-   * panel's desired height as `chrome + content`, so the drawer re-fits when
-   * content changes.
-   */
-  setBodyContentHeight: (height: number) => void
-}
-
-export const DrawerMeasureContext =
-  React.createContext<DrawerMeasureContextValue | null>(null)
-
-export const useDrawerMeasureContext = () =>
-  React.useContext(DrawerMeasureContext)