argous 1.2.246 → 1.3.2

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 {

package/lib/components/ConfirmModal/WrapperModal.tsx

@@ -1,5 +1,5 @@
 import Button from '../MaterialButton/MaterialButton';
-import { Dialog, DialogActions, DialogContent, DialogProps, DialogTitle } from '@material-ui/core';
+import { Dialog, DialogActions, DialogContent, DialogProps, DialogTitle } from '@mui/material';
 import React from 'react';
 
 export interface WrapperModalProps {
@@ -17,7 +17,7 @@ export interface WrapperModalProps {
   open: boolean,
 }
 
-const WrapperModal = (Component: (props: any) => JSX.Element) => ({ proceed, open, title, cancelLabel = 'Cancelar', okLabel = 'Ok', dialogProps, ...props }: WrapperModalProps) => {
+const WrapperModal = (Component: (props: any) => React.ReactElement) => ({ proceed, open, title, cancelLabel = 'Cancelar', okLabel = 'Ok', dialogProps, ...props }: WrapperModalProps) => {
   return <Dialog open={open} onClose={() => proceed(false)} {...dialogProps}>
     {title && <DialogTitle>{title}</DialogTitle>}
     <DialogContent>

package/lib/components/ContactValidationInput/ContactValidationInput.d.ts

@@ -1,4 +1,4 @@
-import { TextFieldProps } from '@material-ui/core';
+import { TextFieldProps } from '@mui/material';
 import { CSSProperties } from 'react';