@sis-cc/dotstatsuite-components 16.8.2 → 17.0.0

package/lib/app.js

@@ -4,7 +4,7 @@ var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
-var _reactDom = require('react-dom');
+var _client = require('react-dom/client');
 
 var _app = require('./viewer/src/app');
 
@@ -16,7 +16,9 @@ var _styles = require('@material-ui/core/styles');
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var theme = (0, _styles.createMuiTheme)((0, _dotstatsuiteVisions.sisccTheme)({ rtl: 'ltr' }));
+var theme = (0, _styles.createTheme)((0, _dotstatsuiteVisions.sisccTheme)({ rtl: 'ltr' }));
+var container = document.getElementById('root');
+var root = (0, _client.createRoot)(container);
 
 var App = function App() {
   return _react2.default.createElement(
@@ -26,4 +28,4 @@ var App = function App() {
   );
 };
 
-(0, _reactDom.render)(_react2.default.createElement(App, null), document.getElementById('root'));
+root.render(_react2.default.createElement(App, null));

package/lib/viewer/src/app.js

@@ -74,7 +74,7 @@ exports.default = function () {
       isRtl = _useState2[0],
       setRtl = _useState2[1];
 
-  var theme = (0, _styles.createMuiTheme)((0, _dotstatsuiteVisions.sisccTheme)({ rtl: isRtl ? 'rtl' : 'ltr' }));
+  var theme = (0, _styles.createTheme)((0, _dotstatsuiteVisions.sisccTheme)({ rtl: isRtl ? 'rtl' : 'ltr' }));
 
   var config = {
     logo: 'https://upload.wikimedia.org/wikipedia/en/thumb/0/0d/OECD_logo_new.svg/200px-OECD_logo_new.svg.png',

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sis-cc/dotstatsuite-components",
   "description": "Set components based on React.",
-  "version": "16.8.2",
+  "version": "17.0.0",
   "main": "lib/index.js",
   "author": "OECD",
   "license": "MIT",
@@ -13,10 +13,11 @@
   },
   "devDependencies": {
     "@blueprintjs/core": "^1.22.0",
-    "@material-ui/core": "^4.12.3",
+    "@material-ui/core": "^4",
     "@sis-cc/dotstatsuite-sdmxjs": "*",
     "@sis-cc/dotstatsuite-visions": "*",
-    "react": "^16.11.0",
+    "react": "^18",
+    "react-dom": "^18",
     "react-addons-css-transition-group": "^15.6.2",
     "react-helmet": "^5.2.1",
     "web-component-env": "^2.0.0"
@@ -31,13 +32,13 @@
     "numeral": "^2.0.6",
     "prop-types": "^15.6.2",
     "ramda": "^0.26.1",
-    "react-dom": "^16.5.2",
     "react-sizeme": "^2.3.6"
   },
   "peerDependencies": {
-    "@material-ui/core": "^4.x",
-    "@sis-cc/dotstatsuite-sdmxjs": "^8.x",
-    "@sis-cc/dotstatsuite-visions": "^7.x",
-    "react": "16.x"
+    "@material-ui/core": "^4",
+    "@sis-cc/dotstatsuite-sdmxjs": "^8",
+    "@sis-cc/dotstatsuite-visions": "^9",
+    "react": "^18",
+    "react-dom": "^18"
   }
 }

package/src/app.js

@@ -1,11 +1,13 @@
 import React from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import ViewerApp from './viewer/src/app';
 import { sisccTheme } from '@sis-cc/dotstatsuite-visions';
 import { ThemeProvider } from '@material-ui/core/styles';
-import { createMuiTheme } from '@material-ui/core/styles';
+import { createTheme } from '@material-ui/core/styles';
 
-const theme = createMuiTheme(sisccTheme({ rtl: 'ltr' }));
+const theme = createTheme(sisccTheme({ rtl: 'ltr' }));
+const container = document.getElementById('root');
+const root = createRoot(container);
 
 const App = () => (
   <ThemeProvider theme={theme}>
@@ -13,4 +15,4 @@ const App = () => (
   </ThemeProvider>
 );
 
-render(<App />, document.getElementById('root'));
+root.render(<App />);

package/src/viewer/src/app.js

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { Helmet } from 'react-helmet';
 import { Tab2, Tabs2, Intent, Icon, Tooltip, Position } from '@blueprintjs/core';
 import { ThemeProvider } from '@material-ui/core/styles';
-import { createMuiTheme } from '@material-ui/core/styles';
+import { createTheme } from '@material-ui/core/styles';
 import { sisccTheme } from '@sis-cc/dotstatsuite-visions';
 import UseCase1 from './app/use-case-1';
 import TableCase from './app/table';
@@ -23,7 +23,7 @@ const AppTab = ({ label, iconName }) => (
 export default () => {
   const [isRtl, setRtl] = useState(false);
 
-  const theme = createMuiTheme(sisccTheme({ rtl: isRtl ? 'rtl' : 'ltr' }));
+  const theme = createTheme(sisccTheme({ rtl: isRtl ? 'rtl' : 'ltr' }));
 
   const config = {
     logo: 'https://upload.wikimedia.org/wikipedia/en/thumb/0/0d/OECD_logo_new.svg/200px-OECD_logo_new.svg.png',