[@catho/quantum] Fix componets event handlers types (#42171)

* simplecrawler modules type definition

* required fixes in export

* adjustments reference types of crawler.d.ts

* added catho__quantum types definitions

* Fix lint errors

* Fix lint errors

* Fix lint errors

* fix components event handlers types

* fix lint complains

types/catho__quantum/components/Alert/index.d.ts

@@ -1,8 +1,8 @@
 import React = require('react');
 
-export interface AlertProps {
+export interface AlertProps<T> {
     children: React.ReactNode;
-    onClose: () => void;
+    onClose: React.MouseEventHandler<T>;
     icon?: string;
     skin?: 'primary' | 'success' | 'error' | 'neutral' | 'warning';
     theme?: {
@@ -16,4 +16,4 @@ export interface AlertProps {
     };
 }
 
-export default class Alert extends React.Component<AlertProps> {}
+export default class Alert<T = HTMLButtonElement> extends React.Component<AlertProps<T>> {}

types/catho__quantum/components/Button/index.d.ts

@@ -1,7 +1,7 @@
 import React = require('react');
 import IconButton from './IconButton';
 
-export interface ButtonProps {
+export interface ButtonProps<T> {
     center?: boolean;
     disabled?: boolean;
     stroked?: boolean;
@@ -12,7 +12,7 @@ export interface ButtonProps {
     type?: 'button' | 'reset' | 'submit';
     children?: React.ReactNode[] | React.ReactNode;
     $as?: JSX.Element | string;
-    onClick?: () => void;
+    onClick?: React.MouseEventHandler<T>;
     theme?: {
         baseFontSize?: number;
         colors?: object;
@@ -24,6 +24,6 @@ export interface ButtonProps {
     };
 }
 
-export default class Button extends React.Component<ButtonProps> {
+export default class Button<T = HTMLButtonElement> extends React.Component<ButtonProps<T>> {
     static Icon: IconButton;
 }

types/catho__quantum/components/Checkbox/index.d.ts

@@ -1,6 +1,6 @@
 import React = require('react');
 
-export interface CheckboxProps {
+export interface CheckboxProps<T> {
     checked?: boolean;
     disabled?: boolean;
     children?: string;
@@ -9,7 +9,7 @@ export interface CheckboxProps {
     label?: string;
     name: string;
     value?: string;
-    onChange?: () => void;
+    onChange?: React.ChangeEventHandler<T>;
     theme?: {
         colors?: object;
         spacing?: object;
@@ -17,10 +17,10 @@ export interface CheckboxProps {
     };
 }
 
-export class Checkbox extends React.Component<CheckboxProps> {}
-export type CheckboxType = React.ComponentType<CheckboxProps>;
+export class Checkbox<T = HTMLInputElement> extends React.Component<CheckboxProps<T>> {}
+export type CheckboxType = React.ComponentType<CheckboxProps<HTMLInputElement>>;
 
-export interface CheckboxButtonProps {
+export interface CheckboxButtonProps<T> {
     children?: React.ReactNode[] | React.ReactNode;
     skin?: 'neutral' | 'primary' | 'success' | 'warning' | 'error';
     checked?: boolean;
@@ -30,24 +30,25 @@ export interface CheckboxButtonProps {
     icon?: string;
     label?: string;
     name: string;
-    onChange?: () => void;
+    onChange?: React.ChangeEventHandler<T>;
     value?: string;
 }
 
-export type CheckboxButton = React.ComponentType<CheckboxButtonProps>;
+export type CheckboxButton = React.ComponentType<CheckboxButtonProps<HTMLInputElement>>;
 
-export interface CheckboxGroupProps {
+export type Options = Array<{
+    checked?: boolean;
+    disabled?: boolean;
+    label?: React.ReactNode;
+    name: string;
+    value?: string;
+}>;
+export interface CheckboxGroupProps<T> {
     children?: JSX.Element[] | JSX.Element;
     error?: string;
     inline?: boolean;
-    onChange?: () => void;
-    options?: Array<{
-        checked?: boolean;
-        disabled?: boolean;
-        label?: React.ReactNode;
-        name: string;
-        value?: string;
-    }>;
+    onChange?: (items?: Options, event?: React.ChangeEvent<T>) => void;
+    options?: Options;
     type: 'checkbox' | 'button';
     theme?: {
         colors?: object;
@@ -55,7 +56,7 @@ export interface CheckboxGroupProps {
     };
 }
 
-export class CheckboxGroup extends React.Component<CheckboxGroupProps> {
+export class CheckboxGroup<T = HTMLInputElement> extends React.Component<CheckboxGroupProps<T>> {
     static Checkbox: CheckboxType;
     static Button: CheckboxButton;
 }

types/catho__quantum/components/Dropdown/index.d.ts

@@ -12,7 +12,8 @@ export interface DropdownProps {
     placeholder?: string;
     selectedItem?: ItemPropType;
     helperText?: string;
-    onChange?: () => void;
+    /** More about stateAndHelpers parameter here https://github.com/downshift-js/downshift#children-function */
+    onChange?: (selectedItem?: React.ElementType | null, stateAndHelpers?: any) => void;
     items?: ItemPropType[];
     theme?: {
         colors?: object;

types/catho__quantum/components/Form/index.d.ts

@@ -2,8 +2,8 @@ import React = require('react');
 
 export interface FormProps {
     children: React.ReactNode[] | React.ReactNode;
-    onSubmit?: () => void;
-    onValidSubmit?: () => void;
+    onSubmit?: ({ valid }?: { valid: boolean }) => void;
+    onValidSubmit?: (values?: { [name: string]: string | undefined }) => void;
     noValidate?: boolean;
 }
 

types/catho__quantum/components/Input/index.d.ts

@@ -3,7 +3,7 @@ import React = require('react');
 export type MaskFunction = (rawValue: string) => string[];
 export type Mask = boolean | RegExp | string | MaskFunction;
 
-export interface InputProps {
+export interface InputProps<T> {
     value?: string;
     label?: string;
     helperText?: string;
@@ -14,8 +14,8 @@ export interface InputProps {
     error?: string;
     id?: string;
     mask?: Mask | Mask[];
-    onClean?: () => void;
-    onChange?: () => void;
+    onClean?: React.MouseEventHandler<T>;
+    onChange?: React.ChangeEventHandler<T>;
     theme?: {
         spacing?: object;
         colors?: object;
@@ -23,4 +23,4 @@ export interface InputProps {
     };
 }
 
-export default class Input extends React.Component<InputProps> {}
+export default class Input<T = HTMLInputElement> extends React.Component<InputProps<T>> {}

types/catho__quantum/components/Modal/index.d.ts

@@ -1,8 +1,8 @@
 import React = require('react');
 
-export interface ModalProps {
+export interface ModalProps<T> {
     children?: React.ReactNode[] | React.ReactNode;
-    onClose?: () => void;
+    onClose?: React.MouseEventHandler<T>;
     closeButtonAriaLabel?: string;
     theme?: {
         breakpoints?: object;
@@ -14,4 +14,4 @@ export interface ModalProps {
     };
 }
 
-export default class Modal extends React.Component<ModalProps> {}
+export default class Modal<T = HTMLButtonElement> extends React.Component<ModalProps<T>> {}

types/catho__quantum/components/Pagination/index.d.ts

@@ -8,10 +8,10 @@ export interface PaginationProps {
     totalPages: number;
     nextButtonText?: string;
     pageAriaLabel?: string;
-    pageHref?: () => void;
+    pageHref?: (page?: number) => void;
     prevButtonText?: string;
-    onPageClick?: () => void;
-    infoFormatter?: () => void;
+    onPageClick?: (page?: number) => void;
+    infoFormatter?: (activePage?: number, lastPage?: number) => void;
     followOnlyFirstPage?: boolean;
 }
 

types/catho__quantum/components/RadioGroup/index.d.ts

@@ -1,11 +1,11 @@
 import React = require('react');
 
-export interface RadioProps {
+export interface RadioProps<T> {
     disabled?: boolean;
     error?: boolean;
     children?: string;
     label?: string;
-    onChange?: () => void;
+    onChange?: React.ChangeEventHandler<T>;
     theme?: {
         colors?: object;
         spacing?: object;
@@ -13,9 +13,9 @@ export interface RadioProps {
     value: string;
 }
 
-export type Radio = React.ComponentType<RadioProps>;
+export type Radio = React.ComponentType<RadioProps<HTMLInputElement>>;
 
-export interface RadioButtonProps {
+export interface RadioButtonProps<T> {
     checked?: boolean;
     children?: string;
     skin?: 'neutral' | 'primary' | 'success' | 'warning' | 'error';
@@ -25,7 +25,7 @@ export interface RadioButtonProps {
     id?: string;
     inline?: boolean;
     label?: string;
-    onChange?: () => void;
+    onChange?: React.ChangeEventHandler<T>;
     theme?: {
         baseFontSize?: number;
         spacing?: object;
@@ -37,9 +37,9 @@ export interface RadioButtonProps {
     value: string;
 }
 
-export type RadioButton = React.ComponentType<RadioButtonProps>;
+export type RadioButton = React.ComponentType<RadioButtonProps<HTMLInputElement>>;
 
-export interface RadioGroupProps {
+export interface RadioGroupProps<T> {
     type?: 'radio' | 'button';
     options?: Array<{
         label?: React.ReactNode;
@@ -49,7 +49,7 @@ export interface RadioGroupProps {
 
     children?: JSX.Element[] | JSX.Element;
     inline?: boolean;
-    onChange?: () => void;
+    onChange?: React.ChangeEventHandler<T>;
     value?: string;
     error?: string;
     theme?: {
@@ -59,7 +59,7 @@ export interface RadioGroupProps {
     name: string;
 }
 
-export default class RadioGroup extends React.Component<RadioGroupProps> {
+export default class RadioGroup<T = HTMLInputElement> extends React.Component<RadioGroupProps<T>> {
     static Radio: Radio;
 
     static Button: RadioButton;

types/catho__quantum/components/RangeSlider/index.d.ts

@@ -1,12 +1,12 @@
 import React = require('react');
 
-export interface RangeSliderProps {
+export interface RangeSliderProps<T> {
     step?: number;
     max?: number;
     min?: number;
     disabled?: boolean;
-    onChange?: () => void;
-    onChangeCommitted?: () => void;
+    onChange?: React.ChangeEventHandler<T>;
+    onChangeCommitted?: React.ChangeEventHandler<T>;
     marks?: Array<{
         value?: string | number;
         label?: string;
@@ -14,7 +14,7 @@ export interface RangeSliderProps {
     valueLabelDisplay?: 'auto' | 'on' | 'off';
     track?: 'normal' | false | 'inverted';
     'aria-labelledby'?: string;
-    tipFormatter?: () => void;
+    tipFormatter?: (value?: number, index?: number) => string;
     value?: number | { from: number; to: number };
     defaultValue?: number | { from: number; to: number };
     theme?: {
@@ -24,4 +24,4 @@ export interface RangeSliderProps {
     };
 }
 
-export default class RangeSlider extends React.Component<RangeSliderProps> {}
+export default class RangeSlider<T = HTMLInputElement> extends React.Component<RangeSliderProps<T>> {}

types/catho__quantum/components/SnackBar/index.d.ts

@@ -1,9 +1,9 @@
 import React = require('react');
 
-export interface SnackBarProps {
+export interface SnackBarProps<T> {
     actionTrigger?: {
         title?: string;
-        callback?: () => void;
+        callback?: React.MouseEventHandler<T>;
     };
     theme?: {
         baseFontSize?: number;
@@ -16,7 +16,7 @@ export interface SnackBarProps {
         };
     };
     closeButtonAriaLabel?: string;
-    onClose?: () => void;
+    onClose?: React.MouseEventHandler<T>;
     secondsToClose?: number;
     skin?: 'primary' | 'success' | 'error' | 'neutral' | 'warning';
     text?: string;
@@ -24,4 +24,4 @@ export interface SnackBarProps {
     id?: string;
 }
 
-export default class SnackBar extends React.Component<SnackBarProps> {}
+export default class SnackBar<T = HTMLButtonElement> extends React.Component<SnackBarProps<T>> {}

types/catho__quantum/components/Tag/index.d.ts

@@ -1,9 +1,9 @@
 import React = require('react');
 
-export interface TagProps {
+export interface TagProps<T> {
     bold?: boolean;
     inverted?: boolean;
-    onClose?: () => void;
+    onClose?: React.MouseEventHandler<T>;
     size?: 'small' | 'medium' | 'large';
     skin?: 'neutral' | 'primary' | 'success' | 'warning' | 'error';
     stroked?: boolean;
@@ -17,4 +17,4 @@ export interface TagProps {
     };
 }
 
-export default class Tag extends React.Component<TagProps> {}
+export default class Tag<T = HTMLButtonElement> extends React.Component<TagProps<T>> {}

types/catho__quantum/components/TextArea/index.d.ts

@@ -1,15 +1,15 @@
 import React = require('react');
 
-export interface TextAreaProps {
+export interface TextAreaProps<T> {
     disabled?: boolean;
     error?: string;
     helperText?: string;
     label?: string;
-    onChange?: () => void;
+    onChange?: React.ChangeEventHandler<T>;
     placeholder?: string;
     required?: boolean;
     value?: string;
     id?: string | number;
 }
 
-export default class TextArea extends React.Component<TextAreaProps> {}
+export default class TextArea<T = HTMLInputElement> extends React.Component<TextAreaProps<T>> {}