@multiplatform.one/components 7.4.0 → 7.5.0

package/src/DropdownMenu/index.tsx

@@ -1,59 +1,55 @@
 /**
  * DropdownMenu — the canonical MP1 action menu.
  *
- * Trigger + elevated overlay of action rows. Wraps tamagui Popover and adds
- * MP1 anatomy: SF-OVERLAY surface via the elevatedSurface knob recipe,
- * SP-EDGE rows (container owns only its 1px border — zero padding on all
- * four sides; items own ALL padding, so the first/last row highlights touch
- * the top/bottom border, full-width, flat row corners), and a full
- * keyboard layer (ArrowUp/Down + Home/End roving focus, Enter/Space
- * selects, Escape closes and restores focus to the trigger, typeahead).
+ * Trigger + elevated overlay of action rows on the FloatingPanel stack
+ * (cover contract: `OVERLAY_ATTACH_GAP=0`, `at-least-trigger`). Do not fork
+ * a second overlay. SF-OVERLAY via elevatedSurface, SP-EDGE rows (container
+ * owns only its 1px border; items own ALL padding), LC-21 COMMIT/COMPOSE,
+ * and the APG keyboard layer (ArrowUp/Down + Home/End, Enter/Space, Escape,
+ * typeahead). Sheet at ≤640 via FloatingPanel's overlay family pivot.
  *
  * Composable parts (DropdownMenu.Trigger/Content/Item/CheckboxItem/
- * Separator/Label) plus a convenience `items=[]` prop for the common
- * row-actions case. Dismissal follows LC-21: plain items COMMIT-close,
- * checkable items COMPOSE-stay; `closeOnSelect` (entry-level, or menu-level
- * on the root) opts a checkable single-select "radio-style" menu into
- * close-on-pick — entries with `checked` fire BOTH `onCheckedChange` and
- * `onSelect`.
+ * Separator/Label) plus a convenience `items=[]` prop. Plain items
+ * COMMIT-close; checkable items COMPOSE-stay; `closeOnSelect` opts a
+ * radio-style menu into close-on-pick. Checked entries fire BOTH
+ * `onCheckedChange` and `onSelect`.
  */
 
 import {
+  cloneElement,
   createContext,
   forwardRef,
   isValidElement,
   useCallback,
   useContext,
   useEffect,
-  useLayoutEffect,
   useMemo,
   useRef,
   useState,
+  type KeyboardEvent as ReactKeyboardEvent,
+  type ReactElement,
   type ReactNode,
   type RefObject,
 } from "react";
 import {
-  OVERLAY_ANCHOR_GAP,
   hairline,
   keyboardFocusRingProps,
   menuRowFrame,
-  ensureFocusVisibleRing,
-  ensureKeyboardModalityTracking,
   useResolvedKnobs,
   warnBareDisabled,
   wasKeyboardFocus,
+  ensureKeyboardModalityTracking,
 } from "@multiplatform.one/theme";
 import { CheckIcon } from "@phosphor-icons/react";
