@butternutbox/pawprint-native 0.18.0 → 0.19.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@butternutbox/pawprint-native",
3
- "version": "0.18.0",
3
+ "version": "0.19.0",
4
4
  "type": "module",
5
5
  "description": "ButternutBox Pawprint Design System - React Native Components",
6
6
  "main": "./dist/index.cjs",
@@ -2,6 +2,7 @@ import React from "react"
2
2
  import { ScrollView, ScrollViewProps, useWindowDimensions } from "react-native"
3
3
  import styled from "@emotion/native"
4
4
  import { useTheme } from "@emotion/react"
5
+ import { useSafeAreaInsets } from "react-native-safe-area-context"
5
6
  import { useDrawerHeaderContext } from "./DrawerHeaderContext"
6
7
  import { useDrawerFooterContext } from "./DrawerFooterContext"
7
8
  import { useDrawerBodyMax } from "./DrawerBodyMaxContext"
@@ -48,6 +49,7 @@ export const DrawerBody = React.forwardRef<ScrollView, DrawerBodyProps>(
48
49
  const footerContext = useDrawerFooterContext()
49
50
  const providedMaxHeight = useDrawerBodyMax()
50
51
  const { height: windowHeight } = useWindowDimensions()
52
+ const insets = useSafeAreaInsets()
51
53
 
52
54
  const gap = parseTokenValue(content.slot.gap)
53
55
  const horizontalPadding = parseTokenValue(content.slot.horizontalPadding)
@@ -66,8 +68,16 @@ export const DrawerBody = React.forwardRef<ScrollView, DrawerBodyProps>(
66
68
  parseTokenValue(buttons.size.sm.height)
67
69
  : horizontalPadding
68
70
 
71
+ // With no footer, the body is the last element in the panel, so it must
72
+ // clear the bottom safe area (home indicator / Android nav bar) itself —
73
+ // DrawerFooter does this when present. Use the larger of the standard 2xl
74
+ // content pad and the safe-area inset so short insets (iOS) keep the usual
75
+ // spacing while a taller inset (Android nav bar) isn't clipped.
69
76
  const bodyPaddingBottom = !footerContext
70
- ? parseTokenValue(theme.tokens.semantics.dimensions.spacing["2xl"])
77
+ ? Math.max(
78
+ parseTokenValue(theme.tokens.semantics.dimensions.spacing["2xl"]),
79
+ insets.bottom
80
+ )
71
81
  : 0
72
82
 
73
83
  return (