react-instantsearch

Breadcrumb: ({
    attributes,
    rootPath,
    separator,
    transformItems,
    translations,
    ...props
}: BreadcrumbProps) => React.JSX.Element;

Carousel: <TObject extends Record<string, unknown>>(
    props: CarouselProps<TObject>
) => React.JSX.Element;

Chat: <
    TObject extends RecordWithObjectID = RecordWithObjectID,
    TUiMessage extends UIMessage = UIMessage
>(
    props: any
) => React.ReactElement | null;

ChatGreeting: (userProps: any) => JSX.Element;

ChatInlineLayout: (userProps: any) => JSX.Element;

ChatMessageLoader: (userProps: any) => JSX.Element;

ChatOverlayLayout: (userProps: any) => JSX.Element;

ChatSidePanelLayout: (userProps: any) => JSX.Element;

ClearRefinements: ({
    includedAttributes,
    excludedAttributes,
    transformItems,
    translations,
    ...props
}: ClearRefinementsProps) => React.JSX.Element;

createDefaultTools: <TObject extends RecordWithObjectID>(
    itemComponent?: RecommendComponentProps<TObject>,
    getSearchPageURL?: (nextUiState: IndexUiState) => string
) => UserClientSideTools;

CurrentRefinements: ({
    includedAttributes,
    excludedAttributes,
    transformItems,
    ...props
}: CurrentRefinementsProps) => React.JSX.Element;

EXPERIMENTAL_Autocomplete: <TItem extends BaseHit = BaseHit>({
    indices,
    showQuerySuggestions,
    showPromptSuggestions,
    showRecent,
    searchParameters: userSearchParameters,
    detachedMediaQuery,
    translations: userTranslations,
    ...props
}: AutocompleteProps<TItem>) => React.JSX.Element;

FilterSuggestions: ({
    agentId,
    attributes,
    maxSuggestions,
    debounceMs,
    hitsToSample,
    transformItems,
    itemComponent,
    headerComponent,
    emptyComponent,
    transport,
    ...props
}: FilterSuggestionsProps) => React.JSX.Element;

FrequentlyBoughtTogether: <THit extends BaseHit = BaseHit>({
    objectIDs,
    limit,
    threshold,
    queryParameters,
    fallbackParameters,
    escapeHTML,
    transformItems,
    itemComponent,
    headerComponent,
    emptyComponent,
    layoutComponent,
    ...props
}: FrequentlyBoughtTogetherProps<THit>) => React.JSX.Element;

HierarchicalMenu: ({
    attributes,
    limit,
    rootPath,
    separator,
    showMore,
    showMoreLimit,
    showParentLevel,
    sortBy,
    transformItems,
    translations,
    ...props
}: HierarchicalMenuProps) => React.JSX.Element;

Highlight: <THit extends Hit<BaseHit>>({
    hit,
    attribute,
    highlightedTagName,
    nonHighlightedTagName,
    separator,
    ...props
}: HighlightProps<THit>) => React.JSX.Element;

Hits: <THit extends BaseHit = BaseHit>({
    escapeHTML,
    transformItems,
    hitComponent: HitComponent,
    bannerComponent: BannerComponent,
    ...props
}: HitsProps<THit>) => React.JSX.Element;

HitsPerPage: ({
    items: userItems,
    transformItems,
    ...props
}: HitsPerPageProps) => React.JSX.Element;

InfiniteHits: <THit extends BaseHit = BaseHit>({
    showPrevious: shouldShowPrevious,
    cache,
    escapeHTML,
    transformItems,
    translations,
    bannerComponent: BannerComponent,
    ...props
}: InfiniteHitsProps<THit>) => React.JSX.Element;

LookingSimilar: <THit extends BaseHit = BaseHit>({
    objectIDs,
    limit,
    threshold,
    queryParameters,
    fallbackParameters,
    escapeHTML,
    transformItems,
    itemComponent,
    headerComponent,
    emptyComponent,
    layoutComponent,
    ...props
}: LookingSimilarProps<THit>) => React.JSX.Element;

Menu: ({
    attribute,
    limit,
    showMore,
    showMoreLimit,
    sortBy,
    transformItems,
    translations,
    ...props
}: MenuProps) => React.JSX.Element;

Pagination: ({
    showFirst,
    showPrevious,
    showNext,
    showLast,
    padding,
    totalPages,
    translations,
    ...props
}: PaginationProps) => React.JSX.Element;

