@butternutbox/pawprint-native 0.5.0 → 0.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@butternutbox/pawprint-native",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "type": "module",
   "description": "ButternutBox Pawprint Design System - React Native Components",
   "main": "./dist/index.cjs",

package/src/components/molecules/Drawer/DrawerBody.tsx

@@ -1,8 +1,9 @@
 import React from "react"
-import { ScrollView, ScrollViewProps } from "react-native"
+import { ScrollView, ScrollViewProps, useWindowDimensions } from "react-native"
 import styled from "@emotion/native"
 import { useTheme } from "@emotion/react"
 import { useDrawerHeaderContext } from "./DrawerHeaderContext"
+import { useDrawerFooterContext } from "./DrawerFooterContext"
 
 export type DrawerBodyProps = ScrollViewProps
 
@@ -12,12 +13,24 @@ const StyledScrollView = styled(ScrollView)<{
   bodyPaddingHorizontal: number
   bodyPaddingRight: number
   bodyGap: number
-}>(({ bodyPaddingHorizontal, bodyPaddingRight, bodyGap }) => ({
-  flex: 1,
-  paddingLeft: bodyPaddingHorizontal,
-  paddingRight: bodyPaddingRight,
-  gap: bodyGap
-}))
+  bodyMaxHeight: number
+  bodyPaddingBottom: number
+}>(
+  ({
+    bodyPaddingHorizontal,
+    bodyPaddingRight,
+    bodyGap,
+    bodyMaxHeight,
+    bodyPaddingBottom
+  }) => ({
+    flex: 1,
+    paddingLeft: bodyPaddingHorizontal,
+    paddingRight: bodyPaddingRight,
+    gap: bodyGap,
+    maxHeight: bodyMaxHeight,
+    paddingBottom: bodyPaddingBottom
+  })
+)
 
 /**
  * Scrollable content area of the drawer. Grows to fill available space
@@ -30,10 +43,13 @@ export const DrawerBody = React.forwardRef<ScrollView, DrawerBodyProps>(
     const { buttons } = theme.tokens.components
     const { content } = spacing
     const headerContext = useDrawerHeaderContext()
+    const footerContext = useDrawerFooterContext()
+    const { height: windowHeight } = useWindowDimensions()
 
     const gap = parseTokenValue(content.slot.gap)
     const horizontalPadding = parseTokenValue(content.slot.horizontalPadding)
     const topPadding = parseTokenValue(content.slot.verticalPadding)
+    const bodyMaxHeight = windowHeight - 300
 
     // When there's no header the close button floats in the top-right corner.
     // Reserve space on the right so body content doesn't slide under it.
@@ -43,12 +59,18 @@ export const DrawerBody = React.forwardRef<ScrollView, DrawerBodyProps>(
           parseTokenValue(buttons.size.sm.height)
         : horizontalPadding
 
+    const bodyPaddingBottom = !footerContext
+      ? parseTokenValue(theme.tokens.semantics.dimensions.spacing["2xl"])
+      : 0
+
     return (
       <StyledScrollView
         ref={ref}
         bodyPaddingHorizontal={horizontalPadding}
         bodyPaddingRight={paddingRight}
         bodyGap={gap}
+        bodyMaxHeight={bodyMaxHeight}
+        bodyPaddingBottom={bodyPaddingBottom}
         contentContainerStyle={[
           {
             gap,