[SearchBar] Add custom_component filter

[sebelga]

This PR adds a new filter type to the Search bar: custom_component. This filter gives full control to the consumer to render the filter button + the panel.

Fixes #6003

Example

const CustomComponent = ({ query, onChange }) => {
  // Access to the Query instance and the onChange handler to update the search bar
  const [isOpen, setIsOpen] = useState(false);

  const closePopover = () => {
    setIsOpen(false);
  };

  const button = (
    <EuiFilterButton
      iconType="arrowDown"
      iconSide="right"
      onClick={() => setIsOpen((prev) => !prev)}
      hasActiveFilters={<some-internal-state>}
      numActiveFilters={<some-internal-state>}
      grow
    >
      Filter label
    </EuiFilterButton>
  );

  return (
    <EuiPopover
      button={button}
      isOpen={isOpen}
      closePopover={closePopover}
      panelPaddingSize="none"
      anchorPosition="downCenter"
    >
      <EuiPanel paddingSize="m">
        <div>Custom content</div>
      </EuiPanel>
    </EuiPopover>
  );
};

// And this is the filter configuration

{
  type: 'custom_component',
  component: CustomComponent,
},

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_6226/

[chandlerprall]

Approach looks good to me, have one suggestion for the example custom component

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_6226/

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_6226/

[sebelga]

Thanks for the first pass review @chandlerprall ! The PR is now ready for review, I added the docs and unit tests. Cheers!

[chandlerprall]

Changes LGTM, go ahead and merge when CI passes

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_6226/

[sebelga]

Thanks for the review @chandlerprall 👍