update to react 18

We were stuck on react 16.x for a long time but dependencies seem to
have caught up enough that migration is trivial now.

src/about/AboutDialog.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2021-2022 The Pybricks Authors
+// Copyright (c) 2021-2023 The Pybricks Authors
 
 // The about dialog
 
@@ -24,7 +24,7 @@ import './about.scss';
 
 type AboutDialogProps = { isOpen: boolean; onClose: () => void };
 
-const AboutDialog: React.VoidFunctionComponent<AboutDialogProps> = ({
+const AboutDialog: React.FunctionComponent<AboutDialogProps> = ({
     isOpen,
     onClose,
 }) => {

src/activities/Activities.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 import './activities.scss';
 import { Icon, Tab, Tabs } from '@blueprintjs/core';
@@ -12,7 +12,7 @@ import { useI18n } from './i18n';
 /**
  * React component that acts as a tab control to select activities.
  */
-const Activities: React.VoidFunctionComponent = () => {
+const Activities: React.FunctionComponent = () => {
     const [selectedActivity, setSelectedActivity] = useActivitiesSelectedActivity();
     const i18n = useI18n();
 

src/alerts/UnexpectedErrorAlert.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 import './UnexpectedErrorAlert.scss';
 import {
@@ -19,7 +19,7 @@ type UnexpectedErrorAlertProps = {
     error: Error;
 };
 
-const UnexpectedErrorAlert: React.VoidFunctionComponent<UnexpectedErrorAlertProps> = ({
+const UnexpectedErrorAlert: React.FunctionComponent<UnexpectedErrorAlertProps> = ({
     error,
 }) => {
     const i18n = useI18n();

src/app/App.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2020-2022 The Pybricks Authors
+// Copyright (c) 2020-2023 The Pybricks Authors
 
 import 'react-splitter-layout/lib/index.css';
 import './app.scss';
@@ -46,7 +46,7 @@ const Terminal = React.lazy(async () => {
     return componentModule;
 });
 
-const Docs: React.VFC = () => {
+const Docs: React.FunctionComponent = () => {
     const { setIsSettingShowDocsEnabled } = useSettingIsShowDocsEnabled();
     const { initialDocsPage, setLastDocsPage } = useAppLastDocsPageSetting();
 
@@ -153,7 +153,7 @@ const Docs: React.VFC = () => {
     );
 };
 
-const App: React.VFC = () => {
+const App: React.FunctionComponent = () => {
     const i18n = useI18n();
     const { isDarkMode } = useTernaryDarkMode();
     const { isSettingShowDocsEnabled } = useSettingIsShowDocsEnabled();

src/app/alerts/UpdateServerFailure.tsx

@@ -1,12 +1,12 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 import { Intent } from '@blueprintjs/core';
 import React from 'react';
 import type { CreateToast } from '../../toasterTypes';
 import { useI18n } from './i18n';
 
-const UpdateServerFailure: React.VoidFunctionComponent = () => {
+const UpdateServerFailure: React.FunctionComponent = () => {
     const i18n = useI18n();
     return <p>{i18n.translate('updateServerFailure.message')}</p>;
 };

src/ble/alerts/BluetoothNotAvailable.tsx

@@ -1,12 +1,12 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 import { Intent } from '@blueprintjs/core';
 import React from 'react';
 import type { CreateToast } from '../../toasterTypes';
 import { useI18n } from './i18n';
 
-const BluetoothNotAvailable: React.VoidFunctionComponent = () => {
+const BluetoothNotAvailable: React.FunctionComponent = () => {
     const i18n = useI18n();
     return (
         <>

src/ble/alerts/Disconnected.tsx

@@ -6,7 +6,7 @@ import React from 'react';
 import type { CreateToast } from '../../toasterTypes';
 import { useI18n } from './i18n';
 
-const Disconnected: React.VoidFunctionComponent = () => {
+const Disconnected: React.FunctionComponent = () => {
     const i18n = useI18n();
     return <p>{i18n.translate('disconnected.message')}</p>;
 };

src/ble/alerts/MissingService.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 import { Intent } from '@blueprintjs/core';
 import React from 'react';
@@ -11,7 +11,7 @@ type MissingServiceProps = {
     hubName: string;
 };
 
-const MissingService: React.VoidFunctionComponent<MissingServiceProps> = ({
+const MissingService: React.FunctionComponent<MissingServiceProps> = ({
     serviceName,
     hubName,
 }) => {

src/ble/alerts/NewPybricksProfile.tsx

@@ -14,7 +14,7 @@ type NewPybricksProfileProps = {
     supportedVersion: string;
 };
 
-const NewPybricksProfile: React.VoidFunctionComponent<NewPybricksProfileProps> = ({
+const NewPybricksProfile: React.FunctionComponent<NewPybricksProfileProps> = ({
     hubVersion,
     supportedVersion,
 }) => {

src/ble/alerts/NoGatt.tsx

@@ -1,12 +1,12 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 import { Intent } from '@blueprintjs/core';
 import React from 'react';
 import type { CreateToast } from '../../toasterTypes';
 import { useI18n } from './i18n';
 
-const NoGatt: React.VoidFunctionComponent = () => {
+const NoGatt: React.FunctionComponent = () => {
     const i18n = useI18n();
     return <p>{i18n.translate('noGatt.message')}</p>;
 };

src/ble/alerts/NoHub.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 import './index.scss';
 import { AnchorButton, Button, Intent } from '@blueprintjs/core';
@@ -13,7 +13,7 @@ type NoHubProps = {
     onFlashFirmware: () => void;
 };
 
-const NoHub: React.VoidFunctionComponent<NoHubProps> = ({ onFlashFirmware }) => {
+const NoHub: React.FunctionComponent<NoHubProps> = ({ onFlashFirmware }) => {
     const i18n = useI18n();
 
     return (

src/ble/alerts/NoWebBluetooth.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 import { Button, Code, Intent } from '@blueprintjs/core';
 import React from 'react';
@@ -7,7 +7,7 @@ import type { CreateToast } from '../../toasterTypes';
 import { isIOS, isLinux } from '../../utils/os';
 import { useI18n } from './i18n';
 
-const NoWebBluetooth: React.VoidFunctionComponent = () => {
+const NoWebBluetooth: React.FunctionComponent = () => {
     const i18n = useI18n();
     return (
         <>

src/ble/alerts/OldFirmware.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 import './index.scss';
 import { Button, Intent } from '@blueprintjs/core';
@@ -11,7 +11,7 @@ type OldFirmwareProps = {
     onFlashFirmware: () => void;
 };
 
-const OldFirmware: React.VoidFunctionComponent<OldFirmwareProps> = ({
+const OldFirmware: React.FunctionComponent<OldFirmwareProps> = ({
     onFlashFirmware,
 }) => {
     const i18n = useI18n();

src/components/Button.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 import { Classes, Icon, IconName, IconSize, Spinner } from '@blueprintjs/core';
 import { mergeRefs, useId } from '@react-aria/utils';
@@ -29,7 +29,7 @@ type ButtonProps = {
 };
 
 /** Similar to Blueprint.js button with better accessibility. */
-export const Button: React.VoidFunctionComponent<ButtonProps> = ({
+export const Button: React.FunctionComponent<ButtonProps> = ({
     id,
     label,
     hideLabel,

src/components/ClipboardIcon.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2021-2022 The Pybricks Authors
+// Copyright (c) 2021-2023 The Pybricks Authors
 
 // Icon for indicating external links
 
@@ -8,7 +8,7 @@ import React from 'react';
 
 import './clipboard.scss';
 
-const ClipboardIcon: React.VFC = (_props) => {
+const ClipboardIcon: React.FunctionComponent = () => {
     return (
         <span className="pb-clipboard">
             &nbsp;

src/components/ExternalLinkIcon.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2021 The Pybricks Authors
+// Copyright (c) 2021-2023 The Pybricks Authors
 
 // Icon for indicating external links
 
@@ -8,7 +8,7 @@ import React from 'react';
 
 import './external-link.scss';
 
-const ExternalLinkIcon: React.VFC = (_props) => {
+const ExternalLinkIcon: React.FunctionComponent = () => {
     return (
         <span className="pb-external-link">
             &nbsp;

src/components/HelpButton.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 import { Classes } from '@blueprintjs/core';
 import React, { useCallback, useEffect, useState } from 'react';
@@ -16,7 +16,7 @@ type HelpButtonProps = {
     content: React.ReactNode;
 };
 
-const HelpButton: React.VoidFunctionComponent<HelpButtonProps> = ({
+const HelpButton: React.FunctionComponent<HelpButtonProps> = ({
     helpForLabel,
     content,
 }) => {

src/components/HelpDialog.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 import './HelpDialog.scss';
 import { Classes } from '@blueprintjs/core';
@@ -9,7 +9,7 @@ import {
     Popover2Arrow,
 } from '@blueprintjs/popover2/lib/cjs/popover2Arrow';
 import classNames from 'classnames';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { PropsWithChildren, useEffect, useMemo, useRef, useState } from 'react';
 import {
     DismissButton,
     FocusScope,
@@ -36,7 +36,7 @@ type HelpDialogProps = {
 };
 
 /** React component for showing help as a dialog. */
-const HelpDialog: React.FunctionComponent<HelpDialogProps> = ({
+const HelpDialog: React.FunctionComponent<PropsWithChildren<HelpDialogProps>> = ({
     title,
     isOpen,
     openButton,

src/components/hubPicker/HubPicker.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 import './hubPicker.scss';
 import { Radio, RadioGroup } from '@blueprintjs/core';
@@ -12,7 +12,7 @@ type HubIconProps = {
     label: string;
 };
 
-const HubIcon: React.VoidFunctionComponent<HubIconProps> = ({ url, label }) => {
+const HubIcon: React.FunctionComponent<HubIconProps> = ({ url, label }) => {
     return <img src={url.toString()} width={64} height={64} title={label} />;
 };
 
@@ -20,9 +20,7 @@ type HubPickerProps = {
     disabled?: boolean;
 };
 
-export const HubPicker: React.VoidFunctionComponent<HubPickerProps> = ({
-    disabled,
-}) => {
+export const HubPicker: React.FunctionComponent<HubPickerProps> = ({ disabled }) => {
     const [selectedHub, setSelectedHub] = useHubPickerSelectedHub();
 
     return (

src/components/toolbar/Toolbar.test.tsx

@@ -11,7 +11,7 @@ afterEach(() => {
     cleanup();
 });
 
-const TestToolbar: React.VoidFunctionComponent = () => {
+const TestToolbar: React.FunctionComponent = () => {
     return (
         <Toolbar
             className="test-class"

src/components/toolbar/Toolbar.tsx

@@ -1,7 +1,7 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import { FocusScope } from 'react-aria';
 import { useToolbar } from './aria';
 import { ToolbarStateContext, useToolbarState } from './state';
@@ -22,7 +22,9 @@ type ToolbarProps = Pick<
  *
  * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/toolbar_role
  */
-export const Toolbar: React.FunctionComponent<ToolbarProps> = (props) => {
+export const Toolbar: React.FunctionComponent<PropsWithChildren<ToolbarProps>> = (
+    props,
+) => {
     const { className, children } = props;
     const state = useToolbarState(props);
     const { toolbarProps } = useToolbar(props);

src/editor/Editor.tsx

@@ -87,9 +87,14 @@ type EditorContextMenuItemProps = Readonly<{
     editorAction: string;
 }>;
 
-const EditorContextMenuItem: React.VoidFunctionComponent<
-    EditorContextMenuItemProps
-> = ({ label, icon, keyboardShortcut, disabled, editor, editorAction }) => {
+const EditorContextMenuItem: React.FunctionComponent<EditorContextMenuItemProps> = ({
+    label,
+    icon,
+    keyboardShortcut,
+    disabled,
+    editor,
+    editorAction,
+}) => {
     const labelId = useId();
 
     return (
@@ -114,7 +119,7 @@ type EditorContextMenuProps = {
     editor: monaco.editor.IStandaloneCodeEditor | undefined;
 };
 
-const EditorContextMenu: React.VoidFunctionComponent<EditorContextMenuProps> = ({
+const EditorContextMenu: React.FunctionComponent<EditorContextMenuProps> = ({
     editor,
 }) => {
     const i18n = useI18n();
@@ -181,7 +186,7 @@ type FileNameProps = {
     onNameChanged: () => void;
 };
 
-const TabLabel: React.VoidFunctionComponent<FileNameProps> = ({
+const TabLabel: React.FunctionComponent<FileNameProps> = ({
     id,
     uuid,
     onNameChanged,
@@ -204,7 +209,7 @@ type TabCloseButtonProps = {
     uuid: UUID;
 };
 
-const TabCloseButton: React.VoidFunctionComponent<TabCloseButtonProps> = ({ uuid }) => {
+const TabCloseButton: React.FunctionComponent<TabCloseButtonProps> = ({ uuid }) => {
     const fileName = useFileStoragePath(uuid) ?? '';
     const dispatch = useDispatch();
     const i18n = useI18n();
@@ -235,7 +240,7 @@ type EditorTabsProps = Readonly<{
     onChange?: () => void;
 }>;
 
-const EditorTabs: React.VoidFunctionComponent<EditorTabsProps> = ({ onChange }) => {
+const EditorTabs: React.FunctionComponent<EditorTabsProps> = ({ onChange }) => {
     const openFiles = useSelector((s) => s.editor.openFileUuids);
     const activeFile = useSelector((s) => s.editor.activeFileUuid);
     const dispatch = useDispatch();
@@ -369,7 +374,7 @@ function useEditorAction(
     );
 }
 
-const Editor: React.VFC = () => {
+const Editor: React.FunctionComponent = () => {
     const dispatch = useDispatch();
 
     const [editor, setEditor] = useState<monaco.editor.IStandaloneCodeEditor>();

src/editor/Welcome.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 // welcome screen that is shown when no editor is open.
 
@@ -60,7 +60,7 @@ type WelcomeProps = {
     isVisible: boolean;
 };
 
-const Welcome: React.VoidFunctionComponent<WelcomeProps> = ({ isVisible }) => {
+const Welcome: React.FunctionComponent<WelcomeProps> = ({ isVisible }) => {
     const stateRef = useRef<State>({
         rotation: defaultRotation,
         rotationSpeed: 0,

src/explorer/Explorer.tsx

@@ -71,7 +71,7 @@ type ActionButtonProps = {
     onClick: () => void;
 };
 
-const ActionButton: React.VoidFunctionComponent<ActionButtonProps> = ({
+const ActionButton: React.FunctionComponent<ActionButtonProps> = ({
     id,
     icon,
     tooltip,
@@ -109,7 +109,7 @@ type ActionButtonGroupProps = {
     item: TreeItem;
 };
 
-const FileActionButtonGroup: React.VoidFunctionComponent<ActionButtonGroupProps> = ({
+const FileActionButtonGroup: React.FunctionComponent<ActionButtonGroupProps> = ({
     item,
 }) => {
     const i18n = useI18n();
@@ -174,7 +174,7 @@ const FileActionButtonGroup: React.VoidFunctionComponent<ActionButtonGroupProps>
 const archiveButtonId = 'pb-explorer-archive-button';
 const newButtonId = 'pb-explorer-add-button';
 
-const Header: React.VoidFunctionComponent = () => {
+const Header: React.FunctionComponent = () => {
     const exportButtonId = useId();
     const dispatch = useDispatch();
     const i18n = useI18n();
@@ -263,7 +263,7 @@ function useLiveDescriptors(): LiveDescriptors {
  * REVISIT: maybe there will be a better way to do this some day:
  * https://github.com/lukasbach/react-complex-tree/issues/47
  */
-const TreeContainer: React.VoidFunctionComponent<RenderProps<'renderTreeContainer'>> = (
+const TreeContainer: React.FunctionComponent<RenderProps<'renderTreeContainer'>> = (
     props,
 ) => {
     const dispatch = useDispatch();
@@ -352,7 +352,7 @@ const TreeContainer: React.VoidFunctionComponent<RenderProps<'renderTreeContaine
     return <div onKeyDown={handleKeyDown}>{renderers.renderTreeContainer(props)}</div>;
 };
 
-const FileTree: React.VoidFunctionComponent = () => {
+const FileTree: React.FunctionComponent = () => {
     const [focusedItem, setFocusedItem] = useState<TreeItemIndex>();
     const files = useFileStorageMetadata();
     const liveDescriptors = useLiveDescriptors();
@@ -447,7 +447,7 @@ const FileTree: React.VoidFunctionComponent = () => {
     );
 };
 
-const Explorer: React.VFC = () => {
+const Explorer: React.FunctionComponent = () => {
     return (
         <div className="pb-explorer">
             <Header />

src/explorer/alerts/FileInUseAlert.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 import { Intent } from '@blueprintjs/core';
 import React from 'react';
@@ -10,9 +10,7 @@ type FileInUseAlertProps = {
     fileName: string;
 };
 
-const FileInUseAlert: React.VoidFunctionComponent<FileInUseAlertProps> = ({
-    fileName,
-}) => {
+const FileInUseAlert: React.FunctionComponent<FileInUseAlertProps> = ({ fileName }) => {
     const i18n = useI18n();
     return <>{i18n.translate('fileInUse.message', { fileName })}</>;
 };

src/explorer/alerts/NoFilesToBackup.tsx

@@ -1,12 +1,12 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 import { Icon, Intent } from '@blueprintjs/core';
 import React from 'react';
 import type { CreateToast } from '../../toasterTypes';
 import { useI18n } from './i18n';
 
-const NoFilesToBackup: React.VoidFunctionComponent = () => {
+const NoFilesToBackup: React.FunctionComponent = () => {
     const i18n = useI18n();
     return (
         <>

src/explorer/alerts/NoPyFiles.tsx

@@ -7,7 +7,7 @@ import { pythonFileExtension } from '../../pybricksMicropython/lib';
 import type { CreateToast } from '../../toasterTypes';
 import { useI18n } from './i18n';
 
-const NoPyFiles: React.VoidFunctionComponent = () => {
+const NoPyFiles: React.FunctionComponent = () => {
     const i18n = useI18n();
     return (
         <>

src/explorer/deleteFileAlert/DeleteFileAlert.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 import { Alert, Classes, Intent } from '@blueprintjs/core';
 import React, { useCallback } from 'react';
@@ -8,7 +8,7 @@ import { useSelector } from '../../reducers';
 import { deleteFileAlertDidAccept, deleteFileAlertDidCancel } from './actions';
 import { useI18n } from './i18n';
 
-const DeleteFileAlert: React.VoidFunctionComponent = () => {
+const DeleteFileAlert: React.FunctionComponent = () => {
     const { isOpen, fileName } = useSelector((s) => s.explorer.deleteFileAlert);
     const dispatch = useDispatch();
     const i18n = useI18n();

src/explorer/duplicateFileDialog/DuplicateFileDialog.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 import { Button, Classes, Dialog } from '@blueprintjs/core';
 import React, { useCallback, useRef, useState } from 'react';
@@ -14,7 +14,7 @@ import FileNameFormGroup from '../fileNameFormGroup/FileNameFormGroup';
 import { duplicateFileDialogDidAccept, duplicateFileDialogDidCancel } from './actions';
 import { useI18n } from './i18n';
 
-const DuplicateFileDialog: React.VFC = () => {
+const DuplicateFileDialog: React.FunctionComponent = () => {
     const i18n = useI18n();
     const dispatch = useDispatch();
     const isOpen = useSelector((s) => s.explorer.duplicateFileDialog.isOpen);

src/explorer/fileNameFormGroup/FileNameFormGroup.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 import { Classes, Code, FormGroup, InputGroup, Intent, Tag } from '@blueprintjs/core';
 import type { AriaButtonProps } from '@react-types/button';
@@ -39,7 +39,7 @@ function replaceInvalidCharacters(value: string): string {
 
 type FixItButtonProps = Pick<AriaButtonProps<'a'>, 'onPress'>;
 
-const FixItButton: React.VoidFunctionComponent<FixItButtonProps> = (props) => {
+const FixItButton: React.FunctionComponent<FixItButtonProps> = (props) => {
     const i18n = useI18n();
     const ref = useRef<HTMLAnchorElement>(null);
 
@@ -66,7 +66,7 @@ type FileNameHelpTextProps = {
 /**
  * Component that maps FileNameValidationResult to help message to display to user.
  */
-const FileNameHelpText: React.VoidFunctionComponent<FileNameHelpTextProps> = ({
+const FileNameHelpText: React.FunctionComponent<FileNameHelpTextProps> = ({
     fileName,
     validation,
     onFix,
@@ -145,7 +145,7 @@ type FileNameFormGroupProps = {
 /**
  * Component used to get a valid new file name.
  */
-const FileNameFormGroup: React.VoidFunctionComponent<FileNameFormGroupProps> = ({
+const FileNameFormGroup: React.FunctionComponent<FileNameFormGroupProps> = ({
     fileName,
     fileExtension,
     validationResult,

src/explorer/newFileWizard/NewFileWizard.tsx

@@ -27,7 +27,7 @@ import FileNameFormGroup from '../fileNameFormGroup/FileNameFormGroup';
 import { newFileWizardDidAccept, newFileWizardDidCancel } from './actions';
 import { useI18n } from './i18n';
 
-const NewFileWizard: React.VoidFunctionComponent = () => {
+const NewFileWizard: React.FunctionComponent = () => {
     const i18n = useI18n();
     const dispatch = useDispatch();
 

src/explorer/renameFileDialog/RenameFileDialog.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 import { Button, Classes, Dialog } from '@blueprintjs/core';
 import React, { useCallback, useRef, useState } from 'react';
@@ -14,7 +14,7 @@ import FileNameFormGroup from '../fileNameFormGroup/FileNameFormGroup';
 import { renameFileDialogDidAccept, renameFileDialogDidCancel } from './actions';
 import { useI18n } from './i18n';
 
-const RenameFileDialog: React.VFC = () => {
+const RenameFileDialog: React.FunctionComponent = () => {
     const i18n = useI18n();
     const dispatch = useDispatch();
     const isOpen = useSelector((s) => s.explorer.renameFileDialog.isOpen);

src/explorer/renameImportDialog/RenameImportDialog.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 import { Button, Classes, Dialog } from '@blueprintjs/core';
 import React, { useCallback, useRef, useState } from 'react';
@@ -15,7 +15,7 @@ import FileNameFormGroup from '../fileNameFormGroup/FileNameFormGroup';
 import { renameImportDialogDidAccept, renameImportDialogDidCancel } from './actions';
 import { useI18n } from './i18n';
 
-const RenameImportDialog: React.VFC = () => {
+const RenameImportDialog: React.FunctionComponent = () => {
     const i18n = useI18n();
     const dispatch = useDispatch();
     const isOpen = useSelector((s) => s.explorer.renameImportDialog.isOpen);

src/explorer/replaceImportDialog/ReplaceImportDialog.tsx

@@ -13,7 +13,7 @@ import {
 } from './actions';
 import { useI18n } from './i18n';
 
-const RenameImportDialog: React.VFC = () => {
+const RenameImportDialog: React.FunctionComponent = () => {
     const i18n = useI18n();
     const dispatch = useDispatch();
     const isOpen = useSelector((s) => s.explorer.replaceImportDialog.isOpen);

src/firmware/alerts/DfuError.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 import { Button, Intent } from '@blueprintjs/core';
 import React from 'react';
@@ -10,7 +10,7 @@ type DfuErrorProps = {
     onTryAgain: () => void;
 };
 
-const DfuError: React.VoidFunctionComponent<DfuErrorProps> = ({ onTryAgain }) => {
+const DfuError: React.FunctionComponent<DfuErrorProps> = ({ onTryAgain }) => {
     const i18n = useI18n();
     return (
         <>

src/firmware/alerts/FlashProgress.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 import { Intent, ProgressBar } from '@blueprintjs/core';
 import React from 'react';
@@ -11,7 +11,7 @@ type FlashProgressProps = {
     progress: number | undefined;
 };
 
-const FlashProgress: React.VoidFunctionComponent<FlashProgressProps> = ({
+const FlashProgress: React.FunctionComponent<FlashProgressProps> = ({
     action,
     progress,
 }) => {

src/firmware/alerts/NoDfuHub.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 import { AnchorButton, Button, Intent } from '@blueprintjs/core';
 import React from 'react';
@@ -16,7 +16,7 @@ type NoDfuHubProps = {
     onInstallWindowsDriver: () => void;
 };
 
-const NoDfuHub: React.VoidFunctionComponent<NoDfuHubProps> = ({
+const NoDfuHub: React.FunctionComponent<NoDfuHubProps> = ({
     onInstallWindowsDriver,
 }) => {
     const i18n = useI18n();

src/firmware/alerts/NoDfuInterface.tsx

@@ -1,12 +1,12 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 import { Intent } from '@blueprintjs/core';
 import React from 'react';
 import type { CreateToast } from '../../toasterTypes';
 import { useI18n } from './i18n';
 
-const NoDfuInterface: React.VoidFunctionComponent = () => {
+const NoDfuInterface: React.FunctionComponent = () => {
     const i18n = useI18n();
     return <p>{i18n.translate('noDfuInterface.message')}</p>;
 };

src/firmware/alerts/NoWebUsb.tsx

@@ -1,12 +1,12 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 import { Intent } from '@blueprintjs/core';
 import React from 'react';
 import type { CreateToast } from '../../toasterTypes';
 import { useI18n } from './i18n';
 
-const NoWebUsb: React.VoidFunctionComponent = () => {
+const NoWebUsb: React.FunctionComponent = () => {
     const i18n = useI18n();
     return (
         <>

src/firmware/alerts/ReleaseButton.tsx

@@ -1,12 +1,12 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 import { Intent } from '@blueprintjs/core';
 import React from 'react';
 import type { CreateToast } from '../../toasterTypes';
 import { useI18n } from './i18n';
 
-const ReleaseButton: React.VoidFunctionComponent = () => {
+const ReleaseButton: React.FunctionComponent = () => {
     const i18n = useI18n();
     return <p>{i18n.translate('releaseButton.message')}</p>;
 };

src/firmware/bootloaderInstructions/BootloaderInstructions.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 import './bootloaderInstructions.scss';
 import { Callout, Intent } from '@blueprintjs/core';
@@ -105,9 +105,11 @@ function countValidChildren(children: React.ReactNode) {
  * Provides customized instructions on how to enter bootloader mode based
  * on the hub type.
  */
-const BootloaderInstructions: React.VoidFunctionComponent<
-    BootloaderInstructionsProps
-> = ({ hubType, recovery, flashButtonText }) => {
+const BootloaderInstructions: React.FunctionComponent<BootloaderInstructionsProps> = ({
+    hubType,
+    recovery,
+    flashButtonText,
+}) => {
     const dispatch = useDispatch();
     const i18n = useI18n();
 

src/firmware/dfuWindowsDriverInstallDialog/DfuWindowsDriverInstallDialog.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 import './dfuWindowsDriverInstallDialog.scss';
 import {
@@ -90,7 +90,7 @@ type ScreenshotProps = {
     url: URL;
 };
 
-const Screenshot: React.VoidFunctionComponent<ScreenshotProps> = ({ url }) => {
+const Screenshot: React.FunctionComponent<ScreenshotProps> = ({ url }) => {
     return (
         <Card elevation={Elevation.FOUR}>
             <img src={url.toString()} alt="Screenshot" width={673} height={523} />
@@ -102,7 +102,7 @@ type HubTypeProps = {
     hub: Hub;
 };
 
-const Step1: React.VoidFunctionComponent = () => {
+const Step1: React.FunctionComponent = () => {
     const i18n = useI18n();
 
     return (
@@ -123,7 +123,7 @@ const Step1: React.VoidFunctionComponent = () => {
     );
 };
 
-const Step2: React.VoidFunctionComponent<HubTypeProps> = ({ hub }) => {
+const Step2: React.FunctionComponent<HubTypeProps> = ({ hub }) => {
     const i18n = useI18n();
 
     return (
@@ -164,7 +164,7 @@ const Step2: React.VoidFunctionComponent<HubTypeProps> = ({ hub }) => {
     );
 };
 
-const Step3: React.VoidFunctionComponent<HubTypeProps> = ({ hub }) => {
+const Step3: React.FunctionComponent<HubTypeProps> = ({ hub }) => {
     const i18n = useI18n();
 
     return (
@@ -201,7 +201,7 @@ const Step3: React.VoidFunctionComponent<HubTypeProps> = ({ hub }) => {
     );
 };
 
-const Step4: React.VoidFunctionComponent<HubTypeProps> = ({ hub }) => {
+const Step4: React.FunctionComponent<HubTypeProps> = ({ hub }) => {
     const i18n = useI18n();
 
     return (
@@ -228,7 +228,7 @@ const Step4: React.VoidFunctionComponent<HubTypeProps> = ({ hub }) => {
     );
 };
 
-const Step5: React.VoidFunctionComponent<HubTypeProps> = ({ hub }) => {
+const Step5: React.FunctionComponent<HubTypeProps> = ({ hub }) => {
     const i18n = useI18n();
 
     return (
@@ -252,7 +252,7 @@ const Step5: React.VoidFunctionComponent<HubTypeProps> = ({ hub }) => {
     );
 };
 
-const Step6: React.VoidFunctionComponent<HubTypeProps> = ({ hub }) => {
+const Step6: React.FunctionComponent<HubTypeProps> = ({ hub }) => {
     const i18n = useI18n();
 
     return (
@@ -277,7 +277,7 @@ const Step6: React.VoidFunctionComponent<HubTypeProps> = ({ hub }) => {
     );
 };
 
-const Step7: React.VoidFunctionComponent<HubTypeProps> = ({ hub }) => {
+const Step7: React.FunctionComponent<HubTypeProps> = ({ hub }) => {
     const i18n = useI18n();
 
     return (
@@ -304,7 +304,7 @@ const Step7: React.VoidFunctionComponent<HubTypeProps> = ({ hub }) => {
     );
 };
 
-const Step8: React.VoidFunctionComponent = () => {
+const Step8: React.FunctionComponent = () => {
     const i18n = useI18n();
 
     return (
@@ -322,7 +322,7 @@ const Step8: React.VoidFunctionComponent = () => {
     );
 };
 
-const Step9: React.VoidFunctionComponent<HubTypeProps> = ({ hub }) => {
+const Step9: React.FunctionComponent<HubTypeProps> = ({ hub }) => {
     const i18n = useI18n();
 
     return (
@@ -346,7 +346,7 @@ const Step9: React.VoidFunctionComponent<HubTypeProps> = ({ hub }) => {
     );
 };
 
-const DfuWindowsDriverInstallDialog: React.VoidFunctionComponent = () => {
+const DfuWindowsDriverInstallDialog: React.FunctionComponent = () => {
     const [hub] = useHubPickerSelectedHub();
     const { isOpen } = useSelector((s) => s.firmware.dfuWindowsDriverInstallDialog);
     const dispatch = useDispatch();

src/firmware/installPybricksDialog/InstallPybricksDialog.tsx

@@ -93,7 +93,7 @@ function getHubTypeNameFromMetadata(metadata: FirmwareMetadata | undefined): str
     }
 }
 
-const UnsupportedHubs: React.VoidFunctionComponent = () => {
+const UnsupportedHubs: React.FunctionComponent = () => {
     const i18n = useI18n();
 
     return (
@@ -180,7 +180,7 @@ type SelectHubPanelProps = {
     onCustomFirmwareZip: (firmwareZip: File | undefined) => void;
 };
 
-const SelectHubPanel: React.VoidFunctionComponent<SelectHubPanelProps> = ({
+const SelectHubPanel: React.FunctionComponent<SelectHubPanelProps> = ({
     isCustomFirmwareRequested,
     customFirmwareData,
     onCustomFirmwareZip,
@@ -335,7 +335,7 @@ type AcceptLicensePanelProps = {
     onLicenseAcceptedChanged: (accepted: boolean) => void;
 };
 
-const AcceptLicensePanel: React.VoidFunctionComponent<AcceptLicensePanelProps> = ({
+const AcceptLicensePanel: React.FunctionComponent<AcceptLicensePanelProps> = ({
     licenseAccepted,
     firmwareData,
     firmwareError,
@@ -386,7 +386,7 @@ type SelectOptionsPanelProps = {
     onChangeHubName(hubName: string): void;
 };
 
-const ConfigureOptionsPanel: React.VoidFunctionComponent<SelectOptionsPanelProps> = ({
+const ConfigureOptionsPanel: React.FunctionComponent<SelectOptionsPanelProps> = ({
     hubName,
     metadata,
     onChangeHubName,
@@ -432,7 +432,7 @@ type BootloaderModePanelProps = {
     hubType: Hub;
 };
 
-const BootloaderModePanel: React.VoidFunctionComponent<BootloaderModePanelProps> = ({
+const BootloaderModePanel: React.FunctionComponent<BootloaderModePanelProps> = ({
     hubType,
 }) => {
     const i18n = useI18n();
@@ -447,7 +447,7 @@ const BootloaderModePanel: React.VoidFunctionComponent<BootloaderModePanelProps>
     );
 };
 
-export const InstallPybricksDialog: React.VoidFunctionComponent = () => {
+export const InstallPybricksDialog: React.FunctionComponent = () => {
     const { isOpen } = useSelector((s) => s.firmware.installPybricksDialog);
     const dispatch = useDispatch();
     const [hubName, setHubName] = useState('');

src/firmware/restoreOfficialDialog/RestoreOfficialDialog.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 import {
     Button,
@@ -25,7 +25,7 @@ import BootloaderInstructions from '../bootloaderInstructions/BootloaderInstruct
 import { firmwareRestoreOfficialDialogHide } from './actions';
 import { useI18n } from './i18n';
 
-const SelectHubPanel: React.VoidFunctionComponent = () => {
+const SelectHubPanel: React.FunctionComponent = () => {
     const i18n = useI18n();
 
     return (
@@ -42,7 +42,7 @@ const SelectHubPanel: React.VoidFunctionComponent = () => {
     );
 };
 
-const RestoreFirmwarePanel: React.VoidFunctionComponent = () => {
+const RestoreFirmwarePanel: React.FunctionComponent = () => {
     const [hubType] = useHubPickerSelectedHub();
     const dispatch = useDispatch();
     const i18n = useI18n();
@@ -84,7 +84,7 @@ const RestoreFirmwarePanel: React.VoidFunctionComponent = () => {
     );
 };
 
-const RestoreOfficialDialog: React.VoidFunctionComponent = () => {
+const RestoreOfficialDialog: React.FunctionComponent = () => {
     const { isOpen } = useSelector((s) => s.firmware.restoreOfficialDialog);
     const dispatch = useDispatch();
     const i18n = useI18n();

src/hub/alerts/UserProgramSize.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 import { Intent } from '@blueprintjs/core';
 import React from 'react';
@@ -13,7 +13,7 @@ type UserProgramSizeProps = {
     max: number;
 };
 
-const UserProgramSize: React.VoidFunctionComponent<UserProgramSizeProps> = ({
+const UserProgramSize: React.FunctionComponent<UserProgramSizeProps> = ({
     actual,
     max,
 }) => {

src/licenses/LicenseDialog.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2021-2022 The Pybricks Authors
+// Copyright (c) 2021-2023 The Pybricks Authors
 
 // The license dialog
 
@@ -44,7 +44,7 @@ type ListItemProps = {
  *
  * Style uses blueprints tree styles since there is no list style.
  */
-const ListItem: React.VoidFunctionComponent<ListItemProps> = ({ item, state }) => {
+const ListItem: React.FunctionComponent<ListItemProps> = ({ item, state }) => {
     const ref = React.useRef<HTMLLIElement>(null);
     const { optionProps, isSelected } = useOption({ key: item.key }, state, ref);
 
@@ -105,7 +105,7 @@ type ListBoxProps = ListProps<LicenseInfo>;
  *
  * Style uses blueprints tree styles since there is no list style.
  */
-const ListBox: React.VoidFunctionComponent<ListBoxProps> = (props) => {
+const ListBox: React.FunctionComponent<ListBoxProps> = (props) => {
     // Create state based on the incoming props
     const state = useListState(props);
 
@@ -133,7 +133,7 @@ type LicenseListPanelProps = {
     onItemSelected(info?: LicenseInfo): void;
 };
 
-const LicenseListPanel: React.VoidFunctionComponent<LicenseListPanelProps> = ({
+const LicenseListPanel: React.FunctionComponent<LicenseListPanelProps> = ({
     onItemSelected,
 }) => {
     const i18n = useI18n();
@@ -228,7 +228,7 @@ type LicenseDialogProps = {
     onClose(): void;
 };
 
-const LicenseDialog: React.VoidFunctionComponent<LicenseDialogProps> = ({
+const LicenseDialog: React.FunctionComponent<LicenseDialogProps> = ({
     isOpen,
     onClose,
 }) => {

src/mpy/alerts/CompilerError.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 import { Button, Intent } from '@blueprintjs/core';
 import React, { useMemo } from 'react';
@@ -13,7 +13,7 @@ type CompilerErrorProps = {
     error: string[];
 };
 
-const CompilerError: React.VoidFunctionComponent<CompilerErrorProps> = ({ error }) => {
+const CompilerError: React.FunctionComponent<CompilerErrorProps> = ({ error }) => {
     const dispatch = useDispatch();
     const i18n = useI18n();
 

src/notifications/NotificationAction.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2021-2022 The Pybricks Authors
+// Copyright (c) 2021-2023 The Pybricks Authors
 
 // provides translation for notification text
 
@@ -12,7 +12,7 @@ type NotificationActionProps = {
     replacements?: Replacements;
 };
 
-const NotificationAction: React.VoidFunctionComponent<NotificationActionProps> = ({
+const NotificationAction: React.FunctionComponent<NotificationActionProps> = ({
     messageId,
     replacements,
 }) => {

src/notifications/NotificationMessage.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2021-2022 The Pybricks Authors
+// Copyright (c) 2021-2023 The Pybricks Authors
 
 // provides translation for notification text
 
@@ -12,7 +12,7 @@ type NotificationMessageProps = {
     replacements?: Replacements;
 };
 
-const NotificationMessage: React.VoidFunctionComponent<NotificationMessageProps> = ({
+const NotificationMessage: React.FunctionComponent<NotificationMessageProps> = ({
     messageId,
     replacements,
 }) => {

src/settings/Settings.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2021-2022 The Pybricks Authors
+// Copyright (c) 2021-2023 The Pybricks Authors
 
 import {
     AnchorButton,
@@ -32,7 +32,7 @@ import { isMacOS } from '../utils/os';
 import { useI18n } from './i18n';
 import './settings.scss';
 
-const Settings: React.VoidFunctionComponent = () => {
+const Settings: React.FunctionComponent = () => {
     const [isAboutDialogOpen, setIsAboutDialogOpen] = useState(false);
     const { isDarkMode, setTernaryDarkMode } = useTernaryDarkMode();
 

src/sponsor/SponsorDialog.tsx

@@ -18,7 +18,7 @@ import ethIcon from './eth_logo.svg';
 import { useI18n } from './i18n';
 import paypalIcon from './paypal_logo.svg';
 
-const SponsorDialog: React.VoidFunctionComponent = () => {
+const SponsorDialog: React.FunctionComponent = () => {
     const { showDialog } = useSelector((s) => s.sponsor);
     const dispatch = useDispatch();
     const i18n = useI18n();

src/sponsor/alerts/AddressCopied.tsx

@@ -1,12 +1,12 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 import { Intent } from '@blueprintjs/core';
 import React from 'react';
 import type { CreateToast } from '../../toasterTypes';
 import { useI18n } from './i18n';
 
-const AddressCopied: React.VoidFunctionComponent = () => {
+const AddressCopied: React.FunctionComponent = () => {
     const i18n = useI18n();
     return <p>{i18n.translate('addressCopied.message')}</p>;
 };

src/status-bar/StatusBar.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2020-2022 The Pybricks Authors
+// Copyright (c) 2020-2023 The Pybricks Authors
 
 import {
     Button,
@@ -25,7 +25,7 @@ const commonPopoverProps: Partial<Popover2Props> = {
     placement: 'top',
 };
 
-const CompletionEngineIndicator: React.VoidFunctionComponent = () => {
+const CompletionEngineIndicator: React.FunctionComponent = () => {
     const { status } = useSelector((s) => s.editor.codeCompletion);
     const i18n = useI18n();
 
@@ -69,7 +69,7 @@ const CompletionEngineIndicator: React.VoidFunctionComponent = () => {
     );
 };
 
-const HubInfoButton: React.VoidFunctionComponent = () => {
+const HubInfoButton: React.FunctionComponent = () => {
     const i18n = useI18n();
     const deviceName = useSelector((s) => s.ble.deviceName);
     const deviceType = useSelector((s) => s.ble.deviceType);
@@ -110,7 +110,7 @@ const HubInfoButton: React.VoidFunctionComponent = () => {
     );
 };
 
-const BatteryIndicator: React.VoidFunctionComponent = () => {
+const BatteryIndicator: React.FunctionComponent = () => {
     const i18n = useI18n();
     const charging = useSelector((s) => s.ble.deviceBatteryCharging);
     const lowBatteryWarning = useSelector((s) => s.ble.deviceLowBatteryWarning);
@@ -142,7 +142,7 @@ const BatteryIndicator: React.VoidFunctionComponent = () => {
     );
 };
 
-const StatusBar: React.VFC = (_props) => {
+const StatusBar: React.FunctionComponent = () => {
     const connection = useSelector((s) => s.ble.connection);
 
     return (

src/terminal/Terminal.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2020-2022 The Pybricks Authors
+// Copyright (c) 2020-2023 The Pybricks Authors
 
 import 'xterm/css/xterm.css';
 import './terminal.scss';
@@ -102,7 +102,7 @@ function createContextMenu(
     return ContextMenu;
 }
 
-const Terminal: React.FC = (_props) => {
+const Terminal: React.FunctionComponent = () => {
     const { xterm, fitAddon } = useMemo(createXTerm, [createXTerm]);
     const terminalRef = useRef<HTMLDivElement>(null);
     const { isDarkMode } = useTernaryDarkMode();

src/toolbar/ActionButton.tsx

@@ -39,7 +39,7 @@ export interface ActionButtonProps {
     readonly onAction: () => void;
 }
 
-const ActionButton: React.VoidFunctionComponent<ActionButtonProps> = ({
+const ActionButton: React.FunctionComponent<ActionButtonProps> = ({
     id,
     label,
     keyboardShortcut,

src/toolbar/Toolbar.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2020-2022 The Pybricks Authors
+// Copyright (c) 2020-2023 The Pybricks Authors
 
 import { ButtonGroup } from '@blueprintjs/core';
 import React from 'react';
@@ -19,7 +19,7 @@ const bluetoothButtonId = 'pb-toolbar-bluetooth-button';
 const runButtonId = 'pb-toolbar-run-button';
 const sponsorButtonId = 'pb-toolbar-sponsor-button';
 
-const Toolbar: React.VFC = () => {
+const Toolbar: React.FunctionComponent = () => {
     const i18n = useI18n();
     const stopButtonId = useId();
     const replButtonId = useId();

src/toolbar/buttons/bluetooth/BluetoothButton.tsx

@@ -14,7 +14,7 @@ import { useI18n } from './i18n';
 
 type BluetoothButtonProps = Pick<ActionButtonProps, 'id'>;
 
-const BluetoothButton: React.VoidFunctionComponent<BluetoothButtonProps> = ({ id }) => {
+const BluetoothButton: React.FunctionComponent<BluetoothButtonProps> = ({ id }) => {
     const bootloaderConnection = useSelector((s) => s.bootloader.connection);
     const bleConnection = useSelector((s) => s.ble.connection);
 

src/toolbar/buttons/repl/ReplButton.tsx

@@ -13,7 +13,7 @@ import icon from './icon.svg';
 
 type ReplButtonProps = Pick<ActionButtonProps, 'id'>;
 
-const ReplButton: React.VoidFunctionComponent<ReplButtonProps> = ({ id }) => {
+const ReplButton: React.FunctionComponent<ReplButtonProps> = ({ id }) => {
     const { runtime, useLegacyDownload, hasRepl } = useSelector((s) => s.hub);
     const i18n = useI18n();
     const dispatch = useDispatch();

src/toolbar/buttons/run/RunButton.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2020-2022 The Pybricks Authors
+// Copyright (c) 2020-2023 The Pybricks Authors
 
 import React from 'react';
 import { useDispatch } from 'react-redux';
@@ -12,7 +12,7 @@ import icon from './icon.svg';
 
 type RunButtonProps = Pick<ActionButtonProps, 'id'>;
 
-const RunButton: React.VoidFunctionComponent<RunButtonProps> = ({ id }) => {
+const RunButton: React.FunctionComponent<RunButtonProps> = ({ id }) => {
     const { downloadProgress, preferredFileFormat, runtime, useLegacyDownload } =
         useSelector((s) => s.hub);
     const activeFile = useSelector((s) => s.editor.activeFileUuid);

src/toolbar/buttons/sponsor/SponsorButton.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2020-2022 The Pybricks Authors
+// Copyright (c) 2020-2023 The Pybricks Authors
 
 import React from 'react';
 import { useDispatch } from 'react-redux';
@@ -10,7 +10,7 @@ import icon from './icon.svg';
 
 type SponsorButtonProps = Pick<ActionButtonProps, 'id'>;
 
-const SponsorButton: React.VoidFunctionComponent<SponsorButtonProps> = ({ id }) => {
+const SponsorButton: React.FunctionComponent<SponsorButtonProps> = ({ id }) => {
     const i18n = useI18n();
     const dispatch = useDispatch();
 

src/toolbar/buttons/stop/StopButton.tsx

@@ -13,7 +13,7 @@ import icon from './icon.svg';
 
 type StopButtonProps = Pick<ActionButtonProps, 'id'>;
 
-const StopButton: React.VoidFunctionComponent<StopButtonProps> = ({ id }) => {
+const StopButton: React.FunctionComponent<StopButtonProps> = ({ id }) => {
     const runtime = useSelector((s) => s.hub.runtime);
     const keyboardShortcut = 'F6';
 

src/tour/Tour.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 import { Colors, Icon } from '@blueprintjs/core';
 import React, { useCallback, useMemo, useState } from 'react';
@@ -107,7 +107,7 @@ const DownloadAndRunStep = React.memo(function DownloadAndRunStep() {
     );
 });
 
-const Tour: React.VoidFunctionComponent = () => {
+const Tour: React.FunctionComponent = () => {
     const [selectedActivity, setSelectedActivity] = useActivitiesSelectedActivity();
     const [showOnStartup, setShowOnStartup] = useLocalStorage(
         'tour.showOnStartup',

src/utils/tree-renderer.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 /***/
 // react-complex-tree renderers for bluetprintjs integration
@@ -49,7 +49,7 @@ export type RenderProps<T extends keyof RendererFuncs> = Parameters<
     RendererFuncs[T]
 >[0];
 
-const TreeContainer: React.VoidFunctionComponent<RenderProps<'renderTreeContainer'>> = (
+const TreeContainer: React.FunctionComponent<RenderProps<'renderTreeContainer'>> = (
     props,
 ) => {
     return (
@@ -62,9 +62,9 @@ const TreeContainer: React.VoidFunctionComponent<RenderProps<'renderTreeContaine
     );
 };
 
-const ItemsContainer: React.VoidFunctionComponent<
-    RenderProps<'renderTreeContainer'>
-> = (props) => (
+const ItemsContainer: React.FunctionComponent<RenderProps<'renderTreeContainer'>> = (
+    props,
+) => (
     <ul
         className={cx(Classes.TREE_NODE_LIST, Classes.TREE_ROOT)}
         {...props.containerProps}
@@ -76,7 +76,7 @@ const ItemsContainer: React.VoidFunctionComponent<
     </ul>
 );
 
-const Item: React.VoidFunctionComponent<RenderProps<'renderItem'>> = (props) => {
+const Item: React.FunctionComponent<RenderProps<'renderItem'>> = (props) => {
     const {
         value: isHover,
         setTrue: setIsHoverTrue,
@@ -129,9 +129,7 @@ const Item: React.VoidFunctionComponent<RenderProps<'renderItem'>> = (props) =>
     );
 };
 
-const ItemArrow: React.VoidFunctionComponent<RenderProps<'renderItemArrow'>> = (
-    props,
-) => (
+const ItemArrow: React.FunctionComponent<RenderProps<'renderItemArrow'>> = (props) => (
     <Icon
         icon="chevron-right"
         className={cx(
@@ -147,7 +145,7 @@ const ItemArrow: React.VoidFunctionComponent<RenderProps<'renderItemArrow'>> = (
     />
 );
 
-const ItemTitle: React.VoidFunctionComponent<RenderProps<'renderItemTitle'>> = ({
+const ItemTitle: React.FunctionComponent<RenderProps<'renderItemTitle'>> = ({
     title,
     context,
     info,
@@ -172,7 +170,7 @@ const ItemTitle: React.VoidFunctionComponent<RenderProps<'renderItemTitle'>> = (
     }
 };
 
-const DragBetweenLine: React.VoidFunctionComponent<
+const DragBetweenLine: React.FunctionComponent<
     RenderProps<'renderDragBetweenLine'>
 > = ({ draggingPosition, lineProps }) => (
     <div
@@ -195,7 +193,7 @@ const DragBetweenLine: React.VoidFunctionComponent<
     />
 );
 
-const RenameInput: React.VoidFunctionComponent<RenderProps<'renderRenameInput'>> = (
+const RenameInput: React.FunctionComponent<RenderProps<'renderRenameInput'>> = (
     props,
 ) => (
     <form {...props.formProps} style={{ display: 'contents' }}>
@@ -218,7 +216,7 @@ const RenameInput: React.VoidFunctionComponent<RenderProps<'renderRenameInput'>>
     </form>
 );
 
-const SearchInput: React.VoidFunctionComponent<RenderProps<'renderSearchInput'>> = (
+const SearchInput: React.FunctionComponent<RenderProps<'renderSearchInput'>> = (
     props,
 ) => {
     const { ref, defaultValue, value, ...inputProps } = props.inputProps;