PR fixes

packages/ActionMenu/src/ActionMenu.test.tsx

@@ -87,7 +87,7 @@ describe('ActionMenu', () => {
           label: 'Add Item',
           value: 'add',
           onClick: (e) => {
-            e.preventDefault();
+            e?.preventDefault();
             selected = true;
           }
         },

packages/ActionMenu/src/ActionMenu.tsx

@@ -23,7 +23,7 @@ export interface ActionMenuOption extends Omit<Option, "type"> {
     /** Whether or not the action menu should close when an option is selected */
     closeOnSelect?: boolean | ((option: OptionType) => boolean);
     /** Callback when an option is selected */
-    onClick?: (() => void) | React.MouseEventHandler<HTMLButtonElement>;
+    onClick?: (e?: React.SyntheticEvent) => void;
 }
 
 export interface ActionMenuProps extends React.ComponentProps<"div"> {
@@ -119,21 +119,12 @@ const ActionMenu: React.FunctionComponent<ActionMenuProps> = ({
         return closeOnSelect;
     };
 
-    const selectOption = (option: OptionType): void => {
+    const selectOption = (option: OptionType, e?: React.SyntheticEvent): void => {
         const actionMenuOption = options.find(
             actionMenuOption => actionMenuOption.value === option.value
         );
-        const onOptionSelect = actionMenuOption?.onClick;
-        if (onOptionSelect) {
-            if (onOptionSelect.length > 0) {
-                // eslint-disable-next-line max-len
-                const syntheticEvent = new MouseEvent("click") as unknown as React.MouseEvent<HTMLButtonElement>;
-                onOptionSelect(syntheticEvent);
-            } else {
-                // Call the function without arguments if it doesn't expect any
-                (onOptionSelect as () => void)();
-            }
-        }
+
+        actionMenuOption?.onClick?.(e);
 
         if (closeMenuOnSelect(option)) {
             toggleMenu(false);
@@ -194,7 +185,7 @@ const ActionMenu: React.FunctionComponent<ActionMenuProps> = ({
                 keyboardEvent.preventDefault();
                 keyboardEvent.stopPropagation();
                 if (currentFocusedOption) {
-                    selectOption(currentFocusedOption);
+                    selectOption(currentFocusedOption, keyboardEvent);
                 }
                 if ((!currentFocusedOption && showMenu) || !showMenu) {
                     toggleMenu(!showMenu);

packages/Alert/src/Alert.tsx

@@ -30,7 +30,7 @@ export type Appearance = "card" | "inline" | "horizontal";
 
 export interface AlertButton {
     label: React.ReactNode;
-    onClick: (() => void) | React.MouseEventHandler<HTMLButtonElement>;
+    onClick?: (e?: React.SyntheticEvent) => void;
 }
 
 export interface AlertProps extends Omit<React.ComponentProps<"div">, "title"> {

packages/Button/src/Button.tsx

@@ -56,7 +56,7 @@ export interface ButtonOwnProps {
     /** Display only the icon in mobile */
     showOnlyIconOnMobile?: boolean;
     /** Callback when clicked */
-    onClick?: (() => void) | React.MouseEventHandler<HTMLButtonElement>;
+    onClick?: (e?: React.SyntheticEvent) => void;
     /** Optional prop to specify the type of the Button */
     type?: "button" | "reset" | "submit";
     /** Add a data-intercom-target with unique id to link a

packages/Filter/src/Filter.tsx

@@ -13,7 +13,7 @@ export interface FilterProps extends React.ComponentProps<"button"> {
     /** True if the filter should be disabled */
     disabled?: boolean;
     /** Add an event for when the filter is clicked */
-    onClick?: (() => void) | React.MouseEventHandler<HTMLButtonElement>;
+    onClick?: (e?: React.SyntheticEvent) => void;
     /** True if the tag is selected */
     selected?: boolean;
 }

packages/IconButton/src/IconButton.tsx

@@ -15,7 +15,7 @@ export interface IconButtonProps extends Omit<ButtonOwnProps, "size"> {
     icon: React.ReactNode;
     /** Callback function that will be called
    * when the user clicks on the button */
-    onClick?: (() => void) | React.MouseEventHandler<HTMLButtonElement>;
+    onClick?: (e?: React.SyntheticEvent) => void;
     /** True if the control is disabled and shows a disabled state.
    * The user cannot click on the button */
     disabled?: boolean;

packages/List/src/List.tsx

@@ -14,7 +14,7 @@ export interface ListProps extends React.ComponentPropsWithRef<"ul"> {
     disableTabbing?: boolean;
     /** The option that is currently being focused or hovered */
     focusedOption?: OptionType | null;
-    /** True for a compact appearance 
+    /** True for a compact appearance
      * (Corresponds to "small" in Figma for compact, and "medium" for non-compact) */
     isCompact?: boolean;
     /** Whether or not the list is loading */
@@ -25,7 +25,7 @@ export interface ListProps extends React.ComponentPropsWithRef<"ul"> {
     /** Called when an option becomes focused or hovered */
     onOptionFocus?: (option: OptionType) => void;
     /** Called when an option is selected */
-    onOptionChange?: (option: OptionType) => void;
+    onOptionChange?: (option: OptionType, e?: React.SyntheticEvent) => void;
     /** Called when the mouse moves outside of the option
    * or the option loses focus */
     onOptionBlur?: (option: OptionType) => void;

packages/List/src/ListItem.tsx

@@ -64,7 +64,7 @@ export interface ListItemProps extends React.ComponentProps<"li"> {
     /** Called when an option becomes focused or hovered */
     onOptionFocus?: (option: OptionType) => void;
     /** Called when an option is selected */
-    onOptionChange?: (option: OptionType) => void;
+    onOptionChange?: (option: OptionType, e?: React.SyntheticEvent) => void;
     /** Called when the mouse moves outside of the option
    * or the option loses focus */
     onOptionBlur?: (option: OptionType) => void;
@@ -127,9 +127,9 @@ const ListItem: React.FunctionComponent<ListItemProps> = ({
         }
     };
 
-    const handleOptionChange = (item: OptionType): void => {
+    const handleOptionChange = (item: OptionType, e?: React.SyntheticEvent): void => {
         if (!isOptionDisabled() && onOptionChange) {
-            onOptionChange(item);
+            onOptionChange(item, e);
         }
     };
 
@@ -218,7 +218,7 @@ const ListItem: React.FunctionComponent<ListItemProps> = ({
           !(target as HTMLElement).closest("button")
                 ) {
                     if (option) {
-                        handleOptionChange(option);
+                        handleOptionChange(option, e);
                     }
                 }
             }}

packages/Stepper/src/Stepper.test.tsx

@@ -74,31 +74,6 @@ describe('Stepper', () => {
     }
   });
 
-  test('It should accept React.MouseEventHandler<HTMLButtonElement> as onClick prop', () => {
-    const mockOnClick: React.MouseEventHandler<HTMLButtonElement> = jest.fn();
-
-    const steps = [
-      { title: 'Step 1', onClick: mockOnClick },
-      { title: 'Step 2' },
-      { title: 'Step 3' },
-    ];
-
-    const currentStep = 1;
-    const {container} = setup({steps: steps, currentStep: currentStep, clickableNextSteps: false});
-
-    const props: StepperProps = {
-      steps: steps,
-      currentStep: 0,
-    };
-
-    render(<Stepper {...props} />);
-
-    const stepElements = container.querySelectorAll('.ids-step');
-    fireEvent.click(stepElements[0]);
-
-    expect(mockOnClick).toHaveBeenCalled();
-  });
-
   test('Enables steps after the current step if clickableNextSteps is true', () => {
     const currentStep = 1;
 

packages/Stepper/src/Stepper.tsx

@@ -8,7 +8,7 @@ import "./stepper.scss";
 
 export interface Step {
     /** The callback function that is called when the step is clicked */
-    onClick?: ((index: number) => void) | React.MouseEventHandler<HTMLButtonElement>;
+    onClick?: ((index: number, e?: PressEvent) => void);
     /** The title for the step */
     title: string;
 }
@@ -55,13 +55,8 @@ const Stepper: React.FunctionComponent<StepperProps> = ({
                             isComplete={isComplete}
                             isCurrent={isCurrent}
                             disabled={disabled}
-                            onPress={(event: PressEvent) => {
-                                if (typeof step.onClick === "function") {
-                                    (step.onClick as (index: number) => void)(index);
-                                } else if (step.onClick) {
-                                    // eslint-disable-next-line max-len
-                                    (step.onClick as React.MouseEventHandler<HTMLButtonElement>)(event as unknown as React.MouseEvent<HTMLButtonElement>);
-                                }
+                            onPress={(e: PressEvent) => {
+                                step.onClick?.(index, e);
                             }}
                         />
                         {index < steps.length - 1 && (