-import type { GetProps, PopoverContentProps, PopoverProps, TamaguiElement } from "tamagui";
+import { FloatingPanel } from "@multiplatform.one/forms";
+import type { GetProps, TamaguiElement } from "tamagui";
 import {
-  Popover,
   Text,
   View,
   XStack,
   YStack,
   isWeb,
   styled,
-  useComposedRefs,
   useControllableState,
   useTheme,
   withStaticProperties,
@@ -62,7 +58,19 @@ import { componentColors } from "../componentColors";
 
 // ── Types ─────────────────────────────────────────────────────
 
-export type DropdownMenuPlacement = PopoverProps["placement"];
+export type DropdownMenuPlacement =
+  | "top"
+  | "top-start"
+  | "top-end"
+  | "bottom"
+  | "bottom-start"
+  | "bottom-end"
+  | "left"
+  | "left-start"
+  | "left-end"
+  | "right"
+  | "right-start"
+  | "right-end";
 
 export interface DropdownMenuItemSpec {
   /** Stable key (defaults to index). */
@@ -132,7 +140,6 @@ export interface DropdownMenuProps {
 interface DropdownMenuContextValue {
   open: boolean;
   setOpen: (open: boolean) => void;
-  triggerRef: RefObject<TamaguiElement | null>;
   close: () => void;
   /** Menu-level closeOnSelect default (entry-level values win). */
   closeOnSelect?: boolean;
@@ -154,6 +161,10 @@ function useDropdownMenuContext(part: string): DropdownMenuContextValue {
 // full-width row, own horizontal padding, flat corners, no focus outline —
 // the same frame Select options and MentionInput suggestions use. Menu-only
 // concerns stay local: cursor, gap, and the interactive color ramp.
+const HOVER_FILL = "$color3";
+const SELECTED_FILL = "$color2";
+const MENU_ITEM_ATTR = "data-mp1-menu-item";
+
 const ItemRow = styled(XStack, {
   name: "DropdownMenuItem",
   ...menuRowFrame,
@@ -161,20 +172,23 @@ const ItemRow = styled(XStack, {
   cursor: "pointer",
   // LC-72 CONTAINER-CLIP: rows stay square; the overlay clips outer corners.
   // LC-71: rest and pointer-origin focus paint no ring. Keyboard ring is
-  // applied per-row via keyboardFocusRingProps (inset so overflow:hidden
-  // does not sever it) when wasKeyboardFocus().
+  // applied per-row via keyboardFocusRingProps (offset 0 — design-law menu
+  // grammar) when wasKeyboardFocus().
   outlineWidth: 0,
-  hoverStyle: { backgroundColor: componentColors.interactive.hover },
-  pressStyle: { backgroundColor: componentColors.interactive.active },
+  hoverStyle: { backgroundColor: HOVER_FILL },
+  pressStyle: { backgroundColor: HOVER_FILL },
   focusStyle: {
-    backgroundColor: componentColors.interactive.hover,
+    backgroundColor: HOVER_FILL,
     outlineWidth: 0,
   },
   focusVisibleStyle: {
-    backgroundColor: componentColors.interactive.hover,
+    backgroundColor: HOVER_FILL,
     outlineWidth: 0,
   },
   variants: {
+    selected: {
+      true: { backgroundColor: SELECTED_FILL },
+    },
     disabled: {
       true: {
         cursor: "default",
@@ -195,7 +209,67 @@ const SeparatorLine = styled(View, {
   marginVertical: "$1.5",
 });
 
-const MENU_ITEM_ATTR = "data-mp1-menu-item";
+const coverContract = {
+  widthMode: "at-least-trigger" as const,
+  fitContent: false,
+};
+
+function decorateTrigger(
+  trigger: ReactNode,
+  open: boolean,
+  onArrow: (prefer: "first" | "last") => void,
+): ReactNode {
+  if (!isValidElement(trigger)) return trigger;
+  const props = trigger.props as {
+    onKeyDown?: (e: ReactKeyboardEvent) => void;
+  };
+  return cloneElement(trigger as ReactElement<Record<string, unknown>>, {
+    "aria-haspopup": "menu",
+    "aria-expanded": open,
+    onKeyDown: (e: ReactKeyboardEvent) => {
+      props.onKeyDown?.(e);
+      if (e.repeat) return;
+      if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+        e.preventDefault();
+        onArrow(e.key === "ArrowUp" ? "last" : "first");
+      }
+    },
+  });
+}
+
+function renderEntries(items: DropdownMenuEntry[]) {
+  return items.map((entry, index) =>
+    "separator" in entry && entry.separator ? (
+      <DropdownMenuSeparator key={`separator-${index}`} />
+    ) : "checked" in entry && (entry as DropdownMenuItemSpec).checked !== undefined ? (
+      <DropdownMenuCheckboxItem
+        key={(entry as DropdownMenuItemSpec).key ?? index}
+        checked={(entry as DropdownMenuItemSpec).checked!}
+        onCheckedChange={(entry as DropdownMenuItemSpec).onCheckedChange}
+        onSelect={(entry as DropdownMenuItemSpec).onSelect}
+        closeOnSelect={(entry as DropdownMenuItemSpec).closeOnSelect}
+        disabled={(entry as DropdownMenuItemSpec).disabled}
+        disabledReason={(entry as DropdownMenuItemSpec).disabledReason}
+        shortcut={(entry as DropdownMenuItemSpec).shortcut}
+      >
+        {(entry as DropdownMenuItemSpec).label}
+      </DropdownMenuCheckboxItem>
+    ) : (
+      <DropdownMenuItem
+        key={(entry as DropdownMenuItemSpec).key ?? index}
+        icon={(entry as DropdownMenuItemSpec).icon}
+        shortcut={(entry as DropdownMenuItemSpec).shortcut}
+        disabled={(entry as DropdownMenuItemSpec).disabled}
+        disabledReason={(entry as DropdownMenuItemSpec).disabledReason}
+        destructive={(entry as DropdownMenuItemSpec).destructive}
+        closeOnSelect={(entry as DropdownMenuItemSpec).closeOnSelect}
+        onSelect={(entry as DropdownMenuItemSpec).onSelect}
+      >
+        {(entry as DropdownMenuItemSpec).label}
+      </DropdownMenuItem>
+    ),
+  );
+}
 
 // ── Root ──────────────────────────────────────────────────────
 
@@ -214,313 +288,228 @@ function DropdownMenuRoot({
     defaultProp: defaultOpen,
     onChange: onOpenChange,
   });
-  const triggerRef = useRef<TamaguiElement | null>(null);
   const pendingFocusRef = useRef<"first" | "last">("first");
 
   const close = useCallback(() => {
     setOpen(false);
-    // Restore focus to the trigger after programmatic close (item select);
-    // Escape/outside-press restores are handled by the Popover focus scope.
-    if (isWeb) {
-      const node = triggerRef.current as unknown as HTMLElement | null;
-      if (node && typeof node.focus === "function") node.focus();
-    }
   }, [setOpen]);
 
   const ctx = useMemo<DropdownMenuContextValue>(
-    () => ({ open, setOpen, triggerRef, close, closeOnSelect, pendingFocusRef }),
+    () => ({ open, setOpen, close, closeOnSelect, pendingFocusRef }),
     [open, setOpen, close, closeOnSelect],
   );
 
+  const onArrow = useCallback(
+    (prefer: "first" | "last") => {
+      pendingFocusRef.current = prefer;
+      if (!open) setOpen(true);
+    },
+    [open, setOpen],
+  );
+
+  let trigger: ReactNode = children;
+  let body: ReactNode = null;
+  let contentMaxHeight = maxHeight;
+  let contentMaxWidth: number | undefined;
+  if (items) {
+    body = renderEntries(items);
+  } else if (Array.isArray(children) || isValidElement(children)) {
+    const list = Array.isArray(children) ? children : [children];
+    const triggerParts: ReactNode[] = [];
+    const contentParts: ReactNode[] = [];
+    for (const child of list) {
+      if (!isValidElement(child)) {
+        triggerParts.push(child);
+        continue;
+      }
+      const type = (child as { type?: unknown }).type;
+      if (type === DropdownMenuTrigger) {
+        triggerParts.push((child.props as { children?: ReactNode }).children);
+      } else if (type === DropdownMenuContent) {
+        const contentProps = child.props as {
+          children?: ReactNode;
+          maxHeight?: number;
+          maxWidth?: number;
+        };
+        contentParts.push(contentProps.children);
+        if (contentProps.maxHeight != null) contentMaxHeight = contentProps.maxHeight;
+        if (contentProps.maxWidth != null) contentMaxWidth = contentProps.maxWidth;
+      } else {
+        triggerParts.push(child);
+      }
+    }
+    if (triggerParts.length) trigger = triggerParts.length === 1 ? triggerParts[0] : triggerParts;
+    if (contentParts.length) body = contentParts;
+  }
+
   return (
     <DropdownMenuContext.Provider value={ctx}>
-      <Popover
+      <FloatingPanel
         open={open}
         onOpenChange={setOpen}
-        placement={placement}
-        offset={OVERLAY_ANCHOR_GAP}
-        stayInFrame
-        allowFlip
+        trigger={decorateTrigger(trigger, open, onArrow)}
+        contentPadding="none"
+        {...coverContract}
+        {...(placement ? { placement } : {})}
       >
-        {items ? (
-          <>
-            <DropdownMenuTrigger asChild={isValidElement(children)}>{children}</DropdownMenuTrigger>
-            <DropdownMenuContent maxHeight={maxHeight}>
-              {items.map((entry, index) =>
-                "separator" in entry && entry.separator ? (
-                  <DropdownMenuSeparator key={`separator-${index}`} />
-                ) : "checked" in entry && (entry as DropdownMenuItemSpec).checked !== undefined ? (
-                  <DropdownMenuCheckboxItem
-                    key={(entry as DropdownMenuItemSpec).key ?? index}
-                    checked={(entry as DropdownMenuItemSpec).checked!}
-                    onCheckedChange={(entry as DropdownMenuItemSpec).onCheckedChange}
-                    onSelect={(entry as DropdownMenuItemSpec).onSelect}
-                    closeOnSelect={(entry as DropdownMenuItemSpec).closeOnSelect}
-                    disabled={(entry as DropdownMenuItemSpec).disabled}
-                    disabledReason={(entry as DropdownMenuItemSpec).disabledReason}
-                    shortcut={(entry as DropdownMenuItemSpec).shortcut}
-                  >
-                    {(entry as DropdownMenuItemSpec).label}
-                  </DropdownMenuCheckboxItem>
-                ) : (
-                  <DropdownMenuItem
-                    key={(entry as DropdownMenuItemSpec).key ?? index}
-                    icon={(entry as DropdownMenuItemSpec).icon}
-                    shortcut={(entry as DropdownMenuItemSpec).shortcut}
-                    disabled={(entry as DropdownMenuItemSpec).disabled}
-                    disabledReason={(entry as DropdownMenuItemSpec).disabledReason}
-                    destructive={(entry as DropdownMenuItemSpec).destructive}
-                    closeOnSelect={(entry as DropdownMenuItemSpec).closeOnSelect}
-                    onSelect={(entry as DropdownMenuItemSpec).onSelect}
-                  >
-                    {(entry as DropdownMenuItemSpec).label}
-                  </DropdownMenuItem>
-                ),
-              )}
-            </DropdownMenuContent>
-          </>
-        ) : (
-          children
-        )}
-      </Popover>
+        <DropdownMenuList maxHeight={contentMaxHeight} maxWidth={contentMaxWidth}>
+          {body}
+        </DropdownMenuList>
+      </FloatingPanel>
     </DropdownMenuContext.Provider>
   );
 }
 
 // ── Trigger ───────────────────────────────────────────────────
 
-export interface DropdownMenuTriggerProps extends GetProps<typeof Popover.Trigger> {}
-
-const DropdownMenuTrigger = forwardRef<TamaguiElement, DropdownMenuTriggerProps>(
-  function DropdownMenuTrigger({ onKeyDown, ...props }, forwardedRef) {
-    const ctx = useDropdownMenuContext("Trigger");
-    const composedRef = useComposedRefs(ctx.triggerRef, forwardedRef);
-    // Menu-button pattern (APG): activation keys open on KEYDOWN with
-    // preventDefault. Without this, a native-button trigger opens via its
-    // synthesized click and the same key sequence's KEYUP press-completion
-    // toggles the menu straight back closed — racing the open-auto-focus and
-    // ghost-activating the first item (Enter on "Actions" ran "Edit").
-    // preventDefault alone does not cancel that keyup press, so the pending
-    // keyup is swallowed with a one-shot capture listener.
-    const swallowNextKeyUp = (key: string) => {
-      const kill = (ue: globalThis.KeyboardEvent) => {
-        if (ue.key === key) {
-          ue.preventDefault();
-          ue.stopImmediatePropagation();
-        }
-        document.removeEventListener("keyup", kill, true);
-      };
-      document.addEventListener("keyup", kill, true);
-    };
-    const handleKeyDown = (e: globalThis.KeyboardEvent) => {
-      (onKeyDown as unknown as ((e: globalThis.KeyboardEvent) => void) | undefined)?.(e);
-      if (e.repeat) return;
-      if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown" || e.key === "ArrowUp") {
-        swallowNextKeyUp(e.key);
-        if (e.defaultPrevented) return; // composed trigger already activated
-        e.preventDefault();
-        if (e.key === "ArrowDown") {
-          ctx.pendingFocusRef.current = "first";
-          if (!ctx.open) ctx.setOpen(true);
-        } else if (e.key === "ArrowUp") {
-          // APG / macOS / Radix: Up opens onto the last item.
-          ctx.pendingFocusRef.current = "last";
-          if (!ctx.open) ctx.setOpen(true);
-        } else {
-          ctx.pendingFocusRef.current = "first";
-          ctx.setOpen(!ctx.open);
-        }
-      }
-    };
-    return (
-      <Popover.Trigger
-        ref={composedRef}
-        aria-haspopup="menu"
-        aria-expanded={ctx.open}
-        {...(isWeb ? { onKeyDown: handleKeyDown as unknown as () => void } : undefined)}
-        {...props}
-      />
-    );
-  },
-);
+export interface DropdownMenuTriggerProps {
+  children?: ReactNode;
+  asChild?: boolean;
+}
+
+function DropdownMenuTrigger({ children }: DropdownMenuTriggerProps) {
+  return <>{children}</>;
+}
 
 // ── Content ───────────────────────────────────────────────────
 
-export interface DropdownMenuContentProps extends PopoverContentProps {
+export interface DropdownMenuContentProps {
+  children?: ReactNode;
   /** Max height before the item list scrolls. */
   maxHeight?: number;
   /**
-   * Minimum menu width. Defaults to the measured trigger width
-   * (OVERLAY_ANCHOR_GAP rule: anchored menus match the trigger width
-   * exactly and may only grow wider for content, never narrower).
+   * Max menu width. Callers such as DataTableViewOptions pass a popover
+   * cap; FloatingPanel still owns at-least-trigger, this only clips overflow.
+   */
+  maxWidth?: number;
+  /**
+   * Minimum menu width. FloatingPanel's at-least-trigger cover contract
+   * owns this now — kept so existing callers type-check.
    */
   minWidth?: number;
 }
 
-const DropdownMenuContent = forwardRef<TamaguiElement, DropdownMenuContentProps>(
-  function DropdownMenuContent({ children, maxHeight, minWidth, ...props }, forwardedRef) {
-    const ctx = useDropdownMenuContext("Content");
-    const { knobProps } = useResolvedKnobs();
-    const innerRef = useRef<TamaguiElement | null>(null);
-
-    // OVERLAY_ANCHOR_GAP rule (theme/layoutTokens): the menu's min-width is
-    // the trigger's rendered width — measured on open, so the menu is never
-    // narrower than its trigger and content may still grow it wider.
-    const [triggerWidth, setTriggerWidth] = useState<number | undefined>(undefined);
-    useLayoutEffect(() => {
-      if (!isWeb || !ctx.open) return;
-      const node = ctx.triggerRef.current as unknown as HTMLElement | null;
-      if (node && typeof node.getBoundingClientRect === "function") {
-        // Ceil to whole CSS px: a fractional min-width could render the menu
-        // a hair narrower than the trigger; never-narrower wins over exact
-        // subpixels (and whole-px origins keep borders on device pixels).
-        setTriggerWidth(Math.ceil(node.getBoundingClientRect().width));
-      }
-    }, [ctx.open, ctx.triggerRef]);
-    const resolvedMinWidth = minWidth ?? triggerWidth;
-    const composedRef = useComposedRefs(innerRef, forwardedRef);
-    const typeahead = useRef({ buffer: "", at: 0 });
-    if (isWeb) ensureKeyboardModalityTracking();
-
-    const getItems = useCallback((): HTMLElement[] => {
-      const node = innerRef.current as unknown as HTMLElement | null;
-      if (!node) return [];
-      return Array.from(
-        node.querySelectorAll<HTMLElement>(`[${MENU_ITEM_ATTR}]:not([aria-disabled="true"])`),
-      );
-    }, []);
-
-    const focusItem = useCallback((el: HTMLElement | undefined) => {
-      el?.focus();
-    }, []);
-
-    // Menu pattern: focus lands on the first item when the menu opens
-    // (last item when opened with ArrowUp — APG menu-button).
-    const handleOpenAutoFocus = useCallback(
-      (event: Event) => {
-        event.preventDefault();
-        const prefer = ctx.pendingFocusRef.current;
-        ctx.pendingFocusRef.current = "first";
-        requestAnimationFrame(() => {
-          const items = getItems();
-          focusItem(prefer === "last" ? items[items.length - 1] : items[0]);
-        });
-      },
-      [ctx, focusItem, getItems],
-    );
+function DropdownMenuContent({ children }: DropdownMenuContentProps) {
+  return <>{children}</>;
+}
 
-    // The Popover focus scope does not restore focus to the trigger on its
-    // own here, so do it explicitly on every close path.
-    const handleCloseAutoFocus = useCallback(
-      (event: Event) => {
-        event.preventDefault();
-        const node = ctx.triggerRef.current as unknown as HTMLElement | null;
-        if (node && typeof node.focus === "function") node.focus();
-      },
-      [ctx],
+function DropdownMenuList({
+  children,
+  maxHeight,
+  maxWidth,
+}: {
+  children?: ReactNode;
+  maxHeight?: number;
+  maxWidth?: number;
+}) {
+  const ctx = useDropdownMenuContext("Content");
+  const innerRef = useRef<TamaguiElement | null>(null);
+  const typeahead = useRef({ buffer: "", at: 0 });
+  if (isWeb) ensureKeyboardModalityTracking();
+
+  const getItems = useCallback((): HTMLElement[] => {
+    const node = innerRef.current as unknown as HTMLElement | null;
+    if (!node) return [];
+    return Array.from(
+      node.querySelectorAll<HTMLElement>(`[${MENU_ITEM_ATTR}]:not([aria-disabled="true"])`),
     );
-
-    // Roving focus via a native listener on the content node — keydown from
-    // focused rows bubbles here (prop-level onKeyDown is not reliably
-    // forwarded through Popover.Content).
-    useEffect(() => {
-      if (!isWeb) return;
-      const node = innerRef.current as unknown as HTMLElement | null;
-      if (!node) return;
-      const handler = (event: globalThis.KeyboardEvent) => {
-        const items = getItems();
-        if (!items.length) return;
-        const index = items.indexOf(document.activeElement as HTMLElement);
-        switch (event.key) {
-          case "ArrowDown":
-            event.preventDefault();
-            focusItem(items[(index + 1) % items.length]);
-            break;
-          case "ArrowUp":
-            event.preventDefault();
-            focusItem(items[(index - 1 + items.length) % items.length]);
-            break;
-          case "Home":
-            event.preventDefault();
-            focusItem(items[0]);
-            break;
-          case "End":
-            event.preventDefault();
-            focusItem(items[items.length - 1]);
-            break;
-          case "Enter":
-          case " ":
-            // Fallback activation: click the focused row (the row-level
-            // React handler stops propagation when it handles this first).
-            if (index >= 0) {
-              event.preventDefault();
-              items[index].click();
-            }
-            break;
-          case "Escape":
+  }, []);
+
+  const focusItem = useCallback((el: HTMLElement | undefined) => {
+    el?.focus();
+  }, []);
+
+  useEffect(() => {
+    if (!isWeb || !ctx.open) return;
+    const prefer = ctx.pendingFocusRef.current;
+    ctx.pendingFocusRef.current = "first";
+    requestAnimationFrame(() => {
+      const items = getItems();
+      focusItem(prefer === "last" ? items[items.length - 1] : items[0]);
+    });
+  }, [ctx, ctx.open, focusItem, getItems]);
+
+  useEffect(() => {
+    if (!isWeb) return;
+    const node = innerRef.current as unknown as HTMLElement | null;
+    if (!node) return;
+    const handler = (event: globalThis.KeyboardEvent) => {
+      const items = getItems();
+      if (!items.length) return;
+      const index = items.indexOf(document.activeElement as HTMLElement);
+      switch (event.key) {
+        case "ArrowDown":
+          event.preventDefault();
+          focusItem(items[(index + 1) % items.length]);
+          break;
+        case "ArrowUp":
+          event.preventDefault();
+          focusItem(items[(index - 1 + items.length) % items.length]);
+          break;
+        case "Home":
+          event.preventDefault();
+          focusItem(items[0]);
+          break;
+        case "End":
+          event.preventDefault();
+          focusItem(items[items.length - 1]);
+          break;
+        case "Enter":
+        case " ":
+          if (index >= 0) {
             event.preventDefault();
-            event.stopPropagation();
-            ctx.close();
-            break;
-          case "Tab":
-            // Menus are not tab-traversable: close instead.
-            ctx.close();
-            break;
-          default: {
-            // Typeahead: printable characters accumulate for 600ms.
-            if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-              const now = Date.now();
-              const state = typeahead.current;
-              state.buffer = now - state.at > 600 ? event.key : state.buffer + event.key;
-              state.at = now;
-              const query = state.buffer.toLowerCase();
-              const start = index >= 0 ? index : 0;
-              const ordered = [...items.slice(start + 1), ...items.slice(0, start + 1)];
-              const match = ordered.find((el) =>
-                (el.textContent ?? "").trim().toLowerCase().startsWith(query),
-              );
-              if (match) focusItem(match);
-            }
+            items[index].click();
+          }
+          break;
+        case "Escape":
+          event.preventDefault();
+          event.stopPropagation();
+          ctx.close();
+          break;
+        case "Tab":
+          ctx.close();
+          break;
+        default: {
+          if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+            const now = Date.now();
+            const state = typeahead.current;
+            state.buffer = now - state.at > 600 ? event.key : state.buffer + event.key;
+            state.at = now;
+            const query = state.buffer.toLowerCase();
+            const start = index >= 0 ? index : 0;
+            const ordered = [...items.slice(start + 1), ...items.slice(0, start + 1)];
+            const match = ordered.find((el) =>
+              (el.textContent ?? "").trim().toLowerCase().startsWith(query),
+            );
+            if (match) focusItem(match);
           }
         }
-      };
-      node.addEventListener("keydown", handler);
-      return () => node.removeEventListener("keydown", handler);
-    }, [ctx, focusItem, getItems]);
+      }
+    };
+    node.addEventListener("keydown", handler);
+    return () => node.removeEventListener("keydown", handler);
+  }, [ctx, focusItem, getItems]);
 
-    return (
-      <Popover.Content
-        ref={composedRef}
-        role="menu"
-        {...knobProps.elevatedSurface}
-        // SP-EDGE: the container owns only its border — zero padding on all
-        // four sides. Rows reach every edge; the first/last row highlight
-        // touches the top/bottom border. overflow hidden clips full-width
-        // row highlights to the radius knob.
-        padding={0}
-        overflow="hidden"
-        minWidth={resolvedMinWidth}
-        transition={knobProps.transition}
-        enterStyle={{ opacity: 0, y: -4, scale: 0.97 }}
-        exitStyle={{ opacity: 0, y: -4, scale: 0.97 }}
-        onOpenAutoFocus={handleOpenAutoFocus}
-        onCloseAutoFocus={handleCloseAutoFocus}
-        {...props}
-      >
-        <YStack
-          // SP-EDGE: no container padding — items own all their padding.
-          paddingVertical={0}
-          width="100%"
-          {...(maxHeight
-            ? { maxHeight, ...(isWeb ? { style: { overflowY: "auto" } as any } : {}) }
-            : {})}
-        >
-          {children}
-        </YStack>
-      </Popover.Content>
-    );
-  },
-);
+  return (
+    <YStack
+      ref={innerRef}
+      role="menu"
+      data-dismiss-class="commit"
+      data-mp-width-mode="at-least-trigger"
+      width="100%"
+      paddingVertical={0}
+      {...(maxHeight
+        ? {
+            maxHeight,
+            ...(isWeb ? { style: { overflowY: "auto" } as Record<string, unknown> } : {}),
+          }
+        : {})}
+      {...(maxWidth ? { maxWidth } : {})}
+    >
+      {children}
+    </YStack>
+  );
+}
 
 // ── Item ──────────────────────────────────────────────────────
 
@@ -551,9 +540,10 @@ export interface DropdownMenuItemProps extends Omit<
 }
 
 interface ItemBodyProps extends DropdownMenuItemProps {
-  leading?: ReactNode;
+  trailing?: ReactNode;
   /** LC-21 class default applied when neither entry nor menu set a value. */
   closeOnSelectDefault?: boolean;
+  selected?: boolean;
 }
 
 const DropdownMenuItemBody = forwardRef<TamaguiElement, ItemBodyProps>(
@@ -569,7 +559,8 @@ const DropdownMenuItemBody = forwardRef<TamaguiElement, ItemBodyProps>(
       closeOnSelect,
       closeOnSelectDefault = true,
       role = "menuitem",
-      leading,
+      trailing,
+      selected = false,
       ...props
     },
     forwardedRef,
@@ -580,7 +571,6 @@ const DropdownMenuItemBody = forwardRef<TamaguiElement, ItemBodyProps>(
     const [kbRing, setKbRing] = useState(false);
     const [highlighted, setHighlighted] = useState(false);
     const pointerIntentRef = useRef(false);
-    // DG-ST-03: disabled menu items explain inline or DEV-warn.
     warnBareDisabled({
       component: "DropdownMenu.Item",
       id: typeof children === "string" ? children : undefined,
@@ -588,14 +578,9 @@ const DropdownMenuItemBody = forwardRef<TamaguiElement, ItemBodyProps>(
       disabledReason,
     });
     const explainedDisable = disabled && Boolean(disabledReason?.trim());
-    // Resolved so phosphor icons pick it up via currentColor on web.
     const iconColor = (destructive ? theme.red11?.get() : theme.color12?.get()) as
       | string
       | undefined;
-
-    // Entry-level closeOnSelect wins over the menu-level default, which wins
-    // over the LC-21 class default (Item COMMIT-closes, CheckboxItem
-    // COMPOSE-stays).
     const shouldCloseOnSelect = closeOnSelect ?? ctx.closeOnSelect ?? closeOnSelectDefault;
 
     const handleSelect = () => {
@@ -604,11 +589,7 @@ const DropdownMenuItemBody = forwardRef<TamaguiElement, ItemBodyProps>(
       if (shouldCloseOnSelect) ctx.close();
     };
 
-    // Destructive = red text/icon (Linear / Primer / macOS). Highlight fill
-    // may tint; the LC-71 ring stays the overlay `$outlineColor`, never the
-    // error-intent outline (which reads as a red border on the row).
     const textColor = destructive ? "$red11" : componentColors.text.primary;
-
     const highlightFill =
       destructive && !disabled
         ? {
@@ -619,30 +600,35 @@ const DropdownMenuItemBody = forwardRef<TamaguiElement, ItemBodyProps>(
     const focusFill =
       destructive && !disabled
         ? { backgroundColor: "$red3" as const }
-        : { backgroundColor: componentColors.interactive.hover };
-    const ring = kbRing ? keyboardFocusRingProps : { outlineWidth: 0 as const };
+        : { backgroundColor: selected ? SELECTED_FILL : HOVER_FILL };
+    const ring = kbRing
+      ? { ...keyboardFocusRingProps, outlineOffset: 0 }
+      : { outlineWidth: 0 as const };
+    const rowHeight = knobProps.sizeToken === "$4" ? "44" : String(knobProps.sizeToken);
 
     return (
       <ItemRow
         ref={forwardedRef}
         role={role}
         disabled={disabled}
+        selected={selected}
         aria-disabled={disabled || undefined}
         minHeight={knobProps.sizeToken}
         transition={knobProps.transition}
         onPress={handleSelect}
+        data-mp-hover-fill={HOVER_FILL}
+        data-mp-selected-fill={selected ? SELECTED_FILL : undefined}
+        data-mp-pad-x="13"
+        data-mp-row-height={rowHeight}
+        data-mp-font-weight="400"
+        data-mp-ring-offset="0"
         {...highlightFill}
         {...(explainedDisable ? { paddingVertical: "$1.5" } : {})}
-        {...(props as any)}
+        {...(props as Record<string, unknown>)}
         {...(isWeb
           ? ({
               tabIndex: -1,
               [MENU_ITEM_ATTR]: "",
-              // Radix: pointer-move moves highlight so hover and keyboard
-              // never paint two rows at once. LC-71: ring only when the
-              // focus is keyboard-origin — pointer-move sets a local flag
-              // so wasKeyboardFocus() (still true until pointerdown) does
-              // not keep the ring after the mouse takes over.
               onFocus: () => {
                 setHighlighted(true);
                 setKbRing(wasKeyboardFocus() && !pointerIntentRef.current);
@@ -662,29 +648,32 @@ const DropdownMenuItemBody = forwardRef<TamaguiElement, ItemBodyProps>(
               },
               "data-highlighted": highlighted ? "true" : undefined,
               "data-mp-kb-ring": kbRing ? "true" : undefined,
-            } as any)
+            } as Record<string, unknown>)
           : {})}
-        {...(kbRing ? keyboardFocusRingProps : { outlineWidth: 0 })}
+        {...(kbRing ? { ...keyboardFocusRingProps, outlineOffset: 0 } : { outlineWidth: 0 })}
         focusStyle={{ ...focusFill, ...ring }}
         focusVisibleStyle={{ ...focusFill, ...ring }}
       >
-        {leading}
         {icon ? (
           <View
             flexShrink={0}
             alignItems="center"
             justifyContent="center"
             width={18}
-            {...(isWeb ? ({ style: { color: iconColor } } as any) : {})}
+            {...(isWeb ? ({ style: { color: iconColor } } as Record<string, unknown>) : {})}
           >
             {icon}
           </View>
         ) : null}
         {explainedDisable ? (
-          // DG-ST-03: the reason renders inline under the label — visible
-          // without hover (DG-OVL-05) and read as part of the item.
           <YStack flexGrow={1} flexShrink={1} gap="$0.5">
-            <Text {...knobProps.body} color={textColor} fontSize="$3" numberOfLines={1}>
+            <Text
+              {...knobProps.body}
+              color={textColor}
+              fontSize="$3"
+              fontWeight="400"
+              numberOfLines={1}
+            >
               {children}
             </Text>
             <Text
@@ -701,6 +690,7 @@ const DropdownMenuItemBody = forwardRef<TamaguiElement, ItemBodyProps>(
             {...knobProps.body}
             color={textColor}
             fontSize="$3"
+            fontWeight="400"
             numberOfLines={1}
             flexGrow={1}
             flexShrink={1}
@@ -720,6 +710,7 @@ const DropdownMenuItemBody = forwardRef<TamaguiElement, ItemBodyProps>(
             {shortcut}
           </Text>
         ) : null}
+        {trailing}
       </ItemRow>
     );
   },
@@ -747,25 +738,22 @@ const DropdownMenuCheckboxItem = forwardRef<TamaguiElement, DropdownMenuCheckbox
     return (
       <DropdownMenuItemBody
         ref={ref}
-        role={"menuitemcheckbox" as any}
+        role={"menuitemcheckbox" as "menuitem"}
         aria-checked={checked}
-        // LC-21 COMPOSE class default: toggles accumulate, so the menu stays
-        // open unless the entry or the menu opts into close-on-select
-        // (single-select radio-style navigation menus do).
+        selected={checked}
         closeOnSelectDefault={false}
-        // Both callbacks fire: the toggle contract AND the activation
-        // contract — a checked entry's onSelect must never be dropped.
         onSelect={() => {
           onCheckedChange?.(!checked);
           onSelect?.();
         }}
-        leading={
+        trailing={
           <View
             width={18}
             flexShrink={0}
             alignItems="center"
             justifyContent="center"
             opacity={checked ? 1 : 0}
+            data-mp-check="trailing"
           >
             <CheckIcon size={14} weight="bold" />
           </View>
@@ -781,8 +769,6 @@ const DropdownMenuCheckboxItem = forwardRef<TamaguiElement, DropdownMenuCheckbox
 export interface DropdownMenuSeparatorProps extends GetProps<typeof SeparatorLine> {}
 
 function DropdownMenuSeparator(props: DropdownMenuSeparatorProps) {
-  // Hairline: menu separators are dividers — one device pixel on high-DPI
-  // (Axiom 15), overridable by explicit consumer height.
   return <SeparatorLine role="separator" {...hairline.height} {...props} />;
 }