A few prop export fixes (#2869)

* [EuiSelectable] Better export and display of props
- Setting `searchable` to required but adding a default of false

* [EuiListGroup] Exporting props at top level

CHANGELOG.md

@@ -9,6 +9,8 @@
 - Updated `editorLink` icon ([#2866](https://github.com/elastic/eui/pull/2866))
 - Added control columns to `EuiDataGrid` to support non-data columns like row selection and actions ([#2846](https://github.com/elastic/eui/pull/2846))
 - Added `image` glyph to `EuiIcon` ([#2870](https://github.com/elastic/eui/pull/2870))
+- Exported TS props from top level `EuiListGroupProps`, `EuiListGroupItemProps`, `EuiSelectableProps`,  `EuiSelectableOption`, `EuiSelectableOptionsListProps` ([#2869](https://github.com/elastic/eui/pull/2869))
+- Extending `EuiSelectable[options]` type with correct HTML element ([#2869](https://github.com/elastic/eui/pull/2869))
 
 **Bug fixes**
 

src-docs/src/views/selectable/data.ts

@@ -1,4 +1,6 @@
-export const Options = [
+import { EuiSelectableOption } from '../../../../src/components/selectable/selectable_option';
+
+export const Options: EuiSelectableOption[] = [
   {
     label: 'Titan',
     'data-test-subj': 'titanOption',
@@ -13,6 +15,7 @@ export const Options = [
   },
   {
     label: 'Dione',
+    id: 'id_dione',
   },
   {
     label: 'Iapetus',

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

@@ -0,0 +1,13 @@
+import React, { FunctionComponent } from 'react';
+import {
+  EuiSelectableOption,
+  EuiSelectableOptionsListProps,
+} from '../../../../src/components/selectable';
+
+export const EuiSelectableOptionProps: FunctionComponent<
+  EuiSelectableOption
+> = () => <div />;
+
+export const EuiSelectableOptionsList: FunctionComponent<
+  EuiSelectableOptionsListProps
+> = () => <div />;

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

@@ -1,34 +1,17 @@
-import React, { Component } from 'react';
+import React, { useState } from 'react';
 
 import { EuiSelectable } from '../../../../src/components/selectable';
-import { Option } from '../../../../src/components/selectable/types';
 import { Options } from './data';
 
-export default class extends Component<{}, { options: Option[] }> {
-  constructor(props: any) {
-    super(props);
+export default () => {
+  const [options, setOptions] = useState(Options);
 
-    this.state = {
-      options: Options as Option[],
-    };
-  }
-
-  onChange = (options: Option[]) => {
-    this.setState({
-      options,
-    });
-  };
-
-  render() {
-    const { options } = this.state;
-
-    return (
-      <EuiSelectable
-        options={options}
-        onChange={this.onChange}
-        listProps={{ bordered: true }}>
-        {list => list}
-      </EuiSelectable>
-    );
-  }
-}
+  return (
+    <EuiSelectable
+      options={options}
+      listProps={{ bordered: true }}
+      onChange={newOptions => setOptions(newOptions)}>
+      {list => list}
+    </EuiSelectable>
+  );
+};

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

@@ -8,12 +8,13 @@ import { GuideSectionTypes } from '../../components';
 import {
   EuiCode,
   EuiSelectable,
-  EuiSelectableList,
   EuiSelectableMessage,
   EuiText,
   EuiSpacer,
 } from '../../../../src/components';
 
+import { EuiSelectableOptionProps, EuiSelectableOptionsList } from './props';
+
 import Selectable from './selectable';
 const selectableSource = require('!!raw-loader!./selectable');
 const selectableHtml = renderToHtml(Selectable);
@@ -83,46 +84,17 @@ export const SelectableExample = {
             At its simplest, EuiSelectable requires an array of{' '}
             <EuiCode>options</EuiCode> and an <EuiCode>onChange</EuiCode>{' '}
             handler which passes back the altered{' '}
-            <EuiCode>selectedOptions</EuiCode> array.
+            <EuiCode>selectedOptions</EuiCode> array. The{' '}
+            <EuiCode>children</EuiCode> is a function that return the{' '}
+            <EuiCode>list</EuiCode> and <EuiCode>search</EuiCode> nodes.
           </p>
-          <h4>
-            The <EuiCode>Option</EuiCode> props
-          </h4>
-          <ul>
-            <li>
-              <EuiCode>label: string</EuiCode> <strong>required</strong> Must be
-              unique across items if <EuiCode>key</EuiCode> is not passed
-            </li>
-            <li>
-              <EuiCode>key?: string</EuiCode> Must be unique across items
-            </li>
-            <li>
-              <EuiCode>checked?: &apos;on&apos; | &apos;off&apos;</EuiCode>{' '}
-              Leave off to indicate not selected, &apos;on&apos; to indicate
-              inclusion and &apos;off&apos; to indicate exclusion
-            </li>
-            <li>
-              <EuiCode>disabled?: boolean</EuiCode>
-            </li>
-            <li>
-              <EuiCode>isGroupLabel?: boolean</EuiCode> Set to true to indicate
-              object is just a grouping label, not a selectable item
-            </li>
-            <li>
-              <EuiCode>prepend?: React.ReactNode</EuiCode> Node to add between
-              the selection icon and the label
-            </li>
-            <li>
-              <EuiCode>append?: React.ReactNode</EuiCode> Node to add to the far
-              right of the item
-            </li>
-            <li>
-              <EuiCode>ref?: () =&gt; void</EuiCode>
-            </li>
-          </ul>
         </Fragment>
       ),
-      props: { EuiSelectable, EuiSelectableList },
+      props: {
+        EuiSelectable,
+        EuiSelectableOptionProps,
+        EuiSelectableOptionsList,
+      },
       demo: <Selectable />,
       snippet: `<EuiSelectable
   options={[{ label: '' }, { label: '' }]}

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

@@ -1,31 +1,17 @@
-import React, { Component } from 'react';
+import React, { useState } from 'react';
 
 import { EuiSelectable } from '../../../../src/components/selectable';
-import { Option } from '../../../../src/components/selectable/types';
 import { Options } from './data';
 
-export default class extends Component<{}, { options: Option[] }> {
-  constructor(props: any) {
-    super(props);
+export default () => {
+  const [options, setOptions] = useState(Options);
 
-    this.state = {
-      options: Options as Option[],
-    };
-  }
-
-  onChange = (options: Option[]) => {
-    this.setState({
-      options,
-    });
-  };
-
-  render() {
-    const { options } = this.state;
-
-    return (
-      <EuiSelectable allowExclusions options={options} onChange={this.onChange}>
-        {list => list}
-      </EuiSelectable>
-    );
-  }
-}
+  return (
+    <EuiSelectable
+      allowExclusions
+      options={options}
+      onChange={newOptions => setOptions(newOptions)}>
+      {list => list}
+    </EuiSelectable>
+  );
+};

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

@@ -0,0 +1,38 @@
+import React, { useState, Fragment } from 'react';
+
+import {
+  EuiSelectable,
+  EuiSelectableMessage,
+} from '../../../../src/components/selectable';
+import { EuiSwitch } from '../../../../src/components/form/switch';
+import { EuiSpacer } from '../../../../src/components/spacer';
+
+export default () => {
+  const [useCustomMessage, setUseCustomMessage] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const customMessage = (
+    <EuiSelectableMessage>You have no spice</EuiSelectableMessage>
+  );
+
+  return (
+    <Fragment>
+      <EuiSwitch
+        label="Custom message"
+        onChange={e => setUseCustomMessage(e.target.checked)}
+        checked={!isLoading && useCustomMessage}
+        disabled={isLoading}
+      />
+      &emsp;
+      <EuiSwitch
+        label="Show loading"
+        onChange={e => setIsLoading(e.target.checked)}
+        checked={isLoading}
+      />
+      <EuiSpacer />
+      <EuiSelectable options={[]} style={{ width: 200 }} isLoading={isLoading}>
+        {list => (useCustomMessage && !isLoading ? customMessage : list)}
+      </EuiSelectable>
+    </Fragment>
+  );
+};

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

@@ -1,57 +1,27 @@
-import React, { Component, Fragment } from 'react';
-
-import { EuiButtonEmpty } from '../../../../src/components/button';
+import React, { useState, Fragment } from 'react';
 
 import { EuiSelectable } from '../../../../src/components/selectable';
-import { Option } from '../../../../src/components/selectable/types';
 import { Options } from './data';
 
-export default class extends Component<{}, { options: Option[] }> {
-  constructor(props: any) {
-    super(props);
-
-    this.state = {
-      options: Options as Option[],
-    };
-  }
-
-  onChange = (options: Option[]) => {
-    this.setState({
-      options,
-    });
-  };
-
-  render() {
-    const { options } = this.state;
+export default () => {
+  const [options, setOptions] = useState(Options);
 
-    return (
-      <Fragment>
-        <EuiButtonEmpty
-          onClick={() => {
-            this.setState({
-              options: Options.map(option => ({
-                ...option,
-                checked: undefined,
-              })),
-            });
-          }}>
-          Deselect all
-        </EuiButtonEmpty>
-        <EuiSelectable
-          searchable
-          searchProps={{
-            'data-test-subj': 'selectableSearchHere',
-          }}
-          options={options}
-          onChange={this.onChange}>
-          {(list, search) => (
-            <Fragment>
-              {search}
-              {list}
-            </Fragment>
-          )}
-        </EuiSelectable>
-      </Fragment>
-    );
-  }
-}
+  return (
+    <Fragment>
+      <EuiSelectable
+        searchable
+        searchProps={{
+          'data-test-subj': 'selectableSearchHere',
+        }}
+        options={options}
+        onChange={newOptions => setOptions(newOptions)}>
+        {(list, search) => (
+          <Fragment>
+            {search}
+            {list}
+          </Fragment>
+        )}
+      </EuiSelectable>
+    </Fragment>
+  );
+};