Update examples to React 18 API and fix a problem in the lib under React 18 (Merge PR #51)

Author: julienw

examples/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOMClient from 'react-dom/client';
 import { HashRouter as Router, Route, NavLink, Routes } from 'react-router-dom';
 
 import SimpleMenu from './SimpleMenu';
@@ -78,9 +78,9 @@ function App() {
     );
 }
 
-ReactDOM.render(
+const root = ReactDOMClient.createRoot(document.getElementById('main'));
+root.render(
     <Router>
         <App />
-    </Router>,
-    document.getElementById('main')
+    </Router>
 );

package.json

@@ -51,8 +51,8 @@
   },
   "peerDependencies": {
     "prop-types": "^15.0.0",
-    "react": "^0.14.0 || ^15.0.0 || ^16.0.1",
-    "react-dom": "^0.14.0 || ^15.0.0 || ^16.0.1"
+    "react": "^0.14.0 || ^15.0.0 || ^16.0.1 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^0.14.0 || ^15.0.0 || ^16.0.1 || ^17.0.0 || ^18.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.17.6",

src/ContextMenu.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import assign from 'object-assign';
@@ -9,6 +10,15 @@ import SubMenu from './SubMenu';
 import { hideMenu } from './actions';
 import { cssClasses, callIfExists, store } from './helpers';
 
+/* This is a backward-compatible shim for React < 18 */
+function flushSync(callback) {
+    if (ReactDOM.flushSync) {
+        ReactDOM.flushSync(callback);
+    } else {
+        callback();
+    }
+}
+
 export default class ContextMenu extends AbstractMenu {
     static propTypes = {
         id: PropTypes.string.isRequired,
@@ -124,7 +134,11 @@ export default class ContextMenu extends AbstractMenu {
     handleHide = (e) => {
         if (this.state.isVisible && (!e.detail || !e.detail.id || e.detail.id === this.props.id)) {
             this.unregisterHandlers();
-            this.setState({ isVisible: false, selectedItem: null, forceSubMenuOpen: false });
+            flushSync(() => {
+                /* We rely on being able to read this state change in handleShow,
+                 * so let's force a synchronous update in React 18. */
+                this.setState({ isVisible: false, selectedItem: null, forceSubMenuOpen: false });
+            });
             callIfExists(this.props.onHide, e);
         }
     };