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/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);