argous 1.2.247 → 1.3.2

package/lib/components/Programa/PageCodeEasterEgg.js

@@ -1,37 +1,34 @@
-import { makeStyles, Slide, Snackbar, Typography } from '@material-ui/core';
+import { Box, Slide, Snackbar, Typography } from '@mui/material';
 import React, { useEffect, useState } from 'react';
 import { connect } from 'react-redux';
 
-const useStyles = makeStyles(theme => ({
-  container: {
-    display: 'flex',
-    overflow: 'hidden',
-    borderRadius: 4,
-    color: theme.palette.type === 'light' ? '#fff' : '#000',
-    background: `linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(${theme.palette.type === 'light' ? '66,66,66' : '255,255,255' },1) 3%)`
-  },
-  messageDiv: {
-    padding: '.5rem 1rem'
-  },
-  gradientStripe: {
-    width: '1rem',
-    background: 'linear-gradient(180deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%)'
-  }
-}));
+const containerSx = theme => ({
+  display: 'flex',
+  overflow: 'hidden',
+  borderRadius: 4,
+  color: theme.palette.mode === 'light' ? '#fff' : '#000',
+  background: `linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(${theme.palette.mode === 'light' ? '66,66,66' : '255,255,255' },1) 3%)`
+});
+const messageDivSx = {
+  padding: '.5rem 1rem'
+};
+const gradientStripeSx = {
+  width: '1rem',
+  background: 'linear-gradient(180deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%)'
+};
 
 
 const SnackbarTransition = props => <Slide {...props} direction='up' />;
 
 const PageCodeEasterEgg = ({ code, usuarioLogado }) => {
-    
-  const classes = useStyles();
+
   const [open, setOpen] = useState(false);
-    
+
   function easterEggListener(e) {
     const teamMember = usuarioLogado?.idFornecedorInterno === 1; // Membro da TI
     if (teamMember && code && !open && e.ctrlKey && e.shiftKey && e.key === 'Z') setOpen(true);
   }
-  
+
   useEffect(() => {
     document.addEventListener('keydown', easterEggListener, false);
     return () => document.removeEventListener('keydown', easterEggListener, false);
@@ -40,27 +37,31 @@ const PageCodeEasterEgg = ({ code, usuarioLogado }) => {
 
   const handleClose = _ => setOpen(false);
 
-  
-  return <Snackbar 
-    open={open} 
-    onClose={handleClose}
-    autoHideDuration={5000}
-    TransitionComponent={SnackbarTransition}
-    anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
-  >
-    <div className={classes.container}>
-      <div className={classes.gradientStripe} />
-      <div className={classes.messageDiv}>
-        <Typography variant='subtitle1'>Hi, dev!</Typography>
-        <Typography variant='body1'>{`The page code is ${code}.`}</Typography>
-      </div>
-    </div>
-  </Snackbar>;
+
+  return (
+    <Snackbar
+      open={open}
+      onClose={handleClose}
+      autoHideDuration={5000}
+      anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+      slots={{
+        transition: SnackbarTransition
+      }}
+    >
+      <Box sx={containerSx}>
+        <Box sx={gradientStripeSx} />
+        <Box sx={messageDivSx}>
+          <Typography variant='subtitle1'>Hi, dev!</Typography>
+          <Typography variant='body1'>{`The page code is ${code}.`}</Typography>
+        </Box>
+      </Box>
+    </Snackbar>
+  );
 };
 
 
-const mapStateToProps = (state) => ({ 
-  usuarioLogado: state.argous.usuarioLogado 
+const mapStateToProps = (state) => ({
+  usuarioLogado: state.argous.usuarioLogado
 });
 
-export default connect(mapStateToProps)(PageCodeEasterEgg);
+export default connect(mapStateToProps)(PageCodeEasterEgg);

package/lib/components/Programa/Programa.d.ts

@@ -1,5 +1,5 @@
 import { TabArray } from './Tab';
-import { BoxProps } from '@material-ui/core';
+import { BoxProps } from '@mui/material';
 import * as React from 'react';
 
 
@@ -45,4 +45,4 @@ export interface ProgramaProps extends BoxProps {
 
 declare function Programa(props: ProgramaProps): JSX.Element
 
-export default Programa;
+export default Programa;

package/lib/components/Programa/Programa.js

@@ -3,7 +3,7 @@ import PageCodeEasterEgg from './PageCodeEasterEgg';
 import TabNavigationRail from './TabNavigationRail';
 import * as argous from '../../actions';
 import { getProgram, toggleFavorite } from '../../api';
-import { Box, CircularProgress, Paper, Typography, useMediaQuery, useTheme } from '@material-ui/core';
+import { Box, CircularProgress, Paper, Typography, useMediaQuery, useTheme } from '@mui/material';
 import { isArray } from 'lodash';
 import PropTypes from 'prop-types';
 import React, { useEffect, useState } from 'react';
@@ -125,7 +125,12 @@ function Programa({
   if (bfTitulo === undefined) bfTitulo = pnlTitle;
 
   return (
-    <Box fontFamily='Raleway, Helvetica, Arial, sans-serif' className={className} {...props}>
+    <Box
+      className={className}
+      {...props}
+      sx={[{
+        fontFamily: 'Raleway, Helvetica, Arial, sans-serif'
+      }, ...(Array.isArray(props.sx) ? props.sx : [props.sx])]}>
       {!hideTitle &&
         <span style={{ cursor: 'default', overflow: 'hidden', display: 'block', marginBottom: '2px', color: theme.palette.text.primary }}>
           <h2 className='reset-margin pull-left' style={{ color: theme.palette.text.primary }}>
@@ -166,12 +171,23 @@ function Programa({
           }} 
         />
         {dsErro ? (
-          <Box textAlign='center' >
+          <Box sx={{
+            textAlign: 'center'
+          }} >
             <FaExclamationTriangle style={{ color: '#ED1651', width: '90px', height: '90px' }} />
             <Typography variant='h6'>{dsErro}</Typography>
           </Box>
         ) : (!pnlTitle || loading || !loaded) ? (
-          <Box position='relative' top={20} left='50%' z-index={20} height={80} width={0} marginLeft='-20px'>
+          <Box
+            z-index={20}
+            sx={{
+              position: 'relative',
+              top: 20,
+              left: '50%',
+              height: 80,
+              width: 0,
+              marginLeft: '-20px'
+            }}>
             <CircularProgress disableShrink/>
           </Box>
         ) : (
@@ -237,4 +253,4 @@ Programa.propTypes = {
   // permissoes: PropTypes.object,
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(Programa);
+export default connect(mapStateToProps, mapDispatchToProps)(Programa);

package/lib/components/Programa/Tab.ts

@@ -1,6 +1,8 @@
+import { IconType } from 'react-icons';
+
 export interface TabArray { 
   [0]: (string | undefined), 
   [1]?: (string | undefined), 
   [2]?: (string | undefined), 
-  [3]?: (JSX.Element | undefined) 
-}
+  [3]?: (IconType | undefined) 
+}

package/lib/components/Programa/TabNavigationRail.js

@@ -1,7 +1,6 @@
-import { usePrevious } from '../../utils';
-import { alpha, IconButton, Paper, Tooltip, useTheme } from '@material-ui/core';
+import { alpha, IconButton, Paper, Tooltip, useTheme } from '@mui/material';
 import { isArray, isEqual, isNumber } from 'lodash';
-import React, { useEffect, useRef } from 'react';
+import React from 'react';
 import { IoSettings } from 'react-icons/io5';
 
 
@@ -20,9 +19,6 @@ const TabNavigationRail = ({
   executesFunction = () => '' 
 }) => {
 
-  const selectedTabRef = useRef(selectedTab);
-  const setSelectedTabRef = useRef(setSelectedTab);
-
   const theme = useTheme();
 
   const styles = { 
@@ -55,35 +51,17 @@ const TabNavigationRail = ({
     } 
   };
 
-  const previousTabs = usePrevious(tabs);
-
-  useEffect(() => {
-
-    if (isEqual(tabs, previousTabs) || !!selectedTabRef.current?.length) return;
-    if (!tabs?.length) {
-      if (typeof setSelectedTabRef.current === 'function') setSelectedTabRef.current([]);
-    } else for (let index = 0; index < tabs?.length; index++) {
-
-      const tab = tabs[index];
-
-      if (tab?.[TAB_ACTIVE_INDEX] === 'active') {
-        if (typeof setSelectedTabRef.current === 'function') setSelectedTabRef.current(tab);
-        break;
-      }
-    }
-  }, [tabs, previousTabs]);
-
-  const navigate = (event, index, tab) => {
+  const navigate = (index, tab) => {
 
     const alias = tab?.[TAB_ALIAS_INDEX];
 
-    if (typeof setSelectedTabRef.current === 'function') setSelectedTabRef.current(tab);
+    if (typeof setSelectedTab === 'function') setSelectedTab(tab);
     if (isNumber(index)) executesFunction(alias || `T${index}`);
   };
 
 
   return (
-    <Paper component='nav' elevation={1} style={styles.rail}>
+    <Paper component='nav' elevation={1} sx={styles.rail}>
       {(isArray(tabs)) && tabs.map((tab, tabIndex) => {
 
         const label = tab?.[TAB_LABEL_INDEX];
@@ -92,13 +70,13 @@ const TabNavigationRail = ({
 
 
         return (
-          <Tooltip key={label} title={label} placement='right'>
+          <Tooltip key={`${label || 'tab'}-${tabIndex}`} title={label || ''} placement='right'>
             <IconButton 
               size='small' 
               aria-label={label} 
               aria-current={(active) ? 'page' : undefined} 
-              onClick={(event) => navigate(event, tabIndex, tab)} 
-              style={{ ...styles.button, ...((active) ? styles.activeButton : {}) }}
+              onClick={() => navigate(tabIndex, tab)} 
+              sx={{ ...styles.button, ...((active) ? styles.activeButton : {}) }}
             >
               {(Icon) && (
                 <Icon style={styles.icon} />
@@ -115,4 +93,4 @@ const TabNavigationRail = ({
 };
 
 
-export default TabNavigationRail;
+export default TabNavigationRail;

package/lib/components/Stepper/Stepper.d.ts

@@ -1,4 +1,4 @@
-import { OverrideProps, OverridableComponent } from '@material-ui/core/OverridableComponent';
+import { OverrideProps, OverridableComponent } from '@mui/material/OverridableComponent';
 import * as React from 'react';
 import { IconType } from 'react-icons';