Bump to react 18 and move to mui

CHANGELOG.md

@@ -13,10 +13,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
--	[#275](https://github.com/equinor/webviz-core-components/pull/275) - Added `WebvizDialog` component. New dialog component which handles multiple instances simultaneously, where the currently active dialog is placed on top and highlighted with box shadow.
+-   [#275](https://github.com/equinor/webviz-core-components/pull/275) - Added `WebvizDialog` component. New dialog component which handles multiple instances simultaneously, where the currently active dialog is placed on top and highlighted with box shadow.
 
 ### Changed
 
+-   [#296](https://github.com/equinor/webviz-core-components/pull/296) - Add support for `React` `17` and `18`, switch to `@mui` version `5`.
+
 -   [#290](https://github.com/equinor/webviz-core-components/pull/290) - Updated various JavaScript dependencies.
 
 ## [0.6.1] - 2022-10-10

react/package.json

@@ -41,10 +41,10 @@
     "author": "Equinor <[email protected]>",
     "license": "MIT",
     "dependencies": {
+        "@emotion/react": "^11.11.1",
+        "@emotion/styled": "^11.11.0",
         "@equinor/eds-core-react": "^0.31.1",
         "@equinor/eds-icons": "^0.19.2",
-        "@material-ui/core": "^4.11.3",
-        "@material-ui/lab": "^4.0.0-alpha.57",
         "@react-hook/size": "^2.1.2",
         "animate.css": "^4.1.1",
         "classnames": "^2.3.2",
@@ -63,18 +63,19 @@
         "@babel/preset-env": "^7.13.12",
         "@babel/preset-react": "^7.12.13",
         "@babel/preset-typescript": "^7.13.0",
-        "@storybook/addon-actions": "^6.4.18",
-        "@storybook/addon-essentials": "^6.4.18",
-        "@storybook/addon-links": "^6.4.18",
-        "@storybook/builder-webpack5": "^6.4.18",
-        "@storybook/manager-webpack5": "^6.4.18",
-        "@storybook/react": "^6.4.18",
-        "@testing-library/react": "^12.1.2",
+        "@mui/material": "^5.13.7",
+        "@storybook/addon-actions": "^6.5.16",
+        "@storybook/addon-essentials": "^6.5.16",
+        "@storybook/addon-links": "^6.5.16",
+        "@storybook/builder-webpack5": "^6.5.16",
+        "@storybook/manager-webpack5": "^6.5.16",
+        "@storybook/react": "^6.5.16",
+        "@testing-library/react": "^14.0.0",
         "@testing-library/user-event": "^13.5.0",
         "@types/jest": "^26.0.23",
         "@types/lodash": "^4.14.176",
-        "@types/react": "^17.0.3",
-        "@types/react-dom": "^17.0.3",
+        "@types/react": "^18.2.19",
+        "@types/react-dom": "^18.2.7",
         "@types/reactour": "^1.18.2",
         "@types/uuid": "^8.3.2",
         "@typescript-eslint/eslint-plugin": "^5.61.0",
@@ -94,10 +95,9 @@
         "jest": "^26.6.3",
         "mini-css-extract-plugin": "^1.3.9",
         "prop-types": "^15.7.2",
-        "react": "^16.14.0",
+        "react": "^18.2.0",
         "react-docgen": "^5.3.1",
-        "react-dom": "^16.14.0",
-        "react-test-renderer": "^16.14.0",
+        "react-dom": "^18.2.0",
         "rimraf": "^2.7.1",
         "style-loader": "^2.0.0",
         "styled-jsx": "^5.1.0",
@@ -109,6 +109,11 @@
         "webpack-cli": "^4.5.0",
         "webpack-dev-server": "^4.11.0"
     },
+    "peerDependencies": {
+        "@mui/material": "^5.11.0",
+        "react": "^17.0.2 || ^18",
+        "react-dom": "^17.0.2 || ^18"
+    },
     "engines": {
         "node": ">=16",
         "npm": ">=7"

react/src/demo/App.tsx

@@ -6,7 +6,7 @@
  */
 
 /* eslint no-magic-numbers: 0 */
-import { Button } from "@material-ui/core";
+import { Button } from "@mui/material";
 import React from "react";
 
 import {

react/src/demo/index.tsx

@@ -5,9 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
+
 import App from "./App";
 
-ReactDOM.render(<App />, document.getElementById("root"));
+const container = document.getElementById("root");
+// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+const root = createRoot(container!);
+root.render(<App />);

react/src/lib/components/Dialog/Dialog.stories.tsx

@@ -6,7 +6,7 @@ import {
     DialogComponent as Dialog,
     DialogProps,
 } from "./components/DialogComponent";
-import { Button } from "@material-ui/core";
+import { Button } from "@mui/material";
 
 export default {
     title: "Components/Dialog",

react/src/lib/components/Dialog/components/DialogComponent.tsx

@@ -8,8 +8,8 @@ import {
     DialogContent,
     DialogTitle,
     IconButton,
-} from "@material-ui/core";
-import Paper from "@material-ui/core/Paper";
+} from "@mui/material";
+import Paper from "@mui/material/Paper";
 
 import { Icon } from "@equinor/eds-core-react";
 import { close } from "@equinor/eds-icons";

react/src/lib/components/Dialog/components/DraggablePaperComponent.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import Paper, { PaperProps } from "@material-ui/core/Paper";
+import Paper, { PaperProps } from "@mui/material/Paper";
 import Draggable from "react-draggable";
 
 export const DraggablePaperComponent: React.FC<PaperProps> = (props) => {

react/src/lib/components/EdsIcon/EdsIcon.tsx

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import * as edsIcons from "@equinor/eds-icons";
 import { IconData } from "@equinor/eds-icons";
 import { Icon } from "@equinor/eds-core-react";
-import { Tooltip } from "@material-ui/core";
+import { Tooltip } from "@mui/material";
 
 export type EdsIconProps = {
     id?: string;

react/src/lib/components/Menu/components/Icon/Icon.tsx

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import * as edsIcons from "@equinor/eds-icons";
 import { IconData } from "@equinor/eds-icons";
 import { Icon as EdsIcon } from "@equinor/eds-core-react";
-import { Tooltip } from "@material-ui/core";
+import { Tooltip } from "@mui/material";
 
 type IconProps = {
     icon: string;

react/src/lib/components/SmartNodeSelector/components/Suggestions.tsx

@@ -6,7 +6,8 @@
  */
 
 import React, { Component, Fragment, MouseEvent } from "react";
-import ReactDOM from "react-dom";
+import { Root, createRoot } from "react-dom/client";
+
 import classNames from "classnames";
 import PropTypes from "prop-types";
 
@@ -54,6 +55,7 @@ class Suggestions extends Component<SuggestionsProps> {
     private lastNodeSelection?: TreeNodeSelection;
     private positionRef: React.RefObject<HTMLDivElement>;
     private popup: HTMLDivElement | null;
+    private popupRoot: Root | null;
     private showingAllSuggestions: boolean;
 
     constructor(props: SuggestionsProps) {
@@ -70,6 +72,7 @@ class Suggestions extends Component<SuggestionsProps> {
         this.allOptions = [];
         this.positionRef = React.createRef();
         this.popup = null;
+        this.popupRoot = null;
         this.showingAllSuggestions = false;
 
         this.state = {
@@ -78,7 +81,8 @@ class Suggestions extends Component<SuggestionsProps> {
 
         if (this.props.treeNodeSelection) {
             this.allOptions = this.props.treeNodeSelection.getSuggestions();
-            this.currentNodeLevel = this.props.treeNodeSelection.getFocussedLevel();
+            this.currentNodeLevel =
+                this.props.treeNodeSelection.getFocussedLevel();
         }
     }
 
@@ -97,6 +101,7 @@ class Suggestions extends Component<SuggestionsProps> {
         window.addEventListener("scroll", () => this.renderPopup(), true);
 
         this.popup = document.createElement("div");
+        this.popupRoot = createRoot(this.popup);
         document.body.appendChild(this.popup);
     }
 
@@ -145,11 +150,8 @@ class Suggestions extends Component<SuggestionsProps> {
     }
 
     private maybeLoadNewOptions(): void {
-        const {
-            treeNodeSelection,
-            suggestionsRef,
-            showAllSuggestions,
-        } = this.props;
+        const { treeNodeSelection, suggestionsRef, showAllSuggestions } =
+            this.props;
         if (
             treeNodeSelection !== undefined &&
             (treeNodeSelection.getFocussedLevel() !== this.currentNodeLevel ||
@@ -160,9 +162,8 @@ class Suggestions extends Component<SuggestionsProps> {
                 this.props.showAllSuggestions !== this.showingAllSuggestions)
         ) {
             this.showingAllSuggestions = this.props.showAllSuggestions;
-            this.allOptions = treeNodeSelection.getSuggestions(
-                showAllSuggestions
-            );
+            this.allOptions =
+                treeNodeSelection.getSuggestions(showAllSuggestions);
             this.currentNodeLevel = treeNodeSelection.getFocussedLevel();
             this.lastNodeSelection = treeNodeSelection;
             this.currentNodeName = treeNodeSelection.getFocussedNodeName();
@@ -340,9 +341,8 @@ class Suggestions extends Component<SuggestionsProps> {
             "i"
         );
         const matchName = option.nodeName.match(regexName);
-        const matchDescription = option.metaData.description?.match(
-            regexDescription
-        );
+        const matchDescription =
+            option.metaData.description?.match(regexDescription);
 
         const matchedNodePart = matchName
             ? option.nodeName.substring(0, matchName[0].length)
@@ -396,12 +396,9 @@ class Suggestions extends Component<SuggestionsProps> {
 
     private createSuggestionsForCurrentTag(
         maxHeight: number
-    ): React.ReactFragment | null {
-        const {
-            treeNodeSelection,
-            enableInputBlur,
-            disableInputBlur,
-        } = this.props;
+    ): React.ReactNode | null {
+        const { treeNodeSelection, enableInputBlur, disableInputBlur } =
+            this.props;
         if (treeNodeSelection === undefined) return "";
         if (!treeNodeSelection.focussedNodeNameContainsWildcard()) {
             const options = this.allOptions.slice(
@@ -513,8 +510,9 @@ class Suggestions extends Component<SuggestionsProps> {
                   height: 0,
               };
 
-        ReactDOM.render(
+        const suggestion = (
             <div
+                id={"foo"}
                 ref={suggestionsRef}
                 className="Suggestions"
                 onScroll={(): void => this.handleOnScroll()}
@@ -539,9 +537,12 @@ class Suggestions extends Component<SuggestionsProps> {
                         height: lowerSpacerHeight + "px",
                     }}
                 ></div>
-            </div>,
-            this.popup
+            </div>
         );
+
+        if (this.popupRoot) {
+            this.popupRoot.render(suggestion);
+        }
     }
 
     render(): React.ReactNode {

react/src/lib/components/SmartNodeSelector/components/Tag.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { Component, ReactFragment } from "react";
+import React, { Component, ReactNode } from "react";
 import classNames from "classnames";
 import PropTypes from "prop-types";
 
@@ -130,8 +130,9 @@ export default class Tag extends Component<TagProps> {
             text = "";
         }
         span.classList.add("SmartNodeSelector__Ruler");
-        const input = (treeNodeSelection.getRef() as React.RefObject<HTMLInputElement>)
-            .current as HTMLInputElement;
+        const input = (
+            treeNodeSelection.getRef() as React.RefObject<HTMLInputElement>
+        ).current as HTMLInputElement;
         if (input) {
             const fontSize = window.getComputedStyle(input).fontSize;
             span.style.fontSize = fontSize;
@@ -171,7 +172,7 @@ export default class Tag extends Component<TagProps> {
     private createBrowseButtons(
         nodeSelection: TreeNodeSelection,
         index: number
-    ): ReactFragment | null {
+    ): ReactNode | null {
         const { currentTag } = this.props;
         if (
             ((nodeSelection.isValidUpToFocussedNode() && currentTag) ||
@@ -244,8 +245,9 @@ export default class Tag extends Component<TagProps> {
         e.preventDefault();
         e.stopPropagation();
         const { hideSuggestions, updateSelectedTagsAndNodes } = this.props;
-        const inputElement = (nodeSelection.getRef() as React.RefObject<HTMLInputElement>)
-            .current as HTMLInputElement;
+        const inputElement = (
+            nodeSelection.getRef() as React.RefObject<HTMLInputElement>
+        ).current as HTMLInputElement;
         const currentSelection = [
             inputElement.selectionStart,
             inputElement.selectionEnd,
@@ -308,10 +310,13 @@ export default class Tag extends Component<TagProps> {
     private createFocusOverlay(
         treeNodeSelection: TreeNodeSelection
     ): React.ReactNode | null {
-        const inputElement = (treeNodeSelection.getRef() as React.RefObject<HTMLInputElement>)
-            .current as HTMLInputElement;
+        const inputElement = (
+            treeNodeSelection.getRef() as React.RefObject<HTMLInputElement>
+        ).current as HTMLInputElement;
         if (inputElement) {
-            const inputContainerBoundingRect = (inputElement.parentElement as HTMLElement).getBoundingClientRect();
+            const inputContainerBoundingRect = (
+                inputElement.parentElement as HTMLElement
+            ).getBoundingClientRect();
             const inputBoundingRect = inputElement.getBoundingClientRect();
             let left = inputBoundingRect.left - inputContainerBoundingRect.left;
 
@@ -404,8 +409,9 @@ export default class Tag extends Component<TagProps> {
     }
 
     private handleClickEvent(e: React.MouseEvent<HTMLLIElement>): void {
-        const input = (this.props.treeNodeSelection.getRef() as React.RefObject<HTMLInputElement>)
-            .current as HTMLInputElement;
+        const input = (
+            this.props.treeNodeSelection.getRef() as React.RefObject<HTMLInputElement>
+        ).current as HTMLInputElement;
         if (input) {
             input.focus();
             e.preventDefault();

react/src/lib/components/WebvizDialog/WebvizDialog.stories.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
 
 import { WebvizDialog, WebvizDialogProps } from "./WebvizDialog";
-import { Button } from "@material-ui/core";
+import { Button } from "@mui/material";
 
 export default {
     title: "Components/WebvizDialog",

react/src/lib/components/WebvizDialog/components/WebvizDialogActions/WebvizDialogActions.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { Button } from "@material-ui/core";
+import { Button } from "@mui/material";
 
 import "./webviz-dialog-actions.css";
 

react/src/lib/components/WebvizDialog/components/WebvizDialogTitle/WebvizDialogTitle.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { IconButton } from "@material-ui/core";
+import { IconButton } from "@mui/material";
 
 import { Icon } from "@equinor/eds-core-react";
 import { close } from "@equinor/eds-icons";

react/src/lib/components/WebvizPluginTour/WebvizPluginTour.tsx

@@ -1,4 +1,4 @@
-import { Button, MobileStepper } from "@material-ui/core";
+import { Button, MobileStepper } from "@mui/material";
 import useSize from "@react-hook/size";
 import React from "react";
 import * as ReactDOM from "react-dom";

react/src/lib/components/WebvizPluginsWrapper/WebvizPluginsWrapper.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { useStore } from "../WebvizContentManager/WebvizContentManager";
-import { Snackbar, Slide } from "@material-ui/core";
+import { Snackbar, Slide } from "@mui/material";
 
 import "./webviz-plugins-wrapper.css";
 import PropTypes from "prop-types";

react/src/lib/components/WebvizPluginsWrapper/components/FullScreenMenu/full-screen-menu.tsx

@@ -1,4 +1,4 @@
-import { IconButton, Tooltip } from "@material-ui/core";
+import { IconButton, Tooltip } from "@mui/material";
 import * as edsIcons from "@equinor/eds-icons";
 import { IconData } from "@equinor/eds-icons";
 import { Icon } from "@equinor/eds-core-react";