diff --git a/packages/react-instantsearch-core/src/components/AutocompleteWrapper.tsx b/packages/react-instantsearch-core/src/components/AutocompleteWrapper.tsx deleted file mode 100644 index b13075f058f..00000000000 --- a/packages/react-instantsearch-core/src/components/AutocompleteWrapper.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react'; - -import { useIndexContext } from '../lib/useIndexContext'; - -import { Index } from './Index'; - -export type AutocompleteWrapperProps = { - children: React.ReactNode; -}; - -export function EXPERIMENTAL_AutocompleteWrapper({ - children, -}: AutocompleteWrapperProps) { - const parentIndex = useIndexContext(); - - const parentIndexName = parentIndex.getIndexName(); - - return ( - - {children} - - ); -} diff --git a/packages/react-instantsearch-core/src/hooks/useAutocomplete.ts b/packages/react-instantsearch-core/src/hooks/useAutocomplete.ts deleted file mode 100644 index 9f8b370c2e9..00000000000 --- a/packages/react-instantsearch-core/src/hooks/useAutocomplete.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { useSearchBox } from '../connectors/useSearchBox'; - -export function EXPERIMENTAL_useAutocomplete() { - const { query, refine } = useSearchBox(); - - return { - query, - refine, - }; -} diff --git a/packages/react-instantsearch-core/src/index.ts b/packages/react-instantsearch-core/src/index.ts index 202df164d73..4cdc1c8fe7f 100644 --- a/packages/react-instantsearch-core/src/index.ts +++ b/packages/react-instantsearch-core/src/index.ts @@ -1,5 +1,4 @@ export { default as version } from './version'; -export * from './components/AutocompleteWrapper'; export * from './components/Configure'; export * from './components/DynamicWidgets'; export * from './components/Index'; @@ -31,7 +30,6 @@ export * from './connectors/useStats'; export * from './connectors/useToggleRefinement'; export * from './connectors/useTrendingItems'; export * from './connectors/useLookingSimilar'; -export * from './hooks/useAutocomplete'; export * from './hooks/useConnector'; export * from './hooks/useInstantSearch'; export * from './lib/wrapPromiseWithState'; diff --git a/packages/react-instantsearch/src/components/Autocomplete.tsx b/packages/react-instantsearch/src/components/Autocomplete.tsx index 21daa05e5da..ecce449281a 100644 --- a/packages/react-instantsearch/src/components/Autocomplete.tsx +++ b/packages/react-instantsearch/src/components/Autocomplete.tsx @@ -1,19 +1,30 @@ import React from 'react'; -import { - EXPERIMENTAL_AutocompleteWrapper as AutocompleteWrapper, - EXPERIMENTAL_useAutocomplete as useAutocomplete, -} from 'react-instantsearch-core'; +import { Index } from 'react-instantsearch-core'; -export function EXPERIMENTAL_Autocomplete() { - return ( - - - - ); -} +import { Hits, SearchBox } from '../widgets'; + +import type { BaseHit, Hit } from 'instantsearch.js'; -function AutocompleteInner() { - useAutocomplete(); +type IndexConfig = Hit> = { + indexName: string; + getQuery?: (item: TItem) => string; + getURL?: (item: TItem) => string; + itemComponent: React.ComponentType | React.ComponentType; +}; - return null; +export type AutocompleteProps = { + indices: IndexConfig[]; +}; + +export function EXPERIMENTAL_Autocomplete({ indices }: AutocompleteProps) { + return ( + + + {indices.map((index) => ( + + } /> + + ))} + + ); } diff --git a/packages/react-instantsearch/src/components/__tests__/Autocomplete.test.tsx b/packages/react-instantsearch/src/components/__tests__/Autocomplete.test.tsx new file mode 100644 index 00000000000..3a8c6b504ff --- /dev/null +++ b/packages/react-instantsearch/src/components/__tests__/Autocomplete.test.tsx @@ -0,0 +1,59 @@ +/** + * @jest-environment jsdom + */ + +import { + createMultiSearchResponse, + createSearchClient, + createSingleSearchResponse, +} from '@instantsearch/mocks'; +import { InstantSearchTestWrapper } from '@instantsearch/testutils'; +import { render, screen } from '@testing-library/react'; +import React from 'react'; + +import { EXPERIMENTAL_Autocomplete } from '../Autocomplete'; + +describe('Autocomplete', () => { + function createMockedSearchClient() { + return createSearchClient({ + // @ts-expect-error - doesn't properly handle multi index, expects all responses to be of the same type + search: jest.fn(() => + Promise.resolve( + createMultiSearchResponse( + createSingleSearchResponse({ + hits: [{ objectID: '1', name: 'Item 1' }], + }), + // @ts-expect-error - ignore second response type + createSingleSearchResponse({ + hits: [{ objectID: '2', query: 'hello' }], + }) + ) + ) + ), + }); + } + + test('should render a searchbox and indices with hits', async () => { + const searchClient = createMockedSearchClient(); + render( + + props.name, + }, + { + indexName: 'indexName2', + itemComponent: (props: { query: string }) => props.query, + }, + ]} + /> + + ); + + expect(await screen.findByText('Item 1')).toBeInTheDocument(); + expect(await screen.findByText('hello')).toBeInTheDocument(); + expect(screen.getByRole('searchbox')).toBeInTheDocument(); + }); +});