@butternutbox/pawprint-native 0.10.9 → 0.10.11

package/package.json

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

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

@@ -1,9 +1,10 @@
-import React from "react"
+import React, { useCallback } 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
 
@@ -37,15 +38,26 @@ const StyledScrollView = styled(ScrollView)<{
  * between the header and footer.
  */
 export const DrawerBody = React.forwardRef<ScrollView, DrawerBodyProps>(
-  ({ children, contentContainerStyle, ...props }, ref) => {
+  ({ children, contentContainerStyle, onContentSizeChange, ...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()
 
+    // 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)
@@ -71,6 +83,7 @@ export const DrawerBody = React.forwardRef<ScrollView, DrawerBodyProps>(
         bodyGap={gap}
         bodyMaxHeight={bodyMaxHeight}
         bodyPaddingBottom={bodyPaddingBottom}
+        onContentSizeChange={handleContentSizeChange}
         contentContainerStyle={[
           {
             gap,

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useRef } from "react"
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import {
   Animated,
   Easing,
@@ -11,6 +11,7 @@ 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 {
@@ -35,7 +36,7 @@ const StyledPanel = styled(View)<{
   panelShadowColor: string
   panelShadowOffsetY: number
   panelShadowBlur: number
-  panelMaxHeight: number
+  panelFlex?: number
 }>(
   ({
     panelBorderRadius,
@@ -46,17 +47,12 @@ const StyledPanel = styled(View)<{
     panelShadowColor,
     panelShadowOffsetY,
     panelShadowBlur,
-    panelMaxHeight
+    panelFlex
   }) => ({
     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,
@@ -78,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
@@ -104,6 +108,10 @@ 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
 
     // Keep a ref so the PanResponder (created once) always calls the latest
     // closeDrawer without becoming a stale closure.
@@ -119,6 +127,19 @@ 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)
+
     useEffect(() => {
       const id = translateY.addListener(({ value }) => {
         translateYValue.current = value
@@ -126,6 +147,15 @@ 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)
@@ -173,25 +203,79 @@ 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)
+      }
+    }, [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(
+      (height: number) => {
+        if (height <= 0) return
+        bodyContentRef.current = height
+        lockChrome()
+        applyRefit()
+      },
+      [lockChrome, applyRefit]
+    )
+
+    const measureContextValue = useMemo(
+      () => ({ 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
 
-        // 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
+        // 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
 
-        // 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) {
+        if (chromeRef.current <= 0) {
+          firstNaturalRef.current = h
+          lockChrome()
+        }
+
+        if (capped !== panelHeightRef.current) {
+          panelHeightRef.current = capped
+          setPanelHeight(capped)
+        }
+
+        if (isOpenRef.current) {
           runEntry()
         }
+
+        applyRefit()
       },
-      [runEntry, maxHeight]
+      [runEntry, maxHeight, lockChrome, applyRefit]
     )
 
     const panResponder = useRef(
@@ -278,31 +362,37 @@ export const DrawerContent = React.forwardRef<View, DrawerContentProps>(
     return (
       <DrawerHeaderContext.Provider value={headerContextValue}>
         <DrawerFooterContext.Provider value={hasFooter}>
-          <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}
+          <DrawerMeasureContext.Provider value={measureContextValue}>
+            <DrawerDragContext.Provider value={dragContextValue}>
+              <Animated.View
+                style={[
+                  styles.animatedWrapper,
+                  panelHeight > 0 ? { height: panelHeight } : undefined,
+                  { transform: [{ translateY }] }
+                ]}
               >
-                {children}
-              </StyledPanel>
-            </Animated.View>
-          </DrawerDragContext.Provider>
+                <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>
         </DrawerFooterContext.Provider>
       </DrawerHeaderContext.Provider>
     )

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

@@ -0,0 +1,18 @@
+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 = {
+  setBodyContentHeight: (height: number) => void
+}
+
+export const DrawerMeasureContext =
+  createContext<DrawerMeasureContextValue | null>(null)
+
+export const useDrawerMeasureContext = (): DrawerMeasureContextValue | null =>
+  useContext(DrawerMeasureContext)

package/src/components/molecules/NumberField/NumberField.tsx

@@ -41,7 +41,7 @@ const StyledRoot = styled(View)<{
   fullWidth?: boolean
 }>(({ rootGap, fullWidth }) => ({
   gap: rootGap,
-  ...(fullWidth && { width: "100%" })
+  ...(fullWidth ? { width: "100%" } : { alignItems: "center" })
 }))
 
 const StyledLabelGroup = styled(View)<{
@@ -134,6 +134,7 @@ export const NumberField = React.forwardRef<View, NumberFieldProps>(
               <Typography
                 token={typoTokens.label}
                 color={tokens.colour.text.label}
+                align="center"
               >
                 {label}
               </Typography>
@@ -142,6 +143,7 @@ export const NumberField = React.forwardRef<View, NumberFieldProps>(
               <Typography
                 token={typoTokens.smallLabel}
                 color={tokens.colour.text.description}
+                align="center"
               >
                 {smallLabel}
               </Typography>
@@ -172,6 +174,7 @@ export const NumberField = React.forwardRef<View, NumberFieldProps>(
                 : tokens.typography.small.smallLabel
             }
             color={tokens.colour.text.description}
+            align="center"
           >
             {description}
           </Typography>
@@ -184,6 +187,7 @@ export const NumberField = React.forwardRef<View, NumberFieldProps>(
                 : tokens.typography.small.smallLabel
             }
             color={theme.tokens.components.inputs.colour.description.error}
+            align="center"
           >
             {error}
           </Typography>