@sis-cc/dotstatsuite-visions 11.4.2 → 12.0.0

package/es/ToggleButton/ToggleButton.js

@@ -2,10 +2,10 @@ import React from 'react';
 import * as R from 'ramda';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { makeStyles } from '@material-ui/core/styles';
-import Button from '@material-ui/core/Button';
-import ArrowUp from '@material-ui/icons/KeyboardArrowUp';
-import ArrowDown from '@material-ui/icons/KeyboardArrowDown';
+import makeStyles from '@mui/styles/makeStyles';
+import Button from '@mui/material/Button';
+import ArrowUp from '@mui/icons-material/KeyboardArrowUp';
+import ArrowDown from '@mui/icons-material/KeyboardArrowDown';
 
 var useStyles = makeStyles(function (theme) {
   var color1 = R.path(['palette', 'highlight', 'hl1'], theme) || theme.palette.primary.dark;

package/es/ToggleButton/index.js

@@ -1,50 +1,50 @@
-/**
- * Button use api of material ui https://material-ui.com/api/button/
- *
- * textTransform: 'none' | 'capitalize' | 'uppercase' | 'lowercase'
- *
- * @memberOf VISIONS
- * @name ToggleButton
- * @tag component
- * @api public
- * @props
- * ToggleButton.PropTypes = {
- *   tabindex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
- *   testId: PropTypes.string,
- *   isOpen: PropTypes.bool,
- *   label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
- *   toggle: PropTypes.func,
- *   textTransform: PropTypes.string,
- * };
- *
- * @theme
- * // set toggleButton mixins to null if you wish auto contrasted text
- * {
- *   palette: {
- *     button: {
- *       mainOpacity: // background color of button
- *     },
- *     highlight: {
- *       hl1: // background color hover and selected of button. globale override: outerPalette.highlight1
- *     }
- *     primary: {
- *       main: // used if mainOpacity is null. global override: outerPalette.primaryMain
- *       dark: // used if hl1 is null. globale override: outerPalette.primaryDark
- *     }
- *   },
- *   mixins: {
- *     toggleButton: {
- *       selected: {
- *         color: outerPalette.textDark
- *       },
- *       hover: {
- *         color: outerPalette.textDark
- *       }
- *     }
- *   }
- * }
- * @testId
- * root: [testId]
+/**
+ * Button use api of material ui https://material-ui.com/api/button/
+ *
+ * textTransform: 'none' | 'capitalize' | 'uppercase' | 'lowercase'
+ *
+ * @memberOf VISIONS
+ * @name ToggleButton
+ * @tag component
+ * @api public
+ * @props
+ * ToggleButton.PropTypes = {
+ *   tabindex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+ *   testId: PropTypes.string,
+ *   isOpen: PropTypes.bool,
+ *   label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+ *   toggle: PropTypes.func,
+ *   textTransform: PropTypes.string,
+ * };
+ *
+ * @theme
+ * // set toggleButton mixins to null if you wish auto contrasted text
+ * {
+ *   palette: {
+ *     button: {
+ *       mainOpacity: // background color of button
+ *     },
+ *     highlight: {
+ *       hl1: // background color hover and selected of button. globale override: outerPalette.highlight1
+ *     }
+ *     primary: {
+ *       main: // used if mainOpacity is null. global override: outerPalette.primaryMain
+ *       dark: // used if hl1 is null. globale override: outerPalette.primaryDark
+ *     }
+ *   },
+ *   mixins: {
+ *     toggleButton: {
+ *       selected: {
+ *         color: outerPalette.textDark
+ *       },
+ *       hover: {
+ *         color: outerPalette.textDark
+ *       }
+ *     }
+ *   }
+ * }
+ * @testId
+ * root: [testId]
  */
 
 export { default } from './ToggleButton';

package/es/Tooltip/Tooltip.js

@@ -6,8 +6,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import * as R from 'ramda';
 import cx from 'classnames';
-import { makeStyles } from '@material-ui/core/styles';
-import Tooltip from '@material-ui/core/Tooltip';
+import makeStyles from '@mui/styles/makeStyles';
+import Tooltip from '@mui/material/Tooltip';
 
 var useStyles = makeStyles(function (theme) {
   return {
@@ -49,11 +49,9 @@ var CustomTooltip = function CustomTooltip(_ref) {
 
   var classes = useStyles();
   return React.createElement(
-    Tooltip
-    // open={true}
-    // interactive={true}
-    ,
-    _extends({ enterNextDelay: 100,
+    Tooltip,
+    _extends({
+      enterNextDelay: 100,
       classes: {
         popper: classes.popper,
         tooltip: cx(R.prop(variant + 'Tooltip')(classes), classes.tooltip)

package/es/Tooltip/index.js

@@ -1,36 +1,36 @@
-/**
- * Tooltip is component based on material ui https://material-ui.com/components/tooltips/.
- * this tooltip has onready integrate favorite style.
- * the tooltip will be placed on free space left, right, top or bottom
- * It has two color "light" and "dark"
- *
- * @memberOf VISIONS
- * @name Tooltip
- * @tag component
- * @api public
- * @props
- * Tooltip.propTypes = {
- *   variant: PropTypes.string,
- *   children: PropTypes.oneOfType([
- *     PropTypes.arrayOf(PropTypes.node),
- *     PropTypes.node
- *   ])
- * }
- * @theme
- * {
- *   palette: {
- *     warning: {
- *       main: // warning variant
- *     },
- *     common: {
- *       white: // light variant
- *       black: // dark variant
- *     },
- *     primary: {
- *       light: // link color. globale override: outerPalette.primaryLight
- *     }
- *   }
- * }
+/**
+ * Tooltip is component based on material ui https://material-ui.com/components/tooltips/.
+ * this tooltip has onready integrate favorite style.
+ * the tooltip will be placed on free space left, right, top or bottom
+ * It has two color "light" and "dark"
+ *
+ * @memberOf VISIONS
+ * @name Tooltip
+ * @tag component
+ * @api public
+ * @props
+ * Tooltip.propTypes = {
+ *   variant: PropTypes.string,
+ *   children: PropTypes.oneOfType([
+ *     PropTypes.arrayOf(PropTypes.node),
+ *     PropTypes.node
+ *   ])
+ * }
+ * @theme
+ * {
+ *   palette: {
+ *     warning: {
+ *       main: // warning variant
+ *     },
+ *     common: {
+ *       white: // light variant
+ *       black: // dark variant
+ *     },
+ *     primary: {
+ *       light: // link color. globale override: outerPalette.primaryLight
+ *     }
+ *   }
+ * }
  */
 
 export { default } from './Tooltip';

package/es/UserRightForm/Input.js

@@ -4,11 +4,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import * as R from 'ramda';
 import cx from 'classnames';
-import { makeStyles } from '@material-ui/core/styles';
-import TextField from '@material-ui/core/TextField';
-import InputAdornment from '@material-ui/core/InputAdornment';
-import IconButton from '@material-ui/core/IconButton';
-import Done from '@material-ui/icons/Done';
+import makeStyles from '@mui/styles/makeStyles';
+import TextField from '@mui/material/TextField';
+import InputAdornment from '@mui/material/InputAdornment';
+import IconButton from '@mui/material/IconButton';
+import Done from '@mui/icons-material/Done';
 import { withInput } from '../Input/with-input';
 
 var useStyles = makeStyles(function () {
@@ -36,7 +36,7 @@ var RightIcon = function RightIcon(_ref2) {
     IconButton,
     { color: 'primary', onClick: function onClick() {
         return onSubmit();
-      } },
+      }, size: 'large' },
     React.createElement(Icon, null)
   );
 };

package/es/UserRightForm/Permissions.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import Checkbox from '@material-ui/core/Checkbox';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import { Grid, Typography } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import Checkbox from '@mui/material/Checkbox';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import { Grid, Typography } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
 import * as R from 'ramda';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
@@ -11,7 +11,7 @@ var useStyles = makeStyles(function (theme) {
   var _hideContent;
 
   return {
-    hideContent: (_hideContent = {}, _hideContent[theme.breakpoints.down('sm')] = {
+    hideContent: (_hideContent = {}, _hideContent[theme.breakpoints.down('md')] = {
       display: 'none'
     }, _hideContent),
     contentLabel: {

package/es/UserRightForm/PermsissionsTabs.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { Box, Grid, Tabs, Tab, Typography } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import { Box, Grid, Tabs, Tab, Typography } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
 import * as R from 'ramda';
 import Permissions from './Permissions';
 

package/es/UserRightForm/UserRightForm.js

@@ -3,8 +3,8 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import * as R from 'ramda';
-import { Grid, Typography } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import { Grid, Typography } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
 import Input from './Input';
 import Button from '../Button';
 import Select from '../Select';
@@ -361,7 +361,6 @@ var UserRightForm = function UserRightForm(_ref) {
             type: 'submit',
             disabled: false,
             variant: 'contained',
-            color: 'default',
             alternative: 'siscc',
             onClick: handleCancel,
             size: 'medium',

package/es/VerticalButton/VerticalButton.js

@@ -4,14 +4,17 @@ function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in ob
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import withStyles from '@mui/styles/withStyles';
 import Button from '../Button';
-import CircularProgress from '@material-ui/core/CircularProgress';
+import CircularProgress from '@mui/material/CircularProgress';
 
 var styles = function styles() {
   return {
     root: {
-      minWidth: 64
+      minWidth: 64,
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center'
     },
     startIcon: {
       margin: 0
@@ -38,8 +41,7 @@ var VerticalButton = React.forwardRef(function (_ref, ref) {
     _extends({
       classes: {
         root: classes.root,
-        startIcon: classes.startIcon,
-        label: classes.label
+        startIcon: classes.startIcon
       },
       selected: selected,
       startIcon: loading ? React.createElement(CircularProgress, { size: sizeLoading }) : startIcon,

package/es/VirtualizedTree/Item.js

@@ -3,14 +3,14 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
 import React from 'react';
 import * as R from 'ramda';
 import PropTypes from 'prop-types';
-import ListItem from '@material-ui/core/ListItem';
-import Typography from '@material-ui/core/Typography';
-import ListItemText from '@material-ui/core/ListItemText';
-import IconButton from '@material-ui/core/IconButton';
-import SvgIcon from '@material-ui/core/SvgIcon';
-import Icon from '@material-ui/core/SvgIcon';
-import CheckBoxIcon from '@material-ui/icons/CheckBoxOutlineBlankOutlined';
-import CheckedBoxIcon from '@material-ui/icons/CheckBoxOutlined';
+import ListItem from '@mui/material/ListItem';
+import Typography from '@mui/material/Typography';
+import ListItemText from '@mui/material/ListItemText';
+import IconButton from '@mui/material/IconButton';
+import SvgIcon from '@mui/material/SvgIcon';
+import Icon from '@mui/material/SvgIcon';
+import CheckBoxIcon from '@mui/icons-material/CheckBoxOutlineBlankOutlined';
+import CheckedBoxIcon from '@mui/icons-material/CheckBoxOutlined';
 import cx from 'classnames';
 import { Tooltip } from '../';
 import useKeyboardEscapeHandler from '../hooks/useKeybordEscapeHandler';
@@ -134,7 +134,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/es/VirtualizedTree/VirtualizedTree.js

@@ -5,10 +5,10 @@ import PropTypes from 'prop-types';
 import * as R from 'ramda';
 import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
 import VirtualizedList from 'react-virtualized/dist/commonjs/List';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import ExpandLessIcon from '@material-ui/icons/ExpandLess';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import Item from './Item';
-import { useTheme } from '@material-ui/core';
+import { useTheme } from '@mui/material';
 import { useStyles, height as rowHeight } from '../ScopeList/styles';
 import { getDepth, getHierarchicalId, isItemSelected as _isItemSelected, getDeprecatedIds, getDuplicates, getImposedItems } from './utils';
 import { getIsRtl } from '../utils';

package/es/theme.js

@@ -23,7 +23,7 @@ export var sisccTheme = function sisccTheme(_ref) {
 
   var buttonBaseFocus = {
     borderColor: outerPalette.highlight1 || innerPalette.highlight1,
-    '&:focus': {
+    '&.Mui-focused': {
       outlineColor: outerPalette.highlight1 || innerPalette.highlight1,
       outlineWidth: 1,
       outlineStyle: 'auto'
@@ -38,107 +38,132 @@ export var 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'