From da22a222533d27bf8b54be387893e86d52814ace Mon Sep 17 00:00:00 2001
From: DerDorius <77979816+DerDorius@users.noreply.github.com>
Date: Thu, 15 Sep 2022 16:10:43 +0200
Subject: [PATCH] fixes #3200 Add Generics to  Dropdown, Listbox, Multiselect
 and Selectbutton (#3212)

* #3200 Fresh Branch with changes

* add Generic as any in Cascadeselect

* #3200 revert copy error
---
 .../lib/cascadeselect/cascadeselect.d.ts      |   2 +-
 components/lib/dropdown/dropdown.d.ts         |  83 +++++++++-----
 components/lib/listbox/listbox.d.ts           | 103 +++++++++++++-----
 components/lib/multiselect/multiselect.d.ts   | 101 ++++++++++-------
 components/lib/selectbutton/selectbutton.d.ts |  53 ++++++---
 components/lib/selectitem/selectitem.d.ts     |   6 +-
 6 files changed, 237 insertions(+), 111 deletions(-)

diff --git a/components/lib/cascadeselect/cascadeselect.d.ts b/components/lib/cascadeselect/cascadeselect.d.ts
index 198e56499a..00b97381e7 100644
--- a/components/lib/cascadeselect/cascadeselect.d.ts
+++ b/components/lib/cascadeselect/cascadeselect.d.ts
@@ -20,7 +20,7 @@ export interface CascadeSelectProps extends Omit<React.DetailedHTMLProps<React.I
     className?: string;
     value?: any;
     name?: string;
-    options?: SelectItemOptionsType;
+    options?: SelectItemOptionsType<any>;
     optionLabel?: string;
     optionValue?: string;
     optionGroupLabel?: string;
diff --git a/components/lib/dropdown/dropdown.d.ts b/components/lib/dropdown/dropdown.d.ts
index 42f72c1e37..df859ee5ac 100755
--- a/components/lib/dropdown/dropdown.d.ts
+++ b/components/lib/dropdown/dropdown.d.ts
@@ -1,37 +1,59 @@
 import * as React from 'react';
-import TooltipOptions from '../tooltip/tooltipoptions';
 import { CSSTransitionProps } from '../csstransition';
+import { NestedKeyOf, SelectItemOptionsType } from '../selectitem/selectitem';
+import TooltipOptions from '../tooltip/tooltipoptions';
 import { VirtualScrollerProps } from '../virtualscroller';
-import { SelectItemOptionsType } from '../selectitem/selectitem';
 
-type DropdownOptionGroupTemplateType = React.ReactNode | ((option: any, index: number) => React.ReactNode);
+type DropdownOptionGroupTemplateType<TOption> = React.ReactNode | ((option: TOption, index: number) => React.ReactNode);
 
-type DropdownValueTemplateType = React.ReactNode | ((option: any, props: DropdownProps) => React.ReactNode);
+type DropdownValueTemplateType<TOption> = React.ReactNode | ((option: TOption, props: DropdownProps<TOption>) => React.ReactNode);
 
-type DropdownItemTemplateType = React.ReactNode | ((option: any) => React.ReactNode);
+type DropdownItemTemplateType<TOption> = React.ReactNode | ((option: TOption) => React.ReactNode);
 
 type DropdownFilterTemplateType = React.ReactNode | ((options: DropdownFilterOptions) => React.ReactNode);
 
-type DropdownEmptyMessageType = React.ReactNode | ((props: DropdownProps) => React.ReactNode);
+type DropdownEmptyMessageType<TOption> = React.ReactNode | ((props: DropdownProps<TOption>) => React.ReactNode);
 
-type DropdownEmptyFilterMessageType = React.ReactNode | ((props: DropdownProps) => React.ReactNode);
+type DropdownEmptyFilterMessageType<TOption> = React.ReactNode | ((props: DropdownProps<TOption>) => React.ReactNode);
 
-type DropdownOptionDisabledType = string | ((option: any) => boolean);
+type DropdownOptionDisabledType<TOption> = string | ((option: TOption) => boolean);
 
 type DropdownAppendToType = 'self' | HTMLElement | undefined | null;
 
-interface DropdownChangeTargetOptions {
+type DropdownValue<TOption, TValue, TGroupLabel, TGroupChildren> = TGroupLabel extends undefined
+    ? TValue extends undefined
+        ? TOption extends { value: any }
+            ? TOption['value']
+            : TOption
+        : TValue extends keyof TOption
+        ? TOption[TValue]
+        : any
+    : TGroupChildren extends keyof TOption
+    ? TValue extends undefined
+        ? TOption[TGroupChildren] extends { value: any }[]
+            ? TOption[TGroupChildren][0]['value']
+            : TOption[TGroupChildren] extends any[]
+            ? TOption[TGroupChildren][0]
+            : any
+        : TOption[TGroupChildren] extends any[]
+        ? TValue extends keyof TOption[TGroupChildren][0]
+            ? TOption[TGroupChildren][0][TValue]
+            : any
+        : any
+    : any;
+
+interface DropdownChangeTargetOptions<TOption> {
     name: string;
     id: string;
-    value: any;
+    value: TOption;
 }
 
-interface DropdownChangeParams {
+interface DropdownChangeParams<TOption, TValue, TGroupLabel, TGroupChildren> {
     originalEvent: React.SyntheticEvent;
-    value: any;
+    value: DropdownValue<TOption, TValue, TGroupLabel, TGroupChildren>;
     stopPropagation(): void;
     preventDefault(): void;
-    target: DropdownChangeTargetOptions;
+    target: DropdownChangeTargetOptions<TOption>;
 }
 
 interface DropdownFilterParams {
@@ -44,21 +66,21 @@ interface DropdownFilterOptions {
     reset?: () => void;
 }
 
-export interface DropdownProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange' | 'ref'> {
+export interface DropdownProps<TOption, TValue = undefined, TGroupLabel = undefined, TGroupChildren = undefined> extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'value' | 'onChange' | 'ref'> {
     id?: string;
     inputRef?: React.Ref<HTMLSelectElement>;
     name?: string;
-    value?: any;
-    options?: SelectItemOptionsType;
-    optionLabel?: string;
-    optionValue?: string;
-    optionDisabled?: DropdownOptionDisabledType;
-    optionGroupLabel?: string;
-    optionGroupChildren?: string;
-    optionGroupTemplate?: DropdownOptionGroupTemplateType;
-    valueTemplate?: DropdownValueTemplateType;
+    value?: string | number | DropdownValue<TOption, TValue, TGroupLabel, TGroupChildren> | undefined;
+    options?: SelectItemOptionsType<TOption>;
+    optionLabel?: NestedKeyOf<TOption> | Omit<NestedKeyOf<TOption>, string>;
+    optionValue?: TValue | Omit<TValue, string>;
+    optionDisabled?: DropdownOptionDisabledType<TOption>;
+    optionGroupLabel?: TGroupLabel | Omit<NestedKeyOf<TGroupLabel>, string>;
+    optionGroupChildren?: TGroupChildren | Omit<NestedKeyOf<TGroupChildren>, string>;
+    optionGroupTemplate?: DropdownOptionGroupTemplateType<TOption>;
+    valueTemplate?: DropdownValueTemplateType<TOption>;
     filterTemplate?: DropdownFilterTemplateType;
-    itemTemplate?: DropdownItemTemplateType;
+    itemTemplate?: DropdownItemTemplateType<TOption>;
     style?: object;
     className?: string;
     virtualScrollerOptions?: VirtualScrollerProps;
@@ -68,8 +90,8 @@ export interface DropdownProps extends Omit<React.DetailedHTMLProps<React.InputH
     filterMatchMode?: string;
     filterPlaceholder?: string;
     filterLocale?: string;
-    emptyMessage?: DropdownEmptyMessageType;
-    emptyFilterMessage?: DropdownEmptyFilterMessageType;
+    emptyMessage?: DropdownEmptyMessageType<TOption>;
+    emptyFilterMessage?: DropdownEmptyFilterMessageType<TOption>;
     editable?: boolean;
     placeholder?: string;
     required?: boolean;
@@ -93,7 +115,7 @@ export interface DropdownProps extends Omit<React.DetailedHTMLProps<React.InputH
     transitionOptions?: CSSTransitionProps;
     dropdownIcon?: string;
     showOnFocus?: boolean;
-    onChange?(e: DropdownChangeParams): void;
+    onChange?(e: DropdownChangeParams<TOption, TValue, TGroupLabel, TGroupChildren>): void;
     onFocus?(event: React.FocusEvent<HTMLInputElement>): void;
     onBlur?(event: React.FocusEvent<HTMLInputElement>): void;
     onMouseDown?(event: React.MouseEvent<HTMLElement>): void;
@@ -104,7 +126,12 @@ export interface DropdownProps extends Omit<React.DetailedHTMLProps<React.InputH
     children?: React.ReactNode;
 }
 
-export declare class Dropdown extends React.Component<DropdownProps, any> {
+export declare class Dropdown<
+    TOption,
+    TValue extends NestedKeyOf<TOption> | undefined = undefined,
+    TGroupLabel extends NestedKeyOf<TOption> | undefined = undefined,
+    TGroupChildren extends NestedKeyOf<TOption> | undefined = undefined
+> extends React.Component<DropdownProps<TOption, TValue, TGroupLabel, TGroupChildren>, any> {
     public getElement(): HTMLDivElement;
     public getInput(): HTMLInputElement;
     public getFocusInput(): HTMLInputElement;
diff --git a/components/lib/listbox/listbox.d.ts b/components/lib/listbox/listbox.d.ts
index cd01da36a1..2022450528 100755
--- a/components/lib/listbox/listbox.d.ts
+++ b/components/lib/listbox/listbox.d.ts
@@ -1,33 +1,77 @@
 import * as React from 'react';
-import { SelectItemOptionsType } from '../selectitem/selectitem';
+import { NestedKeyOf, SelectItemOptionsType } from '../selectitem/selectitem';
 import TooltipOptions from '../tooltip/tooltipoptions';
 import { VirtualScrollerProps, VirtualScroller } from '../virtualscroller';
 
-type ListBoxOptionGroupTemplateType = React.ReactNode | ((option: any, index: number) => React.ReactNode);
+type ListBoxOptionGroupTemplateType<TOption> = React.ReactNode | ((option: TOption, index: number) => React.ReactNode);
 
-type ListBoxItemTemplateType = React.ReactNode | ((option: any) => React.ReactNode);
+type ListBoxItemTemplateType<TOption> = React.ReactNode | ((option: TOption) => React.ReactNode);
 
 type ListBoxFilterTemplateType = React.ReactNode | ((options: ListBoxFilterOptions) => React.ReactNode);
 
-type ListBoxOptionDisabledType = string | ((option: any) => boolean);
+type ListBoxOptionDisabledType<TOption> = string | ((option: TOption) => boolean);
 
-interface ListBoxChangeTargetOptions {
+type ListBoxValueType<TOption, TValue, TMultiple, TGroupLabel, TGroupChildren> = TMultiple extends undefined
+    ? TGroupLabel extends undefined
+        ? TValue extends undefined
+            ? TOption extends { value: any }
+                ? TOption['value']
+                : TOption
+            : TValue extends keyof TOption
+            ? TOption[TValue]
+            : any
+        : TGroupChildren extends keyof TOption
+        ? TValue extends undefined
+            ? TOption[TGroupChildren] extends { value: any }[]
+                ? TOption[TGroupChildren][0]['value']
+                : TOption[TGroupChildren] extends any[]
+                ? TOption[TGroupChildren][0]
+                : any
+            : TOption[TGroupChildren] extends any[]
+            ? TValue extends keyof TOption[TGroupChildren][0]
+                ? TOption[TGroupChildren][0][TValue]
+                : any
+            : any
+        : any
+    : TGroupLabel extends undefined
+    ? TValue extends undefined
+        ? TOption extends { value: any }
+            ? TOption['value'][]
+            : TOption[]
+        : TValue extends keyof TOption
+        ? TOption[TValue][]
+        : any[]
+    : TGroupChildren extends keyof TOption
+    ? TValue extends undefined
+        ? TOption[TGroupChildren] extends { value: any }[]
+            ? TOption[TGroupChildren][0]['value'][]
+            : TOption[TGroupChildren] extends any[]
+            ? TOption[TGroupChildren][0]
+            : any[]
+        : TOption[TGroupChildren] extends any[]
+        ? TValue extends keyof TOption[TGroupChildren][0]
+            ? TOption[TGroupChildren][0][TValue][]
+            : any[]
+        : any[]
+    : any[];
+
+interface ListBoxChangeTargetOptions<TOption> {
     name: string;
     id: string;
-    value: any;
+    value: TOption;
 }
 
-interface ListBoxChangeParams {
+interface ListBoxChangeParams<TOption, TValue, TMultiple, TGroupLabel, TGroupChildren> {
     originalEvent: React.SyntheticEvent;
-    value: any;
+    value: ListBoxValueType<TOption, TValue, TMultiple, TGroupLabel, TGroupChildren>;
     stopPropagation(): void;
     preventDefault(): void;
-    target: ListBoxChangeTargetOptions;
+    target: ListBoxChangeTargetOptions<TOption>;
 }
 
-interface ListBoxFilterValueChangeParams {
+interface ListBoxFilterValueChangeParams<TOption> {
     originalEvent: React.SyntheticEvent;
-    value: any;
+    value: TOption;
 }
 
 interface ListBoxFilterOptions {
@@ -35,23 +79,24 @@ interface ListBoxFilterOptions {
     reset?: () => void;
 }
 
-export interface ListBoxProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange' | 'ref'> {
-    value?: any;
-    options?: SelectItemOptionsType;
-    optionLabel?: string;
-    optionValue?: string;
-    optionDisabled?: ListBoxOptionDisabledType;
-    optionGroupLabel?: string;
-    optionGroupChildren?: string;
-    optionGroupTemplate?: ListBoxOptionGroupTemplateType;
-    itemTemplate?: ListBoxItemTemplateType;
+export interface ListBoxProps<TOption, TValue = undefined, TMultiple = undefined, TGroupLabel = undefined, TGroupChildren = undefined>
+    extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'multiple' | 'value' | 'onChange' | 'ref'> {
+    value?: ReadonlyArray<string> | ListBoxValueType<TOption, TValue, TMultiple, TGroupLabel, TGroupChildren>;
+    options?: SelectItemOptionsType<TOption>;
+    optionLabel?: NestedKeyOf<TOption> | Omit<NestedKeyOf<TOption>, string>;
+    optionValue?: TValue | Omit<TValue, string>;
+    optionDisabled?: ListBoxOptionDisabledType<TOption>;
+    optionGroupLabel?: TGroupLabel | Omit<NestedKeyOf<TGroupLabel>, string>;
+    optionGroupChildren?: TGroupChildren | Omit<NestedKeyOf<TGroupChildren>, string>;
+    optionGroupTemplate?: ListBoxOptionGroupTemplateType<TOption>;
+    itemTemplate?: ListBoxItemTemplateType<TOption>;
     filterTemplate?: ListBoxFilterTemplateType;
     listStyle?: object;
     listClassName?: string;
     virtualScrollerOptions?: VirtualScrollerProps;
     disabled?: boolean;
-    dataKey?: string;
-    multiple?: boolean;
+    dataKey?: NestedKeyOf<TOption> | Omit<NestedKeyOf<TOption>, string>;
+    multiple?: TMultiple;
     metaKeySelection?: boolean;
     filter?: boolean;
     filterBy?: string;
@@ -63,12 +108,18 @@ export interface ListBoxProps extends Omit<React.DetailedHTMLProps<React.InputHT
     tooltip?: string;
     tooltipOptions?: TooltipOptions;
     ariaLabelledBy?: string;
-    onChange?(e: ListBoxChangeParams): void;
-    onFilterValueChange?(e: ListBoxFilterValueChangeParams): void;
+    onChange?(e: ListBoxChangeParams<TOption, TValue, TMultiple, TGroupLabel, TGroupChildren>): void;
+    onFilterValueChange?(e: ListBoxFilterValueChangeParams<TOption>): void;
     children?: React.ReactNode;
 }
 
-export declare class ListBox extends React.Component<ListBoxProps, any> {
+export declare class ListBox<
+    TOption,
+    TValue extends NestedKeyOf<TOption> | undefined = undefined,
+    TMultiple = undefined,
+    TGroupLabel extends NestedKeyOf<TOption> | undefined = undefined,
+    TGroupChildren extends NestedKeyOf<TOption> | undefined = undefined
+> extends React.Component<ListBoxProps<TOption, TValue, TMultiple, TGroupLabel, TGroupChildren>, any> {
     public getElement(): HTMLDivElement;
     public getVirtualScroller(): VirtualScroller;
 }
diff --git a/components/lib/multiselect/multiselect.d.ts b/components/lib/multiselect/multiselect.d.ts
index 20101e2ab3..6632d1b561 100755
--- a/components/lib/multiselect/multiselect.d.ts
+++ b/components/lib/multiselect/multiselect.d.ts
@@ -1,19 +1,19 @@
 import * as React from 'react';
-import TooltipOptions from '../tooltip/tooltipoptions';
 import { CSSTransitionProps } from '../csstransition';
+import { NestedKeyOf, SelectItemOptionsType } from '../selectitem/selectitem';
+import TooltipOptions from '../tooltip/tooltipoptions';
 import { IconType } from '../utils';
 import { VirtualScrollerProps } from '../virtualscroller';
-import { SelectItemOptionsType } from '../selectitem/selectitem';
 
-type MultiSelectOptionGroupTemplateType = React.ReactNode | ((option: any, index: number) => React.ReactNode);
+type MultiSelectOptionGroupTemplateType<TOption> = React.ReactNode | ((option: TOption, index: number) => React.ReactNode);
 
-type MultiSelectItemTemplateType = React.ReactNode | ((option: any) => React.ReactNode);
+type MultiSelectItemTemplateType<TOption> = React.ReactNode | ((option: TOption) => React.ReactNode);
 
-type MultiSelectSelectedItemTemplateType = React.ReactNode | ((value: any) => React.ReactNode);
+type MultiSelectSelectedItemTemplateType<TOption> = React.ReactNode | ((value: TOption) => React.ReactNode);
 
 type MultiSelectFilterTemplateType = React.ReactNode | ((options: MultiSelectFilterOptions) => React.ReactNode);
 
-type MultiSelectEmptyFilterMessageType = React.ReactNode | ((props: MultiSelectProps) => React.ReactNode);
+type MultiSelectEmptyFilterMessageType<TOption> = React.ReactNode | ((props: MultiSelectProps<TOption>) => React.ReactNode);
 
 type MultiSelectDisplayType = 'comma' | 'chip';
 
@@ -22,7 +22,7 @@ interface MultiSelectHeaderCheckboxChangeParams {
     checked: boolean;
 }
 
-interface MultiSelectPanelHeaderTemplateParams {
+interface MultiSelectPanelHeaderTemplateParams<TOption> {
     className: string;
     checkboxElement: HTMLElement;
     checked: boolean;
@@ -33,29 +33,51 @@ interface MultiSelectPanelHeaderTemplateParams {
     closeIconClassName: string;
     onCloseClick(event: React.MouseEvent<HTMLElement>): void;
     element: JSX.Element;
-    props: MultiSelectProps;
+    props: MultiSelectProps<TOption>;
 }
 
-type MultiSelectPanelHeaderTemplateType = React.ReactNode | ((e: MultiSelectPanelHeaderTemplateParams) => React.ReactNode);
-
-type MultiSelectPanelFooterTemplateType = React.ReactNode | ((props: MultiSelectProps, hide: () => void) => React.ReactNode);
-
-type MultiSelectOptionDisabledType = string | ((option: any) => boolean);
+type MultiSelectValue<TOption, TValue, TGroupLabel, TGroupChildren> = TGroupLabel extends undefined
+    ? TValue extends undefined
+        ? TOption extends { value: any }
+            ? TOption['value'][]
+            : TOption[]
+        : TValue extends keyof TOption
+        ? TOption[TValue][]
+        : any[]
+    : TGroupChildren extends keyof TOption
+    ? TValue extends undefined
+        ? TOption[TGroupChildren] extends { value: any }[]
+            ? TOption[TGroupChildren][0]['value'][]
+            : TOption[TGroupChildren] extends any[]
+            ? TOption[TGroupChildren][0][]
+            : any[]
+        : TOption[TGroupChildren] extends any[]
+        ? TValue extends keyof TOption[TGroupChildren][0]
+            ? TOption[TGroupChildren][0][TValue][]
+            : any[]
+        : any[]
+    : any[];
+
+type MultiSelectPanelHeaderTemplateType<TOption> = React.ReactNode | ((e: MultiSelectPanelHeaderTemplateParams<TOption>) => React.ReactNode);
+
+type MultiSelectPanelFooterTemplateType<TOption> = React.ReactNode | ((props: MultiSelectProps<TOption>, hide: () => void) => React.ReactNode);
+
+type MultiSelectOptionDisabledType<TOption> = string | ((option: TOption) => boolean);
 
 type MultiSelectAppendToType = 'self' | HTMLElement | undefined | null;
 
-interface MultiSelectChangeTargetOptions {
+interface MultiSelectChangeTargetOptions<TOption> {
     name: string;
     id: string;
-    value: any;
+    value: TOption;
 }
 
-interface MultiSelectChangeParams {
+interface MultiSelectChangeParams<TOption, TValue, TGroupLabel, TGroupChildren> {
     originalEvent: React.SyntheticEvent;
-    value: any;
+    value: MultiSelectValue<TOption, TValue, TGroupLabel, TGroupChildren>;
     stopPropagation(): void;
     preventDefault(): void;
-    target: MultiSelectChangeTargetOptions;
+    target: MultiSelectChangeTargetOptions<TOption>;
 }
 
 interface MultiSelectFilterParams {
@@ -73,18 +95,18 @@ interface MultiSelectFilterOptions {
     reset?: () => void;
 }
 
-export interface MultiSelectProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange' | 'ref'> {
+export interface MultiSelectProps<TOption, TValue = undefined, TGroupLabel = undefined, TGroupChildren = undefined> extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'value' | 'onChange' | 'ref'> {
     id?: string;
     inputRef?: React.Ref<HTMLSelectElement>;
     name?: string;
-    value?: any;
-    options?: SelectItemOptionsType;
-    optionLabel?: string;
-    optionValue?: string;
-    optionDisabled?: MultiSelectOptionDisabledType;
-    optionGroupLabel?: string;
-    optionGroupChildren?: string;
-    optionGroupTemplate?: MultiSelectOptionGroupTemplateType;
+    value?: string | number | ReadonlyArray<string> | ReadonlyArray<number> | MultiSelectValue<TOption, TValue, TGroupLabel, TGroupChildren> | ReadonlyArray<TOption> | undefined;
+    options?: SelectItemOptionsType<TOption>;
+    optionLabel?: NestedKeyOf<TOption> | Omit<NestedKeyOf<TOption>, string>;
+    optionValue?: TValue | Omit<TValue, string>;
+    optionDisabled?: MultiSelectOptionDisabledType<TOption>;
+    optionGroupLabel?: TGroupLabel | Omit<NestedKeyOf<TGroupLabel>, string>;
+    optionGroupChildren?: TGroupChildren | Omit<NestedKeyOf<TGroupChildren>, string>;
+    optionGroupTemplate?: MultiSelectOptionGroupTemplateType<TOption>;
     display?: MultiSelectDisplayType;
     style?: object;
     className?: string;
@@ -101,10 +123,10 @@ export interface MultiSelectProps extends Omit<React.DetailedHTMLProps<React.Inp
     filterMatchMode?: string;
     filterPlaceholder?: string;
     filterLocale?: string;
-    emptyFilterMessage?: MultiSelectEmptyFilterMessageType;
+    emptyFilterMessage?: MultiSelectEmptyFilterMessageType<TOption>;
     resetFilterOnHide?: boolean;
     tabIndex?: number;
-    dataKey?: string;
+    dataKey?: NestedKeyOf<TOption> | Omit<NestedKeyOf<TOption>, string>;
     inputId?: string;
     appendTo?: MultiSelectAppendToType;
     tooltip?: string;
@@ -113,17 +135,17 @@ export interface MultiSelectProps extends Omit<React.DetailedHTMLProps<React.Inp
     selectionLimit?: number;
     selectedItemsLabel?: string;
     ariaLabelledBy?: string;
-    itemTemplate?: MultiSelectItemTemplateType;
+    itemTemplate?: MultiSelectItemTemplateType<TOption>;
     filterTemplate?: MultiSelectFilterTemplateType;
-    selectedItemTemplate?: MultiSelectSelectedItemTemplateType;
-    panelHeaderTemplate?: MultiSelectPanelHeaderTemplateType;
-    panelFooterTemplate?: MultiSelectPanelFooterTemplateType;
+    selectedItemTemplate?: MultiSelectSelectedItemTemplateType<TOption>;
+    panelHeaderTemplate?: MultiSelectPanelHeaderTemplateType<TOption>;
+    panelFooterTemplate?: MultiSelectPanelFooterTemplateType<TOption>;
     transitionOptions?: CSSTransitionProps;
-    dropdownIcon?: IconType<MultiSelectProps>;
-    removeIcon?: IconType<MultiSelectProps>;
+    dropdownIcon?: IconType<MultiSelectProps<TOption, TValue, TGroupLabel, TGroupChildren>>;
+    removeIcon?: IconType<MultiSelectProps<TOption, TValue, TGroupLabel, TGroupChildren>>;
     showSelectAll?: boolean;
     selectAll?: boolean;
-    onChange?(e: MultiSelectChangeParams): void;
+    onChange?(e: MultiSelectChangeParams<TOption, TValue, TGroupLabel, TGroupChildren>): void;
     onFocus?(event: React.FocusEvent<HTMLInputElement>): void;
     onBlur?(event: React.FocusEvent<HTMLInputElement>): void;
     onShow?(): void;
@@ -133,7 +155,12 @@ export interface MultiSelectProps extends Omit<React.DetailedHTMLProps<React.Inp
     children?: React.ReactNode;
 }
 
-export declare class MultiSelect extends React.Component<MultiSelectProps, any> {
+export declare class MultiSelect<
+    TOption,
+    TValue extends NestedKeyOf<TOption> | undefined = undefined,
+    TGroupLabel extends NestedKeyOf<TOption> | undefined = undefined,
+    TGroupChildren extends NestedKeyOf<TOption> | undefined = undefined
+> extends React.Component<MultiSelectProps<TOption, TValue, TGroupLabel, TGroupChildren>, any> {
     public show(): void;
     public hide(): void;
     public getElement(): HTMLDivElement;
diff --git a/components/lib/selectbutton/selectbutton.d.ts b/components/lib/selectbutton/selectbutton.d.ts
index af61b90ee6..64127334fc 100644
--- a/components/lib/selectbutton/selectbutton.d.ts
+++ b/components/lib/selectbutton/selectbutton.d.ts
@@ -1,42 +1,59 @@
+import { NestedKeyOf } from './../selectitem/selectitem.d';
 import * as React from 'react';
-import TooltipOptions from '../tooltip/tooltipoptions';
 import { SelectItemOptionsType } from '../selectitem/selectitem';
+import TooltipOptions from '../tooltip/tooltipoptions';
 
-type SelectButtonOptionDisabledType = string | ((option: any) => boolean);
+type SelectButtonOptionDisabledType<TOption> = string | ((option: TOption) => boolean);
 
-interface SelectButtonChangeTargetOptions {
+interface SelectButtonChangeTargetOptions<TOption> {
     name: string;
     id: string;
-    value: any;
+    value: TOption;
 }
 
-interface SelectButtonChangeParams {
+type SelectButtonValue<TOption, TValue, TMultiple> = TMultiple extends undefined
+    ? TValue extends undefined
+        ? TOption extends { value: any }
+            ? TOption['value']
+            : TOption
+        : TValue extends keyof TOption
+        ? TOption[TValue]
+        : any
+    : TValue extends undefined
+    ? TOption extends { value: any }
+        ? TOption['value'][]
+        : TOption[]
+    : TValue extends keyof TOption
+    ? TOption[TValue][]
+    : any[];
+
+interface SelectButtonChangeParams<TOption, TValue, TMultiple> {
     originalEvent: React.SyntheticEvent;
-    value: any;
+    value: SelectButtonValue<TOption, TValue, TMultiple>;
     stopPropagation(): void;
     preventDefault(): void;
-    target: SelectButtonChangeTargetOptions;
+    target: SelectButtonChangeTargetOptions<TOption>;
 }
 
-export interface SelectButtonProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'unselectable' | 'onChange' | 'ref'> {
-    value?: any;
-    options?: SelectItemOptionsType;
-    optionLabel?: string;
-    optionValue?: string;
-    optionDisabled?: SelectButtonOptionDisabledType;
+export interface SelectButtonProps<TOption, TValue = undefined, TMultiple = undefined> extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'value' | 'multiple' | 'unselectable' | 'onChange' | 'ref'> {
+    value?: string | number | ReadonlyArray<string> | ReadonlyArray<number> | SelectButtonValue<TOption, TValue, TMultiple> | ReadonlyArray<TOption> | undefined;
+    options?: SelectItemOptionsType<TOption>;
+    optionLabel?: NestedKeyOf<TOption> | Omit<NestedKeyOf<TOption>, string>;
+    optionValue?: TValue | Omit<TValue, string>;
+    optionDisabled?: SelectButtonOptionDisabledType<TOption>;
     tabIndex?: number;
-    multiple?: boolean;
+    multiple?: TMultiple;
     unselectable?: boolean;
     disabled?: boolean;
-    dataKey?: string;
+    dataKey?: NestedKeyOf<TOption> | Omit<NestedKeyOf<TOption>, string>;
     tooltip?: string;
     tooltipOptions?: TooltipOptions;
     ariaLabelledBy?: string;
-    itemTemplate?(option: any): React.ReactNode;
-    onChange?(e: SelectButtonChangeParams): void;
+    itemTemplate?(option: TOption): React.ReactNode;
+    onChange?(e: SelectButtonChangeParams<TOption, TValue, TMultiple>): void;
     children?: React.ReactNode;
 }
 
-export declare class SelectButton extends React.Component<SelectButtonProps, any> {
+export declare class SelectButton<TOption, TValue extends NestedKeyOf<TOption> | undefined = undefined, TMultiple = undefined> extends React.Component<SelectButtonProps<TOption, TValue, TMultiple>, any> {
     public getElement(): HTMLDivElement;
 }
diff --git a/components/lib/selectitem/selectitem.d.ts b/components/lib/selectitem/selectitem.d.ts
index 9d15f1de57..0326615146 100644
--- a/components/lib/selectitem/selectitem.d.ts
+++ b/components/lib/selectitem/selectitem.d.ts
@@ -1,6 +1,6 @@
 import { IconType } from '../utils';
 
-export type SelectItemOptionsType = SelectItem[] | any[];
+export type SelectItemOptionsType<TOption> = SelectItem[] | TOption[];
 
 export interface SelectItem {
     label?: string;
@@ -10,3 +10,7 @@ export interface SelectItem {
     title?: string;
     disabled?: boolean;
 }
+
+export type NestedKeyOf<ObjectType> = {
+    [Key in keyof ObjectType & (string | number)]: ObjectType extends any[] ? 'length' : ObjectType[Key] extends object ? `${Key}` | `${Key}.${NestedKeyOf<ObjectType[Key]>}` : `${Key}`;
+}[keyof ObjectType & (string | number)];