@butternutbox/pawprint-native 1.1.3 → 1.3.0

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"

package/src/components/molecules/index.ts

@@ -26,3 +26,4 @@ export * from "./Countdown"
 export * from "./ProductListingCard"
 export * from "./ProductDisplayCard"
 export * from "./TabNavigation"
+export * from "./FloatingActionButton"