A few prop export fixes

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

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

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 { EuiSelectableOption, 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,
+        EuiSelectableOption,
+        EuiSelectableOptionsList,
+      },
       demo: <Selectable />,
       snippet: `<EuiSelectable
   options={[{ label: '' }, { label: '' }]}

src/components/list_group/index.ts

@@ -1,2 +1,2 @@
-export { EuiListGroup } from './list_group';
-export { EuiListGroupItem } from './list_group_item';
+export { EuiListGroup, EuiListGroupProps } from './list_group';
+export { EuiListGroupItem, EuiListGroupItemProps } from './list_group_item';

src/components/list_group/list_group.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import { EuiListGroupItem, EuiListGroupItemProps } from './list_group_item';
 import { CommonProps } from '../common';
 
-type EuiListGroupProps = CommonProps &
+export type EuiListGroupProps = CommonProps &
   HTMLAttributes<HTMLUListElement> & {
     /**
      * Add a border to the list container
@@ -17,7 +17,7 @@ type EuiListGroupProps = CommonProps &
     flush?: boolean;
 
     /**
-     * Items to display in this group
+     * Items to display in this group. See #EuiListGroupItem
      */
     listItems?: EuiListGroupItemProps[];
 

src/components/selectable/index.ts

@@ -1,4 +1,12 @@
-export { EuiSelectable } from './selectable';
-export { EuiSelectableList, EuiSelectableListItem } from './selectable_list';
+export {
+  EuiSelectable,
+  EuiSelectableProps,
+  EuiSelectableOptionProp,
+} from './selectable';
+export {
+  EuiSelectableList,
+  EuiSelectableListItem,
+  EuiSelectableOptionsListProps,
+} from './selectable_list';
 export { EuiSelectableMessage } from './selectable_message';
 export { EuiSelectableSearch } from './selectable_search';

src/components/selectable/selectable.tsx

@@ -36,11 +36,11 @@ type EuiSelectableOptionsListPropsWithDefaults = RequiredEuiSelectableOptionsLis
 // `searchProps` can only be specified when `searchable` is true
 type EuiSelectableSearchableProps = ExclusiveUnion<
   {
-    searchable?: false;
+    searchable: false;
   },
   {
     /**
-     * Hooks up a search box to filter the list
+     * Hooks up a search box to filter the list (boolean)
      */
     searchable: true;
     /**
@@ -50,6 +50,8 @@ type EuiSelectableSearchableProps = ExclusiveUnion<
   }
 >;
 
+export type EuiSelectableOptionProp = Option;
+
 export type EuiSelectableProps = Omit<
   HTMLAttributes<HTMLDivElement>,
   'children' | 'onChange'
@@ -67,9 +69,9 @@ export type EuiSelectableProps = Omit<
       search: ReactElement<EuiSelectableSearch> | undefined
     ) => ReactNode;
     /**
-     * Array or Option objects, see docs for props
+     * Array of Option objects. See #EuiSelectableOption
      */
-    options: Option[];
+    options: EuiSelectableOptionProp[];
     /**
      * Passes back the altered `options` array with selected options as
      */
@@ -82,7 +84,7 @@ export type EuiSelectableProps = Omit<
      */
     singleSelection?: EuiSelectableSingleOptionProps;
     /**
-     * Allows marking options as checked = 'off' as well as 'on'
+     * Allows marking options as `checked='off'` as well as `'on'`
      */
     allowExclusions?: boolean;
     /**
@@ -96,12 +98,12 @@ export type EuiSelectableProps = Omit<
      */
     height?: number | 'full';
     /**
-     * See `EuiSelectableList`
+     * See #EuiSelectableOptionsList
      */
     listProps?: EuiSelectableOptionsListPropsWithDefaults;
     /**
      * Custom render function for each option.
-     * Returns (option, searchValue)
+     * Returns `(option, searchValue)`
      */
     renderOption?: (option: Option, searchValue: string) => {};
   };
@@ -119,6 +121,7 @@ export class EuiSelectable extends Component<
   static defaultProps = {
     options: [],
     singleSelection: false,
+    searchable: false,
   };
 
   private optionsListRef = createRef<EuiSelectableList>();

src/components/selectable/selectable_list/index.ts

@@ -1,2 +1,5 @@
-export { EuiSelectableList } from './selectable_list';
+export {
+  EuiSelectableList,
+  EuiSelectableOptionsListProps,
+} from './selectable_list';
 export { EuiSelectableListItem } from './selectable_list_item';

src/components/selectable/selectable_list/selectable_list.tsx

@@ -5,15 +5,14 @@ import { CommonProps } from '../../common';
 import { List, AutoSizer, ListProps } from 'react-virtualized';
 import { htmlIdGenerator } from '../../../services';
 import { EuiSelectableListItem } from './selectable_list_item';
-// @ts-ignore
 import { EuiHighlight } from '../../highlight';
 import { Option } from '../types';
 
 export type EuiSelectableSingleOptionProps = 'always' | boolean;
 
 // Consumer Configurable Props via `EuiSelectable.listProps`
-export type EuiSelectableOptionsListProps = HTMLAttributes<HTMLDivElement> &
-  CommonProps & {
+export type EuiSelectableOptionsListProps = CommonProps &
+  HTMLAttributes<HTMLDivElement> & {
     /**
      * The index of the option to be highlighted as pseudo-focused;
      * Good for use when only one selection is allowed and needing to open

src/components/selectable/types.tsx

@@ -12,6 +12,7 @@ export interface Option extends CommonProps {
    * Must be unique across items
    */
   key?: string;
+  id?: string;
   /**
    * Leave off to indicate not selected,
    * 'on' to indicate inclusion and