Updated selectable's Option type to reflect div vs button realities

cchaos · Feb 20, 2020 · 16f29fc · 16f29fc
1 parent c88e8f7
commit 16f29fc
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 8 deletions.
diff --git 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<EuiSelectableListProps> {
                       className="euiSelectableList__groupLabel"
                       key={rowKey}
                       style={style}
-                      {...optionRest}>
+                      {...optionRest as HTMLAttributes<HTMLDivElement>}>
                       {prepend}
                       {label}
                       {append}
@@ -193,7 +196,7 @@ export class EuiSelectableList extends Component<EuiSelectableListProps> {
                     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
@@ -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<BaseOption, 'isGroupLabel'>,
+    HTMLAttributes<HTMLDivElement> {
+  isGroupLabel: true;
+}
+
+export interface SelectableOption
+  extends BaseOption,
+    ButtonHTMLAttributes<HTMLButtonElement> {}
+
+export type Option = ExclusiveUnion<GroupLabelOption, SelectableOption>;