CommandMenuItem() — ui Function Reference

Architecture documentation for the CommandMenuItem() function in command-menu.tsx from the ui codebase.

Function tsx Internationalization RTLLayout

Entity Profile

Internationalization→ RTLLayout→ CommandMenuItem() — ui Function Reference

Dependency Diagram

graph TD
  9e1dea4f_a2ef_8404_e6c2_e4da9d254ad7["CommandMenuItem()"]
  f230e63c_c621_4fb0_5506_e74b21915cf5["command-menu.tsx"]
  9e1dea4f_a2ef_8404_e6c2_e4da9d254ad7 -->|defined in| f230e63c_c621_4fb0_5506_e74b21915cf5
  style 9e1dea4f_a2ef_8404_e6c2_e4da9d254ad7 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/components/command-menu.tsx lines 468–504

function CommandMenuItem({
  children,
  className,
  onHighlight,
  ...props
}: React.ComponentProps<typeof CommandItem> & {
  onHighlight?: () => void
  "data-selected"?: string
  "aria-selected"?: string
}) {
  const ref = React.useRef<HTMLDivElement>(null)

  useMutationObserver(ref, (mutations) => {
    mutations.forEach((mutation) => {
      if (
        mutation.type === "attributes" &&
        mutation.attributeName === "aria-selected" &&
        ref.current?.getAttribute("aria-selected") === "true"
      ) {
        onHighlight?.()
      }
    })
  })

  return (
    <CommandItem
      ref={ref}
      className={cn(
        "data-[selected=true]:border-input data-[selected=true]:bg-input/50 h-9 rounded-md border border-transparent !px-3 font-medium",
        className
      )}
      {...props}
    >
      {children}
    </CommandItem>
  )
}