PoweredBy: (props: PoweredByProps) => React.JSX.Element;

RangeInput: ({
    attribute,
    min,
    max,
    precision,
    translations,
    ...props
}: RangeInputProps) => React.JSX.Element;

RefinementList: ({
    searchable,
    searchablePlaceholder,
    searchableSelectOnSubmit,
    attribute,
    operator,
    limit,
    showMore,
    showMoreLimit,
    sortBy,
    escapeFacetValues,
    transformItems,
    translations,
    ...props
}: RefinementListProps) => React.JSX.Element;

RelatedProducts: <TItem extends BaseHit = BaseHit>({
    objectIDs,
    limit,
    threshold,
    fallbackParameters,
    queryParameters,
    escapeHTML,
    transformItems,
    itemComponent,
    headerComponent,
    emptyComponent,
    layoutComponent,
    ...props
}: RelatedProductsProps<TItem>) => React.JSX.Element;

ReverseHighlight: <THit extends Hit<BaseHit>>({
    hit,
    attribute,
    highlightedTagName,
    nonHighlightedTagName,
    separator,
    ...props
}: ReverseHighlightProps<THit>) => React.JSX.Element;

SearchBox: ({
    queryHook,
    searchAsYouType,
    ignoreCompositionEvents,
    aiMode,
    translations,
    ...props
}: SearchBoxProps) => React.JSX.Element;

Snippet: <THit extends Hit<BaseHit>>({
    hit,
    attribute,
    highlightedTagName,
    nonHighlightedTagName,
    separator,
    ...props
}: SnippetProps<THit>) => React.JSX.Element;

SortBy: ({ items, transformItems, ...props }: SortByProps) => React.JSX.Element;

Stats: ({ translations, ...props }: StatsProps) => React.JSX.Element;

ToggleRefinement: ({
    attribute,
    on,
    off,
    ...props
}: ToggleRefinementProps) => React.JSX.Element;

TrendingFacets: ({
    facetName,
    limit,
    threshold,
    fallbackParameters,
    queryParameters,
    escapeHTML,
    transformItems,
    itemComponent,
    headerComponent,
    emptyComponent,
    ...props
}: TrendingFacetsProps) => React.JSX.Element;

TrendingItems: <TItem extends BaseHit = BaseHit>({
    facetName,
    facetValue,
    limit,
    threshold,
    fallbackParameters,
    queryParameters,
    escapeHTML,
    transformItems,
    itemComponent,
    headerComponent,
    emptyComponent,
    layoutComponent,
    ...props
}: TrendingItemsProps<TItem>) => React.JSX.Element;

useStickToBottom: (options?: any) => any;

type AutocompleteProps<TItem extends BaseHit> = ComponentProps<'div'> & {
    indices?: Array<IndexConfig<TItem>>;
    showQuerySuggestions?: Partial<
        Pick<
            IndexConfig<{
                query: string;
            }>,
            | 'indexName'
            | 'getURL'
            | 'headerComponent'
            | 'itemComponent'
            | 'classNames'
            | 'searchParameters'
        >
    >;
    showPromptSuggestions?: Partial<
        Pick<
            IndexConfig<{
                query: string;
                label?: string;
            }>,
            | 'indexName'
            | 'getURL'
            | 'headerComponent'
            | 'itemComponent'
            | 'classNames'
            | 'searchParameters'
        >
    >;
    showRecent?:
        | boolean
        | {
              /**
               * Storage key to use in the local storage.
               */
              storageKey?: string;
              /**
               * Component to use for the header, before the list of items.
               */
              headerComponent?: AutocompleteIndexProps<{
                  query: string;
              }>['HeaderComponent'];
              /**
               * Component to use for each recent search item.
               */
              itemComponent?: AutocompleteIndexProps<{
                  query: string;
              }>['ItemComponent'] & {
                  onRemoveRecentSearch: () => void;
              };
              classNames?: Partial<AutocompleteIndexClassNames>;
          };
    getSearchPageURL?: (nextUiState: IndexUiState) => string;
    onSelect?: AutocompleteIndexConfig<TItem>['onSelect'];
    transformItems?: (
        indices: TransformItemsIndicesConfig[]
    ) => TransformItemsIndicesConfig[];
    panelComponent?: (props: {
        elements: PanelElements;
        indices: ReturnType<typeof useAutocomplete>['indices'];
    }) => React.JSX.Element;
    searchParameters?: AutocompleteSearchParameters;
    classNames?: Partial<AutocompleteClassNames>;
    placeholder?: string;
    /**
     * Whether the input should be focused and the panel open initially.
     */
    autoFocus?: boolean;
    /**
     * Media query to enable detached (mobile) mode.
     * When the media query matches, the autocomplete switches to a full-screen overlay.
     * Set to empty string to disable detached mode.
     * When omitted, defaults to `--ais-autocomplete-detached-media-query`.
     * @default "(max-width: 680px)"
     */
    detachedMediaQuery?: string;
    /**
     * Translations for the Autocomplete widget.
     */
    translations?: Partial<AutocompleteTranslations>;
    /**
     * When true, renders an AI mode button inside the search input
     * that opens the Chat widget and sends the current query.
     * Requires a Chat widget on the same index.
     */
    aiMode?: boolean;
};

