@sis-cc/dotstatsuite-visions 11.4.2 → 12.0.0

package/lib/UserRightForm/UserRightForm.js

@@ -16,9 +16,11 @@ var _ramda = require('ramda');
 
 var R = _interopRequireWildcard(_ramda);
 
-var _core = require('@material-ui/core');
+var _material = require('@mui/material');
 
-var _styles = require('@material-ui/core/styles');
+var _makeStyles = require('@mui/styles/makeStyles');
+
+var _makeStyles2 = _interopRequireDefault(_makeStyles);
 
 var _Input = require('./Input');
 
@@ -42,7 +44,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 {
     paper: {
       backgroundColor: theme.palette.background.paper,
@@ -187,24 +189,24 @@ var UserRightForm = function UserRightForm(_ref) {
   var isValid = isValidPermissions && isValidFields && (hasPermissionsSelectionChanged || hasFieldsChanged);
 
   return _react2.default.createElement(
-    _core.Grid,
+    _material.Grid,
     { container: true, className: classes.paper, 'data-testid': 'permission-test-id' },
     _react2.default.createElement(
-      _core.Grid,
+      _material.Grid,
       { item: true, container: true, xs: 12, md: 12, justifyContent: 'space-between' },
       _react2.default.createElement(
-        _core.Grid,
+        _material.Grid,
         { item: true, container: true, xs: 12, sm: 12, md: 6, 'flex-direction': 'column' },
         _react2.default.createElement(
-          _core.Grid,
+          _material.Grid,
           { item: true, container: true, xs: 12, alignItems: 'center' },
           _react2.default.createElement(
-            _core.Grid,
+            _material.Grid,
             { item: true, xs: 12, md: 5, style: { marginTop: '4px' } },
             _react2.default.createElement(_.Mode, { modes: modes, mode: mode, changeMode: onChange, isSmall: true })
           ),
           _react2.default.createElement(
-            _core.Grid,
+            _material.Grid,
             { item: true, xs: 12, md: 7 },
             _react2.default.createElement(_Input2.default, {
               variant: 'outlined',
@@ -221,19 +223,19 @@ var UserRightForm = function UserRightForm(_ref) {
           )
         ),
         _react2.default.createElement(
-          _core.Grid,
+          _material.Grid,
           { item: true, container: true, xs: 12, alignItems: 'center' },
           _react2.default.createElement(
-            _core.Grid,
+            _material.Grid,
             { item: true, xs: 12, md: 5 },
             _react2.default.createElement(
-              _core.Typography,
+              _material.Typography,
               { variant: 'h6', className: classes.contentLabel, style: { paddingTop: 8 } },
               R.prop('dataspace')(labels)
             )
           ),
           _react2.default.createElement(
-            _core.Grid,
+            _material.Grid,
             { item: true, xs: 12, md: 7 },
             _react2.default.createElement(_Select2.default, {
               value: R.defaultTo('*', dataspaceValue),
@@ -247,19 +249,19 @@ var UserRightForm = function UserRightForm(_ref) {
           )
         ),
         _react2.default.createElement(
-          _core.Grid,
+          _material.Grid,
           { item: true, container: true, xs: 12, alignItems: 'center' },
           _react2.default.createElement(
-            _core.Grid,
+            _material.Grid,
             { item: true, xs: 12, md: 5 },
             _react2.default.createElement(
-              _core.Typography,
+              _material.Typography,
               { variant: 'h6', className: classes.contentLabel, style: { paddingTop: 8 } },
               R.prop('artefactType')(labels)
             )
           ),
           _react2.default.createElement(
-            _core.Grid,
+            _material.Grid,
             { item: true, xs: 12, md: 7 },
             _react2.default.createElement(_Select2.default, {
               value: R.defaultTo('*', artefactTypeValue),
@@ -274,22 +276,22 @@ var UserRightForm = function UserRightForm(_ref) {
         )
       ),
       _react2.default.createElement(
-        _core.Grid,
+        _material.Grid,
         { item: true, container: true, xs: 12, sm: 12, md: 5, 'flex-direction': 'column' },
         _react2.default.createElement(
-          _core.Grid,
+          _material.Grid,
           { item: true, container: true, xs: 12, alignItems: 'center' },
           _react2.default.createElement(
-            _core.Grid,
+            _material.Grid,
             { item: true, xs: 12, md: 4 },
             _react2.default.createElement(
-              _core.Typography,
+              _material.Typography,
               { variant: 'h6', className: classes.contentLabel, style: { paddingTop: 8 } },
               R.prop('maintenanceAgencyID')(labels)
             )
           ),
           _react2.default.createElement(
-            _core.Grid,
+            _material.Grid,
             { item: true, xs: 12, md: 8 },
             _react2.default.createElement(_Input2.default, {
               variant: 'outlined',
@@ -308,19 +310,19 @@ var UserRightForm = function UserRightForm(_ref) {
           )
         ),
         _react2.default.createElement(
-          _core.Grid,
+          _material.Grid,
           { item: true, container: true, xs: 12, alignItems: 'center' },
           _react2.default.createElement(
-            _core.Grid,
+            _material.Grid,
             { item: true, xs: 12, md: 4 },
             _react2.default.createElement(
-              _core.Typography,
+              _material.Typography,
               { variant: 'h6', className: classes.contentLabel, style: { paddingTop: 8 } },
               R.prop('artefactID')(labels)
             )
           ),
           _react2.default.createElement(
-            _core.Grid,
+            _material.Grid,
             { item: true, xs: 12, md: 8 },
             _react2.default.createElement(_Input2.default, {
               variant: 'outlined',
@@ -337,19 +339,19 @@ var UserRightForm = function UserRightForm(_ref) {
           )
         ),
         _react2.default.createElement(
-          _core.Grid,
+          _material.Grid,
           { item: true, container: true, xs: 12, alignItems: 'center' },
           _react2.default.createElement(
-            _core.Grid,
+            _material.Grid,
             { item: true, xs: 12, md: 4 },
             _react2.default.createElement(
-              _core.Typography,
+              _material.Typography,
               { variant: 'h6', className: classes.contentLabel, style: { paddingTop: 8 } },
               R.prop('artefactVersion')(labels)
             )
           ),
           _react2.default.createElement(
-            _core.Grid,
+            _material.Grid,
             { item: true, xs: 12, md: 8 },
             _react2.default.createElement(_Input2.default, {
               variant: 'outlined',
@@ -370,7 +372,7 @@ var UserRightForm = function UserRightForm(_ref) {
       )
     ),
     _react2.default.createElement(
-      _core.Grid,
+      _material.Grid,
       { item: true, container: true },
       _react2.default.createElement(_PermsissionsTabs2.default, {
         data: evolvedPermissions,
@@ -380,10 +382,10 @@ var UserRightForm = function UserRightForm(_ref) {
       })
     ),
     _react2.default.createElement(
-      _core.Grid,
+      _material.Grid,
       { item: true, container: true, justifyContent: 'flex-end', alignItems: 'center' },
       _react2.default.createElement(
-        _core.Grid,
+        _material.Grid,
         { item: true },
         _react2.default.createElement(
           _Button2.default,
@@ -392,7 +394,6 @@ var UserRightForm = function UserRightForm(_ref) {
             type: 'submit',
             disabled: false,
             variant: 'contained',
-            color: 'default',
             alternative: 'siscc',
             onClick: handleCancel,
             size: 'medium',
@@ -402,7 +403,7 @@ var UserRightForm = function UserRightForm(_ref) {
         )
       ),
       R.is(Function, onSubmit) && _react2.default.createElement(
-        _core.Grid,
+        _material.Grid,
         { item: true },
         _react2.default.createElement(
           _Button2.default,

package/lib/VerticalButton/VerticalButton.js

@@ -12,13 +12,15 @@ var _propTypes = require('prop-types');
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _styles = require('@material-ui/core/styles');
+var _withStyles = require('@mui/styles/withStyles');
+
+var _withStyles2 = _interopRequireDefault(_withStyles);
 
 var _Button = require('../Button');
 
 var _Button2 = _interopRequireDefault(_Button);
 
-var _CircularProgress = require('@material-ui/core/CircularProgress');
+var _CircularProgress = require('@mui/material/CircularProgress');
 
 var _CircularProgress2 = _interopRequireDefault(_CircularProgress);
 
@@ -29,7 +31,10 @@ function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in ob
 var styles = function styles() {
   return {
     root: {
-      minWidth: 64
+      minWidth: 64,
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center'
     },
     startIcon: {
       margin: 0
@@ -56,8 +61,7 @@ var VerticalButton = _react2.default.forwardRef(function (_ref, ref) {
     _extends({
       classes: {
         root: classes.root,
-        startIcon: classes.startIcon,
-        label: classes.label
+        startIcon: classes.startIcon
       },
       selected: selected,
       startIcon: loading ? _react2.default.createElement(_CircularProgress2.default, { size: sizeLoading }) : startIcon,
@@ -80,5 +84,5 @@ VerticalButton.propTypes = {
   sizeLoading: _propTypes2.default.number
 };
 
-exports.default = (0, _styles.withStyles)(styles)(VerticalButton);
+exports.default = (0, _withStyles2.default)(styles)(VerticalButton);
 module.exports = exports['default'];

package/lib/VirtualizedTree/Item.js

@@ -16,31 +16,31 @@ var _propTypes = require('prop-types');
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _ListItem = require('@material-ui/core/ListItem');
+var _ListItem = require('@mui/material/ListItem');
 
 var _ListItem2 = _interopRequireDefault(_ListItem);
 
-var _Typography = require('@material-ui/core/Typography');
+var _Typography = require('@mui/material/Typography');
 
 var _Typography2 = _interopRequireDefault(_Typography);
 
-var _ListItemText = require('@material-ui/core/ListItemText');
+var _ListItemText = require('@mui/material/ListItemText');
 
 var _ListItemText2 = _interopRequireDefault(_ListItemText);
 
-var _IconButton = require('@material-ui/core/IconButton');
+var _IconButton = require('@mui/material/IconButton');
 
 var _IconButton2 = _interopRequireDefault(_IconButton);
 
-var _SvgIcon = require('@material-ui/core/SvgIcon');
+var _SvgIcon = require('@mui/material/SvgIcon');
 
 var _SvgIcon2 = _interopRequireDefault(_SvgIcon);
 
-var _CheckBoxOutlineBlankOutlined = require('@material-ui/icons/CheckBoxOutlineBlankOutlined');
+var _CheckBoxOutlineBlankOutlined = require('@mui/icons-material/CheckBoxOutlineBlankOutlined');
 
 var _CheckBoxOutlineBlankOutlined2 = _interopRequireDefault(_CheckBoxOutlineBlankOutlined);
 
-var _CheckBoxOutlined = require('@material-ui/icons/CheckBoxOutlined');
+var _CheckBoxOutlined = require('@mui/icons-material/CheckBoxOutlined');
 
 var _CheckBoxOutlined2 = _interopRequireDefault(_CheckBoxOutlined);
 
@@ -177,7 +177,7 @@ var Item = function Item(_ref) {
             'aria-label': description,
             'aria-hidden': false,
             placement: 'top',
-            interactive: Boolean(HTMLRenderer),
+            disableInteractive: Boolean(HTMLRenderer) === false,
             onOpen: function onOpen() {
               return setOpen(true);
             },

package/lib/VirtualizedTree/VirtualizedTree.js

@@ -25,11 +25,11 @@ var _List = require('react-virtualized/dist/commonjs/List');
 
 var _List2 = _interopRequireDefault(_List);
 
-var _ExpandMore = require('@material-ui/icons/ExpandMore');
+var _ExpandMore = require('@mui/icons-material/ExpandMore');
 
 var _ExpandMore2 = _interopRequireDefault(_ExpandMore);
 
-var _ExpandLess = require('@material-ui/icons/ExpandLess');
+var _ExpandLess = require('@mui/icons-material/ExpandLess');
 
 var _ExpandLess2 = _interopRequireDefault(_ExpandLess);
 
@@ -37,7 +37,7 @@ var _Item = require('./Item');
 
 var _Item2 = _interopRequireDefault(_Item);
 
-var _core = require('@material-ui/core');
+var _material = require('@mui/material');
 
 var _styles = require('../ScopeList/styles');
 
@@ -100,7 +100,7 @@ var VirtualizedTree = function VirtualizedTree(props) {
       _props$simpleSelectio = props.simpleSelectionMode,
       simpleSelectionMode = _props$simpleSelectio === undefined ? false : _props$simpleSelectio;
 
-  var theme = (0, _core.useTheme)();
+  var theme = (0, _material.useTheme)();
 
   var _useState = (0, _react.useState)(undefined),
       scrollTop = _useState[0],

package/lib/theme.js

@@ -26,7 +26,7 @@ var sisccTheme = exports.sisccTheme = function sisccTheme(_ref) {
 
   var buttonBaseFocus = {
     borderColor: outerPalette.highlight1 || innerPalette.highlight1,
-    '&:focus': {
+    '&.Mui-focused': {
       outlineColor: outerPalette.highlight1 || innerPalette.highlight1,
       outlineWidth: 1,
       outlineStyle: 'auto'
@@ -41,107 +41,132 @@ var sisccTheme = exports.sisccTheme = function sisccTheme(_ref) {
 
   return {
     direction: rtl,
-    props: {
+    components: {
       MuiButtonBase: {
-        disableRipple: true
+        defaultProps: {
+          disableRipple: true
+        },
+        styleOverrides: {
+          root: isA11y && buttonBaseFocus
+        }
       },
       MuiUseMediaQuery: {
-        noSsr: true
-      }
-    },
-    overrides: {
+        defaultProps: {
+          noSsr: true
+        }
+      },
       MuiCheckbox: {
-        root: {
-          color: outerPalette.primaryMain || innerPalette.primaryMain
-        },
-        colorSecondary: {
-          '&$checked': {
+        styleOverrides: {
+          root: {
             color: outerPalette.primaryMain || innerPalette.primaryMain
+          },
+          colorSecondary: {
+            '&$checked': {
+              color: outerPalette.primaryMain || innerPalette.primaryMain
+            }
           }
         }
       },
       MuiTableCell: {
-        head: {
-          lineHeight: 1.43
-        },
-        sizeSmall: {
-          '&:last-child': {
-            paddingRight: 9
+        styleOverrides: {
+          head: {
+            lineHeight: 1.43
+          },
+          sizeSmall: {
+            '&:last-child': {
+              paddingRight: 9
+            }
           }
         }
       },
-      MuiButtonBase: {
-        root: isA11y && buttonBaseFocus
-      },
       MuiAccordion: {
-        root: {
-          '&$expanded': {
-            margin: 0
+        styleOverrides: {
+          root: {
+            '&$expanded': {
+              margin: 0
+            }
           }
         }
       },
       MuiButton: {
-        root: {
-          textTransform: 'none'
-        },
-        textPrimary: {
-          '&:hover': {
-            backgroundColor: '' + (outerPalette.hover || innerPalette.hover)
+        styleOverrides: {
+          root: {
+            textTransform: 'none'
+          },
+          textPrimary: {
+            '&:hover': {
+              backgroundColor: '' + (outerPalette.hover || innerPalette.hover)
+            }
           }
         }
       },
       MuiMenuItem: {
-        root: {
-          color: outerPalette.primaryMain || innerPalette.primaryMain,
-          '&$selected': {
-            backgroundColor: outerPalette.hover || innerPalette.hover,
-            '&:hover': {
-              backgroundColor: outerPalette.selected || innerPalette.selected
+        styleOverrides: {
+          root: {
+            color: outerPalette.primaryMain || innerPalette.primaryMain,
+            '&$selected': {
+              backgroundColor: outerPalette.hover || innerPalette.hover,
+              '&:hover': {
+                backgroundColor: outerPalette.selected || innerPalette.selected
+              }
             }
           }
         }
       },
       MuiOutlinedInput: {
-        root: {
-          '&:focus': isA11y && focus
+        styleOverrides: {
+          root: {
+            '&.Mui-focused': isA11y && focus
+          }
         }
       },
       MuiTypography: {
-        root: {
-          '&:focus': isA11y && focus
+        styleOverrides: {
+          root: {
+            '&.Mui-focused': isA11y && focus
+          }
         }
       },
       MuiLink: {
-        root: {
-          color: outerPalette.primaryMain || innerPalette.primaryMain,
-          '&:hover': {
-            color: outerPalette.primaryLight || innerPalette.primaryLight
+        styleOverrides: {
+          root: {
+            color: outerPalette.primaryMain || innerPalette.primaryMain,
+            '&:hover': {
+              color: outerPalette.primaryLight || innerPalette.primaryLight
+            },
+            '&.Mui-focused': isA11y && focus
           },
-          '&:focus': isA11y && focus
-        },
-        button: {
-          '&:focus': isA11y && focus
+          button: {
+            '&.Mui-focused': isA11y && focus
+          }
         }
       },
       MuiAlert: {
-        filledSuccess: {
-          color: outerPalette.textDark || innerPalette.textDark
+        styleOverrides: {
+          filledSuccess: {
+            color: outerPalette.textDark || innerPalette.textDark
+          }
         }
       },
       MuiInputBase: {
-        root: {
-          fontSize: '1rem'
-        },
-        input: {
-          height: '1.25em'
+        styleOverrides: {
+          root: {
+            fontSize: '1rem'
+          },
+          input: {
+            height: '1.25em'
+          }
         }
       },
       MuiFormLabel: {
-        root: {
-          fontSize: '1rem'
+        styleOverrides: {
+          root: {
+            fontSize: '1rem'
+          }
         }
       }
     },
+
     palette: {
       background: {
         default: '#ffffff'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sis-cc/dotstatsuite-visions",
-  "version": "11.4.2",
+  "version": "12.0.0",
   "description": "Library of visual components",
   "author": "OECD",
   "homepage": "https://visions-qa.siscc.org/#o",
@@ -29,6 +29,11 @@
     "precommit": "lint-staged"
   },
   "dependencies": {
+    "@emotion/react": "^11.13.0",
+    "@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",
     "classnames": "^2.2.6",
     "date-fns": "^1.30.1",
@@ -42,8 +47,8 @@
     "react-virtualized": "^9.21.2"
   },
   "peerDependencies": {
-    "@material-ui/core": "^4",
-    "@material-ui/icons": "^4",
+    "@mui/icons-material": "^5.16.5",
+    "@mui/material": "^5.16.5",
     "@sis-cc/dotstatsuite-sdmxjs": "^8.x",
     "react": "^18",
     "react-dom": "^18"
@@ -52,8 +57,8 @@
     "@babel/eslint-parser": "^7.5.4",
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@cfaester/enzyme-adapter-react-18": "^0.7.0",
-    "@material-ui/core": "^4",
-    "@material-ui/icons": "^4",
+    "@mui/icons-material": "^5.16.5",
+    "@mui/material": "^5.16.5",
     "@sis-cc/dotstatsuite-sdmxjs": "*",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",