@bacon-pos/ui 0.7.0 → 0.7.1

package/src/components/Menu/Menu.tsx

@@ -6,11 +6,13 @@ import {
   Modal,
   Platform,
   Pressable,
+  StatusBar,
   View,
   type LayoutChangeEvent,
   type StyleProp,
   type ViewStyle,
 } from 'react-native';
+import { computeMenuPlacement } from './placement';
 
 export type OriginVertical = 'top' | 'center' | 'bottom';
 export type OriginHorizontal = 'left' | 'center' | 'right';
@@ -21,9 +23,6 @@ export interface MenuOrigin {
   horizontal: OriginHorizontal;
 }
 
-const V_FRAC: Record<OriginVertical, number> = { top: 0, center: 0.5, bottom: 1 };
-const H_FRAC: Record<OriginHorizontal, number> = { left: 0, center: 0.5, right: 1 };
-
 /** State handed to the trigger renderer and (optionally) the content renderer. */
 export interface MenuTriggerState {
   open: boolean;
@@ -56,6 +55,12 @@ export interface MenuProps {
   autoFit?: boolean;
   /** Safe-area insets to keep clear (pass from `react-native-safe-area-context` if you use it). */
   insets?: EdgeInsets;
+  /**
+   * Offset between window coordinates (where the trigger is measured) and the
+   * full-screen Modal the menu paints into. Defaults to the Android status bar
+   * height (0 on iOS / web). Pass 0 when the host runs edge-to-edge / immersive.
+   */
+  statusBarHeight?: number;
   /** Controlled open state. Omit for uncontrolled. */
   open?: boolean;
   /** Notified whenever the open state changes. */
@@ -75,6 +80,9 @@ export interface EdgeInsets {
 
 const ZERO_INSETS: EdgeInsets = { top: 0, right: 0, bottom: 0, left: 0 };
 
+/** Default coordinate offset for the translucent Modal (Android status bar). */
+const DEFAULT_STATUS_BAR_HEIGHT = Platform.OS === 'android' ? StatusBar.currentHeight ?? 0 : 0;
+
 interface Rect {
   x: number;
   y: number;
@@ -82,11 +90,6 @@ interface Rect {
   height: number;
 }
 
-function clamp(value: number, min: number, max: number): number {
-  if (max < min) return min;
-  return Math.min(Math.max(value, min), max);
-}
-
 /**
  * Anchored overlay menu. Renders a trigger inline and, when open, a floating
  * panel positioned relative to the trigger via two origins — `anchorOrigin`
@@ -102,6 +105,7 @@ export function Menu({
   offset = 8,
   autoFit = true,
   insets = ZERO_INSETS,
+  statusBarHeight = DEFAULT_STATUS_BAR_HEIGHT,
   open: openProp,
   onOpenChange,
   screenPadding = 8,
@@ -161,44 +165,31 @@ export function Menu({
     if (naturalHeight === null) setNaturalHeight(height);
   };
 
-  // Auto-fit: choose a vertical direction with room and cap the height so the
-  // menu never runs off-screen. Only meaningful for a "drop" origin config
-  // (top↔bottom); otherwise we keep the origins as given.
-  const isDropConfig =
-    (anchorOrigin.vertical === 'bottom' && menuOrigin.vertical === 'top') ||
-    (anchorOrigin.vertical === 'top' && menuOrigin.vertical === 'bottom');
-  const preferredUp = anchorOrigin.vertical === 'top' && menuOrigin.vertical === 'bottom';
-
-  let effAnchor = anchorOrigin;
-  let effMenu = menuOrigin;
-  let autoMaxHeight: number | undefined;
-
-  if (autoFit && isDropConfig && rect && naturalHeight !== null) {
-    const screen = Dimensions.get('window');
-    const spaceBelow = screen.height - insets.bottom - (rect.y + rect.height) - offset - screenPadding;
-    const spaceAbove = rect.y - insets.top - offset - screenPadding;
-    let up = preferredUp;
-    if (!preferredUp) up = naturalHeight > spaceBelow && spaceAbove > spaceBelow;
-    else up = !(naturalHeight > spaceAbove && spaceBelow > spaceAbove);
-    const chosen = up ? spaceAbove : spaceBelow;
-    if (naturalHeight > chosen && chosen > 0) autoMaxHeight = chosen;
-    effAnchor = { horizontal: anchorOrigin.horizontal, vertical: up ? 'top' : 'bottom' };
-    effMenu = { horizontal: menuOrigin.horizontal, vertical: up ? 'bottom' : 'top' };
-  }
-
-  let top = 0;
-  let left = 0;
-  if (rect && menuSize) {
-    const screen = Dimensions.get('window');
-    const anchorX = rect.x + H_FRAC[effAnchor.horizontal] * rect.width;
-    const anchorY = rect.y + V_FRAC[effAnchor.vertical] * rect.height;
-    const offsetY =
-      effMenu.vertical === 'top' ? offset : effMenu.vertical === 'bottom' ? -offset : 0;
-    left = anchorX - H_FRAC[effMenu.horizontal] * menuSize.width;
-    top = anchorY - V_FRAC[effMenu.vertical] * menuSize.height + offsetY;
-    left = clamp(left, screenPadding + insets.left, screen.width - insets.right - menuSize.width - screenPadding);
-    top = clamp(top, screenPadding + insets.top, screen.height - insets.bottom - menuSize.height - screenPadding);
-  }
+  // All positioning math lives in the pure `computeMenuPlacement` (unit-tested):
+  // it applies the status-bar offset, auto-fit flip, height cap and screen clamp.
+  const screen = Dimensions.get('window');
+  const placement =
+    rect && naturalHeight !== null
+      ? computeMenuPlacement({
+          rect,
+          menuWidth: menuSize?.width ?? 0,
+          menuHeight: menuSize?.height ?? naturalHeight,
+          naturalHeight,
+          anchorOrigin,
+          menuOrigin,
+          offset,
+          screenPadding,
+          insets,
+          screenWidth: screen.width,
+          screenHeight: screen.height,
+          statusBarHeight,
+          autoFit,
+        })
+      : null;
+
+  const top = placement?.top ?? 0;
+  const left = placement?.left ?? 0;
+  const autoMaxHeight = placement?.maxHeight;
 
   const placed = Boolean(rect && menuSize);
   const content =

package/src/components/Menu/MenuButton.tsx

@@ -1,7 +1,7 @@
 import { Dropdown, type DropdownEntry } from '../Dropdown/Dropdown';
 import { IconButton, type IconButtonShape, type IconButtonSize, type IconButtonVariant } from '../IconButton/IconButton';
 import type { IconName } from '../Icon/icons.generated';
-import { Menu, type MenuOrigin } from './Menu';
+import { Menu, type EdgeInsets, type MenuOrigin } from './Menu';
 
 export interface MenuButtonProps {
   /** The menu rows (see `Dropdown`). */
@@ -26,6 +26,10 @@ export interface MenuButtonProps {
   menuOrigin?: MenuOrigin;
   /** Gap between trigger and menu. Defaults to 8. */
   offset?: number;
+  /** Safe-area insets to keep clear. */
+  insets?: EdgeInsets;
+  /** Status-bar coordinate offset for the menu (see `Menu`). Pass 0 when immersive. */
+  statusBarHeight?: number;
   /** Menu width. Defaults to the `Dropdown` default (350). */
   menuWidth?: number;
   /** Draw dividers between rows. Defaults to the `Dropdown` default (true). */
@@ -56,6 +60,8 @@ export function MenuButton({
   anchorOrigin = { vertical: 'bottom', horizontal: 'right' },
   menuOrigin = { vertical: 'top', horizontal: 'right' },
   offset = 8,
+  insets,
+  statusBarHeight,
   menuWidth,
   showDividers,
   closeOnSelect = true,
@@ -67,6 +73,8 @@ export function MenuButton({
       anchorOrigin={anchorOrigin}
       menuOrigin={menuOrigin}
       offset={offset}
+      insets={insets}
+      statusBarHeight={statusBarHeight}
       open={open}
       onOpenChange={onOpenChange}
       renderTrigger={({ toggle }) => (

package/src/components/Menu/SelectButton.tsx

@@ -4,7 +4,7 @@ import { Button, type ButtonSize, type ButtonVariant } from '../Button/Button';
 import { Dropdown, type DropdownEntry } from '../Dropdown/Dropdown';
 import { Icon } from '../Icon/Icon';
 import type { IconName } from '../Icon/icons.generated';
-import { Menu, type MenuOrigin } from './Menu';
+import { Menu, type EdgeInsets, type MenuOrigin } from './Menu';
 
 /** A selectable option. Its `icon` shows both in the row and on the trigger when chosen. */
 export interface SelectButtonOption {
@@ -45,6 +45,10 @@ export interface SelectButtonProps {
   menuOrigin?: MenuOrigin;
   /** Gap between trigger and menu. Defaults to 8. */
   offset?: number;
+  /** Safe-area insets to keep clear. */
+  insets?: EdgeInsets;
+  /** Status-bar coordinate offset for the menu (see `Menu`). Pass 0 when immersive. */
+  statusBarHeight?: number;
   /** Menu width. Defaults to the `Dropdown` default (350). */
   menuWidth?: number;
   /** Draw dividers between rows. Defaults to the `Dropdown` default (true). */
@@ -98,6 +102,8 @@ export function SelectButton({
   anchorOrigin = { vertical: 'bottom', horizontal: 'left' },
   menuOrigin = { vertical: 'top', horizontal: 'left' },
   offset = 8,
+  insets,
+  statusBarHeight,
   menuWidth,
   showDividers,
   closeOnSelect = true,
@@ -134,6 +140,8 @@ export function SelectButton({
       anchorOrigin={anchorOrigin}
       menuOrigin={menuOrigin}
       offset={offset}
+      insets={insets}
+      statusBarHeight={statusBarHeight}
       open={open}
       onOpenChange={onOpenChange}
       triggerStyle={fullWidth ? { alignSelf: 'stretch' } : undefined}

package/src/components/Menu/UserMenu.tsx

@@ -1,7 +1,7 @@
 import type { ImageSourcePropType } from 'react-native';
 import { Dropdown, type DropdownEntry } from '../Dropdown/Dropdown';
 import { UserChip, type UserChipSize } from '../UserChip/UserChip';
-import { Menu, type MenuOrigin } from './Menu';
+import { Menu, type EdgeInsets, type MenuOrigin } from './Menu';
 
 export interface UserMenuProps {
   /** The menu rows (see `Dropdown`). */
@@ -28,6 +28,10 @@ export interface UserMenuProps {
   menuOrigin?: MenuOrigin;
   /** Gap between trigger and menu. Defaults to 8. */
   offset?: number;
+  /** Safe-area insets to keep clear. */
+  insets?: EdgeInsets;
+  /** Status-bar coordinate offset for the menu (see `Menu`). Pass 0 when immersive. */
+  statusBarHeight?: number;
   /** Menu width. Defaults to the `Dropdown` default (350). */
   menuWidth?: number;
   /** Draw dividers between rows. Defaults to the `Dropdown` default (true). */
@@ -58,6 +62,8 @@ export function UserMenu({
   anchorOrigin = { vertical: 'bottom', horizontal: 'left' },
   menuOrigin = { vertical: 'top', horizontal: 'left' },
   offset = 8,
+  insets,
+  statusBarHeight,
   menuWidth,
   showDividers,
   closeOnSelect = true,
@@ -69,6 +75,8 @@ export function UserMenu({
       anchorOrigin={anchorOrigin}
       menuOrigin={menuOrigin}
       offset={offset}
+      insets={insets}
+      statusBarHeight={statusBarHeight}
       open={open}
       onOpenChange={onOpenChange}
       renderTrigger={({ toggle }) => (

package/src/components/Menu/placement.ts

@@ -0,0 +1,107 @@
+import type { EdgeInsets, MenuOrigin } from './Menu';
+
+const V_FRAC = { top: 0, center: 0.5, bottom: 1 } as const;
+const H_FRAC = { left: 0, center: 0.5, right: 1 } as const;
+
+export interface PlacementInput {
+  /** Trigger rect in window coordinates (as returned by `measureInWindow`). */
+  rect: { x: number; y: number; width: number; height: number };
+  /** Measured menu size (0 before the first layout). */
+  menuWidth: number;
+  menuHeight: number;
+  /** The content's natural (uncapped) height — drives the flip / cap decisions. */
+  naturalHeight: number;
+  anchorOrigin: MenuOrigin;
+  menuOrigin: MenuOrigin;
+  offset: number;
+  screenPadding: number;
+  insets: EdgeInsets;
+  /** Window size (`Dimensions.get('window')`). */
+  screenWidth: number;
+  screenHeight: number;
+  /**
+   * Difference between the window's coordinate origin (where `measureInWindow`
+   * reports) and the full-screen Modal's origin. On Android with a translucent
+   * status bar this is the status bar height; 0 on iOS / web / immersive.
+   */
+  statusBarHeight: number;
+  autoFit: boolean;
+}
+
+export interface Placement {
+  top: number;
+  left: number;
+  /** Auto-fit cap for the content so it scrolls instead of overflowing. */
+  maxHeight?: number;
+}
+
+function clamp(value: number, min: number, max: number): number {
+  if (max < min) return min;
+  return Math.min(Math.max(value, min), max);
+}
+
+/**
+ * Pure placement math for `Menu`. Kept side-effect-free so it can be unit-tested
+ * exhaustively (status-bar offset, flip, cap, clamp) independent of RN layout.
+ *
+ * The key correctness point: the trigger is measured in *window* coordinates but
+ * the menu is painted in a full-screen (`statusBarTranslucent`) Modal, so we add
+ * `statusBarHeight` when converting the trigger position into the Modal's space.
+ * Available-space math cancels the offset out, so it uses window coordinates.
+ */
+export function computeMenuPlacement(input: PlacementInput): Placement {
+  const {
+    rect,
+    menuWidth,
+    menuHeight,
+    naturalHeight,
+    anchorOrigin,
+    menuOrigin,
+    offset,
+    screenPadding,
+    insets,
+    screenWidth,
+    screenHeight,
+    statusBarHeight,
+    autoFit,
+  } = input;
+
+  const isDropConfig =
+    (anchorOrigin.vertical === 'bottom' && menuOrigin.vertical === 'top') ||
+    (anchorOrigin.vertical === 'top' && menuOrigin.vertical === 'bottom');
+  const preferredUp = anchorOrigin.vertical === 'top' && menuOrigin.vertical === 'bottom';
+
+  let effAnchor = anchorOrigin;
+  let effMenu = menuOrigin;
+  let maxHeight: number | undefined;
+
+  if (autoFit && isDropConfig) {
+    // Space math is in window coordinates (the status-bar offset cancels out).
+    const spaceBelow = screenHeight - insets.bottom - (rect.y + rect.height) - offset - screenPadding;
+    const spaceAbove = rect.y - insets.top - offset - screenPadding;
+    let up = preferredUp;
+    if (!preferredUp) up = naturalHeight > spaceBelow && spaceAbove > spaceBelow;
+    else up = !(naturalHeight > spaceAbove && spaceBelow > spaceAbove);
+    const chosen = up ? spaceAbove : spaceBelow;
+    if (naturalHeight > chosen && chosen > 0) maxHeight = chosen;
+    effAnchor = { horizontal: anchorOrigin.horizontal, vertical: up ? 'top' : 'bottom' };
+    effMenu = { horizontal: menuOrigin.horizontal, vertical: up ? 'bottom' : 'top' };
+  }
+
+  // Convert the trigger position into the Modal's (full-screen) coordinate space.
+  const anchorX = rect.x + H_FRAC[effAnchor.horizontal] * rect.width;
+  const anchorY = rect.y + statusBarHeight + V_FRAC[effAnchor.vertical] * rect.height;
+  const offsetY = effMenu.vertical === 'top' ? offset : effMenu.vertical === 'bottom' ? -offset : 0;
+
+  let left = anchorX - H_FRAC[effMenu.horizontal] * menuWidth;
+  let top = anchorY - V_FRAC[effMenu.vertical] * menuHeight + offsetY;
+
+  left = clamp(left, screenPadding + insets.left, screenWidth - insets.right - menuWidth - screenPadding);
+  top = clamp(
+    top,
+    statusBarHeight + screenPadding + insets.top,
+    screenHeight + statusBarHeight - insets.bottom - menuHeight - screenPadding,
+  );
+
+  return { top, left, maxHeight };
+}

package/src/components/Select/Select.tsx

@@ -96,6 +96,8 @@ export interface SelectProps {
   autoFit?: boolean;
   /** Safe-area insets to keep clear. */
   insets?: EdgeInsets;
+  /** Status-bar coordinate offset for the menu (see `Menu`). Pass 0 when immersive. */
+  statusBarHeight?: number;
   /** Close after selecting. Defaults to `!multiple`. */
   closeOnSelect?: boolean;
   /** Container style. */
@@ -133,6 +135,7 @@ export function Select({
   offset = 8,
   autoFit = true,
   insets,
+  statusBarHeight,
   closeOnSelect,
   style,
 }: SelectProps) {
@@ -216,6 +219,7 @@ export function Select({
         offset={offset}
         autoFit={autoFit}
         insets={insets}
+        statusBarHeight={statusBarHeight}
         triggerStyle={{ alignSelf: 'stretch' }}
         renderTrigger={({ open, toggle }) => {
           const showRing = open && !disabled;