Migrate codebase to React 18

package.json

@@ -31,8 +31,8 @@
     "lodash": "^4.17.0",
     "luxon": "^1.23.0",
     "query-string": "^7.0.0",
-    "react": "^16.13.0",
-    "react-dom": "^16.13.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
     "semantic-ui-css": "^2.4.0",
     "semantic-ui-react": "^2.1.0",
     "tinymce": "^6.7.2",
@@ -55,15 +55,15 @@
     "axios": "^1.7.7",
     "coveralls": "^3.0.0",
     "enzyme": "^3.10.0",
-    "enzyme-adapter-react-16": "^1.15.0",
+    "@cfaester/enzyme-adapter-react-18": "^0.8.0",
     "expect": "^26.0.0",
     "formik": "^2.1.0",
     "json": "^10.0.0",
     "lodash": "^4.17.0",
     "luxon": "^1.23.0",
     "query-string": "^7.0.0",
-    "react": "^16.13.0",
-    "react-dom": "^16.13.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
     "react-scripts": "^5.0.1",
     "rimraf": "^3.0.0",
     "rollup": "^2.10.0",
@@ -111,6 +111,6 @@
     ]
   },
   "engines": {
-    "node": ">=16.0.0"
+    "node": ">=22.0.0"
   }
 }

src/demos/App.js

@@ -5,8 +5,6 @@
 // React-Invenio-Forms is free software; you can redistribute it and/or modify it
 // under the terms of the MIT License; see LICENSE file for more details.
 
-import React, { Component } from "react";
-
 import PropTypes from "prop-types";
 import * as Yup from "yup";
 import { Header, Message, Container } from "semantic-ui-react";
@@ -16,9 +14,9 @@
 const CurrentRecord = (props) => {
   const { record } = props;
   return (
     <Message>
       <Message.Header>Submitted record</Message.Header>
       <pre>{JSON.stringify(record)}</pre>
     </Message>
   );
 };
@@ -31,11 +29,9 @@
   record: undefined,
 };
 
