@butternutbox/pawprint-native 0.10.9 → 0.10.10

package/.turbo/turbo-build.log

@@ -7,12 +7,12 @@
 CJS Build start
 ESM Build start
 DTS Build start
-CJS dist/index.cjs     1.80 MB
-CJS dist/index.cjs.map 2.70 MB
-CJS ⚡️ Build success in 11884ms
 ESM dist/index.js     1.72 MB
 ESM dist/index.js.map 2.70 MB
-ESM ⚡️ Build success in 11885ms
-DTS ⚡️ Build success in 22581ms
+ESM ⚡️ Build success in 11267ms
+CJS dist/index.cjs     1.80 MB
+CJS dist/index.cjs.map 2.70 MB
+CJS ⚡️ Build success in 11267ms
+DTS ⚡️ Build success in 22659ms
 DTS dist/index.d.cts 91.44 KB
 DTS dist/index.d.ts  91.44 KB

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @butternutbox/pawprint-native
 
+## 0.10.10
+
+### Patch Changes
+
+- 8d9523c: Drawer: fix the body collapsing to zero height on native (regression in 0.10.9).
+
+  0.10.9 made the panel wrap its content with no explicit height, relying on
+  `DrawerBody`'s `maxHeight` to size the `flex: 1` ScrollView. On native a
+  `ScrollView` has no intrinsic size and `flex: 1` (flexBasis 0) needs a
+  definite-height parent, so every drawer body collapsed to ~0 — only the header
+  and footer rendered. (It looked correct in the react-native-web Storybook, whose
+  flexbox sizes to content, which is why it slipped through.)
+
+  The panel now keeps an explicit height again (the pre-0.10.9 structure that
+  gives the ScrollView a bounded parent) AND re-fits it: `DrawerBody` reports its
+  natural scroll-content height via `onContentSizeChange` (measured in the
+  ScrollView's unbounded content container, so it's independent of the frame — no
+  feedback loop) through a new `DrawerMeasureContext`, and `DrawerContent` sizes
+  the panel to `chrome + min(content, windowHeight - 300)`, capped at 90% of the
+  window. `chrome` is locked once from the first, unbounded layout and is
+  invariant thereafter. Content that grows or shrinks after open (async load,
+  expanding sections) re-fits the panel; tall content caps and scrolls.
+
 ## 0.10.9
 
 ### Patch Changes

package/dist/index.cjs

