argous 1.2.246 → 1.3.2

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.d.ts

@@ -1,8 +1,23 @@
+import { TabArray } from '../Programa/Tab';
 import { IconType } from 'react-icons';
 
+
 export interface BarraFerramentasProps {
   titulo?: string,
-  abas?: [string, 'active' | undefined][],
+  /**
+   * Abas para a barra de ferramentas
+   * 
+   * Array de arrays
+   * 
+   * Array da aba: [('Label' || undefined), ('active' || undefined), ('alias' || undefined), (Icon || undefined)]
+   * 
+   * - [0] Label: Rótulo da aba.
+   * - [1] Active: Quando 'active' inicia o programa com essa aba selecionada.
+   * - [2] Alias: O nome que será recebido na função 'bfExecutaFuncao'. Caso não forneça esse nome a função retorna 'T[index]'.
+   * - [3] Icon: JSX do ícone da aba.
+   * 
+   */
+  abas?: Array<TabArray>,
   ferramentas?: [IconType, string, string | (() => void) ][][],
   habCrud?: boolean,
   habNavegador?: boolean,
@@ -18,7 +33,20 @@ export interface BarraFerramentasProps {
   addWidget?: () => void,
   snAnotacaoPrograma: boolean,
   openAnnotations: (event: Event) => void,
-  toolbarLoading: object
+  toolbarLoading: object,
+  /**
+   * Aba selecionada
+   * 
+   * Array da aba: [('Label' || undefined), ('active' || undefined), ('alias' || undefined), (Icon || undefined)]
+   * 
+   * - [0] Label: Rótulo da aba.
+   * - [1] Active: Quando 'active' inicia o programa com essa aba selecionada.
+   * - [2] Alias: O nome que será recebido na função 'bfExecutaFuncao'. Caso não forneça esse nome a função retorna 'T[index]'.
+   * - [3] Icon: JSX do ícone da aba.
+   * 
+   */
+  selectedTab?: TabArray,
+  setSelectedTab?: (tab: TabArray) => void
 }
 
 declare function BarraFerramentas(props: BarraFerramentasProps): JSX.Element