4d: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4e: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4f:T46e5,"use client"; import { Menu as MenuPrimitive } from "@base-ui/react/menu"; import { CheckmarkRegular, ChevronRightRegular } from "@fluentui/react-icons"; import type { ComponentProps } from "react"; import { cn } from "@/lib/utils"; /** * DropdownMenu — Fluent 2-styled, shadcn-API dropdown menu. * * Second overlay component in the kit, so it deliberately reuses every pattern * `select.tsx` established (portal + positioner + popup surface, `shadow-16` * flyout elevation, 32px `data-highlighted` item rows, scale+fade motion via * `data-starting-style`/`data-ending-style`). Its popup surface and item rows * are visually identical to Select's — same tokens, same radii. * * ## Base UI mapping (conventions §9) * Behavior — focus management, portalling, open/close state, roving tabindex, * type-ahead, collision-aware positioning, submenu orchestration — genuinely * needs a primitive, so the parts wrap `@base-ui/react/menu` (namespace import, * matching the actual export shape in node_modules, exactly like `select.tsx`). * shadcn part names are mapped onto Base UI's model: * * | Exported (shadcn name) | Base UI primitive | * | -------------------------- | ------------------------------------------------------ | * | `DropdownMenu` | `Menu.Root` | * | `DropdownMenuTrigger` | `Menu.Trigger` | * | `DropdownMenuContent` | `Menu.Portal` + `Menu.Positioner` + `Menu.Popup` | * | `DropdownMenuGroup` | `Menu.Group` | * | `DropdownMenuLabel` | `Menu.GroupLabel` ← see divergence 1 | * | `DropdownMenuItem` | `Menu.Item` | * | `DropdownMenuCheckboxItem` | `Menu.CheckboxItem` (+ `Menu.CheckboxItemIndicator`) | * | `DropdownMenuRadioGroup` | `Menu.RadioGroup` | * | `DropdownMenuRadioItem` | `Menu.RadioItem` (+ `Menu.RadioItemIndicator`) | * | `DropdownMenuSeparator` | `Menu.Separator` | * | `DropdownMenuShortcut` | plain `` (no Base UI part) ← see divergence 4 | * | `DropdownMenuSub` | `Menu.SubmenuRoot` ← see divergence 2 | * | `DropdownMenuSubTrigger` | `Menu.SubmenuTrigger` (+ `ChevronRightRegular`) | * | `DropdownMenuSubContent` | `Menu.Portal` + `Menu.Positioner` + `Menu.Popup` | * * ## Divergences from the shadcn/Radix DropdownMenu API (all deliberate) * 1. **`DropdownMenuLabel` maps to Base UI `Menu.GroupLabel`.** Like `select.tsx`, * the label part is the heading *inside* a `DropdownMenuGroup` (Base UI * associates it with the group for screen readers). It is styled to match * `SelectLabel` (muted `text-xs` caption) rather than shadcn's darker * `text-sm`, keeping every group heading in the kit visually consistent. It * still honours shadcn's `inset` prop (`data-[inset]:pl-8`). * 2. **`DropdownMenuSub` is Base UI `Menu.SubmenuRoot`, not a Radix `Sub`.** Base * UI models a submenu as its own nested root; `DropdownMenuSubContent` * therefore re-composes `Portal` → `Positioner` → `Popup` (Radix's * `SubContent` is a single part). Submenus open to the side and Base UI * positions them collision-aware; the trigger stays highlighted while its * submenu is open via `data-[popup-open]`. * 3. **Composition uses Base UI's `render` prop, not `asChild`.** shadcn's * `` has no analogue here — Base UI parts take a * `render` prop for polymorphism. To use the kit `Button` as the trigger, * pass `render={}`. The wrapper forwards `render` straight * through, so the honest Base UI model is preserved (same reasoning as * `select.tsx` keeping `SelectValue`'s render-function child). * 4. **`DropdownMenuShortcut` is a plain ``** (shadcn parity — it is not a * Base UI part, just a right-aligned muted caption for a keyboard hint). * 5. **`DropdownMenuItem` keeps shadcn's `inset` + `variant` props.** `variant` * is surfaced as `data-variant` (mirrors `Button`'s `data-variant` hook); the * `"destructive"` value tints the row and its icons with the `destructive` * token (never a hardcoded red), and its highlight uses `destructive/10` * (`/20` in dark) so the destructive intent survives the hover state. * * ## `"use client"` — required (same root cause as `select.tsx`) * Every Base UI Menu part module carries its own `'use client'`, so on that * basis this wrapper could stay server-renderable. But `CheckmarkRegular` / * `ChevronRightRegular` from `@fluentui/react-icons` force the directive: the * package's shared icon-sizing module (`createFluentIcon.styles.js`) calls * `@griffel/react`'s `__styles()` at module scope *without* its own * `'use client'`, even though `__styles` is client-only. Rendering any of these * icons from a Server Component pulls that module into the server's RSC graph, * and `next build` (Turbopack) fails collecting page data with "Attempted to * call __styles() from the server but __styles is on the client" — reproduced * against `@fluentui/react-icons@2.0.333` / `@griffel/react@1.7.5`, and it * poisons every route sharing Turbopack's chunk for those icons. `"use client"` * here keeps the icon imports inside a client boundary. `select.tsx` and * `checkbox.tsx` carry the same fix (their doc comments explain it inline). * * ## data-slot note * `DropdownMenu` (Root) and `DropdownMenuSub` (SubmenuRoot) render no DOM element * of their own, so they carry no `data-slot`. Every part that renders an element * does — `dropdown-menu-trigger`, `dropdown-menu-content`, `dropdown-menu-item`, * etc. — which is what tests/consumers hook onto. */ function DropdownMenu(props: MenuPrimitive.Root.Props) { return ; } function DropdownMenuTrigger({ className, ...props }: ComponentProps) { return ( ); } function DropdownMenuGroup({ className, ...props }: ComponentProps) { return ( ); } /** * Content — the floating flyout: `Portal` → `Positioner` → `Popup`. Surface is * `bg-popover` + `border` + `shadow-16` (Fluent flyout elevation, conventions * §3.6), `rounded-md`, `min-w-[8rem]` (menus size to content, unlike Select * which matches the anchor width). A subtle scale+fade open/close animation * rides Base UI's `data-starting-style`/`data-ending-style` hooks with token * durations/easings — the exact lines from `SelectContent`. */ function DropdownMenuContent({ className, sideOffset = 4, align = "start", side = "bottom", ...props }: ComponentProps & Pick< ComponentProps, "side" | "align" | "sideOffset" >) { return ( ); } /** * Label — a heading for a `DropdownMenuGroup` (Base UI `Menu.GroupLabel`, see * divergence 1). Small muted caption, matched to `SelectLabel`. `inset` shifts * it to line up with items that carry a leading indicator. */ function DropdownMenuLabel({ className, inset, ...props }: ComponentProps & { inset?: boolean }) { return ( ); } /** * Item — one command row. 32px tall (`h-8`) with the Fluent 4px list radius, * matching `SelectItem`. Highlight (keyboard focus or hover) rides Base UI's * `data-highlighted` → `bg-accent`/`text-accent-foreground`. `inset` adds the * leading gutter used by checkbox/radio rows; `variant="destructive"` tints the * text/icons with the `destructive` token and gives the highlight a destructive * wash. Icons follow `SelectItem`'s size-only rules (no muting). */ function DropdownMenuItem({ className, inset, variant = "default", ...props }: ComponentProps & { inset?: boolean; variant?: "default" | "destructive"; }) { return ( ); } /** * CheckboxItem — a toggleable row. The check (`CheckmarkRegular`) sits in a * left gutter (`pl-8`), inside `Menu.CheckboxItemIndicator`, which Base UI only * mounts while checked. Base UI keeps the menu open on toggle (its * `closeOnClick` defaults to `false` for checkbox items). */ function DropdownMenuCheckboxItem({ className, children, checked, ...props }: ComponentProps) { return ( {children} ); } function DropdownMenuRadioGroup({ className, ...props }: ComponentProps) { return ( ); } /** * RadioItem — one option in a `DropdownMenuRadioGroup`. The selected marker is a * small filled circle (an inline ` {children} ); } function DropdownMenuSeparator({ className, ...props }: ComponentProps) { return ( ); } /** * Shortcut — a right-aligned keyboard hint caption. Plain `` (divergence * 4), shadcn parity: `ml-auto text-xs tracking-widest text-muted-foreground`. */ function DropdownMenuShortcut({ className, ...props }: ComponentProps<"span">) { return ( ); } function DropdownMenuSub(props: MenuPrimitive.SubmenuRoot.Props) { return ; } /** * SubTrigger — an item that opens a submenu, with a trailing `ChevronRightRegular`. * Same row treatment as `DropdownMenuItem`; stays highlighted while its submenu * is open via Base UI's `data-[popup-open]`. Honours `inset`. */ function DropdownMenuSubTrigger({ className, inset, children, ...props }: ComponentProps & { inset?: boolean }) { return ( {children} ); } /** * SubContent — a submenu's floating surface. Same `Portal` → `Positioner` → * `Popup` composition and surface as `DropdownMenuContent`, but defaults to * opening on the inline-end side (Base UI still flips it collision-aware). */ function DropdownMenuSubContent({ className, sideOffset = 4, align = "start", ...props }: ComponentProps & Pick< ComponentProps, "side" | "align" | "sideOffset" >) { return ( ); } export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, }; 4c:["$","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","@fluentui/react-icons",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40fluentui%2Freact-icons","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":"@fluentui/react-icons"}]]}]}]]}],["$","$L4d",null,{"namespace":"@fluent2-react-kit","registryDependencies":["https://fluent2-react-kit.graund.io/r/utils.json"]}]]}],null]}],["$","$L4e",null,{"files":[{"path":"components/ui/dropdown-menu.tsx","content":"$4f","type":"registry:ui","target":"components/ui/dropdown-menu.tsx"}],"className":"h-[70svh] min-h-80"}]]}]