@butternutbox/pawprint-native 0.10.8 → 0.10.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@butternutbox/pawprint-native",
-  "version": "0.10.8",
+  "version": "0.10.10",
   "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,9 +1,5 @@
 import React, { useCallback } from "react"
-import {
-  type LayoutChangeEvent,
-  ScrollView,
-  ScrollViewProps
-} from "react-native"
+import { ScrollView, ScrollViewProps, useWindowDimensions } from "react-native"
 import styled from "@emotion/native"
 import { useTheme } from "@emotion/react"
 import { useDrawerHeaderContext } from "./DrawerHeaderContext"
@@ -18,22 +14,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,16 +38,7 @@ const StyledScrollView = styled(ScrollView)<{
  * between the header and footer.
  */
 export const DrawerBody = React.forwardRef<ScrollView, DrawerBodyProps>(
-  (
-    {
-      children,
-      contentContainerStyle,
-      onLayout,
-      onContentSizeChange,
-      ...props
-    },
-    ref
-  ) => {
+  ({ children, contentContainerStyle, onContentSizeChange, ...props }, ref) => {
     const theme = useTheme()
     const { spacing } = theme.tokens.components.drawer
     const { buttons } = theme.tokens.components
@@ -60,29 +46,23 @@ export const DrawerBody = React.forwardRef<ScrollView, DrawerBodyProps>(
     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]
-    )
-
+    // 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) => {
+      (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
+
     // 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 =
@@ -101,8 +81,8 @@ export const DrawerBody = React.forwardRef<ScrollView, DrawerBodyProps>(
         bodyPaddingHorizontal={horizontalPadding}
         bodyPaddingRight={paddingRight}
         bodyGap={gap}
+        bodyMaxHeight={bodyMaxHeight}
         bodyPaddingBottom={bodyPaddingBottom}
-        onLayout={handleLayout}
         onContentSizeChange={handleContentSizeChange}
         contentContainerStyle={[
           {

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

@@ -74,6 +74,14 @@ 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.
+ *
  * Must be rendered inside `Drawer.Portal`.
  *
  * @example
@@ -100,9 +108,9 @@ 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.
+    // 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
 
     // Keep a ref so the PanResponder (created once) always calls the latest
@@ -119,12 +127,19 @@ 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.
+    // 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)
+
     useEffect(() => {
       const id = translateY.addListener(({ value }) => {
         translateYValue.current = value
@@ -188,85 +203,79 @@ export const DrawerContent = React.forwardRef<View, DrawerContentProps>(
       }
     }, [isOpen, runEntry, runExit])
 
-    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
-        }
-
-        if (isOpenRef.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(() => {
+    // 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
-      const current = panelHeightRef.current
-      if (chrome <= 0 || content <= 0 || current <= 0) return
+      if (chrome <= 0 || content <= 0) return
       const desired = Math.min(
         chrome + Math.min(content, bodyMaxHeight),
         maxHeight
       )
-      if (Math.abs(desired - current) > 1) {
+      if (Math.abs(desired - panelHeightRef.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]
-    )
+    }, [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(
-      (contentHeight: number) => {
-        if (contentHeight <= 0) return
-        bodyContentRef.current = contentHeight
-        applyDesiredHeight()
+      (height: number) => {
+        if (height <= 0) return
+        bodyContentRef.current = height
+        lockChrome()
+        applyRefit()
       },
-      [applyDesiredHeight]
+      [lockChrome, applyRefit]
     )
 
     const measureContextValue = useMemo(
-      () => ({ setBodyFrameHeight, setBodyContentHeight }),
-      [setBodyFrameHeight, setBodyContentHeight]
+      () => ({ setBodyContentHeight }),
+      [setBodyContentHeight]
+    )
+
+    const onLayout = useCallback(
+      ({ nativeEvent }: { nativeEvent: { layout: { height: number } } }) => {
+        const h = nativeEvent.layout.height
+        const capped = Math.min(h, 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) {
+          runEntry()
+        }
+
+        applyRefit()
+      },
+      [runEntry, maxHeight, lockChrome, applyRefit]
     )
 
     const panResponder = useRef(

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

@@ -1,22 +1,18 @@
-import React from "react"
+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.
+ */
 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)
+  createContext<DrawerMeasureContextValue | null>(null)
 
-export const useDrawerMeasureContext = () =>
-  React.useContext(DrawerMeasureContext)
+export const useDrawerMeasureContext = (): DrawerMeasureContextValue | null =>
+  useContext(DrawerMeasureContext)