diff --git a/CHANGELOG.md b/CHANGELOG.md index a7ed80876e82..3bf25b13bacb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,13 +2,13 @@ - Updated `barSeriesStyle.displayValue` of the elastic-charts `Theme` for better default styles ([#4845](https://github.com/elastic/eui/pull/4845)) - Updated `titleProps` and `descriptionProps` on `EuiDescriptionList` to extend `CommonProps` ([#5166](https://github.com/elastic/eui/pull/5166)) +- Added the ability to return `visibleOptions` from `EuiSelectable` by using `onSearch` ([#5178](https://github.com/elastic/eui/pull/5178)) **Bug fixes** - Fixed `EuiDataGrid` focus ring to be contained in the cell ([#5194](https://github.com/elastic/eui/pull/5194)) - Fixed `EuiDataGrid` cells when focused getting a higher `z-index` which was causing long content to overlap surrounding cells ([#5194](https://github.com/elastic/eui/pull/5194)) - ## [`38.0.0`](https://github.com/elastic/eui/tree/v38.0.0) - Added optional line numbers to `EuiCodeBlock` ([#4993](https://github.com/elastic/eui/pull/4993)) diff --git a/src-docs/src/views/selectable/props.tsx b/src-docs/src/views/selectable/props.tsx index 79b50b7e2642..428914e2fa70 100644 --- a/src-docs/src/views/selectable/props.tsx +++ b/src-docs/src/views/selectable/props.tsx @@ -2,6 +2,7 @@ import React, { FunctionComponent } from 'react'; import { EuiSelectableOption, EuiSelectableOptionsListProps, + EuiSelectableSearchableSearchProps, } from '../../../../src/components/selectable'; import { @@ -17,6 +18,10 @@ export const EuiSelectableOptionsList: FunctionComponent ); +export const EuiSelectableSearchProps: FunctionComponent> = () =>
; + export const Options: FunctionComponent = () => (
); diff --git a/src-docs/src/views/selectable/selectable_example.js b/src-docs/src/views/selectable/selectable_example.js index badc2870bdae..5eb74e9f75be 100644 --- a/src-docs/src/views/selectable/selectable_example.js +++ b/src-docs/src/views/selectable/selectable_example.js @@ -19,6 +19,7 @@ import { import { EuiSelectableOptionProps, EuiSelectableOptionsList, + EuiSelectableSearchProps, Options, MetaData, } from './props'; @@ -153,7 +154,9 @@ export const SelectableExample = { To add a search component to the list, simply add the{' '} searchable prop. You can optionally pass in a{' '} searchProps object which will get passed down to - the actual EuiFieldSearch used. + the actual EuiFieldSearch used. In this example, + onSearch will return a second parameter, enabling + you to access the list of filtered items

, snippet: ` = ExclusiveUnion< */ searchable: true; /** - * Passes props down to the `EuiFieldSearch` + * Passes props down to the `EuiFieldSearch`. + * See #EuiSelectableSearchProps */ - searchProps?: Partial>; + searchProps?: EuiSelectableSearchableSearchProps; + } +>; + +export type EuiSelectableSearchableSearchProps = Partial< + Omit, 'onSearch'> & { + onSearch: ( + searchValue: string, + matchingOptions: Array> + ) => void; } >; @@ -337,7 +347,7 @@ export class EuiSelectable extends Component< } ); if (this.props.searchProps && this.props.searchProps.onSearch) { - this.props.searchProps.onSearch(searchValue); + this.props.searchProps.onSearch(searchValue, visibleOptions); } }; @@ -524,7 +534,7 @@ export class EuiSelectable extends Component< */ const getAccessibleName = ( props: - | Partial> + | EuiSelectableSearchableSearchProps | EuiSelectableOptionsListPropsWithDefaults | undefined, messageContentId?: string