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:T389f,'use client'; import { DropdownMenu as DropdownMenuPrimitive } from 'radix-ui'; import { CheckIcon, ChevronRightIcon, DotIcon } from '@velobitsio/icons'; import { cn } from '@/lib/utils'; /** * Radix DropdownMenu on the glass overlay tier , the kebab/actions menu every * table row and topbar in these dashboards reaches for. * * ───────────────────────────────────────────────────────────────────────────── * THREE REFUSALS THIS COMPONENT TREATS AS RULES, NOT PREFERENCES. All three were * paid for once already. * * ## 1. Highlight styling is `data-[highlighted]`, never `:hover` * * Radix funnels the pointer path and the keyboard path into ONE thing. On * `pointermove` it calls `item.focus()`; arrow keys move focus through the * roving-focus group; and `MenuItemImpl` mirrors that focus state onto * `data-highlighted`. So the attribute is the single hook that covers both. * * Style `hover:bg-*` instead and the menu looks perfect with a mouse and is * completely invisible to the keyboard: the arrows still work, the attribute * still flips, nothing appears to move, and the user has no idea what Enter will * activate. That is the regression that actually shipped once. If you ever see a * `hover:` on a menu item below, it is a bug, not a preference. * * Consumers' suites assert on `data-highlighted` too, so this is also a * published contract rather than an internal detail. * * ## 2. A DropdownMenu CANNOT host a text input. Do not retry this. * * A filter/search field inside the menu loses focus on the first keystroke: the * content's focus management pulls focus back to the item list, and typing is * additionally swallowed by Radix's typeahead. The only lever that would hold * focus is `onOpenAutoFocus` , which is a **private, unsupported escape hatch on * this primitive** and is not part of its public contract, so building on it is * building on something that can vanish in a patch release. * * → Need a filterable list? Use a **Dialog** (or `CommandPalette`, which is a * Dialog underneath) or a **Popover**. Both are designed to contain focus * rather than manage it, so an input inside them behaves normally. * * This is the same conclusion the dashboard app reached when it tried to put an * environment filter in a DropdownMenu and shipped a Dialog instead. * * ## 3. Testing: `keyDown Enter`, not `click` , and Playwright cannot do it * * Modal menu content wraps itself in a `DismissableLayer` with * `disableOutsidePointerEvents`, which sets `pointer-events: none` on * `document.body`. `userEvent` v14 refuses to click anything that inherits that * and THROWS ("unable to perform pointer interaction as the element has * `pointer-events: none`") rather than failing an assertion , so the failure does * not look like a menu problem at all. * * Drive items with `fireEvent.keyDown(item, { key: 'Enter' })`, which is also * closer to how a menu is actually operated. (Radix's own handler responds to * Enter/Space by calling `currentTarget.click()`, so `onSelect` fires exactly as * it would for a real user.) * * Playwright cannot reliably click these either: the content is portalled to * `document.body` outside the trigger's subtree, and Radix's dismiss layer * intercepts the pointer sequence Playwright synthesises. Assert menu behaviour * in unit tests; in e2e, assert only that the menu opened. * ───────────────────────────────────────────────────────────────────────────── * * ## Layering * * The content sits at `z-dropdown` (1000), which is above `z-sticky` (100). A * sticky topbar raised to 1100 "to be safe" swallows its own menu , see the * z-ladder note in `@velobitsio/tokens/theme.css`. * * Submenus use `glass glass-elevated`, the plum-tinted tier, because a plain * glass panel over another plain glass panel composites to a single indistinct * smear. That is also why the tier exists. */ function DropdownMenu({ ...props }: React.ComponentProps) { return ; } function DropdownMenuPortal({ ...props }: React.ComponentProps) { return ; } function DropdownMenuTrigger({ ...props }: React.ComponentProps) { return ; } /** * Enter/exit animate `opacity` and `transform` only. Never add a blur-radius * transition here: `backdrop-filter` re-rasterises the whole backdrop on every * frame, and a 240ms blur tween on a menu is a measurable jank source on the * tables these menus hang off. */ function DropdownMenuContent({ className, sideOffset = 6, ...props }: React.ComponentProps) { return ( ); } function DropdownMenuGroup({ ...props }: React.ComponentProps) { return ; } /** * Shared by Item, CheckboxItem, RadioItem and SubTrigger so the highlight can * only ever be defined in one place. * * `data-[highlighted]` , see refusal 1 in the file docblock. `bg-highlight` is * `--highlight`, the system's one hover/active surface, so a menu row and a * table row highlight identically. */ const menuItemBase = [ 'relative flex w-full cursor-default items-center gap-2 rounded-sm px-2 py-1.5 outline-none', 'select-none', 'data-[highlighted]:bg-highlight data-[highlighted]:text-fg', 'data-[disabled]:pointer-events-none data-[disabled]:opacity-50', '[&>svg]:pointer-events-none [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-muted-foreground', 'data-[highlighted]:[&>svg]:text-fg', ]; export interface DropdownMenuItemProps extends React.ComponentProps< typeof DropdownMenuPrimitive.Item > { /** Destructive actions , delete, revoke, archive. */ variant?: 'default' | 'danger'; /** Aligns the label with the checkbox/radio items in a mixed menu. */ inset?: boolean; } /** * `variant` rides a `data-variant` attribute rather than a class branch so the * danger styling composes with `data-[highlighted]` in one selector , the * highlighted state of a destructive row needs its own pairing (`bg-danger-soft` * with `text-danger`), not the neutral highlight with red text on top of it. */ function DropdownMenuItem({ className, variant = 'default', inset = false, ...props }: DropdownMenuItemProps) { return ( svg]:text-danger', className, )} {...props} /> ); } /** * The indicator is absolutely positioned in a reserved inline-start gutter * (`ps-8` + `start-2`), both logical, so nothing has to be mirrored for RTL. * Radix keeps `aria-checked` in sync on the `menuitemcheckbox` role; the tick is * only the visible half of that. */ function DropdownMenuCheckboxItem({ className, children, checked, ...props }: React.ComponentProps) { return ( {children} ); } function DropdownMenuRadioGroup({ ...props }: React.ComponentProps) { return ; } function DropdownMenuRadioItem({ className, children, ...props }: React.ComponentProps) { return ( {children} ); } export interface DropdownMenuLabelProps extends React.ComponentProps< typeof DropdownMenuPrimitive.Label > { inset?: boolean; } function DropdownMenuLabel({ className, inset = false, ...props }: DropdownMenuLabelProps) { return ( ); } function DropdownMenuSeparator({ className, ...props }: React.ComponentProps) { return ( ); } /** * `⌘K` versus `Ctrl+K` is the caller's decision, exactly as in `Kbd` , deciding * it here would make the component render differently on server and client and * produce a hydration mismatch. * * `ms-auto`, not `ml-auto`: the shortcut belongs at the inline END of the row, * which is the left edge under `dir="rtl"`. */ function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<'span'>) { return ( ); } function DropdownMenuSub({ ...props }: React.ComponentProps) { return ; } export interface DropdownMenuSubTriggerProps extends React.ComponentProps< typeof DropdownMenuPrimitive.SubTrigger > { inset?: boolean; } /** * The chevron gets `rtl:rotate-180` because a rotation is not a logical * property: under `dir="rtl"` the submenu opens to the LEFT, and an unrotated * right-pointing chevron then points away from the thing it opens. */ function DropdownMenuSubTrigger({ className, inset = false, children, ...props }: DropdownMenuSubTriggerProps) { return ( {children} ); } function DropdownMenuSubContent({ className, ...props }: React.ComponentProps) { return ( ); } export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, }; 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","radix-ui",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/radix-ui","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":"radix-ui"}]]}]}],["$","li","@velobitsio/icons",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40velobitsio%2Ficons","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":"@velobitsio/icons"}]]}]}]]}],["$","$L51",null,{"namespace":"@velobits","registryDependencies":["https://ui.velobits.dev/r/cn.json","https://ui.velobits.dev/r/velobits-theme.json"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/velobits/ui/dropdown-menu.tsx","content":"$53","type":"registry:ui","target":"@ui/velobits/dropdown-menu.tsx"}],"className":"h-[70svh] min-h-80"}]]}]