| ... | ... | @@ -43,6 +43,7 @@ export const ComposerCommandMenu = memo(function ComposerCommandMenu(props: { |
| 43 | 43 | }) { |
| 44 | 44 | return ( |
| 45 | 45 | <Command |
| 46 | autoHighlight={false} |
| 46 | 47 | mode="none" |
| 47 | 48 | onItemHighlighted={(highlightedValue) => { |
| 48 | 49 | props.onHighlightedItemChange( |
| ... | ... | @@ -58,6 +59,7 @@ export const ComposerCommandMenu = memo(function ComposerCommandMenu(props: { |
| 58 | 59 | item={item} |
| 59 | 60 | resolvedTheme={props.resolvedTheme} |
| 60 | 61 | isActive={props.activeItemId === item.id} |
| 62 | onHighlight={props.onHighlightedItemChange} |
| 61 | 63 | onSelect={props.onSelect} |
| 62 | 64 | /> |
| 63 | 65 | ))} |
| ... | ... | @@ -80,15 +82,19 @@ const ComposerCommandMenuItem = memo(function ComposerCommandMenuItem(props: { |
| 80 | 82 | item: ComposerCommandItem; |
| 81 | 83 | resolvedTheme: "light" | "dark"; |
| 82 | 84 | isActive: boolean; |
| 85 | onHighlight: (itemId: string | null) => void; |
| 83 | 86 | onSelect: (item: ComposerCommandItem) => void; |
| 84 | 87 | }) { |
| 85 | 88 | return ( |
| 86 | 89 | <CommandItem |
| 87 | 90 | value={props.item.id} |
| 88 | 91 | className={cn( |
| 89 | | "cursor-pointer select-none gap-2", |
| 90 | | props.isActive && "bg-accent text-accent-foreground", |
| 92 | "cursor-pointer select-none gap-2 data-highlighted:bg-transparent data-highlighted:text-inherit", |
| 93 | props.isActive && "bg-accent! text-accent-foreground!", |
| 91 | 94 | )} |
| 95 | onMouseMove={() => { |
| 96 | if (!props.isActive) props.onHighlight(props.item.id); |
| 97 | }} |
| 92 | 98 | onMouseDown={(event) => { |
| 93 | 99 | event.preventDefault(); |
| 94 | 100 | }} |
Abdulelah Hajjar <aab.hajjar@gmail.com> 2026-03-30 04:14:59+03:00
GitHub <noreply@github.com> 2026-03-29 18:14:59-07:00