update react version to 18.2.0 and it related changes

9 files changed, 20 insertions, 9 deletions

diff --git a/src/app.tsx b/src/app.tsx
index 4782bb778..4d4100c40 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -1,6 +1,6 @@
 import { webFrame } from 'electron';
 
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { Provider } from 'mobx-react';
 import { RouterStore } from '@superwf/mobx-react-router';
 import { createHashHistory } from 'history';
@@ -44,7 +44,9 @@ window.addEventListener('load', () => {
           </I18N>
         </Provider>
       );
-      render(preparedApp, document.querySelector('#root'));
+      const container = document.querySelector('#root');
+      const root = createRoot(container!);
+      root.render(preparedApp);
     },
   };
   window['ferdium'].render();
diff --git a/src/components/layout/AppLayout.tsx b/src/components/layout/AppLayout.tsx
index 9ea5463a2..86b4e787e 100644
--- a/src/components/layout/AppLayout.tsx
+++ b/src/components/layout/AppLayout.tsx
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, PropsWithChildren } from 'react';
 import { observer } from 'mobx-react';
 import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { TitleBar } from 'electron-react-titlebar/renderer';
@@ -99,7 +99,7 @@ interface IState {
 }
 
 @observer
-class AppLayout extends Component<IProps, IState> {
+class AppLayout extends Component<PropsWithChildren<IProps>, IState> {
   constructor(props) {
     super(props);
 
diff --git a/src/components/services/tabs/TabBarSortableList.tsx b/src/components/services/tabs/TabBarSortableList.tsx
index e04f6268d..bb889ebef 100644
--- a/src/components/services/tabs/TabBarSortableList.tsx
+++ b/src/components/services/tabs/TabBarSortableList.tsx
@@ -10,7 +10,6 @@ interface IProps {
   showServiceNameSetting: boolean;
   showMessageBadgesEvenWhenMuted: boolean;
   services: Service[];
-
   setActive: (args: { serviceId: string }) => void;
   openSettings: (args: { path: string }) => void;
   reload: (args: { serviceId: string }) => void;
@@ -50,6 +49,7 @@ class TabBarSortableList extends Component<IProps> {
         {services.map((service, index) => (
           <TabItem
             key={service.id}
+            // @ts-ignore
             clickHandler={() => setActive({ serviceId: service.id })}
             service={service}
             index={index}
diff --git a/src/components/services/tabs/TabItem.tsx b/src/components/services/tabs/TabItem.tsx
index fae788764..2ed595919 100644
--- a/src/components/services/tabs/TabItem.tsx
+++ b/src/components/services/tabs/TabItem.tsx
@@ -1,4 +1,5 @@
 import { app, dialog, Menu } from '@electron/remote';
+import { noop } from 'lodash';
 import { Component } from 'react';
 import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { inject, observer } from 'mobx-react';
@@ -6,7 +7,6 @@ import classnames from 'classnames';
 import { SortableElement } from 'react-sortable-hoc';
 import injectSheet, { WithStylesProps } from 'react-jss';
 import ms from 'ms';
-
 import { autorun, makeObservable, observable, reaction } from 'mobx';
 import { mdiExclamation, mdiVolumeSource } from '@mdi/js';
 import Service from '../../../models/Service';
@@ -348,6 +348,8 @@ class TabItem extends Component<IProps, IState> {
           'is-label-enabled': showServiceNameSetting,
         })}
         onClick={clickHandler}
+        onKeyDown={noop}
+        role="presentation"
         onContextMenu={() => menu.popup()}
         data-tip={`${service.name} ${
           shortcutIndex <= 9
@@ -407,5 +409,6 @@ class TabItem extends Component<IProps, IState> {
 }
 
 export default injectIntl(
+  // @ts-ignore
   SortableElement(injectSheet(styles, { injectTheme: true })(TabItem)),
 );
diff --git a/src/components/services/tabs/Tabbar.tsx b/src/components/services/tabs/Tabbar.tsx
index 64541cc8f..e3b5a7ba9 100644
--- a/src/components/services/tabs/Tabbar.tsx
+++ b/src/components/services/tabs/Tabbar.tsx
@@ -97,6 +97,7 @@ class TabBar extends Component<IProps> {
     return (
       <div>
         <TabBarSortableList
+          // @ts-ignore
           services={services}
           setActive={setActive}
           onSortEnd={this.onSortEnd}
diff --git a/src/components/settings/SettingsLayout.tsx b/src/components/settings/SettingsLayout.tsx
index 3b706571e..f96ad7394 100644
--- a/src/components/settings/SettingsLayout.tsx
+++ b/src/components/settings/SettingsLayout.tsx
@@ -1,4 +1,4 @@
-import { Component, ReactElement } from 'react';
+import { Component, PropsWithChildren, ReactElement } from 'react';
 import { observer } from 'mobx-react';
 import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { mdiClose } from '@mdi/js';
@@ -21,7 +21,7 @@ interface IProps extends WrappedComponentProps {
 }
 
 @observer
-class SettingsLayout extends Component<IProps> {
+class SettingsLayout extends Component<PropsWithChildren<IProps>> {
   constructor(props: IProps) {
     super(props);
 
diff --git a/src/components/settings/releaseNotes/ReleaseNotesLayout.tsx b/src/components/settings/releaseNotes/ReleaseNotesLayout.tsx
index 64ff25eab..bc38aa603 100644
--- a/src/components/settings/releaseNotes/ReleaseNotesLayout.tsx
+++ b/src/components/settings/releaseNotes/ReleaseNotesLayout.tsx
@@ -19,6 +19,7 @@ const messages = defineMessages({
 
 interface IProps extends WrappedComponentProps {
   actions?: Actions;
+  children?: React.ReactNode;
 }
 
 @inject('stores', 'actions')
diff --git a/src/components/ui/Select.tsx b/src/components/ui/Select.tsx
index 1d69a9acf..e8e305fdd 100644
--- a/src/components/ui/Select.tsx
+++ b/src/components/ui/Select.tsx
@@ -4,6 +4,7 @@ import {
   ReactElement,
   RefObject,
   ChangeEvent,
+  ReactNode,
 } from 'react';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
@@ -103,7 +104,9 @@ class Select extends Component<IProps> {
             </option>
           ))}
         </select>
-        {field.error && <div className="franz-form__error">{field.error}</div>}
+        {field.error && (
+          <div className="franz-form__error">{field.error as ReactNode}</div>
+        )}
       </div>
     );
   }
diff --git a/src/components/util/ErrorBoundary/index.tsx b/src/components/util/ErrorBoundary/index.tsx
index b042e62c8..bef211ef9 100644
--- a/src/components/util/ErrorBoundary/index.tsx
+++ b/src/components/util/ErrorBoundary/index.tsx
@@ -20,6 +20,7 @@ const messages = defineMessages({
 
 interface ErrorBoundaryProps extends WithStylesProps<typeof styles> {
   intl: IntlShape;
+  children?: React.ReactNode;
 }
 
 class ErrorBoundary extends Component<ErrorBoundaryProps> {