{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"context-menu","type":"registry:ui","title":"Context Menu","description":"A menu that opens on right-click or long-press, with shortcuts, checkboxes, radio items and submenus.","dependencies":["radix-ui"],"registryDependencies":["https://dashral.com/r/utils.json","https://dashral.com/r/lib-portal.json","https://dashral.com/r/dropdown-menu.json"],"files":[{"path":"registry/dashral/context-menu.tsx","type":"registry:file","target":"components/dashral/context-menu.tsx","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { ContextMenu as ContextMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"./lib/utils\"\nimport { usePortalContainer } from \"./lib/portal\"\nimport { MenuItems, type MenuItem } from \"./dropdown-menu\"\n\n// A menu that opens on right-click (or a long press on touch screens, or Shift+F10 / the Menu key). Keep every action\n// in it reachable another way too — a toolbar button or a \"⋯\" menu — since nothing shows it's there.\n\nconst contentClass =\n  \"z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:zoom-in-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95\"\n\ntype ContextMenuProps = Omit<React.ComponentProps<typeof ContextMenuPrimitive.Root>, \"children\"> & {\n  /** The area that responds to right-click and long-press; it must take a ref. */\n  children: React.ReactElement\n  items: MenuItem[]\n  /** Your router's link, for items with href. */\n  linkAs?: React.ElementType\n  /** The menu panel's classes, e.g. a width. */\n  className?: string\n}\n\n/** A right-click menu over an area, in one tag: the same items as DropdownMenu. */\nfunction ContextMenu({ children, items, linkAs, className, ...props }: ContextMenuProps) {\n  const portalContainer = usePortalContainer()\n  return (\n    <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props}>\n      <ContextMenuPrimitive.Trigger asChild>{children}</ContextMenuPrimitive.Trigger>\n      <ContextMenuPrimitive.Portal container={portalContainer}>\n        <ContextMenuPrimitive.Content data-slot=\"context-menu-content\" className={cn(contentClass, className)}>\n          <MenuItems items={items} primitives={ContextMenuPrimitive} linkAs={linkAs} panelClass={contentClass} />\n        </ContextMenuPrimitive.Content>\n      </ContextMenuPrimitive.Portal>\n    </ContextMenuPrimitive.Root>\n  )\n}\n\nexport { ContextMenu, type ContextMenuProps }\n"}]}