@rpcbase/client 0.194.0 → 0.196.0

package/auth/getUid.js

@@ -3,7 +3,7 @@ import {Platform} from "react-native"
 
 import {privateGetUid} from "./index"
 
-const getUid = Platform.OS === "web" ? privateGetUid : () => {
+export const getUid = Platform.OS === "web" ? privateGetUid : () => {
   console.warn("native should not call getUid, use userId from AuthContext")
   return null
 }

package/index.js

@@ -1,6 +1,5 @@
 /* @flow */
 import useRPC from "./helpers/useRPC"
 import useStoredValue from "./helpers/useStoredValue"
-import getUid from "./auth/getUid"
 
-export {getUid, useRPC, useStoredValue}
+export {useRPC, useStoredValue}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpcbase/client",
-  "version": "0.194.0",
+  "version": "0.196.0",
   "scripts": {
     "build": "../../node_modules/.bin/wireit",
     "test": "../../node_modules/.bin/wireit"
@@ -91,15 +91,17 @@
     "figma-squircle": "0.3.1",
     "firebase": "10.12.3",
     "framer-motion": "11.3.22",
+    "fuzzysort": "3.0.2",
     "i18next": "23.12.2",
     "i18next-chained-backend": "4.6.2",
     "i18next-resources-to-backend": "1.2.1",
     "js-tree": "2.0.2",
     "lz-string": "1.5.0",
     "posthog-js": "1.147.0",
-    "pouchdb-adapter-indexeddb": "8.0.1",
-    "pouchdb-core": "8.0.1",
-    "pouchdb-find": "8.0.1",
+    "pouchdb-adapter-indexeddb": "9.0.0",
+    "pouchdb-core": "9.0.0",
+    "pouchdb-find": "9.0.0",
+    "react-bootstrap-typeahead": "6.3.2",
     "react-i18next": "15.0.1",
     "rrweb": "1.1.3",
     "socket.io-client": "4.7.5",

package/rts/getUseQuery/index.js

@@ -1,5 +1,4 @@
 /* @flow */
-import assert from "assert"
 import {Platform} from "react-native"
 import {useCallback, useEffect, useState, useMemo, useId, useRef} from "react"
 import debug from "debug"
@@ -25,9 +24,10 @@ const getUseQuery = (register_query) => (
 ) => {
   const id = useId()
 
+  // TODO: should the uid be gone here ? it's part of the auth layer, not this here
   // TODO: retrieve this from future AuthContext in client
   const uid = useMemo(() => {
-    // TODO: why is there a options.userId here ??
+    // TODO: why is there a options.userId here?? (it was for mobile we need to unify this)
     const _uid = Platform.OS === "web" ? getUid() : options.userId
     return _uid
   }, [])
@@ -75,12 +75,16 @@ const getUseQuery = (register_query) => (
     // set data in a ref so that it doesn't force re-rendering ie: unsubscribe / resubscribe
     dataRef.current = newData
 
+    // useStorage currently used as a fast local cache, indexedDB
     // we only save network queries
+    // TODO: use localstorage in react native and pouchdb everywhere
     if (useStorage && context.source === "network") {
       if (Platform.OS === "web") {
         localStorage.setItem(storageKey, LZString.compressToUTF16(JSON.stringify(newData)))
       } else {
+        // TODO: this is done in pouchDB nOW ?????
         // TODO: RN MMKV
+        console.log("mmkv NYI")
       }
     }
 
@@ -147,7 +151,7 @@ const getUseQuery = (register_query) => (
         newData = _omit(queryResult, "__txn_id")
       }
 
-      // We return once in any case!
+      // we return once in any case
       if (!hasFirstReply.current) {
         hasFirstReply.current = true
 
@@ -168,7 +172,7 @@ const getUseQuery = (register_query) => (
         return
       }
 
-      if (isEqual(data, newData) && !isEqualValues(data, newData) && __DEV__) {
+      if (__DEV__ && isEqual(data, newData) && !isEqualValues(data, newData)) {
         alert("EQUALITY MISMATCH THIS SHOULD NOT HAPPEN!", data, newData)
       }
 
@@ -191,11 +195,11 @@ const getUseQuery = (register_query) => (
 
 
   const loadNextPage = useCallback(() => {
-    console.log("NYI: will load next page after DOC")
+    console.log("loadNextPage NYI")
   }, [])
 
 
-  const result = useMemo(() => ({data, source, error, loading}), [data, source, error, loading])
+  const result = useMemo(() => ({data, source, error, loading, loadNextPage}), [data, source, error, loading, loadNextPage])
 
   // TODO:
   // if (Array.isArray(result.data) && !result.source) {

package/rts/rts.js

@@ -10,6 +10,7 @@ import getBaseUrl from "../getBaseUrl"
 
 import store from "./store"
 
+
 const log = debug("rb:socket")
 
 const TENANT_ID_HEADER = "rb-tenant-id"
@@ -197,8 +198,6 @@ export const register_query = (model_name, query, _options, _callback) => {
   }
   _queries_store[model_name][query]
 
-  console.log("QUERY OPTIONSSS", options)
-
   // TODO: why both run and register query here ? the run_query should come straight from register ?
   _socket.emit("run_query", {model_name, query, query_key, options})
   _socket.emit("register_query", {model_name, query, query_key, options})

package/rts/store/get_collection.js

@@ -6,22 +6,26 @@ import FindPlugin from "pouchdb-find"
 
 import {RB_TENANT_ID, RB_APP_NAME} from "env"
 
+
 const log = debug("rb:rts:store")
 
-let prefix = `rb/${RB_TENANT_ID}/`
+let prefix = `rb/`
 
 if (RB_APP_NAME) prefix += `${RB_APP_NAME}/`
 
+prefix += `${RB_TENANT_ID}/`
+
+log("prefix:", prefix)
+
 PouchDB.prefix = prefix
 
 PouchDB.plugin(IndexedDBAdapter)
 PouchDB.plugin(FindPlugin)
 
-
 const _cols_store = Object.create(null)
 
-
 const get_collection = (col_name) => {
+
   if (!col_name) {
     console.warn("supplied invalid / empty collection name to rts")
   }

package/ui/Search/SearchHistory/index.js

@@ -0,0 +1,41 @@
+import {formatDistance} from "date-fns/formatDistance"
+
+import {useSearchHistory} from "./useSearchHistory"
+
+import "./search-history.scss"
+
+// TODO: refactor out of rbt to be able to control the input
+// TODO: search history must support keyboard navigation
+
+// we pass the searchHistory prop from the top component
+// because we are unmounted when results aren't shown,
+// but we want history to be loaded anyway
+export const SearchHistory = ({setSearchInput}) => {
+  const searchHistory = useSearchHistory()
+
+  const getClickHandler = (item) => (e) => {
+    e.preventDefault()
+    setSearchInput(item.query)
+  }
+
+  return (
+    <>
+      <div className="search-history-header ps-3 pb-2 mt-2 fw-bold border-bottom">
+        Previous Queries
+      </div>
+      {searchHistory.map((item, i) => (
+        <div
+          role="button"
+          key={`search-history-${i}`}
+          className="list-group-item list-group-item-action"
+          onClick={getClickHandler(item)}
+        >
+          <span>{item.query}</span>
+          <small className="text-secondary ms-2">
+            {formatDistance(item.timestamp, new Date(), {addSuffix: true})}
+          </small>
+        </div>
+      ))}
+    </>
+  )
+}

package/ui/Search/SearchHistory/search-history.scss

@@ -0,0 +1,9 @@
+@import "helpers";
+
+.search-history-header {
+  // background: red;
+  color: $gray-500;
+  font-size: 0.875rem;
+
+  // text-transform: uppercase;
+}

package/ui/Search/SearchHistory/useSearchHistory.tsx

@@ -0,0 +1,56 @@
+/* @flow */
+import {useEffect, useState} from "react"
+
+import {useQuery} from "@rpcbase/client/rts"
+import {getUid} from "@rpcbase/client/auth/getUid"
+
+import stripDiacritics from "react-bootstrap-typeahead/cjs/utils/stripDiacritics"
+
+const HISTORY_MAX_RESULTS = 10
+
+export const useSearchHistory = () => {
+  const user_id = getUid()
+
+  const [history, setHistory] = useState([])
+  const historyQuery = useQuery("PersistedEvent", {_owners: {$in: [user_id]}, type: "search_query"})
+
+  // Initial load history
+  useEffect(() => {
+    if (!historyQuery.data) return
+
+    // map sorted items
+    const sorted_items = historyQuery.data
+      .filter((item) => !!item.data)
+      .sort((a, b) => new Date(b._created_at) - new Date(a._created_at))
+      .map((item) => {
+        const query = item.data.query
+        return {
+          query,
+          query_key: stripDiacritics(query.toLowerCase()),
+          timestamp: new Date(item._created_at),
+        }
+      })
+
+    // add values and check for unicity
+    const results = []
+    for (let i = 0; i < sorted_items.length; i++) {
+      // stop if we have reached results limit
+      if (results.length > HISTORY_MAX_RESULTS) {
+        break
+      }
+
+      const item = sorted_items[i]
+
+      // before inserting into results, check if there is another occurrence in results
+      if (results.find((o) => o.query_key === item.query_key)) {
+        continue
+      }
+
+      results.push(item)
+    }
+
+    setHistory(results)
+  }, [historyQuery.data, setHistory])
+
+  return history
+}

package/ui/Search/SearchResults/getActions.js

@@ -0,0 +1,6 @@
+
+const getActions = (pathname) => {
+  return []
+}
+
+export default getActions

package/ui/Search/SearchResults/index.js

@@ -0,0 +1,188 @@
+import assert from "assert"
+import _pick from "lodash/pick"
+import fuzzysort from "fuzzysort"
+
+import page from "../../../page"
+// import {withHashState} from "@rpcbase/client/hashState"
+
+// import COLLECTIONS from "config/collections"
+// import {useEnvContext} from "helpers/EnvContext"
+import {useActiveListItemIndex} from "../../helpers/useActiveListItemIndex"
+import {useScrollSelectorIntoView} from "../../helpers/useScrollSelectorIntoView"
+
+import useCombinedResultsActions from "./useCombinedResultsActions"
+
+// import save_search from "rpc!server/search-indexer/save_search"
+const save_search = async() => null
+
+
+const resolveTargetUrl = (encodeHashLink, item) => {
+  let targetUrl
+
+  // Message
+  if (item._source.type === "message") {
+    const pageUrl = "/channel"
+    const channelId = item._source.channel_id
+    const convId = item._source.conversation_id
+    targetUrl = `${pageUrl}/${channelId}#${encodeHashLink({
+      activeConversationId: convId, // conversation
+      scrollToMessageId: item._id, // highlighted message
+    })}`
+  }
+  // Other items
+  else {
+    const pageUrl = COLLECTIONS[item.meta.collection_name].base_url
+    targetUrl = `${pageUrl}/${item.meta._id}#${encodeHashLink({
+      highlightId: item._id,
+    })}`
+  }
+
+  return targetUrl
+}
+
+const getKey = (i) => `search-anything-item-${i}`
+
+export const SearchResults = ({
+  query,
+  results,
+  searchContext,
+  onCompleteSearch,
+  children,
+}) => {
+  // const envContext = useEnvContext()
+
+  const items = useCombinedResultsActions({query, results})
+
+  // runs when a search result is selected by pressing enter
+  const applyTargetItem = async(item) => {
+    // user pressed enter with no results / nothing selected
+    if (!item) {
+      console.log("user pressed enter but there are no results")
+      return
+    }
+
+    if (item.type === "action") {
+      if (item.hashState) {
+        serializeHashState(item.hashState)
+      } else {
+        console.error("unknown action", item)
+        throw new Error("unknown action")
+      }
+    } else {
+      const targetUrl = resolveTargetUrl(encodeHashLink, item)
+
+      const res = await save_search({
+        group_id: envContext.groupId,
+        data: {
+          query,
+          search_context: _pick(searchContext, ["id", "col"]),
+          result_url: targetUrl,
+        },
+      })
+      assert(res.status === "ok")
+
+      page(targetUrl)
+    }
+  }
+
+  const onSelectItem = (selectedIndex) => {
+    onCompleteSearch()
+    // go to selected item
+    const targetItem = items[selectedIndex]
+    applyTargetItem(targetItem)
+  }
+
+  const {activeItemIndex} = useActiveListItemIndex({items, onSelectItem})
+
+  useScrollSelectorIntoView(`#${getKey(activeItemIndex)}`)
+
+  return (
+    <div>
+      <div className="list-group list-group-flush">
+        {items.map((item, i) => {
+          const key = getKey(i)
+          // Render action
+          if (item.type === "action") {
+            let highlighted = fuzzysort.highlight(fuzzysort.single(query, item.key), "<b>", "</b>")
+
+            if (!highlighted) highlighted = item.key
+
+            const onClick = () => {
+              onSelectItem(i)
+            }
+
+            return (
+              <a
+                id={key}
+                key={key}
+                className={cx(
+                  "list-group-item list-group-item-action d-flex justify-content-between align-items-start",
+                  {active: activeItemIndex === i},
+                )}
+                style={{cursor: "pointer"}}
+                onClick={onClick}
+              >
+                <div className="ms-2 me-auto">
+                  <img
+                    style={{width: 20, height: 20, display: "inline"}}
+                    className="d-inline-flex me-2"
+                    src={`/static/icons/${item.icon}.svg`}
+                  />
+                  <div
+                    className="item-highlight"
+                    style={{display: "inline"}}
+                    dangerouslySetInnerHTML={{__html: highlighted}}
+                  />
+                </div>
+                <span className="badge text-bg-light rounded-pill">
+                  {item.fuzzy_score?.toFixed(2)}
+                </span>
+              </a>
+            )
+          }
+          // Render search result
+          else {
+            const onClick = () => {
+              onCompleteSearch()
+            }
+
+            const targetUrl = resolveTargetUrl(encodeHashLink, item)
+            // TODO: when message, displaySub should be the name of the recipient / sender
+            const displaySub = item._source.type === "message" ? "message" : item.meta.name
+
+            return (
+              <a
+                id={key}
+                key={key}
+                className={cx(
+                  "list-group-item list-group-item-action d-flex justify-content-between align-items-start",
+                  {active: activeItemIndex === i},
+                )}
+                href={targetUrl}
+                onClick={onClick}
+              >
+                <div className="ms-2 me-auto">
+                  {Object.keys(item.highlight).map((highlightKey, j) => (
+                    <div
+                      key={`highlight-${j}`}
+                      className="item-highlight"
+                      dangerouslySetInnerHTML={{__html: item.highlight[highlightKey][0]}}
+                    />
+                  ))}
+                  <small className="fst-italic">{displaySub}</small>
+                </div>
+                <span className="badge text-bg-light rounded-pill">
+                  {item.fuzzy_score?.toFixed(2)}
+                </span>
+                <span className="badge bg-primary rounded-pill">{item._score.toFixed(2)}</span>
+              </a>
+            )
+          }
+        })}
+
+        {/* children can be components like search history, etc */}
+        {children}
+      </div>
+    </div>
+  )
+}

package/ui/Search/SearchResults/useCombinedResultsActions.js

@@ -0,0 +1,59 @@
+/* @flow */
+import {useMemo} from "react"
+import useLocation from "react-use/lib/useLocation"
+import _isNil from "lodash/isNil"
+import fuzzysort from "fuzzysort"
+
+import getActions from "./getActions"
+
+// uses fuzzysort to match and sort results https://github.com/farzher/fuzzysort
+const getResultsWithActions = (query, results, actions) => {
+  // we "fuzzy match sort" all actions and results (with both our fuzzy + elastic key)
+  const rawItems = [...actions, ...results].map((item) => {
+    let fuzzy_score
+
+    // action item
+    if (item.key) {
+      fuzzy_score = fuzzysort.single(query, item.key)?.score
+    }
+    // search result
+    else {
+      // for each highlight compute score, take the highest one
+      const scores = Object
+        // TODO: why do some elastic search results not have a highlight?
+        .keys(item?.highlight || {})
+        .map((key) => fuzzysort.single(query, item.highlight[key][0])?.score)
+        .filter((s) => !_isNil(s))
+        .sort((a, b) => b - a)
+
+      fuzzy_score = scores[0]
+    }
+
+    return {
+      ...item,
+      fuzzy_score,
+    }
+  })
+
+  const sortedItems = rawItems
+    .filter((item) => !_isNil(item.fuzzy_score))
+    .sort((a, b) => b.fuzzy_score - a.fuzzy_score)
+
+  return sortedItems
+}
+
+const useCombinedResultsActions = ({query, results}) => {
+  const location = useLocation()
+
+  const items = useMemo(() => {
+    const actions = getActions(location.pathname)
+
+    const newItems = getResultsWithActions(query, results, actions)
+
+    return newItems
+  }, [results, location.pathname])
+
+  return items
+}
+
+export default useCombinedResultsActions

package/ui/Search/index.tsx

@@ -0,0 +1,301 @@
+import assert from "assert"
+import {useEffect, useState, useContext, useRef, useCallback} from "react"
+import {Typeahead} from "react-bootstrap-typeahead"
+import Overlay from "react-bootstrap/Overlay"
+import _throttle from "lodash/throttle"
+
+import ActivityIndicator from "../ActivityIndicator"
+
+// import ItemContext from "helpers/ItemContext"
+// import {useEnvContext} from "helpers/EnvContext"
+
+import {SearchResults} from "./SearchResults"
+import {SearchHistory} from "./SearchHistory"
+
+// import search_anything from "rpc!server/search-indexer/search_anything"
+// import search_advanced from "rpc!server/search-indexer/advanced/search_advanced"
+// import get_item_info from "rpc!server/items/get_item_info"
+
+import "./search.scss"
+
+// import stripDiacritics from "react-bootstrap-typeahead/cjs/utils/stripDiacritics"
+// TODO: at this point we don't use any rbt features, it's best to remove it from here
+// and reimplement the token + input rendering ourselves
+
+const MIN_SEARCH_LENGTH = 2
+// TODO: i18n placeholder
+const PLACEHOLDER = "Search..."
+
+export const Search = ({
+  minLength = MIN_SEARCH_LENGTH,
+  onSearch,
+}: {
+  minLength?: number
+  onSearch: (queryStr: string) => Array<any>
+}) => {
+  // const envContext = useEnvContext()
+  // const itemContext = useContext(ItemContext)
+
+  const typeaheadRef = useRef()
+  const wrapperRef = useRef()
+
+  const [results, setResults] = useState([])
+  const [isLoading, setIsLoading] = useState(false)
+  const [isFocused, setIsFocused] = useState(false)
+  const [showResults, setShowResults] = useState(false)
+  const [currentInputValue, setCurrentInputValue] = useState("")
+
+  const [selected, setSelected] = useState([{id: null, name: ""}])
+
+  const onShortcutToggle = () => {
+    if (!showResults) {
+      typeaheadRef.current?.focus()
+    }
+    if (showResults) {
+      setShowResults(false)
+    }
+  }
+
+  useEffect(() => {
+    // this event triggerred from hot keys in router as it must be a global listener
+    document.body.addEventListener("toggle-search-anything", onShortcutToggle)
+
+    return () => document.body.removeEventListener("toggle-search-anything", onShortcutToggle)
+  }, [])
+
+  useEffect(() => {
+    // TODO: do not load if name in cache?
+    // TODO: reapply selection when navigation changes
+    // if (itemContext.id && selected.length > 0 && itemContext.id !== selected[0]?.id) {
+    //   const load = async() => {
+    //     const res = await get_item_info({id: itemContext.id, col: itemContext.col})
+    //     assert(res.status === "ok")
+    //     setSelected([{id: itemContext.id, col: itemContext.col, name: res.name}])
+    //   }
+    //   load()
+    // }
+  // }, [itemContext, selected, setSelected])
+  }, [])
+
+  const onFocus = (e: SyntheticFocusEvent<HTMLElement>) => {
+    setShowResults(true)
+    setIsFocused(true)
+
+    // TODO: we should only select it when we are sure the user didn't lose focus
+    // by focusing out of the tab for instance
+    // Select the input text when focusing
+    typeaheadRef.current.getInput().select()
+    // if (e.type === "click") {
+    //   return
+    // }
+  }
+
+  const onBlur = () => {
+    console.log("onBlur: disabling menu")
+    // TODO: we should hide the menu in most blur cases
+    setIsFocused(false)
+  }
+
+  const onChange = (selection) => {
+    assert([0, 1].includes(selection.length), "unknown selection length")
+
+    console.log("selection change", selection)
+
+    if (selection.length === 0) {
+      console.log("apply selection change")
+      setSelected([])
+      return
+    }
+  }
+
+  const onSearchCallback = useRef(
+    _throttle(
+      async(queryStr: string) => {
+        // used to not set loader before 100ms delay (if search is too fast)
+        const tm = setTimeout(() => {
+          setIsLoading(true)
+        }, 100)
+
+        // const res = await search_anything({
+        //   group_id: envContext.groupId,
+        //   str,
+        // })
+
+        const results = await onSearch(queryStr)
+
+        // assert(res.status === "ok")
+        // console.log("search res", res)
+
+        setResults(results)
+        clearTimeout(tm)
+        setIsLoading(false)
+      },
+      200,
+      {leading: true, trailing: true},
+    ),
+  ).current
+
+  // const onSearchAdvanced = useRef(
+  //   _throttle(
+  //     async(str: string) => {
+  //       const search_context = selected[0]
+  //       let res
+  //       // TMP
+  //       try {
+  //         // res = await search_advanced({
+  //         //   group_id: envContext.groupId,
+  //         //   query: str,
+  //         //   search_context,
+  //         // })
+  //         console.log("TMP: search advanced is disabled", search_context, search_advanced)
+  //       } catch (err) {
+  //         console.log("advanced search got error", err)
+  //         return
+  //       }
+  //       console.log("onSearchAdvanced res", res)
+  //     },
+  //     1000,
+  //     {leading: false},
+  //   ),
+  // ).current
+
+  // perform search when input changes
+  useEffect(() => {
+    const val = currentInputValue
+    if (val.length >= minLength) {
+      onSearchCallback(val)
+    } else {
+      console.log("TODO: search input < minLength, clear results")
+    }
+  }, [currentInputValue])
+
+  const onInputChange = (v) => {
+    setCurrentInputValue(v)
+  }
+
+  const onHideResults = (e) => {
+    // console.log("hide results wow", e)
+    // when clicking on anything inside the input, we do not close menu
+    if (e instanceof MouseEvent) {
+      const {target} = e
+      if (wrapperRef.current?.contains(target)) {
+        return
+      }
+    }
+    // also blur the input when closing the menu
+    // typeaheadRef.current?.clear()
+    typeaheadRef.current?.blur()
+    setShowResults(false)
+  }
+
+  // clears the input (but preserves the token "scope" if there is one)
+  const getClearHandler = (onClear) => () => {
+    typeaheadRef.current?.clear()
+    typeaheadRef.current?.focus()
+
+    // requestAnimationFrame(() => {
+    //   // this.typeaheadRef.current?.focus()
+    // })
+  }
+
+  const setSearchInput = (v) => {
+    setCurrentInputValue(v)
+  }
+
+  const onCompleteSearch = useCallback(() => {
+    typeaheadRef.current?.blur()
+    typeaheadRef.current?.clear()
+    setCurrentInputValue("")
+    setShowResults(false)
+  }, [])
+
+  const showClearButton = () => !isLoading && currentInputValue !== ""
+
+  const hasAdvancedResults = false
+
+  return (
+    <>
+      <div
+        id="search-anything-wrapper"
+        ref={wrapperRef}
+        className="d-flex mx-auto w-100"
+        // style={{height: 32, position: "relative", maxWidth: 804}}
+        style={{height: 32, position: "relative"}}
+      >
+        <Typeahead
+          id="search-anything"
+          ref={typeaheadRef}
+          className={cx("search-anything-typeahead w-100", {"is-focused": isFocused})}
+          placeholder={PLACEHOLDER}
+          inputProps={{
+            placeholder: PLACEHOLDER,
+          }}
+          labelKey={"name"}
+          renderMenu={() => null}
+          onInputChange={onInputChange}
+          multiple
+          allowNew={true} // is this prop doing anything in our case?
+          onFocus={onFocus}
+          onBlur={onBlur}
+          onChange={onChange}
+          selected={selected}
+          options={selected}
+        >
+          {({onClear}) => (
+            <div className="rbt-aux">
+              {showClearButton() && (
+                <button
+                  className="btn btn-link link-secondary me-2"
+                  onClick={getClearHandler(onClear)}
+                  style={{display: "block", zIndex: 1, pointerEvents: "auto"}}
+                >
+                  clear
+                </button>
+              )}
+              {isLoading && <ActivityIndicator />}
+              {hasAdvancedResults && (
+                <div>
+                  <kbd>⌘+↵</kbd>
+                </div>
+              )}
+            </div>
+          )}
+        </Typeahead>
+      </div>
+
+      <Overlay
+        target={wrapperRef.current}
+        container={wrapperRef.current}
+        placement="bottom"
+        show={showResults}
+        transition={false}
+        onHide={onHideResults}
+        rootClose={true}
+        rootCloseEvent={"mousedown"}
+      >
+        {({style, ...overlayProps}) => (
+          <div
+            id="search-anything-overlay"
+            {...overlayProps}
+            className="shadow-lg"
+            style={{
+              ...style,
+              top: 7,
+              left: -1,
+              right: -3,
+            }}
+          >
+            <SearchResults
+              query={currentInputValue.trim()}
+              results={results}
+              onCompleteSearch={onCompleteSearch}
+              searchContext={selected[0]}
+            >
+              <SearchHistory setSearchInput={setSearchInput} />
+            </SearchResults>
+          </div>
+        )}
+      </Overlay>
+    </>
+  )
+}

package/ui/View/index.web.js

@@ -1,7 +1,6 @@
 /* @flow */
 import {forwardRef} from "react"
-import Tooltip from "react-bootstrap/Tooltip"
-import OverlayTrigger from "react-bootstrap/OverlayTrigger"
+import {OverlayTrigger, Tooltip} from "react-bootstrap"
 
 
 export const View = forwardRef(

package/ui/helpers/useActiveListItemIndex/index.tsx

@@ -0,0 +1,42 @@
+import {useState, useEffect} from "react"
+
+export const useActiveListItemIndex = ({items, activeItem, onSelectItem}) => {
+  const [activeItemIndex, setActiveItemIndex] = useState(() => {
+    let initialIndex = items.findIndex((item) => item.obj?._id === activeItem?._id)
+    if (!initialIndex) initialIndex = 0
+    return initialIndex
+  })
+
+  useEffect(() => {
+    const onKeyDown = (e) => {
+      if (e.key === "ArrowDown") {
+        // increment
+        if (activeItemIndex < items.length - 1) setActiveItemIndex(activeItemIndex + 1)
+        // cycle back to 0
+        else setActiveItemIndex(0)
+      } else if (e.key === "ArrowUp") {
+        // decrement
+        if (activeItemIndex > 0) setActiveItemIndex(activeItemIndex - 1)
+        // cycle back to almost last item
+        else setActiveItemIndex(items.length - 1)
+      } else if (e.key === "Enter") {
+        onSelectItem(activeItemIndex)
+      }
+    }
+
+    document.addEventListener("keydown", onKeyDown)
+
+    return () => {
+      document.removeEventListener("keydown", onKeyDown)
+    }
+  }, [activeItemIndex, items, onSelectItem])
+
+  // reset when out of bounds (or items changed)
+  useEffect(() => {
+    if (activeItemIndex > items.length) {
+      setActiveItemIndex(0)
+    }
+  }, [activeItemIndex, items])
+
+  return {activeItemIndex}
+}

package/ui/helpers/useScrollSelectorIntoView/index.tsx

@@ -0,0 +1,14 @@
+import {useEffect} from "react"
+
+
+export const useScrollSelectorIntoView = (selector) => {
+  // scroll element into view if necessary
+  useEffect(() => {
+    const el = document.querySelector(selector)
+    if (!el) return
+    // TODO: check if element is visible and only scroll if it's not visible
+    // https://htmldom.dev/check-if-an-element-is-visible-in-a-scrollable-container/
+
+    el?.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"})
+  }, [selector])
+}