From 428c65a05adc6247542e3e4182149526ec0777c0 Mon Sep 17 00:00:00 2001
From: John Easton <accounts+github@easton.dev>
Date: Mon, 13 Sep 2021 17:21:20 +0200
Subject: [PATCH] feat(EuiSelectable): onSearch returns visibleOptions

Fixes #5178
---
 CHANGELOG.md                                   |  1 +
 src-docs/src/views/selectable/props.tsx        |  5 +++++
 .../src/views/selectable/selectable_example.js |  6 +++++-
 src/components/selectable/index.ts             |  6 +++++-
 src/components/selectable/selectable.tsx       | 18 ++++++++++++++----
 5 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7be639805727..3b4a5225d9a0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@
 - Removed Sass variables for `EuiTabs` font size (`$euiTabFontSize, $euiTabFontSizeS, $euiTabFontSizeL`) ([#5135](https://github.com/elastic/eui/pull/5135))
 - Extended all `EuiTabProps` for each `EuiTabbedContentTab` ([#5135](https://github.com/elastic/eui/pull/5135))
 - Added `useGeneratedHtmlId` utility, which memoizes the randomly generated ID on mount and prevents regenerated IDs on component rerender ([#5133](https://github.com/elastic/eui/pull/5133))
+- Added the ability to return `visibleOptions` from `EuiSelectable` by using `onSearch` ([#5178](https://github.com/elastic/eui/pull/5178))
 
 **Theme: Amsterdam**
 
diff --git a/src-docs/src/views/selectable/props.tsx b/src-docs/src/views/selectable/props.tsx
index 79b50b7e2642..428914e2fa70 100644
--- a/src-docs/src/views/selectable/props.tsx
+++ b/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 />
 );
diff --git a/src-docs/src/views/selectable/selectable_example.js b/src-docs/src/views/selectable/selectable_example.js
index badc2870bdae..5eb74e9f75be 100644
--- a/src-docs/src/views/selectable/selectable_example.js
+++ b/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
diff --git a/src/components/selectable/index.ts b/src/components/selectable/index.ts
index e019825dcdc3..9e44c33892c1 100644
--- a/src/components/selectable/index.ts
+++ b/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,
diff --git a/src/components/selectable/selectable.tsx b/src/components/selectable/selectable.tsx
index 83da8e183375..b2cd6af939d7 100644
--- a/src/components/selectable/selectable.tsx
+++ b/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