Fixes to EuiSearchBar etc types

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Added `delimiter` prop to `EuiComboBox` ([#3104](https://github.com/elastic/eui/pull/3104))
+- Fixed `EuiSearchBar` related types ([#3147](https://github.com/elastic/eui/pull/3147))
 
 ## [`22.0.0`](https://github.com/elastic/eui/tree/v22.0.0)
 

src/components/basic_table/in_memory_table.test.tsx

@@ -5,7 +5,7 @@ import { requiredProps } from '../../test';
 import { EuiInMemoryTable, EuiInMemoryTableProps } from './in_memory_table';
 import { ENTER } from '../../services/key_codes';
 import { SortDirection } from '../../services';
-import { FilterConfig } from '../search_bar/filters';
+import { SearchFilterConfig } from '../search_bar/filters';
 
 interface BasicItem {
   id: number | string;
@@ -662,7 +662,7 @@ describe('EuiInMemoryTable', () => {
             name: 'Name1',
             negatedName: 'Not Name1',
           },
-        ] as FilterConfig[],
+        ] as SearchFilterConfig[],
       },
       selection: {
         onSelectionChange: () => undefined,

src/components/search_bar/__snapshots__/search_filters.test.tsx.snap

@@ -35,7 +35,6 @@ exports[`EuiSearchFilters render - with filters 1`] = `
     }
   />
   <FieldValueSelectionFilter
-    autoClose={true}
     config={
       Object {
         "field": "tag",

src/components/search_bar/filters/field_value_selection_filter.tsx

@@ -10,7 +10,7 @@ import { EuiIcon } from '../../icon';
 import { Query } from '../query';
 import { Clause, Value } from '../query/ast';
 
-interface FieldValueOptionType {
+export interface FieldValueOptionType {
   field?: string;
   value: Value;
   name?: string;
@@ -39,14 +39,14 @@ export interface FieldValueSelectionFilterConfigType {
   noOptionsMessage?: string;
   searchThreshold?: number;
   available?: () => boolean;
+  autoClose?: boolean;
 }
 
 export interface FieldValueSelectionFilterProps {
   index: number;
   config: FieldValueSelectionFilterConfigType;
   query: Query;
   onChange: (query: Query) => void;
-  autoClose?: boolean;
 }
 
 const defaults = {
@@ -69,16 +69,10 @@ interface State {
   cachedOptions?: FieldValueOptionType[] | null;
 }
 
-type DefaultProps = Pick<FieldValueSelectionFilterProps, 'autoClose'>;
-
 export class FieldValueSelectionFilter extends Component<
   FieldValueSelectionFilterProps,
   State
 > {
-  static defaultProps: DefaultProps = {
-    autoClose: true,
-  };
-
   private readonly selectItems: EuiFilterSelectItem[];
   private searchInput: HTMLInputElement | null = null;
 
@@ -248,7 +242,9 @@ export class FieldValueSelectionFilter extends Component<
     checked: 'on' | 'off' | undefined
   ) {
     const multiSelect = this.resolveMultiSelect();
-    const { autoClose } = this.props;
+    const {
+      config: { autoClose = true },
+    } = this.props;
 
     // we're closing popover only if the user can only select one item... if the
     // user can select more, we'll leave it open so she can continue selecting

src/components/search_bar/filters/filters.tsx

@@ -16,7 +16,7 @@ import { Query } from '../query';
 
 export const createFilter = (
   index: number,
-  config: FilterConfig,
+  config: SearchFilterConfig,
   query: Query,
   onChange: (query: Query) => void
 ) => {
@@ -46,7 +46,7 @@ export const createFilter = (
   }
 };
 
-export type FilterConfig =
+export type SearchFilterConfig =
   | IsFilterConfigType
   | FieldValueSelectionFilterConfigType
   | FieldValueToggleFilterConfigType

src/components/search_bar/filters/index.ts

@@ -1 +1 @@
-export { createFilter, FilterConfig } from './filters';
+export { createFilter, SearchFilterConfig } from './filters';

src/components/search_bar/index.ts

@@ -5,5 +5,5 @@ export {
   Query,
   Ast,
 } from './search_bar';
-export { SearchBoxConfigProps } from './search_box';
-export { SearchFiltersFiltersType } from './search_filters';
+export { SearchFilterConfig } from './search_filters';
+export { FieldValueOptionType } from './filters/field_value_selection_filter';

src/components/search_bar/search_bar.test.tsx

@@ -5,7 +5,7 @@ import { mount, shallow } from 'enzyme';
 import { EuiSearchBar } from './search_bar';
 import { Query } from './query';
 import { ENTER } from '../../services/key_codes';
-import { SearchFiltersFiltersType } from './search_filters';
+import { SearchFilterConfig } from './search_filters';
 
 describe('SearchBar', () => {
   test('render - no config, no query', () => {
@@ -48,7 +48,7 @@ describe('SearchBar', () => {
   });
 
   test('render - provided query, filters', () => {
-    const filters: SearchFiltersFiltersType = [
+    const filters: SearchFilterConfig[] = [
       {
         type: 'is',
         field: 'open',

src/components/search_bar/search_bar.tsx

@@ -1,10 +1,11 @@
 import React, { Component, ReactElement } from 'react';
 import { isString } from '../../services/predicate';
 import { EuiFlexGroup, EuiFlexItem } from '../flex';
-import { EuiSearchBox, SchemaType, SearchBoxConfigProps } from './search_box';
-import { EuiSearchFilters, SearchFiltersFiltersType } from './search_filters';
+import { EuiSearchBox, SchemaType } from './search_box';
+import { EuiSearchFilters, SearchFilterConfig } from './search_filters';
 import { Query } from './query';
 import { CommonProps } from '../common';
+import { EuiFieldSearchProps } from '../form/field_search';
 
 export { Query, AST as Ast } from './query';
 
@@ -42,12 +43,17 @@ export interface EuiSearchBarProps extends CommonProps {
    Configures the search box. Set `placeholder` to change the placeholder text in the box and
    `incremental` to support incremental (as you type) search.
    */
-  box?: SearchBoxConfigProps;
+  box?: EuiFieldSearchProps & {
+    // Boolean values are not meaningful to this EuiSearchBox, but are allowed so that other
+    // components can use e.g. a true value to mean "auto-derive a schema". See EuiInMemoryTable.
+    // Admittedly, this is a bit of a hack.
+    schema?: SchemaType | boolean;
+  };
 
   /**
    An array of search filters.
    */
-  filters?: SearchFiltersFiltersType;
+  filters?: SearchFilterConfig[];
 
   /**
    * Tools which go to the left of the search bar.

src/components/search_bar/search_box.tsx

@@ -1,27 +1,16 @@
 import React, { Component } from 'react';
-import { EuiFieldSearch } from '../form';
-import { CommonProps } from '../common';
+import { EuiFieldSearch, EuiFieldSearchProps } from '../form';
 
 export interface SchemaType {
   strict?: boolean;
   fields?: any;
   flags?: string[];
 }
 
-export interface SearchBoxConfigProps extends CommonProps {
-  placeholder?: string;
-  incremental?: boolean;
-  // Boolean values are not meaningful to this component, but are allowed so that other
-  // components can use e.g. a true value to mean "auto-derive a schema". See EuiInMemoryTable.
-  // Admittedly, this is a bit of a hack.
-  schema?: SchemaType | boolean;
-}
-
-export interface EuiSearchBoxProps extends SearchBoxConfigProps {
+export interface EuiSearchBoxProps extends EuiFieldSearchProps {
   query: string;
+  // This is optional in EuiFieldSearchProps
   onSearch: (queryText: string) => void;
-  isInvalid?: boolean;
-  title?: string;
 }
 
 type DefaultProps = Pick<EuiSearchBoxProps, 'placeholder' | 'incremental'>;
@@ -41,15 +30,7 @@ export class EuiSearchBox extends Component<EuiSearchBoxProps> {
   }
 
   render() {
-    const {
-      placeholder,
-      query,
-      incremental,
-      onSearch,
-      isInvalid,
-      title,
-      ...rest
-    } = this.props;
+    const { query, incremental, ...rest } = this.props;
 
     let ariaLabel;
     if (incremental) {
@@ -64,13 +45,9 @@ export class EuiSearchBox extends Component<EuiSearchBoxProps> {
       <EuiFieldSearch
         inputRef={input => (this.inputElement = input)}
         fullWidth
-        placeholder={placeholder}
         defaultValue={query}
         incremental={incremental}
-        onSearch={query => onSearch(query)}
-        isInvalid={isInvalid}
         aria-label={ariaLabel}
-        title={title}
         {...rest}
       />
     );

src/components/search_bar/search_filters.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { requiredProps } from '../../test';
 import { shallow } from 'enzyme';
-import { EuiSearchFilters, SearchFiltersFiltersType } from './search_filters';
+import { EuiSearchFilters, SearchFilterConfig } from './search_filters';
 import { Query } from './query';
 
 describe('EuiSearchFilters', () => {
@@ -19,7 +19,7 @@ describe('EuiSearchFilters', () => {
   });
 
   test('render - with filters', () => {
-    const filters: SearchFiltersFiltersType = [
+    const filters: SearchFilterConfig[] = [
       {
         type: 'is',
         field: 'open',

src/components/search_bar/search_filters.tsx

@@ -1,14 +1,14 @@
 import React, { Component, Fragment, ReactElement } from 'react';
-import { createFilter, FilterConfig } from './filters';
+import { createFilter, SearchFilterConfig } from './filters';
 import { Query } from './query';
 import { EuiFilterGroup } from '../filter_group';
 
-export type SearchFiltersFiltersType = FilterConfig[];
+export { SearchFilterConfig } from './filters';
 
 interface EuiSearchFiltersProps {
   query: Query;
   onChange: (query: Query) => void;
-  filters: SearchFiltersFiltersType;
+  filters: SearchFilterConfig[];
 }
 
 type DefaultProps = Pick<EuiSearchFiltersProps, 'filters'>;