{"name":"context-menu","type":"registry:ui","files":[{"path":"context-menu.tsx","type":"registry:ui","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { Autocomplete as AutocompletePrimitive } from \"@base-ui/react/autocomplete\"\nimport { ContextMenu as ContextMenuPrimitive } from \"@base-ui/react/context-menu\"\nimport { ChevronRight as ChevronRightIcon } from \"honestui/icons\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype AutocompleteMode = \"auto\" | \"manual\"\n\ntype ContextMenuContextValue = {\n autocomplete: boolean\n autocompleteMode: AutocompleteMode\n inputRef: React.RefObject\n inputValue: string\n isInitialRenderRef: React.RefObject\n onInputValueChange: (value: string) => void\n parent?: ContextMenuContextValue\n shouldFilter: boolean\n}\n\nconst ContextMenuContext = React.createContext(\n null\n)\n\nfunction useContextMenuContext() {\n const context = React.useContext(ContextMenuContext)\n\n if (!context) {\n throw new Error(\"Context menu parts must be used within ContextMenu\")\n }\n\n return context\n}\n\nfunction getTextContent(node: React.ReactNode): string {\n if (typeof node === \"string\" || typeof node === \"number\") {\n return String(node)\n }\n\n if (Array.isArray(node)) {\n return node.map(getTextContent).join(\" \")\n }\n\n if (React.isValidElement<{ children?: React.ReactNode }>(node)) {\n return getTextContent(node.props.children)\n }\n\n return \"\"\n}\n\nfunction matchesSearch(\n value: string | undefined,\n children: React.ReactNode,\n query: string\n) {\n const normalizedQuery = query.trim().toLocaleLowerCase()\n\n if (!normalizedQuery) return true\n\n return (value ?? getTextContent(children))\n .toLocaleLowerCase()\n .includes(normalizedQuery)\n}\n\nfunction dispatchKeyboardEvent(element: Element, key: string) {\n element.dispatchEvent(\n new KeyboardEvent(\"keydown\", {\n bubbles: true,\n cancelable: true,\n key,\n })\n )\n}\n\nfunction isSubmenuTrigger(element: Element) {\n return element.matches('[data-slot=\"context-menu-subtrigger\"]')\n}\n\nfunction isSubmenuOpen(element: Element) {\n return element.hasAttribute(\"data-popup-open\")\n}\n\ninterface NormalContextMenuRootProps\n extends ContextMenuPrimitive.Root.Props {\n autocomplete?: false\n autocompleteMode?: never\n defaultInputValue?: never\n inputValue?: never\n onInputValueChange?: never\n}\n\ninterface AutocompleteContextMenuRootProps\n extends ContextMenuPrimitive.Root.Props {\n autocomplete: true\n autocompleteMode?: AutocompleteMode\n defaultInputValue?: string\n inputValue?: string\n onInputValueChange?: (value: string) => void\n}\n\ntype ContextMenuRootProps =\n | NormalContextMenuRootProps\n | AutocompleteContextMenuRootProps\n\nfunction ContextMenu({\n autocomplete = false,\n autocompleteMode = \"auto\",\n inputValue: controlledInputValue,\n onInputValueChange,\n defaultInputValue = \"\",\n open: controlledOpen,\n onOpenChange,\n defaultOpen = false,\n ...props\n}: ContextMenuRootProps) {\n const [uncontrolledInputValue, setUncontrolledInputValue] =\n React.useState(defaultInputValue)\n const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)\n const inputRef = React.useRef(null)\n const isInitialRenderRef = React.useRef(true)\n const inputValue = controlledInputValue ?? uncontrolledInputValue\n const open = controlledOpen ?? uncontrolledOpen\n\n const setInputValue = React.useCallback(\n (value: string) => {\n if (controlledInputValue === undefined) {\n setUncontrolledInputValue(value)\n }\n onInputValueChange?.(value)\n },\n [controlledInputValue, onInputValueChange]\n )\n\n const handleOpenChange = React.useCallback<\n NonNullable\n >(\n (nextOpen, eventDetails) => {\n if (controlledOpen === undefined) {\n setUncontrolledOpen(nextOpen)\n }\n\n if (!nextOpen && autocomplete) {\n setInputValue(\"\")\n isInitialRenderRef.current = true\n }\n\n onOpenChange?.(nextOpen, eventDetails)\n },\n [autocomplete, controlledOpen, onOpenChange, setInputValue]\n )\n\n const context = React.useMemo(\n () => ({\n autocomplete,\n autocompleteMode,\n inputRef,\n inputValue,\n isInitialRenderRef,\n onInputValueChange: setInputValue,\n shouldFilter: autocomplete && autocompleteMode === \"auto\",\n }),\n [autocomplete, autocompleteMode, inputValue, setInputValue]\n )\n\n return (\n \n \n \n )\n}\ninterface NormalContextMenuSubProps\n extends ContextMenuPrimitive.SubmenuRoot.Props {\n autocomplete?: false\n autocompleteMode?: never\n defaultInputValue?: never\n inputValue?: never\n onInputValueChange?: never\n}\n\ninterface AutocompleteContextMenuSubProps\n extends ContextMenuPrimitive.SubmenuRoot.Props {\n autocomplete: true\n autocompleteMode?: AutocompleteMode\n defaultInputValue?: string\n inputValue?: string\n onInputValueChange?: (value: string) => void\n}\n\ntype ContextMenuSubProps =\n | NormalContextMenuSubProps\n | AutocompleteContextMenuSubProps\n\nfunction ContextMenuSub({\n autocomplete = false,\n autocompleteMode = \"auto\",\n inputValue: controlledInputValue,\n onInputValueChange,\n defaultInputValue = \"\",\n open: controlledOpen,\n onOpenChange,\n defaultOpen = false,\n ...props\n}: ContextMenuSubProps) {\n const parent = useContextMenuContext()\n const [uncontrolledInputValue, setUncontrolledInputValue] =\n React.useState(defaultInputValue)\n const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)\n const inputRef = React.useRef(null)\n const isInitialRenderRef = React.useRef(true)\n const inputValue = controlledInputValue ?? uncontrolledInputValue\n const open = controlledOpen ?? uncontrolledOpen\n\n const setInputValue = React.useCallback(\n (value: string) => {\n if (controlledInputValue === undefined) {\n setUncontrolledInputValue(value)\n }\n onInputValueChange?.(value)\n },\n [controlledInputValue, onInputValueChange]\n )\n\n const handleOpenChange = React.useCallback<\n NonNullable\n >(\n (nextOpen, eventDetails) => {\n if (controlledOpen === undefined) {\n setUncontrolledOpen(nextOpen)\n }\n\n if (!nextOpen && autocomplete) {\n setInputValue(\"\")\n isInitialRenderRef.current = true\n }\n\n onOpenChange?.(nextOpen, eventDetails)\n },\n [autocomplete, controlledOpen, onOpenChange, setInputValue]\n )\n\n const context = React.useMemo(\n () => ({\n autocomplete,\n autocompleteMode,\n inputRef,\n inputValue,\n isInitialRenderRef,\n onInputValueChange: setInputValue,\n parent,\n shouldFilter: autocomplete && autocompleteMode === \"auto\",\n }),\n [\n autocomplete,\n autocompleteMode,\n inputValue,\n parent,\n setInputValue,\n ]\n )\n\n return (\n \n \n \n )\n}\ntype ContextMenuTriggerProps = ContextMenuPrimitive.Trigger.Props\n\nfunction ContextMenuTrigger({ className, ...props }: ContextMenuTriggerProps) {\n return (\n \n )\n}\ntype ContextMenuCellProps = React.ComponentProps<\"div\"> & {\n inset?: boolean\n leadingIcon?: React.ReactNode\n trailingIcon?: React.ReactNode\n variant?: \"default\" | \"destructive\"\n}\n\nfunction ContextMenuCell({\n children,\n className,\n inset,\n leadingIcon,\n trailingIcon,\n variant = \"default\",\n ...props\n}: ContextMenuCellProps) {\n return (\n \n {leadingIcon ? {leadingIcon} : null}\n {children}\n {trailingIcon ? (\n \n {trailingIcon}\n \n ) : null}\n \n )\n}\n\ntype ContextMenuItemProps = ContextMenuPrimitive.Item.Props & {\n inset?: boolean\n leadingIcon?: React.ReactNode\n trailingIcon?: React.ReactNode\n value?: string\n variant?: \"default\" | \"destructive\"\n}\n\nfunction ContextMenuItem({\n children,\n value,\n leadingIcon,\n trailingIcon,\n inset,\n variant,\n render,\n ...props\n}: ContextMenuItemProps) {\n const { autocomplete, inputValue, shouldFilter } = useContextMenuContext()\n\n if (shouldFilter && !matchesSearch(value, children, inputValue)) {\n return null\n }\n\n const cell =\n render ?? (\n \n )\n\n if (autocomplete) {\n return (\n }\n {...props}\n >\n {children}\n \n )\n }\n\n return (\n \n {children}\n \n )\n}\ntype ContextMenuSubTriggerProps =\n ContextMenuPrimitive.SubmenuTrigger.Props & {\n inset?: boolean\n leadingIcon?: React.ReactNode\n trailingIcon?: React.ReactNode\n value?: string\n }\n\nfunction ContextMenuSubTrigger({\n children,\n value,\n trailingIcon = ,\n leadingIcon,\n inset,\n ...props\n}: ContextMenuSubTriggerProps) {\n const { inputRef, parent } = useContextMenuContext()\n\n if (\n parent?.shouldFilter &&\n !matchesSearch(value, children, parent.inputValue)\n ) {\n return null\n }\n\n const cell = (\n \n )\n\n return (\n {\n if (document.activeElement !== parent.inputRef.current) {\n parent.inputRef.current?.focus()\n }\n props.onPointerEnter?.(event)\n }}\n onKeyDown={(event) => {\n requestAnimationFrame(() => inputRef.current?.focus())\n props.onKeyDown?.(event)\n }}\n />\n ) : (\n cell\n )\n }\n role={parent?.autocomplete ? \"option\" : \"menuitem\"}\n {...props}\n >\n {children}\n \n )\n}\ntype ContextMenuGroupProps = ContextMenuPrimitive.Group.Props\n\nfunction ContextMenuGroup({ children, ...props }: ContextMenuGroupProps) {\n const { shouldFilter } = useContextMenuContext()\n\n if (shouldFilter) return <>{children}\n\n return (\n \n {children}\n \n )\n}\ntype ContextMenuLabelProps = ContextMenuPrimitive.GroupLabel.Props\n\nfunction ContextMenuLabel({ className, ...props }: ContextMenuLabelProps) {\n const { shouldFilter } = useContextMenuContext()\n\n if (shouldFilter) return null\n\n return (\n \n )\n}\ntype ContextMenuSeparatorProps = ContextMenuPrimitive.Separator.Props\n\nfunction ContextMenuSeparator({\n className,\n ...props\n}: ContextMenuSeparatorProps) {\n const { shouldFilter } = useContextMenuContext()\n\n if (shouldFilter) return null\n\n return (\n \n )\n}\nfunction ContextMenuEmptyState({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\ntype ContextMenuContentProps = ContextMenuPrimitive.Popup.Props & {\n align?: ContextMenuPrimitive.Positioner.Props[\"align\"]\n alignOffset?: ContextMenuPrimitive.Positioner.Props[\"alignOffset\"]\n searchLabel?: string\n searchPlaceholder?: string\n sideOffset?: ContextMenuPrimitive.Positioner.Props[\"sideOffset\"]\n}\n\nfunction ContextMenuContent({\n ref,\n className,\n children,\n searchLabel = \"Search menu items\",\n searchPlaceholder = \"Search...\",\n sideOffset = 4,\n align = \"start\",\n alignOffset = 0,\n onFocus,\n ...props\n}: ContextMenuContentProps) {\n const {\n autocomplete,\n inputValue,\n inputRef,\n isInitialRenderRef,\n onInputValueChange,\n parent,\n } = useContextMenuContext()\n const highlightedItem = React.useRef<\n [index: number, reason: \"keyboard\" | \"pointer\" | \"none\"]\n >([-1, \"none\"])\n const listRef = React.useRef(null)\n\n const focusInput = React.useCallback(() => {\n if (document.activeElement !== inputRef.current) {\n inputRef.current?.focus()\n }\n }, [inputRef])\n\n const highlightFirstItem = React.useCallback(() => {\n if (!isInitialRenderRef.current) return\n isInitialRenderRef.current = false\n\n const item = listRef.current?.querySelector('[role=\"option\"]')\n item?.dispatchEvent(new PointerEvent(\"mousemove\", { bubbles: true }))\n }, [isInitialRenderRef])\n\n const openHighlightedSubmenu = React.useCallback(() => {\n if (highlightedItem.current[0] === -1) return\n\n const items = listRef.current?.querySelectorAll('[role=\"option\"]')\n const item = items?.[highlightedItem.current[0]]\n\n if (item && isSubmenuTrigger(item)) {\n dispatchKeyboardEvent(item, \"ArrowRight\")\n }\n }, [])\n\n const closeHighlightedSubmenu = React.useCallback(\n (event: React.KeyboardEvent) => {\n if (highlightedItem.current[0] === -1) return\n\n const items = listRef.current?.querySelectorAll('[role=\"option\"]')\n const item = items?.[highlightedItem.current[0]]\n\n if (!item || !isSubmenuTrigger(item) || !isSubmenuOpen(item)) return\n\n dispatchKeyboardEvent(item, \"Escape\")\n event.stopPropagation()\n },\n []\n )\n\n const closeStaleSubmenu = React.useCallback((index: number) => {\n const items = listRef.current?.querySelectorAll('[role=\"option\"]')\n const item = items?.[index]\n\n if (!item || !isSubmenuTrigger(item) || !isSubmenuOpen(item)) return\n\n dispatchKeyboardEvent(item, \"Escape\")\n item.dispatchEvent(new PointerEvent(\"pointerout\", { bubbles: true }))\n }, [])\n\n return (\n \n \n {\n focusInput()\n event.stopPropagation()\n highlightFirstItem()\n onFocus?.(event)\n }\n : onFocus\n }\n {...props}\n >\n {autocomplete ? (\n onInputValueChange(value)}\n autoHighlight={Boolean(inputValue)}\n mode=\"none\"\n loopFocus={false}\n onItemHighlighted={(_, eventDetails) => {\n if (\n highlightedItem.current[1] === \"pointer\" &&\n eventDetails.reason === \"keyboard\"\n ) {\n closeStaleSubmenu(highlightedItem.current[0])\n }\n\n highlightedItem.current = [\n eventDetails.index,\n eventDetails.reason,\n ]\n }}\n >\n {\n if (event.key === \"ArrowLeft\") return\n if (event.key === \"Escape\") {\n closeHighlightedSubmenu(event)\n return\n }\n if (event.key === \"ArrowRight\" || event.key === \"Enter\") {\n openHighlightedSubmenu()\n }\n event.stopPropagation()\n }}\n tabIndex={-1}\n />\n \n {children}\n \n \n ) : (\n children\n )}\n \n \n \n )\n}\nfunction ContextMenuSubContent(props: ContextMenuContentProps) {\n return \n}\n\nexport {\n ContextMenu,\n ContextMenuContent,\n ContextMenuEmptyState,\n ContextMenuGroup,\n ContextMenuItem,\n ContextMenuLabel,\n ContextMenuSeparator,\n ContextMenuSub,\n ContextMenuSubContent,\n ContextMenuSubTrigger,\n ContextMenuTrigger,\n}\n\nexport type {\n AutocompleteContextMenuRootProps,\n AutocompleteContextMenuSubProps,\n ContextMenuContentProps,\n ContextMenuGroupProps,\n ContextMenuItemProps,\n ContextMenuLabelProps,\n ContextMenuRootProps,\n ContextMenuSeparatorProps,\n ContextMenuSubProps,\n ContextMenuSubTriggerProps,\n ContextMenuTriggerProps,\n NormalContextMenuRootProps,\n NormalContextMenuSubProps,\n}\n","target":"components/ui/context-menu.tsx"}],"dependencies":["@base-ui/react","honestui"]}