diff --git a/CHANGELOG.md b/CHANGELOG.md index 0d6cf9d794f..77153a4df4a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ - Added `delimiter` prop to `EuiComboBox` ([#3104](https://github.com/elastic/eui/pull/3104)) - Added `useColorPickerState` and `useColorStopsState` utilities ([#3067](https://github.com/elastic/eui/pull/3067)) +- Fixed `EuiSearchBar` related types ([#3147](https://github.com/elastic/eui/pull/3147)) ## [`22.0.0`](https://github.com/elastic/eui/tree/v22.0.0) diff --git a/src/components/basic_table/in_memory_table.test.tsx b/src/components/basic_table/in_memory_table.test.tsx index 415d1498e59..f9159c87a0a 100644 --- a/src/components/basic_table/in_memory_table.test.tsx +++ b/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, diff --git a/src/components/search_bar/__snapshots__/search_filters.test.tsx.snap b/src/components/search_bar/__snapshots__/search_filters.test.tsx.snap index 42ec467475b..f2cfda074e7 100644 --- a/src/components/search_bar/__snapshots__/search_filters.test.tsx.snap +++ b/src/components/search_bar/__snapshots__/search_filters.test.tsx.snap @@ -35,7 +35,6 @@ exports[`EuiSearchFilters render - with filters 1`] = ` } /> boolean; + autoClose?: boolean; } export interface FieldValueSelectionFilterProps { @@ -46,7 +47,6 @@ export interface FieldValueSelectionFilterProps { config: FieldValueSelectionFilterConfigType; query: Query; onChange: (query: Query) => void; - autoClose?: boolean; } const defaults = { @@ -69,16 +69,10 @@ interface State { cachedOptions?: FieldValueOptionType[] | null; } -type DefaultProps = Pick; - 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 diff --git a/src/components/search_bar/filters/filters.tsx b/src/components/search_bar/filters/filters.tsx index c3e67f3b18d..427e00a647f 100644 --- a/src/components/search_bar/filters/filters.tsx +++ b/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 diff --git a/src/components/search_bar/filters/index.ts b/src/components/search_bar/filters/index.ts index 6dd76a72649..6372edef740 100644 --- a/src/components/search_bar/filters/index.ts +++ b/src/components/search_bar/filters/index.ts @@ -1 +1 @@ -export { createFilter, FilterConfig } from './filters'; +export { createFilter, SearchFilterConfig } from './filters'; diff --git a/src/components/search_bar/index.ts b/src/components/search_bar/index.ts index 394c5df78b2..d4d324a7745 100644 --- a/src/components/search_bar/index.ts +++ b/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'; diff --git a/src/components/search_bar/search_bar.test.tsx b/src/components/search_bar/search_bar.test.tsx index f783e07c4a1..f7c098ad928 100644 --- a/src/components/search_bar/search_bar.test.tsx +++ b/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', diff --git a/src/components/search_bar/search_bar.tsx b/src/components/search_bar/search_bar.tsx index f00ff1aeb35..b3be4f2086d 100644 --- a/src/components/search_bar/search_bar.tsx +++ b/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. diff --git a/src/components/search_bar/search_box.tsx b/src/components/search_bar/search_box.tsx index 6e989dcdd16..fa5217ed37d 100644 --- a/src/components/search_bar/search_box.tsx +++ b/src/components/search_bar/search_box.tsx @@ -1,6 +1,5 @@ import React, { Component } from 'react'; -import { EuiFieldSearch } from '../form'; -import { CommonProps } from '../common'; +import { EuiFieldSearch, EuiFieldSearchProps } from '../form'; export interface SchemaType { strict?: boolean; @@ -8,20 +7,10 @@ export interface SchemaType { 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; @@ -41,15 +30,7 @@ export class EuiSearchBox extends Component { } 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 { (this.inputElement = input)} fullWidth - placeholder={placeholder} defaultValue={query} incremental={incremental} - onSearch={query => onSearch(query)} - isInvalid={isInvalid} aria-label={ariaLabel} - title={title} {...rest} /> ); diff --git a/src/components/search_bar/search_filters.test.tsx b/src/components/search_bar/search_filters.test.tsx index 6d8306d6b67..ddfbbcada68 100644 --- a/src/components/search_bar/search_filters.test.tsx +++ b/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', diff --git a/src/components/search_bar/search_filters.tsx b/src/components/search_bar/search_filters.tsx index 88576b631ee..db8ee7966de 100644 --- a/src/components/search_bar/search_filters.tsx +++ b/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;