51:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T5690,"use client" import * as React from "react" import { Menu as BaseMenu } from "@base-ui/react/menu" import { motion } from "motion/react" import { Check, ChevronLeft, ChevronRight, Circle } from "lucide-react" import { cn } from "@/lib/utils" import { condense, drill, fades, reduced, springs, useReducedMotion, } from "@/lib/motion" import { useHaptics } from "@/lib/haptics" // Shared item shape so Item / CheckboxItem / RadioItem / SubTrigger stay in sync. const menuItemClass = "relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0" /* ──────────────────────────────────────────────────────────────────────────── * Nested menus drill *into* the popup instead of flying out beside it. * * A submenu doesn't open a second surface anchored to its trigger; it replaces * the level below it inside the one popup, which springs to the new level's * size. Depth is unlimited and costs no horizontal room — the reason to do it * this way — and it behaves the same on a phone as on a wide desktop. * * The whole thing is one piece of state: `path`, the list of submenus you've * opened. The panel at `depth === path.length` is the one on screen. Levels * you've drilled past stay mounted and hidden (see `useParked` — it's what * keeps their uncontrolled state alive); levels off the open path aren't * mounted at all, exactly like a closed flyout submenu. * * **Only the visible level's items are ever rendered**, and that is * load-bearing, not cosmetic. Base UI's Menu is a composite: it registers items * by DOM node and roves focus across them, skipping any that `checkVisibility()` * says aren't rendered. So a level that lingered *visibly* to animate out would * be a level whose items still answer to the arrow keys — which is why the * outgoing level goes the instant the path changes, and the incoming level * carries the transition on its own (see `drill` in @/lib/motion). * ──────────────────────────────────────────────────────────────────────────── */ type DropdownLevel = { id: string /** What the level's back row is labelled with — the sub-trigger's content. */ label: React.ReactNode } type DropdownNav = { path: DropdownLevel[] /** 1 drilling in, -1 stepping back — which way the incoming level slides. */ direction: 1 | -1 /** False until the first drill of this open, so the root level never slides * in behind the popup's own entrance. */ navigated: boolean /** After stepping back, the sub whose trigger focus should return to. */ returnTo?: string } const AT_ROOT: DropdownNav = { path: [], direction: 1, navigated: false } const DropdownNavContext = React.createContext< | (DropdownNav & { push: (level: DropdownLevel) => void pop: () => void }) | null >(null) function useDropdownNav() { const nav = React.useContext(DropdownNavContext) if (!nav) { throw new Error( "seamui: dropdown menu parts must be used inside " ) } return nav } /** The level a part is rendered into, and whether that level is the visible one. */ const DropdownPanelContext = React.createContext<{ depth: number active: boolean }>({ depth: 0, active: true }) /** How the viewport finds the level it should be sized to. */ const ACTIVE_PANEL = '[data-slot="dropdown-menu-panel"][data-active]' /** * Parts on a level you've drilled past render hidden rather than not at all. * * Unmounting them would be simpler, but it throws away any uncontrolled state * they hold: a `defaultChecked` checkbox or a `defaultValue` radio group would * silently reset every time you drilled past its level and came back. A flyout * submenu never did that — the level underneath stayed mounted — so neither * should this. * * Hiding keeps the state and still keeps the parts out of the keyboard's way: * Base UI's list navigation runs `checkVisibility()` over the items it has * registered and skips the ones that aren't rendered. Comes last in `cn` so it * wins the display conflict against `flex` (and anything a caller passed). * * Levels *not* on the open path stay unmounted — that's a closed submenu, and * it dropped its uncontrolled state before this change too. */ function useParked(): string | undefined { const { active } = React.useContext(DropdownPanelContext) return active ? undefined : "hidden" } const DropdownSubContext = React.createContext<{ id: string } | null>(null) function DropdownMenu({ onOpenChange, onOpenChangeComplete, ...props }: React.ComponentProps) { const [nav, setNav] = React.useState(AT_ROOT) // Base UI holds onto its open-change handler, so read the path off a ref // rather than the closure to decide what Escape means. const navRef = React.useRef(nav) navRef.current = nav const push = React.useCallback((level: DropdownLevel) => { setNav((prev) => ({ path: [...prev.path, level], direction: 1, navigated: true, })) }, []) const pop = React.useCallback(() => { setNav((prev) => ({ path: prev.path.slice(0, -1), direction: -1, navigated: true, returnTo: prev.path.at(-1)?.id, })) }, []) const value = React.useMemo(() => ({ ...nav, push, pop }), [nav, push, pop]) return ( { // Escape inside a nested level steps back one level instead of // dismissing everything — what a flyout submenu would have done. if ( !open && details.reason === "escape-key" && navRef.current.path.length > 0 ) { details.cancel() pop() return } onOpenChange?.(open, details) }} onOpenChangeComplete={(open) => { // Back to the root level only once the popup has finished leaving, so // reopening never flashes the level the user drilled into. if (!open) setNav(AT_ROOT) onOpenChangeComplete?.(open) }} {...props} /> ) } function DropdownMenuTrigger( props: React.ComponentProps ) { return } /** * The clipping box every level is drawn into. Springs between the size of the * level you left and the size of the one you entered, so the popup grows and * shrinks around the content instead of jumping. */ function DropdownMenuViewport({ children }: { children?: React.ReactNode }) { const { path, navigated, returnTo } = useDropdownNav() const reduceMotion = useReducedMotion() ?? false const viewportRef = React.useRef(null) const [size, setSize] = React.useState<{ width: number height: number } | null>(null) // The visible level is found in the DOM rather than handed over by a ref. // The root level's element never unmounts — it only stops being active — so a // ref on it isn't re-attached when you step back into it, and the viewport // would keep the size of the level you just left. `data-active` is always // right by the time layout effects run. const measure = React.useCallback(() => { const viewport = viewportRef.current const panel = viewport?.querySelector(ACTIVE_PANEL) if (!viewport || !panel) return // Read the level at its *natural* size. The panel stretches to the viewport // (`min-w-full`), so measuring while the viewport still holds the previous // level's width would floor every level at the widest one before it — // releasing the inline size is what lets a level get narrower. The restore // happens in the same layout pass, so nothing paints at the released size. const { width, height } = viewport.style viewport.style.width = "auto" viewport.style.height = "auto" const next = { width: panel.offsetWidth, height: panel.offsetHeight } viewport.style.width = width viewport.style.height = height setSize((prev) => prev && prev.width === next.width && prev.height === next.height ? prev : next ) }, []) // Re-measure whenever the level changes, and keep up with content that // changes *within* a level too — a checkbox row gaining an indicator, an // async label landing. React.useLayoutEffect(() => { measure() const panel = viewportRef.current?.querySelector(ACTIVE_PANEL) if (!panel || typeof ResizeObserver === "undefined") return const observer = new ResizeObserver(measure) observer.observe(panel) return () => observer.disconnect() }, [measure, path]) // Move focus onto the level a drill lands on. Base UI does this itself when // items *mount*, but levels here are hidden rather than unmounted, so nothing // moves and focus would sit on the popup — a keyboard user would drill in and // see no highlight at all. Skipped before the first drill, where Base UI's own // open focus is correct. // // Stepping back returns to the trigger you left through, like a flyout // submenu closing. Drilling in lands on the back row: it is the level's first // row, and it announces which level you just entered. React.useEffect(() => { if (!navigated) return const panel = viewportRef.current?.querySelector(ACTIVE_PANEL) if (!panel) return const restored = returnTo ? panel.querySelector( `[data-sub-id="${CSS.escape(returnTo)}"]` ) : null ;( restored ?? panel.querySelector('[role^="menuitem"]') )?.focus() }, [navigated, path, returnTo]) return ( {children} ) } /** * One level of the menu. A level you've drilled *past* stays mounted as a * `display: contents` wrapper — it draws nothing and lays nothing out, but it * keeps the branch holding the visible level in place. * * That the wrapper never changes element type is deliberate. Swapping it for a * fragment when the level goes off screen remounts everything under it, and a * remounted `DropdownMenuSub` gets a fresh `useId` — the level you just opened * would stop recognising its own entry in `path` and vanish. Levels move * between visible and parked; they don't come and go. * * So the entrance is expressed as a target rather than a mount: parked levels * sit at `drill.enter(-1)` (off to the left, where you left them) and animate to * `drill.settle` when they come back. Levels *deeper* than the current one * aren't mounted at all, so those do enter on mount, from the right. */ function DropdownMenuPanel({ depth, className, children, }: { depth: number className?: string children?: React.ReactNode }) { const { path, direction, navigated } = useDropdownNav() const reduceMotion = useReducedMotion() ?? false const active = depth === path.length const value = React.useMemo(() => ({ depth, active }), [depth, active]) return ( {children} ) } function DropdownMenuContent({ className, sideOffset = 6, align = "start", onKeyDown, children, ...props }: React.ComponentProps & { sideOffset?: number align?: "start" | "center" | "end" }) { const { path, pop } = useDropdownNav() return ( { onKeyDown?.(event) if (event.defaultPrevented) return // ArrowLeft steps back out of a level, mirroring how it closes a // flyout submenu. if (event.key === "ArrowLeft" && path.length > 0) { event.preventDefault() pop() } }} {...props} > {children} ) } function DropdownMenuItem({ className, ...props }: React.ComponentProps) { const parked = useParked() return ( ) } function DropdownMenuGroup({ children, ...props }: React.ComponentProps) { // Not hidden when parked, unlike the parts inside it: a group can contain the // sub whose level is on screen, and hiding it would hide that too. Its own // items hide themselves. return ( {children} ) } // A plain styled label so it works standalone in the menu (matching the // shadcn API). Base UI's Menu.GroupLabel requires a wrapping Menu.Group and // throws otherwise; use DropdownMenuGroup when you want a labelled group. function DropdownMenuLabel({ className, ...props }: React.ComponentProps<"div">) { const parked = useParked() return (

) } function DropdownMenuSeparator({ className, ...props }: React.ComponentProps) { const parked = useParked() return ( ) } function DropdownMenuCheckboxItem({ className, children, onCheckedChange, ...props }: React.ComponentProps) { // Toggling a checkbox item commits state — fire the seam tick (§3b). const { trigger } = useHaptics() const parked = useParked() return ( > ) => { trigger("tick") onCheckedChange?.(...args) }} {...props} > {children} ) } function DropdownMenuRadioGroup({ onValueChange, children, ...props }: React.ComponentProps) { // Selecting a different radio item commits state — fire the seam tick (§3b). const { trigger } = useHaptics() // Never swapped out or hidden when parked: unmounting it would drop an // uncontrolled `defaultValue`, and hiding it would hide a sub nested inside // it. Its items hide themselves. return ( > ) => { trigger("tick") onValueChange?.(...args) }} {...props} > {children} ) } function DropdownMenuRadioItem({ className, children, ...props }: React.ComponentProps) { const parked = useParked() return ( {children} ) } /** * Groups a nested level with the row that opens it. Nests to any depth — a * `DropdownMenuSub` inside a `DropdownMenuSubContent` is just the next level. */ function DropdownMenuSub({ children }: { children?: React.ReactNode }) { const id = React.useId() const value = React.useMemo(() => ({ id }), [id]) return ( {children} ) } function DropdownMenuSubTrigger({ className, children, heading, onClick, onKeyDown, ...props }: React.ComponentProps & { /** Overrides what the nested level's back row is labelled with. */ heading?: React.ReactNode }) { const sub = React.useContext(DropdownSubContext) const { push } = useDropdownNav() const { trigger } = useHaptics() const parked = useParked() if (!sub) return null const drillIn = () => { trigger("tap") push({ id: sub.id, label: heading ?? children }) } return ( { onClick?.(event) drillIn() }} onKeyDown={(event) => { onKeyDown?.(event) if (event.defaultPrevented) return if (event.key === "ArrowRight") { event.preventDefault() drillIn() } }} {...props} > {children} ) } /** The row that returns to the level below. Part of the roving focus order, so * it's reachable by arrow keys as well as by ArrowLeft and Escape. */ function DropdownMenuBack({ children }: { children?: React.ReactNode }) { const { pop } = useDropdownNav() const { trigger } = useHaptics() const parked = useParked() return ( { trigger("tap") pop() }} > {children} ) } function DropdownMenuSubContent({ className, children, }: { className?: string children?: React.ReactNode }) { const sub = React.useContext(DropdownSubContext) const { depth } = React.useContext(DropdownPanelContext) const { path } = useDropdownNav() // Mount only on the open path — one level per depth, and nothing below the // one on screen. const level = path[depth] if (!sub || level?.id !== sub.id) return null return ( {level.label} {children} ) } function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">) { return ( ) } export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, DropdownMenuShortcut, } 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@base-ui/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@base-ui/react"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L51",null,{"namespace":"@seamui","registryDependencies":["https://seamui.dev/r/utils.json","https://seamui.dev/r/motion.json","https://seamui.dev/r/haptics.json"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/seam/ui/dropdown-menu.tsx","content":"$53","type":"registry:ui","target":"components/ui/dropdown-menu.tsx"}],"className":"h-[70svh] min-h-80"}]]}]