type BreadcrumbProps = Omit<BreadcrumbUiProps, keyof UiProps> &
    Omit<UseBreadcrumbProps, 'separator'> & {
        translations?: Partial<UiProps['translations']>;
    };

type CarouselProps<TObject extends Record<string, unknown>> = Omit<
    CarouselUiProps<TObject>,
    | 'listRef'
    | 'nextButtonRef'
    | 'previousButtonRef'
    | 'carouselIdRef'
    | 'canScrollLeft'
    | 'canScrollRight'
    | 'setCanScrollLeft'
    | 'setCanScrollRight'
>;

type ChatHandle = {
    setOpen: (open: boolean) => void;
    sendMessage: (params: { text: string }) => void;
    setInput: (input: string) => void;
};

type ChatProps<TObject, TUiMessage extends UIMessage = UIMessage> = Omit<
    ChatUiProps,
    keyof UiProps | 'ref'
> &
    UseChatProps<TUiMessage> & {
        itemComponent?: ItemComponent<TObject>;
        tools?: UserClientSideTools;
        getSearchPageURL?: (nextUiState: IndexUiState) => string;
        toggleButtonProps?: UserToggleButtonProps;
        headerProps?: UserHeaderProps;
        messagesProps?: UserMessagesProps;
        promptProps?: UserPromptProps;
        layoutComponent?: (props: ChatLayoutOwnProps) => JSX.Element;
        toggleButtonComponent?: ChatUiProps['toggleButtonComponent'];
        toggleButtonIconComponent?: ChatUiProps['toggleButtonProps']['toggleIconComponent'];
        headerComponent?: ChatUiProps['headerComponent'];
        headerTitleIconComponent?: ChatUiProps['headerProps']['titleIconComponent'];
        headerCloseIconComponent?: ChatUiProps['headerProps']['closeIconComponent'];
        headerMinimizeIconComponent?: ChatUiProps['headerProps']['minimizeIconComponent'];
        headerMaximizeIconComponent?: ChatUiProps['headerProps']['maximizeIconComponent'];
        messagesErrorComponent?: ChatUiProps['messagesProps']['errorComponent'];
        promptComponent?: ChatUiProps['promptComponent'];
        promptHeaderComponent?: ChatUiProps['promptProps']['headerComponent'];
        promptFooterComponent?: ChatUiProps['promptProps']['footerComponent'];
        loaderComponent?: ChatUiProps['messagesProps']['loaderComponent'];
        emptyComponent?: ChatUiProps['messagesProps']['emptyComponent'];
        actionsComponent?: ChatUiProps['messagesProps']['actionsComponent'];
        assistantMessageLeadingComponent?: ChatMessageProps['leadingComponent'];
        assistantMessageFooterComponent?: ChatMessageProps['footerComponent'];
        userMessageLeadingComponent?: ChatMessageProps['leadingComponent'];
        userMessageFooterComponent?: ChatMessageProps['footerComponent'];
        suggestionsComponent?: ChatUiProps['suggestionsComponent'];
        translations?: Partial<{
            prompt: ChatUiProps['promptProps']['translations'];
            header: ChatUiProps['headerProps']['translations'];
            message: ChatUiProps['messagesProps']['messageTranslations'];
            messages: ChatUiProps['messagesProps']['translations'];
        }>;
    };

