{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "context-menu",
"title": "Context Menu",
"description": "A menu of actions triggered by a right click, built on Base UI.",
"dependencies": [
"@base-ui/react",
"lucide-react"
],
"registryDependencies": [
"utils"
],
"files": [
{
"path": "registry/base/ui/context-menu.tsx",
"content": "\"use client\"\n\nimport { ContextMenu as ContextMenuPrimitive } from \"@base-ui/react/context-menu\"\nimport { DirectionProvider } from \"@base-ui/react/direction-provider\"\nimport { CheckIcon, ChevronRightIcon } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/**\n * ContextMenuContent renders through a Portal, so it doesn't inherit `dir`\n * from a nearby wrapper (only from document.documentElement).\n * ContextMenuTrigger measures the ambient direction where it's actually\n * rendered and pushes it here so ContextMenuContent can apply it explicitly\n * to the portaled popup.\n *\n * The DOM `dir` attribute alone isn't enough: Base UI resolves logical\n * `side=\"inline-end\"` values through its own internal DirectionContext, not\n * from CSS/DOM `dir`, so the tree is also wrapped in Base UI's own\n * DirectionProvider — otherwise the menu (and its submenus) always open as\n * if LTR.\n */\nconst ContextMenuDirContext = React.createContext<{\n dir: \"ltr\" | \"rtl\"\n setDir: (dir: \"ltr\" | \"rtl\") => void\n}>({ dir: \"ltr\", setDir: () => {} })\n\nfunction ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) {\n const [dir, setDir] = React.useState<\"ltr\" | \"rtl\">(\"ltr\")\n const contextValue = React.useMemo(() => ({ dir, setDir }), [dir])\n\n return (\n \n \n \n \n \n )\n}\n\nfunction ContextMenuPortal({ ...props }: ContextMenuPrimitive.Portal.Props) {\n return (\n \n )\n}\n\nfunction ContextMenuTrigger({\n className,\n ...props\n}: ContextMenuPrimitive.Trigger.Props) {\n const ref = React.useRef(null)\n const { setDir } = React.useContext(ContextMenuDirContext)\n\n React.useEffect(() => {\n function update() {\n if (!ref.current) return\n setDir(getComputedStyle(ref.current).direction === \"rtl\" ? \"rtl\" : \"ltr\")\n }\n\n update()\n\n const observer = new MutationObserver(update)\n observer.observe(document.documentElement, {\n attributes: true,\n attributeFilter: [\"dir\"],\n subtree: true,\n })\n\n return () => observer.disconnect()\n }, [setDir])\n\n return (\n \n )\n}\n\nfunction ContextMenuContent({\n className,\n align = \"start\",\n alignOffset = 4,\n side = \"inline-end\",\n sideOffset = 0,\n ...props\n}: ContextMenuPrimitive.Popup.Props &\n Pick<\n ContextMenuPrimitive.Positioner.Props,\n \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n >) {\n const { dir } = React.useContext(ContextMenuDirContext)\n\n return (\n \n \n \n \n \n )\n}\n\nfunction ContextMenuGroup({ ...props }: ContextMenuPrimitive.Group.Props) {\n return (\n \n )\n}\n\nfunction ContextMenuLabel({\n className,\n inset,\n ...props\n}: ContextMenuPrimitive.GroupLabel.Props & {\n inset?: boolean\n}) {\n return (\n \n )\n}\n\nfunction ContextMenuItem({\n className,\n inset,\n variant = \"default\",\n ...props\n}: ContextMenuPrimitive.Item.Props & {\n inset?: boolean\n variant?: \"default\" | \"destructive\"\n}) {\n return (\n \n )\n}\n\nfunction ContextMenuSub({ ...props }: ContextMenuPrimitive.SubmenuRoot.Props) {\n return (\n \n )\n}\n\nfunction ContextMenuSubTrigger({\n className,\n inset,\n children,\n ...props\n}: ContextMenuPrimitive.SubmenuTrigger.Props & {\n inset?: boolean\n}) {\n return (\n \n {children}\n \n \n )\n}\n\nfunction ContextMenuSubContent({\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction ContextMenuCheckboxItem({\n className,\n children,\n checked,\n inset,\n ...props\n}: ContextMenuPrimitive.CheckboxItem.Props & {\n inset?: boolean\n}) {\n return (\n \n \n \n \n \n \n {children}\n \n )\n}\n\nfunction ContextMenuRadioGroup({\n ...props\n}: ContextMenuPrimitive.RadioGroup.Props) {\n return (\n \n )\n}\n\nfunction ContextMenuRadioItem({\n className,\n children,\n inset,\n ...props\n}: ContextMenuPrimitive.RadioItem.Props & {\n inset?: boolean\n}) {\n return (\n \n \n \n \n \n \n {children}\n \n )\n}\n\nfunction ContextMenuSeparator({\n className,\n ...props\n}: ContextMenuPrimitive.Separator.Props) {\n return (\n \n )\n}\n\nfunction ContextMenuShortcut({\n className,\n ...props\n}: React.ComponentProps<\"span\">) {\n return (\n \n )\n}\n\nexport {\n ContextMenu,\n ContextMenuCheckboxItem,\n ContextMenuContent,\n ContextMenuGroup,\n ContextMenuItem,\n ContextMenuLabel,\n ContextMenuPortal,\n ContextMenuRadioGroup,\n ContextMenuRadioItem,\n ContextMenuSeparator,\n ContextMenuShortcut,\n ContextMenuSub,\n ContextMenuSubContent,\n ContextMenuSubTrigger,\n ContextMenuTrigger,\n}\n",
"type": "registry:ui"
}
],
"type": "registry:ui"
}