diff --git a/apps/web/src/components/ui/inputs/MentionInputSuggestions/MentionInputSuggestionsMentionsInput.tsx b/apps/web/src/components/ui/inputs/MentionInputSuggestions/MentionInputSuggestionsMentionsInput.tsx index d43365c84..85a72eecb 100644 --- a/apps/web/src/components/ui/inputs/MentionInputSuggestions/MentionInputSuggestionsMentionsInput.tsx +++ b/apps/web/src/components/ui/inputs/MentionInputSuggestions/MentionInputSuggestionsMentionsInput.tsx @@ -33,7 +33,6 @@ export const MentionInputSuggestionsMentionsInput = forwardRef< autoFocus={false} disabled={props.disabled} className="sr-only hidden h-0 border-0 p-0 pointer-events-none w-full" - // className="absolute -top-1 left-0 w-full h-full border border-red-500" aria-hidden="true" /> diff --git a/apps/web/src/components/ui/search/SearchModal/SearchModalContent.tsx b/apps/web/src/components/ui/search/SearchModal/SearchModalContent.tsx index abd7177d3..283bfa5f4 100644 --- a/apps/web/src/components/ui/search/SearchModal/SearchModalContent.tsx +++ b/apps/web/src/components/ui/search/SearchModal/SearchModalContent.tsx @@ -1,10 +1,11 @@ import { Command } from 'cmdk'; -import React, { useState } from 'react'; +import React, { useState, useRef } from 'react'; +import { createContext, useContextSelector } from 'use-context-selector'; import { SearchEmptyState } from './SearchEmptyState'; import { SearchFooter } from './SearchFooter'; import { SearchInput } from './SearchInput'; import { SearchModalContentItems } from './SearchModalContentItems'; -import type { SearchModalContentProps } from './search-modal.types'; +import type { SearchItem, SearchModalContentProps } from './search-modal.types'; import { useViewSearchItem } from './useViewSearchItem'; export const SearchModalContent = ({ @@ -26,18 +27,40 @@ export const SearchModalContent = ({ onViewSearchItem, }); const [searchValue, setSearchValue] = useState(defaulSearchValue); + const isCommandKeyPressedRef = useRef(false); const onSearchChangePreflight = (searchValue: string) => { setSearchValue(searchValue); onSearchChange(searchValue); }; + const handleKeyDownGlobal = (e: React.KeyboardEvent) => { + if (e.metaKey || e.ctrlKey) { + isCommandKeyPressedRef.current = true; + } + handleKeyDown(e); + }; + + const handleKeyUpGlobal = (e: React.KeyboardEvent) => { + if (!e.metaKey && !e.ctrlKey) { + isCommandKeyPressedRef.current = false; + } + }; + + const onSelectGlobal = (item: SearchItem) => { + if (item?.onSelect) { + item.onSelect(); + } + onSelect(item, isCommandKeyPressedRef.current ? 'navigate' : 'select'); + }; + return ( ({
diff --git a/apps/web/src/components/ui/search/SearchModal/SearchModalContentItems.tsx b/apps/web/src/components/ui/search/SearchModal/SearchModalContentItems.tsx index df83046ca..c365b57d3 100644 --- a/apps/web/src/components/ui/search/SearchModal/SearchModalContentItems.tsx +++ b/apps/web/src/components/ui/search/SearchModal/SearchModalContentItems.tsx @@ -1,4 +1,4 @@ -import { Command } from 'cmdk'; +import { Command, useCommandState } from 'cmdk'; import { cn } from '@/lib/utils'; import type { SearchItem, @@ -8,15 +8,24 @@ import type { SearchModalContentProps, } from './search-modal.types'; +type CommonProps = { + onSelectGlobal: (d: SearchItem) => void; +}; + export const SearchModalContentItems = ({ searchItems, - onSelect, - onViewSearchItem, -}: Pick, 'searchItems' | 'onSelect' | 'onViewSearchItem'>) => { + onSelectGlobal, +}: Pick, 'searchItems' | 'onViewSearchItem'> & CommonProps) => { + const hasResults = useCommandState((x) => x.filtered.count) > 0; + return ( - + {searchItems.map((item, index) => ( - + ))} ); @@ -29,14 +38,20 @@ const keyExtractor = (item: SearchItems, index: numbe return item.type + index; }; -const ItemsSelecter = ({ item }: { item: SearchItems }) => { +const ItemsSelecter = ({ + item, + onSelectGlobal, +}: { + item: SearchItems; + onSelectGlobal: (d: SearchItem) => void; +}) => { const type = item.type; if (type === 'item') { - return ; + return ; } if (type === 'group') { - return ; + return ; } if (type === 'seperator') { @@ -48,16 +63,8 @@ const ItemsSelecter = ({ item }: { item: SearchItems return null; }; -const SearchItemComponent = ({ - value, - label, - secondaryLabel, - tertiaryLabel, - icon, - onSelect, - loading, - disabled, -}: SearchItem) => { +const SearchItemComponent = (item: SearchItem & CommonProps) => { + const { value, label, secondaryLabel, tertiaryLabel, icon, disabled, onSelectGlobal } = item; return ( ({ )} value={value} disabled={disabled} - onSelect={() => { - console.log('onSelect', value); - onSelect?.(); - }} + onSelect={() => onSelectGlobal(item)} > {label} @@ -80,18 +84,24 @@ const SearchItemComponent = ({ const SearchItemGroupComponent = ({ item, + onSelectGlobal, }: { item: SearchItemGroup; + onSelectGlobal: (d: SearchItem) => void; }) => { return ( {item.items.map((item, index) => ( - + ))} ); }; -const SearchItemSeperatorComponent = ({ item }: { item: SearchItemSeperator }) => { +const SearchItemSeperatorComponent = ({ item: _item }: { item: SearchItemSeperator }) => { return ; };