@butternutbox/pawprint-native 0.10.7 → 0.10.8

package/package.json

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

package/src/components/molecules/DatePicker/DatePicker.tsx

@@ -129,34 +129,36 @@ export type DatePickerProps = DatePickerOwnProps &
   Omit<ViewProps, keyof DatePickerOwnProps>
 
 const StyledContainer = styled(View)<{
-  containerGap: number
   containerMaxWidth: number
-}>(({ containerGap, containerMaxWidth }) => ({
+}>(({ containerMaxWidth }) => ({
   flexDirection: "column",
-  gap: containerGap,
+  // Fill the parent by default (capped by maxWidth) so consumers don't need a
+  // wrapper. Overridable via the `style` prop.
+  width: "100%",
   maxWidth: containerMaxWidth
 }))
 
-const StyledMonthHeader = styled(View)<{ headerGap: number }>(
-  ({ headerGap }) => ({
+const StyledMonthHeader = styled(View)<{ headerGap: number; datesGap: number }>(
+  ({ headerGap, datesGap }) => ({
     flexDirection: "row",
     alignItems: "center",
-    gap: headerGap
+    gap: headerGap,
+    // Gap between the month header and the dates grid.
+    marginBottom: datesGap
   })
 )
 
-const StyledWeekRow = styled(View)({
-  flexDirection: "row"
-})
+const StyledWeekRow = styled(View)<{ weekGap: number }>(({ weekGap }) => ({
+  flexDirection: "row",
+  // Gap between the week-day header and the month header.
+  marginBottom: weekGap
+}))
 
-const StyledWeekCell = styled(View)<{ cellHeight: number }>(
-  ({ cellHeight }) => ({
-    flex: 1,
-    alignItems: "center",
-    justifyContent: "center",
-    height: cellHeight
-  })
-)
+const StyledWeekCell = styled(View)({
+  flex: 1,
+  alignItems: "center",
+  justifyContent: "center"
+})
 
 const StyledDatesGrid = styled(View)<{ rowGap: number }>(({ rowGap }) => ({
   flexDirection: "column",
@@ -280,7 +282,8 @@ export const DatePicker = React.forwardRef<View, DatePickerProps>(
     const [slideDir, setSlideDir] = useState<"forward" | "backward">("forward")
 
     const {
-      containerGap,
+      weekGap,
+      datesGap,
       containerMaxWidth,
       headerGap,
       cellHeight,
@@ -291,7 +294,10 @@ export const DatePicker = React.forwardRef<View, DatePickerProps>(
       rowGap
     } = useMemo(
       () => ({
-        containerGap: parseTokenValue(datePicker.spacing.gap),
+        // Gap between the week-day header and the month header.
+        weekGap: parseTokenValue(datePicker.spacing.gap),
+        // Gap between the month header and the dates grid.
+        datesGap: parseTokenValue(theme.tokens.semantics.dimensions.spacing.md),
         containerMaxWidth: parseTokenValue(dt.size.width) * 7,
         headerGap: parseTokenValue(datePicker.month.spacing.gap),
         cellHeight: parseTokenValue(dt.size.height),
@@ -301,7 +307,7 @@ export const DatePicker = React.forwardRef<View, DatePickerProps>(
         disabledOpacity: parseTokenValue(dt.opacity.disabled),
         rowGap: parseTokenValue(datePicker.dates.spacing.gap)
       }),
-      [datePicker, dt]
+      [datePicker, dt, theme]
     )
 
     const resolvedGetDateState = useCallback(
@@ -423,14 +429,13 @@ export const DatePicker = React.forwardRef<View, DatePickerProps>(
     return (
       <StyledContainer
         ref={ref}
-        containerGap={containerGap}
         containerMaxWidth={containerMaxWidth}
         {...rest}
       >
         {showWeekHeader && (
-          <StyledWeekRow accessibilityElementsHidden>
+          <StyledWeekRow weekGap={weekGap} accessibilityElementsHidden>
             {weekDayLabels.map((label) => (
-              <StyledWeekCell key={label} cellHeight={cellHeight}>
+              <StyledWeekCell key={label}>
                 <Typography
                   token={datePicker.week.typography}
                   align="center"
@@ -443,12 +448,12 @@ export const DatePicker = React.forwardRef<View, DatePickerProps>(
           </StyledWeekRow>
         )}
 
-        <StyledMonthHeader headerGap={headerGap}>
+        <StyledMonthHeader headerGap={headerGap} datesGap={datesGap}>
           <View style={{ opacity: showPrevControl ? 1 : 0 }}>
             <IconButton
               icon={KeyboardArrowLeft}
               variant="filled"
-              size="sm"
+              size="md"
               colour="primary"
               aria-label="Previous month"
               onPress={showPrevControl ? handlePrevMonth : undefined}
@@ -470,7 +475,7 @@ export const DatePicker = React.forwardRef<View, DatePickerProps>(
             <IconButton
               icon={KeyboardArrowRight}
               variant="filled"
-              size="sm"
+              size="md"
               colour="primary"
               aria-label="Next month"
               onPress={showNextControl ? handleNextMonth : undefined}

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

@@ -321,6 +321,116 @@ 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,14 @@
-import React from "react"
-import { ScrollView, ScrollViewProps, useWindowDimensions } from "react-native"
+import React, { useCallback } from "react"
+import {
+  type LayoutChangeEvent,
+  ScrollView,
+  ScrollViewProps
+} 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
 
@@ -13,21 +18,22 @@ 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
   })
 )
@@ -37,19 +43,45 @@ const StyledScrollView = styled(ScrollView)<{
  * between the header and footer.
  */
 export const DrawerBody = React.forwardRef<ScrollView, DrawerBodyProps>(
-  ({ children, contentContainerStyle, ...props }, ref) => {
+  (
+    {
+      children,
+      contentContainerStyle,
+      onLayout,
+      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 { height: windowHeight } = useWindowDimensions()
+    const measureContext = useDrawerMeasureContext()
 
     const gap = parseTokenValue(content.slot.gap)
     const horizontalPadding = parseTokenValue(content.slot.horizontalPadding)
     const topPadding = parseTokenValue(content.slot.verticalPadding)
-    const bodyMaxHeight = windowHeight - 300
+
+    // 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]
+    )
 
     // 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.
@@ -69,8 +101,9 @@ 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

@@ -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 {
@@ -99,6 +100,10 @@ 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.
@@ -185,29 +190,85 @@ 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
 
-        // Only update state when the effective height actually changes, to
-        // avoid re-render loops. Compare against the ref (kept in sync with
-        // state) so panelHeight doesn't need to be a dep of this callback.
-        if (capped !== panelHeightRef.current && capped > 0) {
+        if (capped !== panelHeightRef.current) {
           setPanelHeight(capped)
           panelHeightRef.current = capped
         }
 
-        // Run entry on the first measurement. The animation starts from the
-        // capped height even though the panel may still be at natural size;
-        // the re-render that sets the explicit height happens while the panel
-        // is still off-screen, so there is no visible jump.
-        if (isOpenRef.current && !entryRanRef.current && capped > 0) {
-          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(() => {
+      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
@@ -292,35 +353,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,
-                panelHeight > 0 ? { height: panelHeight } : undefined,
-                { transform: [{ translateY }] }
-              ]}
-            >
-              <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}
+          <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,22 @@
+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)

package/src/components/molecules/Radio/Radio.tsx

@@ -96,6 +96,9 @@ const StyledIndicator = styled(View)<{
 const StyledTextContent = styled(View)<{
   textContentGap: number
 }>(({ textContentGap }) => ({
+  // Take the row's remaining width so long label/subText wraps within the tile
+  // instead of pushing the trailing asset past the tile's edge.
+  flex: 1,
   flexDirection: "column",
   gap: textContentGap
 }))