fix(control): expose event in case the user wants to stopPropagation

src/components/CheckboxGroup.tsx

@@ -6,9 +6,9 @@ import { getSelectedCheckboxes } from "./utils/getSelectedCheckboxes";
 export default class RadioGroup extends React.PureComponent<
   CheckboxGroupProps
 > {
-  private handleChange = ({ value }) => {
+  private handleChange = ({ value }, event: React.MouseEvent) => {
     const { onChange, selected } = this.props;
-    onChange(getSelectedCheckboxes(value, selected), this.props);
+    onChange(getSelectedCheckboxes(value, selected), event);
   };
 
   render() {

src/components/RadioGroup.tsx

@@ -3,10 +3,10 @@ import { RadioProps } from "./typings/Radio";
 import { RadioGroupProps } from "./typings/RadioGroup";
 
 export default class RadioGroup extends React.PureComponent<RadioGroupProps> {
-  private handleChange = ({ value, checked }) => {
+  private handleChange = ({ value, checked }, event: React.MouseEvent) => {
     const { toggle, selected, onChange } = this.props;
     if (!toggle && value === selected) return;
-    onChange(checked ? value : undefined, this.props);
+    onChange(checked ? value : undefined, event);
   };
 
   render() {

src/components/Select.tsx

@@ -64,8 +64,8 @@ const Select: React.SFC<SelectProps> = props => {
           <React.Fragment>
             <OptionGroup
               selected={selected}
-              onChange={_value => {
-                onChange(_value, props);
+              onChange={(_value, event) => {
+                onChange(_value, event);
                 if (!multiSelect) {
                   toggle();
                 }

src/components/shared/Control.tsx

@@ -23,7 +23,9 @@ const Control: React.SFC<ControlProps> = props => {
       data-disabled={disabled}
       tabIndex={checked ? 0 : -1}
       onClick={
-        !disabled ? () => onChange({ value, checked: !checked }) : undefined
+        !disabled
+          ? (e: React.MouseEvent) => onChange({ value, checked: !checked }, e)
+          : undefined
       }
     >
       {children(props)}

src/components/typings/CheckboxGroup.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 
 export interface CheckboxGroupProps {
   selected: (number | string)[];
-  onChange: (value: (number | string)[], props: CheckboxGroupProps) => void;
+  onChange: (value: (number | string)[], e: React.MouseEvent) => void;
   children: React.ReactNode | React.ReactNodeArray;
   className?: string;
   name: string;

src/components/typings/Control.ts

@@ -1,7 +1,10 @@
 import * as React from "react";
 
 export interface ControlProps {
-  onChange?: (args: { value: React.ReactText; checked: boolean }) => void;
+  onChange?: (
+    args: { value: React.ReactText; checked: boolean },
+    e: React.MouseEvent
+  ) => void;
   value: React.ReactText;
   label: string;
   checked?: boolean;

src/components/typings/RadioGroup.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 
 export interface RadioGroupProps {
   selected: number | string;
-  onChange: (value: number | string, props: RadioGroupProps) => void;
+  onChange: (value: number | string, event: React.MouseEvent) => void;
   children: React.ReactNode | React.ReactNodeArray;
   toggle?: boolean;
   className?: string;

src/components/typings/Select.ts

@@ -11,7 +11,7 @@ export interface SelectProps {
   value?: string;
   selected?: Selected;
   multiSelect?: boolean;
-  onChange: (value: Selected, props: SelectProps) => void;
+  onChange: (value: Selected, event: React.MouseEvent) => void;
   onApply?: (value: Selected, props: SelectProps) => void;
   onClear?: () => void;
   searchBox?: boolean;