[EuiFilterGroup][FieldValueSelectionFilter] Use EuiSelectable

CHANGELOG.md

@@ -4,6 +4,7 @@
 - Updated the outline color in `euiCustomControlFocused` mixin to use 
 `$euiFocusRingColor` instead of `currentColor` ([#5479](https://github.com/elastic/eui/pull/5479))
 - **[Beta]** Added `optimize` build as a lighter weight option more suited to prodcution environments ([#5527](https://github.com/elastic/eui/pull/5527))
+- Converted `FieldValueSelectionFilter` in `EuiSearchBar` to use `EuiSelectable` ([#5387](https://github.com/elastic/eui/issues/5387))
 
 ## [`45.0.0`](https://github.com/elastic/eui/tree/v45.0.0)
 

src-docs/src/views/filter_group/filter_group_example.js

@@ -7,6 +7,7 @@ import {
   EuiFilterGroup,
   EuiFilterButton,
   EuiFilterSelectItem,
+  EuiLink,
 } from '../../../../src/components';
 
 import FilterGroup from './filter_group';
@@ -75,10 +76,12 @@ export const FilterGroupExample = {
         <Fragment>
           <p>
             To provide a long list of grouped filter, use a popover for
-            filtering an array of passed items. This mostly uses standard
-            popover mechanics, but the component{' '}
-            <strong>EuiFilterSelectItem</strong> is used for the items
-            themselves.
+            filtering an array of passed items. This uses standard popover
+            mechanics and{' '}
+            <EuiLink href="#/forms/selectable">
+              <strong>EuiSelectable</strong>
+            </EuiLink>
+            .
           </p>
           <h3>Indicating number of filters</h3>
           <p>

src-docs/src/views/filter_group/filter_group_multi.js

@@ -3,13 +3,9 @@ import React, { useState } from 'react';
 import {
   EuiPopover,
   EuiPopoverTitle,
-  EuiFieldSearch,
-  EuiFilterSelectItem,
-  EuiLoadingChart,
-  EuiSpacer,
-  EuiIcon,
   EuiFilterGroup,
   EuiFilterButton,
+  EuiSelectable,
 } from '../../../../src/components';
 import { useGeneratedHtmlId } from '../../../../src/services';
 
@@ -29,50 +25,26 @@ export default () => {
   });
 
   const [items, setItems] = useState([
-    { name: 'Johann Sebastian Bach', checked: 'on' },
-    { name: 'Wolfgang Amadeus Mozart', checked: 'on' },
-    { name: 'Antonín Dvořák', checked: 'off' },
-    { name: 'Dmitri Shostakovich' },
-    { name: 'Felix Mendelssohn-Bartholdy' },
-    { name: 'Franz Liszt' },
-    { name: 'Franz Schubert' },
-    { name: 'Frédéric Chopin' },
-    { name: 'Georg Friedrich Händel' },
-    { name: 'Giuseppe Verdi' },
-    { name: 'Gustav Mahler' },
-    { name: 'Igor Stravinsky' },
-    { name: 'Johannes Brahms' },
-    { name: 'Joseph Haydn' },
-    { name: 'Ludwig van Beethoven' },
-    { name: 'Piotr Illitch Tchaïkovsky' },
-    { name: 'Robert Schumann' },
-    { name: 'Sergej S. Prokofiew' },
-    { name: 'Wolfgang Amadeus Mozart' },
+    { label: 'Johann Sebastian Bach', checked: 'on' },
+    { label: 'Wolfgang Amadeus Mozart', checked: 'on' },
+    { label: 'Antonín Dvořák', checked: 'off' },
+    { label: 'Dmitri Shostakovich' },
+    { label: 'Felix Mendelssohn-Bartholdy' },
+    { label: 'Franz Liszt' },
+    { label: 'Franz Schubert' },
+    { label: 'Frédéric Chopin' },
+    { label: 'Georg Friedrich Händel' },
+    { label: 'Giuseppe Verdi' },
+    { label: 'Gustav Mahler' },
+    { label: 'Igor Stravinsky' },
+    { label: 'Johannes Brahms' },
+    { label: 'Joseph Haydn' },
+    { label: 'Ludwig van Beethoven' },
+    { label: 'Piotr Illitch Tchaïkovsky' },
+    { label: 'Robert Schumann' },
+    { label: 'Sergej S. Prokofiew' },
   ]);
 
-  function updateItem(index) {
-    if (!items[index]) {
-      return;
-    }
-
-    const newItems = [...items];
-
-    switch (newItems[index].checked) {
-      case 'on':
-        newItems[index].checked = 'off';
-        break;
-
-      case 'off':
-        newItems[index].checked = undefined;
-        break;
-
-      default:
-        newItems[index].checked = 'on';
-    }
-
-    setItems(newItems);
-  }
-
   const button = (
     <EuiFilterButton
       iconType="arrowDown"
@@ -95,40 +67,27 @@ export default () => {
         closePopover={closePopover}
         panelPaddingSize="none"
       >
-        <EuiPopoverTitle paddingSize="s">
-          <EuiFieldSearch compressed />
-        </EuiPopoverTitle>
-        <div className="euiFilterSelect__items">
-          {items.map((item, index) => (
-            <EuiFilterSelectItem
-              checked={item.checked}
-              key={index}
-              onClick={() => updateItem(index)}
-            >
-              {item.name}
-            </EuiFilterSelectItem>
-          ))}
-          {/*
-                Use when loading items initially
-              */}
-          <div className="euiFilterSelect__note">
-            <div className="euiFilterSelect__noteContent">
-              <EuiLoadingChart size="m" />
-              <EuiSpacer size="xs" />
-              <p>Loading filters</p>
-            </div>
-          </div>
-          {/*
-                Use when no results are returned
-              */}
-          <div className="euiFilterSelect__note">
-            <div className="euiFilterSelect__noteContent">
-              <EuiIcon type="minusInCircle" />
-              <EuiSpacer size="xs" />
-              <p>No filters found</p>
+        <EuiSelectable
+          allowExclusions
+          searchable
+          searchProps={{
+            placeholder: 'Filter list',
+            compressed: true,
+          }}
+          aria-label="Composers"
+          options={items}
+          onChange={(newOptions) => setItems(newOptions)}
+          loadingMessage="Loading filters"
+          emptyMessage="No filters available"
+          noMatchesMessage="No filters found"
+        >
+          {(list, search) => (
+            <div>
+              <EuiPopoverTitle paddingSize="s">{search}</EuiPopoverTitle>
+              {list}
             </div>
-          </div>
-        </div>
+          )}
+        </EuiSelectable>
       </EuiPopover>
     </EuiFilterGroup>
   );