diff --git a/src/components/selectable/selectable_list/selectable_list.tsx b/src/components/selectable/selectable_list/selectable_list.tsx index ce0d7b1be2c..808dc6a15e1 100644 --- a/src/components/selectable/selectable_list/selectable_list.tsx +++ b/src/components/selectable/selectable_list/selectable_list.tsx @@ -4,7 +4,10 @@ import { CommonProps } from '../../common'; // eslint-disable-next-line import/named import { List, AutoSizer, ListProps } from 'react-virtualized'; import { htmlIdGenerator } from '../../../services'; -import { EuiSelectableListItem } from './selectable_list_item'; +import { + EuiSelectableListItem, + EuiSelectableListItemProps, +} from './selectable_list_item'; import { EuiHighlight } from '../../highlight'; import { Option } from '../types'; @@ -172,7 +175,7 @@ export class EuiSelectableList extends Component { className="euiSelectableList__groupLabel" key={rowKey} style={style} - {...optionRest}> + {...optionRest as HTMLAttributes}> {prepend} {label} {append} @@ -193,7 +196,7 @@ export class EuiSelectableList extends Component { disabled={disabled} prepend={prepend} append={append} - {...optionRest}> + {...optionRest as EuiSelectableListItemProps}> {renderOption ? ( renderOption(option, searchValue) ) : ( diff --git a/src/components/selectable/types.tsx b/src/components/selectable/types.tsx index 850b5fa51d9..8e64e3a4c34 100644 --- a/src/components/selectable/types.tsx +++ b/src/components/selectable/types.tsx @@ -1,9 +1,9 @@ -import React from 'react'; -import { CommonProps } from '../common'; +import React, { ButtonHTMLAttributes, HTMLAttributes } from 'react'; +import { CommonProps, ExclusiveUnion } from '../common'; export type OptionCheckedType = 'on' | 'off' | undefined; -export interface Option extends CommonProps { +export interface BaseOption extends CommonProps { /** * Visible label of option. Must be unique across items if `key` is not supplied */ @@ -21,9 +21,9 @@ export interface Option extends CommonProps { checked?: OptionCheckedType; disabled?: boolean; /** - * Set to true to indicate object is just a grouping label, not a selectable item + * Optional boolean. Set to true to indicate object is just a grouping label, not a selectable item */ - isGroupLabel?: boolean; + isGroupLabel?: false; /** * Node to add between the selection icon and the label */ @@ -34,3 +34,15 @@ export interface Option extends CommonProps { append?: React.ReactNode; ref?: (optionIndex: number) => void; } + +export interface GroupLabelOption + extends Omit, + HTMLAttributes { + isGroupLabel: true; +} + +export interface SelectableOption + extends BaseOption, + ButtonHTMLAttributes {} + +export type Option = ExclusiveUnion;