fix: make typings compatible with @types/react@18

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

src/collections/Form/FormInput.d.ts

@@ -9,7 +9,9 @@ export interface FormInputProps extends StrictFormInputProps {
   [key: string]: any
 }
 
-export interface StrictFormInputProps extends StrictFormFieldProps, StrictInputProps {
+export interface StrictFormInputProps
+  extends Omit<StrictFormFieldProps, 'label'>,
+    StrictInputProps {
   /** An element type to render as (string or function). */
   as?: any
 
@@ -23,6 +25,6 @@ export interface StrictFormInputProps extends StrictFormFieldProps, StrictInputP
   label?: SemanticShorthandItem<LabelProps>
 }
 
-declare const FormInput: React.StatelessComponent<FormInputProps>
+declare const FormInput: React.FC<FormInputProps>
 
 export default FormInput

src/collections/Form/FormRadio.d.ts

@@ -18,6 +18,6 @@ export interface StrictFormRadioProps extends StrictFormFieldProps, StrictRadioP
   type?: 'checkbox' | 'radio'
 }
 
-declare const FormRadio: React.StatelessComponent<FormRadioProps>
+declare const FormRadio: React.FC<FormRadioProps>
 
 export default FormRadio

src/collections/Form/FormSelect.d.ts

@@ -24,6 +24,6 @@ export interface StrictFormSelectProps extends StrictFormFieldProps, StrictSelec
   options: DropdownItemProps[]
 }
 
-declare const FormSelect: React.StatelessComponent<FormSelectProps>
+declare const FormSelect: React.FC<FormSelectProps>
 
 export default FormSelect

src/collections/Form/FormTextArea.d.ts

@@ -15,6 +15,6 @@ export interface StrictFormTextAreaProps extends StrictFormFieldProps, StrictTex
   control?: any
 }
 
-declare const FormTextArea: React.StatelessComponent<FormTextAreaProps>
+declare const FormTextArea: React.FC<FormTextAreaProps>
 
 export default FormTextArea

src/collections/Grid/Grid.d.ts

@@ -70,7 +70,7 @@ export interface StrictGridProps {
   verticalAlign?: SemanticVERTICALALIGNMENTS
 }
 
