@butternutbox/pawprint-native 0.10.9 → 0.10.11

package/dist/index.js

@@ -8838,6 +8838,8 @@ var DrawerOverlay = React65.forwardRef(({ accessible = false }, _ref) => {
 DrawerOverlay.displayName = "Drawer.Overlay";
 var DrawerDragContext = React65.createContext(null);
 var useDrawerDragContext = () => React65.useContext(DrawerDragContext);
+var DrawerMeasureContext = createContext(null);
+var useDrawerMeasureContext = () => useContext(DrawerMeasureContext);
 var DrawerFooterContext = React65.createContext(false);
 var useDrawerFooterContext = () => React65.useContext(DrawerFooterContext);
 var DrawerHeaderContext = React65.createContext(null);
@@ -8856,17 +8858,12 @@ var StyledPanel2 = styled50(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,
@@ -8892,6 +8889,7 @@ var DrawerContent = React65.forwardRef(
     const { isOpen, closeDrawer, onExitComplete } = useDrawerContext();
     const { height: windowHeight } = useWindowDimensions();
     const maxHeight = windowHeight * 0.9;
+    const bodyMaxHeight = windowHeight - 300;
     const closeDrawerRef = useRef(closeDrawer);
     useEffect(() => {
       closeDrawerRef.current = closeDrawer;
@@ -8902,12 +8900,22 @@ var DrawerContent = React65.forwardRef(
     const entryRanRef = useRef(false);
     const isOpenRef = useRef(isOpen);
     const activeAnim = useRef(null);
+    const [panelHeight, setPanelHeight] = useState(0);
+    const chromeRef = useRef(0);
+    const bodyContentRef = useRef(0);
+    const firstNaturalRef = useRef(0);
     useEffect(() => {
       const id = translateY.addListener(({ value }) => {
         translateYValue.current = value;
       });
       return () => translateY.removeListener(id);
     }, [translateY]);
+    useEffect(() => {
+      if (panelHeightRef.current > 0 && panelHeightRef.current > maxHeight) {
+        setPanelHeight(maxHeight);
+        panelHeightRef.current = maxHeight;
+      }
+    }, [maxHeight]);
     const runEntry = useCallback(() => {
       var _a3;
       if (panelHeightRef.current === 0) return;
@@ -8954,17 +8962,59 @@ var DrawerContent = React65.forwardRef(
         runExit();
       }
     }, [isOpen, runEntry, runExit]);
+    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]);
+    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) => {
+        if (height <= 0) return;
+        bodyContentRef.current = height;
+        lockChrome();
+        applyRefit();
+      },
+      [lockChrome, applyRefit]
+    );
+    const measureContextValue = useMemo(
+      () => ({ setBodyContentHeight }),
+      [setBodyContentHeight]
+    );
     const onLayout = 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 = useRef(
       PanResponder.create({
@@ -9033,10 +9083,14 @@ var DrawerContent = React65.forwardRef(
     const headerContextValue = headerChild != null ? {
       variant: (_a2 = headerChild.props.variant) != null ? _a2 : "titleAndText"
     } : null;
-    return /* @__PURE__ */ jsx(DrawerHeaderContext.Provider, { value: headerContextValue, children: /* @__PURE__ */ jsx(DrawerFooterContext.Provider, { value: hasFooter, children: /* @__PURE__ */ jsx(DrawerDragContext.Provider, { value: dragContextValue, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(DrawerHeaderContext.Provider, { value: headerContextValue, children: /* @__PURE__ */ jsx(DrawerFooterContext.Provider, { value: hasFooter, children: /* @__PURE__ */ jsx(DrawerMeasureContext.Provider, { value: measureContextValue, children: /* @__PURE__ */ jsx(DrawerDragContext.Provider, { value: dragContextValue, children: /* @__PURE__ */ jsx(
       Animated.View,
       {
-        style: [styles.animatedWrapper, { transform: [{ translateY }] }],
+        style: [
+          styles.animatedWrapper,
+          panelHeight > 0 ? { height: panelHeight } : void 0,
+          { transform: [{ translateY }] }
+        ],
         children: /* @__PURE__ */ jsx(
           StyledPanel2,
           __spreadProps(__spreadValues({
@@ -9045,7 +9099,7 @@ var DrawerContent = React65.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,
@@ -9059,7 +9113,7 @@ var DrawerContent = React65.forwardRef(
           })
         )
       }
-    ) }) }) });
+    ) }) }) }) });
   }
 );
 DrawerContent.displayName = "Drawer.Content";
@@ -9375,14 +9429,22 @@ var StyledScrollView = styled50(ScrollView)(
 );
 var DrawerBody = React65.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 = 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 } = useWindowDimensions();
+    const handleContentSizeChange = 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);
@@ -9398,6 +9460,7 @@ var DrawerBody = React65.forwardRef(
         bodyGap: gap,
         bodyMaxHeight,
         bodyPaddingBottom,
+        onContentSizeChange: handleContentSizeChange,
         contentContainerStyle: [
           {
             gap,
@@ -10472,7 +10535,7 @@ NumberFieldInput.displayName = "NumberField.Input";
 var parseTokenValue35 = (value) => parseFloat(value);
 var StyledRoot10 = styled50(View)(({ rootGap, fullWidth }) => __spreadValues({
   gap: rootGap
-}, fullWidth && { width: "100%" }));
+}, fullWidth ? { width: "100%" } : { alignItems: "center" }));
 var StyledLabelGroup = styled50(View)(({ labelGap }) => ({
   gap: labelGap
 }));
@@ -10536,6 +10599,7 @@ var NumberField = React65.forwardRef(
                   {
                     token: typoTokens.label,
                     color: tokens3.colour.text.label,
+                    align: "center",
                     children: label
                   }
                 ),
@@ -10544,6 +10608,7 @@ var NumberField = React65.forwardRef(
                   {
                     token: typoTokens.smallLabel,
                     color: tokens3.colour.text.description,
+                    align: "center",
                     children: smallLabel
                   }
                 )
@@ -10573,6 +10638,7 @@ var NumberField = React65.forwardRef(
             {
               token: size === "lg" ? tokens3.typography.large.secondaryContent : tokens3.typography.small.smallLabel,
               color: tokens3.colour.text.description,
+              align: "center",
               children: description
             }
           ),
@@ -10581,6 +10647,7 @@ var NumberField = React65.forwardRef(
             {
               token: size === "lg" ? tokens3.typography.large.secondaryContent : tokens3.typography.small.smallLabel,
               color: theme2.tokens.components.inputs.colour.description.error,
+              align: "center",
               children: error
             }
           )