Fixed no longer implicit children prop in FunctionalComponent type

src/servers/DeleteServerButton.tsx

@@ -1,15 +1,15 @@
-import { FC } from 'react';
+import { FC, PropsWithChildren } from 'react';
 import { faMinusCircle as deleteIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useToggle } from '../utils/helpers/hooks';
 import { DeleteServerModalProps } from './DeleteServerModal';
 import { ServerWithId } from './data';
 
-export interface DeleteServerButtonProps {
+export type DeleteServerButtonProps = PropsWithChildren<{
   server: ServerWithId;
   className?: string;
   textClassName?: string;
-}
+}>;
 
 const DeleteServerButton = (DeleteServerModal: FC<DeleteServerModalProps>): FC<DeleteServerButtonProps> => (
   { server, className, children, textClassName },

src/servers/Overview.tsx

@@ -8,12 +8,12 @@ import { ShortUrlsTableProps } from '../short-urls/ShortUrlsTable';
 import { boundToMercureHub } from '../mercure/helpers/boundToMercureHub';
 import { CreateShortUrlProps } from '../short-urls/CreateShortUrl';
 import { VisitsOverview } from '../visits/reducers/visitsOverview';
-import { Versions } from '../utils/helpers/version';
 import { Topics } from '../mercure/helpers/Topics';
 import { ShlinkShortUrlsListParams } from '../api/types';
 import { supportsNonOrphanVisits, supportsOrphanVisits } from '../utils/helpers/features';
 import { getServerId, SelectedServer } from './data';
 import { HighlightCard } from './helpers/HighlightCard';
+import { ForServerVersionProps } from './helpers/ForServerVersion';
 
 interface OverviewConnectProps {
   shortUrlsList: ShortUrlsListState;
@@ -28,7 +28,7 @@ interface OverviewConnectProps {
 export const Overview = (
   ShortUrlsTable: FC<ShortUrlsTableProps>,
   CreateShortUrl: FC<CreateShortUrlProps>,
-  ForServerVersion: FC<Versions>,
+  ForServerVersion: FC<ForServerVersionProps>,
 ) => boundToMercureHub(({
   shortUrlsList,
   listShortUrls,

src/servers/ServersListGroup.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, PropsWithChildren } from 'react';
 import { ListGroup, ListGroupItem } from 'reactstrap';
 import { Link } from 'react-router-dom';
 import classNames from 'classnames';
@@ -7,10 +7,10 @@ import { faChevronRight as chevronIcon } from '@fortawesome/free-solid-svg-icons
 import { ServerWithId } from './data';
 import './ServersListGroup.scss';
 
-interface ServersListGroupProps {
+type ServersListGroupProps = PropsWithChildren<{
   servers: ServerWithId[];
   embedded?: boolean;
-}
+}>;
 
 const ServerListItem = ({ id, name }: { id: string; name: string }) => (
   <ListGroupItem tag={Link} to={`/server/${id}`} className="servers-list__server-item">

src/servers/helpers/ForServerVersion.tsx

@@ -1,12 +1,14 @@
-import { FC } from 'react';
+import { FC, PropsWithChildren } from 'react';
 import { versionMatch, Versions } from '../../utils/helpers/version';
 import { isReachableServer, SelectedServer } from '../data';
 
-interface ForServerVersionProps extends Versions {
+export type ForServerVersionProps = PropsWithChildren<Versions>;
+
+interface ForServerVersionConnectProps extends ForServerVersionProps {
   selectedServer: SelectedServer;
 }
 
-const ForServerVersion: FC<ForServerVersionProps> = ({ minVersion, maxVersion, selectedServer, children }) => {
+const ForServerVersion: FC<ForServerVersionConnectProps> = ({ minVersion, maxVersion, selectedServer, children }) => {
   if (!isReachableServer(selectedServer)) {
     return null;
   }

src/servers/helpers/HighlightCard.tsx

@@ -1,14 +1,14 @@
-import { FC } from 'react';
+import { FC, PropsWithChildren } from 'react';
 import { Card, CardText, CardTitle } from 'reactstrap';
 import { Link } from 'react-router-dom';
 import { faArrowAltCircleRight as linkIcon } from '@fortawesome/free-regular-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import './HighlightCard.scss';
 
-export interface HighlightCardProps {
+export type HighlightCardProps = PropsWithChildren<{
   title: string;
   link?: string | false;
-}
+}>;
 
 const buildExtraProps = (link?: string | false) => (!link ? {} : { tag: Link, to: link });
 

src/servers/helpers/ImportServersBtn.tsx

@@ -1,4 +1,4 @@
-import { useRef, RefObject, ChangeEvent, MutableRefObject, useState, useEffect, FC } from 'react';
+import { useRef, RefObject, ChangeEvent, MutableRefObject, useState, useEffect, FC, PropsWithChildren } from 'react';
 import { Button, UncontrolledTooltip } from 'reactstrap';
 import { complement, pipe } from 'ramda';
 import { faFileUpload as importIcon } from '@fortawesome/free-solid-svg-icons';
@@ -11,12 +11,12 @@ import './ImportServersBtn.scss';
 
 type Ref<T> = RefObject<T> | MutableRefObject<T>;
 
-export interface ImportServersBtnProps {
+export type ImportServersBtnProps = PropsWithChildren<{
   onImport?: () => void;
   onImportError?: (error: Error) => void;
   tooltipPlacement?: 'top' | 'bottom';
   className?: string;
-}
+}>;
 
 interface ImportServersBtnConnectProps extends ImportServersBtnProps {
   createServers: (servers: ServerData[]) => void;

src/servers/helpers/ServerForm.tsx

@@ -1,14 +1,14 @@
-import { FC, ReactNode, useEffect, useState } from 'react';
+import { FC, PropsWithChildren, ReactNode, useEffect, useState } from 'react';
 import { InputFormGroup } from '../../utils/forms/InputFormGroup';
 import { handleEventPreventingDefault } from '../../utils/utils';
 import { ServerData } from '../data';
 import { SimpleCard } from '../../utils/SimpleCard';
 
-interface ServerFormProps {
+type ServerFormProps = PropsWithChildren<{
   onSubmit: (server: ServerData) => void;
   initialValues?: ServerData;
   title?: ReactNode;
-}
+}>;
 
 export const ServerForm: FC<ServerFormProps> = ({ onSubmit, initialValues, children, title }) => {
   const [name, setName] = useState('');