[DEV] REACT18

package.json

@@ -279,9 +279,8 @@
     "r2-streamer-js": "^1.0.46",
     "r2-utils-js": "^1.0.35",
     "ramda": "^0.29.0",
-    "react": "^17.0.2",
-    "react-beautiful-dnd": "^13.1.1",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
     "react-focus-lock": "^2.9.5",
     "react-redux": "^7.2.9",
@@ -306,6 +305,7 @@
     "yazl": "^2.5.1"
   },
   "devDependencies": {
+    "@axe-core/react": "^4.7.3",
     "@babel/generator": "^7.22.10",
     "@electron/notarize": "^2.1.0",
     "@electron/rebuild": "^3.2.13",
@@ -324,9 +324,8 @@
     "@types/mime-types": "^2.1.1",
     "@types/node": "^18.17.1",
     "@types/ramda": "^0.29.3",
-    "@types/react": "^17.0.62",
-    "@types/react-beautiful-dnd": "^13.1.4",
-    "@types/react-dom": "^17.0.20",
+    "@types/react": "^18.2.21",
+    "@types/react-dom": "^18.2.7",
     "@types/react-redux": "^7.1.25",
     "@types/react-router": "^5.1.20",
     "@types/react-router-dom": "^5.3.3",
@@ -381,7 +380,6 @@
     "postcss-mixins": "^9.0.4",
     "postcss-nesting": "^12.0.1",
     "prettier": "^3.0.1",
-    "react-axe": "^3.5.4",
     "react-svg-loader": "^3.0.3",
     "remote-redux-devtools": "^0.5.16",
     "rimraf": "^5.0.1",

src/renderer/common/components/OutsideClickAlerter.tsx

@@ -8,7 +8,7 @@
 import * as React from "react";
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
-interface IBaseProps {
+interface IBaseProps extends React.PropsWithChildren {
     onClickOutside: () => void;
     disabled?: boolean;
 }

src/renderer/common/components/dialog/publicationInfos/publicationInfoContent.tsx

@@ -329,7 +329,7 @@ const Progression = (props: {
     return (<></>);
 };
 
-export const PublicationInfoContent: React.FC<IProps> = (props) => {
+export const PublicationInfoContent: React.FC<IProps & React.PropsWithChildren> = (props) => {
 
     // tslint:disable-next-line: max-line-length
     const { closeDialogCb, readerReadingLocation, pdfPlayerNumberOfPages, divinaNumberOfPages, divinaContinousEqualTrue, r2Publication: r2Publication_, manifestUrlR2Protocol, handleLinkUrl, publicationViewMaybeOpds, toggleCoverZoomCb, ControlComponent, TagManagerComponent, coverZoom, translator, onClikLinkCb, focusWhereAmI } = props;

src/renderer/common/components/dialog/publicationInfos/publicationInfoManager.tsx

@@ -16,7 +16,7 @@ import Cover from "../../Cover";
 import Loader from "../../Loader";
 import Dialog from "../Dialog";
 
-export interface IProps extends TranslatorProps {
+export interface IProps extends TranslatorProps, React.PropsWithChildren {
     publicationViewMaybeOpds: TPublication;
     coverZoom: boolean;
     toggleCoverZoomCb: (coverZoom: boolean) => void;
@@ -52,8 +52,7 @@ const PublicationInfoManager: React.FC<IProps> = (props) => {
                                         (e: React.KeyboardEvent<HTMLImageElement>) =>
                                             e.key === "Enter" && toggleCoverZoomCb(coverZoom)
                                     }
-                                >
-                                </Cover>
+                                />
                                 :
                                 <>
                                     {

src/renderer/common/components/dialog/publicationInfos/tag/tagButton.tsx

@@ -11,7 +11,7 @@ import { IOpdsTagView } from "readium-desktop/common/views/opds";
 import * as CrossIcon from "readium-desktop/renderer/assets/icons/baseline-close-24px-blue.svg";
 import SVG from "readium-desktop/renderer/common/components/SVG";
 
-export interface IProps {
+export interface IProps extends React.PropsWithChildren {
     tag: string | IOpdsTagView;
     index?: number;
     __?: I18nTyped;

src/renderer/common/components/hoc/translator.tsx

@@ -14,7 +14,7 @@ export interface TranslatorProps {
     translator?: Translator;
 }
 
-type TComponentConstructor<P> = React.ComponentClass<P> | React.StatelessComponent<P>;
+type TComponentConstructor<P> = React.ComponentClass<P> | React.FunctionComponent<P>; // React.StatelessComponent<P>;
 
 export function withTranslator<Props>(WrappedComponent: TComponentConstructor<Props & TranslatorProps>) {
     const WrapperComponent = class extends React.Component<Props & TranslatorProps, undefined> {

src/renderer/common/components/menu/AccessibleMenu.tsx

@@ -10,7 +10,7 @@ import FocusLock from "react-focus-lock";
 import OutsideClickAlerter from "readium-desktop/renderer/common/components/OutsideClickAlerter";
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
-interface IBaseProps {
+interface IBaseProps extends React.PropsWithChildren {
     className?: string;
     visible: boolean;
     toggleMenu: () => void;

src/renderer/common/components/menu/MenuButton.tsx

@@ -8,7 +8,7 @@
 import * as React from "react";
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
-interface IBaseProps {
+interface IBaseProps extends React.PropsWithChildren {
     menuId: string;
     open: boolean;
     toggle: () => void;

src/renderer/common/components/menu/MenuContent.tsx

@@ -11,7 +11,7 @@ import * as ReactDOM from "react-dom";
 import AccessibleMenu from "./AccessibleMenu";
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
-interface IBaseProps {
+interface IBaseProps extends React.PropsWithChildren {
     id: string;
     open: boolean;
     dir: string;