diff --git a/package.json b/package.json index 26ebf396b..21c535760 100644 --- a/package.json +++ b/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", diff --git a/src/DocSearch.tsx b/src/DocSearch.tsx index 36ffabbcc..49f9add9e 100644 --- a/src/DocSearch.tsx +++ b/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: { diff --git a/src/DocSearchButton.tsx b/src/DocSearchButton.tsx index 4fedfd4c0..d987a5eee 100644 --- a/src/DocSearchButton.tsx +++ b/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 +>; + 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 - > + DocSearchButtonProps >((props, ref) => { const [key, setKey] = useState(() => isAppleDevice() ? ACTION_KEY_APPLE : ACTION_KEY_DEFAULT diff --git a/src/DocSearchModal.tsx b/src/DocSearchModal.tsx index 67681d2ff..3075787a6 100644 --- a/src/DocSearchModal.tsx +++ b/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; } diff --git a/src/NoResultsScreen.tsx b/src/NoResultsScreen.tsx index 9e916d75c..40bea85b8 100644 --- a/src/NoResultsScreen.tsx +++ b/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; - inputRef: React.MutableRefObject; - indexName: string; -} +type NoResultsScreenProps = ScreenStateProps; export function NoResultsScreen(props: NoResultsScreenProps) { - const searchSuggestions: string[] | undefined = - props.state.context.searchSuggestions; + const searchSuggestions: string[] | undefined = props.state.context + .searchSuggestions as string[]; return (
diff --git a/src/Results.tsx b/src/Results.tsx index 8767d849c..0b38e7dde 100644 --- a/src/Results.tsx +++ b/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 extends AutocompleteApi< @@ -27,10 +24,7 @@ interface ResultsProps 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( @@ -78,7 +72,7 @@ function Result({ 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); diff --git a/src/ResultsScreen.tsx b/src/ResultsScreen.tsx index fed1a12da..229b42803 100644 --- a/src/ResultsScreen.tsx +++ b/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; - resultsFooterComponent(props: { - state: AutocompleteState; - }): JSX.Element; - onItemClick(item: InternalDocSearchHit): void; -} +type ResultsScreenProps = ScreenStateProps; export function ResultsScreen(props: ResultsScreenProps) { return ( @@ -73,9 +58,11 @@ export function ResultsScreen(props: ResultsScreenProps) { ); })} -
- -
+ {props.resultsFooterComponent && ( +
+ +
+ )}
); } diff --git a/src/ScreenState.tsx b/src/ScreenState.tsx index 4aa902cb8..b21cb5bb8 100644 --- a/src/ScreenState.tsx +++ b/src/ScreenState.tsx @@ -12,7 +12,7 @@ import { StartScreen } from './StartScreen'; import { StoredSearchPlugin } from './stored-searches'; import { InternalDocSearchHit, StoredDocSearchHit } from './types'; -interface ScreenStateProps +export interface ScreenStateProps extends AutocompleteApi< TItem, React.FormEvent, @@ -22,10 +22,12 @@ interface ScreenStateProps state: AutocompleteState; recentSearches: StoredSearchPlugin; favoriteSearches: StoredSearchPlugin; - onItemClick(item: StoredDocSearchHit): void; + onItemClick(item: InternalDocSearchHit): void; inputRef: React.MutableRefObject; 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 ( - )} - hasSuggestions={hasSuggestions} - /> - ); + return ; } if (hasSuggestions === false) { diff --git a/src/StartScreen.tsx b/src/StartScreen.tsx index 0e901667b..e0329c4a8 100644 --- a/src/StartScreen.tsx +++ b/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; +interface StartScreenProps extends ScreenStateProps { hasSuggestions: boolean; - onItemClick(item: StoredDocSearchHit): void; - recentSearches: StoredSearchPlugin; - favoriteSearches: StoredSearchPlugin; - disableUserPersonalization: boolean; } export function StartScreen(props: StartScreenProps) { diff --git a/src/types/InternalDocSearchHit.ts b/src/types/InternalDocSearchHit.ts index bf518ce91..136aca0dc 100644 --- a/src/types/InternalDocSearchHit.ts +++ b/src/types/InternalDocSearchHit.ts @@ -1,5 +1,5 @@ import { DocSearchHit } from './DocSearchHit'; export type InternalDocSearchHit = DocSearchHit & { - __docsearch_parent: null | DocSearchHit; + __docsearch_parent: null | InternalDocSearchHit; }; diff --git a/src/useDocSearchKeyboardEvents.ts b/src/useDocSearchKeyboardEvents.ts index ceaf30916..3d06c964e 100644 --- a/src/useDocSearchKeyboardEvents.ts +++ b/src/useDocSearchKeyboardEvents.ts @@ -1,6 +1,6 @@ import React from 'react'; -interface UseDocSearchKeyboardEventsProps { +export interface UseDocSearchKeyboardEventsProps { isOpen: boolean; onOpen(): void; onClose(): void;