[EuiSelectable] Enable CodeSandbox links and misc documentation impro…

…vements (#6074)

* Remove shared dependency in favor of simply copying and pasting

- The local import was preventing CodeSandbox demos from being generated, and DRYness is not as much a concern here as much as having useful demos/code that people can quickly modify

- .TSX source change is required for `<>` typing additions

* Greatly simplify popover/flyout example + convert to TSX

- rename to Sizing since it's not just a popover example

- move example all the way down the page - it's a more complex example and doesn't honestly feel like it makes sense where it is, and it's a

- remove data store, just use more moon names

- clean up unnecessary const declarations, preferring inline JS

- remove need for generated IDs - this is a one time demo

- remove unnecessary array sorting - it's not relevant to what's being demo'd

* Simplify custom render example and convert to TSX

- remove need for data store dependency, copy countries array

- default to custom content being shown

- inline more code, simplify conditional props to ternaries

- make secondary text display smaller

- Fix `showIcons` type error: it should be passed by the list, not to individual options

* [Organization] Move EuiSelectableTemplateSitewide to its own folder

- It was confusing having it amongst the EuiSelectable docs when it's its own completely separate page/documentation

- gave it its own subdir with the same name that it lives in in src/components

- renamed its file names to be clearer and less generic

+ fix onWindowKeyDown  useEffect cleanup removing the wrong event

+ optimize window keyup/keydown fns to not re-init on every rerender

* Improve singleSelection example

- allow consumers to toggle between `always` and `true` to observe functional difference

* Improve snippets documentation

- Remove props that are not specifically relevant to the documentation section

- Move ending bracket on newline & other misc prettier syntax cleanup

* Standardize props tab display

- prefer to display all props, as there are links within EuiSelectable that no longer do anything if all child props aren't displayed

* Misc documentation fixes

- Fix broken link
- Remove random documentation copy that doesn't look like it belongs
- Fix import statement

* [PR feedback] Just import from 'src'

* [PR feedback] Remove Fragment

* [PR feedback] Misc snippet feedback

* [PR feedback] Fix EuiSwitch label

* [PR feedback] TSX

Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

src-docs/src/routes.js

@@ -30,7 +30,7 @@ import {
 
 import { PageTemplateExample } from './views/page/page_template_example';
 
-import { SitewideSearchExample } from './views/selectable/selectable_sitewide_template_example';
+import { SitewideSearchExample } from './views/selectable/selectable_templates/sitewide_example';
 
 // Services
 

src-docs/src/views/_index.scss

@@ -11,7 +11,7 @@ $guideDemoHighlightColor: transparentize($euiColorPrimary, .9);
 @import './horizontal_rule/horizontal_rule';
 @import './page/page';
 @import './notification_event/notification_event';
-@import './selectable/search';
+@import './selectable/selectable_templates/sitewide';
 @import './spacer/spacer';
 @import './suggest/index';
 @import './text/text_scaling';

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

@@ -3,12 +3,9 @@ import {
   EuiSelectableOption,
   EuiSelectableOptionsListProps,
   EuiSelectableSearchableSearchProps,
-} from '../../../../src/components/selectable';
-
-import {
   EuiSelectableTemplateSitewideOption,
   EuiSelectableTemplateSitewideMetaData,
-} from '../../../../src/components/selectable/selectable_templates/selectable_template_sitewide_option';
+} from '../../../../src';
 
 export const EuiSelectableOptionProps: FunctionComponent<EuiSelectableOption> = () => (
   <div />

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

@@ -1,10 +1,45 @@
 import React, { useState } from 'react';
 
-import { EuiSelectable } from '../../../../src/components/selectable';
-import { Options } from './data';
+import { EuiSelectable, EuiSelectableOption } from '../../../../src';
 
 export default () => {
-  const [options, setOptions] = useState(Options);
+  const [options, setOptions] = useState<EuiSelectableOption[]>([
+    {
+      label: 'Titan',
+      'data-test-subj': 'titanOption',
+    },
+    {
+      label: 'Enceladus is disabled',
+      disabled: true,
+    },
+    {
+      label: 'Mimas',
+      checked: 'on',
+    },
+    {
+      label: 'Dione',
+    },
+    {
+      label: 'Iapetus',
+      checked: 'on',
+    },
+    {
+      label: 'Phoebe',
+    },
+    {
+      label: 'Rhea',
+    },
+    {
+      label:
+        "Pandora is one of Saturn's moons, named for a Titaness of Greek mythology",
+    },
+    {
+      label: 'Tethys',
+    },
+    {
+      label: 'Hyperion',
+    },
+  ]);
 
   return (
     <EuiSelectable

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

@@ -0,0 +1,122 @@
+import React, { useState } from 'react';
+
+import {
+  EuiBadge,
+  EuiHighlight,
+  EuiSpacer,
+  EuiText,
+  EuiSwitch,
+  EuiSelectable,
+  EuiSelectableOption,
+} from '../../../../src';
+
+const countryData = [
+  { code: 'NL', name: 'Netherlands', flag: '🇳🇱' },
+  { code: 'CZ', name: 'Czech Republic', flag: '🇨🇿' },
+  { code: 'ZA', name: 'South Africa', flag: '🇿🇦' },
+  { code: 'US', name: 'United States', flag: '🇺🇲' },
+  { code: 'AU', name: 'Australia', flag: '🇦🇺' },
+  { code: 'IL', name: 'Israel', flag: '🇮🇱' },
+  { code: 'NO', name: 'Norway', flag: '🇳🇴' },
+  { code: 'IT', name: 'Italy', flag: '🇮🇹' },
+  { code: 'CA', name: 'Canada', flag: '🇨🇦' },
+  { code: 'CG', name: 'Congo', flag: '🇨🇬' },
+  { code: 'CL', name: 'Chile', flag: '🇨🇱' },
+  { code: 'FJ', name: 'Fiji', flag: '🇫🇯' },
+  { code: 'GB', name: 'United Kingdom', flag: '🇬🇧' },
+  { code: 'GR', name: 'Greece', flag: '🇬🇷' },
+  { code: 'HT', name: 'Haiti', flag: '🇭🇹' },
+  { code: 'LB', name: 'Lebanon', flag: '🇱🇧' },
+  { code: 'MM', name: 'Myanmar', flag: '🇲🇲' },
+  { code: 'MX', name: 'Mexico', flag: '🇲🇽' },
+  { code: 'NG', name: 'Nigeria', flag: '🇳🇬' },
+  { code: 'SG', name: 'Singapore', flag: '🇸🇬' },
+  { code: 'SO', name: 'Somalia', flag: '🇸🇴' },
+  { code: 'TN', name: 'Tunisia', flag: '🇹🇳' },
+  { code: 'VE', name: 'Venezuela', flag: '🇻🇪' },
+  { code: 'ZM', name: 'Zambia', flag: '🇿🇲' },
+];
+
+interface OptionData {
+  secondaryContent?: string;
+}
+
+export default () => {
+  const [options, setOptions] = useState<
+    Array<EuiSelectableOption<OptionData>>
+  >([
+    {
+      label: 'Country options',
+      isGroupLabel: true,
+    },
+    ...countryData.map(
+      (country): EuiSelectableOption => ({
+        label: `${country.name}`,
+        searchableLabel: `${country.name} ${'I am secondary content, I am!'}`,
+        prepend: country.flag,
+        append: <EuiBadge>{country.code}</EuiBadge>,
+        data: {
+          secondaryContent: 'I am secondary content, I am!',
+        },
+      })
+    ),
+  ]);
+
+  const renderCountryOption = (
+    option: EuiSelectableOption<OptionData>,
+    searchValue: string
+  ) => {
+    return (
+      <>
+        <EuiHighlight search={searchValue}>{option.label}</EuiHighlight>
+        <EuiText size="xs" color="subdued" className="eui-displayBlock">
+          <small>
+            <EuiHighlight search={searchValue}>
+              {option.secondaryContent || ''}
+            </EuiHighlight>
+          </small>
+        </EuiText>
+      </>
+    );
+  };
+
+  const [useCustomContent, setUseCustomContent] = useState(true);
+  const [isVirtualized, setIsVirtualized] = useState(true);
+
+  return (
+    <>
+      <EuiSwitch
+        label="Virtualized"
+        checked={isVirtualized}
+        onChange={(e) => setIsVirtualized(e.target.checked)}
+      />
+      &emsp;&emsp;
+      <EuiSwitch
+        label="Custom content"
+        checked={useCustomContent}
+        onChange={(e) => setUseCustomContent(e.target.checked)}
+      />
+      <EuiSpacer />
+      <EuiSelectable
+        aria-label="Selectable example with custom list items"
+        searchable
+        options={options}
+        onChange={(options) => setOptions(options)}
+        listProps={{
+          isVirtualized,
+          rowHeight: useCustomContent ? 50 : undefined,
+          showIcons: false,
+        }}
+        renderOption={useCustomContent ? renderCountryOption : undefined}
+        height={240}
+      >
+        {(list, search) => (
+          <>
+            {search}
+            {list}
+          </>
+        )}
+      </EuiSelectable>
+    </>
+  );
+};