argous 1.2.247 → 1.3.3

package/lib/components/Carousel/Carousel.js

@@ -1,22 +1,33 @@
-import { makeStyles } from '@material-ui/core';
-import clsx from 'clsx';
+import { GlobalStyles } from '@mui/material';
+import { clsx } from 'clsx';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { IoIosArrowBack, IoIosArrowForward } from 'react-icons/io';
 
 
-const useStyles = makeStyles(theme => ({
-  container: {
+const classes = {
+  container: 'argous-carousel-container',
+  carouselContainer: 'argous-carousel-carousel-container',
+  carousel: 'argous-carousel-carousel',
+  button: 'argous-carousel-button',
+  leftButton: 'argous-carousel-left-button',
+  rightButton: 'argous-carousel-right-button',
+  indicator: 'argous-carousel-indicator',
+  currentIndicator: 'argous-carousel-current-indicator',
+};
+
+const carouselStyles = ({ itemSpacing, indicator, indicatorSize, indicatorGap, indicatorPadding, iconSize }) => theme => ({
+  [`.${classes.container}`]: {
     height: '100%',
     width: '100%'
   },
-  carouselContainer: {
+  [`.${classes.carouselContainer}`]: {
     width: '100%',
-    height: ({ indicator, indicatorPadding }) => (indicator) ? `calc(100% - ${indicatorPadding * 2}px)` : '100%',
+    height: indicator ? `calc(100% - ${indicatorPadding * 2}px)` : '100%',
     minWidth: '100%',
     display: 'flex',
     alignItems: 'center'
   },
-  carousel: {
+  [`.${classes.carousel}`]: {
     width: '100%',
     height: '100%',
     margin: 'auto',
@@ -26,52 +37,52 @@ const useStyles = makeStyles(theme => ({
     overflow: 'hidden',
     scrollBehavior: 'smooth',
     '&>*:not(:last-child)': {
-      marginRight: ({ itemSpacing }) => (itemSpacing || '')
+      marginRight: itemSpacing || ''
     }
   },
-  button: {
+  [`.${classes.button}`]: {
     display: 'flex',
     alignItems: 'center',
     cursor: 'pointer',
     border: 0,
     padding: 0,
     backgroundColor: '#0000',
-    color: (theme.palette.type === 'light') ? 'rgba(0, 0, 0, .4)' : 'rgba(255, 255, 255, .5)',
+    color: theme.palette.mode === 'light' ? 'rgba(0, 0, 0, .4)' : 'rgba(255, 255, 255, .5)',
     '&:hover': {
-      color: (theme.palette.type === 'light') ? 'rgba(0, 0, 0, .6)' : 'rgba(255, 255, 255, .8)'
+      color: theme.palette.mode === 'light' ? 'rgba(0, 0, 0, .6)' : 'rgba(255, 255, 255, .8)'
     },
     '&:disabled': {
-      color: (theme.palette.type === 'light') ? 'rgba(0, 0, 0, .23)' : 'rgba(255, 255, 255, .3)',
+      color: theme.palette.mode === 'light' ? 'rgba(0, 0, 0, .23)' : 'rgba(255, 255, 255, .3)',
       backgroundColor: 'transparent',
       cursor: 'default',
       pointerEvents: 'none'
     }
   },
-  leftButton: {
+  [`.${classes.leftButton}`]: {
     left: 0
   },
-  rightButton: {
+  [`.${classes.rightButton}`]: {
     right: 0
   },
-  indicator: {
+  [`.${classes.indicator}`]: {
     display: 'flex',
     flexWrap: 'wrap',
     alignItems: 'center',
     justifyContent: 'center',
-    gap: ({ indicatorGap }) => (indicatorGap || ''),
-    padding: ({ indicatorPadding, indicatorSize, iconSize }) => `${indicatorPadding - (indicatorSize / 2)}px ${iconSize}px`,
+    gap: indicatorGap || '',
+    padding: `${indicatorPadding - (indicatorSize / 2)}px ${iconSize}px`,
     '& span': {
-      width: ({ indicatorSize }) => (indicatorSize || ''),
-      height: ({ indicatorSize }) => (indicatorSize || ''),
+      width: indicatorSize || '',
+      height: indicatorSize || '',
       borderRadius: '50%',
-      backgroundColor: (theme.palette.type === 'light') ? 'rgba(0, 0, 0, .4)' : 'rgba(255, 255, 255, .5)',
+      backgroundColor: theme.palette.mode === 'light' ? 'rgba(0, 0, 0, .4)' : 'rgba(255, 255, 255, .5)',
       transition: 'background-color 500ms'
     }
   },
-  currentIndicator: {
-    backgroundColor: (theme.palette.type === 'light') ? '#000 !important' : '#fff !important'
+  [`.${classes.currentIndicator}`]: {
+    backgroundColor: theme.palette.mode === 'light' ? '#000 !important' : '#fff !important'
   }
-}));
+});
 
 
 const CAROUSEL_ID = 'carousel';
@@ -102,7 +113,6 @@ const Carousel = ({
   currentIndicatorClassName 
 }) => {
 
-  const classes = useStyles({ itemSpacing, indicator, indicatorSize, indicatorGap, indicatorPadding, iconSize });
   const [state, setState] = useState(initialState);
   const { position, indicatorArray } = state;
   const carousel = useRef(null);
@@ -140,7 +150,9 @@ const Carousel = ({
 
     (position === children.length) && logicSetState({ type: 'position', value: (children.length - 1) });
   }, [itemSpacing, leftButtonId, rightButtonId, position, children.length]);
-  useEffect(() => control(), [control]);
+  useEffect(() => {
+    control();
+  }, [control]);
   control();
 
   const createIndicatorArray = useCallback(() => {
@@ -148,7 +160,9 @@ const Carousel = ({
     const newIndicatorArray = Array.from(Array(childrenLength).keys());
     logicSetState({ type: 'indicatorArray', value: newIndicatorArray });
   }, []);
-  useEffect(() => (indicator) && createIndicatorArray(), [indicator, children, createIndicatorArray]);
+  useEffect(() => {
+    if (indicator) createIndicatorArray();
+  }, [indicator, children, createIndicatorArray]);
 
   const handleCarouselClick = (e, direction) => {
     if (!childWidth || (typeof childWidth !== 'number')) return;
@@ -181,6 +195,7 @@ const Carousel = ({
 
 
   return <div id={carouselId} className={classes.container}>
+    <GlobalStyles styles={carouselStyles({ itemSpacing, indicator, indicatorSize, indicatorGap, indicatorPadding, iconSize })} />
     <div className={classes.carouselContainer}>
       {(buttons && LEFT_ICON) && (
         <button id={leftButtonId} onClick={(e) => handleCarouselClick(e, 'left')} className={clsx(classes.button, classes.leftButton, buttonClassName)}>
@@ -215,4 +230,4 @@ const Carousel = ({
 };
 
 
-export default Carousel;
+export default Carousel;

package/lib/components/CartaoUsuario/CartaoUsuario.js

@@ -2,7 +2,7 @@ import { ArgousAvatar } from '../';
 import { setAnotherProgramField } from '../../fieldsRedux';
 import { useStore } from '../../utils';
 import { serverAction } from '../../utils/api';
-import { Card, Typography, Grid, Button, Portal, Popper } from '@material-ui/core';
+import { Card, Typography, Grid, Button, Portal, Popper } from '@mui/material';
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { IoIosCall } from 'react-icons/io';
 import { MdMail, MdMessage } from 'react-icons/md';
@@ -71,10 +71,10 @@ function CartaoUsuario({ anchor, idUsuario }) {
       <Popper onClick={e => e.stopPropagation()} style={{ zIndex: 5 }} onMouseLeave={mouseLeave} onMouseEnter={mouseEnter} open={(!!anchor || !!localAnchor) && !!dados.dsNomeUsuario} anchorEl={anchor || localAnchor}>
         <Card variant='outlined' style={{ padding: '10px', maxWidth: '350px' }}>
           <Grid container spacing={1}>
-            <Grid item xs='auto'>
+            <Grid size='auto'>
               <ArgousAvatar style={{ width: '50px', height: '50px', margin: '10px' }} nome={dados.dsNomeUsuario} idUsuario={idUsuario || localIdUsuario} />
             </Grid>
-            <Grid item xs='auto'>
+            <Grid size='auto'>
               <Typography variant='h6' style={{ overflow: 'hidden', width: '250px', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{dados.dsNomeUsuario}</Typography>
               <Typography variant='body2' style={{ width: '250px' }}>{dados.dsFuncaoUsuario}</Typography>
               <Typography variant='caption' style={{ width: '250px' }}>{dados.dsSetor}</Typography>
@@ -85,14 +85,14 @@ function CartaoUsuario({ anchor, idUsuario }) {
               ((idUsuario && (idUsuarioLogado !== idUsuario)) || (localIdUsuario && (idUsuarioLogado !== localIdUsuario))) &&
               <React.Fragment>
                 {dados.nrRamalUsuario &&
-                  <Grid item xs>
+                  <Grid size='grow'>
                     <Button fullWidth variant='contained' href={`tel: ${dados.nrRamalUsuario}`} title={`Ramal: ${dados.nrRamalUsuario}`}><IoIosCall/>&nbsp;{dados.nrRamalUsuario}</Button>
                   </Grid>
                 }
-                <Grid item xs>
+                <Grid size='grow'>
                   <Button fullWidth variant='contained' href={`mailto: ${dados.dsEmailUsuario}`} title={dados.dsEmailUsuario}><MdMail/>&nbsp;Email</Button>
                 </Grid>
-                <Grid item xs>
+                <Grid size='grow'>
                   <Button fullWidth variant='contained' onClick={() => setAnotherProgramField('janelaChatOpen', retornaUser(), 'argousSystem')} title='Abrir chat de conversa'><MdMessage/>&nbsp;Mensagem</Button>
                 </Grid>
               </React.Fragment>

package/lib/components/Collapse/Collapse.d.ts

@@ -1,5 +1,5 @@
-import { StandardProps } from '@material-ui/core';
-import { TransitionProps } from '@material-ui/core/transitions/transition';
+import { StandardProps } from '@mui/material';
+import { TransitionProps } from '@mui/material/transitions';
 import * as React from 'react';
 
 export interface CollapseProps extends StandardProps<TransitionProps, CollapseClassKey, 'timeout'> {
@@ -57,4 +57,4 @@ export type CollapseClassKey = 'container' | 'entered' | 'hidden' | 'wrapper' |
  * - inherits [Transition API](https://reactcommunity.org/react-transition-group/transition#Transition-props)
  */
 
-export default function Collapse(props: CollapseProps): JSX.Element;
+export default function Collapse(props: CollapseProps): JSX.Element;

package/lib/components/Collapse/Collapse.js

@@ -1,49 +1,80 @@
-import { useTheme } from '@material-ui/core';
-import { duration } from '@material-ui/core/styles/transitions';
-import withStyles from '@material-ui/core/styles/withStyles';
-import { getTransitionProps } from '@material-ui/core/transitions/utils';
-import clsx from 'clsx';
+import { GlobalStyles, useTheme } from '@mui/material';
+import { clsx } from 'clsx';
 import PropTypes from 'prop-types';
 import * as React from 'react';
 import { Transition } from 'react-transition-group';
 
+const defaultTransitionDuration = {
+  standard: 300,
+};
+
+const getTransitionDuration = (timeout, mode) => {
+  if (timeout === null || timeout === undefined || timeout === 'auto') {
+    return undefined;
+  }
+
+  if (typeof timeout === 'number' || typeof timeout === 'string') {
+    return timeout;
+  }
+
+  return timeout[mode];
+};
+
+const getTransitionProps = ({ style = {}, timeout }, { mode }) => ({
+  duration: style.transitionDuration || getTransitionDuration(timeout, mode),
+  easing: style.transitionTimingFunction,
+  delay: style.transitionDelay,
+});
+
+const collapseClasses = {
+  container: 'argous-collapse-container',
+  horizontal: 'argous-collapse-horizontal',
+  entered: 'argous-collapse-entered',
+  hidden: 'argous-collapse-hidden',
+  wrapper: 'argous-collapse-wrapper',
+  wrapperInner: 'argous-collapse-wrapper-inner',
+};
+
+const mergeClasses = (defaultClasses, overrideClasses = {}) => Object.keys(defaultClasses).reduce((acc, key) => ({
+  ...acc,
+  [key]: overrideClasses[key] || defaultClasses[key],
+}), {});
+
 export const styles = (theme) => ({
   /* Styles applied to the container element. */
-  container: {
+  [`.${collapseClasses.container}`]: {
     position: 'relative',
     overflow: 'hidden',
     height: 0,
     transition: theme.transitions.create('height'),
-    '&$horizontal': {
+    [`&.${collapseClasses.horizontal}`]: {
       width: 0,
       height: 'auto',
       transition: theme.transitions.create('width'),
     },
   },
-  /* Pseudo-class applied to the root element if `orientation="horizontal"`. */
-  horizontal: {},
   /* Styles applied to the container element when the transition has entered. */
-  entered: {
+  [`.${collapseClasses.entered}`]: {
     height: 'auto',
     overflow: 'visible',
-    '&$horizontal': {
+    [`&.${collapseClasses.horizontal}`]: {
       height: 'initial',
       width: 'auto',
     },
   },
   /* Styles applied to the container element when the transition has exited and `collapsedHeight` != 0px. */
-  hidden: {
+  [`.${collapseClasses.hidden}`]: {
     visibility: 'hidden',
   },
   /* Styles applied to the outer wrapper element. */
-  wrapper: {
+  [`.${collapseClasses.wrapper}`]: {
     // Hack to get children with a negative margin to not falsify the height computation.
     display: 'flex',
   },
   /* Styles applied to the inner wrapper element. */
-  wrapperInner: {
+  [`.${collapseClasses.wrapperInner}`]: {
     width: '100%',
-    '&$horizontal': {
+    [`&.${collapseClasses.horizontal}`]: {
       // width: 'initial',
       height: '100%',
     },
@@ -58,7 +89,7 @@ export const styles = (theme) => ({
 const Collapse = React.forwardRef(function Collapse(props, ref) {
   const {
     children,
-    classes,
+    classes: classesProp = {},
     className,
     collapsedHeight = '0px',
     collapsedSize: collapsedSizeProp = '0px',
@@ -71,12 +102,13 @@ const Collapse = React.forwardRef(function Collapse(props, ref) {
     onExiting,
     orientation = 'vertical',
     style = {},
-    timeout = duration.standard,
+    timeout = defaultTransitionDuration.standard,
     // eslint-disable-next-line react/prop-types
     TransitionComponent = Transition,
     ...other
   } = props;
   const theme = useTheme();
+  const classes = mergeClasses(collapseClasses, classesProp);
   const timer = React.useRef();
   const wrapperRef = React.useRef(null);
   const autoTransitionDuration = React.useRef();
@@ -184,47 +216,50 @@ const Collapse = React.forwardRef(function Collapse(props, ref) {
   };
 
   return (
-    <TransitionComponent
-      in={inProp}
-      onEnter={handleEnter}
-      onEntered={handleEntered}
-      onEntering={handleEntering}
-      onExit={handleExit}
-      onExiting={handleExiting}
-      addEndListener={addEndListener}
-      timeout={timeout === 'auto' ? null : timeout}
-      {...other}
-    >
-      {(state, childProps) => (
-        <Component
-          className={clsx(
-            classes.container,
-            {
-              [classes.horizontal]: isHorizontal,
-              [classes.entered]: state === 'entered',
-              [classes.hidden]: state === 'exited' && !inProp && collapsedSize === '0px',
-            },
-            className,
-          )}
-          style={{
-            [isHorizontal ? 'minWidth' : 'minHeight']: collapsedSize,
-            ...style,
-          }}
-          ref={ref}
-          {...childProps}
-        >
-          <div className={classes.wrapper} ref={wrapperRef}>
-            <div
-              className={clsx(classes.wrapperInner, {
+    <>
+      <GlobalStyles styles={styles} />
+      <TransitionComponent
+        in={inProp}
+        onEnter={handleEnter}
+        onEntered={handleEntered}
+        onEntering={handleEntering}
+        onExit={handleExit}
+        onExiting={handleExiting}
+        addEndListener={addEndListener}
+        timeout={timeout === 'auto' ? null : timeout}
+        {...other}
+      >
+        {(state, childProps) => (
+          <Component
+            className={clsx(
+              classes.container,
+              {
                 [classes.horizontal]: isHorizontal,
-              })}
-            >
-              {children}
+                [classes.entered]: state === 'entered',
+                [classes.hidden]: state === 'exited' && !inProp && collapsedSize === '0px',
+              },
+              className,
+            )}
+            style={{
+              [isHorizontal ? 'minWidth' : 'minHeight']: collapsedSize,
+              ...style,
+            }}
+            ref={ref}
+            {...childProps}
+          >
+            <div className={classes.wrapper} ref={wrapperRef}>
+              <div
+                className={clsx(classes.wrapperInner, {
+                  [classes.horizontal]: isHorizontal,
+                })}
+              >
+                {children}
+              </div>
             </div>
-          </div>
-        </Component>
-      )}
-    </TransitionComponent>
+          </Component>
+        )}
+      </TransitionComponent>
+    </>
   );
 });
 
@@ -314,4 +349,4 @@ Collapse.propTypes = {
 
 Collapse.muiSupportAuto = true;
 
-export default withStyles(styles, { name: 'MuiCollapse' })(Collapse);
+export default Collapse;

package/lib/components/Compartilhar/Compartilhar.js

@@ -1,18 +1,9 @@
 import { enviaCompartilhamentoDePrograma, searchUsers } from '../../api/index';
 import { formataNome, setError } from '../../utils/index';
-import { IconButton, Grid, TextField, Button, InputAdornment, Typography, Collapse, Chip, makeStyles, Paper } from '@material-ui/core';
-import { Autocomplete } from '@material-ui/lab';
+import { IconButton, Grid, TextField, Button, InputAdornment, Typography, Collapse, Chip, Paper, Autocomplete } from '@mui/material';
 import React, { useState, useEffect, forwardRef } from 'react';
 import { MdLink } from 'react-icons/md';
 
-const useStyles = makeStyles({
-  fundoCompartilhar: {
-    width: '500px',
-    padding: '20px',
-    marginTop: 5,
-  }
-});
-
 const Compartilhar = forwardRef((props, ref) => {
 
   const [metodoCompartilhar, setMetodoCompartilhar] = useState('');
@@ -34,8 +25,6 @@ const Compartilhar = forwardRef((props, ref) => {
   const erroVazio = { email: '', stringEmail: '', notificacao: '', stringNotificacao: '' };
   const [erro, setErro] = useState(erroVazio);
 
-  const classes = useStyles();
-
   function copiarParaAreaDeTransferencia() {
     let link = document.getElementById('link');
     link.select();
@@ -111,10 +100,12 @@ const Compartilhar = forwardRef((props, ref) => {
   }
 
   return (
-    <Grid innerRef={ref} className={classes.fundoCompartilhar} component={Paper} elevation={2} onClick={e => e.stopPropagation()}>
-      <Grid container spacing={2} style={{ position: 'relative', padding: '6px 12px', display: 'flex' }} justifyContent='center'>
+    <Grid ref={ref} sx={{ width: '500px', padding: '20px', marginTop: 5 }} component={Paper} elevation={2} onClick={e => e.stopPropagation()}>
+      <Grid container spacing={2} style={{ position: 'relative', padding: '6px 12px', display: 'flex' }} sx={{
+        justifyContent: 'center'
+      }}>
         <Typography component='h3' style={{ fontSize: '24px', textAlign: 'center', marginTop: '0px' }}>Compartilhar</Typography>
-        <Grid item xs={12} className='row'>
+        <Grid className='row' size={12}>
           <TextField
             label='Link'
             value={link}
@@ -123,20 +114,22 @@ const Compartilhar = forwardRef((props, ref) => {
             fullWidth
             variant='outlined'
             margin='dense'
-            InputProps={{
-              endAdornment: (
-                <InputAdornment position='end'>
-                  <IconButton onClick={() => copiarParaAreaDeTransferencia()} title='Copiar Link'>
-                    <MdLink />
-                  </IconButton>
-                </InputAdornment>
-              ),
+            slotProps={{
+              input: {
+                endAdornment: (
+                  <InputAdornment position='end'>
+                    <IconButton onClick={() => copiarParaAreaDeTransferencia()} title='Copiar Link'>
+                      <MdLink />
+                    </IconButton>
+                  </InputAdornment>
+                ),
+              }
             }} />
           <Collapse in={copiado}>
             <Typography variant='body2' component='div' color='primary'>Link copiado para a área de transferência!</Typography>
           </Collapse>
         </Grid>
-        <Grid item xs={6} style={{ display: 'flex', justifyContent: 'center' }}>
+        <Grid style={{ display: 'flex', justifyContent: 'center' }} size={6}>
           <IconButton size='medium' title='Enviar link por notificação' onClick={() => {
             setErro(erroVazio); setEmail([]); setStringEmail(''); setMetodoCompartilhar(metodoCompartilhar === 'notificacao' ? '' : 'notificacao'); 
           }} >
@@ -153,7 +146,7 @@ const Compartilhar = forwardRef((props, ref) => {
             />
           </IconButton>
         </Grid>
-        <Grid item xs={6} style={{ display: 'flex', justifyContent: 'center' }}>
+        <Grid style={{ display: 'flex', justifyContent: 'center' }} size={6}>
           <IconButton size='medium' title='Enviar link por email' onClick={() => {
             setErro(erroVazio); setNotificacao([]); setStringNotificacao(''); setMetodoCompartilhar(metodoCompartilhar === 'email' ? '' : 'email'); 
           }} >
@@ -170,16 +163,20 @@ const Compartilhar = forwardRef((props, ref) => {
             />
           </IconButton>
         </Grid>
-        <Grid item xs={6} style={{ display: 'flex', justifyContent: 'center', paddingTop: 0, marginBottom: '5px' }}>
+        <Grid
+          style={{ display: 'flex', justifyContent: 'center', paddingTop: 0, marginBottom: '5px' }}
+          size={6}>
           <Typography component='label' variant='body1'>Notificação</Typography>
         </Grid>
-        <Grid item xs={6} style={{ display: 'flex', justifyContent: 'center', paddingTop: 0, marginBottom: '5px' }}>
+        <Grid
+          style={{ display: 'flex', justifyContent: 'center', paddingTop: 0, marginBottom: '5px' }}
+          size={6}>
           <Typography component='label' variant='body1'>Email</Typography>
         </Grid>
-        <Grid item xs={12} style={{ padding: 0 }}>
+        <Grid style={{ padding: 0 }} size={12}>
           <Collapse in={metodoCompartilhar === 'notificacao'}>
             <Grid container spacing={2}>
-              <Grid item xs={12}>
+              <Grid size={12}>
                 <Autocomplete
                   multiple
                   value={notificacao}
@@ -191,12 +188,12 @@ const Compartilhar = forwardRef((props, ref) => {
                   disableCloseOnSelect
                   disablePortal
                   noOptionsText={stringEmail.length < 3 && stringNotificacao.length < 3 ? 'Digite para começar a pesquisar' : 'Não Encontrado'}
-                  renderTags={(value, getTagProps) => (
+                  renderValue={(value, getItemProps) => (
                     value.map((option, index) => (
                       <Chip
                         variant='outlined'
                         label={option[1] || option}
-                        {...getTagProps({ index })} />
+                        {...getItemProps({ index })} />
                     ))
                   )}
                   renderInput={params => (
@@ -206,15 +203,17 @@ const Compartilhar = forwardRef((props, ref) => {
                       label='Contatos:'
                       onChange={e => setStringNotificacao(e.target.value)}
                       placeholder={notificacao.length === 0 ? 'Selecionar' : undefined}
-                      InputLabelProps={{ shrink: true }}
                       error={!!erro.notificacao}
                       helperText={erro.notificacao}
                       {...params}
-                    />
+                      slotProps={{
+                        ...params.slotProps,
+                        inputLabel: { shrink: true }
+                      }} />
                   )}
                 />
               </Grid>
-              <Grid item xs={12}>
+              <Grid size={12}>
                 <TextField
                   variant='outlined'
                   margin='dense'
@@ -227,10 +226,10 @@ const Compartilhar = forwardRef((props, ref) => {
                   helperText={erro.stringNotificacao} />
               </Grid>
               <Grid container style={{ display: 'flex ' }} direction='row-reverse'>
-                <Grid item xs={2}>
+                <Grid size={2}>
                   <Button color='primary' variant='contained' onClick={() => enviaCompartilhamento('N')}>Enviar</Button>
                 </Grid>
-                <Grid item xs={10}>
+                <Grid size={10}>
                   <Collapse in={enviado}>
                     <Typography variant='body2' component='div' color='primary'>Link enviado com sucesso!</Typography>
                   </Collapse>
@@ -239,10 +238,10 @@ const Compartilhar = forwardRef((props, ref) => {
             </Grid>
           </Collapse>
         </Grid>
-        <Grid item xs={12} style={{ padding: 0 }}>
+        <Grid style={{ padding: 0 }} size={12}>
           <Collapse in={metodoCompartilhar === 'email'}>
             <Grid container spacing={2}>
-              <Grid item xs={12}>
+              <Grid size={12}>
                 <Autocomplete
                   multiple
                   freeSolo
@@ -255,12 +254,12 @@ const Compartilhar = forwardRef((props, ref) => {
                   disableCloseOnSelect
                   disablePortal
                   noOptionsText={stringEmail.length < 3 && stringNotificacao.length < 3 ? 'Digite para começar a pesquisar' : 'Não Encontrado'}
-                  renderTags={(value, getTagProps) => (
+                  renderValue={(value, getItemProps) => (
                     value.map((option, index) => (
                       <Chip
                         variant='outlined'
                         label={option[2] || option}
-                        {...getTagProps({ index })} />
+                        {...getItemProps({ index })} />
                     ))
                   )}
                   renderInput={params => (
@@ -270,15 +269,17 @@ const Compartilhar = forwardRef((props, ref) => {
                       label='Emails:'
                       onChange={e => setStringEmail(e.target.value)}
                       placeholder={email.length === 0 ? 'Selecionar' : undefined}
-                      InputLabelProps={{ shrink: true }}
                       error={!!erro.email}
                       helperText={erro.email}
                       {...params}
-                    />
+                      slotProps={{
+                        ...params.slotProps,
+                        inputLabel: { shrink: true }
+                      }} />
                   )}
                 />
               </Grid>
-              <Grid item xs={12}>
+              <Grid size={12}>
                 <TextField
                   multiline
                   label='Mensagem:'
@@ -294,10 +295,10 @@ const Compartilhar = forwardRef((props, ref) => {
                   helperText={erro.stringEmail} />
               </Grid>
               <Grid container style={{ display: 'flex' }} direction='row-reverse'>
-                <Grid item xs={2}>
+                <Grid size={2}>
                   <Button color='primary' variant='contained' onClick={() => enviaCompartilhamento('E')}>Enviar</Button>
                 </Grid>
-                <Grid item xs={10}>
+                <Grid size={10}>
                   <Collapse in={enviado}>
                     <Typography variant='body2' component='div' color='primary'>Link enviado com sucesso!</Typography>
                   </Collapse>
@@ -311,4 +312,4 @@ const Compartilhar = forwardRef((props, ref) => {
   );
 });
 
-export default Compartilhar;
+export default Compartilhar;

package/lib/components/ConfirmModal/BasicModal.tsx

@@ -1,4 +1,4 @@
-import { Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button, DialogProps } from '@material-ui/core';
+import { Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button, DialogProps } from '@mui/material';
 import React from 'react';
 
 export interface BasicModalProps {