@butternutbox/pawprint-native 1.2.0 → 1.3.0

package/package.json

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

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

@@ -1,14 +1,14 @@
-import React, { useEffect, useRef, useState } from "react"
+import React from "react"
 import { View, StyleSheet } from "react-native"
 import { Menu as MenuIcon } from "@butternutbox/pawprint-icons/core"
 import { Menu } from "./Menu"
+import { useMenuTrigger } from "./hooks"
 import { IconButton } from "../../atoms/IconButton"
 
 export default {
   title: "Molecules/Menu",
   component: Menu,
   argTypes: {
-    open: { control: "boolean", description: "Whether the menu is visible" },
     align: {
       control: "select",
       options: ["left", "right"],
@@ -28,58 +28,31 @@ const styles = StyleSheet.create({
   }
 })
 
-// `anchorOffset` is a *window* coordinate — the distance from the top of the
-// screen to the bar's bottom edge. In a real app the header sits at the top of
-// the screen, so this is roughly the bar's height. In Storybook the bar sits
-// lower in the canvas, so we measure its actual on-screen position; otherwise
-// the card drops from the wrong Y and looks offset from the bar.
-const useBarAnchor = () => {
-  const ref = useRef<View>(null)
-  const [anchorOffset, setAnchorOffset] = useState(0)
-
-  const measure = () =>
-    ref.current?.measureInWindow((_x, y, _w, height) =>
-      setAnchorOffset(y + height)
-    )
-
-  return { ref, anchorOffset, measure }
-}
-
 // --- Playground ---
-// The `open` control seeds the initial state; the burger reopens it and an
-// outside tap (or the OS back gesture) dismisses via `onClose`. Without local
-// state the menu would be stuck open, since the RN Modal overlays Storybook's
-// own controls panel and blocks you from flipping the `open` toggle back off.
+// Tap the burger to open; an outside tap (or the OS back gesture) dismisses via
+// `onClose`. The menu is driven by local state rather than an `open` control
+// because the RN Modal overlays Storybook's controls panel, which would leave
+// it stuck open.
 
 export const Playground = {
   args: {
-    open: true,
     align: "right",
-    width: 360
+    width: 280
   },
   render: (args: React.ComponentProps<typeof Menu>) => {
-    const [open, setOpen] = useState(args.open)
-    const { ref, anchorOffset, measure } = useBarAnchor()
-
-    // Re-sync when the `open` control is toggled in the Storybook panel.
-    useEffect(() => setOpen(args.open), [args.open])
+    const { triggerRef, open, menuProps } = useMenuTrigger()
 
     return (
-      <View>
-        <View ref={ref} style={styles.bar} onLayout={measure}>
+      <View style={styles.bar}>
+        <View ref={triggerRef} collapsable={false}>
           <IconButton
             icon={MenuIcon}
             variant="text"
             aria-label="Open menu"
-            onPress={() => setOpen(true)}
+            onPress={open}
           />
         </View>
-        <Menu
-          {...args}
-          open={open}
-          onClose={() => setOpen(false)}
-          anchorOffset={anchorOffset}
-        >
+        <Menu {...args} {...menuProps}>
           <Menu.Item onPress={() => {}}>Option 1</Menu.Item>
           <Menu.Item onPress={() => {}}>Option 2</Menu.Item>
           <Menu.Item variant="destructive" onPress={() => {}}>
@@ -99,30 +72,21 @@ export const Playground = {
 export const Interactive = {
   name: "Interactive / Header trigger",
   render: () => {
-    const [open, setOpen] = useState(false)
-    const { ref, anchorOffset, measure } = useBarAnchor()
+    const { triggerRef, open, close, menuProps } = useMenuTrigger()
 
     return (
-      <View>
-        <View ref={ref} style={styles.bar} onLayout={measure}>
+      <View style={styles.bar}>
+        <View ref={triggerRef} collapsable={false}>
           <IconButton
             icon={MenuIcon}
             variant="text"
             aria-label="Open menu"
-            onPress={() => setOpen(true)}
+            onPress={open}
           />
         </View>
-        <Menu
-          open={open}
-          onClose={() => setOpen(false)}
-          anchorOffset={anchorOffset}
-        >
-          <Menu.Item onPress={() => setOpen(false)}>Option 1</Menu.Item>
-          <Menu.Item
-            variant="destructive"
-            divider={false}
-            onPress={() => setOpen(false)}
-          >
+        <Menu {...menuProps}>
+          <Menu.Item onPress={close}>Option 1</Menu.Item>
+          <Menu.Item variant="destructive" divider={false} onPress={close}>
             Option 2
           </Menu.Item>
         </Menu>

package/src/components/molecules/Menu/Menu.test.tsx

@@ -1,4 +1,5 @@
 import React from "react"
+import { Dimensions } from "react-native"
 import { screen, fireEvent } from "@testing-library/react"
 import { describe, it, expect, vi } from "vitest"
 import { renderWithTheme } from "../../../test-utils"
@@ -15,7 +16,11 @@ const BasicMenu = ({
   onDiscounts?: () => void
   onLogOut?: () => void
 }) => (
-  <Menu open={open} onClose={onClose} anchorOffset={80}>
+  <Menu
+    open={open}
+    onClose={onClose}
+    anchor={{ x: 200, y: 20, width: 120, height: 40 }}
+  >
     <Menu.Item onPress={onDiscounts}>Discount codes</Menu.Item>
     <Menu.Item variant="destructive" onPress={onLogOut}>
       Log out
@@ -36,12 +41,61 @@ describe("Menu", () => {
       expect(screen.getByText("Log out")).toBeInTheDocument()
     })
 
+    it("still renders with the deprecated anchorOffset", () => {
+      renderWithTheme(
+        <Menu open onClose={() => {}} anchorOffset={80}>
+          <Menu.Item onPress={() => {}}>Discount codes</Menu.Item>
+        </Menu>
+      )
+      expect(screen.getByText("Discount codes")).toBeInTheDocument()
+    })
+
     it("exposes each row as a menuitem", () => {
       renderWithTheme(<BasicMenu />)
       expect(screen.getAllByRole("menuitem")).toHaveLength(2)
     })
   })
 
+  describe("positioning", () => {
+    it("hangs the card below the trigger, right edges aligned", () => {
+      renderWithTheme(<BasicMenu />)
+      const anchor = screen.getByRole("menu").parentElement!
+      expect(anchor.style.top).toBe("68px")
+      expect(anchor.style.right).toBe(
+        `${Dimensions.get("window").width - 320}px`
+      )
+    })
+
+    it("keeps its position while closing after the anchor is cleared", () => {
+      const anchor = { x: 200, y: 20, width: 120, height: 40 }
+      const { rerender } = renderWithTheme(
+        <Menu open onClose={() => {}} anchor={anchor}>
+          <Menu.Item onPress={() => {}}>Discount codes</Menu.Item>
+        </Menu>
+      )
+      rerender(
+        <Menu open onClose={() => {}}>
+          <Menu.Item onPress={() => {}}>Discount codes</Menu.Item>
+        </Menu>
+      )
+      expect(screen.getByRole("menu").parentElement!.style.top).toBe("68px")
+    })
+
+    it("lines up left edges when aligned left", () => {
+      renderWithTheme(
+        <Menu
+          open
+          onClose={() => {}}
+          align="left"
+          anchor={{ x: 24, y: 20, width: 160, height: 40 }}
+        >
+          <Menu.Item onPress={() => {}}>Discount codes</Menu.Item>
+        </Menu>
+      )
+      expect(screen.getByRole("menu").parentElement!.style.left).toBe("24px")
+    })
+  })
+
   describe("interaction", () => {
     it("fires an item's onPress when tapped", () => {
       const onLogOut = vi.fn()

package/src/components/molecules/Menu/Menu.tsx

@@ -1,26 +1,41 @@
-import React from "react"
-import { Modal, Pressable, View } from "react-native"
+import React, { useState } from "react"
+import { Modal, Pressable, View, useWindowDimensions } from "react-native"
 import styled from "@emotion/native"
+import { useTheme } from "@emotion/react"
 import { MenuItem } from "./MenuItem"
 
 const parseTokenValue = (value: string): number => parseFloat(value)
 
 export type MenuAlign = "left" | "right"
 
+/** A rect in window coordinates, as returned by `View#measureInWindow`. */
+export type MenuAnchorRect = {
+  x: number
+  y: number
+  width: number
+  height: number
+}
+
 export type MenuProps = {
   /** Whether the menu is visible. */
   open: boolean
   /** Called when the user taps outside the card or dismisses via the OS. */
   onClose: () => void
   /**
-   * Distance, in px, from the top of the screen to where the menu drops from —
-   * typically the bottom edge of the bar/header the menu hangs beneath, so the
-   * card opens flush below it.
+   * The trigger's rect in window coordinates (from `measureInWindow`). The
+   * card drops just below it, with its `align` edge lined up with the
+   * trigger's.
+   */
+  anchor?: MenuAnchorRect
+  /**
+   * @deprecated Pass `anchor` so the card hangs from the trigger. Distance, in
+   * px, from the top of the screen to the bottom edge of the bar the card drops
+   * flush beneath, inset from the screen edge. Ignored when `anchor` is set.
    */
   anchorOffset?: number
   /** Which edge the card aligns to. Defaults to `right`. */
   align?: MenuAlign
-  /** Card width in px. Defaults to 360 (capped at 90% of the screen). */
+  /** Card width in px. Defaults to 280 (capped at 90% of the window). */
   width?: number
   /** Accessibility label for the outside-tap dismiss layer. */
   closeAccessibilityLabel?: string
@@ -40,15 +55,8 @@ const DismissLayer = styled(Pressable)({
   bottom: 0
 })
 
-// Positions the card against the aligned edge, flush beneath the anchor
-// (`top` set inline to `anchorOffset`).
-const Anchor = styled(View)<{ align: MenuAlign }>(({ theme, align }) => {
-  const inset = parseTokenValue(theme.tokens.semantics.dimensions.spacing.md)
-
-  return {
-    position: "absolute",
-    ...(align === "right" ? { right: inset } : { left: inset })
-  }
+const Anchor = styled(View)({
+  position: "absolute"
 })
 
 // A Pressable (rather than a View) so taps on the card's own chrome are
@@ -59,7 +67,6 @@ const Card = styled(Pressable)<{ width: number }>(({ theme, width }) => {
 
   return {
     width,
-    maxWidth: "90%",
     borderRadius: parseTokenValue(borderRadius.md),
     overflow: "hidden",
     backgroundColor: background.surface.default,
@@ -78,12 +85,33 @@ const Card = styled(Pressable)<{ width: number }>(({ theme, width }) => {
 const MenuRoot = ({
   open,
   onClose,
+  anchor,
   anchorOffset = 0,
   align = "right",
-  width = 360,
+  width = 280,
   closeAccessibilityLabel = "Close menu",
   children
 }: MenuProps) => {
+  const theme = useTheme()
+  const { width: windowWidth } = useWindowDimensions()
+  const { spacing } = theme.tokens.semantics.dimensions
+
+  const [lastAnchor, setLastAnchor] = useState(anchor)
+  if (anchor && anchor !== lastAnchor) setLastAnchor(anchor)
+  const shownAnchor = anchor ?? lastAnchor
+
+  const position = shownAnchor
+    ? {
+        top: shownAnchor.y + shownAnchor.height + parseTokenValue(spacing.xs),
+        ...(align === "right"
+          ? { right: windowWidth - (shownAnchor.x + shownAnchor.width) }
+          : { left: shownAnchor.x })
+      }
+    : {
+        top: anchorOffset,
+        [align]: parseTokenValue(spacing.md)
+      }
+
   return (
     <Modal
       visible={open}
@@ -97,9 +125,9 @@ const MenuRoot = ({
         accessible={false}
         accessibilityLabel={closeAccessibilityLabel}
       />
-      <Anchor align={align} style={{ top: anchorOffset }}>
+      <Anchor style={position}>
         <Card
-          width={width}
+          width={Math.min(width, windowWidth * 0.9)}
           onPress={() => {}}
           accessible={false}
           accessibilityRole="menu"
@@ -114,23 +142,20 @@ const MenuRoot = ({
 MenuRoot.displayName = "Menu"
 
 /**
- * A dropdown menu that expands beneath an anchor (typically a header/bar).
- * Tapping outside the card dismisses it; the page behind is left undarkened.
- * The consumer owns open/close state and supplies the rows as `Menu.Item`
- * children; the app-specific content stays at the call site.
+ * A dropdown menu that hangs beneath its trigger. Tapping outside the card
+ * dismisses it; the page behind is left undarkened. The consumer owns
+ * open/close state and supplies the rows as `Menu.Item` children; the
+ * app-specific content stays at the call site.
  *
- * Pass `anchorOffset` (the anchor bar's bottom edge in window coordinates) so
- * the card drops just below it.
+ * `useMenuTrigger` measures the trigger and supplies the `anchor`, open state
+ * and `onClose` as `menuProps`.
  *
  * @example
  * ```tsx
- * const [open, setOpen] = useState(false)
- * const [barHeight, setBarHeight] = useState(0)
+ * const { triggerRef, open, menuProps } = useMenuTrigger()
  *
- * <View onLayout={(e) => setBarHeight(e.nativeEvent.layout.height)}>
- *   <Pressable onPress={() => setOpen(true)}>...</Pressable>
- * </View>
- * <Menu open={open} onClose={() => setOpen(false)} anchorOffset={barHeight}>
+ * <Pressable ref={triggerRef} onPress={open}>...</Pressable>
+ * <Menu {...menuProps}>
  *   <Menu.Item onPress={onDiscounts}>Discount codes</Menu.Item>
  *   <Menu.Item variant="destructive" divider={false} onPress={onLogOut}>
  *     Log out

package/src/components/molecules/Menu/MenuItem.tsx

@@ -2,6 +2,7 @@ import React from "react"
 import { Pressable, type PressableProps } from "react-native"
 import styled from "@emotion/native"
 import { useTheme } from "@emotion/react"
+import { Divider } from "../../atoms/Divider"
 import { Typography } from "../../atoms/Typography"
 
 const parseTokenValue = (value: string): number => parseFloat(value)
@@ -10,8 +11,8 @@ export type MenuItemVariant = "action" | "destructive"
 
 type MenuItemOwnProps = {
   /**
-   * `action` renders the label in the brand action colour, `destructive` in
-   * the error colour (e.g. "Log out"). Defaults to `action`.
+   * `action` renders the label in the link colour, `destructive` in the error
+   * colour (e.g. "Log out"). Defaults to `action`.
    */
   variant?: MenuItemVariant
   onPress: () => void
@@ -19,7 +20,7 @@ type MenuItemOwnProps = {
   children: React.ReactNode
   /**
    * Whether to render a divider beneath the row. Defaults to `true`; set
-   * `false` on the last row so the border doesn't sit against the card's
+   * `false` on the last row so the divider doesn't sit against the card's
    * rounded bottom edge.
    */
   divider?: boolean
@@ -28,27 +29,21 @@ type MenuItemOwnProps = {
 export type MenuItemProps = MenuItemOwnProps &
   Omit<PressableProps, keyof MenuItemOwnProps | "children">
 
-// A full-width, centre-aligned row. `divider` paints the bottom border; set it
-// `false` on the last row so the border doesn't sit against the card's rounded
-// bottom edge.
-const Row = styled(Pressable)<{ divider: boolean }>(({ theme, divider }) => {
+const Row = styled(Pressable)(({ theme }) => {
   const { spacing } = theme.tokens.semantics.dimensions
-  const { colour } = theme.tokens.semantics
 
   return {
     width: "100%",
-    alignItems: "center",
+    alignItems: "flex-start",
     justifyContent: "center",
     paddingVertical: parseTokenValue(spacing.md),
-    paddingHorizontal: parseTokenValue(spacing.md),
-    borderBottomWidth: divider ? 1 : 0,
-    borderBottomColor: colour.border.divider
+    paddingHorizontal: parseTokenValue(spacing.md)
   }
 })
 
 /**
- * A single row inside a {@link Menu}. Renders its label centred, coloured by
- * `variant`, with a divider beneath it unless `divider` is set to `false`.
+ * A single row inside a {@link Menu}. Renders its label left-aligned, coloured
+ * by `variant`, with a divider beneath it unless `divider` is set to `false`.
  *
  * @example
  * ```tsx
@@ -64,11 +59,11 @@ export const MenuItem = React.forwardRef<
   const theme = useTheme()
   const { colour, typography } = theme.tokens.semantics
 
-  // The action colour lives under `colour.text.action`, which Typography's
-  // semantic-key `color` prop deliberately excludes — so we render in token
-  // mode (font token + hex colour). Both colours still come from tokens.
+  // The link colour lives under `colour.text.link`, which Typography's
+  // semantic-key `color` prop excludes — so we render in token mode (font
+  // token + hex colour). Both colours still come from tokens.
   const labelColour =
-    variant === "destructive" ? colour.text.error : colour.text.action.default
+    variant === "destructive" ? colour.text.error : colour.text.link.default
 
   const label =
     typeof children === "string" || typeof children === "number"
@@ -76,27 +71,25 @@ export const MenuItem = React.forwardRef<
       : undefined
 
   return (
-    <Row
-      ref={ref}
-      divider={divider}
-      onPress={onPress}
-      accessible
-      accessibilityRole="menuitem"
-      accessibilityLabel={label}
-      {...rest}
-    >
-      {label !== undefined ? (
-        <Typography
-          token={typography.body.medium.md}
-          align="center"
-          color={labelColour}
-        >
-          {label}
-        </Typography>
-      ) : (
-        children
-      )}
-    </Row>
+    <>
+      <Row
+        ref={ref}
+        onPress={onPress}
+        accessible
+        accessibilityRole="menuitem"
+        accessibilityLabel={label}
+        {...rest}
+      >
+        {label !== undefined ? (
+          <Typography token={typography.body.medium.md} color={labelColour}>
+            {label}
+          </Typography>
+        ) : (
+          children
+        )}
+      </Row>
+      {divider && <Divider />}
+    </>
   )
 })
 

package/src/components/molecules/Menu/hooks/index.ts

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

package/src/components/molecules/Menu/hooks/useMenuTrigger.test.ts

@@ -0,0 +1,48 @@
+import { act, renderHook } from "@testing-library/react"
+import type { View } from "react-native"
+import { describe, expect, it } from "vitest"
+import { useMenuTrigger } from "./useMenuTrigger"
+
+const measurable = { x: 200, y: 20, width: 120, height: 40 }
+
+const renderTrigger = () => {
+  const hook = renderHook(() => useMenuTrigger())
+  hook.result.current.triggerRef.current = {
+    measureInWindow: (
+      callback: (x: number, y: number, width: number, height: number) => void
+    ) =>
+      callback(measurable.x, measurable.y, measurable.width, measurable.height)
+  } as unknown as View
+  return hook
+}
+
+describe("useMenuTrigger", () => {
+  it("starts closed", () => {
+    const { result } = renderTrigger()
+    expect(result.current.isOpen).toBe(false)
+    expect(result.current.menuProps).toEqual({
+      open: false,
+      onClose: result.current.close,
+      anchor: undefined
+    })
+  })
+
+  it("opens anchored to the measured trigger", () => {
+    const { result } = renderTrigger()
+    act(() => result.current.open())
+    expect(result.current.isOpen).toBe(true)
+    expect(result.current.menuProps.open).toBe(true)
+    expect(result.current.menuProps.anchor).toEqual(measurable)
+  })
+
+  it("closes from close and from the menu's onClose", () => {
+    const { result } = renderTrigger()
+    act(() => result.current.open())
+    act(() => result.current.close())
+    expect(result.current.isOpen).toBe(false)
+
+    act(() => result.current.open())
+    act(() => result.current.menuProps.onClose())
+    expect(result.current.isOpen).toBe(false)
+  })
+})

package/src/components/molecules/Menu/hooks/useMenuTrigger.ts

@@ -0,0 +1,40 @@
+import { useCallback, useRef, useState } from "react"
+import type { View } from "react-native"
+import type { MenuAnchorRect } from "../Menu"
+
+/**
+ * Wires a trigger to a {@link Menu}: measures the trigger when it opens so the
+ * card hangs beneath it.
+ *
+ * @example
+ * ```tsx
+ * const { triggerRef, open, close, menuProps } = useMenuTrigger()
+ *
+ * <Pressable ref={triggerRef} onPress={open}>...</Pressable>
+ * <Menu {...menuProps}>
+ *   <Menu.Item onPress={close}>Discount codes</Menu.Item>
+ * </Menu>
+ * ```
+ */
+export const useMenuTrigger = () => {
+  const triggerRef = useRef<View>(null)
+  const [anchor, setAnchor] = useState<MenuAnchorRect>()
+
+  const open = useCallback(() => {
+    triggerRef.current?.measureInWindow((x, y, width, height) =>
+      setAnchor({ x, y, width, height })
+    )
+  }, [])
+
+  const close = useCallback(() => setAnchor(undefined), [])
+
+  const isOpen = anchor !== undefined
+
+  return {
+    triggerRef,
+    isOpen,
+    open,
+    close,
+    menuProps: { open: isOpen, onClose: close, anchor }
+  }
+}

package/src/components/molecules/Menu/index.ts

@@ -1,4 +1,5 @@
 export { Menu } from "./Menu"
-export type { MenuProps, MenuAlign } from "./Menu"
+export type { MenuProps, MenuAlign, MenuAnchorRect } from "./Menu"
 export { MenuItem } from "./MenuItem"
 export type { MenuItemProps, MenuItemVariant } from "./MenuItem"
+export { useMenuTrigger } from "./hooks"