fix: make typings compatible with @types/react@18 (#4356)

* fixes #4352

* - remove @types/react from resolutions
- add an assertion to "test/typings"

Co-authored-by: Oleksandr Fediashov <[email protected]>

Author: Serhiy Barhamon

package.json

@@ -98,7 +98,7 @@
     "@percy/cli": "^1.0.0-beta.73",
     "@percy/cypress": "^3.1.1",
     "@size-limit/file": "^4.5.5",
-    "@types/react": "^16.9.43",
+    "@types/react": "18.0.5",
     "@typescript-eslint/eslint-plugin": "^3.7.1",
     "@typescript-eslint/parser": "^3.7.1",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.1.1",

src/addons/Radio/Radio.d.ts

@@ -16,6 +16,6 @@ export interface StrictRadioProps extends StrictCheckboxProps {
   type?: 'checkbox' | 'radio'
 }
 
-declare const Radio: React.StatelessComponent<RadioProps>
+declare const Radio: React.FC<RadioProps>
 
 export default Radio

src/addons/Select/Select.d.ts

@@ -15,7 +15,7 @@ export interface StrictSelectProps extends StrictDropdownProps {
   options: DropdownItemProps[]
 }
 
-interface SelectComponent extends React.StatelessComponent<SelectProps> {
+interface SelectComponent extends React.FC<SelectProps> {
   Divider: typeof DropdownDivider
   Header: typeof DropdownHeader
   Item: typeof DropdownItem

src/collections/Breadcrumb/BreadcrumbDivider.d.ts

@@ -24,6 +24,6 @@ export interface StrictBreadcrumbDividerProps {
   icon?: SemanticShorthandItem<IconProps>
 }
 
-declare const BreadcrumbDivider: React.StatelessComponent<BreadcrumbDividerProps>
+declare const BreadcrumbDivider: React.FC<BreadcrumbDividerProps>
 
 export default BreadcrumbDivider

src/collections/Form/Form.d.ts

@@ -58,7 +58,7 @@ export interface StrictFormProps {
   widths?: 'equal'
 }
 
-export interface FormComponent extends React.StatelessComponent<FormProps> {
+export interface FormComponent extends React.FC<FormProps> {
   Field: typeof FormField
   Button: typeof FormButton
   Checkbox: typeof FormCheckbox

src/collections/Form/FormButton.d.ts

@@ -10,7 +10,7 @@ export interface FormButtonProps extends StrictFormButtonProps {
 }
 
 export interface StrictFormButtonProps
-  extends StrictFormFieldProps,
+  extends Omit<StrictFormFieldProps, 'label'>,
     Omit<StrictButtonProps, 'type'> {
   /** An element type to render as (string or function). */
   as?: any
@@ -22,6 +22,6 @@ export interface StrictFormButtonProps
   label?: SemanticShorthandItem<LabelProps>
 }
 
-declare const FormButton: React.StatelessComponent<FormButtonProps>
+declare const FormButton: React.FC<FormButtonProps>
 
 export default FormButton

src/collections/Form/FormCheckbox.d.ts

@@ -18,6 +18,6 @@ export interface StrictFormCheckboxProps extends StrictFormFieldProps, StrictChe
   type?: 'checkbox' | 'radio'
 }
 
-declare const FormCheckbox: React.StatelessComponent<FormCheckboxProps>
+declare const FormCheckbox: React.FC<FormCheckboxProps>
 
 export default FormCheckbox

src/collections/Form/FormDropdown.d.ts

@@ -18,6 +18,6 @@ export interface StrictFormDropdownProps extends StrictFormFieldProps, StrictDro
   error?: any
 }
 
-declare const FormDropdown: React.StatelessComponent<FormDropdownProps>
+declare const FormDropdown: React.FC<FormDropdownProps>
 
 export default FormDropdown

src/collections/Form/FormField.d.ts

@@ -57,6 +57,6 @@ export interface StrictFormFieldProps {
   width?: SemanticWIDTHS
 }
 
-declare const FormField: React.StatelessComponent<FormFieldProps>
+declare const FormField: React.FC<FormFieldProps>
 
 export default FormField

src/collections/Form/FormGroup.d.ts

@@ -28,6 +28,6 @@ export interface StrictFormGroupProps {
   widths?: SemanticWIDTHS | 'equal'
 }
 
-declare const FormGroup: React.StatelessComponent<FormGroupProps>
+declare const FormGroup: React.FC<FormGroupProps>
 
 export default FormGroup