Add programmatic search and imperative API

[daguej]

This adds a few options that allow you to control the emoji picker programmatically.

I'm building inside a contenteditable editor, and want users to select emojis by typing in the text area. (Similar to how you can press : in slack or github and get a menu of emojis.) Since users are already typing in an input area, I don't want them to have to move to the search field that is rendered inside the emoji picker; I want to supply the characters the user has typed in my editor and use that to filter the results.

This PR supports this use case by adding these options:

• search: string - Sets the current search query used to filter the emoji list. This works regardless of whether searchDisabled is set.

• onReturnFocus: () => void - If searchDisabled is set, this function will be called when user keyboard navigation would have returned focus to the search input field.

• api: RefObject<EmojiPickerApi> - Provides you access to an imperative API that your component can use. These methods are available:

  • takeFocus() - sets focus to the first interactive element in the picker UI. Similar to pressing ↓ when focus is in the picker's search input.
  • activate() - selects the first visible emoji. Similar to pressing Enter when focus is in the search input.

  For example:

  function MyComponent() {
    const picker = useRef<EmojiPickerApi>(null)
    return <div>
      <button onClick={() => picker.current?.takeFocus()}>Set focus to picker</button>
      <EmojiPicker api={picker} />
    </div>;
  }

You can use these three options together to implement pretty seamless search and keyboard navigation glued to an external UI.

[ealush]

Hey @daguej , thank you so much for taking the time and effort to work on this.

I was abroad this past week, please allow me a few days to go over this change.