Fixes to EuiSearchBar etc types

CHANGELOG.md

@@ -9,6 +9,7 @@
 - Improved `EuiButtonEmpty` focus state when the `color` type is `text` ([#3135](https://github.com/elastic/eui/pull/3135))
 - Added `EuiLoadingElastic` component ([#3017](https://github.com/elastic/eui/pull/3017))
 - Upgraded `react-beautiful-dnd` to v13 ([#3064](https://github.com/elastic/eui/pull/3064))
+- Fixes to `EuiSearchBar` etc types ([#3147](https://github.com/elastic/eui/pull/3147))
 
 **Bug Fixes**
 

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/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;

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'>;