chore(search): refactor search to export necessary components and pro…

…viders. (#5900) * chore(search): refactor search to export necessary components and providers * chore(search): add ItemSelectHandler type
sanity-io · Mar 4, 2024 · 4159bca · 4159bca
1 parent 3670459
commit 4159bca
Show file tree

Hide file tree

Showing 12 changed files with 60 additions and 8 deletions.
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/SearchPopover.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/SearchPopover.tsx
@@ -18,11 +18,17 @@ import {SearchWrapper} from './common/SearchWrapper'
 import {Filters} from './filters/Filters'
 import {RecentSearches} from './recentSearches/RecentSearches'
 import {SearchHeader} from './SearchHeader'
+import {type ItemSelectHandler} from './searchResults/item/SearchResultItem'
 import {SearchResults} from './searchResults/SearchResults'
 
+/**
+ * @internal
+ */
 export interface SearchPopoverProps {
   disableFocusLock?: boolean
+  disableIntentLink?: boolean
   onClose: () => void
+  onItemSelect?: ItemSelectHandler
   onOpen: () => void
   open: boolean
 }
@@ -66,7 +72,17 @@ const SearchMotionCard = styled(motion(Card))`
   width: min(calc(100vw - ${POPOVER_INPUT_PADDING * 2}px), ${POPOVER_MAX_WIDTH}px);
 `
 
-export function SearchPopover({disableFocusLock, onClose, onOpen, open}: SearchPopoverProps) {
+/**
+ * @internal
+ */
+export function SearchPopover({
+  disableFocusLock,
+  disableIntentLink,
+  onClose,
+  onItemSelect,
+  onOpen,
+  open,
+}: SearchPopoverProps) {
   const [inputElement, setInputElement] = useState<HTMLInputElement | null>(null)
 
   const popoverElement = useRef<HTMLElement | null>(null)
@@ -134,7 +150,11 @@ export function SearchPopover({disableFocusLock, onClose, onOpen, open}: SearchP
                   </Card>
                 )}
                 {hasValidTerms ? (
-                  <SearchResults inputElement={inputElement} />
+                  <SearchResults
+                    inputElement={inputElement}
+                    onItemSelect={onItemSelect}
+                    disableIntentLink={disableIntentLink}
+                  />
                 ) : (
                   <RecentSearches inputElement={inputElement} />
                 )}

diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/index.ts b/packages/sanity/src/core/studio/components/navbar/search/components/index.ts
@@ -0,0 +1,2 @@
+export * from './SearchPopover'
+export * from './searchResults'
diff --git a/...anity/src/core/studio/components/navbar/search/components/searchResults/SearchResults.tsx b/...anity/src/core/studio/components/navbar/search/components/searchResults/SearchResults.tsx
@@ -11,7 +11,7 @@ import {NoResults} from '../NoResults'
 import {SearchError} from '../SearchError'
 import {SortMenu} from '../SortMenu'
 import {DebugOverlay} from './item/DebugOverlay'
-import {SearchResultItem} from './item/SearchResultItem'
+import {type ItemSelectHandler, SearchResultItem} from './item/SearchResultItem'
 
 const VIRTUAL_LIST_SEARCH_RESULT_ITEM_HEIGHT = 57 // px
 const VIRTUAL_LIST_OVERSCAN = 4
@@ -26,10 +26,12 @@ const SearchResultsInnerFlex = styled(Flex)<{$loading: boolean}>`
 `
 
 interface SearchResultsProps {
+  disableIntentLink?: boolean
   inputElement: HTMLInputElement | null
+  onItemSelect?: ItemSelectHandler
 }
 
-export function SearchResults({inputElement}: SearchResultsProps) {
+export function SearchResults({disableIntentLink, inputElement, onItemSelect}: SearchResultsProps) {
   const {
     dispatch,
     onClose,
@@ -59,16 +61,18 @@ export function SearchResults({inputElement}: SearchResultsProps) {
       return (
         <>
           <SearchResultItem
+            disableIntentLink={disableIntentLink}
             documentId={getPublishedId(item.hit._id) || ''}
             documentType={item.hit._type}
             onClick={handleSearchResultClick}
+            onItemSelect={onItemSelect}
             paddingY={1}
           />
           {debug && <DebugOverlay data={item} />}
         </>
       )
     },
-    [debug, handleSearchResultClick],
+    [debug, disableIntentLink, handleSearchResultClick, onItemSelect],
   )
 
   return (

diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/index.ts b/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/index.ts
@@ -0,0 +1 @@
+export * from './item'
diff --git a/...c/core/studio/components/navbar/search/components/searchResults/item/SearchResultItem.tsx b/...c/core/studio/components/navbar/search/components/searchResults/item/SearchResultItem.tsx
@@ -1,18 +1,22 @@
+import {type SanityDocumentLike} from '@sanity/types'
 import {Box, type ResponsiveMarginProps, type ResponsivePaddingProps} from '@sanity/ui'
 import {type MouseEvent, useCallback, useMemo} from 'react'
 import {useIntentLink} from 'sanity/router'
 
 import {type GeneralPreviewLayoutKey, PreviewCard} from '../../../../../../../components'
 import {useSchema} from '../../../../../../../hooks'
 import {useDocumentPresence} from '../../../../../../../store'
-import SearchResultItemPreview from './SearchResultItemPreview'
+import {SearchResultItemPreview} from './SearchResultItemPreview'
+
+export type ItemSelectHandler = (item: Pick<SanityDocumentLike, '_id' | '_type'>) => void
 
 interface SearchResultItemProps extends ResponsiveMarginProps, ResponsivePaddingProps {
   disableIntentLink?: boolean
   documentId: string
   documentType: string
   layout?: GeneralPreviewLayoutKey
   onClick?: () => void
+  onItemSelect?: ItemSelectHandler
 }
 
 export function SearchResultItem({
@@ -21,6 +25,7 @@ export function SearchResultItem({
   documentType,
   layout,
   onClick,
+  onItemSelect,
   ...rest
 }: SearchResultItemProps) {
   const schema = useSchema()
@@ -35,12 +40,13 @@ export function SearchResultItem({
 
   const handleClick = useCallback(
     (e: MouseEvent<HTMLElement>) => {
+      onItemSelect?.({_id: documentId, _type: documentType})
       if (!disableIntentLink) {
         onIntentClick(e)
       }
       onClick?.()
     },
-    [disableIntentLink, onClick, onIntentClick],
+    [onItemSelect, documentId, documentType, disableIntentLink, onClick, onIntentClick],
   )
 
   if (!type) return null

diff --git a/...studio/components/navbar/search/components/searchResults/item/SearchResultItemPreview.tsx b/...studio/components/navbar/search/components/searchResults/item/SearchResultItemPreview.tsx
@@ -35,7 +35,10 @@ const SearchResultItemPreviewBox = styled(Box)`
   }
 `
 
-export default function SearchResultItemPreview({
+/**
+ * @internal
+ */
+export function SearchResultItemPreview({
   documentId,
   layout,
   presence,

diff --git a/...es/sanity/src/core/studio/components/navbar/search/components/searchResults/item/index.ts b/...es/sanity/src/core/studio/components/navbar/search/components/searchResults/item/index.ts
@@ -0,0 +1 @@
+export * from './SearchResultItemPreview'
diff --git a/packages/sanity/src/core/studio/components/navbar/search/contexts/index.ts b/packages/sanity/src/core/studio/components/navbar/search/contexts/index.ts
@@ -0,0 +1 @@
+export * from './search'
diff --git a/packages/sanity/src/core/studio/components/navbar/search/contexts/search/SearchContext.ts b/packages/sanity/src/core/studio/components/navbar/search/contexts/search/SearchContext.ts
@@ -4,6 +4,9 @@ import {type CommandListHandle} from '../../../../../../components/commandList/t
 import {type RecentSearchesStore} from '../../datastores/recentSearches'
 import {type SearchAction, type SearchReducerState} from './reducer'
 
+/**
+ * @internal
+ */
 export interface SearchContextValue {
   dispatch: Dispatch<SearchAction>
   onClose: (() => void) | null
@@ -14,4 +17,7 @@ export interface SearchContextValue {
   state: SearchReducerState
 }
 
+/**
+ * @internal
+ */
 export const SearchContext = createContext<SearchContextValue | undefined>(undefined)
diff --git a/packages/sanity/src/core/studio/components/navbar/search/contexts/search/index.ts b/packages/sanity/src/core/studio/components/navbar/search/contexts/search/index.ts
@@ -0,0 +1,3 @@
+export * from './SearchContext'
+export * from './SearchProvider'
+export * from './useSearchState'
diff --git a/packages/sanity/src/core/studio/components/navbar/search/contexts/search/useSearchState.ts b/packages/sanity/src/core/studio/components/navbar/search/contexts/search/useSearchState.ts
@@ -2,6 +2,9 @@ import {useContext} from 'react'
 
 import {SearchContext, type SearchContextValue} from './SearchContext'
 
+/**
+ * @internal
+ */
 export function useSearchState(): SearchContextValue {
   const context = useContext(SearchContext)
 

diff --git a/packages/sanity/src/core/studio/components/navbar/search/index.ts b/packages/sanity/src/core/studio/components/navbar/search/index.ts
@@ -1,3 +1,5 @@
+export * from './components'
+export * from './contexts'
 export {
   defineSearchFilter,
   defineSearchFilterOperators,