argous 1.2.246 → 1.3.2

package/lib/components/TextToHtml/TextStyles.js

@@ -1,4 +1,4 @@
-import { ClickAwayListener, IconButton, makeStyles } from '@material-ui/core';
+import { Box, ClickAwayListener, IconButton } from '@mui/material';
 import React, { useState } from 'react';
 import { RgbaColorPicker } from 'react-colorful';
 import { RiAlignCenter, RiAlignJustify, RiAlignLeft, RiAlignRight, RiFontColor, RiFontSize } from 'react-icons/ri';
@@ -7,37 +7,38 @@ import { RiAlignCenter, RiAlignJustify, RiAlignLeft, RiAlignRight, RiFontColor,
 const ICON_SIZE = '2.5rem';
 const BOX_SHADOW = 'rgba(0, 0, 0, 0.3) 0px 1px 12px -2px';
 
-const useStyles = makeStyles(theme => ({
-  container: {
-    zIndex: 1,
-    position: 'absolute',
-    top: 0,
-    right: 0,
-    display: 'flex',
-    alignItems: 'flex-start',
-    justifyContent: 'flex-end',
-    gap: ({ defaultSpacing }) => (defaultSpacing) ? defaultSpacing : ''
-  },
-  button: {
-    padding: ({ defaultSpacing }) => (defaultSpacing) ? (defaultSpacing / 2) : '',
-    color: `rgba(${(theme.palette.type === 'light') ? '0, 0, 0' : '255, 255, 255'}, .7)`,
-    backgroundColor: `rgba(${(theme.palette.type === 'light') ? '255, 255, 255' : '0, 0, 0'}, .5)`,
-    '&:hover': {
-      backgroundColor: `rgba(${(theme.palette.type === 'light') ? '255, 255, 255' : '0, 0, 0'}, .7)`
-    }
-  },
-  colorPickerContainer: {
-    zIndex: 2,
-    position: 'absolute',
-    padding: '2rem'
-  },
-  colorPickerBoxShadow: {
-    borderRadius: 8,
-    webKitBoxShadow: BOX_SHADOW,
-    mozBoxShadow: BOX_SHADOW,
-    boxShadow: BOX_SHADOW
+const containerSx = ({ defaultSpacing }) => ({
+  zIndex: 1,
+  position: 'absolute',
+  top: 0,
+  right: 0,
+  display: 'flex',
+  alignItems: 'flex-start',
+  justifyContent: 'flex-end',
+  gap: defaultSpacing ? defaultSpacing : ''
+});
+
+const buttonSx = ({ defaultSpacing }) => theme => ({
+  padding: defaultSpacing ? defaultSpacing / 2 : '',
+  color: `rgba(${theme.palette.mode === 'light' ? '0, 0, 0' : '255, 255, 255'}, .7)`,
+  backgroundColor: `rgba(${theme.palette.mode === 'light' ? '255, 255, 255' : '0, 0, 0'}, .5)`,
+  '&:hover': {
+    backgroundColor: `rgba(${theme.palette.mode === 'light' ? '255, 255, 255' : '0, 0, 0'}, .7)`
   }
-}));
+});
+
+const colorPickerContainerSx = {
+  zIndex: 2,
+  position: 'absolute',
+  padding: '2rem'
+};
+
+const colorPickerBoxShadowSx = {
+  borderRadius: 8,
+  webKitBoxShadow: BOX_SHADOW,
+  mozBoxShadow: BOX_SHADOW,
+  boxShadow: BOX_SHADOW
+};
 
 
 const initialStateOpen = {
@@ -51,7 +52,6 @@ const initialState = {
 
 const TextStyles = ({ color, setColor, defaultSpacing, toggleClickAway, handleFontSizeChange, textAlign, handleTextAlignChange }) => {
 
-  const classes = useStyles({ defaultSpacing });
   const [state, setState] = useState(initialState);
   const { open } = state;
 
@@ -72,8 +72,8 @@ const TextStyles = ({ color, setColor, defaultSpacing, toggleClickAway, handleFo
   };
 
 
-  return <div className={classes.container}>
-    <IconButton onClick={handleTextAlignChange} onTouchStart={handleTextAlignChange} className={classes.button}>
+  return <Box sx={containerSx({ defaultSpacing })}>
+    <IconButton onClick={handleTextAlignChange} onTouchStart={handleTextAlignChange} sx={buttonSx({ defaultSpacing })}>
       {(() => {
         switch (textAlign) {
           case 'start':
@@ -89,23 +89,23 @@ const TextStyles = ({ color, setColor, defaultSpacing, toggleClickAway, handleFo
         }
       })()}
     </IconButton>
-    <IconButton onClick={handleColorPickerOpen} onTouchStart={handleColorPickerOpen} className={classes.button}>
+    <IconButton onClick={handleColorPickerOpen} onTouchStart={handleColorPickerOpen} sx={buttonSx({ defaultSpacing })}>
       <RiFontColor size={ICON_SIZE} />
     </IconButton>
-    <IconButton onClick={handleFontSizeChange} onTouchStart={handleFontSizeChange} className={classes.button}>
+    <IconButton onClick={handleFontSizeChange} onTouchStart={handleFontSizeChange} sx={buttonSx({ defaultSpacing })}>
       <RiFontSize size={ICON_SIZE} />
     </IconButton>
     {(!!open.colorPicker) && (
       <ClickAwayListener disableReactTree onClickAway={handleColorPickerClose}>
-        <div className={classes.colorPickerContainer}>
-          <div className={classes.colorPickerBoxShadow}>
+        <Box sx={colorPickerContainerSx}>
+          <Box sx={colorPickerBoxShadowSx}>
             <RgbaColorPicker color={color} onChange={setColor} />
-          </div>
-        </div>
+          </Box>
+        </Box>
       </ClickAwayListener>
     )}
-  </div>;
+  </Box>;
 };
 
 
-export default TextStyles;
+export default TextStyles;

package/lib/components/TextToHtml/TextToHtml.js

@@ -1,15 +1,15 @@
 import Cursor from './Cursor';
 import TextStyles from './TextStyles';
 import { translateKey } from './utils';
-import { ClickAwayListener } from '@material-ui/core';
+import { ClickAwayListener } from '@mui/material';
 import { isEqual } from 'lodash';
 import React, { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
 import './style.css';
 
 
-const resizeStyle = { 
-  resize: 'both', 
-  overflow: 'auto' 
+const resizeStyle = {
+  resize: 'both',
+  overflow: 'auto'
 };
 
 
@@ -18,43 +18,43 @@ const TEXT_TO_HTML_CURSOR_ID = 'text-to-html-cursor';
 const TEXT_TO_HTML_TEXT_CONTAINER_ID = 'text-to-html-text-container';
 
 
-export const initialStateCharacter = { 
-  key: undefined, 
-  keyCode: undefined, 
-  code: undefined, 
-  string: '', 
-  dead: false, 
-  shift: false, 
-  mark: [] 
+export const initialStateCharacter = {
+  key: undefined,
+  keyCode: undefined,
+  code: undefined,
+  string: '',
+  dead: false,
+  shift: false,
+  mark: []
 };
 
 export const initialStateCursor = { ...initialStateCharacter, string: 'cursor' };
 
 export const textToHtmlInitialValue = { text: '', cssText: '', markedPeople: [], characters: [] };
 
-const initialStateMove = { 
-  isDown: false, 
-  offset: [] 
+const initialStateMove = {
+  isDown: false,
+  offset: []
 };
 
 const initialStateKeyboardRef = { altGraph: false };
 
-const initialStateTextStyle = { 
-  color: { r: 255, g: 255, b: 255, a: 1 }, 
-  textAlign: 'center', 
-  fontSize: 2, 
-  fontFamily: 'Roboto, Helvetica, Arial, sans-serif', 
-  letterSpacing: '0.01em' 
+const initialStateTextStyle = {
+  color: { r: 255, g: 255, b: 255, a: 1 },
+  textAlign: 'center',
+  fontSize: 2,
+  fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
+  letterSpacing: '0.01em'
 };
 
-const initialState = { 
-  textStyle: initialStateTextStyle, 
-  createCursorClick: false, 
-  clickAway: undefined, 
-  tap: 0, 
-  resize: false, 
-  move: initialStateMove, 
-  characters: [] 
+const initialState = {
+  textStyle: initialStateTextStyle,
+  createCursorClick: false,
+  clickAway: undefined,
+  tap: 0,
+  resize: false,
+  move: initialStateMove,
+  characters: []
 };
 
 
@@ -64,17 +64,17 @@ const TextToHtml = ({ initialValue = textToHtmlInitialValue, onChange, onDelete,
   const [state, setState] = useState(initialState);
   const { createCursorClick, characters, move, resize, tap, textStyle } = state;
   const { color, fontSize, fontFamily, textAlign, letterSpacing } = textStyle;
-  const propsRef = useRef({ 
-    onChange 
+  const propsRef = useRef({
+    onChange
   });
 
   const cursor = characters.findIndex(({ string }) => (string === 'cursor'));
   const canWrite = (cursor > -1);
 
 
-  const logicSetState = ({ type, field, value }) => setState(values => ({ 
-    ...values, 
-    [type]: (type && field) ? { ...values[type], [field]: value } : value 
+  const logicSetState = ({ type, field, value }) => setState(values => ({
+    ...values,
+    [type]: (type && field) ? { ...values[type], [field]: value } : value
   }));
 
 
@@ -158,7 +158,9 @@ const TextToHtml = ({ initialValue = textToHtmlInitialValue, onChange, onDelete,
     (initialValue.cssText) && setStyleFromInitialValue(initialValue.cssText);
     (initialValue.characters) && setCharacters(initialValue.characters);
   }, [setCharacters]);
-  useEffect(() => loadInitialValue(initialValue), [initialValue, loadInitialValue]);
+  useEffect(() => {
+    loadInitialValue(initialValue);
+  }, [initialValue, loadInitialValue]);
 
   const handleKeyDown = (e) => {
 
@@ -216,14 +218,14 @@ const TextToHtml = ({ initialValue = textToHtmlInitialValue, onChange, onDelete,
     else {
       const { string, before } = translateKey({ key, keyCode, code, shift, altGraph: keyboardRef.current.altGraph, capsLock, before: characterBeforeCursor });
       if (string) {
-        newCharacter = { 
-          ...initialStateCharacter, 
-          key, 
-          keyCode, 
-          code, 
-          string, 
-          dead: before.dead, 
-          shift 
+        newCharacter = {
+          ...initialStateCharacter,
+          key,
+          keyCode,
+          code,
+          string,
+          dead: before.dead,
+          shift
         };
 
         newCharacters.splice(cursor, 0, newCharacter);
@@ -265,16 +267,16 @@ const TextToHtml = ({ initialValue = textToHtmlInitialValue, onChange, onDelete,
     if (!element) return;
     const clientX = (e.clientX || e.touches[0].clientX);
     const clientY = (e.clientY || e.touches[0].clientY);
-    logicSetState({ 
-      type: 'move', 
-      value: { 
-        ...move, 
-        isDown: true, 
+    logicSetState({
+      type: 'move',
+      value: {
+        ...move,
+        isDown: true,
         offset: [
-          element.offsetLeft - clientX, 
+          element.offsetLeft - clientX,
           element.offsetTop - clientY
         ]
-      } 
+      }
     });
   };
 
@@ -351,7 +353,9 @@ const TextToHtml = ({ initialValue = textToHtmlInitialValue, onChange, onDelete,
       }
     }
   }, []);
-  useEffect(() => changeStyles({ resize }), [resize, changeStyles]);
+  useEffect(() => {
+    changeStyles({ resize });
+  }, [resize, changeStyles]);
 
   const createHtmlString = useCallback(() => {
     const element = document.getElementById(TEXT_TO_HTML_ID);
@@ -370,55 +374,61 @@ const TextToHtml = ({ initialValue = textToHtmlInitialValue, onChange, onDelete,
       return { htmlString };
     }
   }, [characters, ref]);
-  useEffect(() => createHtmlString(), [characters, createHtmlString]);
-
-
-  useEffect(() => ref.current = { 
-    ...ref.current, 
-    ...state, 
-    clickAway, 
-    focusToWrite, 
-    createCursor, 
-    setCharacters, 
-    createHtmlString, 
-    setExternalValues 
+  useEffect(() => {
+    createHtmlString();
+  }, [characters, createHtmlString]);
+
+
+  useEffect(() => {
+    ref.current = {
+      ...ref.current,
+      ...state,
+      clickAway,
+      focusToWrite,
+      createCursor,
+      setCharacters,
+      createHtmlString,
+      setExternalValues
+    };
   }, [ref, state, setCharacters, createCursor, createHtmlString, clickAway, setExternalValues]);
 
   const updateExternalValues = ({ state, setExternalValues }) => {
     setExternalValues && setExternalValues(state);
   };
-  useEffect(() => updateExternalValues({ state, setExternalValues }), [state, setExternalValues]);
+  useEffect(() => {
+    updateExternalValues({ state, setExternalValues });
+  }, [state, setExternalValues]);
 
 
   return <div className='text-to-html-container'>
     {(canWrite) && (
-      <TextStyles 
-        setColor={value => logicSetState({ type: 'textStyle', field: 'color', value })} 
-        {...{ color, defaultSpacing, toggleClickAway, handleFontSizeChange, textAlign, handleTextAlignChange }} 
+      <TextStyles
+        setColor={value => logicSetState({ type: 'textStyle', field: 'color', value })}
+        {...{ color, defaultSpacing, toggleClickAway, handleFontSizeChange, textAlign, handleTextAlignChange }}
       />
     )}
     <div id={TEXT_TO_HTML_TEXT_CONTAINER_ID} onClick={handleContainerClick} className='text-to-html-text-container'>
       <ClickAwayListener mouseEvent={state.clickAway} touchEvent={state.clickAway} disableReactTree onClickAway={handleClickAway}>
-        <div 
-          id={TEXT_TO_HTML_ID} 
-          tabIndex={0} 
-          onKeyDown={handleKeyDown} 
-          onKeyUp={handleKeyUp} 
-          onMouseDown={handleMouseDownTouchStart} 
-          onMouseUp={handleMouseUpTouchEnd} 
-          onMouseMove={handleMouseTouchMove} 
-          onTouchStart={handleMouseDownTouchStart} 
-          onTouchEnd={handleMouseUpTouchEnd} 
-          onTouchMove={handleMouseTouchMove} 
-          onClick={handleClick} 
-          onDoubleClick={handleDoubleClick} 
-          style={{ 
-            color: (color) ? `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})` : 'inherit', 
-            textAlign: (textAlign) ? textAlign : 'inherit', 
-            fontSize: (fontSize) ? `${fontSize}rem` : '1rem', 
-            fontFamily: (fontFamily) ? fontFamily : 'inherit', 
-            letterSpacing: (letterSpacing) ? letterSpacing : 'inherit' 
-          }} 
+        <div
+          id={TEXT_TO_HTML_ID}
+          tabIndex={0}
+          onKeyDown={handleKeyDown}
+          onKeyUp={handleKeyUp}
+          onMouseDown={handleMouseDownTouchStart}
+          onMouseUp={handleMouseUpTouchEnd}
+          onMouseMove={handleMouseTouchMove}
+          onTouchStart={handleMouseDownTouchStart}
+          onTouchEnd={handleMouseUpTouchEnd}
+          onTouchMove={handleMouseTouchMove}
+          onClick={handleClick}
+          onDoubleClick={handleDoubleClick}
+          style={{
+            color: (color) ? `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})` : 'inherit',
+            textAlign: (textAlign) ? textAlign : 'inherit',
+            fontSize: (fontSize) ? `${fontSize}rem` : '1rem',
+            fontFamily: (fontFamily) ? fontFamily : 'inherit',
+            letterSpacing: (letterSpacing) ? letterSpacing : 'inherit'
+          }}
           className='text-to-html'
         >
           <p>
@@ -428,10 +438,10 @@ const TextToHtml = ({ initialValue = textToHtmlInitialValue, onChange, onDelete,
                   return <Cursor key={`${stringIndex}-${string}`} id={TEXT_TO_HTML_CURSOR_ID} className='text-to-html-cursor' />;
                 default:
                   return (string) ? (
-                    <span 
-                      key={`${stringIndex}-${string}`} 
-                      style={{ 
-                        textDecoration: (dead || mark?.length) ? 'underline' : '' 
+                    <span
+                      key={`${stringIndex}-${string}`}
+                      style={{
+                        textDecoration: (dead || mark?.length) ? 'underline' : ''
                       }}
                     >
                       {string}
@@ -447,4 +457,4 @@ const TextToHtml = ({ initialValue = textToHtmlInitialValue, onChange, onDelete,
 };
 
 
-export default forwardRef(TextToHtml);
+export default forwardRef(TextToHtml);

package/lib/components/ThreadLog/ThreadLog.js

@@ -4,7 +4,7 @@ import SimpleTable from '../../components/SimpleTable';
 import { setField } from '../../fieldsRedux';
 import { getConfig } from '../../utils/config';
 import { sqlDateToReadableDate } from '../../utils/date';
-import { IconButton } from '@material-ui/core';
+import { IconButton } from '@mui/material';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { FaAngleLeft, FaPrint } from 'react-icons/fa';

package/lib/components/UserCard/UserCard.js

@@ -2,7 +2,7 @@ import { ArgousAvatar } from '../';
 import { setAnotherProgramField } from '../../fieldsRedux';
 import { useStore } from '../../utils';
 import { serverAction } from '../../utils/api';
-import { Card, Typography, Grid, Button, Portal, Popper } from '@material-ui/core';
+import { Card, Typography, Grid, Button, Portal, Popper } from '@mui/material';
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { IoIosCall } from 'react-icons/io';
 import { MdMail, MdMessage } from 'react-icons/md';
@@ -100,10 +100,10 @@ function UserCard({ anchor, userId }) {
       >
         <Card variant='outlined' style={{ padding: '10px', maxWidth: '350px' }}>
           <Grid container spacing={1}>
-            <Grid item xs='auto'>
+            <Grid size='auto'>
               <ArgousAvatar style={{ width: '50px', height: '50px', margin: '10px' }} nome={data.dsNomeUsuario} idUsuario={userId || local.userId} />
             </Grid>
-            <Grid item xs='auto'>
+            <Grid size='auto'>
               <Typography variant='h6' style={{ overflow: 'hidden', width: '250px', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{data.dsNomeUsuario}</Typography>
               <Typography variant='body2' style={{ width: '250px' }}>{data.dsFuncaoUsuario}</Typography>
               <Typography variant='caption' style={{ width: '250px' }}>{data.dsSetor}</Typography>
@@ -112,14 +112,14 @@ function UserCard({ anchor, userId }) {
               ((userId && (loggedUserId !== userId)) || (local.userId && (loggedUserId !== local.userId))) && (
                 <React.Fragment>
                   {(data.nrRamalUsuario) && (
-                    <Grid item xs>
+                    <Grid size='grow'>
                       <Button fullWidth variant='contained' href={`tel: ${data.nrRamalUsuario}`} title={`Ramal: ${data.nrRamalUsuario}`}><IoIosCall/>&nbsp;{data.nrRamalUsuario}</Button>
                     </Grid>
                   )}
-                  <Grid item xs>
+                  <Grid size='grow'>
                     <Button fullWidth variant='contained' href={`mailto: ${data.dsEmailUsuario}`} title={data.dsEmailUsuario}><MdMail/>&nbsp;Email</Button>
                   </Grid>
-                  <Grid item xs>
+                  <Grid size='grow'>
                     <Button fullWidth variant='contained' onClick={() => setAnotherProgramField('janelaChatOpen', returnUser(), 'argousSystem')} title='Abrir chat de conversa'><MdMessage/>&nbsp;Mensagem</Button>
                   </Grid>
                 </React.Fragment>

package/lib/components/UtilAutoComplete/UtilAutoComplete.d.ts

@@ -1,8 +1,7 @@
-import { TextFieldProps } from '@material-ui/core';
-import { AutocompleteProps, AutocompleteChangeDetails } from '@material-ui/lab';
+import { TextFieldProps, AutocompleteProps, AutocompleteChangeDetails } from '@mui/material';
 import * as React from 'react';
 
-export interface UtilAutoCompleteProps extends Omit<AutocompleteProps<any, false, false, false>, 'getOptionLabel'>{
+export interface UtilAutoCompleteProps extends Omit<AutocompleteProps<any, false, false, false>, 'getOptionLabel' | 'onChange'>{
   /**
    * Tipo de autocomplete
    */
@@ -94,4 +93,4 @@ export interface UtilAutoCompleteProps extends Omit<AutocompleteProps<any, false
 
 declare function UtilAutoComplete(props: UtilAutoCompleteProps): JSX.Element
 
-export default UtilAutoComplete;
+export default UtilAutoComplete;

package/lib/components/UtilAutoComplete/UtilAutoComplete.js

@@ -1,7 +1,6 @@
 import { formataNome } from '../../utils';
 import { serverAction } from '../../utils/api';
-import { TextField } from '@material-ui/core';
-import { Autocomplete } from '@material-ui/lab';
+import { TextField, Autocomplete } from '@mui/material';
 import { isArray, isObject, isString } from 'lodash';
 import React, { useState, useEffect, useCallback } from 'react';
 // import PropTypes from 'prop-types';
@@ -69,10 +68,48 @@ const retornaType = type => {
   }
 };
 
-const UtilAutoComplete = ({ type = '', label, value, textFieldProps = {}, onChange = e => e, excluidos, idEmpresa, cdEstado, cdUnimed, getOptionLabel, pgCode = 'BuscasHelper', action, busca, resposta, searchParams, filterFunction, forceUpdate, readOnly, ...props }) => {
+const UtilAutoComplete = ({
+  type = '',
+  label,
+  value,
+  textFieldProps = {},
+  onChange = e => e,
+  excluidos,
+  idEmpresa,
+  cdEstado,
+  cdUnimed,
+  getOptionLabel,
+  pgCode = 'BuscasHelper',
+  action,
+  busca,
+  resposta,
+  searchParams,
+  filterFunction,
+  forceUpdate,
+  readOnly,
+  ListboxComponent,
+  ListboxProps,
+  PaperComponent,
+  PopperComponent,
+  ChipProps,
+  renderTags,
+  renderValue,
+  slots = {},
+  slotProps = {},
+  ...props
+}) => {
   const [open, setOpen] = useState(false);
   const [lista, setLista] = useState([]);
   const [inputValue, setInputValue] = useState('');
+  const {
+    FormHelperTextProps,
+    InputLabelProps,
+    InputProps,
+    inputProps,
+    SelectProps,
+    slotProps: textFieldSlotProps = {},
+    ...resolvedTextFieldProps
+  } = textFieldProps;
 
   const buscar = useCallback(async valor => {
     const res = await serverAction(action || retornaType(type).action, { [busca || retornaType(type)?.busca || 'value']: valor || inputValue, excluidos, idEmpresa, cdEstado, cdUnimed, ...searchParams }, true, pgCode);
@@ -97,7 +134,7 @@ const UtilAutoComplete = ({ type = '', label, value, textFieldProps = {}, onChan
       onClose={() => setOpen(false)}
       disableClearable={readOnly}
       options={isObject(value) ? lista.filter(v => filterFunction ? filterFunction(v, value) : true || v[0] !== value[0]) : lista}
-      getOptionSelected={(o, v) => o[0] === v}
+      isOptionEqualToValue={(o, v) => o[0] === (isArray(v) ? v[0] : v)}
       getOptionLabel={getOptionLabel ? (option => getOptionLabel(option, lista)) : (option => retornaType(type).getLabel(option, lista)) }
       noOptionsText={inputValue.length < 2 ? 'Digite para pesquisar' : 'Não Encontrado'}
       clearText='Limpar'
@@ -108,16 +145,37 @@ const UtilAutoComplete = ({ type = '', label, value, textFieldProps = {}, onChan
       autoHighlight
       {...{ value, onChange }}
       {...props}
+      renderValue={renderValue || renderTags}
+      slots={{
+        ...(PaperComponent ? { paper: PaperComponent } : {}),
+        ...(PopperComponent ? { popper: PopperComponent } : {}),
+        ...slots
+      }}
+      slotProps={{
+        ...slotProps,
+        chip: { ...ChipProps, ...slotProps.chip },
+        listbox: {
+          ...(ListboxComponent ? { component: ListboxComponent } : {}),
+          ...ListboxProps,
+          ...slotProps.listbox
+        }
+      }}
       renderInput={params => (
         <TextField
           margin='dense'
           variant='outlined'
           label={label || retornaType(type).label}
           {...params}
-          {...textFieldProps}
-          InputProps={{ ...textFieldProps.InputProps, ...params.InputProps }}
-          inputProps={{ ...textFieldProps.inputProps, ...params.inputProps, readOnly }}
-        />
+          {...resolvedTextFieldProps}
+          slotProps={{
+            ...textFieldSlotProps,
+            ...params.slotProps,
+            formHelperText: { ...FormHelperTextProps, ...textFieldSlotProps.formHelperText, ...params.slotProps.formHelperText },
+            input: { ...InputProps, ...textFieldSlotProps.input, ...params.slotProps.input },
+            inputLabel: { ...InputLabelProps, ...textFieldSlotProps.inputLabel, ...params.slotProps.inputLabel },
+            htmlInput: { ...inputProps, ...textFieldSlotProps.htmlInput, ...params.slotProps.htmlInput, readOnly },
+            select: { ...SelectProps, ...textFieldSlotProps.select, ...params.slotProps.select }
+          }} />
       )}
     />
   );
@@ -135,4 +193,4 @@ const UtilAutoComplete = ({ type = '', label, value, textFieldProps = {}, onChan
 //   getOptionLabel: PropTypes.func
 // }
 
-export default UtilAutoComplete;
+export default UtilAutoComplete;

package/lib/components/UtilTextField/UtilTextField.d.ts

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