@sis-cc/dotstatsuite-components 17.32.0 → 18.0.0

package/lib/app.js

@@ -12,7 +12,7 @@ var _app2 = _interopRequireDefault(_app);
 
 var _dotstatsuiteVisions = require('@sis-cc/dotstatsuite-visions');
 
-var _styles = require('@material-ui/core/styles');
+var _styles = require('@mui/material/styles');
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -22,9 +22,13 @@ var root = (0, _client.createRoot)(container);
 
 var App = function App() {
   return _react2.default.createElement(
-    _styles.ThemeProvider,
-    { theme: theme },
-    _react2.default.createElement(_app2.default, null)
+    _styles.StyledEngineProvider,
+    { injectFirst: true },
+    _react2.default.createElement(
+      _styles.ThemeProvider,
+      { theme: theme },
+      _react2.default.createElement(_app2.default, null)
+    )
   );
 };
 

package/lib/viewer/src/app.js

@@ -16,7 +16,7 @@ var _reactHelmet = require('react-helmet');
 
 var _core = require('@blueprintjs/core');
 
-var _styles = require('@material-ui/core/styles');
+var _styles = require('@mui/material/styles');
 
 var _dotstatsuiteVisions = require('@sis-cc/dotstatsuite-visions');
 
@@ -152,26 +152,22 @@ exports.default = function () {
   return _react2.default.createElement(
     'div',
     { style: { padding: 10 } },
+    _react2.default.createElement(_reactHelmet.Helmet, { htmlAttributes: { dir: isRtl ? 'rtl' : 'ltr' } }),
     _react2.default.createElement(
-      _styles.ThemeProvider,
-      { theme: theme },
-      _react2.default.createElement(_reactHelmet.Helmet, { htmlAttributes: { dir: isRtl ? 'rtl' : 'ltr' } }),
-      _react2.default.createElement(
-        'button',
-        { onClick: function onClick() {
-            return setRtl(!isRtl);
-          } },
-        isRtl ? 'left to right' : 'right to left'
-      ),
-      _react2.default.createElement(
-        _core.Tabs2,
-        { renderActiveTabPanelOnly: false },
-        _react2.default.createElement(_core.Tab2, {
-          id: 'uc1',
-          title: _react2.default.createElement(AppTab, { label: 'full screen resizable chart', iconName: 'fullscreen' }),
-          panel: _react2.default.createElement(_useCase2.default, { isRtl: isRtl, config: config, style: style, options: options })
-        })
-      )
+      'button',
+      { onClick: function onClick() {
+          return setRtl(!isRtl);
+        } },
+      isRtl ? 'left to right' : 'right to left'
+    ),
+    _react2.default.createElement(
+      _core.Tabs2,
+      { renderActiveTabPanelOnly: false },
+      _react2.default.createElement(_core.Tab2, {
+        id: 'uc1',
+        title: _react2.default.createElement(AppTab, { label: 'full screen resizable chart', iconName: 'fullscreen' }),
+        panel: _react2.default.createElement(_useCase2.default, { isRtl: isRtl, config: config, style: style, options: options })
+      })
     )
   );
 };

package/lib/viewer/src/index.js

@@ -38,7 +38,7 @@ var _size2 = _interopRequireDefault(_size);
 
 var _dotstatsuiteVisions = require('@sis-cc/dotstatsuite-visions');
 
-var _styles = require('@material-ui/core/styles');
+var _styles = require('@mui/styles');
 
 var _options = require('./chartUtils/options');
 

package/lib/viewer/src/legends/AxisLegend.js

@@ -20,7 +20,9 @@ var _ramda = require('ramda');
 
 var R = _interopRequireWildcard(_ramda);
 
-var _styles = require('@material-ui/core/styles');
+var _makeStyles = require('@mui/styles/makeStyles');
+
+var _makeStyles2 = _interopRequireDefault(_makeStyles);
 
 var _constants = require('../../../rules/src/constants');
 
