argous 1.2.247 → 1.3.3

package/lib/components/ArgousComplexTableHead/ArgousComplexTableHead.js

@@ -1,18 +1,25 @@
 import { TableContext } from '../ArgousComplexTable/ArgousComplexTable';
-import { TableHead, TableRow, Checkbox, TableCell, TableSortLabel, makeStyles, alpha } from '@material-ui/core';
-import clsx from 'clsx';
+import { TableHead, TableRow, Checkbox, TableCell, TableSortLabel, GlobalStyles } from '@mui/material';
+import { alpha } from '@mui/material/styles';
+import { clsx } from 'clsx';
 import { isArray } from 'lodash';
 import React, { useContext, memo, useMemo } from 'react';
 
-const useStyles = makeStyles(theme => ({
-  highlight: {
-    color: theme.palette.type === 'light' ? theme.palette.secondary.main : theme.palette.text.primary,
-    backgroundColor: alpha(theme.palette.secondary.main, theme.palette.action.selectedOpacity * 2)   
+const classes = {
+  highlight: 'argous-complex-table-head-highlight',
+  lighthighlight: 'argous-complex-table-head-light-highlight',
+  visuallyHidden: 'argous-complex-table-head-visually-hidden',
+};
+
+const tableHeadStyles = theme => ({
+  [`.${classes.highlight}`]: {
+    color: theme.palette.mode === 'light' ? theme.palette.secondary.main : theme.palette.text.primary,
+    backgroundColor: alpha(theme.palette.secondary.main, theme.palette.action.selectedOpacity * 2)
   },
-  lighthighlight: {
-    background: alpha(theme.palette.secondary.main, theme.palette.action.selectedOpacity)   
+  [`.${classes.lighthighlight}`]: {
+    background: alpha(theme.palette.secondary.main, theme.palette.action.selectedOpacity)
   },
-  visuallyHidden: {
+  [`.${classes.visuallyHidden}`]: {
     border: 0,
     clip: 'rect(0 0 0 0)',
     height: 1,
@@ -23,23 +30,22 @@ const useStyles = makeStyles(theme => ({
     top: 20,
     width: 1,
   }
-}));
+});
 
-const ArgousComplexTableHead = memo(({ 
-  numSelected, 
-  rowCount, 
-  head, 
+const ArgousComplexTableHead = memo(({
+  numSelected,
+  rowCount,
+  head,
   enableCheck,
   disableCheckIf,
-  line, 
-  size, 
-  headerColumnStyles, 
+  line,
+  size,
+  headerColumnStyles,
   disableSorting,
   ordCols,
   cortaDados,
   enableDrag
 }) => {
-  const classes = useStyles();
   const { selected, order, orderBy, dispatch, lista, indexToSelect, method, externalCtrlPgn } = useContext(TableContext);
 
   const handleRequestSort = property => {
@@ -59,39 +65,42 @@ const ArgousComplexTableHead = memo(({
   };
 
   return (
-    <TableHead>
-      <TableRow className={clsx({ 
-        [classes.highlight]: (((numSelected === rowCount) || (numSelected === length) || (numSelected === lista?.length)) && (rowCount && length)), 
-        [classes.lighthighlight]: ((numSelected > 0) && ((method || externalCtrlPgn) ? (numSelected < lista?.length) : (numSelected < rowCount))) 
-      })}>
-        {enableDrag && <TableCell padding='checkbox'/>}
-        {enableCheck && <TableCell padding='checkbox'>
-          <Checkbox
-            disabled={!length}
-            indeterminate={(method || externalCtrlPgn) ? ((numSelected > 0) && (numSelected < lista?.length)) : ((numSelected > 0) && (numSelected < length))}
-            checked={(method || externalCtrlPgn) ? ((rowCount > 0) && ((numSelected === rowCount) || (numSelected === lista?.length))) : ((rowCount > 0) && length && (numSelected === length))}
-            onChange={handleSelectAllClick}
-          />
-        </TableCell>}
-        {isArray(head) && head.map((item, i) => (
-          <TableCell key={i} style={headerColumnStyles ? headerColumnStyles[i] : undefined}>
-            {(disableSorting[i] || (ordCols && !ordCols[i])) ? 
-              item 
-              : 
-              <TableSortLabel
-                active={orderBy === i}
-                direction={orderBy === i ? order : 'asc'}
-                onClick={() => handleRequestSort(i)}
-              >{item}{orderBy === i ? (
-                  <span className={classes.visuallyHidden}>
-                    {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
-                  </span>
-                ) : null}
-              </TableSortLabel>}
-          </TableCell>
-        ))}
-      </TableRow>
-    </TableHead>
+    <>
+      <GlobalStyles styles={tableHeadStyles} />
+      <TableHead>
+        <TableRow className={clsx({
+          [classes.highlight]: (((numSelected === rowCount) || (numSelected === length) || (numSelected === lista?.length)) && (rowCount && length)),
+          [classes.lighthighlight]: ((numSelected > 0) && ((method || externalCtrlPgn) ? (numSelected < lista?.length) : (numSelected < rowCount)))
+        })}>
+          {enableDrag && <TableCell padding='checkbox'/>}
+          {enableCheck && <TableCell padding='checkbox'>
+            <Checkbox
+              disabled={!length}
+              indeterminate={(method || externalCtrlPgn) ? ((numSelected > 0) && (numSelected < lista?.length)) : ((numSelected > 0) && (numSelected < length))}
+              checked={(method || externalCtrlPgn) ? ((rowCount > 0) && ((numSelected === rowCount) || (numSelected === lista?.length))) : ((rowCount > 0) && length && (numSelected === length))}
+              onChange={handleSelectAllClick}
+            />
+          </TableCell>}
+          {isArray(head) && head.map((item, i) => (
+            <TableCell key={i} style={headerColumnStyles ? headerColumnStyles[i] : undefined}>
+              {(disableSorting[i] || (ordCols && !ordCols[i])) ?
+                item
+                :
+                <TableSortLabel
+                  active={orderBy === i}
+                  direction={orderBy === i ? order : 'asc'}
+                  onClick={() => handleRequestSort(i)}
+                >{item}{orderBy === i ? (
+                    <span className={classes.visuallyHidden}>
+                      {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
+                    </span>
+                  ) : null}
+                </TableSortLabel>}
+            </TableCell>
+          ))}
+        </TableRow>
+      </TableHead>
+    </>
   );
 });
 

package/lib/components/ArgousComplexTableToolbar/ArgousComplexTableToolBar.js

@@ -1,24 +1,31 @@
 import { TableContext } from '../ArgousComplexTable/ArgousComplexTable';
-import { Toolbar, Typography, Grid, TextField, IconButton, makeStyles, Tooltip, alpha } from '@material-ui/core';
-import clsx from 'clsx';
+import { Toolbar, Typography, Grid, TextField, IconButton, Tooltip, GlobalStyles } from '@mui/material';
+import { alpha } from '@mui/material/styles';
+import { clsx } from 'clsx';
 import { isArray } from 'lodash';
 import React, { useContext, useRef, memo } from 'react';
 
-const useStyles = makeStyles(theme => ({
-  toolbar: {
+const classes = {
+  toolbar: 'argous-complex-table-toolbar-toolbar',
+  highlight: 'argous-complex-table-toolbar-highlight',
+  title: 'argous-complex-table-toolbar-title',
+};
+
+const toolbarStyles = theme => ({
+  [`.${classes.toolbar}`]: {
     minHeight: 0,
     paddingLeft: theme.spacing(2),
     paddingRight: theme.spacing(1),
   },
-  highlight: {
-    color: theme.palette.type === 'light' ? theme.palette.secondary.main : theme.palette.text.primary,
+  [`.${classes.highlight}`]: {
+    color: theme.palette.mode === 'light' ? theme.palette.secondary.main : theme.palette.text.primary,
     backgroundColor: alpha(theme.palette.secondary.main, theme.palette.action.selectedOpacity * 2)
   },
-  title: {
+  [`.${classes.title}`]: {
     flex: '1 1 100%',
     lineHeight: '50px'
   }
-}));
+});
 
 const ArgousComplexTableToolBar = memo(({
   numSelected, 
@@ -29,7 +36,6 @@ const ArgousComplexTableToolBar = memo(({
   lista, 
   indexToSelect,
   fixedToolbar }) => {
-  const classes = useStyles();
   const { selected, dispatch } = useContext(TableContext);
 
   const filterTime = useRef();
@@ -44,13 +50,16 @@ const ArgousComplexTableToolBar = memo(({
 
   return (
     <Toolbar className={clsx(classes.toolbar, { [classes.highlight]: numSelected > 0 })}>
+      <GlobalStyles styles={toolbarStyles} />
       {numSelected > 0 ? (
-        <Typography className={classes.title} color='inherit' variant='subtitle1' component='div'>
+        <Typography className={classes.title} variant='subtitle1' component='div' sx={{
+          color: 'inherit'
+        }}>
           {numSelected} {numSelected === 1 ? 'selecionado' : 'selecionados'}
         </Typography>
       ) : <Grid container spacing={2} style={{ marginRight: 0 }}>
-        {title && <Grid item xs style={{ display: 'flex', alignItems: 'center' }}><Typography className={classes.title} variant='h6' component='div'>{title}</Typography></Grid>}
-        {!disableFilter && <Grid item xs><TextField label={filterLabel} fullWidth margin='dense' variant='outlined' onChange={handleChange}/></Grid>}
+        {title && <Grid style={{ display: 'flex', alignItems: 'center' }} size='grow'><Typography className={classes.title} variant='h6' component='div'>{title}</Typography></Grid>}
+        {!disableFilter && <Grid size='grow'><TextField label={filterLabel} fullWidth margin='dense' variant='outlined' onChange={handleChange}/></Grid>}
       </Grid>}
       {(fixedToolbar || numSelected > 0) && isArray(actions) && actions.map((action, i) => (
         <Tooltip key={i} title={action[0]}>

package/lib/components/ArgousInput/ArgousInput.js

@@ -1,7 +1,7 @@
 import { createField, getField } from '../../fieldsRedux';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import MaskedInput from 'react-maskedinput';
+import MaskedInput from '@mona-health/react-input-mask';
 
 /**
  * @deprecated 
@@ -442,7 +442,7 @@ class ArgousInput extends Component {
         <label style={this.styleLabel}
         >{label}</label>
         <div style={this.styleDiv2}>
-          <MaskedInput mask={mask} style={this.styleInput} {...this.props} />
+          <MaskedInput mask={mask.replaceAll('1', '9').replaceAll('#', '*')} style={this.styleInput} {...this.props} />
           <fieldset style={this.stylefieldset}>
             <legend style={this.styleLegend}>
               <span style={this.styleSpan}></span>

package/lib/components/ArgousPagination/ArgousPagination.js

@@ -1,4 +1,4 @@
-import { Select, MenuItem, InputBase, Box, Toolbar, Typography, IconButton } from '@material-ui/core';
+import { Select, MenuItem, InputBase, Box, Toolbar, Typography, IconButton } from '@mui/material';
 import React from 'react';
 import { MdKeyboardArrowLeft, MdKeyboardArrowRight } from 'react-icons/md';
 
@@ -12,7 +12,9 @@ const ArgousPagination = (props) => {
   return (
     <Toolbar style={{ minHeight: 52, paddingRight: 2 }}>
       <div style={{ flex: '1 1 100%' }}/>
-      <Typography color='inherit' variant='body2' style={{ flexShrink: 0 }}>Linhas</Typography>
+      <Typography variant='body2' style={{ flexShrink: 0 }} sx={{
+        color: 'inherit'
+      }}>Linhas</Typography>
       {value && (
         <Select
           input={<InputBase style={{ marginRight: 32, marginLeft: 8, color: 'inherit', fontSize: 'inherit', flexShrink: 0, }} />}
@@ -22,8 +24,14 @@ const ArgousPagination = (props) => {
           })}
         </Select>
       )}
-      <Typography color='inherit' variant='body2' component='div' style={{ flexShrink: 0 }}>
-        <Box padding='1px 0px' display='inline'>
+      <Typography variant='body2' component='div' style={{ flexShrink: 0 }} sx={{
+        color: 'inherit'
+      }}>
+        <Box
+          sx={{
+            padding: '1px 0px',
+            display: 'inline'
+          }}>
           <InputBase style={{ width: 40 }} inputProps={{ value: props.ctrlPgnReturn.pgAtl }} onBlur={e => props.onChangePageNumber(e.target.value) }/>
           {` / ${props.ctrlPgnReturn.qtPaginas}`}
         </Box>

package/lib/components/ArgousProgressBar/ArgousProgressBar.js

@@ -1,52 +1,71 @@
-import { Grid, makeStyles, Collapse, Grow, useTheme } from '@material-ui/core';
+import { Box, Grid, Collapse, Grow, useTheme } from '@mui/material';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-const useStyles = makeStyles(theme => ({
-  progressContainer: {
-    '& > div': {
-      padding: '0px !important'
-    }
-  },
-  progressBorder: {
-    border: props => `3px solid ${props.borderColor || props.preset.borderColor}`,
+const selectPreset = (preset, palette) => {
+  switch (preset) {
+    case 'secondary':
+      return { fullBarColor: palette.secondary.dark, borderColor: palette.secondary.dark, indicatorColor: palette.secondary.dark, barColor: `linear-gradient(90deg, ${palette.secondary.light} 0%, ${palette.secondary.main} 50%, ${palette.secondary.dark} 100%)` };
+    case 'success':
+      return { fullBarColor: palette.success.dark, borderColor: palette.success.dark, indicatorColor: palette.success.dark, barColor: `linear-gradient(90deg, ${palette.success.light} 0%, ${palette.success.main} 50%, ${palette.success.dark} 100%)` };
+    case 'info':
+      return { fullBarColor: palette.info.dark, borderColor: palette.info.dark, indicatorColor: palette.info.dark, barColor: `linear-gradient(90deg, ${palette.info.light} 0%, ${palette.info.main} 50%, ${palette.info.dark} 100%)` };
+    case 'warning':
+      return { fullBarColor: palette.warning.dark, borderColor: palette.warning.dark, indicatorColor: palette.warning.dark, barColor: `linear-gradient(90deg, ${palette.warning.light} 0%, ${palette.warning.main} 50%, ${palette.warning.dark} 100%)` };
+    case 'danger':
+      return { fullBarColor: palette.error.dark, borderColor: palette.error.dark, indicatorColor: palette.error.dark, barColor: `linear-gradient(90deg, ${palette.error.light} 0%, ${palette.error.main} 50%, ${palette.error.dark} 100%)` };
+    case 'hot':
+      return { fullBarColor: 'rgba(244,67,54,1)', borderColor: '#d84315', indicatorColor: '#f44336', barColor: 'linear-gradient(90deg, rgba(255,235,59,1) 0%, rgba(255,152,0,1) 50%, rgba(244,67,54,1) 100%)' };
+    case 'cold':
+      return { fullBarColor: '#673ab7', borderColor: '#5e35b1', indicatorColor: '#512da8', barColor: 'linear-gradient(90deg, #2196f3 0%, #3f51b5 50%, #673ab7 100%)' };
+    default:
+      return { fullBarColor: palette.primary.dark, borderColor: palette.primary.dark, indicatorColor: palette.primary.dark, barColor: `linear-gradient(90deg, ${palette.primary.light} 0%, ${palette.primary.main} 50%, ${palette.primary.dark} 100%)` };
+  }
+};
+
+export default function ProgressBar({ valueLabel, valueSuffix, maxValueSuffix, maxValueLabel, value, maxValue, rightIndicatorColor, topIndicatorColor, borderColor, barColor, fullBarColor, preset, compact, className }) {
+  const theme = useTheme();
+  const percnt = maxValue ? value * 100 / maxValue : 0;
+  const selectedPreset = selectPreset(preset, theme.palette);
+  const progressBorderSx = {
+    border: `3px solid ${borderColor || selectedPreset.borderColor}`,
     borderRadius: '15px',
-  },
-  progressBack: {
+  };
+  const progressBackSx = {
     height: '20px',
     padding: '2px',
     position: 'relative'
-  },
-  progressBar: {
+  };
+  const progressBarSx = {
     width: '100%',
     height: '100%',
     borderRadius: '10px',
-    background: props => props.percnt === 0 ? theme.palette.background.paper : props.percnt > 100 ? props.fullBarColor || props.preset.fullBarColor : props.barColor || props.preset.barColor,
-  },
-  progressCover: {
+    background: percnt === 0 ? theme.palette.background.paper : percnt > 100 ? fullBarColor || selectedPreset.fullBarColor : barColor || selectedPreset.barColor,
+  };
+  const progressCoverSx = {
     height: '100%',
     transition: '300ms',
-    background: props => props.percnt > 99 ? 'transparent' : theme.palette.background.paper,
+    background: percnt > 99 ? 'transparent' : theme.palette.background.paper,
     position: 'absolute',
     top: '0px',
     right: '0',
-    width: props => `${100 - props.percnt}%`,
+    width: `${100 - percnt}%`,
     minWidth: '5%',
     maxWidth: '95%',
-    borderRadius: '0px 10px 10px 0px;',
-  },
-  topIndicator: {
+    borderRadius: '0px 10px 10px 0px',
+  };
+  const topIndicatorSx = {
     zIndex: 1,
     transition: '300ms',
     display: 'block',
     position: 'relative',
     width: 'max-content',
     margin: '0 2px',
-    paddingLeft: props => props.percnt > 94 ? '94%' : props.percnt < 5 ? '0' : `${props.percnt}%`,
-    transform: props => props.percnt === 0 ? `translate(${props.compact ? '-25px, 1px' : '-10px, 0px'})` : props.percnt > 5 ? `translate(${props.compact ? '-30px, 1px' : '-15px, 0px'})` : '',
+    paddingLeft: percnt > 94 ? '94%' : percnt < 5 ? '0' : `${percnt}%`,
+    transform: percnt === 0 ? `translate(${compact ? '-25px, 1px' : '-10px, 0px'})` : percnt > 5 ? `translate(${compact ? '-30px, 1px' : '-15px, 0px'})` : '',
     '& p': {
       margin: '0 0 5px',
-      border: props => props.compact ? 0 : `2px solid ${props.topIndicatorColor || props.preset.indicatorColor}`,
+      border: compact ? 0 : `2px solid ${topIndicatorColor || selectedPreset.indicatorColor}`,
       padding: '0px 3px',
       borderRadius: '5px',
       minWidth: '25px',
@@ -62,20 +81,20 @@ const useStyles = makeStyles(theme => ({
       left: '0px',
       width: '0px',
       height: '0px',
-      borderTop: props => `5px solid ${props.topIndicatorColor || props.preset.indicatorColor}`,
+      borderTop: `5px solid ${topIndicatorColor || selectedPreset.indicatorColor}`,
       borderLeft: '10px solid transparent',
       borderRight: '10px solid transparent',
       display: 'block',
-      opacity: props => props.compact ? 0 : 1
+      opacity: compact ? 0 : 1
     },
-  },
-  rightIndicator: {
+  };
+  const rightIndicatorSx = {
     display: 'block',
     position: 'relative',
     width: 'max-content',
     '& p': {
       margin: '0 7px 0',
-      border: props => `2px solid ${props.rightIndicatorColor || props.preset.indicatorColor}`,
+      border: `2px solid ${rightIndicatorColor || selectedPreset.indicatorColor}`,
       padding: '0px 3px',
       borderRadius: '5px',
       minWidth: '25px',
@@ -92,62 +111,32 @@ const useStyles = makeStyles(theme => ({
       height: '0px',
       borderTop: '10px solid transparent',
       borderBottom: '10px solid transparent',
-      borderRight: props => `8px solid ${props.rightIndicatorColor || props.preset.indicatorColor}`,
+      borderRight: `8px solid ${rightIndicatorColor || selectedPreset.indicatorColor}`,
     },
-  },
-  collapse: {
-    height: props => props.compact ? '0px !important' : undefined
-  }
-}));
-
-const selectPreset = (preset, palette) => {
-  switch (preset) {
-    case 'secondary':
-      return { fullBarColor: palette.secondary.dark, borderColor: palette.secondary.dark, indicatorColor: palette.secondary.dark, barColor: `linear-gradient(90deg, ${palette.secondary.light} 0%, ${palette.secondary.main} 50%, ${palette.secondary.dark} 100%)` };
-    case 'success':
-      return { fullBarColor: palette.success.dark, borderColor: palette.success.dark, indicatorColor: palette.success.dark, barColor: `linear-gradient(90deg, ${palette.success.light} 0%, ${palette.success.main} 50%, ${palette.success.dark} 100%)` };
-    case 'info':
-      return { fullBarColor: palette.info.dark, borderColor: palette.info.dark, indicatorColor: palette.info.dark, barColor: `linear-gradient(90deg, ${palette.info.light} 0%, ${palette.info.main} 50%, ${palette.info.dark} 100%)` };
-    case 'warning':
-      return { fullBarColor: palette.warning.dark, borderColor: palette.warning.dark, indicatorColor: palette.warning.dark, barColor: `linear-gradient(90deg, ${palette.warning.light} 0%, ${palette.warning.main} 50%, ${palette.warning.dark} 100%)` };
-    case 'danger':
-      return { fullBarColor: palette.error.dark, borderColor: palette.error.dark, indicatorColor: palette.error.dark, barColor: `linear-gradient(90deg, ${palette.error.light} 0%, ${palette.error.main} 50%, ${palette.error.dark} 100%)` };
-    case 'hot':
-      return { fullBarColor: 'rgba(244,67,54,1)', borderColor: '#d84315', indicatorColor: '#f44336', barColor: 'linear-gradient(90deg, rgba(255,235,59,1) 0%, rgba(255,152,0,1) 50%, rgba(244,67,54,1) 100%)' };
-    case 'cold':
-      return { fullBarColor: '#673ab7', borderColor: '#5e35b1', indicatorColor: '#512da8', barColor: 'linear-gradient(90deg, #2196f3 0%, #3f51b5 50%, #673ab7 100%)' };
-    default:
-      return { fullBarColor: palette.primary.dark, borderColor: palette.primary.dark, indicatorColor: palette.primary.dark, barColor: `linear-gradient(90deg, ${palette.primary.light} 0%, ${palette.primary.main} 50%, ${palette.primary.dark} 100%)` };
-  }
-};
-
-export default function ProgressBar({ valueLabel, valueSuffix, maxValueSuffix, maxValueLabel, value, maxValue, rightIndicatorColor, topIndicatorColor, borderColor, barColor, fullBarColor, preset, compact, className }) {
-  const theme = useTheme();
-  const percnt = maxValue ? value * 100 / maxValue : 0;
-  const classes = useStyles({ percnt, rightIndicatorColor, topIndicatorColor, borderColor, barColor, fullBarColor, preset: selectPreset(preset, theme.palette), compact });
+  };
   return (
-    <Grid container spacing={2} className={`${classes.progressContainer} ${className}`} style={{ marginTop: compact ? '-10px' : undefined }}>
-      <Grid item xs={10} style={{ maxWidth: '80%', flexBasis: '80%' }}>
-        <Collapse in={value > 0} className={classes.collapse}>
-          <div className={classes.topIndicator}>
+    <Grid container spacing={2} className={className} sx={{ marginTop: compact ? '-10px' : undefined, '& > div': { padding: '0px !important' } }}>
+      <Grid style={{ maxWidth: '80%', flexBasis: '80%' }} size={10}>
+        <Collapse in={value > 0} sx={{ height: compact ? '0px !important' : undefined }}>
+          <Box sx={topIndicatorSx}>
             <p title={valueLabel || 'Minutos Realizados'}>{value}{valueSuffix}</p>
-          </div>
+          </Box>
         </Collapse>
       </Grid>
-      <Grid item xs={2} style={{ maxWidth: '20%', flexBasis: '20%' }}></Grid>
-      <Grid item xs={10} style={{ maxWidth: '80%', flexBasis: '80%' }}>
-        <div item title={`Porcentagem ${percnt.toFixed(2)}%`} className={classes.progressBorder}>
-          <div className={classes.progressBack}>
-            <div className={classes.progressBar}></div>
-            <div className={classes.progressCover}></div>
-          </div>
-        </div>
+      <Grid style={{ maxWidth: '20%', flexBasis: '20%' }} size={2}></Grid>
+      <Grid style={{ maxWidth: '80%', flexBasis: '80%' }} size={10}>
+        <Box title={`Porcentagem ${percnt.toFixed(2)}%`} sx={progressBorderSx}>
+          <Box sx={progressBackSx}>
+            <Box sx={progressBarSx}></Box>
+            <Box sx={progressCoverSx}></Box>
+          </Box>
+        </Box>
       </Grid>
-      <Grid item xs={2} style={{ maxWidth: '20%', flexBasis: '20%' }}>
+      <Grid style={{ maxWidth: '20%', flexBasis: '20%' }} size={2}>
         <Grow in={maxValue > 0}>
-          <div className={classes.rightIndicator}>
+          <Box sx={rightIndicatorSx}>
             <p title={maxValueLabel || 'Minutos Previstos'}>{maxValue}{maxValueSuffix}</p>
-          </div>
+          </Box>
         </Grow>
       </Grid>
     </Grid>
@@ -164,4 +153,4 @@ ProgressBar.propTypes = {
   fullBarColor: PropTypes.string,
   compact: PropTypes.bool,
   preset: PropTypes.oneOf(['default', 'primary', 'secondary', 'success', 'info', 'warning', 'danger', 'hot', 'cold'])
-};
+};

package/lib/components/ArgousSimpleTable/ArgousSimpleTable.js

@@ -1,12 +1,11 @@
 import AgPagination from '../ArgousPagination';
-import Paper from '@material-ui/core/Paper';
-import { makeStyles } from '@material-ui/core/styles';
-import Table from '@material-ui/core/Table';
-import TableBody from '@material-ui/core/TableBody';
-import TableCell from '@material-ui/core/TableCell';
-import TableContainer from '@material-ui/core/TableContainer';
-import TableHead from '@material-ui/core/TableHead';
-import TableRow from '@material-ui/core/TableRow';
+import Paper from '@mui/material/Paper';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
 import React, { useState, useEffect } from 'react';
 
 /**
@@ -14,19 +13,11 @@ import React, { useState, useEffect } from 'react';
  */
 const ArgousSimpleTable = (props) => {
 
-  const useStyles = makeStyles({
-    table: {
-      minWidth: 650,
-    },
-  });
-
   const [ctrlPgn, setCtrlPgn] = useState({ acao: '', pgAtl: 1, qtRegs: 0 });
   const [iniciado, setIniciado] = useState(false);
   const [tpOrdenacao, setTpOrdenacao] = useState({ tpOrdem: 'D' });
   const [listaChildrens, setListaChildrens] = useState([]);
 
-  const classes = useStyles();
-
   function getCellContent(vlr, line) {
 
     if (props.columnOptions) {
@@ -114,13 +105,16 @@ const ArgousSimpleTable = (props) => {
       setListaChildrens(listaFilhos());
       setIniciado(true);
     }
+    // Pagination changes intentionally drive this effect; including the legacy
+    // props object would retrigger it on every render.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [ctrlPgn]);
 
   return (
     <div>
       <TableContainer component={Paper}>
 
-        <Table className={classes.table} size='small' style={{ tableLayout: 'fixed', width: '100%' }}>
+        <Table size='small' sx={{ minWidth: 650 }} style={{ tableLayout: 'fixed', width: '100%' }}>
           <TableHead>
             <TableRow>
               {props.head.map((coluna, index) => {
@@ -238,4 +232,4 @@ const ArgousSimpleTable = (props) => {
   );
 };
 
-export default ArgousSimpleTable;
+export default ArgousSimpleTable;

package/lib/components/AutoComplete/AutoComplete.js

@@ -3,7 +3,6 @@ import { createField, getField, setField } from '../../fieldsRedux';
 import { serverAction } from '../../utils/api';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { Scrollbars } from 'react-custom-scrollbars';
 
 /**
  * @deprecated 
@@ -141,7 +140,7 @@ class AutoComplete extends Component {
               {typeMessage > -1 &&
 
                 <div className={dropdownClassName ? dropdownClassName : 'argous-list-dropdown'} style={{ height: !showOnlyResults ? resultHeight : typeMessage === 0 ? resultHeight : 0, maxHeight: dropdownMaxHeight }}>
-                  <Scrollbars>
+                  <div style={{ height: '100%', overflowY: 'auto' }}>
                     {typeMessage > 0 && !showOnlyResults && (
                       <div className='padding-top-sm padding-bottom-sm color999 text-center'>
                         {typeMessage === 1 && 'Escreva para começar a buscar'}
@@ -158,7 +157,7 @@ class AutoComplete extends Component {
                       onClick={this.selectResult}
                       className='reset-margin'
                     />
-                  </Scrollbars>
+                  </div>
                 </div>
               }
             </td>

package/lib/components/AutoCompleteFavorites/AutoCompleteFavorites.d.ts

@@ -1,8 +1,7 @@
-import { TextFieldProps } from '@material-ui/core';
-import { AutocompleteProps, AutocompleteChangeDetails } from '@material-ui/lab';
+import { TextFieldProps, AutocompleteProps, AutocompleteChangeDetails } from '@mui/material';
 import * as React from 'react';
 
-export interface AutoCompleteFavoritesProps extends Omit<AutocompleteProps<any, false, false, false>, 'getOptionLabel'>{
+export interface AutoCompleteFavoritesProps extends Omit<AutocompleteProps<any, false, false, false>, 'getOptionLabel' | 'onChange'>{
   /**
    * Valor do campo
    */
@@ -98,4 +97,4 @@ export interface AutoCompleteFavoritesProps extends Omit<AutocompleteProps<any,
 
 declare function AutoCompleteFavorites(props: AutoCompleteFavoritesProps): JSX.Element
 
-export default AutoCompleteFavorites;
+export default AutoCompleteFavorites;