type ClearRefinementsProps = Omit<ClearRefinementsUiComponentProps, keyof UiProps> &
    UseClearRefinementsProps & {
        translations?: Partial<UiProps['translations']>;
    };

type CurrentRefinementsProps = Omit<
    CurrentRefinementsUiComponentProps,
    keyof UiProps
> &
    UseCurrentRefinementsProps;

type FilterSuggestionsProps = Omit<
    FilterSuggestionsUiComponentProps,
    keyof UiProps
> &
    UseFilterSuggestionsProps & {
        /**
         * Component to render each suggestion item.
         */
        itemComponent?: FilterSuggestionsUiComponentProps['itemComponent'];
        /**
         * Component to render the header. Set to `false` to disable the header.
         */
        headerComponent?: FilterSuggestionsUiComponentProps['headerComponent'];
        /**
         * Component to render when there are no suggestions.
         */
        emptyComponent?: FilterSuggestionsUiComponentProps['emptyComponent'];
    };

type FrequentlyBoughtTogetherProps<THit extends BaseHit> = Omit<
    FrequentlyBoughtTogetherPropsUiComponentProps<Hit<THit>>,
    keyof UiProps<THit>
> &
    UseFrequentlyBoughtTogetherProps<THit> & {
        itemComponent?: FrequentlyBoughtTogetherPropsUiComponentProps<THit>['itemComponent'];
        headerComponent?: FrequentlyBoughtTogetherPropsUiComponentProps<THit>['headerComponent'];
        emptyComponent?: FrequentlyBoughtTogetherPropsUiComponentProps<THit>['emptyComponent'];
        layoutComponent?: FrequentlyBoughtTogetherPropsUiComponentProps<THit>['layout'];
    };

type HierarchicalMenuProps = Omit<HierarchicalMenuUiComponentProps, keyof UiProps> &
    UseHierarchicalMenuProps & {
        translations?: Partial<UiProps['translations']>;
    };

type HighlightProps<THit extends Hit<BaseHit>> = {
    hit: THit;
    attribute: keyof THit | string[];
} & PartialKeys<
    Omit<HighlightUiComponentProps, 'parts'>,
    'highlightedTagName' | 'nonHighlightedTagName' | 'separator'
>;

type HitsPerPageProps = Omit<HitsPerPageUiComponentProps, keyof UiProps> &
    UseHitsPerPageProps;

type HitsProps<THit extends BaseHit> = Omit<
    HitsUiComponentProps<Hit<THit>>,
    keyof UiProps<THit>
> & {
    hitComponent?: React.JSXElementConstructor<{
        hit: Hit<THit>;
        sendEvent: SendEventForHits;
    }>;
} & {
    bannerComponent?:
        | React.JSXElementConstructor<{
              banner: Required<HitsUiComponentProps<Hit<THit>>>['banner'];
              className: string;
          }>
        | false;
} & UseHitsProps<THit>;

type InfiniteHitsProps<THit extends BaseHit = BaseHit> = Omit<
    InfiniteHitsUiComponentProps<Hit<THit>>,
    keyof UiProps<THit>
> & {
    bannerComponent?:
        | React.JSXElementConstructor<{
              banner: Required<InfiniteHitsUiComponentProps<Hit<THit>>>['banner'];
              className: string;
          }>
        | false;
} & UseInfiniteHitsProps<THit> & {
        /**
         * Displays the "Show Previous" button when the UI is loaded from a page
         * beyond the first one.
         * @default true
         */
        showPrevious?: boolean;
        translations?: Partial<UiProps<THit>['translations']>;
    };

type LookingSimilarProps<THit extends BaseHit> = Omit<
    LookingSimilarPropsUiComponentProps<Hit<THit>>,
    keyof UiProps<THit>
> &
    UseLookingSimilarProps<THit> & {
        itemComponent?: LookingSimilarPropsUiComponentProps<THit>['itemComponent'];
        headerComponent?: LookingSimilarPropsUiComponentProps<THit>['headerComponent'];
        emptyComponent?: LookingSimilarPropsUiComponentProps<THit>['emptyComponent'];
        layoutComponent?: LookingSimilarPropsUiComponentProps<THit>['layout'];
    };

type MenuProps = Omit<MenuUiComponentProps, keyof UiProps> &
    UseMenuProps & {
        translations?: Partial<UiProps['translations']>;
    };

