[EuiSelectable] export SiteWideRenderOptions and wire-up isPreFiltered

CHANGELOG.md

@@ -1,7 +1,10 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Export `euiSelectableTemplateSitewideRenderOptions` ([#4305](https://github.com/elastic/eui/pull/4305))
+
 **Bug fixes**
 
+- Expose `isPreFiltered` in `EuiSelectable` props fixing consumer-side searching ([#4305](https://github.com/elastic/eui/pull/4305))
 - Fixed stale state argument passed to `searchProps.onChange` in an `EuiSelectable`([#4292](https://github.com/elastic/eui/pull/4292))
 - Fixed initial focus of an `EuiButtonGroup` when first item in a popover ([#4288](https://github.com/elastic/eui/pull/4288))
 - Fixed visible scrollbar in `EuiComboBox` list ([#4301](https://github.com/elastic/eui/pull/4301))

src/components/index.js

@@ -288,6 +288,7 @@ export {
   EuiSelectableMessage,
   EuiSelectableSearch,
   EuiSelectableTemplateSitewide,
+  euiSelectableTemplateSitewideRenderOptions,
 } from './selectable';
 
 export { EuiSideNav } from './side_nav';

src/components/selectable/index.ts

@@ -31,4 +31,5 @@ export {
   EuiSelectableTemplateSitewideProps,
   EuiSelectableTemplateSitewideOption,
   EuiSelectableTemplateSitewideMetaData,
+  euiSelectableTemplateSitewideRenderOptions,
 } from './selectable_templates';

src/components/selectable/selectable.tsx

@@ -136,6 +136,11 @@ export type EuiSelectableProps<T = {}> = CommonProps &
      * or a node to replace the whole content.
      */
     emptyMessage?: ReactElement | string;
+    /**
+     * Control whether or not options get filtered internally or if consumer will filter
+     * Default: false
+     */
+    isPreFiltered?: boolean;
   };
 
 export interface EuiSelectableState<T> {
@@ -153,18 +158,23 @@ export class EuiSelectable<T = {}> extends Component<
     options: [],
     singleSelection: false,
     searchable: false,
+    isPreFiltered: false,
   };
   private containerRef = createRef<HTMLDivElement>();
   private optionsListRef = createRef<EuiSelectableList<T>>();
   rootId = htmlIdGenerator();
   constructor(props: EuiSelectableProps<T>) {
     super(props);
 
-    const { options, singleSelection } = props;
+    const { options, singleSelection, isPreFiltered } = props;
 
     const initialSearchValue = '';
 
-    const visibleOptions = getMatchingOptions<T>(options, initialSearchValue);
+    const visibleOptions = getMatchingOptions<T>(
+      options,
+      initialSearchValue,
+      isPreFiltered
+    );
 
     // ensure that the currently selected single option is active if it is in the visibleOptions
     const selectedOptions = options.filter((option) => option.checked);
@@ -187,10 +197,14 @@ export class EuiSelectable<T = {}> extends Component<
     nextProps: EuiSelectableProps<T>,
     prevState: EuiSelectableState<T>
   ) {
-    const { options } = nextProps;
+    const { options, isPreFiltered } = nextProps;
     const { activeOptionIndex, searchValue } = prevState;
 
-    const matchingOptions = getMatchingOptions<T>(options, searchValue);
+    const matchingOptions = getMatchingOptions<T>(
+      options,
+      searchValue,
+      isPreFiltered
+    );
 
     const stateUpdate = { visibleOptions: matchingOptions, activeOptionIndex };
 
@@ -349,17 +363,22 @@ export class EuiSelectable<T = {}> extends Component<
   };
 
   onOptionClick = (options: Array<EuiSelectableOption<T>>) => {
+    const { isPreFiltered, onChange, searchProps } = this.props;
     const { searchValue } = this.state;
-    const visibleOptions = getMatchingOptions<T>(options, searchValue);
+    const visibleOptions = getMatchingOptions(
+      options,
+      searchValue,
+      isPreFiltered
+    );
 
     this.setState({ visibleOptions });
 
-    if (this.props.onChange) {
-      this.props.onChange(options);
+    if (onChange) {
+      onChange(options);
     }
 
-    if (this.props.searchProps && this.props.searchProps.onChange) {
-      this.props.searchProps.onChange(visibleOptions, searchValue);
+    if (searchProps && searchProps.onChange) {
+      searchProps.onChange(visibleOptions, searchValue);
     }
   };
 
@@ -383,6 +402,7 @@ export class EuiSelectable<T = {}> extends Component<
       loadingMessage,
       noMatchesMessage,
       emptyMessage,
+      isPreFiltered,
       ...rest
     } = this.props;
 
@@ -555,6 +575,7 @@ export class EuiSelectable<T = {}> extends Component<
             listId={this.optionsListRef.current ? listId : undefined} // Only pass the listId if it exists on the page
             aria-activedescendant={makeOptionId(activeOptionIndex)} // the current faux-focused option
             placeholder={placeholderName}
+            isPreFiltered={isPreFiltered ?? false}
             {...(searchHasAccessibleName
               ? searchAccessibleName
               : { 'aria-label': placeholderName })}

src/components/selectable/selectable_search/selectable_search.test.tsx

@@ -30,6 +30,7 @@ describe('EuiSelectableSearch', () => {
         options={[]}
         listId="list"
         onChange={() => {}}
+        isPreFiltered={false}
         {...requiredProps}
       />
     );
@@ -44,6 +45,7 @@ describe('EuiSelectableSearch', () => {
           options={[]}
           listId="list"
           onChange={() => {}}
+          isPreFiltered={false}
           defaultValue="Mi"
         />
       );

src/components/selectable/selectable_search/selectable_search.tsx

@@ -42,6 +42,7 @@ export type EuiSelectableSearchProps<T> = Omit<
      * The id of the visible list to create the appropriate aria controls
      */
     listId?: string;
+    isPreFiltered: boolean;
   };
 
 export interface EuiSelectableSearchState {
@@ -68,7 +69,8 @@ export class EuiSelectableSearch<T> extends Component<
     const { searchValue } = this.state;
     const matchingOptions = getMatchingOptions<T>(
       this.props.options,
-      searchValue
+      searchValue,
+      this.props.isPreFiltered
     );
     this.props.onChange(matchingOptions, searchValue);
   }
@@ -78,7 +80,8 @@ export class EuiSelectableSearch<T> extends Component<
       this.setState({ searchValue: value }, () => {
         const matchingOptions = getMatchingOptions<T>(
           this.props.options,
-          value
+          value,
+          this.props.isPreFiltered
         );
         this.props.onChange(matchingOptions, value);
       });
@@ -93,6 +96,7 @@ export class EuiSelectableSearch<T> extends Component<
       defaultValue,
       listId,
       placeholder,
+      isPreFiltered,
       ...rest
     } = this.props;