@butternutbox/pawprint-native 0.10.9 → 0.10.11

package/.turbo/turbo-build.log

@@ -9,10 +9,10 @@
 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
+CJS ⚡️ Build success in 11449ms
+ESM dist/index.js     1.73 MB
 ESM dist/index.js.map 2.70 MB
-ESM ⚡️ Build success in 11885ms
-DTS ⚡️ Build success in 22581ms
+ESM ⚡️ Build success in 11453ms
+DTS ⚡️ Build success in 22526ms
 DTS dist/index.d.cts 91.44 KB
 DTS dist/index.d.ts  91.44 KB

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # @butternutbox/pawprint-native
 
+## 0.10.11
+
+### Patch Changes
+
+- 27bbcb5: NumberField: center the label, small label and description/error copy over the
+  input on native.
+
+  Previously the label and help text were left-aligned across the full width of
+  the root, so they drifted away from the input group (which packs to the left
+  when not `fullWidth`). The copy now centers over the field: the root centers its
+  children when not `fullWidth`, and the label/help text use centered text so they
+  stay centered over the input in `fullWidth` mode too. Matches the Figma design.
+
+## 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,
@@ -10511,7 +10574,7 @@ NumberFieldInput.displayName = "NumberField.Input";
 var parseTokenValue35 = (value) => parseFloat(value);
 var StyledRoot10 = styled50__default.default(reactNative.View)(({ rootGap, fullWidth }) => __spreadValues({
   gap: rootGap
-}, fullWidth && { width: "100%" }));
+}, fullWidth ? { width: "100%" } : { alignItems: "center" }));
 var StyledLabelGroup = styled50__default.default(reactNative.View)(({ labelGap }) => ({
   gap: labelGap
 }));
@@ -10575,6 +10638,7 @@ var NumberField = React65__default.default.forwardRef(
                   {
                     token: typoTokens.label,
                     color: tokens3.colour.text.label,
+                    align: "center",
                     children: label
                   }
                 ),
@@ -10583,6 +10647,7 @@ var NumberField = React65__default.default.forwardRef(
                   {
                     token: typoTokens.smallLabel,
                     color: tokens3.colour.text.description,
+                    align: "center",
                     children: smallLabel
                   }
                 )
@@ -10612,6 +10677,7 @@ var NumberField = React65__default.default.forwardRef(
             {
               token: size === "lg" ? tokens3.typography.large.secondaryContent : tokens3.typography.small.smallLabel,
               color: tokens3.colour.text.description,
+              align: "center",
               children: description
             }
           ),
@@ -10620,6 +10686,7 @@ var NumberField = React65__default.default.forwardRef(
             {
               token: size === "lg" ? tokens3.typography.large.secondaryContent : tokens3.typography.small.smallLabel,
               color: theme2.tokens.components.inputs.colour.description.error,
+              align: "center",
               children: error
             }
           )