[EuiSuggest] Use EuiSelectable

CHANGELOG.md

@@ -1,10 +1,18 @@
 ## [`main`](https://github.com/elastic/eui/tree/main)
 
+- Refactored `EuiSuggest` to use `EuiSelectable` ([#5157](https://github.com/elastic/eui/pull/5157))
+
 **Bug fixes**
 
 - Fixed `EuiDataGrid` to correctly remove the cell expansion action button when a column sets both `cellActions` and `isExpandable` to false ([#5592](https://github.com/elastic/eui/pull/5592))
 - Fixed `EuiDataGrid` re-playing the cell actions animation when hovering over an already-focused cell ([#5592](https://github.com/elastic/eui/pull/5592))
 
+**Breaking changes**
+
+- Removed `EuiSuggestInput` ([#5157](https://github.com/elastic/eui/pull/5157))
+- Required `aria-label` or `aria-labelledby` for `EuiSuggest` ([#5157](https://github.com/elastic/eui/pull/5157))
+- Renamed `sendValue` prop to `onSearchChange` for `EuiSuggest` ([#5157](https://github.com/elastic/eui/pull/5157))
+
 ## [`47.0.0`](https://github.com/elastic/eui/tree/v47.0.0)
 
 - Added support for React 17 (this is a backwards compatible change - React 16.12+ is still supported for consuming applications) ([#5584](https://github.com/elastic/eui/pull/5584))

src-docs/src/views/suggest/suggest.js → src-docs/src/views/suggest/suggest.tsx

@@ -4,8 +4,12 @@ import {
   EuiRadioGroup,
   EuiSuggest,
   EuiSpacer,
+  EuiFormRow,
+  EuiSuggestionProps,
 } from '../../../../src/components';
 
+import { EuiSuggestStatus } from '../../../../src/components/suggest/types';
+
 import { htmlIdGenerator } from '../../../../src/services';
 
 const shortDescription = 'This is the description';
@@ -44,21 +48,25 @@ const sampleItems = [
 const idPrefix = htmlIdGenerator()();
 
 export default () => {
-  const radios = [
+  const radios: Array<{
+    id: string;
+    value: EuiSuggestStatus;
+    label: string;
+  }> = [
     { id: `${idPrefix}0`, value: 'unchanged', label: 'No new changes' },
     { id: `${idPrefix}1`, value: 'unsaved', label: 'Not yet saved' },
     { id: `${idPrefix}2`, value: 'saved', label: 'Saved' },
     { id: `${idPrefix}3`, value: 'loading', label: 'Loading' },
   ];
-  const [status, setStatus] = useState('unchanged');
+  const [status, setStatus] = useState<EuiSuggestStatus>('unchanged');
   const [radioIdSelected, setSelectedId] = useState(`${idPrefix}0`);
 
-  const onChange = (optionId) => {
+  const onChange = (optionId: string) => {
     setSelectedId(optionId);
-    setStatus(radios.find((x) => x.id === optionId).value);
+    setStatus(radios.find((x) => x.id === optionId)!.value);
   };
 
-  const onItemClick = (item) => {
+  const onItemClick = (item: EuiSuggestionProps) => {
     console.log(item);
   };
 
@@ -70,13 +78,17 @@ export default () => {
         onChange={(id) => onChange(id)}
       />
       <EuiSpacer size="xl" />
-      <EuiSuggest
-        status={status}
-        onInputChange={() => {}}
-        onItemClick={onItemClick}
-        placeholder="Enter query to display suggestions"
-        suggestions={sampleItems}
-      />
+      <EuiFormRow label="Suggest" id={idPrefix}>
+        <EuiSuggest
+          fullWidth
+          aria-labelledby={`${idPrefix}-label`}
+          status={status}
+          onInputChange={() => {}}
+          onItemClick={onItemClick}
+          placeholder="Enter query to display suggestions"
+          suggestions={sampleItems}
+        />
+      </EuiFormRow>
     </div>
   );
 };

src-docs/src/views/suggest/suggest_example.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 
 import { GuideSectionTypes } from '../../components';
 
@@ -7,7 +8,7 @@ import {
   EuiCode,
   EuiSpacer,
   EuiSuggest,
-  EuiSuggestItem,
+  EuiText,
 } from '../../../../src/components';
 
 import Suggest from './suggest';
@@ -16,8 +17,7 @@ const suggestSource = require('!!raw-loader!./suggest');
 import SavedQueries from './saved_queries';
 const savedQueriesSource = require('!!raw-loader!./saved_queries');
 
-import SuggestItem from './suggest_item';
-const suggestItemSource = require('!!raw-loader!./suggest_item');
+import SuggestItem from './suggest_item_example';
 const suggestItemSnippet = [
   `<EuiSuggestItem
   type={sampleItem.type}
@@ -77,45 +77,61 @@ export const SuggestExample = {
         },
       ],
       text: (
-        <div>
+        <>
           <p>
             <strong>EuiSuggest</strong> is a text field component used to
             display suggestions. The status of the component is shown on its
             right side. The available <EuiCode>status</EuiCode> are:{' '}
             <EuiCode>unsaved</EuiCode>, <EuiCode>saved</EuiCode>,
             <EuiCode>unchanged</EuiCode> and <EuiCode>isLoading</EuiCode>.
           </p>
-        </div>
+          <p>
+            Note that <strong>EuiSuggest</strong> does not maintain internal
+            selection state. Use the <EuiCode>onChange</EuiCode> callback to
+            update your application state with the desired selection changes.
+          </p>
+        </>
       ),
       props: { EuiSuggest },
       snippet: suggestSnippet,
       demo: <Suggest />,
     },
     {
       title: 'Suggest item',
-      source: [
-        {
-          type: GuideSectionTypes.JS,
-          code: suggestItemSource,
-        },
-      ],
+      wrapText: false,
       text: (
-        <div>
-          <p>
-            <strong>EuiSuggestItem</strong> is a list item component to display
-            suggestions when typing queries in <strong>EuiSuggest</strong>. Use{' '}
-            <EuiCode>labelDisplay</EuiCode> to set whether the{' '}
-            <EuiCode>label</EuiCode> has a fixed width or not. By default, fixed
-            labels will have a width of 50%, you can adjust this by setting{' '}
-            <EuiCode>labelWidth</EuiCode>. Use{' '}
-            <EuiCode>descriptionDisplay</EuiCode> to set whether the{' '}
-            <EuiCode>description</EuiCode> truncates or wraps.
-          </p>
-        </div>
+        <>
+          <EuiText>
+            <p>
+              <strong>EuiSuggestItem</strong> is a list item component to
+              display suggestions when typing queries into{' '}
+              <strong>EuiSuggest</strong>. Each item requires a{' '}
+              <EuiCode>label</EuiCode> and <EuiCode>type</EuiCode> and can
+              optionally display a <EuiCode>description</EuiCode>. By default,
+              labels will have a width of 50% which you can adjust by setting{' '}
+              <EuiCode>labelWidth</EuiCode> to a multiple of{' '}
+              <EuiCode>10</EuiCode>.
+            </p>
+            <p>
+              Suggest item types are an object that requires an{' '}
+              <EuiCode>iconType</EuiCode> and <EuiCode>color</EuiCode>.
+            </p>
+            <p>
+              Set <EuiCode>truncate</EuiCode> to false to force line-wrapping of
+              both the label and description. Note that wrapping text is not
+              compatible with the virtualized setting on{' '}
+              <strong>EuiSuggest</strong>. See{' '}
+              <Link to="forms/selectable#rendering-the-options">
+                EuiSelectable
+              </Link>{' '}
+              for more information on rendering items virtually.
+            </p>
+          </EuiText>
+          <EuiSpacer />
+          <SuggestItem />
+        </>
       ),
-      props: { EuiSuggestItem },
       snippet: suggestItemSnippet,
-      demo: <SuggestItem />,
     },
     {
       title: 'Saved queries and filters',
@@ -126,7 +142,7 @@ export const SuggestExample = {
         },
       ],
       text: (
-        <div>
+        <>
           <EuiCallOut color="warning" title="Demo of visual pattern only">
             <p>
               This documents a <strong>visual</strong> pattern for Kibana&apos;s
@@ -135,8 +151,7 @@ export const SuggestExample = {
               logic is well-formed.
             </p>
           </EuiCallOut>
-          <EuiSpacer />
-        </div>
+        </>
       ),
       props: { EuiSuggest },
       demo: <SavedQueries />,