@butternutbox/pawprint-native 0.17.0 → 0.18.0

package/.turbo/turbo-build.log

@@ -7,12 +7,12 @@
 CJS Build start
 ESM Build start
 DTS Build start
-ESM dist/index.js     510.74 KB
-ESM dist/index.js.map 1.04 MB
-ESM ⚡️ Build success in 8194ms
-CJS dist/index.cjs     540.48 KB
-CJS dist/index.cjs.map 1.04 MB
-CJS ⚡️ Build success in 8195ms
-DTS ⚡️ Build success in 24290ms
-DTS dist/index.d.cts 99.80 KB
-DTS dist/index.d.ts  99.80 KB
+CJS dist/index.cjs     542.62 KB
+CJS dist/index.cjs.map 1.05 MB
+CJS ⚡️ Build success in 6588ms
+ESM dist/index.js     512.75 KB
+ESM dist/index.js.map 1.05 MB
+ESM ⚡️ Build success in 6590ms
+DTS ⚡️ Build success in 21038ms
+DTS dist/index.d.cts 100.86 KB
+DTS dist/index.d.ts  100.86 KB

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @butternutbox/pawprint-native
 
+## 0.18.0
+
+### Minor Changes
+
+- 322e972: Drawer: robust self-sizing, backdrop toggle, and an app-overlay slot
+  - **Self-sizing panel (fix):** the panel now wraps its content naturally (capped at 90% of the window) and the body `ScrollView` self-sizes to its content up to a chrome-aware `maxHeight` (`90%·window − measured header/footer`). This replaces the previous explicit-panel-height + content-measurement feedback loop, fixing the clipped footer/action button on tall content and the leftover gap above the footer when content shrinks.
+  - **`backdrop` prop (new):** `Drawer.Root` accepts `backdrop` (default `true`). Set `backdrop={false}` for a backdrop-less, pass-through drawer — it renders inline (no native `Modal`), omits the overlay, and lets touches outside the panel reach the content behind it (e.g. a calendar stays interactive while the sheet is open).
+  - **`Drawer.OverlayProvider` (new):** provides an app-level component rendered on top of every modal drawer, inside the drawer's native `Modal`, so app-root overlays (e.g. toast notifications) surface above the drawer instead of behind its OS window. Opt-in (defaults to nothing rendered).
+
+  All changes are backward compatible — existing drawers need no changes.
+
 ## 0.17.0
 
 ### Minor Changes

package/dist/index.cjs

