feat(docsearch): export DocSearch types

package.json

@@ -23,7 +23,7 @@
   "unpkg": "dist/umd/index.js",
   "jsdelivr": "dist/umd/index.js",
   "scripts": {
-    "build": "yarn build:clean && yarn build:umd && yarn build:esm",
+    "build": "yarn build:clean && yarn build:umd && yarn build:esm && yarn build:types",
     "build:esm": "babel src --root-mode upward --extensions '.ts,.tsx' --out-dir dist/esm",
     "build:umd": "rollup --config",
     "build:types": "tsc -p ./tsconfig.declaration.json --outDir ./dist/esm",

src/DocSearch.tsx

@@ -7,7 +7,12 @@ import { createPortal } from 'react-dom';
 
 import { DocSearchButton } from './DocSearchButton';
 import { DocSearchModal } from './DocSearchModal';
-import { DocSearchHit, InternalDocSearchHit, SearchClient } from './types';
+import {
+  DocSearchHit,
+  InternalDocSearchHit,
+  StoredDocSearchHit,
+  SearchClient,
+} from './types';
 import { useDocSearchKeyboardEvents } from './useDocSearchKeyboardEvents';
 
 export interface DocSearchProps
@@ -19,7 +24,7 @@ export interface DocSearchProps
   searchParameters?: any;
   transformItems?(items: DocSearchHit[]): DocSearchHit[];
   hitComponent?(props: {
-    hit: DocSearchHit;
+    hit: InternalDocSearchHit | StoredDocSearchHit;
     children: React.ReactNode;
   }): JSX.Element;
   resultsFooterComponent?(props: {

src/DocSearchButton.tsx

@@ -3,6 +3,11 @@ import React, { useEffect, useState } from 'react';
 import { ControlKeyIcon } from './icons/ControlKeyIcon';
 import { SearchIcon } from './icons/SearchIcon';
 
+export type DocSearchButtonProps = React.DetailedHTMLProps<
+  React.ButtonHTMLAttributes<HTMLButtonElement>,
+  HTMLButtonElement
+>;
+
 const ACTION_KEY_DEFAULT = 'Ctrl';
 const ACTION_KEY_APPLE = '⌘';
 
@@ -16,10 +21,7 @@ function isAppleDevice() {
 
 export const DocSearchButton = React.forwardRef<
   HTMLButtonElement,
-  React.DetailedHTMLProps<
-    React.ButtonHTMLAttributes<HTMLButtonElement>,
-    HTMLButtonElement
-  >
+  DocSearchButtonProps
 >((props, ref) => {
   const [key, setKey] = useState(() =>
     isAppleDevice() ? ACTION_KEY_APPLE : ACTION_KEY_DEFAULT

src/DocSearchModal.tsx

@@ -22,7 +22,7 @@ import { useTouchEvents } from './useTouchEvents';
 import { useTrapFocus } from './useTrapFocus';
 import { groupBy, identity, noop } from './utils';
 
-interface DocSearchModalProps extends DocSearchProps {
+export interface DocSearchModalProps extends DocSearchProps {
   initialScrollY: number;
   onClose?(): void;
 }

src/NoResultsScreen.tsx

@@ -1,27 +1,14 @@
-import {
-  AutocompleteApi,
-  AutocompleteState,
-} from '@francoischalifour/autocomplete-core';
 import React from 'react';
 
 import { NoResultsIcon } from './icons';
+import { ScreenStateProps } from './ScreenState';
 import { InternalDocSearchHit } from './types';
 
-interface NoResultsScreenProps
-  extends AutocompleteApi<
-    InternalDocSearchHit,
-    React.FormEvent,
-    React.MouseEvent,
-    React.KeyboardEvent
-  > {
-  state: AutocompleteState<InternalDocSearchHit>;
-  inputRef: React.MutableRefObject<null | HTMLInputElement>;
-  indexName: string;
-}
+type NoResultsScreenProps = ScreenStateProps<InternalDocSearchHit>;
 
 export function NoResultsScreen(props: NoResultsScreenProps) {
-  const searchSuggestions: string[] | undefined =
-    props.state.context.searchSuggestions;
+  const searchSuggestions: string[] | undefined = props.state.context
+    .searchSuggestions as string[];
 
   return (
     <div className="DocSearch-NoResults">

src/Results.tsx

@@ -4,12 +4,9 @@ import {
 } from '@francoischalifour/autocomplete-core';
 import React from 'react';
 
+import { DocSearchProps } from './DocSearch';
 import { Snippet } from './Snippet';
-import {
-  DocSearchHit,
-  InternalDocSearchHit,
-  StoredDocSearchHit,
-} from './types';
+import { InternalDocSearchHit, StoredDocSearchHit } from './types';
 
 interface ResultsProps<TItem>
   extends AutocompleteApi<
@@ -27,10 +24,7 @@ interface ResultsProps<TItem>
     runFavoriteTransition: (cb: () => void) => void;
   }): React.ReactNode;
   onItemClick(item: TItem): void;
-  hitComponent(props: {
-    hit: DocSearchHit;
-    children: React.ReactNode;
-  }): JSX.Element;
+  hitComponent: DocSearchProps['hitComponent'];
 }
 
 export function Results<TItem extends StoredDocSearchHit>(
@@ -78,7 +72,7 @@ function Result<TItem extends StoredDocSearchHit>({
   const [isDeleting, setIsDeleting] = React.useState(false);
   const [isFavoriting, setIsFavoriting] = React.useState(false);
   const action = React.useRef<(() => void) | null>(null);
-  const Hit = hitComponent;
+  const Hit = hitComponent!;
 
   function runDeleteTransition(cb: () => void) {
     setIsDeleting(true);

src/ResultsScreen.tsx

@@ -1,26 +1,11 @@
-import {
-  AutocompleteApi,
-  AutocompleteState,
-} from '@francoischalifour/autocomplete-core';
 import React from 'react';
 
 import { SelectIcon, SourceIcon } from './icons';
 import { Results } from './Results';
+import { ScreenStateProps } from './ScreenState';
 import { InternalDocSearchHit } from './types';
 
-interface ResultsScreenProps
-  extends AutocompleteApi<
-    InternalDocSearchHit,
-    React.FormEvent,
-    React.MouseEvent,
-    React.KeyboardEvent
-  > {
-  state: AutocompleteState<InternalDocSearchHit>;
-  resultsFooterComponent(props: {
-    state: AutocompleteState<InternalDocSearchHit>;
-  }): JSX.Element;
-  onItemClick(item: InternalDocSearchHit): void;
-}
+type ResultsScreenProps = ScreenStateProps<InternalDocSearchHit>;
 
 export function ResultsScreen(props: ResultsScreenProps) {
   return (
@@ -73,9 +58,11 @@ export function ResultsScreen(props: ResultsScreenProps) {
         );
       })}
 
-      <section className="DocSearch-HitsFooter">
-        <props.resultsFooterComponent state={props.state} />
-      </section>
+      {props.resultsFooterComponent && (
+        <section className="DocSearch-HitsFooter">
+          <props.resultsFooterComponent state={props.state} />
+        </section>
+      )}
     </div>
   );
 }

src/ScreenState.tsx

@@ -12,7 +12,7 @@ import { StartScreen } from './StartScreen';
 import { StoredSearchPlugin } from './stored-searches';
 import { InternalDocSearchHit, StoredDocSearchHit } from './types';
 
-interface ScreenStateProps<TItem>
+export interface ScreenStateProps<TItem>
   extends AutocompleteApi<
     TItem,
     React.FormEvent,
@@ -22,10 +22,12 @@ interface ScreenStateProps<TItem>
   state: AutocompleteState<TItem>;
   recentSearches: StoredSearchPlugin<StoredDocSearchHit>;
   favoriteSearches: StoredSearchPlugin<StoredDocSearchHit>;
-  onItemClick(item: StoredDocSearchHit): void;
+  onItemClick(item: InternalDocSearchHit): void;
   inputRef: React.MutableRefObject<null | HTMLInputElement>;
   hitComponent: DocSearchProps['hitComponent'];
   indexName: DocSearchProps['indexName'];
+  disableUserPersonalization: boolean;
+  resultsFooterComponent: DocSearchProps['resultsFooterComponent'];
 }
 
 export const ScreenState = React.memo(
@@ -39,12 +41,7 @@ export const ScreenState = React.memo(
     );
 
     if (!props.state.query) {
-      return (
-        <StartScreen
-          {...(props as ScreenStateProps<any>)}
-          hasSuggestions={hasSuggestions}
-        />
-      );
+      return <StartScreen {...props} hasSuggestions={hasSuggestions} />;
     }
 
     if (hasSuggestions === false) {

src/StartScreen.tsx

@@ -1,27 +1,12 @@
-import {
-  AutocompleteApi,
-  AutocompleteState,
-} from '@francoischalifour/autocomplete-core';
 import React from 'react';
 
 import { RecentIcon, ResetIcon, StarIcon } from './icons';
 import { Results } from './Results';
-import { StoredSearchPlugin } from './stored-searches';
-import { StoredDocSearchHit } from './types';
+import { ScreenStateProps } from './ScreenState';
+import { InternalDocSearchHit } from './types';
 
-interface StartScreenProps
-  extends AutocompleteApi<
-    StoredDocSearchHit,
-    React.FormEvent,
-    React.MouseEvent,
-    React.KeyboardEvent
-  > {
-  state: AutocompleteState<StoredDocSearchHit>;
+interface StartScreenProps extends ScreenStateProps<InternalDocSearchHit> {
   hasSuggestions: boolean;
-  onItemClick(item: StoredDocSearchHit): void;
-  recentSearches: StoredSearchPlugin<StoredDocSearchHit>;
-  favoriteSearches: StoredSearchPlugin<StoredDocSearchHit>;
-  disableUserPersonalization: boolean;
 }
 
 export function StartScreen(props: StartScreenProps) {

src/types/InternalDocSearchHit.ts

@@ -1,5 +1,5 @@
 import { DocSearchHit } from './DocSearchHit';
 
 export type InternalDocSearchHit = DocSearchHit & {
-  __docsearch_parent: null | DocSearchHit;
+  __docsearch_parent: null | InternalDocSearchHit;
 };

src/useDocSearchKeyboardEvents.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 
-interface UseDocSearchKeyboardEventsProps {
+export interface UseDocSearchKeyboardEventsProps {
   isOpen: boolean;
   onOpen(): void;
   onClose(): void;