type PaginationProps = Omit<PaginationUiComponentProps, keyof UiProps> &
    UsePaginationProps & {
        translations?: Partial<UiProps['translations']>;
    };

type PoweredByProps = Omit<PoweredByUiComponentProps, keyof UiProps>;

type RangeInputProps = Omit<RangeInputUiProps, keyof UiProps> &
    UseRangeProps & {
        translations?: Partial<UiProps['translations']>;
    };

type RefinementListProps = Omit<RefinementListUiComponentProps, keyof UiProps> &
    UseRefinementListProps &
    Pick<
        RefinementListWidgetParams,
        'searchable' | 'searchablePlaceholder' | 'searchableSelectOnSubmit'
    > & {
        translations?: Partial<
            UiProps['translations'] & {
                submitButtonTitle: string;
                resetButtonTitle: string;
                /**
                 * What to display when there are no results.
                 */
                noResultsText: string;
            }
        >;
    };

type RelatedProductsProps<TItem extends BaseHit> = Omit<
    RelatedProductsUiComponentProps<TItem>,
    keyof UiProps<TItem>
> &
    UseRelatedProductsProps & {
        itemComponent?: RelatedProductsUiComponentProps<TItem>['itemComponent'];
        headerComponent?: RelatedProductsUiComponentProps<TItem>['headerComponent'];
        emptyComponent?: RelatedProductsUiComponentProps<TItem>['emptyComponent'];
        layoutComponent?: RelatedProductsUiComponentProps<TItem>['layout'];
    };

type ReverseHighlightProps<THit extends Hit<BaseHit>> = {
    hit: THit;
    attribute: keyof THit | string[];
} & PartialKeys<
    Omit<ReverseHighlightUiComponentProps, 'parts'>,
    'highlightedTagName' | 'nonHighlightedTagName' | 'separator'
>;

type SearchBoxProps = Omit<
    SearchBoxUiComponentProps,
    Exclude<keyof UiProps, 'onSubmit' | 'autoFocus'>
> &
    UseSearchBoxProps & {
        /**
         * Whether to trigger the search only on submit.
         * @default true
         */
        searchAsYouType?: boolean;
        /**
         * Whether to update the search state in the middle of a
         * composition session.
         * @default false
         */
        ignoreCompositionEvents?: boolean;
        /**
         * When true, renders an AI mode button inside the search box
         * that opens the Chat widget and sends the current query.
         * Requires a Chat widget on the same index.
         */
        aiMode?: boolean;
        translations?: Partial<UiProps['translations']>;
    };

type SnippetProps<THit extends Hit<BaseHit>> = {
    hit: THit;
    attribute: keyof THit | string[];
} & PartialKeys<
    Omit<SnippetUiComponentProps, 'parts'>,
    'highlightedTagName' | 'nonHighlightedTagName' | 'separator'
>;

type SortByProps = Omit<SortByUiComponentProps, keyof UiProps> & UseSortByProps;

type StatsProps = Omit<StatsUiComponentProps, keyof UiProps> &
    UseStatsProps & {
        translations?: Partial<UiProps['translations']>;
    };

type ToggleRefinementProps = PartialKeys<
    Omit<ToggleRefinementUiComponentProps, keyof UiProps>,
    'label'
> &
    UseToggleRefinementProps;

type Tool = UserClientSideTool;

type Tools = UserClientSideTools;

type TrendingFacetsProps = Omit<TrendingFacetsUiComponentProps, keyof UiProps> &
    UseTrendingFacetsProps & {
        itemComponent?: TrendingFacetsUiComponentProps['itemComponent'];
        headerComponent?: TrendingFacetsUiComponentProps['headerComponent'];
        emptyComponent?: TrendingFacetsUiComponentProps['emptyComponent'];
    };

type TrendingItemsProps<TItem extends BaseHit> = Omit<
    TrendingItemsUiComponentProps<TItem>,
    keyof UiProps<TItem>
> &
    UseTrendingItemsProps & {
        itemComponent?: TrendingItemsUiComponentProps<TItem>['itemComponent'];
        headerComponent?: TrendingItemsUiComponentProps<TItem>['headerComponent'];
        emptyComponent?: TrendingItemsUiComponentProps<TItem>['emptyComponent'];
        layoutComponent?: TrendingItemsUiComponentProps<TItem>['layout'];
    };