argous 1.2.247 → 1.3.3

package/lib/components/InputTags/InputTags.js

@@ -1,6 +1,5 @@
 import { createField } from '../../fieldsRedux';
-import { Chip, Grid, TextField } from '@material-ui/core';
-import { Autocomplete } from '@material-ui/lab';
+import { Chip, Grid, TextField, Autocomplete } from '@mui/material';
 import { isArray } from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
@@ -47,13 +46,13 @@ class InputTags extends Component {
     const { handleChange, handleDelete, tags, handleInputChange, label, placeholder, suggestions, ...props } = this.checkProps();
 
     return (
-      <Grid container spacing={1}>      
-        <Grid item xs={12}>
+      <Grid container spacing={1}>
+        <Grid size={12}>
           {tags.map((item, index) => (
             <Chip key={index} label={item.text} onDelete={handleDelete(index)} />
           ))}
-        </Grid>    
-        <Grid item xs={12}>
+        </Grid>
+        <Grid size={12}>
           <Autocomplete
             onInputChange={(_, value) => handleInputChange(value)}
             multiple
@@ -65,7 +64,7 @@ class InputTags extends Component {
             onChange={handleChange}
             noOptionsText='Não Encontrado'
             size='small'     
-            renderTags={() => null}
+            renderValue={() => null}
             renderInput={params => (
               <TextField
                 fullWidth

package/lib/components/MaterialButton/MaterialButton.d.ts

@@ -1,6 +1,4 @@
-import { ButtonProps } from '@material-ui/core';
-import * as React from 'react';
-
+import { ButtonProps } from '@mui/material';
 export interface MaterialButtonProps extends Omit<ButtonProps, 'color'> {
   /**
    * Cor Aplicada ao botão
@@ -10,4 +8,4 @@ export interface MaterialButtonProps extends Omit<ButtonProps, 'color'> {
 
 declare function MaterialButton(props: MaterialButtonProps): JSX.Element
 
-export default MaterialButton;
+export default MaterialButton;

package/lib/components/MaterialButton/MaterialButton.js

@@ -1,135 +1,59 @@
-import { makeStyles, capitalize, alpha } from '@material-ui/core';
-import MaterialButton from '@material-ui/core/Button';
-import clsx from 'clsx';
+import MaterialButton from '@mui/material/Button';
+import { alpha } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-const useStyles = makeStyles(theme => ({
-  containedInfo: {
-    color: theme.palette.info.contrastText,
-    backgroundColor: theme.palette.info.main,
-    '&:hover': {
-      backgroundColor: theme.palette.info.dark,
-      '@media (hover: none)': {
-        backgroundColor: theme.palette.info.main,
-      },
-    }
-  },
-  outlinedInfo: {
-    color: theme.palette.info.main,
-    border: `1px solid ${alpha(theme.palette.info.main, 0.5)}`,
-    '&:hover': {
-      border: `1px solid ${theme.palette.info.main}`,
-      backgroundColor: alpha(theme.palette.info.main, theme.palette.action.hoverOpacity),
-      '@media (hover: none)': {
-        backgroundColor: 'transparent',
-      },
-    }
-  },
-  textInfo: {
-    color: theme.palette.info.main,
-    '&:hover': {
-      backgroundColor: alpha(theme.palette.info.main, theme.palette.action.hoverOpacity),
-      '@media (hover: none)': {
-        backgroundColor: 'transparent',
-      },
-    }
-  },
-  containedSuccess: {
-    color: theme.palette.success.contrastText,
-    backgroundColor: theme.palette.success.main,
-    '&:hover': {
-      backgroundColor: theme.palette.success.dark,
-      '@media (hover: none)': {
-        backgroundColor: theme.palette.success.main,
-      },
-    }
-  },
-  outlinedSuccess: {
-    color: theme.palette.success.main,
-    border: `1px solid ${alpha(theme.palette.success.main, 0.5)}`,
-    '&:hover': {
-      border: `1px solid ${theme.palette.success.main}`,
-      backgroundColor: alpha(theme.palette.success.main, theme.palette.action.hoverOpacity),
-      '@media (hover: none)': {
-        backgroundColor: 'transparent',
-      },
-    }
-  },
-  textSuccess: {
-    color: theme.palette.success.main,
-    '&:hover': {
-      backgroundColor: alpha(theme.palette.success.main, theme.palette.action.hoverOpacity),
-      '@media (hover: none)': {
-        backgroundColor: 'transparent',
-      },
-    }
-  },
-  containedWarning: {
-    color: theme.palette.warning.contrastText,
-    backgroundColor: theme.palette.warning.main,
-    '&:hover': {
-      backgroundColor: theme.palette.warning.dark,
-      '@media (hover: none)': {
-        backgroundColor: theme.palette.warning.main,
-      },
-    }
-  },
-  outlinedWarning: {
-    color: theme.palette.warning.main,
-    border: `1px solid ${alpha(theme.palette.warning.main, 0.5)}`,
-    '&:hover': {
-      border: `1px solid ${theme.palette.warning.main}`,
-      backgroundColor: alpha(theme.palette.warning.main, theme.palette.action.hoverOpacity),
-      '@media (hover: none)': {
-        backgroundColor: 'transparent',
-      },
-    }
-  },
-  textWarning: {
-    color: theme.palette.warning.main,
-    '&:hover': {
-      backgroundColor: alpha(theme.palette.warning.main, theme.palette.action.hoverOpacity),
-      '@media (hover: none)': {
-        backgroundColor: 'transparent',
-      },
-    }
-  },
-  containedDanger: {
-    color: theme.palette.error.contrastText,
-    backgroundColor: theme.palette.error.main,
-    '&:hover': {
-      backgroundColor: theme.palette.error.dark,
-      '@media (hover: none)': {
-        backgroundColor: theme.palette.error.main,
-      },
-    }
-  },
-  outlinedDanger: {
-    color: theme.palette.error.main,
-    border: `1px solid ${alpha(theme.palette.error.main, 0.5)}`,
-    '&:hover': {
-      border: `1px solid ${theme.palette.error.main}`,
-      backgroundColor: alpha(theme.palette.error.main, theme.palette.action.hoverOpacity),
-      '@media (hover: none)': {
-        backgroundColor: 'transparent',
-      },
-    }
-  },
-  textDanger: {
-    color: theme.palette.error.main,
+const muiColorMap = {
+  info: 'info',
+  success: 'success',
+  warning: 'warning',
+  danger: 'error',
+};
+
+const normalizeSx = sx => sx ? (Array.isArray(sx) ? sx : [sx]) : [];
+
+const getCustomColorSx = (color, variant) => theme => {
+  const paletteKey = muiColorMap[color];
+  if (!paletteKey) return {};
+
+  const palette = theme.palette[paletteKey];
+  if (variant === 'contained') {
+    return {
+      color: palette.contrastText,
+      backgroundColor: palette.main,
+      '&:hover': {
+        backgroundColor: palette.dark,
+        '@media (hover: none)': {
+          backgroundColor: palette.main,
+        },
+      }
+    };
+  }
+  if (variant === 'outlined') {
+    return {
+      color: palette.main,
+      border: `1px solid ${alpha(palette.main, 0.5)}`,
+      '&:hover': {
+        border: `1px solid ${palette.main}`,
+        backgroundColor: alpha(palette.main, theme.palette.action.hoverOpacity),
+        '@media (hover: none)': {
+          backgroundColor: 'transparent',
+        },
+      }
+    };
+  }
+  return {
+    color: palette.main,
     '&:hover': {
-      backgroundColor: alpha(theme.palette.error.main, theme.palette.action.hoverOpacity),
+      backgroundColor: alpha(palette.main, theme.palette.action.hoverOpacity),
       '@media (hover: none)': {
         backgroundColor: 'transparent',
       },
     }
-  },
-}));
-
-export default function Button({ color = 'default', variant = 'text', className, ...props }) {
+  };
+};
 
-  const classes = useStyles();
+export default function Button({ color = 'default', variant = 'text', className, sx, ...props }) {
 
   function checarCor() {
     switch (color) {
@@ -148,7 +72,8 @@ export default function Button({ color = 'default', variant = 'text', className,
     <MaterialButton
       variant={variant}
       color={checarCor()}
-      className={clsx(classes[variant], { [classes[`${variant}${capitalize(color)}`]]: color !== 'default' && color !== 'inherit' && color !== 'primary' && color !== 'secondary', }, className)}
+      className={className}
+      sx={[getCustomColorSx(color, variant), ...normalizeSx(sx)]}
       {...props}
     >
       {props.children}
@@ -174,4 +99,4 @@ Button.propTypes = {
   startIcon: PropTypes.node,
   type: PropTypes.string,
   variant: PropTypes.oneOf(['text', 'outlined', 'contained']),
-};
+};

package/lib/components/MonthPicker/MonthPicker.js

@@ -1,7 +1,7 @@
 import { createField, setField, getField, fieldChangeListener } 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 
@@ -247,7 +247,7 @@ class MonthPicker extends Component {
     const values = getField(field, 'value');
     const inputValue = getField(field, 'inputValue');
 
-    const mask = type === 'single' ? '11/1111' : '11/1111 à 11/1111';
+    const mask = type === 'single' ? '99/9999' : '99/9999 à 99/9999';
 
     return (
       <div className='monthPickermaxwidth'>

package/lib/components/OtpInput/OtpInput.tsx

@@ -1,7 +1,7 @@
 
 
 import { useUpdateEffect } from '../../utils';
-import { Box, makeStyles, OutlinedTextFieldProps, TextField } from '@material-ui/core';
+import { Box, OutlinedTextFieldProps, TextField } from '@mui/material';
 import React, { useState, useEffect, useRef } from 'react';
 
 // keyCode constants
@@ -28,47 +28,46 @@ export interface SingleProps extends Partial<Omit<Props, 'onChange'>> {
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
 }
 
-const useStyles = makeStyles(theme => ({
-  field: {
-    '& [class*="MuiInputBase-root"]': {
-      height: '100%',
-      fontSize: 'inherit'
-    },
-    [theme.breakpoints.up('xs')]: {
-      margin: theme.spacing(0),
-      width: '1em', 
-      height: '1em',
-      fontSize: '.6em'
-    },
-    [theme.breakpoints.up('sm')]: {
-      margin: theme.spacing(1),
-      width: '1em', 
-      height: '1em',
-      fontSize: '.6em'
-    },
-    [theme.breakpoints.up('md')]: {
-      margin: theme.spacing(1),
-      width: '1.2em', 
-      height: '1.2em',
-      fontSize: '.8em'
-    },
-    [theme.breakpoints.up('lg')]: {
-      margin: theme.spacing(2),
-      width: '1.5em', 
-      height: '1.5em', 
-    },
-    [theme.breakpoints.up('xl')]: {
-      margin: theme.spacing(2),
-      width: '1.6em', 
-      height: '1.6em', 
-    },
+const fieldSx = theme => ({
+  '& [class*="MuiInputBase-root"]': {
+    height: '100%',
+    fontSize: 'inherit'
   },
-  input: {
-    textAlign: 'center',
-    textTransform: 'uppercase',
-    padding: 0
-  }  
-}));
+  [theme.breakpoints.up('xs')]: {
+    margin: theme.spacing(0),
+    width: '1em',
+    height: '1em',
+    fontSize: '.6em'
+  },
+  [theme.breakpoints.up('sm')]: {
+    margin: theme.spacing(1),
+    width: '1em',
+    height: '1em',
+    fontSize: '.6em'
+  },
+  [theme.breakpoints.up('md')]: {
+    margin: theme.spacing(1),
+    width: '1.2em',
+    height: '1.2em',
+    fontSize: '.8em'
+  },
+  [theme.breakpoints.up('lg')]: {
+    margin: theme.spacing(2),
+    width: '1.5em',
+    height: '1.5em',
+  },
+  [theme.breakpoints.up('xl')]: {
+    margin: theme.spacing(2),
+    width: '1.6em',
+    height: '1.6em',
+  },
+});
+
+const inputStyle = {
+  textAlign: 'center' as const,
+  textTransform: 'uppercase' as const,
+  padding: 0
+};
 
 const SingleOtpInput = ({
   separator,
@@ -80,8 +79,7 @@ const SingleOtpInput = ({
   placeholder,
   ...props
 }: SingleProps) => {
-  const classes = useStyles();
-  const inputRef = useRef<any>();
+  const inputRef = useRef<any>(null);
 
   // Focus on first render
   // Only when autoFocus is true
@@ -98,23 +96,33 @@ const SingleOtpInput = ({
     }
   }, [focus]);
 
-  return <>
-    <TextField
-      className={classes.field}
-      variant='outlined'
-      inputProps={{
-        ...props.inputProps,
-        className: classes.input,
-        autoComplete: 'off',
-        maxLength: '1',
-        ref: inputRef,
-      }}
-      value={value || ''}
-      placeholder={placeholder && placeholder[index]}
-      {...props}
-    />
-    {!isLastChild && separator}
-  </>;
+  return (
+    <>
+      <TextField
+        sx={fieldSx}
+        variant='outlined'
+        value={value || ''}
+        placeholder={placeholder && placeholder[index]}
+        {...props}
+        slotProps={{
+          ...props.slotProps,
+          htmlInput: ownerState => {
+            const htmlInputProps = typeof props.slotProps?.htmlInput === 'function'
+              ? props.slotProps.htmlInput(ownerState)
+              : props.slotProps?.htmlInput;
+
+            return {
+              ...htmlInputProps,
+              style: { ...inputStyle, ...htmlInputProps?.style },
+              autoComplete: 'off',
+              maxLength: 1,
+              ref: inputRef,
+            };
+          },
+        }} />
+      {!isLastChild && separator}
+    </>
+  );
 };
 
 const OtpInput = ({
@@ -134,16 +142,16 @@ const OtpInput = ({
     setLocalValue(otp);
     onChange(otp.join('')?.toUpperCase());
   };
-  
+
   // Focus on input by index
   const focusInput = (input: number) => setActiveInput(Math.max(Math.min(numInputs - 1, input), 0));
-  
+
   // Focus on next input
   const focusNextInput = () => focusInput(activeInput + 1);
-  
+
   // Focus on previous input
   const focusPrevInput = () => focusInput(activeInput - 1);
-  
+
   // Change OTP value at focused input
   const changeCodeAtFocus = (value: string) => {
     const otp = otpValue;
@@ -159,7 +167,7 @@ const OtpInput = ({
     const { disabled } = props;
 
     if (disabled) return;
-    
+
     const otp = otpValue;
     let nextActiveInput = activeInput;
 
@@ -185,8 +193,8 @@ const OtpInput = ({
     }, 0);
   };
 
-  const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => changeCodeAtFocus(e.target.value);    
-  
+  const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => changeCodeAtFocus(e.target.value);
+
   // Handle cases of backspace, delete, left arrow, right arrow, space
   const handleOnKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.keyCode === BACKSPACE || e.key === 'Backspace') {
@@ -220,7 +228,7 @@ const OtpInput = ({
   const handleBlur = () => setActiveInput(-1);
 
   return (
-    <Box display='flex' alignItems='center' justifyContent='center' fontSize='8em'>
+    <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '8em' }}>
       {Array(numInputs).fill(0).map((_, i) => (
         <SingleOtpInput
           {...props}
@@ -241,4 +249,4 @@ const OtpInput = ({
   );
 };
 
-export default OtpInput;
+export default OtpInput;

package/lib/components/PercentageDisplay/PercentageDisplay.d.ts

@@ -1,4 +1,4 @@
-import { TypographyVariant } from '@material-ui/core';
+import { TypographyVariant } from '@mui/material';
 
 
 export interface PercentageDisplayProps {

package/lib/components/PercentageDisplay/PercentageDisplay.js

@@ -1,36 +1,5 @@
-import { makeStyles, Typography } from '@material-ui/core';
-import React, { useCallback, useEffect } from 'react';
-
-
-const useStyles = makeStyles({
-  container: {
-    display: 'grid',
-    placeItems: 'center'
-  },
-  circularProgress: {
-    height: ({ size }) => size,
-    width: ({ size }) => size,
-    backgroundColor: ({ barBackgroundColor }) => barBackgroundColor,
-    borderRadius: '50%',
-    display: 'grid',
-    placeItems: 'center',
-    '&::before': {
-      content: '""',
-      position: 'absolute',
-      height: ({ progressBarWidth }) => progressBarWidth,
-      width: ({ progressBarWidth }) => progressBarWidth,
-      borderRadius: '50%',
-      backgroundColor: ({ backgroundColor }) => backgroundColor
-    }
-  },
-  valueContainer: {
-    position: 'relative'
-  },
-  typography: {
-    color: ({ color }) => color,
-    fontSize: ({ fontSize }) => fontSize
-  }
-});
+import { Box, Typography } from '@mui/material';
+import React from 'react';
 
 
 const PercentageDisplay = ({ 
@@ -46,32 +15,38 @@ const PercentageDisplay = ({
   barBackgroundColor = '#00995d26'
 }) => {
 
+  const porcentagem = parseInt(percentage);
   const progressBarWidth = size - barWidth;
-  const classes = useStyles({ color, backgroundColor, barColor, barBackgroundColor, size, progressBarWidth, fontSize });
   const percentageDisplayProgressId = `${id}-percentageDisplayProgress`;
 
-  const createProgress = useCallback(() => {
-    const porcentagem = parseInt(percentage);
-    const progressBar = document.getElementById(percentageDisplayProgressId);
-    if (!progressBar) return;
-    progressBar.style.background = `conic-gradient(${barColor} ${porcentagem * 3.6}deg, ${barBackgroundColor} ${porcentagem * 3.6}deg)`;
-  }, [barBackgroundColor, barColor, percentage, percentageDisplayProgressId]);
-
-  useEffect(() => {
-    createProgress();
-  }, [percentage, createProgress]);
-
-
-  return <div className={classes.container}>
-    <div id={percentageDisplayProgressId} className={classes.circularProgress}>
-      <div className={classes.valueContainer}>
-        <Typography variant={typographyVariant} className={classes.typography}>
+  return <Box sx={{ display: 'grid', placeItems: 'center' }}>
+    <Box
+      id={percentageDisplayProgressId}
+      sx={{
+        height: size,
+        width: size,
+        background: `conic-gradient(${barColor} ${porcentagem * 3.6}deg, ${barBackgroundColor} ${porcentagem * 3.6}deg)`,
+        borderRadius: '50%',
+        display: 'grid',
+        placeItems: 'center',
+        '&::before': {
+          content: '""',
+          position: 'absolute',
+          height: progressBarWidth,
+          width: progressBarWidth,
+          borderRadius: '50%',
+          backgroundColor
+        }
+      }}
+    >
+      <Box sx={{ position: 'relative' }}>
+        <Typography variant={typographyVariant} sx={{ color, fontSize }}>
           {`${percentage}%`}
         </Typography>
-      </div>
-    </div>
-  </div>;
+      </Box>
+    </Box>
+  </Box>;
 };
 
 
-export default PercentageDisplay;
+export default PercentageDisplay;