{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "context-menu", "title": "Context-menu", "description": "A context-menu component.", "dependencies": [ "@hugeicons/react", "@hugeicons/core-free-icons" ], "registryDependencies": [ "@cubby-ui/scroll-area", "@cubby-ui/switch", "@cubby-ui/elevated", "@cubby-ui/popup-search" ], "files": [ { "path": "registry/default/context-menu/context-menu.tsx", "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { ContextMenu as BaseContextMenu } from \"@base-ui/react/context-menu\";\nimport { Menu as BaseMenu } from \"@base-ui/react/menu\";\nimport { cn } from \"@/lib/utils\";\nimport {\n solidSurface,\n type SurfaceLevel,\n} from \"@/registry/default/lib/elevated\";\nimport {\n POPUP_ITEM,\n POPUP_SEARCH_CLEAR,\n POPUP_SEARCH_FIELD,\n POPUP_SEARCH_ICON,\n POPUP_SEARCH_INPUT,\n POPUP_SEARCH_MENU_FIELD,\n} from \"@/registry/default/lib/popup-search\";\nimport { ScrollArea } from \"@/registry/default/scroll-area/scroll-area\";\n\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport {\n Cancel01Icon,\n CheckIcon,\n ChevronRightIcon,\n Search01Icon,\n} from \"@hugeicons/core-free-icons\";\nimport {\n SwitchVisual,\n type SwitchVisualProps,\n} from \"@/registry/default/switch/switch\";\n\n// Shared shell for checkbox and radio items. Padding matches the plain menu\n// item so labels line up across every item type; the indicator lives in a\n// reserved right-hand column so toggling never shifts the label.\nconst toggleItemClasses = [\n POPUP_ITEM,\n \"group/switch data-highlighted:bg-surface-hover data-highlighted:text-accent-foreground grid cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-60 data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n];\n\n// The check draws itself in. `pathLength` restates the path as 1 unit\n// long, so the dash values are fractions of the stroke and survive a HugeIcons\n// reshape. Deriving the icon array is the only way to reach the path.\nconst checkIcon = CheckIcon.map(([tag, attrs]) => [\n tag,\n { ...attrs, pathLength: 1 },\n]) as typeof CheckIcon;\n\nconst checkmarkClasses =\n \"[&_path]:ease-out-expo [&_path]:transition-[stroke-dashoffset] [&_path]:duration-150 [&_path]:[stroke-dasharray:1] in-data-checked:[&_path]:[stroke-dashoffset:0] in-data-unchecked:[&_path]:[stroke-dashoffset:1] motion-reduce:[&_path]:transition-none\" +\n // Fade the unchecked mark out to hide the round-cap dot an undrawn dash leaves.\n \" transition-opacity duration-150 ease-out in-data-unchecked:opacity-0 motion-reduce:transition-none\";\n\nfunction ContextMenu({\n ...props\n}: React.ComponentProps) {\n return ;\n}\n\nfunction ContextMenuTrigger({\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction ContextMenuGroup({\n ...props\n}: React.ComponentProps) {\n return ;\n}\n\nfunction ContextMenuPortal({\n ...props\n}: React.ComponentProps) {\n return ;\n}\n\nfunction ContextMenuPositioner({\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction ContextMenuRadioGroup({\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction ContextMenuContent({\n className,\n positionerClassName,\n sideOffset = 4,\n align = \"start\",\n level = 3,\n shadowLevel = 3,\n ...props\n}: React.ComponentProps & {\n /** Classes for the positioner (the element Base UI moves into place), merged last. */\n positionerClassName?: string;\n align?: BaseContextMenu.Positioner.Props[\"align\"];\n sideOffset?: BaseContextMenu.Positioner.Props[\"sideOffset\"];\n /** Surface elevation level for the popup bg (1-8). Bump when nesting inside a Dialog or other elevated container. Defaults to 3. */\n level?: SurfaceLevel;\n /** Shadow weight (1-8). Pinned to 3 by default so the menu reads the same regardless of nesting depth. */\n shadowLevel?: SurfaceLevel;\n}) {\n return (\n \n \n \n \n \n );\n}\n\nfunction ContextMenuItem({\n className,\n inset,\n variant = \"default\",\n ...props\n}: React.ComponentProps & {\n inset?: boolean;\n variant?: \"default\" | \"destructive\";\n}) {\n return (\n \n );\n}\n\nfunction ContextMenuLinkItem({\n className,\n inset,\n ...props\n}: React.ComponentProps & {\n inset?: boolean;\n}) {\n return (\n \n );\n}\n\nfunction ContextMenuCheckboxItem({\n className,\n children,\n checked,\n inset,\n indicator = \"check\",\n switchColor = \"primary\",\n switchShape = \"circle\",\n switchSize = \"xs\",\n switchMotion = \"default\",\n ...props\n}: React.ComponentProps & {\n inset?: boolean;\n /** Which indicator sits in the right-hand column. `\"switch\"` is visual only — the item keeps the `menuitemcheckbox` role. */\n indicator?: \"check\" | \"switch\";\n /** Checked track colour, when `indicator=\"switch\"`. */\n switchColor?: SwitchVisualProps[\"color\"];\n /** Thumb silhouette, when `indicator=\"switch\"`. */\n switchShape?: SwitchVisualProps[\"shape\"];\n /** Thumb size, when `indicator=\"switch\"`. Defaults to `xs`, which matches the row's text. */\n switchSize?: SwitchVisualProps[\"size\"];\n /** How the thumb travels, when `indicator=\"switch\"`. */\n switchMotion?: SwitchVisualProps[\"motion\"];\n}) {\n return (\n \n \n {children}\n \n {indicator === \"switch\" ? (\n // Visual only: the row carries the role and the click target, so a real\n // Switch here would nest a focusable control inside a menuitemcheckbox.\n // Base UI's indicator supplies the aria-hidden.\n }\n />\n ) : (\n \n \n \n )}\n \n );\n}\n\nfunction ContextMenuRadioItem({\n className,\n children,\n inset,\n ...props\n}: React.ComponentProps & {\n inset?: boolean;\n}) {\n return (\n \n \n {children}\n \n \n \n \n \n );\n}\n\nfunction ContextMenuLabel({\n className,\n inset,\n ...props\n}: React.ComponentProps<\"div\"> & {\n inset?: boolean;\n}) {\n return (\n \n );\n}\n\nfunction ContextMenuGroupLabel({\n className,\n inset,\n ...props\n}: React.ComponentProps & {\n inset?: boolean;\n}) {\n return (\n \n );\n}\n\nfunction ContextMenuSeparator({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction ContextMenuShortcut({\n className,\n ...props\n}: React.ComponentProps<\"span\">) {\n return (\n \n );\n}\n\nfunction ContextMenuSub({\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction ContextMenuSubTrigger({\n className,\n inset,\n children,\n delay = 0,\n closeDelay = 0,\n ...props\n}: React.ComponentProps & {\n inset?: boolean;\n}) {\n return (\n \n {children}\n \n \n );\n}\n\nfunction ContextMenuSubContent({\n className,\n positionerClassName,\n // 8px, not 0: the positioner anchors to the sub-trigger, which sits 4px\n // inside the parent popup because of its p-1. A 0 offset therefore overlaps\n // the parent's edge by 4px; 8 leaves a 4px gap, matching Menubar.\n sideOffset = 8,\n align = \"start\",\n level = 5,\n shadowLevel = 3,\n ...props\n}: React.ComponentProps & {\n /** Classes for the positioner (the element Base UI moves into place), merged last. */\n positionerClassName?: string;\n align?: BaseContextMenu.Positioner.Props[\"align\"];\n sideOffset?: BaseContextMenu.Positioner.Props[\"sideOffset\"];\n /** Surface elevation level for the submenu bg (1-8). Defaults to 5 — one tier above the parent menu's default of 3. Bump higher when nesting inside a Dialog. */\n level?: SurfaceLevel;\n /** Shadow weight (1-8). Pinned to 3 by default so the submenu reads the same dropdown weight as its parent. */\n shadowLevel?: SurfaceLevel;\n}) {\n return (\n \n \n \n \n \n );\n}\n\n// Filtering (Base UI preview API). ContextMenu renders a Menu root inside, so\n// Menu's filter parts work here: wrap `ContextMenu` or `ContextMenuSub` in the\n// provider, then put a `ContextMenuInput` above a `ContextMenuList`.\nfunction ContextMenuFilter({\n autoHighlight = true,\n ...props\n}: BaseMenu.FilterProvider.Props) {\n // Highlight the top match while typing, so Enter runs it.\n return ;\n}\n\nfunction ContextMenuInput({\n className,\n inputClassName,\n showClear = true,\n clearLabel,\n \"aria-label\": ariaLabel = \"Search\",\n ...props\n}: BaseMenu.Input.Props & {\n /** Class applied to the inner ``. `className` styles the field. */\n inputClassName?: string;\n /** Show a clear button while the query has text. */\n showClear?: boolean;\n /** Accessible name of the clear button. Defaults to \"Clear search\". */\n clearLabel?: string;\n}) {\n return (\n \n \n \n {showClear && }\n \n );\n}\n\nfunction ContextMenuClear({\n className,\n children,\n \"aria-label\": ariaLabel = \"Clear search\",\n ...props\n}: BaseMenu.Clear.Props) {\n return (\n \n {children ?? (\n \n )}\n \n );\n}\n\nfunction ContextMenuList({\n className,\n ...props\n}: Omit & {\n /** Styles the scroll area around the list, e.g. to change its height cap. */\n className?: string;\n}) {\n return (\n // Scrolls on its own so the field stays put. Padding sits inside the scroll so\n // rows reach the popup's edges. Capped at 20rem; shrinks as a flex item to\n // fit a short screen, as Combobox's and Select's lists do.\n \n \n \n );\n}\n\nfunction ContextMenuEmpty({ className, ...props }: BaseMenu.Empty.Props) {\n return (\n \n );\n}\n\nconst useContextMenuFilter = BaseMenu.useFilter;\n\nexport {\n ContextMenu,\n ContextMenuContent,\n ContextMenuItem,\n ContextMenuLinkItem,\n ContextMenuShortcut,\n ContextMenuTrigger,\n ContextMenuSeparator,\n ContextMenuGroup,\n ContextMenuLabel,\n ContextMenuGroupLabel,\n ContextMenuCheckboxItem,\n ContextMenuRadioGroup,\n ContextMenuPortal,\n ContextMenuPositioner,\n ContextMenuRadioItem,\n ContextMenuSub,\n ContextMenuSubTrigger,\n ContextMenuSubContent,\n ContextMenuFilter,\n ContextMenuInput,\n ContextMenuClear,\n ContextMenuList,\n ContextMenuEmpty,\n useContextMenuFilter,\n};\n", "type": "registry:ui", "target": "components/ui/cubby-ui/context-menu.tsx" } ], "type": "registry:ui" }