@@ -8877,6 +8877,8 @@ var DrawerOverlay = React65__default.default.forwardRef(({ accessible = false },
 DrawerOverlay.displayName = "Drawer.Overlay";
 var DrawerDragContext = React65__default.default.createContext(null);
 var useDrawerDragContext = () => React65__default.default.useContext(DrawerDragContext);
+var DrawerMeasureContext = React65.createContext(null);
+var useDrawerMeasureContext = () => React65.useContext(DrawerMeasureContext);
 var DrawerFooterContext = React65__default.default.createContext(false);
 var useDrawerFooterContext = () => React65__default.default.useContext(DrawerFooterContext);
 var DrawerHeaderContext = React65__default.default.createContext(null);
@@ -8895,17 +8897,12 @@ var StyledPanel2 = styled50__default.default(reactNative.View)(
     panelShadowColor,
     panelShadowOffsetY,
     panelShadowBlur,
-    panelMaxHeight
-  }) => ({
+    panelFlex
+  }) => __spreadProps(__spreadValues({
     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",
+    alignSelf: "center"
+  }, panelFlex != null ? { flex: panelFlex } : void 0), {
     borderTopLeftRadius: panelBorderRadius,
     borderTopRightRadius: panelBorderRadius,
     borderTopWidth: panelBorderWidth,
@@ -8931,6 +8928,7 @@ var DrawerContent = React65__default.default.forwardRef(
     const { isOpen, closeDrawer, onExitComplete } = useDrawerContext();
     const { height: windowHeight } = reactNative.useWindowDimensions();
     const maxHeight = windowHeight * 0.9;
+    const bodyMaxHeight = windowHeight - 300;
     const closeDrawerRef = React65.useRef(closeDrawer);
     React65.useEffect(() => {
       closeDrawerRef.current = closeDrawer;
@@ -8941,12 +8939,22 @@ var DrawerContent = React65__default.default.forwardRef(
     const entryRanRef = React65.useRef(false);
     const isOpenRef = React65.useRef(isOpen);
     const activeAnim = React65.useRef(null);
+    const [panelHeight, setPanelHeight] = React65.useState(0);
+    const chromeRef = React65.useRef(0);
+    const bodyContentRef = React65.useRef(0);
+    const firstNaturalRef = React65.useRef(0);
     React65.useEffect(() => {
       const id = translateY.addListener(({ value }) => {
         translateYValue.current = value;
       });
       return () => translateY.removeListener(id);
     }, [translateY]);
+    React65.useEffect(() => {
+      if (panelHeightRef.current > 0 && panelHeightRef.current > maxHeight) {
+        setPanelHeight(maxHeight);
+        panelHeightRef.current = maxHeight;
+      }
+    }, [maxHeight]);
     const runEntry = React65.useCallback(() => {
       var _a3;
       if (panelHeightRef.current === 0) return;
@@ -8993,17 +9001,59 @@ var DrawerContent = React65__default.default.forwardRef(
         runExit();
       }
     }, [isOpen, runEntry, runExit]);
+    const applyRefit = React65.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]);
+    const lockChrome = React65.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 = React65.useCallback(
+      (height) => {
+        if (height <= 0) return;
+        bodyContentRef.current = height;
+        lockChrome();
+        applyRefit();
+      },
+      [lockChrome, applyRefit]
+    );
+    const measureContextValue = React65.useMemo(
+      () => ({ setBodyContentHeight }),
+      [setBodyContentHeight]
+    );
     const onLayout = React65.useCallback(
       ({ nativeEvent }) => {
         const h = nativeEvent.layout.height;
         const capped = Math.min(h, maxHeight);
         if (capped <= 0) return;
-        panelHeightRef.current = capped;
-        if (isOpenRef.current && !entryRanRef.current) {
+        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]
+      [runEntry, maxHeight, lockChrome, applyRefit]
     );
     const panResponder = React65.useRef(
       reactNative.PanResponder.create({
@@ -9072,10 +9122,14 @@ var DrawerContent = React65__default.default.forwardRef(
     const headerContextValue = headerChild != null ? {
       variant: (_a2 = headerChild.props.variant) != null ? _a2 : "titleAndText"
     } : null;
-    return /* @__PURE__ */ jsxRuntime.jsx(DrawerHeaderContext.Provider, { value: headerContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(DrawerFooterContext.Provider, { value: hasFooter, children: /* @__PURE__ */ jsxRuntime.jsx(DrawerDragContext.Provider, { value: dragContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx(DrawerHeaderContext.Provider, { value: headerContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(DrawerFooterContext.Provider, { value: hasFooter, children: /* @__PURE__ */ jsxRuntime.jsx(DrawerMeasureContext.Provider, { value: measureContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(DrawerDragContext.Provider, { value: dragContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
       reactNative.Animated.View,
       {
-        style: [styles.animatedWrapper, { transform: [{ translateY }] }],
+        style: [
+          styles.animatedWrapper,
+          panelHeight > 0 ? { height: panelHeight } : void 0,
+          { transform: [{ translateY }] }
+        ],
         children: /* @__PURE__ */ jsxRuntime.jsx(
           StyledPanel2,
           __spreadProps(__spreadValues({
@@ -9084,7 +9138,7 @@ var DrawerContent = React65__default.default.forwardRef(
             panelBorderRadius: parseTokenValue22(drawer.borderRadius.top),
             panelBgColor: colour.background.container.default,
             panelMaxWidth: parseTokenValue22(drawer.size.maxWidth),
-            panelMaxHeight: maxHeight,
+            panelFlex: panelHeight > 0 ? 1 : void 0,
             panelBorderWidth: parseTokenValue22(dimensions3.borderWidth.sm),
             panelBorderColor: colour.border.default,
             panelShadowColor: modal.shadow.color,
@@ -9098,7 +9152,7 @@ var DrawerContent = React65__default.default.forwardRef(
           })
         )
       }
-    ) }) }) });
+    ) }) }) }) });
   }
 );
 DrawerContent.displayName = "Drawer.Content";
@@ -9414,14 +9468,22 @@ var StyledScrollView = styled50__default.default(reactNative.ScrollView)(
 );
 var DrawerBody = React65__default.default.forwardRef(
   (_a, ref) => {
-    var _b = _a, { children, contentContainerStyle } = _b, props = __objRest(_b, ["children", "contentContainerStyle"]);
+    var _b = _a, { children, contentContainerStyle, onContentSizeChange } = _b, props = __objRest(_b, ["children", "contentContainerStyle", "onContentSizeChange"]);
     const theme2 = react.useTheme();
     const { spacing } = theme2.tokens.components.drawer;
     const { buttons } = theme2.tokens.components;
     const { content } = spacing;
     const headerContext = useDrawerHeaderContext();
     const footerContext = useDrawerFooterContext();
+    const measureContext = useDrawerMeasureContext();
     const { height: windowHeight } = reactNative.useWindowDimensions();
+    const handleContentSizeChange = React65.useCallback(
+      (width, height) => {
+        measureContext == null ? void 0 : measureContext.setBodyContentHeight(height);
+        onContentSizeChange == null ? void 0 : onContentSizeChange(width, height);
+      },
+      [measureContext, onContentSizeChange]
+    );
     const gap = parseTokenValue26(content.slot.gap);
     const horizontalPadding = parseTokenValue26(content.slot.horizontalPadding);
     const topPadding = parseTokenValue26(content.slot.verticalPadding);
@@ -9437,6 +9499,7 @@ var DrawerBody = React65__default.default.forwardRef(
         bodyGap: gap,
         bodyMaxHeight,
         bodyPaddingBottom,
+        onContentSizeChange: handleContentSizeChange,
         contentContainerStyle: [
           {
             gap,