argous 1.2.246 → 1.3.2

package/lib/components/ArgousComplexTableBody/ArgousComplexTableBody.js

@@ -1,32 +1,44 @@
 import { TableContext } from '../ArgousComplexTable/ArgousComplexTable';
-import { TableBody, TableRow, Checkbox, Collapse, TableCell, makeStyles, Typography, CircularProgress, alpha, Tooltip, IconButton } from '@material-ui/core';
-import clsx from 'clsx';
+import { TableBody, TableRow, Checkbox, Collapse, TableCell, Typography, CircularProgress, Tooltip, IconButton, GlobalStyles } from '@mui/material';
+import { alpha } from '@mui/material/styles';
+import { clsx } from 'clsx';
 import { isArray } from 'lodash';
 import React, { Fragment, useContext, memo } from 'react';
 import { MdDragHandle } from 'react-icons/md';
-import { Container, Draggable } from 'react-trello/dist/';
+import { Container, Draggable } from './DragAndDrop';
 
-const useStyles = makeStyles(theme => ({
-  dragHandle: {
+const classes = {
+  dragHandle: 'argous-complex-table-body-drag-handle',
+  hover: 'argous-complex-table-body-hover',
+  open: 'argous-complex-table-body-open',
+  semDados: 'argous-complex-table-body-sem-dados',
+  group: 'argous-complex-table-body-group',
+  loading: 'argous-complex-table-body-loading',
+  ghost: 'argous-complex-table-body-ghost',
+  tableCell: 'argous-complex-table-body-table-cell',
+};
+
+const tableBodyStyles = theme => ({
+  [`.${classes.dragHandle}`]: {
     cursor: 'n-resize'
   },
-  hover: {
+  [`.${classes.hover}`]: {
     '&:hover': {
       backgroundColor: alpha(theme.palette.secondary.main, theme.palette.action.selectedOpacity * 2)
     }
   },
-  open: {
+  [`.${classes.open}`]: {
     backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
     '&:hover': {
       backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity * 2),
     }
   },
-  semDados: {
+  [`.${classes.semDados}`]: {
     padding: theme.spacing(1),
     paddingLeft: theme.spacing(2),
     fontSize: '1rem',
   },
-  group: {
+  [`.${classes.group}`]: {
     '&>td': {
       padding: '0px',
       // '&:hover':{
@@ -34,33 +46,33 @@ const useStyles = makeStyles(theme => ({
       // }
     }
   },
-  loading: {
+  [`.${classes.loading}`]: {
     textAlign: 'center',
     padding: '7px'
   },
-  ghost: {
+  [`.${classes.ghost}`]: {
     borderBottom: '1px solid #0000',
     userSelect: 'none',
     '&:hover': {
       backgroundColor: '#0000 !important'
     }
   },
-  tableCell: {
+  [`.${classes.tableCell}`]: {
     overflow: 'hidden',
     whiteSpace: 'nowrap',
     textOverflow: 'ellipsis'
   }
-}));
+});
 
 const ArgousComplexTableBody = memo(({
-  children, 
-  line, 
+  children,
+  line,
   lineStyle,
   handleOpenClose,
   lineClass,
   enableCheck,
   disableCheckIf,
-  columnStyles, 
+  columnStyles,
   head,
   onClick,
   onDoubleClick,
@@ -75,8 +87,6 @@ const ArgousComplexTableBody = memo(({
   enableDrag,
   onDrop
 }) => {
-  const classes = useStyles();
-
   const { lista, selected, dispatch, loading } = useContext(TableContext);
 
   const handleClick = name => {
@@ -103,98 +113,103 @@ const ArgousComplexTableBody = memo(({
   };
 
   return (
-    <Container dragHandleSelector={`.${classes.dragHandle}`} onDrop={onDrop} render={containerRef => (
-      <TableBody innerRef={containerRef} /*component={Container} dragHandleSelector={`.${classes.dragHandle}`} onDrop={onDrop}*/>
-        {loading ? (
-          <TableRow><TableCell className={classes.loading} colSpan={dadosMostrados?.length && line(dadosMostrados[0])?.length + (enableCheck ? 1 : 0) + (enableDrag ? 1 : 0)}><CircularProgress disableShrink/></TableCell></TableRow>
-        ) : dadosMostrados.length ? dadosMostrados.map((linha, i) => {
+    <>
+      <GlobalStyles styles={tableBodyStyles} />
+      <Container dragHandleSelector={`.${classes.dragHandle}`} onDrop={onDrop} render={containerRef => (
+        <TableBody ref={containerRef} /*component={Container} dragHandleSelector={`.${classes.dragHandle}`} onDrop={onDrop}*/>
+          {loading ? (
+            <TableRow><TableCell className={classes.loading} colSpan={dadosMostrados?.length && line(dadosMostrados[0])?.length + (enableCheck ? 1 : 0) + (enableDrag ? 1 : 0)}><CircularProgress disableShrink/></TableCell></TableRow>
+          ) : dadosMostrados.length ? dadosMostrados.map((linha, i) => {
 
-          const isItemSelected = isSelected(linha[indexToSelect]);
-          const isItemOpen = i === open;
-          const ghostRow = (isArray(linha)) ? !linha.some((value) => !!value) : false;
-          const { title, ...rowProperties } = rowProps({ index: i, linhaOriginal: linha, linhaFormatada: line(linha), itensSelecionados: selected }) || {};
+            const isItemSelected = isSelected(linha[indexToSelect]);
+            const isItemOpen = i === open;
+            const ghostRow = (isArray(linha)) ? !linha.some((value) => !!value) : false;
+            const { title, ...rowProperties } = rowProps({ index: i, linhaOriginal: linha, linhaFormatada: line(linha), itensSelecionados: selected }) || {};
 
 
-          return <Draggable key={customKey ? lista[i][customKey] : i} render={draggableRef => (
-            //TODO criar proprio draggable pois esse remove classes do filho
-            <Fragment>
-              <CustomTooltip title={(ghostRow) ? '' : (lineTitle || title)}>
-                <TableRow
-                  component={Draggable}
-                  {...rowProperties}
-                  className={
-                    clsx(
-                      { 
-                        [classes.hover]: isItemSelected, 
-                        [classes.open]: (isItemOpen && !!children), 
-                        [classes.ghost]: ghostRow 
-                      }, 
-                      (ghostRow) ? '' : lineClass(line(linha), linha, i), 
-                      rowProperties.className
-                    )
-                  }
-                  hover
-                  role='checkbox'
-                  tabIndex={-1}
-                  selected={isItemSelected}
-                  style={(lineStyle && !ghostRow) ? lineStyle(linha, line(linha), i) : undefined} 
-                  onClick={(ghostRow) ? undefined : (onClick) ? e => onClick(e, linha, line(linha), i) : (children) ? () => handleOpenClose(i) : undefined}
-                  onDoubleClick={(ghostRow) ? undefined : (onDoubleClick) ? e => onDoubleClick(e, linha, line(linha), i) : undefined}
-                  innerRef={draggableRef}
-                >
-                  {enableDrag && <TableCell padding='checkbox'>
-                    <Tooltip title='Arrastar'>
-                      <IconButton size='small' className={classes.dragHandle}>
-                        <MdDragHandle/>
-                      </IconButton>
-                    </Tooltip>
-                  </TableCell>}
-                  {(enableCheck) && (
-                    <TableCell padding='checkbox' className={clsx({ [classes.ghost]: ghostRow })}>
-                      {(!ghostRow) && (
-                        <Checkbox 
-                          checked={isItemSelected} 
-                          disabled={(disableCheckIf) && disableCheckIf(linha, line(linha), i)} 
-                          onClick={(event) => {
-                            event.stopPropagation();
-                            handleClick(linha[indexToSelect]);
-                          }} 
-                        />
+            return (
+              <Draggable key={customKey ? lista[i][customKey] : i} render={draggableRef => (
+              //TODO criar proprio draggable pois esse remove classes do filho
+                (<Fragment>
+                  <CustomTooltip title={(ghostRow) ? '' : (lineTitle || title)}>
+                    <TableRow
+                      component={Draggable}
+                      {...rowProperties}
+                      className={
+                        clsx(
+                          {
+                            [classes.hover]: isItemSelected,
+                            [classes.open]: (isItemOpen && !!children),
+                            [classes.ghost]: ghostRow
+                          },
+                          (ghostRow) ? '' : lineClass(line(linha), linha, i),
+                          rowProperties.className
+                        )
+                      }
+                      hover
+                      role='checkbox'
+                      tabIndex={-1}
+                      selected={isItemSelected}
+                      style={(lineStyle && !ghostRow) ? lineStyle(linha, line(linha), i) : undefined}
+                      onClick={(ghostRow) ? undefined : (onClick) ? e => onClick(e, linha, line(linha), i) : (children) ? () => handleOpenClose(i) : undefined}
+                      onDoubleClick={(ghostRow) ? undefined : (onDoubleClick) ? e => onDoubleClick(e, linha, line(linha), i) : undefined}
+                      ref={draggableRef}
+                    >
+                      {enableDrag && <TableCell padding='checkbox'>
+                        <Tooltip title='Arrastar'>
+                          <IconButton size='small' className={classes.dragHandle}>
+                            <MdDragHandle/>
+                          </IconButton>
+                        </Tooltip>
+                      </TableCell>}
+                      {(enableCheck) && (
+                        <TableCell padding='checkbox' className={clsx({ [classes.ghost]: ghostRow })}>
+                          {(!ghostRow) && (
+                            <Checkbox
+                              checked={isItemSelected}
+                              disabled={(disableCheckIf) && disableCheckIf(linha, line(linha), i)}
+                              onClick={(event) => {
+                                event.stopPropagation();
+                                handleClick(linha[indexToSelect]);
+                              }}
+                            />
+                          )}
+                        </TableCell>
                       )}
-                    </TableCell>
-                  )}
-                  {isArray(line(linha)) && line(linha).map((coluna, j) => (
-                    (ghostRow) ? (
-                      <TableCell key={j} className={clsx(classes.tableCell, classes.ghost)}>
-                        &nbsp;
-                      </TableCell>
-                    ) : (
-                      <TableCell 
-                        key={j} 
-                        {...columnProps(j, coluna, linha, line(linha))} 
-                        style={columnStyles ? columnStyles[j] : undefined} 
-                        className={classes.tableCell}
-                      >
-                        {getCellContent(coluna, dadosMostrados[i], j, i)}
+                      {isArray(line(linha)) && line(linha).map((coluna, j) => (
+                        (ghostRow) ? (
+                          <TableCell key={j} className={clsx(classes.tableCell, classes.ghost)}>
+                          &nbsp;
+                          </TableCell>
+                        ) : (
+                          <TableCell
+                            key={j}
+                            {...columnProps(j, coluna, linha, line(linha))}
+                            style={columnStyles ? columnStyles[j] : undefined}
+                            className={classes.tableCell}
+                          >
+                            {getCellContent(coluna, dadosMostrados[i], j, i)}
+                          </TableCell>
+                        )
+                      ))}
+                    </TableRow>
+                  </CustomTooltip>
+                  {children && (
+                    <TableRow className={classes.group}>
+                      <TableCell colSpan={dadosMostrados?.length && line(dadosMostrados[0])?.length + (enableCheck ? 1 : 0) + (enableDrag ? 1 : 0)} style={{ padding: open === i ? 8 : 0 }} className='argous-complex-table-group-cell'>
+                        <Collapse in={open === i} mountOnEnter unmountOnExit>
+                          {typeof children === 'function' ? children({ linha: line(linha), linhaOriginal: linha, index: i }) : children}
+                        </Collapse>
                       </TableCell>
-                    )
-                  ))}
-                </TableRow>
-              </CustomTooltip>
-              {children && (
-                <TableRow className={classes.group}>
-                  <TableCell colSpan={dadosMostrados?.length && line(dadosMostrados[0])?.length + (enableCheck ? 1 : 0) + (enableDrag ? 1 : 0)} style={{ padding: open === i ? 8 : 0 }} className='argous-complex-table-group-cell'>
-                    <Collapse in={open === i} mountOnEnter unmountOnExit>
-                      {typeof children === 'function' ? children({ linha: line(linha), linhaOriginal: linha, index: i }) : children}
-                    </Collapse>
-                  </TableCell>
-                </TableRow>
-              )}
-            </Fragment>
-          )}/>;
-        }) : <TableRow><Typography className={classes.semDados} component='td' variant='h6' colSpan={head.length + (enableCheck ? 1 : 0)}>Nenhum dado a ser exibido</Typography></TableRow> }
-      </TableBody>
-    )}/>
+                    </TableRow>
+                  )}
+                </Fragment>)
+              )}/>
+            );
+          }) : <TableRow><Typography className={classes.semDados} component='td' variant='h6' colSpan={head.length + (enableCheck ? 1 : 0)}>Nenhum dado a ser exibido</Typography></TableRow> }
+        </TableBody>
+      )}/>
+    </>
   );
 });
 
@@ -205,4 +220,4 @@ export const CustomTooltip = ({ title, children }) => {
     {children}
   </Tooltip>;
   return children;
-};
+};

package/lib/components/ArgousComplexTableBody/DragAndDrop.js

@@ -0,0 +1,85 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import smoothDnD, { constants, dropHandlers } from 'trello-smooth-dnd';
+
+smoothDnD.dropHandler = dropHandlers.reactDropHandler().handler;
+smoothDnD.wrapChild = child => child;
+
+export class Container extends Component {
+  componentDidMount() {
+    this.previousContainer = this.containerElement;
+    this.container = smoothDnD(this.containerElement, this.getContainerOptions());
+  }
+
+  componentDidUpdate() {
+    if (this.previousContainer && this.previousContainer !== this.containerElement) {
+      this.container.dispose();
+      this.container = smoothDnD(this.containerElement, this.getContainerOptions());
+      this.previousContainer = this.containerElement;
+    }
+  }
+
+  componentWillUnmount() {
+    this.container.dispose();
+  }
+
+  setRef = element => {
+    this.containerElement = element;
+  };
+
+  getContainerOptions = () => {
+    const functionProps = {};
+    const callbacks = [
+      'onDragStart',
+      'onDragEnd',
+      'onDrop',
+      'getChildPayload',
+      'shouldAnimateDrop',
+      'shouldAcceptDrop',
+      'onDragEnter',
+      'onDragLeave',
+      'render',
+      'onDropReady',
+      'getGhostParent'
+    ];
+
+    callbacks.forEach(callback => {
+      if (this.props[callback]) {
+        functionProps[callback] = (...parameters) => this.props[callback](...parameters);
+      }
+    });
+
+    return { ...this.props, ...functionProps };
+  };
+
+  render() {
+    if (this.props.render) {
+      return this.props.render(this.setRef);
+    }
+
+    return <div style={this.props.style} ref={this.setRef}>{this.props.children}</div>;
+  }
+}
+
+Container.propTypes = {
+  children: PropTypes.node,
+  render: PropTypes.func,
+  style: PropTypes.object
+};
+
+export class Draggable extends Component {
+  render() {
+    if (this.props.render) {
+      return React.cloneElement(this.props.render(), { className: constants.wrapperClass });
+    }
+
+    const className = `${this.props.className ? `${this.props.className} ` : ''}${constants.wrapperClass}`;
+    return <div {...this.props} className={className}>{this.props.children}</div>;
+  }
+}
+
+Draggable.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  render: PropTypes.func
+};

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>