@butternutbox/pawprint-native 0.10.7 → 0.10.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@butternutbox/pawprint-native",
-  "version": "0.10.7",
+  "version": "0.10.9",
   "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

@@ -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 (

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,
@@ -35,7 +35,7 @@ const StyledPanel = styled(View)<{
   panelShadowColor: string
   panelShadowOffsetY: number
   panelShadowBlur: number
-  panelFlex?: number
+  panelMaxHeight: number
 }>(
   ({
     panelBorderRadius,
@@ -46,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,
@@ -114,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
@@ -127,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)
@@ -187,21 +177,17 @@ export const DrawerContent = React.forwardRef<View, DrawerContentProps>(
       ({ nativeEvent }: { nativeEvent: { layout: { height: number } } }) => {
         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) {
-          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
 
-        // 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
+        // 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()
         }
       },
@@ -294,11 +280,7 @@ export const DrawerContent = React.forwardRef<View, DrawerContentProps>(
         <DrawerFooterContext.Provider value={hasFooter}>
           <DrawerDragContext.Provider value={dragContextValue}>
             <Animated.View
-              style={[
-                styles.animatedWrapper,
-                panelHeight > 0 ? { height: panelHeight } : undefined,
-                { transform: [{ translateY }] }
-              ]}
+              style={[styles.animatedWrapper, { transform: [{ translateY }] }]}
             >
               <StyledPanel
                 ref={ref}
@@ -306,7 +288,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}

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
 }))