feat(docsearch): add DocSearch component

packages/docsearch-react/src/DocSearch.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { createPortal } from 'react-dom';
+import { PublicAutocompleteOptions } from '@francoischalifour/autocomplete-core';
+
+import { DocSearchHit, InternalDocSearchHit } from './types';
+import { DocSearchButton } from './DocSearchButton';
+import { DocSearchModal } from './DocSearchModal';
+import { useDocSearchKeyboardEvents } from './useDocSearchKeyboardEvents';
+
+export interface DocSearchProps
+  extends Pick<PublicAutocompleteOptions<InternalDocSearchHit>, 'navigator'> {
+  appId?: string;
+  apiKey: string;
+  indexName: string;
+  placeholder?: string;
+  searchParameters?: any;
+  transformItems?(items: DocSearchHit[]): DocSearchHit[];
+  hitComponent?(props: {
+    hit: DocSearchHit;
+    children: React.ReactNode;
+  }): JSX.Element;
+}
+
+export function DocSearch(props: DocSearchProps) {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const onOpen = React.useCallback(
+    function onOpen() {
+      setIsOpen(true);
+    },
+    [setIsOpen]
+  );
+
+  const onClose = React.useCallback(
+    function onClose() {
+      setIsOpen(false);
+    },
+    [setIsOpen]
+  );
+
+  useDocSearchKeyboardEvents({ isOpen, onOpen, onClose });
+
+  return (
+    <>
+      <DocSearchButton onClick={onOpen} />
+
+      {isOpen &&
+        createPortal(
+          <DocSearchModal {...props} onClose={onClose} />,
+          document.body
+        )}
+    </>
+  );
+}

packages/docsearch-react/src/DocSearchModal.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import {
   createAutocomplete,
   AutocompleteState,
-  PublicAutocompleteOptions,
 } from '@francoischalifour/autocomplete-core';
 import { getAlgoliaHits } from '@francoischalifour/autocomplete-preset-algolia';
 
@@ -17,24 +16,14 @@ import { createStoredSearches } from './stored-searches';
 import { useSearchClient } from './useSearchClient';
 import { useTrapFocus } from './useTrapFocus';
 import { useTouchEvents } from './useTouchEvents';
+import { DocSearchProps } from './DocSearch';
 import { Hit } from './Hit';
 import { SearchBox } from './SearchBox';
 import { ScreenState } from './ScreenState';
 import { Footer } from './Footer';
 
-interface DocSearchProps
-  extends Pick<PublicAutocompleteOptions<InternalDocSearchHit>, 'navigator'> {
-  appId?: string;
-  apiKey: string;
-  indexName: string;
-  placeholder?: string;
-  searchParameters?: any;
+interface DocSearchModalProps extends DocSearchProps {
   onClose?(): void;
-  transformItems?(items: DocSearchHit[]): DocSearchHit[];
-  hitComponent?(props: {
-    hit: DocSearchHit;
-    children: React.ReactNode;
-  }): JSX.Element;
 }
 
 export function DocSearchModal({
@@ -47,7 +36,7 @@ export function DocSearchModal({
   transformItems = (x) => x,
   hitComponent = Hit,
   navigator,
-}: DocSearchProps) {
+}: DocSearchModalProps) {
   const [state, setState] = React.useState<
     AutocompleteState<InternalDocSearchHit>
   >({

packages/docsearch-react/src/index.ts

@@ -1,3 +1,4 @@
-export * from './DocSearchModal';
+export * from './DocSearch';
 export * from './DocSearchButton';
+export * from './DocSearchModal';
 export * from './useDocSearchKeyboardEvents';

packages/website/src/theme/SearchBar/index.js

@@ -33,8 +33,8 @@ function SearchBar() {
     return Promise.all([
       import('@francoischalifour/docsearch-react/modal'),
       import('@francoischalifour/docsearch-react/style'),
-    ]).then(([{ DocSearchModal: DocSearchModalComponent }]) => {
-      DocSearchModal = DocSearchModalComponent;
+    ]).then(([{ DocSearchModal: Modal }]) => {
+      DocSearchModal = Modal;
     });
   }, []);