[EuiSelectable]: onSearch should also return visibleOptions

CHANGELOG.md

@@ -2,13 +2,13 @@
 
 - Updated `barSeriesStyle.displayValue` of the elastic-charts `Theme` for better default styles ([#4845](https://github.com/elastic/eui/pull/4845))
 - Updated `titleProps` and `descriptionProps` on `EuiDescriptionList` to extend `CommonProps` ([#5166](https://github.com/elastic/eui/pull/5166))
+- Added the ability to return `visibleOptions` from `EuiSelectable` by using `onSearch` ([#5178](https://github.com/elastic/eui/pull/5178))
 
 **Bug fixes**
 
 - Fixed `EuiDataGrid` focus ring to be contained in the cell ([#5194](https://github.com/elastic/eui/pull/5194))
 - Fixed `EuiDataGrid` cells when focused getting a higher `z-index` which was causing long content to overlap surrounding cells ([#5194](https://github.com/elastic/eui/pull/5194))
 
-
 ## [`38.0.0`](https://github.com/elastic/eui/tree/v38.0.0)
 
 - Added optional line numbers to `EuiCodeBlock` ([#4993](https://github.com/elastic/eui/pull/4993))

src-docs/src/views/selectable/props.tsx

@@ -2,6 +2,7 @@ import React, { FunctionComponent } from 'react';
 import {
   EuiSelectableOption,
   EuiSelectableOptionsListProps,
+  EuiSelectableSearchableSearchProps,
 } from '../../../../src/components/selectable';
 
 import {
@@ -17,6 +18,10 @@ export const EuiSelectableOptionsList: FunctionComponent<EuiSelectableOptionsLis
   <div />
 );
 
+export const EuiSelectableSearchProps: FunctionComponent<EuiSelectableSearchableSearchProps<
+  any
+>> = () => <div />;
+
 export const Options: FunctionComponent<EuiSelectableTemplateSitewideOption> = () => (
   <div />
 );

src-docs/src/views/selectable/selectable_example.js

@@ -19,6 +19,7 @@ import {
 import {
   EuiSelectableOptionProps,
   EuiSelectableOptionsList,
+  EuiSelectableSearchProps,
   Options,
   MetaData,
 } from './props';
@@ -153,7 +154,9 @@ export const SelectableExample = {
             To add a search component to the list, simply add the{' '}
             <EuiCode>searchable</EuiCode> prop. You can optionally pass in a{' '}
             <EuiCode>searchProps</EuiCode> object which will get passed down to
-            the actual <strong>EuiFieldSearch</strong> used.
+            the actual <strong>EuiFieldSearch</strong> used. In this example,
+            <EuiCode>onSearch</EuiCode> will return a second parameter, enabling
+            you to access the list of filtered items
           </p>
           <EuiCallOut
             iconType="search"
@@ -171,6 +174,7 @@ export const SelectableExample = {
         EuiSelectable,
         EuiSelectableOptionProps,
         EuiSelectableOptionsList,
+        EuiSelectableSearchProps,
       },
       demo: <SelectableSearch />,
       snippet: `<EuiSelectable

src/components/selectable/index.ts

@@ -6,7 +6,11 @@
  * Side Public License, v 1.
  */
 
-export { EuiSelectable, EuiSelectableProps } from './selectable';
+export {
+  EuiSelectable,
+  EuiSelectableProps,
+  EuiSelectableSearchableSearchProps,
+} from './selectable';
 export {
   EuiSelectableList,
   EuiSelectableListProps,

src/components/selectable/selectable.tsx

@@ -51,9 +51,19 @@ type EuiSelectableSearchableProps<T> = ExclusiveUnion<
      */
     searchable: true;
     /**
-     * Passes props down to the `EuiFieldSearch`
+     * Passes props down to the `EuiFieldSearch`.
+     * See #EuiSelectableSearchProps
      */
-    searchProps?: Partial<EuiSelectableSearchProps<T>>;
+    searchProps?: EuiSelectableSearchableSearchProps<T>;
+  }
+>;
+
+export type EuiSelectableSearchableSearchProps<T> = Partial<
+  Omit<EuiSelectableSearchProps<T>, 'onSearch'> & {
+    onSearch: (
+      searchValue: string,
+      matchingOptions: Array<EuiSelectableOption<T>>
+    ) => void;
   }
 >;
 
@@ -337,7 +347,7 @@ export class EuiSelectable<T = {}> extends Component<
       }
     );
     if (this.props.searchProps && this.props.searchProps.onSearch) {
-      this.props.searchProps.onSearch(searchValue);
+      this.props.searchProps.onSearch(searchValue, visibleOptions);
     }
   };
 
@@ -524,7 +534,7 @@ export class EuiSelectable<T = {}> extends Component<
      */
     const getAccessibleName = (
       props:
-        | Partial<EuiSelectableSearchProps<T>>
+        | EuiSelectableSearchableSearchProps<T>
         | EuiSelectableOptionsListPropsWithDefaults
         | undefined,
       messageContentId?: string