-class RecordPreviewer extends Component {
-  render() {
-    const { record } = this.props;
-    return <CurrentRecord record={record} />;
-  }
+function RecordPreviewer(props) {
+  const { record } = props;
+  return <CurrentRecord record={record} />;
 }
 
 RecordPreviewer.propTypes = {
@@ -46,7 +42,7 @@
   record: undefined,
 };
 
 class App extends Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -83,8 +79,8 @@
   render() {
     const { record } = this.state;
     return (
       <Container>
         <BaseForm
           onSubmit={this.onSubmit}
           onError={this.onError}
           formik={{
@@ -92,15 +88,15 @@
             validationSchema: this.MyFormSchema,
           }}
         >
           <Header textAlign="center">My Form</Header>
           <TextField
             fieldPath="title"
             placeholder="Enter a new title"
             label="Title"
             fluid
             required
           />
           <RecordPreviewer record={record} />
         </BaseForm>
       </Container>
     );

src/index.js

@@ -6,9 +6,9 @@
  * under the terms of the MIT License; see LICENSE file for more details.
  */
 
-import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import App from "./demos/App";
 import "semantic-ui-css/semantic.min.css";
 
-ReactDOM.render(<App />, document.getElementById("root"));
+const root = createRoot(document.getElementById("root"));
+root.render(<App />);

src/lib/elements/ErrorMessage.js

@@ -6,7 +6,6 @@
 
 import { Message, Icon } from "semantic-ui-react";
 import PropTypes from "prop-types";
-import React, { Component } from "react";
 import _isEmpty from "lodash/isEmpty";
 
 const FieldErrorList = ({ fieldErrors }) => {
@@ -48,21 +47,19 @@ FieldErrorList.propTypes = {
  *   - complex error messages: provide list or received errors.
  * Icon and other ui props are supported.
  */
-export class ErrorMessage extends Component {
-  render() {
-    const { header, errors, content, icon, ...uiProps } = this.props;
+export function ErrorMessage(props) {
+  const { header, errors, content, icon, ...uiProps } = props;
 
-    return (
-      <Message icon={Boolean(icon)} {...uiProps}>
-        {icon && <Icon name={icon} />}
-        <Message.Content role="alert">
-          {header && <Message.Header>{header}</Message.Header>}
-          {content}
-          {!_isEmpty(errors) && <FieldErrorList fieldErrors={errors} />}
-        </Message.Content>
-      </Message>
-    );
-  }
+  return (
+    <Message icon={Boolean(icon)} {...uiProps}>
+      {icon && <Icon name={icon} />}
+      <Message.Content role="alert">
+        {header && <Message.Header>{header}</Message.Header>}
+        {content}
+        {!_isEmpty(errors) && <FieldErrorList fieldErrors={errors} />}
+      </Message.Content>
+    </Message>
+  );
 }
 
 ErrorMessage.propTypes = {

src/lib/elements/GridResponsiveSidebarColumn.js

@@ -1,10 +1,10 @@
-import React from "react";
+import { createRef, Component } from "react";
 import PropTypes from "prop-types";
 import { Grid, Sidebar, Button, Segment } from "semantic-ui-react";
 
-export class GridResponsiveSidebarColumn extends React.Component {
+export class GridResponsiveSidebarColumn extends Component {
   render() {
-    const closeSidebarBtnRef = React.createRef();
+    const closeSidebarBtnRef = createRef();
     const {
       mobile,
       tablet,

src/lib/elements/Image.js

@@ -5,7 +5,7 @@
 // under the terms of the MIT License; see LICENSE file for more details.
 
 import PropTypes from "prop-types";
-import React, { Component } from "react";
+import { createRef, Component } from "react";
 import { Image as SUIImage, Ref } from "semantic-ui-react";
 import axios from "axios";
 
@@ -27,7 +27,7 @@ export class Image extends Component {
       }
     }
   }
-  myRef = React.createRef();
+  myRef = createRef();
 
   setSrc = (currentTarget, src, isFallback = false) => {
     if (isFallback) {

src/lib/elements/accessibility/InvenioPopup.js

@@ -4,44 +4,42 @@
 // React-Invenio-Forms is free software; you can redistribute it and/or modify it
 // under the terms of the MIT License; see LICENSE file for more details.
 
-import React, { Component } from "react";
+import { cloneElement } from "react";
 import PropTypes from "prop-types";
 import { Popup } from "semantic-ui-react";
 
-export class InvenioPopup extends Component {
-  render() {
-    const {
-      popupId,
-      size,
-      trigger,
-      content,
-      position,
-      inverted,
-      ariaLabel,
-      hoverable,
-    } = this.props;
+export function InvenioPopup(props) {
+  const {
+    popupId,
+    size,
+    trigger,
+    content,
+    position,
+    inverted,
+    ariaLabel,
+    hoverable,
+  } = props;
 
-    return (
-      <Popup
-        id={popupId}
-        size={size}
-        position={position}
-        inverted={inverted}
-        hoverable={hoverable}
-        on={["hover", "focus"]}
-        trigger={React.cloneElement(trigger, {
-          "role": "button",
-          "tabIndex": 0,
-          "aria-label": ariaLabel,
-        })}
-        content={
-          <p role="tooltip" aria-live="polite">
-            {content}
-          </p>
-        }
-      />
-    );
-  }
+  return (
+    <Popup
+      id={popupId}
+      size={size}
+      position={position}
+      inverted={inverted}
+      hoverable={hoverable}
+      on={["hover", "focus"]}
+      trigger={cloneElement(trigger, {
+        "role": "button",
+        "tabIndex": 0,
+        "aria-label": ariaLabel,
+      })}
+      content={
+        <p role="tooltip" aria-live="polite">
+          {content}
+        </p>
+      }
+    />
+  );
 }
 
 InvenioPopup.propTypes = {

src/lib/elements/bulk_actions/SearchResultsBulkActions.js

@@ -6,7 +6,7 @@
  * under the terms of the MIT License; see LICENSE file for more details.
  */
 
-import React, { Component } from "react";
+import { Component } from "react";
 import PropTypes from "prop-types";
 import { Checkbox, Dropdown } from "semantic-ui-react";
 import { BulkActionsContext } from "./context";

src/lib/elements/bulk_actions/SearchResultsBulkActionsManager.js

@@ -1,5 +1,5 @@
 import { BulkActionsContext } from "./context";
-import React, { Component } from "react";
+import { Component } from "react";
 import _hasIn from "lodash/hasIn";
 import PropTypes from "prop-types";
 

src/lib/elements/bulk_actions/SearchResultsRowCheckbox.js

@@ -1,5 +1,5 @@
 import { BulkActionsContext } from "./context";
-import React, { Component } from "react";
+import { Component } from "react";
 import PropTypes from "prop-types";
 import { Checkbox } from "semantic-ui-react";
 import _hasIn from "lodash/hasIn";

src/lib/elements/bulk_actions/context.js

@@ -1,6 +1,6 @@
-import React from "react";
+import { createContext } from "react";
 
-export const BulkActionsContext = React.createContext({
+export const BulkActionsContext = createContext({
   bulkActionContext: {},
   addToSelected: () => {},
   allSelected: false,

src/lib/elements/contrib/invenioRDM/records/AffiliationsSuggestions.js

@@ -6,7 +6,6 @@
  * // under the terms of the MIT License; see LICENSE file for more details.
  */
 
-import React from "react";
 import { Image } from "../../../Image";
 import { Header } from "semantic-ui-react";
 import Overridable from "react-overridable";

src/lib/elements/contrib/invenioRDM/users/UserListItemCompact.js

@@ -1,38 +1,35 @@
-import React, { Component } from "react";
 import PropTypes from "prop-types";
 import { Image } from "../../../Image";
 import { Item, Label } from "semantic-ui-react";
 
-export class UserListItemCompact extends Component {
-  render() {
-    const { id, user, linkToDetailView } = this.props;
-    const name = user.profile?.full_name || user.username;
-    return (
-      <Item className="flex" key={id}>
-        <Image src={user.links.avatar} avatar loadFallbackFirst />
-        <Item.Content className="ml-10">
-          <Item.Header className={!user.description ? "mt-5" : ""}>
-            {linkToDetailView ? (
-              <a href={linkToDetailView}>
-                <b>{name}</b>
-              </a>
-            ) : (
+export function UserListItemCompact(props) {
+  const { id, user, linkToDetailView } = props;
+  const name = user.profile?.full_name || user.username;
+  return (
+    <Item className="flex" key={id}>
+      <Image src={user.links.avatar} avatar loadFallbackFirst />
+      <Item.Content className="ml-10">
+        <Item.Header className={!user.description ? "mt-5" : ""}>
+          {linkToDetailView ? (
+            <a href={linkToDetailView}>
               <b>{name}</b>
-            )}
-            {user.type === "group" && <Label className="ml-10">Group</Label>}
-            {user.is_current_user && (
-              <Label size="tiny" className="primary ml-10">
-                You
-              </Label>
-            )}
-          </Item.Header>
-          <Item.Meta>
-            <div className="truncate-lines-1"> {user.profile?.affiliations}</div>
-          </Item.Meta>
-        </Item.Content>
-      </Item>
-    );
-  }
+            </a>
+          ) : (
+            <b>{name}</b>
+          )}
+          {user.type === "group" && <Label className="ml-10">Group</Label>}
+          {user.is_current_user && (
+            <Label size="tiny" className="primary ml-10">
+              You
+            </Label>
+          )}
+        </Item.Header>
+        <Item.Meta>
+          <div className="truncate-lines-1"> {user.profile?.affiliations}</div>
+        </Item.Meta>
+      </Item.Content>
+    </Item>
+  );
 }
 
 UserListItemCompact.propTypes = {

src/lib/forms/AccordionField.js

@@ -6,7 +6,7 @@
 
 import _get from "lodash/get";
 import isEmpty from "lodash/isEmpty";
-import React, { Component } from "react";
+import { Component } from "react";
 import PropTypes from "prop-types";
 import { Field, FastField } from "formik";
 import { Accordion, Container, Icon, Label } from "semantic-ui-react";

src/lib/forms/ArrayField.js

@@ -5,7 +5,7 @@
 // React-Invenio-Forms is free software; you can redistribute it and/or modify it
 // under the terms of the MIT License; see LICENSE file for more details.
 
-import React, { Component } from "react";
+import { Component } from "react";
 import PropTypes from "prop-types";
 import { getIn, FieldArray } from "formik";
 import { Form, Icon } from "semantic-ui-react";

src/lib/forms/BaseForm/BaseForm.js

@@ -5,20 +5,17 @@
 // React-Invenio-Forms is free software; you can redistribute it and/or modify it
 // under the terms of the MIT License; see LICENSE file for more details.
 
-import React, { Component } from "react";
 import PropTypes from "prop-types";
 import { Formik } from "formik";
 import { Form } from "semantic-ui-react";
 
-export class BaseForm extends Component {
-  render() {
-    const { formik, onSubmit, children } = this.props;
-    return (
-      <Formik onSubmit={onSubmit} {...formik}>
-        <Form>{children}</Form>
-      </Formik>
-    );
-  }
+export function BaseForm(props) {
+  const { formik, onSubmit, children } = props;
+  return (
+    <Formik onSubmit={onSubmit} {...formik}>
+      <Form>{children}</Form>
+    </Formik>
+  );
 }
 
 BaseForm.propTypes = {

src/lib/forms/BooleanField.js

@@ -5,7 +5,7 @@
 // React-Invenio-Forms is free software; you can redistribute it and/or modify it
 // under the terms of the MIT License; see LICENSE file for more details.
 
-import React, { Component } from "react";
+import { Component } from "react";
 import PropTypes from "prop-types";
 import { FastField, Field, getIn } from "formik";
 import { Form } from "semantic-ui-react";

src/lib/forms/ErrorLabel.js

@@ -8,7 +8,7 @@
 import { Field } from "formik";
 import _get from "lodash/get";
 import PropTypes from "prop-types";
-import React, { Component } from "react";
+import { Component } from "react";
 import { Label } from "semantic-ui-react";
 
 export class ErrorLabel extends Component {