Can no longer pass children to react-instantsearch connected refinement list

133 views Asked by At

During a React & Typescript version upgrade and subsequent dependency update, it seems that my implementation of using connectRefinementList from react-instantsearch-dom is now complaining about having children as part of it's usage, whereas there were none before.

TS2322: Type '{ children: string; attribute: string; limit: number; searchable: true; showMore: true; }' 
is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<RefinementListExposed
, any, any>> & Readonly<...>'.   Property 'children' does not exist on type 'IntrinsicAttributes & 
IntrinsicClassAttributes<Component<RefinementListExposed, any, any>> & Readonly<...>'.

My usage is as such:

CustomRefinementList

const RefinementList: React.FC<React.PropsWithChildren<any>> = (props) => {
    // other stuff here

    return (
        <div>{props.children}</div>
    )
};

const CustomRefinementList = connectRefinementList(RefinementList);

...

// Error highlights this CustomRefinementList element
<CustomRefinementList attribute="some-attr" limit={5} searchable showMore>
    Some children here
</CustomRefinementList>

Is there something I'm missing here, or has the functionality just gone weird since updating from 6.22.0 to 6.39.1?

Looking into connectRefinementList:

export function connectRefinementList(
    stateless: React.FunctionComponent<RefinementListProvided>,
): React.ComponentClass<RefinementListExposed>;

With its used types being defined as

export interface RefinementListProvided {

    refine: (value: string[]) => any;
    createURL: (...args: any[]) => any;
    currentRefinement: string[];
    items: Array<Hit<{ count: number; isRefined: boolean; label: string; value: string[] }>>;
    searchForItems: (...args: any[]) => any;
    isFromSearch: boolean;
    canRefine: boolean;
}

export interface RefinementListExposed {
    attribute: string;
    searchable?: boolean | undefined;
    operator?: 'or' | 'and' | undefined;
    showMore?: boolean | undefined;
    limit?: number | undefined;
    showMoreLimit?: number | undefined;
    defaultRefinement?: string[] | undefined;
    facetOrdering?: boolean | undefined;
    transformItems?: ((...args: any[]) => any) | undefined;
}

Of course, none of these have children defined... But I'm not entirely sure why it wouldn't accept me giving children to it?

0

There are 0 answers