-interface GridComponent extends React.StatelessComponent<GridProps> {
+interface GridComponent extends React.FC<GridProps> {
   Column: typeof GridColumn
   Row: typeof GridRow
 }

src/collections/Grid/GridColumn.d.ts

@@ -67,6 +67,6 @@ export interface StrictGridColumnProps {
   width?: SemanticWIDTHS
 }
 
-declare const GridColumn: React.StatelessComponent<GridColumnProps>
+declare const GridColumn: React.FC<GridColumnProps>
 
 export default GridColumn

src/collections/Grid/GridRow.d.ts

@@ -51,6 +51,6 @@ export interface StrictGridRowProps {
   verticalAlign?: SemanticVERTICALALIGNMENTS
 }
 
-declare const GridRow: React.StatelessComponent<GridRowProps>
+declare const GridRow: React.FC<GridRowProps>
 
 export default GridRow

src/collections/Menu/MenuMenu.d.ts

@@ -22,6 +22,6 @@ export interface StrictMenuMenuProps {
   position?: 'left' | 'right'
 }
 
-declare const MenuMenu: React.StatelessComponent<MenuMenuProps>
+declare const MenuMenu: React.FC<MenuMenuProps>
 
 export default MenuMenu

src/collections/Message/MessageContent.d.ts

@@ -19,6 +19,6 @@ export interface StrictMessageContentProps {
   content?: SemanticShorthandContent
 }
 
-declare const MessageContent: React.StatelessComponent<MessageContentProps>
+declare const MessageContent: React.FC<MessageContentProps>
 
 export default MessageContent

src/collections/Message/MessageHeader.d.ts

@@ -19,6 +19,6 @@ export interface StrictMessageHeaderProps {
   content?: SemanticShorthandContent
 }
 
-declare const MessageHeader: React.StatelessComponent<MessageHeaderProps>
+declare const MessageHeader: React.FC<MessageHeaderProps>
 
 export default MessageHeader

src/collections/Message/MessageItem.d.ts

@@ -19,6 +19,6 @@ export interface StrictMessageItemProps {
   content?: SemanticShorthandContent
 }
 
-declare const MessageItem: React.StatelessComponent<MessageItemProps>
+declare const MessageItem: React.FC<MessageItemProps>
 
 export default MessageItem

src/collections/Message/MessageList.d.ts

@@ -21,6 +21,6 @@ export interface StrictMessageListProps {
   items?: SemanticShorthandCollection<MessageItemProps>
 }
 
-declare const MessageList: React.StatelessComponent<MessageListProps>
+declare const MessageList: React.FC<MessageListProps>
 
 export default MessageList

src/collections/Table/Table.d.ts

@@ -115,7 +115,7 @@ export interface StrictTableProps {
   verticalAlign?: SemanticVERTICALALIGNMENTS
 }
 
-interface TableComponent extends React.StatelessComponent<TableProps> {
+interface TableComponent extends React.FC<TableProps> {
   Body: typeof TableBody
   Cell: typeof TableCell
   Footer: typeof TableFooter

src/collections/Table/TableBody.d.ts

@@ -15,6 +15,6 @@ export interface StrictTableBodyProps {
   className?: string
 }
 
-declare const TableBody: React.StatelessComponent<TableBodyProps>
+declare const TableBody: React.FC<TableBodyProps>
 
 export default TableBody

src/collections/Table/TableCell.d.ts

@@ -65,6 +65,6 @@ export interface StrictTableCellProps {
   width?: SemanticWIDTHS
 }
 
-declare const TableCell: React.StatelessComponent<TableCellProps>
+declare const TableCell: React.FC<TableCellProps>
 
 export default TableCell

src/collections/Table/TableFooter.d.ts

@@ -10,6 +10,6 @@ export interface StrictTableFooterProps extends StrictTableHeaderProps {
   as?: any
 }
 
-declare const TableFooter: React.StatelessComponent<TableFooterProps>
+declare const TableFooter: React.FC<TableFooterProps>
 
 export default TableFooter

src/collections/Table/TableHeader.d.ts

@@ -22,6 +22,6 @@ export interface StrictTableHeaderProps {
   fullWidth?: boolean
 }
 
-declare const TableHeader: React.StatelessComponent<TableHeaderProps>
+declare const TableHeader: React.FC<TableHeaderProps>
 
 export default TableHeader

src/collections/Table/TableHeaderCell.d.ts

@@ -16,6 +16,6 @@ export interface StrictTableHeaderCellProps extends StrictTableCellProps {
   sorted?: 'ascending' | 'descending'
 }
 
-declare const TableHeaderCell: React.StatelessComponent<TableHeaderCellProps>
+declare const TableHeaderCell: React.FC<TableHeaderCellProps>
 
 export default TableHeaderCell

src/collections/Table/TableRow.d.ts

@@ -48,6 +48,6 @@ export interface StrictTableRowProps {
   warning?: boolean
 }
 
-declare const TableRow: React.StatelessComponent<TableRowProps>
+declare const TableRow: React.FC<TableRowProps>
 
 export default TableRow

src/elements/Button/ButtonContent.d.ts

@@ -25,6 +25,6 @@ export interface StrictButtonContentProps {
   visible?: boolean
 }
 
-declare const ButtonContent: React.StatelessComponent<ButtonContentProps>
+declare const ButtonContent: React.FC<ButtonContentProps>
 
 export default ButtonContent

src/elements/Button/ButtonGroup.d.ts

@@ -82,6 +82,6 @@ export interface StrictButtonGroupProps {
   widths?: SemanticWIDTHS
 }
 
-declare const ButtonGroup: React.StatelessComponent<ButtonGroupProps>
+declare const ButtonGroup: React.FC<ButtonGroupProps>
 
 export default ButtonGroup

src/elements/Button/ButtonOr.d.ts

@@ -15,6 +15,6 @@ export interface StrictButtonOrProps {
   text?: number | string
 }
 
-declare const ButtonOr: React.StatelessComponent<ButtonOrProps>
+declare const ButtonOr: React.FC<ButtonOrProps>
 
 export default ButtonOr

src/elements/Container/Container.d.ts

@@ -28,6 +28,6 @@ export interface StrictContainerProps {
   textAlign?: SemanticTEXTALIGNMENTS
 }
 
-declare const Container: React.StatelessComponent<ContainerProps>
+declare const Container: React.FC<ContainerProps>
 
 export default Container

src/elements/Divider/Divider.d.ts

@@ -40,6 +40,6 @@ export interface StrictDividerProps {
   vertical?: boolean
 }
 
-declare const Divider: React.StatelessComponent<DividerProps>
+declare const Divider: React.FC<DividerProps>
 
 export default Divider

src/elements/Header/Header.d.ts

@@ -61,7 +61,7 @@ export interface StrictHeaderProps {
   textAlign?: SemanticTEXTALIGNMENTS
 }
 
-interface HeaderComponent extends React.StatelessComponent<HeaderProps> {
+interface HeaderComponent extends React.FC<HeaderProps> {
   Content: typeof HeaderContent
   Subheader: typeof HeaderSubHeader
 }

src/elements/Header/HeaderContent.d.ts

@@ -19,6 +19,6 @@ export interface StrictHeaderContentProps {
   content?: SemanticShorthandContent
 }
 
-declare const HeaderContent: React.StatelessComponent<HeaderContentProps>
+declare const HeaderContent: React.FC<HeaderContentProps>
 
 export default HeaderContent

src/elements/Header/HeaderSubheader.d.ts

@@ -19,6 +19,6 @@ export interface StrictHeaderSubheaderProps {
   content?: SemanticShorthandContent
 }
 
-declare const HeaderSubHeader: React.StatelessComponent<HeaderSubheaderProps>
+declare const HeaderSubHeader: React.FC<HeaderSubheaderProps>
 
 export default HeaderSubHeader

src/elements/Icon/IconGroup.d.ts

@@ -24,6 +24,6 @@ export interface StrictIconGroupProps {
   size?: IconSizeProp
 }
 
-declare const IconGroup: React.StatelessComponent<IconGroupProps>
+declare const IconGroup: React.FC<IconGroupProps>
 
 export default IconGroup

src/elements/Image/Image.d.ts

@@ -84,7 +84,7 @@ export interface StrictImageProps {
   wrapped?: boolean
 }
 
-interface ImageComponent extends React.StatelessComponent<ImageProps> {
+interface ImageComponent extends React.FC<ImageProps> {
   Group: typeof ImageGroup
 }
 

src/elements/Image/ImageGroup.d.ts

@@ -22,6 +22,6 @@ export interface StrictImageGroupProps {
   size?: SemanticSIZES
 }
 
-declare const ImageGroup: React.StatelessComponent<ImageGroupProps>
+declare const ImageGroup: React.FC<ImageGroupProps>
 
 export default ImageGroup

src/elements/Label/LabelDetail.d.ts

@@ -19,6 +19,6 @@ export interface StrictLabelDetailProps {
   content?: SemanticShorthandContent
 }
 
-declare const LabelDetail: React.StatelessComponent<LabelDetailProps>
+declare const LabelDetail: React.FC<LabelDetailProps>
 
 export default LabelDetail

src/elements/Label/LabelGroup.d.ts

@@ -31,6 +31,6 @@ export interface StrictLabelGroupProps {
   tag?: boolean
 }
 
-declare const LabelGroup: React.StatelessComponent<LabelGroupProps>
+declare const LabelGroup: React.FC<LabelGroupProps>
 
 export default LabelGroup

src/elements/List/List.d.ts

@@ -82,7 +82,7 @@ export interface StrictListProps {
   verticalAlign?: SemanticVERTICALALIGNMENTS
 }
 
-interface ListComponent extends React.StatelessComponent<ListProps> {
+interface ListComponent extends React.FC<ListProps> {
   Content: typeof ListContent
   Description: typeof ListDescription
   Header: typeof ListHeader

src/elements/List/ListContent.d.ts

@@ -39,6 +39,6 @@ export interface StrictListContentProps {
   verticalAlign?: SemanticVERTICALALIGNMENTS
 }
 
-declare const ListContent: React.StatelessComponent<ListContentProps>
+declare const ListContent: React.FC<ListContentProps>
 
 export default ListContent

src/elements/List/ListDescription.d.ts

@@ -19,6 +19,6 @@ export interface StrictListDescriptionProps {
   content?: SemanticShorthandContent
 }
 
-declare const ListDescription: React.StatelessComponent<ListDescriptionProps>
+declare const ListDescription: React.FC<ListDescriptionProps>
 
 export default ListDescription

src/elements/List/ListHeader.d.ts

@@ -19,6 +19,6 @@ export interface StrictListHeaderProps {
   content?: SemanticShorthandContent
 }
 
-declare const ListHeader: React.StatelessComponent<ListHeaderProps>
+declare const ListHeader: React.FC<ListHeaderProps>
 
 export default ListHeader