{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "dropdown-menu", "title": "Dropdown Menu", "description": "Compact menu of actions that opens from a button and closes on choice, with arrow-key navigation and a destructive variant.", "dependencies": [ "radix-ui", "motion" ], "registryDependencies": [ "utils", "https://miseui.junsu4621.workers.dev/r/motion.json" ], "files": [ { "path": "registry/miseui/ui/dropdown-menu.tsx", "content": "import type * as React from \"react\"\nimport { DropdownMenu as DropdownMenuPrimitive } from \"radix-ui\"\nimport { cn } from \"@/registry/miseui/lib/utils\"\nimport {\n MENU_MATERIALIZE_CLASS,\n MENU_SPRING_CONTENT_CLASS,\n MENU_SPRING_ITEM_CLASS,\n MenuHighlight,\n MenuSpringScope,\n useMenuItemHighlight,\n type DropdownMenuEffect,\n} from \"@/registry/miseui/ui/dropdown-menu-effects\"\n\n/** Gap between the trigger and the menu, in px. */\nconst SIDE_OFFSET_PX = 4\n\nconst PLAIN_MOTION_CLASS = [\n \"duration-(--duration-fast) ease-(--ease-mise)\",\n \"data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\",\n \"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95\",\n \"data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2\",\n \"data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n]\n\nfunction DropdownMenu({ ...props }: React.ComponentProps) {\n return \n}\n\nfunction DropdownMenuTrigger({ ...props }: React.ComponentProps) {\n return \n}\n\ntype DropdownMenuContentProps = React.ComponentProps & {\n /** `materialize` grows the menu out of the trigger; `spring` slides one highlight between the items. */\n effect?: DropdownMenuEffect\n}\n\nfunction DropdownMenuContent({ className, sideOffset = SIDE_OFFSET_PX, effect, ...props }: DropdownMenuContentProps) {\n return (\n \n \n \n \n \n )\n}\n\nfunction DropdownMenuGroup({ ...props }: React.ComponentProps) {\n return \n}\n\ntype DropdownMenuItemProps = React.ComponentProps & {\n /** Destructive items read in the destructive colour so the eye slows down before clicking. */\n variant?: \"default\" | \"destructive\"\n}\n\nfunction DropdownMenuItem({\n className,\n variant = \"default\",\n asChild,\n children,\n onFocus,\n onBlur,\n ...props\n}: DropdownMenuItemProps) {\n const highlight = useMenuItemHighlight({ asChild, onFocus, onBlur })\n return (\n \n {highlight.spring ? (\n <>\n {highlight.highlighted ? : null}\n {children}\n \n ) : (\n children\n )}\n \n )\n}\n\nfunction DropdownMenuLabel({ className, ...props }: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction DropdownMenuSeparator({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction DropdownMenuShortcut({ className, ...props }: React.ComponentProps<\"span\">) {\n return (\n \n )\n}\n\nexport {\n DropdownMenu,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuLabel,\n DropdownMenuShortcut,\n DropdownMenuGroup,\n type DropdownMenuItemProps,\n type DropdownMenuContentProps,\n type DropdownMenuEffect,\n}\n", "type": "registry:ui" }, { "path": "registry/miseui/ui/dropdown-menu-effects.tsx", "content": "import type * as React from \"react\"\nimport { createContext, useContext, useId, useMemo, useState } from \"react\"\nimport { LayoutGroup, motion, useReducedMotion } from \"motion/react\"\nimport { SPRING_DEFAULT } from \"@/registry/miseui/lib/motion\"\nimport { cn } from \"@/registry/miseui/lib/utils\"\n\ntype DropdownMenuEffect = \"materialize\" | \"spring\"\ntype HighlightVariant = \"default\" | \"destructive\"\n\n/** The enter and exit values stay unqualified so the media overrides below win on source order. */\nconst MENU_MATERIALIZE_CLASS = [\n \"duration-(--duration-base) ease-(--ease-mise-out) will-change-[transform,opacity,filter]\",\n \"data-[state=open]:animate-in data-[state=closed]:animate-out\",\n \"fade-in-0 zoom-in-90 blur-in-sm fade-out-0 zoom-out-90 blur-out-sm\",\n \"motion-reduce:zoom-in-100 motion-reduce:zoom-out-100 motion-reduce:blur-in-0 motion-reduce:blur-out-0\",\n \"[@media(prefers-reduced-transparency:reduce)]:blur-in-0 [@media(prefers-reduced-transparency:reduce)]:blur-out-0\",\n]\n\n/** One stacking context for the menu keeps a flying highlight behind every label and above the surface colour. */\nconst MENU_SPRING_CONTENT_CLASS = \"isolate\"\n\n/** Clears every item background so the sliding highlight is the only one drawn. */\nconst MENU_SPRING_ITEM_CLASS = [\n \"focus:bg-transparent focus:text-foreground\",\n \"data-[variant=destructive]:focus:bg-transparent data-[variant=destructive]:focus:text-destructive\",\n \"dark:data-[variant=destructive]:focus:bg-transparent\",\n]\n\nconst HIGHLIGHT_COLOR_CLASS: Record = {\n default: \"bg-mise-soft\",\n destructive: \"bg-destructive/10 dark:bg-destructive/20\",\n}\n\nconst MenuSpringContext = createContext<{ reduceMotion: boolean } | null>(null)\n\nfunction MenuSpringScope({ enabled, children }: { enabled: boolean; children: React.ReactNode }) {\n // layoutId is global to the page; without a per-instance group two open menus would share one highlight.\n const groupId = useId()\n const reduceMotion = useReducedMotion() ?? false\n const value = useMemo(() => ({ reduceMotion }), [reduceMotion])\n if (!enabled) return children\n return (\n \n {children}\n \n )\n}\n\ninterface ItemHighlightOptions {\n asChild?: boolean\n onFocus?: React.FocusEventHandler\n onBlur?: React.FocusEventHandler\n}\n\n/** Radix highlights an item by focusing it, for the keyboard and the pointer alike, so focus is the one signal needed. */\nfunction useMenuItemHighlight({ asChild, onFocus, onBlur }: ItemHighlightOptions) {\n const scope = useContext(MenuSpringContext)\n const [focused, setFocused] = useState(false)\n // A Slot takes exactly one child, so an asChild item keeps the plain focus background instead of a highlight.\n if (!scope || asChild) return { spring: false, highlighted: false, reduceMotion: false, onFocus, onBlur }\n return {\n spring: true,\n highlighted: focused,\n reduceMotion: scope.reduceMotion,\n onFocus: (event: React.FocusEvent) => {\n onFocus?.(event)\n setFocused(true)\n },\n onBlur: (event: React.FocusEvent) => {\n onBlur?.(event)\n setFocused(false)\n },\n }\n}\n\nfunction MenuHighlight({ variant, reduceMotion }: { variant: HighlightVariant; reduceMotion: boolean }) {\n return (\n \n )\n}\n\nexport {\n MENU_MATERIALIZE_CLASS,\n MENU_SPRING_CONTENT_CLASS,\n MENU_SPRING_ITEM_CLASS,\n MenuHighlight,\n MenuSpringScope,\n useMenuItemHighlight,\n type DropdownMenuEffect,\n}\n", "type": "registry:ui" } ], "categories": [ "navigation" ], "type": "registry:ui" }