@bacon-pos/ui 0.5.1 → 0.6.0

package/src/components/Menu/Menu.tsx

@@ -0,0 +1,249 @@
+import { useEffect, useRef, useState, type ReactNode } from 'react';
+import {
+  Animated,
+  Dimensions,
+  Easing,
+  Modal,
+  Platform,
+  Pressable,
+  View,
+  type LayoutChangeEvent,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+
+export type OriginVertical = 'top' | 'center' | 'bottom';
+export type OriginHorizontal = 'left' | 'center' | 'right';
+
+/** A point on a box: a vertical and a horizontal edge/center. */
+export interface MenuOrigin {
+  vertical: OriginVertical;
+  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;
+  toggle: () => void;
+  close: () => void;
+}
+
+export interface MenuProps {
+  /** Renders the trigger. Wire its press to `toggle`. */
+  renderTrigger: (state: MenuTriggerState) => ReactNode;
+  /**
+   * The overlay content (e.g. a `Dropdown`). May be a function receiving
+   * `{ close, triggerWidth, maxHeight }` — `maxHeight` is the auto-fit height
+   * (space available in the chosen direction) so the content can scroll.
+   */
+  children:
+    | ReactNode
+    | ((state: { close: () => void; triggerWidth?: number; maxHeight?: number }) => ReactNode);
+  /** Point on the trigger the menu latches to. Defaults to `{ bottom, left }`. */
+  anchorOrigin?: MenuOrigin;
+  /** Point on the menu placed at the anchor. Defaults to `{ top, left }`. */
+  menuOrigin?: MenuOrigin;
+  /** Gap between trigger and menu along the vertical axis. Defaults to 8. */
+  offset?: number;
+  /**
+   * Fit the menu to the space available and flip its direction when the
+   * preferred side doesn't have room. Provides a `maxHeight` to the content so it
+   * scrolls instead of overflowing the screen. Defaults to true.
+   */
+  autoFit?: boolean;
+  /** Safe-area insets to keep clear (pass from `react-native-safe-area-context` if you use it). */
+  insets?: EdgeInsets;
+  /** Controlled open state. Omit for uncontrolled. */
+  open?: boolean;
+  /** Notified whenever the open state changes. */
+  onOpenChange?: (open: boolean) => void;
+  /** Padding kept from the screen edges when clamping. Defaults to 8. */
+  screenPadding?: number;
+  /** Style for the (measuring) wrapper around the trigger. Defaults to hugging the trigger. */
+  triggerStyle?: StyleProp<ViewStyle>;
+}
+
+export interface EdgeInsets {
+  top: number;
+  right: number;
+  bottom: number;
+  left: number;
+}
+
+const ZERO_INSETS: EdgeInsets = { top: 0, right: 0, bottom: 0, left: 0 };
+
+interface Rect {
+  x: number;
+  y: number;
+  width: number;
+  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`
+ * (point on the trigger) and `menuOrigin` (matching point on the menu). Tapping
+ * outside (or the hardware back button) dismisses it. Used to compose menu
+ * buttons, select fields, popovers, etc.
+ */
+export function Menu({
+  renderTrigger,
+  children,
+  anchorOrigin = { vertical: 'bottom', horizontal: 'left' },
+  menuOrigin = { vertical: 'top', horizontal: 'left' },
+  offset = 8,
+  autoFit = true,
+  insets = ZERO_INSETS,
+  open: openProp,
+  onOpenChange,
+  screenPadding = 8,
+  triggerStyle,
+}: MenuProps) {
+  const triggerRef = useRef<View>(null);
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+  const isControlled = openProp !== undefined;
+  const open = isControlled ? openProp : uncontrolledOpen;
+
+  const [rect, setRect] = useState<Rect | null>(null);
+  const [menuSize, setMenuSize] = useState<{ width: number; height: number } | null>(null);
+  // The content's natural (uncapped) height, captured once per open — used to
+  // decide whether it fits the preferred side (kept stable so the flip decision
+  // doesn't oscillate once a maxHeight cap is applied).
+  const [naturalHeight, setNaturalHeight] = useState<number | null>(null);
+  const anim = useRef(new Animated.Value(0)).current;
+
+  const setOpen = (next: boolean) => {
+    if (!isControlled) setUncontrolledOpen(next);
+    onOpenChange?.(next);
+  };
+  const close = () => setOpen(false);
+  const toggle = () => setOpen(!open);
+
+  // Measure the trigger whenever the menu opens.
+  useEffect(() => {
+    if (!open) {
+      setMenuSize(null);
+      setNaturalHeight(null);
+      anim.setValue(0);
+      return;
+    }
+    triggerRef.current?.measureInWindow((x, y, width, height) => {
+      setRect({ x, y, width, height });
+    });
+  }, [open, anim]);
+
+  // Fade + scale in once the menu has been measured (so it never flashes unplaced).
+  useEffect(() => {
+    if (open && rect && menuSize) {
+      Animated.timing(anim, {
+        toValue: 1,
+        duration: 120,
+        easing: Easing.out(Easing.ease),
+        useNativeDriver: Platform.OS !== 'web',
+      }).start();
+    }
+  }, [open, rect, menuSize, anim]);
+
+  const onMenuLayout = (e: LayoutChangeEvent) => {
+    const { width, height } = e.nativeEvent.layout;
+    if (!menuSize || menuSize.width !== width || menuSize.height !== height) {
+      setMenuSize({ width, height });
+    }
+    // Capture the natural height once — before any maxHeight cap is applied.
+    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);
+  }
+
+  const placed = Boolean(rect && menuSize);
+  const content =
+    typeof children === 'function'
+      ? children({ close, triggerWidth: rect?.width, maxHeight: autoMaxHeight })
+      : children;
+
+  return (
+    <>
+      <View
+        ref={triggerRef}
+        collapsable={false}
+        style={[{ alignSelf: 'flex-start' }, triggerStyle]}
+      >
+        {renderTrigger({ open, toggle, close })}
+      </View>
+
+      <Modal
+        visible={open}
+        transparent
+        animationType="none"
+        onRequestClose={close}
+        statusBarTranslucent
+      >
+        <Pressable
+          accessibilityLabel="Close menu"
+          onPress={close}
+          style={{ flex: 1 }}
+        >
+          <Animated.View
+            onLayout={onMenuLayout}
+            // Stop presses inside the menu from bubbling to the backdrop.
+            onStartShouldSetResponder={() => true}
+            style={{
+              position: 'absolute',
+              top,
+              left,
+              opacity: placed ? anim : 0,
+              transform: [{ scale: placed ? anim.interpolate({ inputRange: [0, 1], outputRange: [0.96, 1] }) : 1 }],
+            }}
+          >
+            {content}
+          </Animated.View>
+        </Pressable>
+      </Modal>
+    </>
+  );
+}

package/src/components/Menu/MenuButton.tsx

@@ -0,0 +1,98 @@
+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';
+
+export interface MenuButtonProps {
+  /** The menu rows (see `Dropdown`). */
+  options: DropdownEntry[];
+  /** Called with the key of the selected row. */
+  onSelect?: (key: string) => void;
+  /** Trigger icon. Defaults to `more` (the "More" button). */
+  icon?: IconName;
+  /** Accessibility label for the trigger. Defaults to "More options". */
+  accessibilityLabel?: string;
+  /** Trigger visual. Defaults to `secondary` (white + hairline border). */
+  variant?: IconButtonVariant;
+  /** Trigger size. Defaults to `md`. */
+  size?: IconButtonSize;
+  /** Trigger shape. Defaults to `round`. */
+  shape?: IconButtonShape;
+  /** Disable the trigger. */
+  disabled?: boolean;
+  /** Point on the trigger the menu latches to. Defaults to `{ bottom, right }`. */
+  anchorOrigin?: MenuOrigin;
+  /** Point on the menu placed at the anchor. Defaults to `{ top, right }`. */
+  menuOrigin?: MenuOrigin;
+  /** Gap between trigger and menu. Defaults to 8. */
+  offset?: number;
+  /** Menu width. Defaults to the `Dropdown` default (350). */
+  menuWidth?: number;
+  /** Draw dividers between rows. Defaults to the `Dropdown` default (true). */
+  showDividers?: boolean;
+  /** Close the menu after a row is selected. Defaults to true. */
+  closeOnSelect?: boolean;
+  /** Controlled open state. */
+  open?: boolean;
+  /** Notified whenever the open state changes. */
+  onOpenChange?: (open: boolean) => void;
+}
+
+/**
+ * A "More"-style menu button — an `IconButton` that opens an anchored `Dropdown`.
+ * The first composed component built from `IconButton` + `Icon` + `Dropdown` +
+ * `Menu`. Placement is controlled by the two-origin model (`anchorOrigin` on the
+ * trigger, `menuOrigin` on the menu). Dismisses on outside press / back button.
+ */
+export function MenuButton({
+  options,
+  onSelect,
+  icon = 'more',
+  accessibilityLabel = 'More options',
+  variant = 'secondary',
+  size = 'md',
+  shape = 'round',
+  disabled = false,
+  anchorOrigin = { vertical: 'bottom', horizontal: 'right' },
+  menuOrigin = { vertical: 'top', horizontal: 'right' },
+  offset = 8,
+  menuWidth,
+  showDividers,
+  closeOnSelect = true,
+  open,
+  onOpenChange,
+}: MenuButtonProps) {
+  return (
+    <Menu
+      anchorOrigin={anchorOrigin}
+      menuOrigin={menuOrigin}
+      offset={offset}
+      open={open}
+      onOpenChange={onOpenChange}
+      renderTrigger={({ toggle }) => (
+        <IconButton
+          icon={icon}
+          accessibilityLabel={accessibilityLabel}
+          variant={variant}
+          size={size}
+          shape={shape}
+          disabled={disabled}
+          onPress={toggle}
+        />
+      )}
+    >
+      {({ close, maxHeight }) => (
+        <Dropdown
+          options={options}
+          width={menuWidth}
+          maxHeight={maxHeight}
+          showDividers={showDividers}
+          onSelect={(key) => {
+            onSelect?.(key);
+            if (closeOnSelect) close();
+          }}
+        />
+      )}
+    </Menu>
+  );
+}

package/src/components/Menu/SelectButton.tsx

@@ -0,0 +1,171 @@
+import { useState } from 'react';
+import { useTheme } from '../../theme';
+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';
+
+/** A selectable option. Its `icon` shows both in the row and on the trigger when chosen. */
+export interface SelectButtonOption {
+  key: string;
+  label: string;
+  icon?: IconName;
+  disabled?: boolean;
+}
+
+export interface SelectButtonProps {
+  /** The options to choose from. */
+  options: SelectButtonOption[];
+  /** Selected key (controlled). */
+  value?: string;
+  /** Selected key for the uncontrolled case. */
+  defaultValue?: string;
+  /** Called with the newly selected key. */
+  onChange?: (key: string) => void;
+  /** Trigger label when nothing is selected. */
+  placeholder?: string;
+  /** Trigger leading icon when nothing is selected. */
+  placeholderIcon?: IconName;
+  /** Show the selected option's icon on the trigger. Defaults to true. */
+  showSelectedIcon?: boolean;
+  /** Show a trailing chevron on the trigger. Defaults to false (matches the mockup). */
+  chevron?: boolean;
+  /** Trigger visual. Defaults to `secondary`. */
+  variant?: ButtonVariant;
+  /** Trigger size. Defaults to `sm`. */
+  size?: ButtonSize;
+  /** Stretch the trigger to the parent width. */
+  fullWidth?: boolean;
+  /** Disable the trigger. */
+  disabled?: boolean;
+  /** Point on the trigger the menu latches to. Defaults to `{ bottom, left }`. */
+  anchorOrigin?: MenuOrigin;
+  /** Point on the menu placed at the anchor. Defaults to `{ top, left }`. */
+  menuOrigin?: MenuOrigin;
+  /** Gap between trigger and menu. Defaults to 8. */
+  offset?: number;
+  /** Menu width. Defaults to the `Dropdown` default (350). */
+  menuWidth?: number;
+  /** Draw dividers between rows. Defaults to the `Dropdown` default (true). */
+  showDividers?: boolean;
+  /** Close the menu after selecting. Defaults to true. */
+  closeOnSelect?: boolean;
+  /** Controlled open state. */
+  open?: boolean;
+  /** Notified whenever the open state changes. */
+  onOpenChange?: (open: boolean) => void;
+}
+
+/** Button foreground per variant — mirrors Button so the trigger icon matches the label. */
+function triggerForeground(theme: ReturnType<typeof useTheme>, variant: ButtonVariant): string {
+  const { action, state } = theme.colors;
+  switch (variant) {
+    case 'secondary':
+      return action.secondaryForeground;
+    case 'inverse':
+      return action.inverseForeground;
+    case 'destructive':
+      return state.destructiveSubtleForeground;
+    case 'success':
+      return state.successForeground;
+    case 'successSubtle':
+      return state.successSubtleForeground;
+    default:
+      return action.primaryForeground;
+  }
+}
+
+/**
+ * Select-style button — a `Button` (label + leading icon) that opens an anchored
+ * `Dropdown` to change its value; the current option is marked with a check.
+ * A composed component built from `Button` + `Menu` + `Dropdown`. Controlled via
+ * `value` / `onChange`, or uncontrolled via `defaultValue`.
+ */
+export function SelectButton({
+  options,
+  value: valueProp,
+  defaultValue,
+  onChange,
+  placeholder = 'Select',
+  placeholderIcon,
+  showSelectedIcon = true,
+  chevron = false,
+  variant = 'secondary',
+  size = 'sm',
+  fullWidth = false,
+  disabled = false,
+  anchorOrigin = { vertical: 'bottom', horizontal: 'left' },
+  menuOrigin = { vertical: 'top', horizontal: 'left' },
+  offset = 8,
+  menuWidth,
+  showDividers,
+  closeOnSelect = true,
+  open,
+  onOpenChange,
+}: SelectButtonProps) {
+  const theme = useTheme();
+  const isControlled = valueProp !== undefined;
+  const [uncontrolled, setUncontrolled] = useState(defaultValue);
+  const value = isControlled ? valueProp : uncontrolled;
+
+  const selected = options.find((o) => o.key === value);
+  const label = selected?.label ?? placeholder;
+  const triggerIcon = selected?.icon ?? placeholderIcon;
+  const fg = triggerForeground(theme, variant);
+  const iconSize = size === 'sm' ? 20 : 24;
+
+  const setValue = (key: string) => {
+    if (!isControlled) setUncontrolled(key);
+    onChange?.(key);
+  };
+
+  const rows: DropdownEntry[] = options.map((o) => ({
+    key: o.key,
+    label: o.label,
+    disabled: o.disabled,
+    leading: o.icon ? { kind: 'icon', name: o.icon } : undefined,
+    trailing:
+      o.key === value ? { kind: 'icon', name: 'check', color: theme.colors.feedback.success } : undefined,
+  }));
+
+  return (
+    <Menu
+      anchorOrigin={anchorOrigin}
+      menuOrigin={menuOrigin}
+      offset={offset}
+      open={open}
+      onOpenChange={onOpenChange}
+      triggerStyle={fullWidth ? { alignSelf: 'stretch' } : undefined}
+      renderTrigger={({ toggle }) => (
+        <Button
+          label={label}
+          variant={variant}
+          size={size}
+          fullWidth={fullWidth}
+          disabled={disabled}
+          onPress={toggle}
+          leftIcon={
+            showSelectedIcon && triggerIcon ? (
+              <Icon name={triggerIcon} size={iconSize} color={fg} />
+            ) : undefined
+          }
+          rightIcon={chevron ? <Icon name="chevron-down" size={iconSize} color={fg} /> : undefined}
+        />
+      )}
+    >
+      {({ close, maxHeight }) => (
+        <Dropdown
+          options={rows}
+          width={menuWidth}
+          maxHeight={maxHeight}
+          showDividers={showDividers}
+          onSelect={(key) => {
+            setValue(key);
+            if (closeOnSelect) close();
+          }}
+        />
+      )}
+    </Menu>
+  );
+}

package/src/components/Menu/index.ts

@@ -0,0 +1,12 @@
+export { Menu } from './Menu';
+export type {
+  MenuProps,
+  MenuOrigin,
+  MenuTriggerState,
+  OriginVertical,
+  OriginHorizontal,
+} from './Menu';
+export { MenuButton } from './MenuButton';
+export type { MenuButtonProps } from './MenuButton';
+export { SelectButton } from './SelectButton';
+export type { SelectButtonProps, SelectButtonOption } from './SelectButton';