@bacon-pos/ui 0.7.0 → 0.7.2

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;