@@ -5638,6 +5638,7 @@ Animated5.displayName = "Animated";
 var DrawerContext = React66__default.default.createContext({
   isOpen: false,
   modalVisible: false,
+  backdrop: true,
   openDrawer: () => {
   },
   closeDrawer: () => {
@@ -5646,10 +5647,12 @@ var DrawerContext = React66__default.default.createContext({
   }
 });
 var useDrawerContext = () => React66__default.default.useContext(DrawerContext);
+var DrawerOverlayContext = React66.createContext(null);
+var useDrawerOverlay = () => React66.useContext(DrawerOverlayContext);
 var FADE_DURATION = 220;
 var DrawerOverlay = React66__default.default.forwardRef(({ accessible = false }, _ref) => {
   const theme2 = react.useTheme();
-  const { isOpen, closeDrawer } = useDrawerContext();
+  const { isOpen, closeDrawer, backdrop } = useDrawerContext();
   const opacity = React66.useRef(new reactNative.Animated.Value(0)).current;
   React66.useEffect(() => {
     reactNative.Animated.timing(opacity, {
@@ -5658,6 +5661,7 @@ var DrawerOverlay = React66__default.default.forwardRef(({ accessible = false },
       useNativeDriver: true
     }).start();
   }, [isOpen, opacity]);
+  if (!backdrop) return null;
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactNative.Pressable,
     {
@@ -5685,6 +5689,8 @@ var DrawerDragContext = React66__default.default.createContext(null);
 var useDrawerDragContext = () => React66__default.default.useContext(DrawerDragContext);
 var DrawerMeasureContext = React66.createContext(null);
 var useDrawerMeasureContext = () => React66.useContext(DrawerMeasureContext);
+var DrawerBodyMaxContext = React66.createContext(null);
+var useDrawerBodyMax = () => React66.useContext(DrawerBodyMaxContext);
 var DrawerFooterContext = React66__default.default.createContext(false);
 var useDrawerFooterContext = () => React66__default.default.useContext(DrawerFooterContext);
 var DrawerHeaderContext = React66__default.default.createContext(null);
@@ -5698,17 +5704,17 @@ var StyledPanel2 = styled51__default.default(reactNative.View)(
     panelBorderRadius,
     panelBgColor,
     panelMaxWidth,
+    panelMaxHeight,
     panelBorderWidth,
     panelBorderColor,
     panelShadowColor,
     panelShadowOffsetY,
-    panelShadowBlur,
-    panelFlex
-  }) => __spreadProps(__spreadValues({
+    panelShadowBlur
+  }) => ({
     width: "100%",
     maxWidth: panelMaxWidth,
-    alignSelf: "center"
-  }, panelFlex != null ? { flex: panelFlex } : void 0), {
+    maxHeight: panelMaxHeight,
+    alignSelf: "center",
     borderTopLeftRadius: panelBorderRadius,
     borderTopRightRadius: panelBorderRadius,
     borderTopWidth: panelBorderWidth,
@@ -5734,7 +5740,8 @@ var DrawerContent = React66__default.default.forwardRef(
     const { isOpen, closeDrawer, onExitComplete } = useDrawerContext();
     const { height: windowHeight } = reactNative.useWindowDimensions();
     const maxHeight = windowHeight * 0.9;
-    const bodyMaxHeight = windowHeight - 300;
+    const topBorder = parseTokenValue23(dimensions3.borderWidth.sm);
+    const noFooterBodyPadding = parseTokenValue23(dimensions3.spacing["2xl"]);
     const closeDrawerRef = React66.useRef(closeDrawer);
     React66.useEffect(() => {
       closeDrawerRef.current = closeDrawer;
@@ -5745,10 +5752,12 @@ var DrawerContent = React66__default.default.forwardRef(
     const entryRanRef = React66.useRef(false);
     const isOpenRef = React66.useRef(isOpen);
     const activeAnim = React66.useRef(null);
-    const [panelHeight, setPanelHeight] = React66.useState(0);
-    const chromeRef = React66.useRef(0);
-    const bodyContentRef = React66.useRef(0);
-    const firstNaturalRef = React66.useRef(0);
+    const [bodyMax, setBodyMax] = React66.useState(null);
+    const bodyMaxRef = React66.useRef(null);
+    const headerHeightRef = React66.useRef(0);
+    const footerHeightRef = React66.useRef(0);
+    const hasHeaderRef = React66.useRef(false);
+    const hasFooterRef = React66.useRef(false);
     React66.useEffect(() => {
       const id = translateY.addListener(({ value }) => {
         translateYValue.current = value;
@@ -5756,8 +5765,7 @@ var DrawerContent = React66__default.default.forwardRef(
       return () => translateY.removeListener(id);
     }, [translateY]);
     React66.useEffect(() => {
-      if (panelHeightRef.current > 0 && panelHeightRef.current > maxHeight) {
-        setPanelHeight(maxHeight);
+      if (panelHeightRef.current > maxHeight) {
         panelHeightRef.current = maxHeight;
       }
     }, [maxHeight]);
@@ -5807,59 +5815,56 @@ var DrawerContent = React66__default.default.forwardRef(
         runExit();
       }
     }, [isOpen, runEntry, runExit]);
-    const applyRefit = React66.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);
+    const measureChrome = React66.useCallback(() => {
+      if (hasHeaderRef.current && headerHeightRef.current <= 0) return 0;
+      if (hasFooterRef.current && footerHeightRef.current <= 0) return 0;
+      const header = hasHeaderRef.current ? headerHeightRef.current : 0;
+      const footer = hasFooterRef.current ? footerHeightRef.current : 0;
+      const bodyBottomPad = hasFooterRef.current ? 0 : noFooterBodyPadding;
+      return header + footer + topBorder + bodyBottomPad;
+    }, [noFooterBodyPadding, topBorder]);
+    const applyBodyMax = React66.useCallback(() => {
+      var _a3;
+      const chrome = measureChrome();
+      if (chrome <= 0) return;
+      const availableBody = Math.max(0, maxHeight - chrome);
+      if (Math.abs(availableBody - ((_a3 = bodyMaxRef.current) != null ? _a3 : -1)) > 1) {
+        bodyMaxRef.current = availableBody;
+        setBodyMax(availableBody);
       }
-    }, [bodyMaxHeight, maxHeight]);
-    const lockChrome = React66.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 = React66.useCallback(
+    }, [measureChrome, maxHeight]);
+    const setHeaderHeight = React66.useCallback(
+      (height) => {
+        if (height <= 0 || Math.abs(height - headerHeightRef.current) < 1)
+          return;
+        headerHeightRef.current = height;
+        applyBodyMax();
+      },
+      [applyBodyMax]
+    );
+    const setFooterHeight = React66.useCallback(
       (height) => {
-        if (height <= 0) return;
-        bodyContentRef.current = height;
-        lockChrome();
-        applyRefit();
+        if (height <= 0 || Math.abs(height - footerHeightRef.current) < 1)
+          return;
+        footerHeightRef.current = height;
+        applyBodyMax();
       },
-      [lockChrome, applyRefit]
+      [applyBodyMax]
     );
     const measureContextValue = React66.useMemo(
-      () => ({ setBodyContentHeight }),
-      [setBodyContentHeight]
+      () => ({ setHeaderHeight, setFooterHeight }),
+      [setHeaderHeight, setFooterHeight]
     );
     const onLayout = React66.useCallback(
       ({ nativeEvent }) => {
-        const h = nativeEvent.layout.height;
-        const capped = Math.min(h, maxHeight);
+        const capped = Math.min(nativeEvent.layout.height, maxHeight);
         if (capped <= 0) return;
-        if (entryRanRef.current) return;
-        if (chromeRef.current <= 0) {
-          firstNaturalRef.current = h;
-          lockChrome();
-        }
-        if (capped !== panelHeightRef.current) {
-          panelHeightRef.current = capped;
-          setPanelHeight(capped);
-        }
-        if (isOpenRef.current) {
+        panelHeightRef.current = capped;
+        if (!entryRanRef.current && isOpenRef.current) {
           runEntry();
         }
-        applyRefit();
       },
-      [runEntry, maxHeight, lockChrome, applyRefit]
+      [runEntry, maxHeight]
     );
     const panResponder = React66.useRef(
       reactNative.PanResponder.create({
@@ -5925,6 +5930,8 @@ var DrawerContent = React66__default.default.forwardRef(
     const headerChild = React66__default.default.Children.toArray(children).find(
       (child) => React66__default.default.isValidElement(child) && child.type.displayName === "Drawer.Header"
     );
+    hasHeaderRef.current = headerChild != null;
+    hasFooterRef.current = hasFooter;
     const headerContextValue = headerChild != null ? {
       variant: (_a2 = headerChild.props.variant) != null ? _a2 : "titleAndText"
     } : null;
@@ -5933,7 +5940,6 @@ var DrawerContent = React66__default.default.forwardRef(
       {
         style: [
           styles.animatedWrapper,
-          panelHeight > 0 ? { height: panelHeight } : void 0,
           { transform: [{ translateY }] }
         ],
         children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -5944,7 +5950,7 @@ var DrawerContent = React66__default.default.forwardRef(
             panelBorderRadius: parseTokenValue23(drawer.borderRadius.top),
             panelBgColor: colour.background.container.default,
             panelMaxWidth: parseTokenValue23(drawer.size.maxWidth),
-            panelFlex: panelHeight > 0 ? 1 : void 0,
+            panelMaxHeight: maxHeight,
             panelBorderWidth: parseTokenValue23(dimensions3.borderWidth.sm),
             panelBorderColor: colour.border.default,
             panelShadowColor: modal.shadow.color,
@@ -5954,7 +5960,7 @@ var DrawerContent = React66__default.default.forwardRef(
             accessibilityRole: "none",
             accessibilityViewIsModal: true
           }, props), {
-            children
+            children: /* @__PURE__ */ jsxRuntime.jsx(DrawerBodyMaxContext.Provider, { value: bodyMax, children })
           })
         )
       }
@@ -6138,12 +6144,20 @@ function splitChildren(children) {
 }
 var DrawerHeader = React66__default.default.forwardRef(
   (_a, ref) => {
-    var _b = _a, { variant = "titleAndText", imageSource, children } = _b, props = __objRest(_b, ["variant", "imageSource", "children"]);
+    var _b = _a, { variant = "titleAndText", imageSource, children, onLayout } = _b, props = __objRest(_b, ["variant", "imageSource", "children", "onLayout"]);
     var _a2, _b2, _c, _d, _e, _f;
     const theme2 = react.useTheme();
     const { drawer, grabber } = theme2.tokens.components;
     const { colour, dimensions: dimensions3 } = theme2.tokens.semantics;
     const dragContext = useDrawerDragContext();
+    const measureContext = useDrawerMeasureContext();
+    const handleLayout = React66.useCallback(
+      (event) => {
+        measureContext == null ? void 0 : measureContext.setHeaderHeight(event.nativeEvent.layout.height);
+        onLayout == null ? void 0 : onLayout(event);
+      },
+      [measureContext, onLayout]
+    );
     const contextValue = React66.useMemo(() => ({ variant }), [variant]);
     const { closeChild, otherChildren } = splitChildren(children);
     const headerSpacing = drawer.spacing.drawerHeader[variant === "image" ? "Image" : variant];
@@ -6195,7 +6209,8 @@ var DrawerHeader = React66__default.default.forwardRef(
         headerGap: parseTokenValue26(headerSpacing.gap),
         headerBorderBottomWidth: variant === "titleAndText" ? parseTokenValue26(dimensions3.borderWidth.sm) : void 0,
         headerBorderColor: variant === "titleAndText" ? colour.border.default : void 0,
-        headerBgColor: variant === "fullBleed" ? drawer.drawerHeader.colour.background.fullBleed : void 0
+        headerBgColor: variant === "fullBleed" ? drawer.drawerHeader.colour.background.fullBleed : void 0,
+        onLayout: handleLayout
       }, props), {
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -6260,40 +6275,35 @@ var StyledScrollView = styled51__default.default(reactNative.ScrollView)(
   ({
     bodyPaddingHorizontal,
     bodyPaddingRight,
-    bodyGap,
     bodyMaxHeight,
     bodyPaddingBottom
   }) => ({
-    flex: 1,
+    // No `flex: 1`: the ScrollView self-sizes to its content (up to
+    // `maxHeight`), so the panel wraps tight around short content and scrolls
+    // only when content exceeds the chrome-aware cap.
+    flexGrow: 0,
+    flexShrink: 1,
     paddingLeft: bodyPaddingHorizontal,
     paddingRight: bodyPaddingRight,
-    gap: bodyGap,
     maxHeight: bodyMaxHeight,
     paddingBottom: bodyPaddingBottom
   })
 );
 var DrawerBody = React66__default.default.forwardRef(
   (_a, ref) => {
-    var _b = _a, { children, contentContainerStyle, onContentSizeChange } = _b, props = __objRest(_b, ["children", "contentContainerStyle", "onContentSizeChange"]);
+    var _b = _a, { children, contentContainerStyle } = _b, props = __objRest(_b, ["children", "contentContainerStyle"]);
     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 providedMaxHeight = useDrawerBodyMax();
     const { height: windowHeight } = reactNative.useWindowDimensions();
-    const handleContentSizeChange = React66.useCallback(
-      (width, height) => {
-        measureContext == null ? void 0 : measureContext.setBodyContentHeight(height);
-        onContentSizeChange == null ? void 0 : onContentSizeChange(width, height);
-      },
-      [measureContext, onContentSizeChange]
-    );
     const gap = parseTokenValue27(content.slot.gap);
     const horizontalPadding = parseTokenValue27(content.slot.horizontalPadding);
     const topPadding = parseTokenValue27(content.slot.verticalPadding);
-    const bodyMaxHeight = windowHeight - 300;
+    const bodyMaxHeight = providedMaxHeight != null ? providedMaxHeight : windowHeight - 300;
     const paddingRight = headerContext === null ? parseTokenValue27(spacing.close.right.md) + parseTokenValue27(buttons.size.sm.height) : horizontalPadding;
     const bodyPaddingBottom = !footerContext ? parseTokenValue27(theme2.tokens.semantics.dimensions.spacing["2xl"]) : 0;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -6302,10 +6312,8 @@ var DrawerBody = React66__default.default.forwardRef(
         ref,
         bodyPaddingHorizontal: horizontalPadding,
         bodyPaddingRight: paddingRight,
-        bodyGap: gap,
         bodyMaxHeight,
         bodyPaddingBottom,
-        onContentSizeChange: handleContentSizeChange,
         contentContainerStyle: [
           {
             gap,
@@ -6330,10 +6338,18 @@ var StyledFooter = styled51__default.default(reactNative.View)(({ footerPaddingT
 }));
 var DrawerFooter = React66__default.default.forwardRef(
   (_a, ref) => {
-    var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
+    var _b = _a, { children, onLayout } = _b, props = __objRest(_b, ["children", "onLayout"]);
     const theme2 = react.useTheme();
     const { spacing } = theme2.tokens.components.drawer;
     const insets = reactNativeSafeAreaContext.useSafeAreaInsets();
+    const measureContext = useDrawerMeasureContext();
+    const handleLayout = React66.useCallback(
+      (event) => {
+        measureContext == null ? void 0 : measureContext.setFooterHeight(event.nativeEvent.layout.height);
+        onLayout == null ? void 0 : onLayout(event);
+      },
+      [measureContext, onLayout]
+    );
     return /* @__PURE__ */ jsxRuntime.jsx(
       StyledFooter,
       __spreadProps(__spreadValues({
@@ -6342,7 +6358,8 @@ var DrawerFooter = React66__default.default.forwardRef(
         footerPaddingHorizontal: parseTokenValue28(
           spacing.footer.horizontalPadding
         ),
-        footerPaddingBottom: parseTokenValue28(spacing.bottomPadding) + insets.bottom
+        footerPaddingBottom: parseTokenValue28(spacing.bottomPadding) + insets.bottom,
+        onLayout: handleLayout
       }, props), {
         children
       })
@@ -6356,12 +6373,18 @@ var DrawerRoot = React66__default.default.forwardRef(
       open: controlledOpen,
       defaultOpen = false,
       onOpenChange,
-      children
+      backdrop = true,
+      children,
+      style,
+      pointerEvents
     } = _b, rest = __objRest(_b, [
       "open",
       "defaultOpen",
       "onOpenChange",
-      "children"
+      "backdrop",
+      "children",
+      "style",
+      "pointerEvents"
     ]);
     const isControlled = React66.useRef(controlledOpen !== void 0);
     const [internalOpen, setInternalOpen] = React66.useState(defaultOpen);
@@ -6384,10 +6407,26 @@ var DrawerRoot = React66__default.default.forwardRef(
       setModalVisible(false);
     }, []);
     const ctx = React66.useMemo(
-      () => ({ isOpen, modalVisible, openDrawer, closeDrawer, onExitComplete }),
-      [isOpen, modalVisible, openDrawer, closeDrawer, onExitComplete]
+      () => ({
+        isOpen,
+        modalVisible,
+        backdrop,
+        openDrawer,
+        closeDrawer,
+        onExitComplete
+      }),
+      [isOpen, modalVisible, backdrop, openDrawer, closeDrawer, onExitComplete]
     );
-    return /* @__PURE__ */ jsxRuntime.jsx(DrawerContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, __spreadProps(__spreadValues({ ref }, rest), { children })) });
+    return /* @__PURE__ */ jsxRuntime.jsx(DrawerContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.View,
+      __spreadProps(__spreadValues({
+        ref,
+        style: backdrop ? style : [reactNative.StyleSheet.absoluteFill, style],
+        pointerEvents: backdrop ? pointerEvents : pointerEvents != null ? pointerEvents : "box-none"
+      }, rest), {
+        children
+      })
+    ) });
   }
 );
 DrawerRoot.displayName = "Drawer";
@@ -6399,8 +6438,15 @@ var DrawerTrigger = React66__default.default.forwardRef(
 );
 DrawerTrigger.displayName = "Drawer.Trigger";
 var DrawerPortal = ({ children, topContent }) => {
-  const { modalVisible, closeDrawer } = React66__default.default.useContext(DrawerContext);
+  const { modalVisible, closeDrawer, backdrop } = React66__default.default.useContext(DrawerContext);
+  const OverlayComponent = useDrawerOverlay();
   if (!modalVisible) return null;
+  if (!backdrop) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      children,
+      topContent
+    ] });
+  }
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactNative.Modal,
     {
@@ -6411,16 +6457,23 @@ var DrawerPortal = ({ children, topContent }) => {
       onRequestClose: closeDrawer,
       children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles3.modalContainer, children: [
         children,
-        topContent
+        topContent,
+        OverlayComponent ? /* @__PURE__ */ jsxRuntime.jsx(OverlayComponent, {}) : null
       ] })
     }
   );
 };
 DrawerPortal.displayName = "Drawer.Portal";
+var DrawerOverlayProvider = ({
+  component,
+  children
+}) => /* @__PURE__ */ jsxRuntime.jsx(DrawerOverlayContext.Provider, { value: component, children });
+DrawerOverlayProvider.displayName = "Drawer.OverlayProvider";
 var Drawer = Object.assign(DrawerRoot, {
   Root: DrawerRoot,
   Trigger: DrawerTrigger,
   Portal: DrawerPortal,
+  OverlayProvider: DrawerOverlayProvider,
   Overlay: DrawerOverlay,
   Content: DrawerContent,
   Grabber: DrawerGrabber,