{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "dropdown-menu", "title": "Dropdown-menu", "description": "A dropdown-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/dropdown-menu/dropdown-menu.tsx", "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Menu as BaseMenu } from \"@base-ui/react/menu\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport {\n Cancel01Icon,\n CheckIcon,\n ChevronRightIcon,\n Search01Icon,\n} from \"@hugeicons/core-free-icons\";\n\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\";\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 // Fully undrawn, the dash leaves a zero-length piece whose round cap shows\n // as a dot on high-density screens. Fading the unchecked mark out hides it.\n \" transition-opacity duration-150 ease-out in-data-unchecked:opacity-0 motion-reduce:transition-none\";\n\nfunction DropdownMenu({\n ...props\n}: BaseMenu.Root.Props) {\n return ;\n}\n\nfunction DropdownMenuPortal({\n ...props\n}: React.ComponentProps) {\n return ;\n}\n\nfunction DropdownMenuTrigger({\n ...props\n}: React.ComponentProps) {\n return ;\n}\n\nfunction DropdownMenuPositioner({\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction DropdownMenuPopup({\n className,\n level = 3,\n shadowLevel = 3,\n ...props\n}: React.ComponentProps & {\n /** Surface elevation (1-8) for the popup bg. Bump inside a Dialog or other elevated container. Defaults to 3. */\n level?: SurfaceLevel;\n /** Shadow weight (1-8). Defaults to 3 so the menu looks the same at any nesting depth. */\n shadowLevel?: SurfaceLevel;\n}) {\n return (\n \n );\n}\n\n/**\n * Crossfades content when a detached trigger swaps what the menu shows. Its\n * presence also switches Base UI's positioner from `transform` to `top`/`left`\n * so the popup can grow from the right edge. Leave it out of menus that never\n * swap content.\n */\nfunction DropdownMenuViewport({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction DropdownMenuContent({\n className,\n positionerClassName,\n viewportClassName,\n children,\n sideOffset = 4,\n align = \"center\",\n side = \"bottom\",\n ...props\n}: React.ComponentProps & {\n /** Classes for the positioner (the element Base UI moves into place), merged last. */\n positionerClassName?: string;\n /** Classes for the padded box around the items, e.g. `p-0` for a filterable menu. */\n viewportClassName?: string;\n align?: BaseMenu.Positioner.Props[\"align\"];\n sideOffset?: BaseMenu.Positioner.Props[\"sideOffset\"];\n side?: BaseMenu.Positioner.Props[\"side\"];\n}) {\n return (\n \n \n \n \n {children}\n \n \n \n \n );\n}\n\nfunction DropdownMenuGroup({\n ...props\n}: React.ComponentProps) {\n return ;\n}\n\nfunction DropdownMenuItem({\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 DropdownMenuShortcut({\n className,\n ...props\n}: React.ComponentProps<\"span\">) {\n return (\n \n );\n}\n\nfunction DropdownMenuSeparator({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction DropdownMenuLabel({\n className,\n inset,\n ...props\n}: React.ComponentProps<\"div\"> & {\n inset?: boolean;\n}) {\n return (\n \n );\n}\n\nfunction DropdownMenuGroupLabel({\n className,\n inset,\n ...props\n}: React.ComponentProps & {\n inset?: boolean;\n}) {\n return (\n \n );\n}\n\nfunction DropdownMenuCheckboxItem({\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 DropdownMenuRadioGroup({\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction DropdownMenuRadioItem({\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 DropdownMenuLinkItem({\n className,\n inset,\n ...props\n}: React.ComponentProps & {\n inset?: boolean;\n}) {\n return (\n \n );\n}\n\nfunction DropdownMenuSub({\n ...props\n}: React.ComponentProps) {\n return ;\n}\n\nfunction DropdownMenuSubTrigger({\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 DropdownMenuSubContent({\n className,\n positionerClassName,\n viewportClassName,\n children,\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 alignOffset,\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?: BaseMenu.Positioner.Props[\"align\"];\n alignOffset?: BaseMenu.Positioner.Props[\"alignOffset\"];\n sideOffset?: BaseMenu.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 /** Classes for the padded box around the items, e.g. `p-0` for a filterable menu. */\n viewportClassName?: string;\n}) {\n // Default alignOffset to -5 when align is not \"center\" to line up first item with trigger\n const defaultAlignOffset = align !== \"center\" ? -4 : undefined;\n\n return (\n \n {/* Base UI re-places a submenu a frame after its parent moves; the\n parent's glide hides the lag. */}\n \n \n {/* The popup above is capped at --available-height and clips, so the\n scroll container has to live here or a tall submenu silently\n truncates. The main popups get this from Menu.Viewport; a\n submenu has none, so it is spelled out. */}\n \n {children}\n \n \n \n \n );\n}\n\n// Filtering (Base UI preview API). Wrap `DropdownMenu` or `DropdownMenuSub` in\n// the provider, then put a `DropdownMenuInput` above a `DropdownMenuList`.\nfunction DropdownMenuFilter({\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 DropdownMenuInput({\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 DropdownMenuClear({\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 DropdownMenuList({\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 DropdownMenuEmpty({ className, ...props }: BaseMenu.Empty.Props) {\n return (\n \n );\n}\n\nconst useDropdownMenuFilter = BaseMenu.useFilter;\n\nconst createDropdownMenuHandle = BaseMenu.createHandle;\n\nexport {\n DropdownMenu,\n DropdownMenuPortal,\n DropdownMenuTrigger,\n DropdownMenuPositioner,\n DropdownMenuPopup,\n DropdownMenuViewport,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuLabel,\n DropdownMenuGroupLabel,\n DropdownMenuItem,\n DropdownMenuLinkItem,\n DropdownMenuCheckboxItem,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuSub,\n DropdownMenuSubTrigger,\n DropdownMenuSubContent,\n DropdownMenuFilter,\n DropdownMenuInput,\n DropdownMenuClear,\n DropdownMenuList,\n DropdownMenuEmpty,\n useDropdownMenuFilter,\n createDropdownMenuHandle,\n};\n", "type": "registry:ui", "target": "components/ui/cubby-ui/dropdown-menu.tsx" } ], "type": "registry:ui" }