argous 1.2.247 → 1.3.3

package/lib/components/AutoCompleteFavorites/AutoCompleteFavorites.js

@@ -1,28 +1,42 @@
 import { serverAction } from '../../utils/api';
-import { CircularProgress, Fade, IconButton, ListItem, ListItemText, ListSubheader, makeStyles, Popper, Slide, TextField, Tooltip, withStyles } from '@material-ui/core';
-import { Autocomplete } from '@material-ui/lab';
-import clsx from 'clsx';
+import { CircularProgress, Fade, GlobalStyles, IconButton, ListItem, ListItemText, ListSubheader, Popper, Slide, TextField, Tooltip, Autocomplete } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { tooltipClasses } from '@mui/material/Tooltip';
+import { clsx } from 'clsx';
 import { isArray, isObject, isString } from 'lodash';
 import React, { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
 import { IoIosSearch } from 'react-icons/io';
 
-const useStyles = makeStyles((theme) => ({
-  subHeader: {
+const classes = {
+  subHeader: 'argous-autocomplete-favorites-sub-header',
+  divButton: 'argous-autocomplete-favorites-div-button',
+  areaButton: 'argous-autocomplete-favorites-area-button',
+  button: 'argous-autocomplete-favorites-button',
+  buttonActive: 'argous-autocomplete-favorites-button-active',
+  listItem: 'argous-autocomplete-favorites-list-item',
+  hoverListItem: 'argous-autocomplete-favorites-hover-list-item',
+  listItemText: 'argous-autocomplete-favorites-list-item-text',
+  box: 'argous-autocomplete-favorites-box',
+  searchButton: 'argous-autocomplete-favorites-search-button',
+};
+
+const favoritesStyles = theme => ({
+  [`.${classes.subHeader}`]: {
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'space-between',
     backgroundColor: theme.palette.background.default,
     height: 25
   },
-  divButton: {
+  [`.${classes.divButton}`]: {
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
   },
-  areaButton: {
+  [`.${classes.areaButton}`]: {
     padding: '0px 8px 0px 8px'
   },
-  button: theme.palette.type === 'light' ? {
+  [`.${classes.button}`]: theme.palette.mode === 'light' ? {
     width: 15,
     height: 15,
     display: 'flex',
@@ -47,7 +61,7 @@ const useStyles = makeStyles((theme) => ({
       color: '#ffffff',
     }
   },
-  buttonActive: theme.palette.type === 'light' ? {
+  [`.${classes.buttonActive}`]: theme.palette.mode === 'light' ? {
     color: 'rgba(0, 0, 0, 0.8)',
     '&:hover': {
       fontWeight: 600,
@@ -58,18 +72,18 @@ const useStyles = makeStyles((theme) => ({
       fontWeight: 600,
     }
   },
-  listItem: {
+  [`.${classes.listItem}`]: {
     padding: 0,
     width: '100%',
     cursor: 'pointer',
     '&:hover': {
-      background: theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.05)' : 'rgba(255, 255, 255, 0.08)'
+      background: theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.05)' : 'rgba(255, 255, 255, 0.08)'
     }
   },
-  hoverListItem: {
-    background: theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.05)' : 'rgba(255, 255, 255, 0.08)'
+  [`.${classes.hoverListItem}`]: {
+    background: theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.05)' : 'rgba(255, 255, 255, 0.08)'
   },
-  listItemText: {
+  [`.${classes.listItemText}`]: {
     margin: 0,
     width: '100%',
     direction: 'ltr',
@@ -78,7 +92,7 @@ const useStyles = makeStyles((theme) => ({
     textOverflow: 'ellipsis',
     padding: '0px 0px 0px 6px',
   },
-  box: {
+  [`.${classes.box}`]: {
     padding: 0,
     overflowX: 'hidden',
     '&::-webkit-scrollbar': {
@@ -88,28 +102,34 @@ const useStyles = makeStyles((theme) => ({
       background: '#0000'
     },
     '&::-webkit-scrollbar-thumb': {
-      background: theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.1)' : 'rgba(255, 255, 255, 0.1)'
+      background: theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.1)' : 'rgba(255, 255, 255, 0.1)'
     }
   },
-  searchButton: {
-    color: theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.4)' : 'rgba(255, 255, 255, 0.5)',
+  [`.${classes.searchButton}`]: {
+    color: theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.4)' : 'rgba(255, 255, 255, 0.5)',
     '&:hover': {
-      color: theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255, 0.9)',
+      color: theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255, 0.9)',
       background: '#0000'
     }
-  },
-  popper: {
-    zIndex: 1300,
-    width: ({ widthListBox }) => widthListBox ? `${widthListBox}${testWidth(widthListBox.toString()) ? 'px' : ''} !important` : '',
   }
-}));
+});
 
 const testWidth = value => value.replace(/[0-9]/g, '')?.length ? false : true;
 
-const CustomPopper = (props, classes) => <Popper {...props} className={classes.popper} />;
-
-export const CustomTooltip = withStyles((theme) => ({
-  tooltip: theme.palette.type === 'light' ? {
+const CustomPopper = ({ widthListBox, ...props }) => (
+  <Popper
+    {...props}
+    sx={{
+      zIndex: 1300,
+      width: widthListBox ? `${widthListBox}${testWidth(widthListBox.toString()) ? 'px' : ''} !important` : undefined,
+    }}
+  />
+);
+
+export const CustomTooltip = styled(({ className, ...props }) => (
+  <Tooltip {...props} classes={{ popper: className }} />
+))(({ theme }) => ({
+  [`& .${tooltipClasses.tooltip}`]: theme.palette.mode === 'light' ? {
     fontSize: 15,
     fontWeight: 400,
     color: '#FFF',
@@ -120,14 +140,13 @@ export const CustomTooltip = withStyles((theme) => ({
     color: '#000',
     backgroundColor: '#fbfbfbd1',
   },
-  arrow: {
-    color: theme.palette.type === 'light' ? '#333333e3' : '#fbfbfbd1'
+  [`& .${tooltipClasses.arrow}`]: {
+    color: theme.palette.mode === 'light' ? '#333333e3' : '#fbfbfbd1'
   }
-}))(Tooltip);
+}));
 
 const ListboxFavorites = forwardRef((props, ref) => {
 
-  const classes = useStyles();
   const { children, favoritePage, dados, setDados, group, groupHeaderColor, groupTitleColor } = props;
   const { pageNumber, favoritosLength, direction, slide, cursor } = dados;
 
@@ -162,7 +181,7 @@ const ListboxFavorites = forwardRef((props, ref) => {
 
   function retornaEstrutura(sectionIndex, item, itemIndex) {
     const index = itemIndex ? itemIndex : sectionIndex;
-    const content = <CustomTooltip title={item.props.children} arrow enterDelay='1000' enterNextDelay='1000' placement='top-end' TransitionComponent={Fade} TransitionProps={{ timeout: { enter: 100, exit: 500 } }}>
+    const content = <CustomTooltip title={item.props.children} arrow enterDelay='1000' enterNextDelay='1000' placement='top-end' slots={{ transition: Fade }} slotProps={{ transition: { timeout: { enter: 100, exit: 500 } } }}>
       <ListItem {...item.props} id='listItem' key={item.key} className={clsx(classes.listItem, { [classes.hoverListItem]: cursor?.index === index && cursor?.page === pageNumber })}>
         <ListItemText primary={item.props.children} className={classes.listItemText} />
       </ListItem>
@@ -200,36 +219,39 @@ const ListboxFavorites = forwardRef((props, ref) => {
     return 'left';
   }
 
-  return <ul {...props} id='listBox' className={clsx('MuiAutocomplete-listbox', classes.box)}>
-    {children.map((section, sectionIndex) => (group ?
-      <React.Fragment>
-        <ul {...props} id='listBox' className={clsx('MuiAutocomplete-listbox', classes.box)}>
-          <ListSubheader className={classes.subHeader} style={{ backgroundColor: groupHeaderColor?.[sectionIndex], color: groupTitleColor?.[sectionIndex] }}>
-            {section.props.children[0].props.children}
-            <Fade in={sectionIndex === 0 && favoritePage && favoritosLength > 7}>
-              <div className={classes.divButton}>
-                <div className={classes.areaButton}>
-                  <div onClick={e => buttonClick(e, 1)} className={clsx({ [classes.buttonActive]: pageNumber === 1 }, classes.button)}>1</div>
-                </div>
-                <div className={classes.areaButton}>
-                  <div onClick={e => buttonClick(e, 2)} className={clsx({ [classes.buttonActive]: pageNumber === 2 }, classes.button)}>2</div>
-                </div>
-                {favoritosLength > 14 &&
+  return <>
+    <GlobalStyles styles={favoritesStyles} />
+    <ul {...props} ref={ref} id='listBox' className={clsx('MuiAutocomplete-listbox', classes.box)}>
+      {children.map((section, sectionIndex) => (group ?
+        <React.Fragment>
+          <ul {...props} id='listBox' className={clsx('MuiAutocomplete-listbox', classes.box)}>
+            <ListSubheader className={classes.subHeader} style={{ backgroundColor: groupHeaderColor?.[sectionIndex], color: groupTitleColor?.[sectionIndex] }}>
+              {section.props.children[0].props.children}
+              <Fade in={sectionIndex === 0 && favoritePage && favoritosLength > 7}>
+                <div className={classes.divButton}>
+                  <div className={classes.areaButton}>
+                    <div onClick={e => buttonClick(e, 1)} className={clsx({ [classes.buttonActive]: pageNumber === 1 }, classes.button)}>1</div>
+                  </div>
+                  <div className={classes.areaButton}>
+                    <div onClick={e => buttonClick(e, 2)} className={clsx({ [classes.buttonActive]: pageNumber === 2 }, classes.button)}>2</div>
+                  </div>
+                  {favoritosLength > 14 &&
                   <React.Fragment>
                     <div className={classes.areaButton}>
                       <div onClick={e => buttonClick(e, 3)} className={clsx({ [classes.buttonActive]: pageNumber === 3 }, classes.button)}>3</div>
                     </div>
                   </React.Fragment>
-                }
-              </div>
-            </Fade>
-          </ListSubheader>
-          {retornaArray(sectionIndex, section).map((item, itemIndex) => retornaEstrutura(sectionIndex, item, itemIndex))}
-        </ul>
-      </React.Fragment>
-      : retornaEstrutura(sectionIndex, section)
-    ))}
-  </ul>;
+                  }
+                </div>
+              </Fade>
+            </ListSubheader>
+            {retornaArray(sectionIndex, section).map((item, itemIndex) => retornaEstrutura(sectionIndex, item, itemIndex))}
+          </ul>
+        </React.Fragment>
+        : retornaEstrutura(sectionIndex, section)
+      ))}
+    </ul>
+  </>;
 });
 
 const AutoCompleteFavorites = ({ 
@@ -252,11 +274,12 @@ const AutoCompleteFavorites = ({
   searchParams,
   autoSelectFirstOption,
   onChange = e => e,
-  textFieldProps = {}, 
+  textFieldProps = {},
+  slots = {},
+  slotProps = {},
   ...props 
 }) => {
   
-  const classes = useStyles({ widthListBox });
   const [dados, setDados] = useState({
     lista: [],
     slide: true,
@@ -266,6 +289,15 @@ const AutoCompleteFavorites = ({
     pageNumber: favoritePage ? 1 : undefined,
   });
   const [loading, setLoading] = useState(false);
+  const {
+    FormHelperTextProps,
+    InputLabelProps,
+    InputProps,
+    inputProps,
+    SelectProps,
+    slotProps: textFieldSlotProps = {},
+    ...resolvedTextFieldProps
+  } = textFieldProps;
   const [inputValue, setInputValue] = useState('');
 
   const interval = useRef(null);
@@ -304,14 +336,22 @@ const AutoCompleteFavorites = ({
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [inputValue, searchParams]);
 
-  useEffect(() => autoSearch && seconds === 1 && buscar(), [autoSearch, seconds, buscar]);
+  useEffect(() => {
+    if (autoSearch && seconds === 1) buscar();
+  }, [autoSearch, seconds, buscar]);
+  useEffect(() => {
+    if (isString(value)) buscar(value);
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  useEffect(() => isString(value) && buscar(value), []);
+  }, []);
 
-  useEffect(() => (value !== dados.cursor?.linha) && setDados(v => ({ ...v, cursor: { index: '', page: '' } })), [value, dados.cursor?.linha]);
+  useEffect(() => {
+    if (value !== dados.cursor?.linha) setDados(v => ({ ...v, cursor: { index: '', page: '' } }));
+  }, [value, dados.cursor?.linha]);
 
+  useEffect(() => {
+    if (autoSelectFirstOption && !!inputValue.length) onChange(undefined, dados?.lista?.[0] || null);
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  useEffect(() => autoSelectFirstOption && !!inputValue.length && onChange(undefined, dados?.lista?.[0] || null), [dados.lista]);
+  }, [dados.lista]);
 
   const keyDown = e => {
     ((e.key === 'Enter' || e.key === 'Tab') && !loading) && buscar();
@@ -401,52 +441,78 @@ const AutoCompleteFavorites = ({
       }
     }
   }, [dados]);
-  useEffect(() => dados.lista?.length && setTimeout(() => scrollToSelected(), 0), [dados.lista, scrollToSelected]);
+  useEffect(() => {
+    if (!dados.lista?.length) return undefined;
+    const timeoutId = setTimeout(() => scrollToSelected(), 0);
+    return () => clearTimeout(timeoutId);
+  }, [dados.lista, scrollToSelected]);
 
   return (
-    <Autocomplete
-      {...props}
-      {...{ value, onChange }}
-      autoComplete
-      autoHighlight
-      openText='Abrir'
-      clearText='Limpar'
-      filterSelectedOptions
-      onInputChange={e => setInput(e?.target?.value || '')}
-      getOptionSelected={(o, v) => o[0] === v}
-      getOptionLabel={getOptionLabel && (option => getOptionLabel(option, dados?.lista))}
-      noOptionsText={inputValue.length < 2 ? 'Digite para pesquisar' : 'Não Encontrado'}
-      options={isObject(value) ? dados?.lista.filter(v => filterFunction ? filterFunction(v, value) : true || v[0] !== value[0]) : dados?.lista}
-      renderInput={params => (
-        <TextField
-          margin='dense'
-          variant='outlined'
-          label={label}
-          {...params}
-          {...textFieldProps}
-          onKeyUp={e => keyUp(e)}
-          inputProps={{
-            ...params.inputProps,
-            onKeyDown: e => keyDown(e)
-          }}
-          InputProps={{
-            ...textFieldProps.InputProps,
-            ...params.InputProps,
-            endAdornment: (
-              <React.Fragment>
-                {params.InputProps.endAdornment}
-                <Fade in={loading}><CircularProgress disableShrink color={loadingColor || 'inherit'} size={20} /></Fade>
-                {!autoSearch && <IconButton size='small' onClick={e => buscar()} className={classes.searchButton}><IoIosSearch size={20} /></IconButton>}
-              </React.Fragment>
-            )
-          }}
-        />
-      )}
-      ListboxComponent={ListboxFavorites}
-      ListboxProps={{ dados, setDados, favoritePage, group, groupHeaderColor, groupTitleColor }}
-      PopperComponent={props => CustomPopper(props, classes)}
-    />
+    <>
+      <GlobalStyles styles={favoritesStyles} />
+      <Autocomplete
+        {...props}
+        {...{ value, onChange }}
+        autoComplete
+        autoHighlight
+        openText='Abrir'
+        clearText='Limpar'
+        filterSelectedOptions
+        onInputChange={e => setInput(e?.target?.value || '')}
+        isOptionEqualToValue={(o, v) => o[0] === (isArray(v) ? v[0] : v)}
+        getOptionLabel={getOptionLabel && (option => getOptionLabel(option, dados?.lista))}
+        noOptionsText={inputValue.length < 2 ? 'Digite para pesquisar' : 'Não Encontrado'}
+        options={isObject(value) ? dados?.lista.filter(v => filterFunction ? filterFunction(v, value) : true || v[0] !== value[0]) : dados?.lista}
+        renderInput={params => (
+          <TextField
+            margin='dense'
+            variant='outlined'
+            label={label}
+            {...params}
+            {...resolvedTextFieldProps}
+            onKeyUp={e => keyUp(e)}
+            slotProps={{
+              ...textFieldSlotProps,
+              ...params.slotProps,
+
+              input: {
+                ...InputProps,
+                ...textFieldSlotProps.input,
+                ...params.slotProps.input,
+                endAdornment: (
+                  <React.Fragment>
+                    {params.slotProps.input.endAdornment}
+                    <Fade in={loading}><CircularProgress disableShrink color={loadingColor || 'inherit'} size={20} /></Fade>
+                    {!autoSearch && <IconButton size='small' onClick={e => buscar()} className={classes.searchButton}><IoIosSearch size={20} /></IconButton>}
+                  </React.Fragment>
+                )
+              },
+
+              htmlInput: {
+                ...inputProps,
+                ...textFieldSlotProps.htmlInput,
+                ...params.slotProps.htmlInput,
+                onKeyDown: e => keyDown(e)
+              },
+              formHelperText: { ...FormHelperTextProps, ...textFieldSlotProps.formHelperText, ...params.slotProps.formHelperText },
+              inputLabel: { ...InputLabelProps, ...textFieldSlotProps.inputLabel, ...params.slotProps.inputLabel },
+              select: { ...SelectProps, ...textFieldSlotProps.select, ...params.slotProps.select }
+            }} />
+        )}
+        slots={{
+          ...slots,
+          popper: popperProps => <CustomPopper {...popperProps} widthListBox={widthListBox} />
+        }}
+        slotProps={{
+          ...slotProps,
+          listbox: {
+            component: ListboxFavorites,
+            ...slotProps.listbox,
+            ...{ dados, setDados, favoritePage, group, groupHeaderColor, groupTitleColor }
+          }
+        }} />
+    </>
   );
 };
 
-export default AutoCompleteFavorites;
+export default AutoCompleteFavorites;

package/lib/components/BarraFerramentas/BarraFerramentas.js

@@ -2,7 +2,8 @@ import { Compartilhar } from '..';
 import ThreadLog from '../../components/ThreadLog';
 import { usePrevious } from '../../utils';
 import { TAB_ACTIVE_INDEX, TAB_ALIAS_INDEX, TAB_ICON_INDEX, TAB_LABEL_INDEX } from '../Programa/TabNavigationRail';
-import { Box, CircularProgress, ClickAwayListener, Collapse, Divider, IconButton, ListItemIcon, ListItemText, makeStyles, MenuItem, MenuList, Paper, Popper, Toolbar, Tooltip, Typography, useMediaQuery, useTheme, withStyles } from '@material-ui/core';
+import { Box, CircularProgress, ClickAwayListener, Collapse, Divider, GlobalStyles, IconButton, ListItemIcon, ListItemText, MenuItem, MenuList, Paper, Popper, Toolbar, Tooltip, Typography, useMediaQuery, useTheme } from '@mui/material';
+import { styled } from '@mui/material/styles';
 import { isArray, isNumber, isEqual, isFunction } from 'lodash';
 import PropTypes from 'prop-types';
 import React, { useEffect, useRef, useState } from 'react';
@@ -12,11 +13,17 @@ import { IoSettings } from 'react-icons/io5';
 import { MdShare, MdFormatListBulleted, MdArrowBack, MdEdit, MdDelete, MdSave, MdKeyboardArrowRight, MdFirstPage, MdKeyboardArrowLeft, MdLastPage, MdEditNote } from 'react-icons/md';
 
 
-const TAB_ICON_SIZE = 20;
+const classes = {
+  root: 'argous-barra-ferramentas-root',
+  menuButton: 'argous-barra-ferramentas-menu-button',
+  title: 'argous-barra-ferramentas-title',
+  navigator: 'argous-barra-ferramentas-navigator',
+};
 
+const TAB_ICON_SIZE = 20;
 
-const useStyles = makeStyles(theme => ({
-  root: {
+const toolbarStyles = ({ habNavegador }) => theme => ({
+  [`.${classes.root}`]: {
     zIndex: 0,
     margin: '-11px',
     marginBottom: 0,
@@ -35,35 +42,34 @@ const useStyles = makeStyles(theme => ({
     },
     '&:hover': {
       '&::-webkit-scrollbar-thumb': {
-        background: theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.05)' : 'rgba(255, 255, 255, 0.05)'
+        background: theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.05)' : 'rgba(255, 255, 255, 0.05)'
       }
     }
   },
-  menuButton: {
+  [`.${classes.menuButton}`]: {
     marginRight: theme.spacing(2),
   },
-  menuSelected: {
-    backgroundColor: theme.palette.action.selected
-  },
-  title: {
-    flexGrow: ({ habNavegador }) => habNavegador ? 0 : 1,
+  [`.${classes.title}`]: {
+    flexGrow: habNavegador ? 0 : 1,
   },
-  navigator: {
+  [`.${classes.navigator}`]: {
     flexGrow: 1,
     marginLeft: theme.spacing(2)
   }
-}));
+});
 
-const ToolbarTooltip = withStyles({
-  popper: {
+const ToolbarTooltip = styled(Tooltip)({
+  '&.MuiTooltip-popper': {
     zIndex: 1300
   }
-})(Tooltip);
+});
 
 
 const CustomTooltip = ({ disabled, arrow, placement, title, children }) => {
   const [open, setOpen] = useState(false);
-  useEffect(() => (disabled && open) && setOpen(false), [disabled, open]);
+  useEffect(() => {
+    if (disabled && open) setOpen(false);
+  }, [disabled, open]);
   return (
     <ToolbarTooltip 
       {...{ arrow, placement, title }} 
@@ -108,13 +114,15 @@ function BarraFerramentas ({
 }) {
 
   const theme = useTheme();
-  const classes = useStyles({ habNavegador });
   const xs = useMediaQuery(theme.breakpoints.only('xs'));
-
   const anchorMenu = useRef(null);
   const anchorCompartilhar = useRef(null);
   const setSelectedTabRef = useRef(setSelectedTab);
 
+  useEffect(() => {
+    setSelectedTabRef.current = setSelectedTab;
+  }, [setSelectedTab]);
+
   const [open, setOpen] = useState(false);
   const [habEditar, setHabEditar] = useState(true);
   const [habSalvar, setHabSalvar] = useState(false);
@@ -201,6 +209,7 @@ function BarraFerramentas ({
 
 
   return <>
+    <GlobalStyles styles={toolbarStyles({ habNavegador })} />
     <Toolbar className={classes.root} variant='dense'>
       {(xs && isArray(abas) && (abas?.length > 0)) && (
         <IconButton id='botaoAbasBarraFerramentas' ref={anchorMenu} onClick={toggleAbas} className={classes.menuButton}>
@@ -386,7 +395,9 @@ BarraFerramentas.propTypes = {
   threads: PropTypes.array,
   currentProgram: PropTypes.string,
   habWidget: PropTypes.bool,
-  addWidget: PropTypes.func
+  addWidget: PropTypes.func,
+  selectedTab: PropTypes.array,
+  setSelectedTab: PropTypes.func
 };
 
-export default BarraFerramentas;
+export default BarraFerramentas;

package/lib/components/Calendar/Calendar.js

@@ -1,6 +1,5 @@
 import { createField, initField, getField } from '../../fieldsRedux';
 import { addExtraZero } from '../../utils';
-import { getMonthName } from '../../utils/date';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { Calendar as CalDep } from 'react-date-range';
@@ -35,32 +34,12 @@ class Calendar extends Component {
 
   handleClickCalendar = (e) => {
 
-    const eCls = e.target.className;
-    const eClsP = e.target.parentNode.className;
+    const navigationButton = e.target.closest('.rdrNextPrevButton');
 
-    const prev = eCls !== 'rdr-MonthAndYear-button next' && eClsP !== 'rdr-MonthAndYear-button next';
-    const next = eCls !== 'rdr-MonthAndYear-button prev' && eClsP !== 'rdr-MonthAndYear-button prev';
-
-    if (next && prev) {
+    if (!navigationButton) {
       this.setState({ open: false });
       document.removeEventListener('click', this.handleClickCalendar);
-    } else {
-      const { month } = this.state;
-
-      let newMonth = next
-        ? month + 1
-        : month - 1;
-
-      newMonth = newMonth < 0
-        ? 11
-        : newMonth > 11
-          ? 0
-          : newMonth;
-
-      this.setState({ month: newMonth });
-      this.setMonthName(null, newMonth);
     }
-
   }
 
   checkDefaultValue = (defaultValue) => {
@@ -93,9 +72,9 @@ class Calendar extends Component {
   handleSelect = (date) => {
     const { onChange } = this.props;
 
-    const day = date._d.getDate();
-    const month = (date._d.getMonth() + 1);
-    const year = date._d.getFullYear();
+    const day = date.getDate();
+    const month = (date.getMonth() + 1);
+    const year = date.getFullYear();
 
     const formattedDate = `${addExtraZero(day)}/${addExtraZero(month)}/${year}`;
 
@@ -107,22 +86,8 @@ class Calendar extends Component {
     this.setState({ open: false });
   }
 
-  setMonthName = (date, month) => {
-
-    if (date) {
-      this.setState({ month: date._d.getMonth() });
-    }
-
-    const name = getMonthName(typeof month !== 'undefined'
-      ? month
-      : date._d.getMonth());
-
-    const monthDescription = document.getElementsByClassName('rdr-MonthAndYear-month')[0];
-    monthDescription.innerHTML = name;
-  }
-
   render() {
-    const { openCalendar, handleSelect, setMonthName } = this;
+    const { openCalendar, handleSelect } = this;
     const { open } = this.state;
     const { field } = this.props;
 
@@ -131,7 +96,7 @@ class Calendar extends Component {
     return (
       <div className='argous-calendar'>
         <span onMouseUp={openCalendar}>{date ? date : 'dd/mm/aaaa'}</span>
-        {open && (<CalDep date={date} onChange={handleSelect} onInit={setMonthName} />)}
+        {open && (<CalDep date={date ? new Date(date.split('/').reverse().join('-') + 'T00:00:00') : new Date()} onChange={handleSelect} />)}
       </div>
     );
   }