@slithy/base-ui 0.1.0 → 0.2.0

package/src/Dropdown/Dropdown.tsx

@@ -1,5 +1,5 @@
-import { Menu } from "@base-ui/react/menu";
 import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
+import { Menu } from "@base-ui/react/menu";
 import {
   cloneElement,
   createContext,
@@ -8,410 +8,414 @@ import {
   useContext,
   useEffect,
   useRef,
-  useState,
   type ComponentPropsWithoutRef,
   type ReactElement,
   type ReactNode,
-  type RefObject,
 } from "react";
-import "./Dropdown.css";
+import { useDropdownStore, type DropdownCallbacks, type DropdownMenuConfig, type DropdownPositionConfig } from "./DropdownStore";
+import { useTooltipStore } from "../Tooltip/TooltipStore";
 
 /* ------------------------------------------------------------------ */
-/*  Deferred rendering — avoids mounting Base UI hooks/positioning     */
-/*  until the user actually interacts with the trigger.                */
+/*  Context — connects Trigger to Portal content                       */
 /* ------------------------------------------------------------------ */
 
-interface DeferredState {
-  activated: boolean;
-  activate: () => void;
-  shouldRefocusRef: RefObject<boolean>;
-  shouldOpenRef: RefObject<boolean>;
-  menuOpen: boolean;
+interface DropdownContext {
+  contentRef: React.RefObject<ReactNode | null>;
+  triggerRef: React.RefObject<HTMLElement | null>;
+  disabled: boolean;
+  openOn: "click" | "pointerdown";
+  callbacks: DropdownCallbacks;
+  menuConfig: DropdownMenuConfig;
+  positionConfig: DropdownPositionConfig;
 }
 
-const DeferredContext = createContext<DeferredState | null>(null);
+const DropdownCtx = createContext<DropdownContext | null>(null);
 
 /* ------------------------------------------------------------------ */
-/*  Root — owns the activation latch                                   */
+/*  Root — context provider                                            */
 /* ------------------------------------------------------------------ */
 
-type RootProps = ComponentPropsWithoutRef<typeof Menu.Root> & {
+type RootProps = {
   children?: ReactNode;
-  /** When `true`, the dropdown will not open. The trigger button remains
-   *  interactive so consumers can attach alternate behavior (e.g. opening
-   *  a modal on mobile) via event handlers on `Dropdown.Trigger`. */
+  /** Controlled open state. */
+  open?: boolean;
+  /** Open on first render (uncontrolled). */
+  defaultOpen?: boolean;
   disabled?: boolean;
-  /** Unmount Base UI after close animation completes, returning to the
-   *  lightweight pre-activation state. Defaults to `false`. */
-  unmountOnClose?: boolean;
+  /** Whether the menu is modal (locks scroll, inerts page). @default true */
+  modal?: boolean;
+  /** Fire the open/close toggle on `"click"` (mouseup) or `"pointerdown"` (mousedown). @default "click" */
+  openOn?: "click" | "pointerdown";
+  /** Wrap keyboard focus from last item back to first (and vice versa). @default true */
+  loopFocus?: boolean;
+  /** Highlight items on pointer hover (`data-highlighted`). @default true */
+  highlightItemOnHover?: boolean;
+  /** Arrow key direction: `"vertical"` (up/down) or `"horizontal"` (left/right). @default "vertical" */
+  orientation?: "vertical" | "horizontal";
+  /** Which side of the trigger to place the popup. @default "bottom" */
+  side?: DropdownPositionConfig["side"];
+  /** Distance between trigger and popup in pixels. @default 4 */
+  sideOffset?: number;
+  /** Alignment relative to the trigger. @default "center" */
+  align?: DropdownPositionConfig["align"];
+  /** Offset along the alignment axis in pixels. @default 0 */
+  alignOffset?: number;
+  /** Padding from viewport edges for collision detection. @default 5 */
+  collisionPadding?: DropdownPositionConfig["collisionPadding"];
+  onOpenChange?: (open: boolean) => void;
+  onOpenChangeComplete?: (open: boolean) => void;
 };
 
-// InnerRoot mounts fresh when activation flips. Its useState initializer
-// runs exactly once, so we can safely read shouldOpenRef to decide the
-// initial open state without side-effects during render.
-type InnerRootProps = ComponentPropsWithoutRef<typeof Menu.Root> & {
-  children?: ReactNode;
-  shouldOpenRef: RefObject<boolean>;
-  unmountOnClose: boolean;
-  onDeactivate: () => void;
-  onMenuOpenChange: (open: boolean) => void;
-};
-
-function InnerRoot({
-  children,
-  defaultOpen,
-  shouldOpenRef,
-  unmountOnClose,
-  onDeactivate,
-  onMenuOpenChange,
-  onOpenChange,
-  onOpenChangeComplete,
-  ...props
-}: InnerRootProps) {
-  // When activated by click/keyboard (shouldOpenRef), we need the menu to open
-  // with a CSS transition. Base UI's useTransitionStatus skips `data-starting-style`
-  // when `defaultOpen` is true (open is already true on first render). So instead
-  // we use controlled `open`: mount closed, then open after one frame so
-  // `data-starting-style` applies and the enter transition plays.
-  const shouldOpen = useRef(false);
-  const [deferredOpen, setDeferredOpen] = useState(false);
-
-  if (!shouldOpen.current && shouldOpenRef.current) {
-    shouldOpenRef.current = false;
-    shouldOpen.current = true;
-  }
+function Root({ children, open, defaultOpen, disabled = false, modal, openOn = "click", loopFocus, highlightItemOnHover, orientation, side, sideOffset, align, alignOffset, collisionPadding, onOpenChange, onOpenChangeComplete }: RootProps) {
+  const contentRef = useRef<ReactNode | null>(null);
+  const triggerRef = useRef<HTMLElement | null>(null);
+  const callbacks: DropdownCallbacks = { onOpenChange, onOpenChangeComplete };
+  const menuConfig: DropdownMenuConfig = { modal, loopFocus, highlightItemOnHover, orientation };
+  const positionConfig: DropdownPositionConfig = { side, sideOffset, align, alignOffset, collisionPadding };
+  const initializedRef = useRef(false);
 
+  // Controlled open: sync store with prop
   useEffect(() => {
-    if (!shouldOpen.current) return;
-    const frame = requestAnimationFrame(() => {
-      setDeferredOpen(true);
-    });
-    return () => cancelAnimationFrame(frame);
-  }, []);
-
-  // Separate `open` from rest of props to avoid key conflicts on Menu.Root.
-  const { open: externalOpen, ...restProps } = props;
-
-  // When controlled externally, pass through directly.
-  // When triggered by shouldOpenRef, use the deferred controlled open.
-  // Otherwise, use defaultOpen (uncontrolled).
-  const menuProps: Record<string, unknown> = {};
-  if (externalOpen !== undefined) {
-    menuProps.open = externalOpen;
-  } else if (shouldOpen.current) {
-    menuProps.open = deferredOpen;
-  } else if (defaultOpen !== undefined) {
-    menuProps.defaultOpen = defaultOpen;
-  }
-
-  return (
-    <Menu.Root
-      {...restProps}
-      {...menuProps}
-      onOpenChange={(isOpen, event) => {
-        onOpenChange?.(isOpen, event);
-        onMenuOpenChange(isOpen);
-        if (shouldOpen.current) setDeferredOpen(isOpen);
-      }}
-      onOpenChangeComplete={(isOpen) => {
-        onOpenChangeComplete?.(isOpen);
-        if (!isOpen && unmountOnClose) onDeactivate();
-      }}
-    >
-      {children}
-    </Menu.Root>
-  );
-}
-
-function Root({
-  children,
-  open,
-  defaultOpen,
-  disabled,
-  unmountOnClose = false,
-  onOpenChangeComplete,
-  ...props
-}: RootProps) {
-  const [wasActivated, setWasActivated] = useState(false);
-  const [menuOpen, setMenuOpen] = useState(false);
-  const shouldRefocusRef = useRef(false);
-  const shouldOpenRef = useRef(false);
-
-  // One-way latch: once true, stays true so leave animations can play.
-  // Controlled `open` or `defaultOpen` bypass the latch entirely.
-  // When unmountOnClose is true, the latch resets after close completes.
-  const activated = wasActivated || !!open || !!defaultOpen;
-
-  const activate = useCallback(() => {
-    if (!disabled) {
-      // If activation is from a click/keyboard (shouldOpenRef), the menu will
-      // open immediately — preemptively mark menuOpen so the tooltip is
-      // suppressed from the first render (no flicker).
-      if (shouldOpenRef.current) setMenuOpen(true);
-      setWasActivated(true);
+    if (open === undefined) return;
+    const store = useDropdownStore.getState();
+    if (open && !store.open) {
+      const content = contentRef.current;
+      const anchor = triggerRef.current;
+      if (content && anchor) {
+        store.openDropdown(content, anchor, { callbacks, menuConfig, positionConfig });
+      }
+    } else if (!open && store.open && store.anchor === triggerRef.current) {
+      store.closeDropdown();
     }
-  }, [disabled]);
+  }, [open]);
 
-  const deactivate = useCallback(() => {
-    setMenuOpen(false);
-    setWasActivated(false);
-  }, []);
-
-  const ctx: DeferredState = {
-    activated,
-    activate,
-    shouldRefocusRef,
-    shouldOpenRef,
-    menuOpen,
+  // defaultOpen: open on first render
+  useEffect(() => {
+    if (initializedRef.current || defaultOpen === undefined || !defaultOpen) return;
+    initializedRef.current = true;
+    // Defer to next frame so Portal has registered content and Trigger has mounted
+    requestAnimationFrame(() => {
+      const content = contentRef.current;
+      const anchor = triggerRef.current;
+      if (content && anchor) {
+        useDropdownStore.getState().openDropdown(content, anchor, { callbacks, menuConfig, positionConfig });
+      }
+    });
+  }, [defaultOpen]);
+
+  const ctx: DropdownContext = {
+    contentRef,
+    triggerRef,
+    disabled,
+    openOn,
+    callbacks,
+    menuConfig,
+    positionConfig,
   };
 
-  if (!activated) {
-    return (
-      <DeferredContext.Provider value={ctx}>
-        {children}
-      </DeferredContext.Provider>
-    );
-  }
-
   return (
-    <DeferredContext.Provider value={ctx}>
-      <InnerRoot
-        open={open}
-        defaultOpen={defaultOpen}
-        disabled={disabled}
-        shouldOpenRef={shouldOpenRef}
-        unmountOnClose={unmountOnClose}
-        onDeactivate={deactivate}
-        onMenuOpenChange={setMenuOpen}
-        onOpenChangeComplete={onOpenChangeComplete}
-        {...props}
-      >
-        {children}
-      </InnerRoot>
-    </DeferredContext.Provider>
+    <DropdownCtx.Provider value={ctx}>
+      {children}
+    </DropdownCtx.Provider>
   );
 }
 
 /* ------------------------------------------------------------------ */
-/*  Trigger — lightweight pre-activation, then Base UI                 */
+/*  Trigger — plain <button>, zero Base UI overhead                    */
 /* ------------------------------------------------------------------ */
 
-type TriggerProps = ComponentPropsWithoutRef<typeof Menu.Trigger> & {
-  /** Show a tooltip on hover. Accepts any ReactNode content. */
+type TriggerProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  children?: ReactNode;
+  /** Replace the default `<button>` with a custom element. */
+  render?: ReactElement | ((props: Record<string, unknown>) => ReactElement);
+  /** Tooltip content shown on hover/focus. Dismissed when the dropdown opens. */
   tooltip?: ReactNode;
+  /** Delay before opening the tooltip in ms. @default 600 */
+  tooltipDelay?: number;
 };
 
-// Base UI Trigger props that must not leak onto a raw <button>
-const BASE_UI_KEYS = new Set([
-  "handle",
-  "payload",
-  "delay",
-  "closeDelay",
-  "openOnHover",
-  "render",
-  "tooltip",
-]);
-
-function pickHtmlProps(props: Record<string, unknown>) {
-  const html: Record<string, unknown> = {};
-  for (const key in props) {
-    if (!BASE_UI_KEYS.has(key)) html[key] = props[key];
-  }
-  return html;
-}
-
-function Trigger({
-  children,
-  className,
-  style,
-  disabled,
-  tooltip,
-  ...rest
-}: TriggerProps) {
-  const deferred = useContext(DeferredContext);
-  const triggerElRef = useRef<HTMLButtonElement | null>(null);
-
-  // --- Tooltip latch (independent of dropdown latch) ---
-  const [tooltipActivated, setTooltipActivated] = useState(false);
-  const isHoveringRef = useRef(false);
-  const pendingRef = useRef(0);
-  const lastPointerTypeRef = useRef("");
+function Trigger({ children, onClick, onPointerDown, onPointerEnter, onPointerLeave, onFocus, onBlur, onKeyDown, render, tooltip, tooltipDelay = 600, ...props }: TriggerProps) {
+  const ctx = useContext(DropdownCtx);
+  const triggerRef = useRef<HTMLButtonElement | null>(null);
+  const openOn = ctx?.openOn ?? "click";
 
-  // Ref callback: stores the element AND restores focus when the DOM
-  // swaps from the pre-activation button to Base UI's Trigger.
-  const shouldRefocusRef = deferred?.shouldRefocusRef;
-  const triggerRef = useCallback(
+  // Register trigger element with Root for controlled/defaultOpen
+  const setTriggerRef = useCallback(
     (el: HTMLButtonElement | null) => {
-      triggerElRef.current = el;
-      if (shouldRefocusRef?.current && el) {
-        shouldRefocusRef.current = false;
-        el.focus();
-      }
+      triggerRef.current = el;
+      if (ctx) ctx.triggerRef.current = el;
     },
-    [shouldRefocusRef],
+    [ctx],
   );
+  const storeState = useDropdownStore((s) => ({
+    open: s.open,
+    anchor: s.anchor,
+  }));
+
+  // Is THIS trigger the one that opened the current dropdown?
+  const isActive = storeState.open && storeState.anchor === triggerRef.current;
+
+  /* ---- Tooltip integration ---- */
 
-  // After tooltip activation, dispatch synthetic events to kick-start
-  // Base UI's hover detection (same technique as Tooltip.tsx).
+  const tooltipOpenTimerRef = useRef(0);
+  const tooltipCloseTimerRef = useRef(0);
+  const lastPointerTypeRef = useRef("");
+
+  // Subscribe to tooltip store for aria-describedby
+  const tooltipState = useTooltipStore((s) => ({
+    open: s.open,
+    anchor: s.anchor,
+    popupId: s.popupId,
+  }));
+  const isTooltipActive = tooltip != null && tooltipState.open && tooltipState.anchor === triggerRef.current;
+
+  // Skip focus-triggered tooltip after dropdown close.
+  // DropdownRenderer restores focus via RAF; by that time the menu DOM is unmounted
+  // so relatedTarget is null/orphaned — we can't rely on DOM checks.
+  const wasActiveRef = useRef(false);
+  const skipFocusTooltipRef = useRef(false);
   useEffect(() => {
-    if (!tooltipActivated || !isHoveringRef.current) return;
-    const el = triggerElRef.current;
-    if (!el) return;
-    const frame = requestAnimationFrame(() => {
-      if (!isHoveringRef.current) return;
-      el.dispatchEvent(
-        new PointerEvent("pointerenter", {
-          bubbles: false,
-          pointerType: "mouse",
-        }),
-      );
-      el.dispatchEvent(new MouseEvent("mouseenter", { bubbles: false }));
-      el.dispatchEvent(new MouseEvent("mousemove", { bubbles: true }));
-    });
-    return () => cancelAnimationFrame(frame);
-  }, [tooltipActivated]);
-
-  // Tooltip hover handlers for pre-activation
-  const tooltipHoverHandlers = tooltip
-    ? {
-        onMouseEnter: () => {
-          if (lastPointerTypeRef.current === "touch") return;
-          isHoveringRef.current = true;
-          pendingRef.current = requestAnimationFrame(() => {
-            if (isHoveringRef.current) setTooltipActivated(true);
-          });
-        },
-        onMouseLeave: () => {
-          isHoveringRef.current = false;
-          cancelAnimationFrame(pendingRef.current);
-        },
-      }
-    : {};
-
-  // Force tooltip closed when the dropdown menu is open
-  const menuOpen = deferred?.menuOpen ?? false;
-
-  // Tooltip portal content (shared across states 2 and 4)
-  const tooltipPortal = !!tooltip ? (
-    <BaseTooltip.Portal>
-      <BaseTooltip.Positioner sideOffset={8}>
-        <BaseTooltip.Popup className="slithy-tooltip-popup">
-          {tooltip}
-        </BaseTooltip.Popup>
-      </BaseTooltip.Positioner>
-    </BaseTooltip.Portal>
-  ) : null;
-
-  // --- Pre-activation (dropdown not yet activated) ---
-  if (deferred && !deferred.activated) {
-    const { render: renderProp } = rest;
-    const htmlProps = pickHtmlProps(rest);
-    const callHandler = (handler: unknown, event: unknown) => {
-      if (typeof handler === "function") handler(event);
-    };
+    if (wasActiveRef.current && !isActive) {
+      skipFocusTooltipRef.current = true;
+      const id = requestAnimationFrame(() => {
+        skipFocusTooltipRef.current = false;
+      });
+      return () => cancelAnimationFrame(id);
+    }
+    wasActiveRef.current = isActive;
+  });
+
+  const dismissTooltip = useCallback(() => {
+    clearTimeout(tooltipOpenTimerRef.current);
+    clearTimeout(tooltipCloseTimerRef.current);
+    const ts = useTooltipStore.getState();
+    if (ts.open && ts.anchor === triggerRef.current) {
+      ts.closeTooltip({ skipWarmUp: true });
+    }
+  }, []);
 
-    const preProps = {
-      ...htmlProps,
-      ref: triggerRef,
-      className: typeof className === "function" ? undefined : className,
-      style: typeof style === "function" ? undefined : style,
-      disabled,
-      ...tooltipHoverHandlers,
-      // Activation strategy: mouse/pen uses onPointerDown for snappy
-      // desktop UX, matching Base UI's Menu.Trigger (which opens on
-      // mousedown). Touch skips onPointerDown and falls through to
-      // onClick instead, because Base UI's Menu.Trigger opens on
-      // touch-up timing on iOS — activating earlier would make the
-      // pre-activation and post-activation triggers feel inconsistent.
-      onPointerDown: (e: React.PointerEvent<HTMLButtonElement>) => {
-        callHandler(htmlProps.onPointerDown, e);
-        lastPointerTypeRef.current = e.pointerType;
-        if (e.button !== 0 || e.pointerType === "touch") return;
-        deferred.shouldOpenRef.current = true;
-        deferred.shouldRefocusRef.current = true;
-        deferred.activate();
-      },
-      onClick: (e: React.MouseEvent<HTMLButtonElement>) => {
-        callHandler(htmlProps.onClick, e);
-        deferred.shouldOpenRef.current = true;
-        deferred.shouldRefocusRef.current = true;
-        deferred.activate();
-      },
-      onKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>) => {
-        callHandler(htmlProps.onKeyDown, e);
-        if (
-          e.key === "Enter" ||
-          e.key === " " ||
-          e.key === "ArrowDown" ||
-          e.key === "ArrowUp"
-        ) {
-          deferred.shouldOpenRef.current = true;
-          deferred.shouldRefocusRef.current = true;
-          deferred.activate();
-        }
-      },
-    };
+  const scheduleTooltip = useCallback(() => {
+    if (!tooltip || !triggerRef.current) return;
+
+    // Don't show tooltip while any dropdown is open
+    const ds = useDropdownStore.getState();
+    if (ds.open) return;
+
+    clearTimeout(tooltipOpenTimerRef.current);
+    clearTimeout(tooltipCloseTimerRef.current);
+
+    const ts = useTooltipStore.getState();
+
+    // Already showing this tooltip
+    if (ts.open && ts.anchor === triggerRef.current) return;
+
+    const tooltipContent = <BaseTooltip.Popup className="slithy-tooltip-popup">{tooltip}</BaseTooltip.Popup>;
+
+    // Instant switch or warm-up
+    const isSwitch = ts.open && ts.anchor !== triggerRef.current;
+    const elapsed = Date.now() - ts.lastCloseTime;
+    const isWarmUp = !isSwitch && elapsed < 300;
+    const effectiveDelay = isSwitch || isWarmUp ? 0 : tooltipDelay;
 
-    let button: ReactElement;
-    if (isValidElement(renderProp)) {
-      button = cloneElement(renderProp, preProps, children) as ReactElement;
-    } else if (typeof renderProp === "function") {
-      button = renderProp({ ...preProps, children } as Parameters<typeof renderProp>[0], {} as Parameters<typeof renderProp>[1]);
+    if (effectiveDelay === 0) {
+      ts.openTooltip(tooltipContent, triggerRef.current!);
     } else {
-      button = <button {...preProps}>{children}</button>;
+      tooltipOpenTimerRef.current = window.setTimeout(() => {
+        // Re-check: a dropdown may have opened during the delay
+        const dds = useDropdownStore.getState();
+        if (dds.open) return;
+        if (triggerRef.current) {
+          const content = <BaseTooltip.Popup className="slithy-tooltip-popup">{tooltip}</BaseTooltip.Popup>;
+          useTooltipStore.getState().openTooltip(content, triggerRef.current);
+        }
+      }, effectiveDelay);
     }
+  }, [tooltip, tooltipDelay]);
+
+  const scheduleTooltipClose = useCallback(() => {
+    clearTimeout(tooltipOpenTimerRef.current);
+    const ts = useTooltipStore.getState();
+    if (!ts.open || ts.anchor !== triggerRef.current) return;
+    tooltipCloseTimerRef.current = window.setTimeout(() => {
+      const s = useTooltipStore.getState();
+      if (s.open && s.anchor === triggerRef.current) {
+        s.closeTooltip();
+      }
+    }, 300);
+  }, []);
 
-    // State 1: neither activated — plain button (or custom render)
-    if (!tooltip || !tooltipActivated) return button;
-
-    // State 2: tooltip activated, dropdown deferred
-    return (
-      <BaseTooltip.Provider>
-        <BaseTooltip.Root>
-          <BaseTooltip.Trigger render={button} />
-          {!menuOpen && tooltipPortal}
-        </BaseTooltip.Root>
-      </BaseTooltip.Provider>
-    );
-  }
+  // Clear timers on unmount
+  useEffect(() => {
+    return () => {
+      clearTimeout(tooltipOpenTimerRef.current);
+      clearTimeout(tooltipCloseTimerRef.current);
+    };
+  }, []);
 
-  // --- Post-activation (dropdown activated) ---
-  const menuTrigger = (
-    <Menu.Trigger
-      ref={triggerRef}
-      className={className}
-      style={style}
-      disabled={disabled}
-      {...rest}
-    >
-      {children}
-    </Menu.Trigger>
+  /* ---- Dropdown logic ---- */
+
+  const toggleDropdown = useCallback(
+    (options?: { keyboard?: boolean }) => {
+      if (ctx?.disabled) return;
+
+      // Dismiss tooltip when opening the dropdown
+      dismissTooltip();
+
+      const store = useDropdownStore.getState();
+
+      // Toggle: if this trigger's dropdown is open, close it
+      if (store.open && store.anchor === triggerRef.current) {
+        store.closeDropdown();
+        return;
+      }
+
+      // Open with registered content
+      const content = ctx?.contentRef.current;
+      if (content && triggerRef.current) {
+        store.openDropdown(content, triggerRef.current, {
+          keyboard: options?.keyboard,
+          callbacks: ctx?.callbacks,
+          menuConfig: ctx?.menuConfig,
+          positionConfig: ctx?.positionConfig,
+        });
+      }
+    },
+    [ctx, dismissTooltip],
   );
 
-  // State 3: dropdown activated, no tooltip
-  if (!tooltip) return menuTrigger;
+  const handlePointerDown = useCallback(
+    (e: React.PointerEvent<HTMLButtonElement>) => {
+      lastPointerTypeRef.current = e.pointerType;
+      onPointerDown?.(e);
+      if (e.defaultPrevented || openOn !== "pointerdown") return;
+      toggleDropdown();
+    },
+    [onPointerDown, openOn, toggleDropdown],
+  );
 
-  // State 4: dropdown activated + tooltip — full composition
-  return (
-    <BaseTooltip.Provider>
-      <BaseTooltip.Root>
-        <BaseTooltip.Trigger render={menuTrigger} />
-        {!menuOpen && tooltipPortal}
-      </BaseTooltip.Root>
-    </BaseTooltip.Provider>
+  const handleClick = useCallback(
+    (e: React.MouseEvent<HTMLButtonElement>) => {
+      onClick?.(e);
+      if (e.defaultPrevented) return;
+      if (openOn === "click") {
+        toggleDropdown();
+      }
+    },
+    [onClick, openOn, toggleDropdown],
+  );
+
+  const handlePointerEnter = useCallback(
+    (e: React.PointerEvent<HTMLButtonElement>) => {
+      onPointerEnter?.(e);
+      if (e.defaultPrevented) return;
+      if (lastPointerTypeRef.current === "touch") return;
+      scheduleTooltip();
+    },
+    [onPointerEnter, scheduleTooltip],
   );
+
+  const handlePointerLeave = useCallback(
+    (e: React.PointerEvent<HTMLButtonElement>) => {
+      onPointerLeave?.(e);
+      if (e.defaultPrevented) return;
+      scheduleTooltipClose();
+    },
+    [onPointerLeave, scheduleTooltipClose],
+  );
+
+  const handleFocus = useCallback(
+    (e: React.FocusEvent<HTMLButtonElement>) => {
+      onFocus?.(e);
+      if (e.defaultPrevented) return;
+      // Skip tooltip when focus returns from closing dropdown menu
+      if (skipFocusTooltipRef.current) {
+        skipFocusTooltipRef.current = false;
+        return;
+      }
+      if (lastPointerTypeRef.current === "touch") return;
+      scheduleTooltip();
+    },
+    [onFocus, scheduleTooltip],
+  );
+
+  const handleBlur = useCallback(
+    (e: React.FocusEvent<HTMLButtonElement>) => {
+      onBlur?.(e);
+      if (e.defaultPrevented) return;
+      dismissTooltip();
+    },
+    [onBlur, dismissTooltip],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLButtonElement>) => {
+      onKeyDown?.(e);
+      if (ctx?.disabled || e.defaultPrevented) return;
+
+      if (
+        e.key === "Enter" ||
+        e.key === " " ||
+        e.key === "ArrowDown" ||
+        e.key === "ArrowUp"
+      ) {
+        e.preventDefault();
+        toggleDropdown({ keyboard: true });
+      }
+    },
+    [ctx, onKeyDown, toggleDropdown],
+  );
+
+  const triggerProps = {
+    ref: setTriggerRef,
+    type: "button" as const,
+    "aria-haspopup": "menu" as const,
+    "aria-expanded": isActive,
+    "aria-describedby": isTooltipActive && tooltipState.popupId ? tooltipState.popupId : undefined,
+    onPointerDown: handlePointerDown,
+    onClick: handleClick,
+    onPointerEnter: handlePointerEnter,
+    onPointerLeave: handlePointerLeave,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onKeyDown: handleKeyDown,
+    ...props,
+  };
+
+  if (isValidElement(render)) {
+    return cloneElement(render, triggerProps, children) as ReactElement;
+  }
+  if (typeof render === "function") {
+    return render({ ...triggerProps, children });
+  }
+  return <button {...triggerProps}>{children}</button>;
 }
 
 /* ------------------------------------------------------------------ */
-/*  Portal — returns null pre-activation                               */
+/*  Portal — captures children, does not render them                   */
 /* ------------------------------------------------------------------ */
 
-type PortalProps = ComponentPropsWithoutRef<typeof Menu.Portal>;
+type PortalProps = {
+  children?: ReactNode;
+};
+
+function Portal({ children }: PortalProps) {
+  const ctx = useContext(DropdownCtx);
+  const storeAnchor = useDropdownStore((s) => s.anchor);
+
+  if (ctx) {
+    ctx.contentRef.current = children;
+  }
+
+  // If this dropdown is currently active, push content updates to the store
+  // so checkbox/radio state changes reflect immediately in the popup.
+  const isActive = !!(ctx && storeAnchor && storeAnchor === ctx.triggerRef.current);
+  useEffect(() => {
+    if (isActive) {
+      useDropdownStore.getState().updateContent(children);
+    }
+  });
 
-function Portal(props: PortalProps) {
-  const deferred = useContext(DeferredContext);
-  if (deferred && !deferred.activated) return null;
-  return <Menu.Portal {...props} />;
+  return null;
 }
 
 /* ------------------------------------------------------------------ */