Provide a typed key filter on the <WithSearch> component.

Is your feature request related to a problem? Please describe. WithSearch is not strongly typed, and mapContextToProps is a bit verbose.

Describe the solution you'd like Provide a typed key filter on the component.

Describe alternatives you've considered

import { WithSearch } from "@elastic/react-search-ui";
import { SearchContextState } from "@elastic/search-ui";
// I'm using lodash to make the code clearer, but it's a simple function
import { pick } from "lodash-es";
import { ReactNode } from "react";

type Many<T> = T | ReadonlyArray<T>;

type SearchBuilderProps<U extends keyof SearchContextState> = {
  keys: Array<Many<U>>;
  children: (search: Pick<SearchContextState, U>) => ReactNode;
};

function SearchBuilder<T extends keyof SearchContextState>(
  props: SearchBuilderProps<T>
) {
  return (
    <WithSearch
      mapContextToProps={(search: SearchContextState) =>
        pick(search, ...props.keys)
      }>
      {search => props.children(search)}
    </WithSearch>
  );
}

export default SearchBuilder;

Usage:

const catFilter = () => <SearchBuilder keys={["clearFilters", "setFilter"]}>
    {(search) => (
      <button onClick={ e => search.setFilter("top_species", "cats") }>
           Cats
      </button>
    )}
</SearchBuilder>

Additional context Associated type hint:

elastic / search-ui

Provide a typed key filter on the <WithSearch> component. #964