@butternutbox/pawprint-native 0.10.6 → 0.10.8

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

@@ -11,6 +11,7 @@ import {
 import styled from "@emotion/native"
 import { useTheme } from "@emotion/react"
 import { DrawerDragContext } from "./DrawerDragContext"
+import { DrawerMeasureContext } from "./DrawerMeasureContext"
 import { useDrawerContext } from "./DrawerContext"
 import { DrawerFooterContext } from "./DrawerFooterContext"
 import {
@@ -99,6 +100,10 @@ export const DrawerContent = React.forwardRef<View, DrawerContentProps>(
 
     const { height: windowHeight } = useWindowDimensions()
     const maxHeight = windowHeight * 0.9
+    // Tallest the body content is allowed to grow before it scrolls. Enforced
+    // here (via the panel height) rather than as a maxHeight on the body
+    // ScrollView, so the panel stays the single height authority.
+    const bodyMaxHeight = windowHeight - 300
 
     // Keep a ref so the PanResponder (created once) always calls the latest
     // closeDrawer without becoming a stale closure.
@@ -185,29 +190,85 @@ export const DrawerContent = React.forwardRef<View, DrawerContentProps>(
 
     const onLayout = useCallback(
       ({ nativeEvent }: { nativeEvent: { layout: { height: number } } }) => {
+        // This only bootstraps the first measurement and the entry animation.
+        // After entry has run, applyDesiredHeight (driven by the body's
+        // content size) is the SOLE authority for panel height — this handler
+        // must not keep overriding it, or the two fight and the panel gets
+        // pinned to chrome + bodyFrame (leaving a gap) instead of
+        // chrome + content.
+        if (entryRanRef.current) return
+
         const h = nativeEvent.layout.height
         const capped = Math.min(h, maxHeight)
+        if (capped <= 0) return
 
-        // Only update state when the effective height actually changes, to
-        // avoid re-render loops. Compare against the ref (kept in sync with
-        // state) so panelHeight doesn't need to be a dep of this callback.
-        if (capped !== panelHeightRef.current && capped > 0) {
+        if (capped !== panelHeightRef.current) {
           setPanelHeight(capped)
           panelHeightRef.current = capped
         }
 
-        // Run entry on the first measurement. The animation starts from the
-        // capped height even though the panel may still be at natural size;
-        // the re-render that sets the explicit height happens while the panel
-        // is still off-screen, so there is no visible jump.
-        if (isOpenRef.current && !entryRanRef.current && capped > 0) {
-          panelHeightRef.current = capped
+        if (isOpenRef.current) {
           runEntry()
         }
       },
       [runEntry, maxHeight]
     )
 
+    // Re-fit the panel height whenever the body content changes. Desired height
+    // is the absolute `chrome + content` (clamped to bodyMax, then maxHeight).
+    // `chrome` (header + footer + padding + borders) is invariant for a given
+    // drawer, so it is measured ONCE and locked. Deriving it repeatedly from
+    // `panelHeight - bodyFrame` is unsafe: those two are only consistent at a
+    // settled layout, and mid-resize the frame lags, which inflates chrome and
+    // pins the panel to chrome + frame (a gap) instead of chrome + content.
+    const chromeRef = useRef(0)
+    const bodyContentRef = useRef(0)
+
+    const applyDesiredHeight = useCallback(() => {
+      const chrome = chromeRef.current
+      const content = bodyContentRef.current
+      const current = panelHeightRef.current
+      if (chrome <= 0 || content <= 0 || current <= 0) return
+      const desired = Math.min(
+        chrome + Math.min(content, bodyMaxHeight),
+        maxHeight
+      )
+      if (Math.abs(desired - current) > 1) {
+        panelHeightRef.current = desired
+        setPanelHeight(desired)
+      }
+    }, [maxHeight, bodyMaxHeight])
+
+    const setBodyFrameHeight = useCallback(
+      (frameHeight: number) => {
+        // Lock chrome once, from the first settled measurement (initial layout,
+        // before any content toggling), where panelHeight and bodyFrame are
+        // consistent. It stays fixed thereafter.
+        if (chromeRef.current <= 0) {
+          const current = panelHeightRef.current
+          if (frameHeight > 0 && current > frameHeight) {
+            chromeRef.current = current - frameHeight
+          }
+        }
+        applyDesiredHeight()
+      },
+      [applyDesiredHeight]
+    )
+
+    const setBodyContentHeight = useCallback(
+      (contentHeight: number) => {
+        if (contentHeight <= 0) return
+        bodyContentRef.current = contentHeight
+        applyDesiredHeight()
+      },
+      [applyDesiredHeight]
+    )
+
+    const measureContextValue = useMemo(
+      () => ({ setBodyFrameHeight, setBodyContentHeight }),
+      [setBodyFrameHeight, setBodyContentHeight]
+    )
+
     const panResponder = useRef(
       PanResponder.create({
         // Claim the responder as soon as a touch starts on the grabber so the
@@ -292,35 +353,37 @@ export const DrawerContent = React.forwardRef<View, DrawerContentProps>(
     return (
       <DrawerHeaderContext.Provider value={headerContextValue}>
         <DrawerFooterContext.Provider value={hasFooter}>
-          <DrawerDragContext.Provider value={dragContextValue}>
-            <Animated.View
-              style={[
-                styles.animatedWrapper,
-                panelHeight > 0 ? { height: panelHeight } : undefined,
-                { transform: [{ translateY }] }
-              ]}
-            >
-              <StyledPanel
-                ref={ref}
-                onLayout={onLayout}
-                panelBorderRadius={parseTokenValue(drawer.borderRadius.top)}
-                panelBgColor={colour.background.container.default}
-                panelMaxWidth={parseTokenValue(drawer.size.maxWidth)}
-                panelFlex={panelHeight > 0 ? 1 : undefined}
-                panelBorderWidth={parseTokenValue(dimensions.borderWidth.sm)}
-                panelBorderColor={colour.border.default}
-                panelShadowColor={modal.shadow.color}
-                panelShadowOffsetY={parseTokenValue(modal.shadow.offsetY)}
-                panelShadowBlur={parseTokenValue(modal.shadow.blur)}
-                accessible
-                accessibilityRole="none"
-                accessibilityViewIsModal
-                {...props}
+          <DrawerMeasureContext.Provider value={measureContextValue}>
+            <DrawerDragContext.Provider value={dragContextValue}>
+              <Animated.View
+                style={[
+                  styles.animatedWrapper,
+                  panelHeight > 0 ? { height: panelHeight } : undefined,
+                  { transform: [{ translateY }] }
+                ]}
               >
-                {children}
-              </StyledPanel>
-            </Animated.View>
-          </DrawerDragContext.Provider>
+                <StyledPanel
+                  ref={ref}
+                  onLayout={onLayout}
+                  panelBorderRadius={parseTokenValue(drawer.borderRadius.top)}
+                  panelBgColor={colour.background.container.default}
+                  panelMaxWidth={parseTokenValue(drawer.size.maxWidth)}
+                  panelFlex={panelHeight > 0 ? 1 : undefined}
+                  panelBorderWidth={parseTokenValue(dimensions.borderWidth.sm)}
+                  panelBorderColor={colour.border.default}
+                  panelShadowColor={modal.shadow.color}
+                  panelShadowOffsetY={parseTokenValue(modal.shadow.offsetY)}
+                  panelShadowBlur={parseTokenValue(modal.shadow.blur)}
+                  accessible
+                  accessibilityRole="none"
+                  accessibilityViewIsModal
+                  {...props}
+                >
+                  {children}
+                </StyledPanel>
+              </Animated.View>
+            </DrawerDragContext.Provider>
+          </DrawerMeasureContext.Provider>
         </DrawerFooterContext.Provider>
       </DrawerHeaderContext.Provider>
     )

package/src/components/molecules/Drawer/DrawerMeasureContext.ts

@@ -0,0 +1,22 @@
+import React from "react"
+
+export type DrawerMeasureContextValue = {
+  /**
+   * The drawer body's ScrollView frame height (its laid-out size). Together
+   * with the panel height this yields the fixed "chrome" (header + footer +
+   * padding), since panel height always equals chrome + body frame.
+   */
+  setBodyFrameHeight: (height: number) => void
+  /**
+   * The drawer body's content height (full scrollable content). Drives the
+   * panel's desired height as `chrome + content`, so the drawer re-fits when
+   * content changes.
+   */
+  setBodyContentHeight: (height: number) => void
+}
+
+export const DrawerMeasureContext =
+  React.createContext<DrawerMeasureContextValue | null>(null)
+
+export const useDrawerMeasureContext = () =>
+  React.useContext(DrawerMeasureContext)

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

@@ -25,6 +25,10 @@ export default {
       control: { type: "text" },
       description: "Help text displayed below the field"
     },
+    inlineHelpText: {
+      control: { type: "text" },
+      description: "Help text displayed inside the input field"
+    },
     error: {
       control: { type: "text" },
       description: "Error message when state is error"
@@ -221,6 +225,25 @@ export const FullWidth = () => {
   )
 }
 
+export const WithInlineHelpText = () => {
+  const [value, setValue] = useState(12)
+
+  return (
+    <View style={styles.section}>
+      <NumberField
+        label="Daily amount"
+        size="lg"
+        inlineHelpText="~ 840 kcals"
+        description="Help text"
+        value={String(value)}
+        onChangeText={(t) => setValue(Number(t) || 0)}
+        onIncrement={() => setValue((v) => v + 1)}
+        onDecrement={() => setValue((v) => Math.max(0, v - 1))}
+      />
+    </View>
+  )
+}
+
 export const Playground = {
   args: {
     size: "lg",

package/src/components/molecules/NumberField/NumberFieldInput.tsx

@@ -5,6 +5,7 @@ import { useTheme } from "@emotion/react"
 import { IconButton } from "../../atoms/IconButton"
 import { Add, Remove } from "@butternutbox/pawprint-icons/core"
 import { resolveFont } from "../../../fonts"
+import { Typography } from "../../atoms/Typography"
 
 type NumberFieldSize = "sm" | "lg"
 
@@ -21,6 +22,7 @@ type NumberFieldInputOwnProps = {
   decrementDisabled?: boolean
   min?: number
   max?: number
+  inlineHelpText?: string
 }
 
 export type NumberFieldInputProps = NumberFieldInputOwnProps &
@@ -48,6 +50,7 @@ const StyledFieldWrapper = styled(View)<{
   }) => ({
     alignItems: "center",
     justifyContent: "center",
+    position: "relative",
     width: fullWidth ? "100%" : fieldMinWidth,
     minWidth: fieldMinWidth,
     height: fieldHeight,
@@ -79,19 +82,29 @@ const StyledTextInput = styled(TextInput)<{
   inputFontFamily: string
   inputFontWeight?: FontWeight
   inputFontSize: number
-}>(({ inputColor, inputFontFamily, inputFontWeight, inputFontSize }) => ({
-  textAlign: "center" as const,
-  outlineStyle: "none" as unknown as undefined,
-  padding: 0,
-  minWidth: 0,
-  minHeight: 0,
-  width: "100%",
-  height: "100%",
-  color: inputColor,
-  fontFamily: inputFontFamily,
-  ...(inputFontWeight ? { fontWeight: inputFontWeight } : {}),
-  fontSize: inputFontSize
-}))
+  hasInlineHelp?: boolean
+}>(
+  ({
+    inputColor,
+    inputFontFamily,
+    inputFontWeight,
+    inputFontSize,
+    hasInlineHelp
+  }) => ({
+    textAlign: "center" as const,
+    outlineStyle: "none" as unknown as undefined,
+    padding: 0,
+    minWidth: 0,
+    minHeight: 0,
+    width: "100%",
+    height: "100%",
+    color: inputColor,
+    fontFamily: inputFontFamily,
+    ...(inputFontWeight ? { fontWeight: inputFontWeight } : {}),
+    fontSize: inputFontSize,
+    ...(hasInlineHelp ? { position: "relative", top: -8 } : {})
+  })
+)
 
 const StyledRow = styled(View)<{
   rowGap: number
@@ -106,6 +119,8 @@ const StyledRow = styled(View)<{
  * Renders decrement button, centered numeric input, increment button,
  * and optional side text (e.g. "kg").
  *
+ * @param {string} [inlineHelpText] - Help text displayed inside the input field at the bottom
+ *
  * Border states:
  * - default: `colour.field.border.default`
  * - focused: `colour.field.border.selected`
@@ -130,6 +145,7 @@ export const NumberFieldInput = React.forwardRef<
       decrementDisabled = false,
       min,
       max,
+      inlineHelpText,
       style,
       onFocus,
       onBlur,
@@ -252,6 +268,7 @@ export const NumberFieldInput = React.forwardRef<
                 : undefined
             }
             inputFontSize={parseTokenValue(typographyToken.fontSize)}
+            hasInlineHelp={!!inlineHelpText}
             keyboardType="numeric"
             editable={!disabled}
             onFocus={handleFocus}
@@ -262,6 +279,25 @@ export const NumberFieldInput = React.forwardRef<
             style={style}
             {...rest}
           />
+          {inlineHelpText && (
+            <View
+              style={{
+                position: "absolute",
+                bottom: 4,
+                width: fieldMinWidth,
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center"
+              }}
+            >
+              <Typography
+                token={inputTokens.description.text.default}
+                color={inputTokens.colour.description.default}
+              >
+                {inlineHelpText}
+              </Typography>
+            </View>
+          )}
         </StyledFieldWrapper>
         {showIncrementButton && (
           <IconButton

package/src/components/molecules/Radio/Radio.tsx

@@ -96,6 +96,9 @@ const StyledIndicator = styled(View)<{
 const StyledTextContent = styled(View)<{
   textContentGap: number
 }>(({ textContentGap }) => ({
+  // Take the row's remaining width so long label/subText wraps within the tile
+  // instead of pushing the trailing asset past the tile's edge.
+  flex: 1,
   flexDirection: "column",
   gap: textContentGap
 }))