Fixed no longer implicit children prop in FunctionalComponent type

src/common/NoMenuLayout.tsx

@@ -1,4 +1,6 @@
-import { FC } from 'react';
+import { FC, PropsWithChildren } from 'react';
 import './NoMenuLayout.scss';
 
-export const NoMenuLayout: FC = ({ children }) => <div className="no-menu-wrapper container-xl">{children}</div>;
+export const NoMenuLayout: FC<PropsWithChildren<unknown>> = ({ children }) => (
+  <div className="no-menu-wrapper container-xl">{children}</div>
+);

src/common/NotFound.tsx

@@ -1,10 +1,8 @@
-import { FC } from 'react';
+import { FC, PropsWithChildren } from 'react';
 import { Link } from 'react-router-dom';
 import { SimpleCard } from '../utils/SimpleCard';
 
-interface NotFoundProps {
+type NotFoundProps = PropsWithChildren<{ to?: string }>;
-  to?: string;
-}
 
 const NotFound: FC<NotFoundProps> = ({ to = '/', children = 'Home' }) => (
   <div className="home">

src/common/ScrollToTop.tsx

@@ -1,7 +1,7 @@
-import { FC, useEffect } from 'react';
+import { FC, PropsWithChildren, useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 
-const ScrollToTop = (): FC => ({ children }) => {
+const ScrollToTop = (): FC<PropsWithChildren<unknown>> => ({ children }) => {
   const location = useLocation();
 
   useEffect(() => {

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('');

src/short-urls/helpers/QrCodeModal.tsx

@@ -13,16 +13,16 @@ import {
   supportsQrErrorCorrection,
 } from '../../utils/helpers/features';
 import { ImageDownloader } from '../../common/services/ImageDownloader';
-import { Versions } from '../../utils/helpers/version';
+import { ForServerVersionProps } from '../../servers/helpers/ForServerVersion';
 import { QrFormatDropdown } from './qr-codes/QrFormatDropdown';
-import './QrCodeModal.scss';
 import { QrErrorCorrectionDropdown } from './qr-codes/QrErrorCorrectionDropdown';
+import './QrCodeModal.scss';
 
 interface QrCodeModalConnectProps extends ShortUrlModalProps {
   selectedServer: SelectedServer;
 }
 
-const QrCodeModal = (imageDownloader: ImageDownloader, ForServerVersion: FC<Versions>) => (
+const QrCodeModal = (imageDownloader: ImageDownloader, ForServerVersion: FC<ForServerVersionProps>) => (
   { shortUrl: { shortUrl, shortCode }, toggle, isOpen, selectedServer }: QrCodeModalConnectProps,
 ) => {
   const [size, setSize] = useState(300);

src/short-urls/helpers/ShortUrlFormCheckboxGroup.tsx

@@ -1,12 +1,12 @@
-import { ChangeEvent, FC } from 'react';
+import { ChangeEvent, FC, PropsWithChildren } from 'react';
 import Checkbox from '../../utils/Checkbox';
 import { InfoTooltip } from '../../utils/InfoTooltip';
 
-interface ShortUrlFormCheckboxGroupProps {
+type ShortUrlFormCheckboxGroupProps = PropsWithChildren<{
   checked?: boolean;
   onChange?: (checked: boolean, e: ChangeEvent<HTMLInputElement>) => void;
   infoTooltip?: string;
-}
+}>;
 
 export const ShortUrlFormCheckboxGroup: FC<ShortUrlFormCheckboxGroupProps> = (
   { children, infoTooltip, checked, onChange },

src/tags/helpers/Tag.tsx

@@ -1,16 +1,16 @@
-import { FC, MouseEventHandler } from 'react';
+import { FC, MouseEventHandler, PropsWithChildren } from 'react';
 import classNames from 'classnames';
 import ColorGenerator from '../../utils/services/ColorGenerator';
 import './Tag.scss';
 
-interface TagProps {
+type TagProps = PropsWithChildren<{
   colorGenerator: ColorGenerator;
   text: string;
   className?: string;
   clearable?: boolean;
   onClick?: MouseEventHandler;
   onClose?: MouseEventHandler;
-}
+}>;
 
 const Tag: FC<TagProps> = ({ text, children, clearable, className = '', colorGenerator, onClick, onClose }) => (
   <span

src/utils/BooleanControl.tsx

@@ -1,14 +1,14 @@
-import { ChangeEvent, FC } from 'react';
+import { ChangeEvent, FC, PropsWithChildren } from 'react';
 import classNames from 'classnames';
 import { identity } from 'ramda';
 import { useDomId } from './helpers/hooks';
 
-export interface BooleanControlProps {
+export type BooleanControlProps = PropsWithChildren<{
   checked?: boolean;
   onChange?: (checked: boolean, e: ChangeEvent<HTMLInputElement>) => void;
   className?: string;
   inline?: boolean;
-}
+}>;
 
 interface BooleanControlWithTypeProps extends BooleanControlProps {
   type: 'switch' | 'checkbox';

src/utils/DropdownBtn.tsx

@@ -1,16 +1,16 @@
-import { FC } from 'react';
+import { FC, PropsWithChildren } from 'react';
 import { Dropdown, DropdownMenu, DropdownToggle } from 'reactstrap';
 import { useToggle } from './helpers/hooks';
 import './DropdownBtn.scss';
 
-export interface DropdownBtnProps {
+export type DropdownBtnProps = PropsWithChildren<{
   text: string;
   disabled?: boolean;
   className?: string;
   dropdownClassName?: string;
   right?: boolean;
   minWidth?: number;
-}
+}>;
 
 export const DropdownBtn: FC<DropdownBtnProps> = (
   { text, disabled = false, className = '', children, dropdownClassName, right = false, minWidth },

src/utils/DropdownBtnMenu.tsx

@@ -1,14 +1,14 @@
-import { FC } from 'react';
+import { FC, PropsWithChildren } from 'react';
 import { ButtonDropdown, DropdownMenu, DropdownToggle } from 'reactstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faEllipsisV as menuIcon } from '@fortawesome/free-solid-svg-icons';
 import './DropdownBtnMenu.scss';
 
-export interface DropdownBtnMenuProps {
+export type DropdownBtnMenuProps = PropsWithChildren<{
   isOpen: boolean;
   toggle: () => void;
   right?: boolean;
-}
+}>;
 
 export const DropdownBtnMenu: FC<DropdownBtnMenuProps> = ({ isOpen, toggle, children, right = true }) => (
   <ButtonDropdown toggle={toggle} isOpen={isOpen}>

src/utils/InfoTooltip.tsx

@@ -1,13 +1,13 @@
-import { FC, useRef } from 'react';
+import { FC, PropsWithChildren, useRef } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faInfoCircle as infoIcon } from '@fortawesome/free-solid-svg-icons';
 import { UncontrolledTooltip } from 'reactstrap';
 import { Placement } from '@popperjs/core';
 
-interface InfoTooltipProps {
+type InfoTooltipProps = PropsWithChildren<{
   className?: string;
   placement: Placement;
-}
+}>;
 
 export const InfoTooltip: FC<InfoTooltipProps> = ({ className = '', placement, children }) => {
   const ref = useRef<HTMLSpanElement | null>();

src/utils/Message.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, PropsWithChildren } from 'react';
 import { Card, Row } from 'reactstrap';
 import classNames from 'classnames';
 import { faCircleNotch as preloader } from '@fortawesome/free-solid-svg-icons';
@@ -23,12 +23,12 @@ const getTextClassForType = (type: MessageType) => {
   return map[type];
 };
 
-export interface MessageProps {
+export type MessageProps = PropsWithChildren<{
   className?: string;
   loading?: boolean;
   fullWidth?: boolean;
   type?: MessageType;
-}
+}>;
 
 const Message: FC<MessageProps> = ({ className, children, loading = false, type = 'default', fullWidth = false }) => {
   const classes = classNames({

src/utils/NavPills.tsx

@@ -1,17 +1,17 @@
-import { FC, Children, isValidElement } from 'react';
+import { FC, Children, isValidElement, PropsWithChildren } from 'react';
 import { Card, Nav, NavLink } from 'reactstrap';
 import { NavLink as RouterNavLink } from 'react-router-dom';
 import './NavPills.scss';
 
-interface NavPillsProps {
+type NavPillsProps = PropsWithChildren<{
   fill?: boolean;
   className?: string;
-}
+}>;
 
-interface NavPillProps {
+type NavPillProps = PropsWithChildren<{
   to: string;
   replace?: boolean;
-}
+}>;
 
 export const NavPillItem: FC<NavPillProps> = ({ children, ...rest }) => (
   <NavLink className="nav-pills__nav-link" tag={RouterNavLink} {...rest}>

src/utils/Result.tsx

@@ -1,15 +1,15 @@
-import { FC } from 'react';
+import { FC, PropsWithChildren } from 'react';
 import { Row } from 'reactstrap';
 import classNames from 'classnames';
 import { SimpleCard } from './SimpleCard';
 
 export type ResultType = 'success' | 'error' | 'warning';
 
-export interface ResultProps {
+export type ResultProps = PropsWithChildren<{
   type: ResultType;
   className?: string;
   small?: boolean;
-}
+}>;
 
 export const Result: FC<ResultProps> = ({ children, type, className, small = false }) => (
   <Row className={className}>

src/utils/TooltipToggleSwitch.tsx

@@ -1,9 +1,11 @@
-import { FC, useRef } from 'react';
+import { FC, PropsWithChildren, useRef } from 'react';
 import { UncontrolledTooltip, UncontrolledTooltipProps } from 'reactstrap';
 import { BooleanControlProps } from './BooleanControl';
 import ToggleSwitch from './ToggleSwitch';
 
-export type TooltipToggleSwitchProps = BooleanControlProps & { tooltip?: Omit<UncontrolledTooltipProps, 'target'> };
+export type TooltipToggleSwitchProps = BooleanControlProps & PropsWithChildren<{
+  tooltip?: Omit<UncontrolledTooltipProps, 'target'>;
+}>;
 
 export const TooltipToggleSwitch: FC<TooltipToggleSwitchProps> = ({ children, tooltip = {}, ...rest }) => {
   const ref = useRef<HTMLSpanElement>();

src/utils/forms/FormText.tsx

@@ -1,3 +1,5 @@
-import { FC } from 'react';
+import { FC, PropsWithChildren } from 'react';
 
-export const FormText: FC = ({ children }) => <small className="form-text text-muted d-block">{children}</small>;
+export const FormText: FC<PropsWithChildren<unknown>> = ({ children }) => (
+  <small className="form-text text-muted d-block">{children}</small>
+);

src/utils/forms/InputFormGroup.tsx

@@ -1,8 +1,8 @@
-import { FC } from 'react';
+import { FC, PropsWithChildren } from 'react';
 import { InputType } from 'reactstrap/types/lib/Input';
 import { LabeledFormGroup } from './LabeledFormGroup';
 
-export interface InputFormGroupProps {
+export type InputFormGroupProps = PropsWithChildren<{
   value: string;
   onChange: (newValue: string) => void;
   type?: InputType;
@@ -10,7 +10,7 @@ export interface InputFormGroupProps {
   placeholder?: string;
   className?: string;
   labelClassName?: string;
-}
+}>;
 
 export const InputFormGroup: FC<InputFormGroupProps> = (
   { children, value, onChange, type, required, placeholder, className, labelClassName },

src/utils/forms/LabeledFormGroup.tsx

@@ -1,11 +1,11 @@
-import { FC, ReactNode } from 'react';
+import { FC, PropsWithChildren, ReactNode } from 'react';
 
-interface LabeledFormGroupProps {
+type LabeledFormGroupProps = PropsWithChildren<{
   label: ReactNode;
   noMargin?: boolean;
   className?: string;
   labelClassName?: string;
-}
+}>;
 
 /* eslint-disable jsx-a11y/label-has-associated-control */
 export const LabeledFormGroup: FC<LabeledFormGroupProps> = (

src/utils/helpers/hooks.ts

@@ -1,8 +1,8 @@
 import { useState, useRef, EffectCallback, DependencyList, useEffect } from 'react';
 import { useSwipeable as useReactSwipeable } from 'react-swipeable';
 import { useNavigate } from 'react-router-dom';
-import { parseQuery, stringifyQuery } from './query';
 import { v4 as uuid } from 'uuid';
+import { parseQuery, stringifyQuery } from './query';
 
 const DEFAULT_DELAY = 2000;
 

src/visits/VisitsHeader.tsx

@@ -1,17 +1,17 @@
 import { Button, Card } from 'reactstrap';
-import { FC, ReactNode } from 'react';
+import { FC, PropsWithChildren, ReactNode } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faArrowLeft } from '@fortawesome/free-solid-svg-icons';
 import ShortUrlVisitsCount from '../short-urls/helpers/ShortUrlVisitsCount';
 import { ShortUrl } from '../short-urls/data';
 import { Visit } from './types';
 
-interface VisitsHeaderProps {
+type VisitsHeaderProps = PropsWithChildren<{
   visits: Visit[];
   goBack: () => void;
   title: ReactNode;
   shortUrl?: ShortUrl;
-}
+}>;
 
 const VisitsHeader: FC<VisitsHeaderProps> = ({ visits, goBack, shortUrl, children, title }) => (
   <header>

src/visits/VisitsStats.tsx

@@ -1,5 +1,5 @@
 import { isEmpty, propEq, values } from 'ramda';
-import { useState, useEffect, useMemo, FC, useRef } from 'react';
+import { useState, useEffect, useMemo, FC, useRef, PropsWithChildren } from 'react';
 import { Button, Progress, Row } from 'reactstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCalendarAlt, faMapMarkedAlt, faList, faChartPie } from '@fortawesome/free-solid-svg-icons';
@@ -27,7 +27,7 @@ import { HighlightableProps, highlightedVisitsToStats } from './types/helpers';
 import { DoughnutChartCard } from './charts/DoughnutChartCard';
 import { SortableBarChartCard } from './charts/SortableBarChartCard';
 
-export interface VisitsStatsProps {
+export type VisitsStatsProps = PropsWithChildren<{
   getVisits: (params: VisitsParams, doIntervalFallback?: boolean) => void;
   visitsInfo: VisitsInfo;
   settings: Settings;
@@ -36,7 +36,7 @@ export interface VisitsStatsProps {
   domain?: string;
   exportCsv: (visits: NormalizedVisit[]) => void;
   isOrphanVisits?: boolean;
-}
+}>;
 
 interface VisitsNavLinkProps {
   title: string;

src/visits/charts/ChartCard.tsx

@@ -1,11 +1,11 @@
 import { Card, CardHeader, CardBody, CardFooter } from 'reactstrap';
-import { FC, ReactNode } from 'react';
+import { FC, PropsWithChildren, ReactNode } from 'react';
 import './ChartCard.scss';
 
-interface ChartCardProps {
+type ChartCardProps = PropsWithChildren<{
   title: Function | string;
   footer?: ReactNode;
-}
+}>;
 
 export const ChartCard: FC<ChartCardProps> = ({ title, footer, children }) => (
   <Card>