@butternutbox/pawprint-native 0.20.0 → 0.22.0

package/package.json

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

package/src/components/molecules/Checkbox/Checkbox.stories.tsx

@@ -98,7 +98,10 @@ export const Tile = () => (
         Horizontal
       </Typography>
       <CheckboxGroup orientation="horizontal">
-        <Checkbox variant="tile" label="Chicken" />
+        <Checkbox
+          variant="tile"
+          label="Some really really really really really really long text"
+        />
         <Checkbox variant="tile" label="Beef" />
         <Checkbox variant="tile" label="Lamb" />
       </CheckboxGroup>

package/src/components/molecules/Checkbox/Checkbox.tsx

@@ -69,12 +69,13 @@ const StyledRootPressable = styled(Pressable)<{
       ? { paddingHorizontal: rootPaddingHorizontal }
       : {}),
     // `fitContent` tiles hug their content (for wrapping rows); otherwise the
-    // tile fills its container width.
+    // tile fills its container width. For standalone checkboxes, always fill width
+    // so labels wrap properly.
     ...(rootMaxWidth !== undefined
       ? rootFitContent
         ? { maxWidth: rootMaxWidth, alignSelf: "flex-start" }
         : { maxWidth: rootMaxWidth, width: "100%" }
-      : {}),
+      : { width: "100%" }),
     ...(rootBgColor ? { backgroundColor: rootBgColor } : {}),
     ...(rootBorderWidth !== undefined
       ? { borderWidth: rootBorderWidth, borderColor: rootBorderColor }
@@ -113,11 +114,10 @@ const StyledControl = styled(View)<{
 
 const StyledContent = styled(View)<{
   contentGap: number
-  contentFlex: number
-}>(({ contentGap, contentFlex }) => ({
+}>(({ contentGap }) => ({
   flexDirection: "column",
   gap: contentGap,
-  flex: contentFlex,
+  flex: 1,
   minWidth: 0
 }))
 
@@ -261,7 +261,6 @@ export const Checkbox = React.forwardRef<View, CheckboxProps>(
 
         <StyledContent
           contentGap={parseTokenValue(checkbox.spacing.content.gap)}
-          contentFlex={isTile && fitContent ? 0 : 1}
         >
           {label && (
             <Typography

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

@@ -6,8 +6,11 @@ import { useSafeAreaInsets } from "react-native-safe-area-context"
 import { useDrawerHeaderContext } from "./DrawerHeaderContext"
 import { useDrawerFooterContext } from "./DrawerFooterContext"
 import { useDrawerBodyMax } from "./DrawerBodyMaxContext"
+import { useDrawerKeyboardAvoidance } from "../../../hooks/useDrawerKeyboardAvoidance"
 
-export type DrawerBodyProps = ScrollViewProps
+export type DrawerBodyProps = ScrollViewProps & {
+  ignoreKeyboardAvoidance?: boolean
+}
 
 const parseTokenValue = (value: string): number => parseFloat(value)
 
@@ -40,7 +43,15 @@ const StyledScrollView = styled(ScrollView)<{
  * chrome-aware `maxHeight`, scrolling beyond that.
  */
 export const DrawerBody = React.forwardRef<ScrollView, DrawerBodyProps>(
-  ({ children, contentContainerStyle, ...props }, ref) => {
+  (
+    {
+      children,
+      contentContainerStyle,
+      ignoreKeyboardAvoidance = false,
+      ...props
+    },
+    ref
+  ) => {
     const theme = useTheme()
     const { spacing } = theme.tokens.components.drawer
     const { buttons } = theme.tokens.components
@@ -50,6 +61,9 @@ export const DrawerBody = React.forwardRef<ScrollView, DrawerBodyProps>(
     const providedMaxHeight = useDrawerBodyMax()
     const { height: windowHeight } = useWindowDimensions()
     const insets = useSafeAreaInsets()
+    const { contentContainerStyle: keyboardStyle } =
+      useDrawerKeyboardAvoidance()
+    const effectiveKeyboardStyle = ignoreKeyboardAvoidance ? {} : keyboardStyle
 
     const gap = parseTokenValue(content.slot.gap)
     const horizontalPadding = parseTokenValue(content.slot.horizontalPadding)
@@ -93,6 +107,7 @@ export const DrawerBody = React.forwardRef<ScrollView, DrawerBodyProps>(
             paddingTop: topPadding,
             paddingBottom: 0
           },
+          effectiveKeyboardStyle,
           contentContainerStyle
         ]}
         {...props}

package/src/hooks/index.ts

@@ -0,0 +1 @@
+export { useDrawerKeyboardAvoidance } from "./useDrawerKeyboardAvoidance"

package/src/hooks/useDrawerKeyboardAvoidance.ts

@@ -0,0 +1,29 @@
+import { useEffect, useState } from "react"
+import { Keyboard, StyleProp, ViewStyle } from "react-native"
+
+const useDrawerKeyboardAvoidance = (
+  minPadding: number = 16
+): { contentContainerStyle: StyleProp<ViewStyle> } => {
+  const [keyboardHeight, setKeyboardHeight] = useState(0)
+
+  useEffect(() => {
+    const showListener = Keyboard.addListener("keyboardDidShow", (e) => {
+      setKeyboardHeight(e.endCoordinates.height)
+    })
+    const hideListener = Keyboard.addListener("keyboardDidHide", () => {
+      setKeyboardHeight(0)
+    })
+    return () => {
+      showListener.remove()
+      hideListener.remove()
+    }
+  }, [])
+
+  return {
+    contentContainerStyle: {
+      paddingBottom: Math.max(minPadding, keyboardHeight)
+    }
+  }
+}
+
+export { useDrawerKeyboardAvoidance }

package/src/index.ts

@@ -7,3 +7,4 @@ export { default as styled } from "@emotion/native"
 export * from "./fonts"
 export * from "./theme"
 export * from "./components"
+export * from "./hooks"