Merge pull request #4182 from Sage/change-synthetic-event-types

fix(simple-color-picker, simple-color): update onkeydown and onmousedown to not use synthetic event

src/__experimental__/components/search/search.d.ts

@@ -17,15 +17,15 @@ export interface SearchProps extends MarginProps {
   /** Prop for `onClick` events.
    *  `onClick` events are triggered when the `searchButton` is clicked
    */
-  onClick?: (ev: React.SyntheticEvent) => void;
+  onClick?: (ev: React.MouseEvent<HTMLElement>) => void;
   /** Prop for `onKeyDown` events */
-  onKeyDown?: (ev: React.SyntheticEvent) => void;
+  onKeyDown?: (ev: React.KeyboardEvent<HTMLInputElement>) => void;
   /** Prop for a placeholder */
   placeholder?: string;
   /** Prop boolean to state whether the `search` icon renders */
   searchButton?: boolean;
   /**
-   * Prop for specifing an input width length.
+   * Prop for specifying an input width length.
    * Leaving the `searchWidth` prop with no value will default the width to '100%'
    */
   searchWidth?: string;

src/__experimental__/components/simple-color-picker/simple-color-picker.d.ts

@@ -21,7 +21,7 @@ export interface SimpleColorPickerProps extends ValidationPropTypes, MarginProps
   /** Prop for `onChange` events */
   onChange?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
   /** Prop for `onKeyDown` events */
-  onKeyDown?: (ev: React.SyntheticEvent) => void;
+  onKeyDown?: (ev: React.KeyboardEvent<HTMLInputElement>) => void;
   /** Prop for `onBlur` events */
   onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
   /** Flag to configure component as mandatory */

src/__experimental__/components/simple-color-picker/simple-color/simple-color.d.ts

@@ -10,7 +10,7 @@ export interface SimpleColorProps {
   /** Prop for `onBlur` events */
   onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
   /** Prop for `onMouseDown` events */
-  onMouseDown?: (ev: React.SyntheticEvent) => void;
+  onMouseDown?: (ev: React.MouseEvent<HTMLInputElement>) => void;
   /** determines if this color option is selected or unselected */
   checked?: boolean;
   /** [Legacy] Custom classname */