Fixed no longer implicit children prop in FunctionalComponent type

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;