Update search input with useAutocomplete (#11023)

src/components/Autocomplete/Autocomplete.tsx

@@ -1,5 +1,4 @@
 import {useCallback} from 'react'
-import {View} from 'react-native'
 import {Sift, type UseSiftReturn} from '@bsky.app/sift'
 
 import {atoms as a, useTheme} from '#/alf'
@@ -22,7 +21,7 @@ function renderItem(
     case 'search':
       return <AutocompleteItemSearch {...item} />
     default:
-      return <View />
+      return <></>
   }
 }
 
@@ -33,6 +32,7 @@ export function Autocomplete({
   render = renderItem,
   onSelect,
   onDismiss,
+  fullWidth = false,
 }: {
   inverted?: boolean
   sift: UseSiftReturn
@@ -40,6 +40,12 @@ export function Autocomplete({
   render?: Parameters<typeof Sift<AutocompleteItem>>[0]['render']
   onSelect: (item: AutocompleteItem) => void
   onDismiss: () => void
+  /**
+   * Match the anchor's width instead of the default capped width. Use for
+   * full-width anchors like the search bar; leave off for inline mention
+   * inputs.
+   */
+  fullWidth?: boolean
 }) {
   const t = useTheme()
 
@@ -50,6 +56,8 @@ export function Autocomplete({
   useOnKeyboard('keyboardDidShow', updatePosition)
   useOnKeyboard('keyboardDidHide', updatePosition)
 
+  const maxWidth = IS_WEB && !fullWidth ? {maxWidth: 300} : {}
+
   return (
     <Portal>
       <Sift
@@ -58,16 +66,7 @@ export function Autocomplete({
         data={data}
         onSelect={onSelect}
         onDismiss={onDismiss}
-        outerStyle={[
-          a.rounded_md,
-          a.w_full,
-          t.atoms.shadow_lg,
-          IS_WEB
-            ? {
-                maxWidth: 300,
-              }
-            : {},
-        ]}
+        outerStyle={[a.rounded_md, a.w_full, t.atoms.shadow_lg, maxWidth]}
         innerStyle={[
           a.overflow_hidden,
           a.rounded_md,
@@ -75,11 +74,7 @@ export function Autocomplete({
           t.atoms.border_contrast_low,
           t.atoms.bg,
           a.w_full,
-          IS_WEB
-            ? {
-                maxWidth: 300,
-              }
-            : {},
+          maxWidth,
         ]}
         render={render}
       />

src/components/Autocomplete/types.ts

@@ -45,4 +45,5 @@ export type AutocompleteItemProps = Parameters<
 export type AutocompleteApi = {
   query: string
   items: AutocompleteItem[]
+  isFetching: boolean
 }

src/components/Autocomplete/useAutocomplete/index.ts

@@ -118,6 +118,7 @@ export function useAutocomplete({
   return {
     query: q,
     items,
+    isFetching: query.isFetching,
   }
 }