@@ -30,7 +32,7 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var useStyles = (0, _styles.makeStyles)(function (theme) {
+var useStyles = (0, _makeStyles2.default)(function (theme) {
   var legendFont = (0, _utils.getFontFromTheme)(['axisLegend'])(theme);
   return {
     xLegend: legendFont,

package/lib/viewer/src/legends/ChartLegends.js

@@ -20,7 +20,7 @@ var _dotstatsuiteD3Charts = require('@sis-cc/dotstatsuite-d3-charts');
 
 var _src = require('../../../bridge-d3-react/src');
 
-var _styles = require('@material-ui/core/styles');
+var _styles = require('@mui/material/styles');
 
 var _AxisLegend = require('./AxisLegend');
 

package/lib/viewer/src/legends/Legend.js

@@ -20,7 +20,9 @@ var _ramda = require('ramda');
 
 var R = _interopRequireWildcard(_ramda);
 
-var _styles = require('@material-ui/core/styles');
+var _makeStyles = require('@mui/styles/makeStyles');
+
+var _makeStyles2 = _interopRequireDefault(_makeStyles);
 
 var _utils = require('../utils');
 
@@ -28,7 +30,7 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var useStyles = (0, _styles.makeStyles)(function (theme) {
+var useStyles = (0, _makeStyles2.default)(function (theme) {
   return {
     legend: (0, _extends3.default)({}, (0, _utils.getFontFromTheme)(['chartLegend'])(theme), {
       display: 'flex',

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sis-cc/dotstatsuite-components",
   "description": "Set components based on React.",
-  "version": "17.32.0",
+  "version": "18.0.0",
   "main": "lib/index.js",
   "author": "OECD",
   "license": "MIT",
@@ -13,7 +13,8 @@
   },
   "devDependencies": {
     "@blueprintjs/core": "^1.22.0",
-    "@material-ui/core": "^4",
+    "@mui/material": "^5.16.5",
+    "@mui/styles": "^5.16.5",
     "@sis-cc/dotstatsuite-sdmxjs": "*",
     "@sis-cc/dotstatsuite-visions": "*",
     "react": "^18",
@@ -23,6 +24,11 @@
     "web-component-env": "^2.0.0"
   },
   "dependencies": {
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@mui/icons-material": "^5.16.5",
+    "@mui/material": "^5.16.5",
+    "@mui/styles": "^5.16.5",
     "@react-hook/size": "^2.1.1",
     "@sis-cc/dotstatsuite-d3-charts": "^8.3.0",
     "date-fns": "^1.30.1",
@@ -34,7 +40,8 @@
     "ramda": "^0.26.1"
   },
   "peerDependencies": {
-    "@material-ui/core": "^4",
+    "@mui/icons-material": "^5.16.5",
+    "@mui/material": "^5.16.5",
     "@sis-cc/dotstatsuite-sdmxjs": "^8",
     "@sis-cc/dotstatsuite-visions": "^9",
     "react": "^18",

package/src/app.js

@@ -2,17 +2,19 @@ import React from 'react';
 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 { createTheme } from '@material-ui/core/styles';
+import { ThemeProvider, StyledEngineProvider } from '@mui/material/styles';
+import { createTheme } from '@mui/material/styles';
 
 const theme = createTheme(sisccTheme({ rtl: 'ltr' }));
 const container = document.getElementById('root');
 const root = createRoot(container);
 
 const App = () => (
-  <ThemeProvider theme={theme}>
-    <ViewerApp />
-  </ThemeProvider>
+  <StyledEngineProvider injectFirst>
+    <ThemeProvider theme={theme}>
+      <ViewerApp />
+    </ThemeProvider>
+  </StyledEngineProvider>
 );
 
 root.render(<App />);

package/src/viewer/src/app.js

@@ -1,8 +1,8 @@
 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 { createTheme } from '@material-ui/core/styles';
+import { ThemeProvider, StyledEngineProvider } from '@mui/material/styles';
+import { createTheme } from '@mui/material/styles';
 import { sisccTheme } from '@sis-cc/dotstatsuite-visions';
 import UseCase1 from './app/use-case-1';
 import TableCase from './app/table';
@@ -100,18 +100,20 @@ export default () => {
 */
 
   return (
-    <div style={{padding: 10}}>
-      <ThemeProvider theme={theme}>
-        <Helmet htmlAttributes={{ dir: isRtl ? 'rtl' : 'ltr' }} />
-        <button onClick={() => setRtl(!isRtl)}>{isRtl ? 'left to right' : 'right to left'}</button>
-        <Tabs2 renderActiveTabPanelOnly={false}>
-          <Tab2
-            id="uc1"
-            title={<AppTab label="full screen resizable chart" iconName="fullscreen" />}
-            panel={<UseCase1 isRtl={isRtl} config={config} style={style} options={options} />}
-          />
-        </Tabs2>
-      </ThemeProvider>
+    <div style={{ padding: 10 }}>
+      {/* <StyledEngineProvider injectFirst>
+        <ThemeProvider theme={theme}> */}
+      <Helmet htmlAttributes={{ dir: isRtl ? 'rtl' : 'ltr' }} />
+      <button onClick={() => setRtl(!isRtl)}>{isRtl ? 'left to right' : 'right to left'}</button>
+      <Tabs2 renderActiveTabPanelOnly={false}>
+        <Tab2
+          id="uc1"
+          title={<AppTab label="full screen resizable chart" iconName="fullscreen" />}
+          panel={<UseCase1 isRtl={isRtl} config={config} style={style} options={options} />}
+        />
+      </Tabs2>
+      {/* </ThemeProvider>
+      </StyledEngineProvider> */}
     </div>
   );
 };

package/src/viewer/src/index.js

@@ -3,7 +3,7 @@ import * as R from 'ramda';
 import cx from 'classnames';
 import useSize from '@react-hook/size';
 import { Loading, NoData, TableHtml5 } from '@sis-cc/dotstatsuite-visions';
-import { useTheme, makeStyles } from '@material-ui/core/styles';
+import { makeStyles, useTheme } from '@mui/styles';
 import getChartOptions from './chartUtils/options';
 import Header from './header';
 import Chart from './chart';

package/src/viewer/src/legends/AxisLegend.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import * as R from 'ramda';
-import { makeStyles } from '@material-ui/core/styles';
+import makeStyles from '@mui/styles/makeStyles';
 import { SCATTER } from '../../../rules/src/constants';
 import { getFontFromTheme } from '../utils';
 

package/src/viewer/src/legends/ChartLegends.js

@@ -3,7 +3,7 @@ import * as R from 'ramda';
 import numeral from 'numeral';
 import { computeOptions } from '@sis-cc/dotstatsuite-d3-charts';
 import { ChoroplethLegend } from '../../../bridge-d3-react/src';
-import { useTheme } from '@material-ui/core/styles';
+import { useTheme } from '@mui/material/styles';
 import AxisLegend from './AxisLegend';
 import FocusLegend from './FocusLegend';
 import SeriesLegend from './SeriesLegend';

package/src/viewer/src/legends/Legend.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import * as R from 'ramda';
-import { makeStyles } from '@material-ui/core/styles';
+import makeStyles from '@mui/styles/makeStyles';
 import { getFontFromTheme } from '../utils';
 
 const useStyles = makeStyles(theme => ({