argous 1.2.158 → 1.2.159

package/dist/components/AutoCompleteFavorites/AutoCompleteFavorites.js

@@ -239,8 +239,9 @@ var ListboxFavorites = react_1.forwardRef(function (props, ref) {
     }
     function retornaEstrutura(sectionIndex, item, itemIndex) {
         var _a;
+        var index = itemIndex ? itemIndex : sectionIndex;
         var content = react_1.default.createElement(exports.CustomTooltip, { title: item.props.children, arrow: true, enterDelay: '1000', enterNextDelay: '1000', placement: 'top-end', TransitionComponent: core_1.Fade, TransitionProps: { timeout: { enter: 100, exit: 500 } } },
-            react_1.default.createElement(core_1.ListItem, __assign({}, item.props, { id: 'listItem', key: item.key, className: clsx_1.default(classes.listItem, (_a = {}, _a[classes.hoverListItem] = (cursor === null || cursor === void 0 ? void 0 : cursor.index) === itemIndex ? itemIndex : sectionIndex && (cursor === null || cursor === void 0 ? void 0 : cursor.page) === pageNumber, _a)) }),
+            react_1.default.createElement(core_1.ListItem, __assign({}, item.props, { id: 'listItem', key: item.key, className: clsx_1.default(classes.listItem, (_a = {}, _a[classes.hoverListItem] = (cursor === null || cursor === void 0 ? void 0 : cursor.index) === index && (cursor === null || cursor === void 0 ? void 0 : cursor.page) === pageNumber, _a)) }),
                 react_1.default.createElement(core_1.ListItemText, { primary: item.props.children, className: classes.listItemText })));
         if (sectionIndex === 0 && favoritePage && favoritosLength > 7) {
             return react_1.default.createElement(core_1.Slide, { in: slide, direction: direction }, content);
@@ -274,42 +275,43 @@ var ListboxFavorites = react_1.forwardRef(function (props, ref) {
             return 'right';
         return 'left';
     }
-    return react_1.default.createElement("ul", __assign({}, props, { className: clsx_1.default('MuiAutocomplete-listbox', classes.box) }), children.map(function (section, sectionIndex) {
+    return react_1.default.createElement("ul", __assign({}, props, { id: 'listBox', className: clsx_1.default('MuiAutocomplete-listbox', classes.box) }), children.map(function (section, sectionIndex) {
         var _a, _b, _c;
-        return (react_1.default.createElement("ul", __assign({}, props, { className: clsx_1.default('MuiAutocomplete-listbox', classes.box) }), group ?
+        return (group ?
             react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(core_1.ListSubheader, { className: classes.subHeader, style: { backgroundColor: groupHeaderColor === null || groupHeaderColor === void 0 ? void 0 : groupHeaderColor[sectionIndex], color: groupTitleColor === null || groupTitleColor === void 0 ? void 0 : groupTitleColor[sectionIndex] } },
-                    section.props.children[0].props.children,
-                    react_1.default.createElement(core_1.Fade, { in: sectionIndex === 0 && favoritePage && favoritosLength > 7 },
-                        react_1.default.createElement("div", { className: classes.divButton },
-                            react_1.default.createElement("div", { className: classes.areaButton },
-                                react_1.default.createElement("div", { onClick: function (e) { return buttonClick(e, 1); }, className: clsx_1.default((_a = {}, _a[classes.buttonActive] = pageNumber === 1, _a), classes.button) }, "1")),
-                            react_1.default.createElement("div", { className: classes.areaButton },
-                                react_1.default.createElement("div", { onClick: function (e) { return buttonClick(e, 2); }, className: clsx_1.default((_b = {}, _b[classes.buttonActive] = pageNumber === 2, _b), classes.button) }, "2")),
-                            favoritosLength > 14 &&
-                                react_1.default.createElement(react_1.default.Fragment, null,
-                                    react_1.default.createElement("div", { className: classes.areaButton },
-                                        react_1.default.createElement("div", { onClick: function (e) { return buttonClick(e, 3); }, className: clsx_1.default((_c = {}, _c[classes.buttonActive] = pageNumber === 3, _c), classes.button) }, "3")))))),
-                retornaArray(sectionIndex, section).map(function (item, itemIndex) { return retornaEstrutura(sectionIndex, item, itemIndex); }))
-            : retornaEstrutura(sectionIndex, section)));
+                react_1.default.createElement("ul", __assign({}, props, { id: 'listBox', className: clsx_1.default('MuiAutocomplete-listbox', classes.box) }),
+                    react_1.default.createElement(core_1.ListSubheader, { className: classes.subHeader, style: { backgroundColor: groupHeaderColor === null || groupHeaderColor === void 0 ? void 0 : groupHeaderColor[sectionIndex], color: groupTitleColor === null || groupTitleColor === void 0 ? void 0 : groupTitleColor[sectionIndex] } },
+                        section.props.children[0].props.children,
+                        react_1.default.createElement(core_1.Fade, { in: sectionIndex === 0 && favoritePage && favoritosLength > 7 },
+                            react_1.default.createElement("div", { className: classes.divButton },
+                                react_1.default.createElement("div", { className: classes.areaButton },
+                                    react_1.default.createElement("div", { onClick: function (e) { return buttonClick(e, 1); }, className: clsx_1.default((_a = {}, _a[classes.buttonActive] = pageNumber === 1, _a), classes.button) }, "1")),
+                                react_1.default.createElement("div", { className: classes.areaButton },
+                                    react_1.default.createElement("div", { onClick: function (e) { return buttonClick(e, 2); }, className: clsx_1.default((_b = {}, _b[classes.buttonActive] = pageNumber === 2, _b), classes.button) }, "2")),
+                                favoritosLength > 14 &&
+                                    react_1.default.createElement(react_1.default.Fragment, null,
+                                        react_1.default.createElement("div", { className: classes.areaButton },
+                                            react_1.default.createElement("div", { onClick: function (e) { return buttonClick(e, 3); }, className: clsx_1.default((_c = {}, _c[classes.buttonActive] = pageNumber === 3, _c), classes.button) }, "3")))))),
+                    retornaArray(sectionIndex, section).map(function (item, itemIndex) { return retornaEstrutura(sectionIndex, item, itemIndex); })))
+            : retornaEstrutura(sectionIndex, section));
     }));
 });
 var AutoCompleteFavorites = function (_a) {
     var _b;
-    var action = _a.action, busca = _a.busca, resposta = _a.resposta, autoSearch = _a.autoSearch, label = _a.label, value = _a.value, pgCode = _a.pgCode, favoritePage = _a.favoritePage, group = _a.group, groupName = _a.groupName, groupHeaderColor = _a.groupHeaderColor, groupTitleColor = _a.groupTitleColor, loadingColor = _a.loadingColor, widthListBox = _a.widthListBox, filterFunction = _a.filterFunction, getOptionLabel = _a.getOptionLabel, _c = _a.onChange, onChange = _c === void 0 ? function (e) { return e; } : _c, _d = _a.textFieldProps, textFieldProps = _d === void 0 ? {} : _d, searchParams = _a.searchParams, props = __rest(_a, ["action", "busca", "resposta", "autoSearch", "label", "value", "pgCode", "favoritePage", "group", "groupName", "groupHeaderColor", "groupTitleColor", "loadingColor", "widthListBox", "filterFunction", "getOptionLabel", "onChange", "textFieldProps", "searchParams"]);
+    var action = _a.action, busca = _a.busca, resposta = _a.resposta, autoSearch = _a.autoSearch, label = _a.label, value = _a.value, pgCode = _a.pgCode, favoritePage = _a.favoritePage, _c = _a.group, group = _c === void 0 ? false : _c, groupName = _a.groupName, groupHeaderColor = _a.groupHeaderColor, groupTitleColor = _a.groupTitleColor, loadingColor = _a.loadingColor, widthListBox = _a.widthListBox, filterFunction = _a.filterFunction, getOptionLabel = _a.getOptionLabel, _d = _a.onChange, onChange = _d === void 0 ? function (e) { return e; } : _d, _e = _a.textFieldProps, textFieldProps = _e === void 0 ? {} : _e, searchParams = _a.searchParams, props = __rest(_a, ["action", "busca", "resposta", "autoSearch", "label", "value", "pgCode", "favoritePage", "group", "groupName", "groupHeaderColor", "groupTitleColor", "loadingColor", "widthListBox", "filterFunction", "getOptionLabel", "onChange", "textFieldProps", "searchParams"]);
     var classes = useStyles({ widthListBox: widthListBox });
-    var _e = react_1.useState({
+    var _f = react_1.useState({
         lista: [],
         slide: true,
         cursor: { index: '', page: '' },
         direction: '',
         favoritosLength: '',
         pageNumber: favoritePage ? 1 : undefined,
-    }), dados = _e[0], setDados = _e[1];
-    var _f = react_1.useState(false), loading = _f[0], setLoading = _f[1];
-    var _g = react_1.useState(''), inputValue = _g[0], setInputValue = _g[1];
+    }), dados = _f[0], setDados = _f[1];
+    var _g = react_1.useState(false), loading = _g[0], setLoading = _g[1];
+    var _h = react_1.useState(''), inputValue = _h[0], setInputValue = _h[1];
     var interval = react_1.useRef(null);
-    var _h = react_1.useState(1), seconds = _h[0], setSeconds = _h[1];
+    var _j = react_1.useState(1), seconds = _j[0], setSeconds = _j[1];
     var startCounter = function () { return interval.current = setInterval(function () { return setSeconds(1); }, 1000); };
     var stopCounter = function () {
         clearInterval(interval.current);
@@ -356,7 +358,7 @@ var AutoCompleteFavorites = function (_a) {
                     return [3 /*break*/, 4];
                 case 3:
                     if (res[resposta || 'result'])
-                        setDados({ lista: res[resposta || 'result'] || [] });
+                        setDados(function (v) { return (__assign(__assign({}, v), { lista: res[resposta || 'result'] || [] })); });
                     else
                         api_1.setError('Erro ao tentar buscar dados.');
                     _c.label = 4;
@@ -369,46 +371,106 @@ var AutoCompleteFavorites = function (_a) {
     react_1.useEffect(function () { return autoSearch && seconds === 1 && buscar(); }, [autoSearch, seconds, buscar]);
     // eslint-disable-next-line react-hooks/exhaustive-deps
     react_1.useEffect(function () { return lodash_1.isString(value) && buscar(value); }, []);
-    react_1.useEffect(function () { var _a, _b; return (value === null || value === void 0 ? void 0 : value[3]) !== ((_b = (_a = dados.cursor) === null || _a === void 0 ? void 0 : _a.linha) === null || _b === void 0 ? void 0 : _b[3]) && setDados(function (v) { return (__assign(__assign({}, v), { cursor: { index: '', page: '' } })); }); }, [value, (_b = dados.cursor) === null || _b === void 0 ? void 0 : _b.linha]);
-    var keyUp = function (e) {
+    react_1.useEffect(function () { var _a; return (value !== ((_a = dados.cursor) === null || _a === void 0 ? void 0 : _a.linha)) && setDados(function (v) { return (__assign(__assign({}, v), { cursor: { index: '', page: '' } })); }); }, [value, (_b = dados.cursor) === null || _b === void 0 ? void 0 : _b.linha]);
+    var keyDown = function (e) {
         e.preventDefault();
         e.stopPropagation();
         ((e.key === 'Enter' || e.key === 'Tab') && !loading) && buscar();
         (e.key === 'ArrowDown' || e.key === 'ArrowUp') && selectListboxItem(e.key);
     };
-    var keyDown = function (e) { return (e.key === 'Enter' || e.key === 'Tab') && e.stopPropagation(); };
+    var keyUp = function (e) { return (e.key === 'Enter' || e.key === 'Tab') && e.stopPropagation(); };
+    var numbersOnly = function (value) { return value.replace(/[^0-9]/g, ''); };
+    var getFinder = function (v) {
+        var _a;
+        var elInnerText = v.innerText;
+        var endIndexCode = elInnerText.indexOf('-') - 1;
+        var code = elInnerText.substring(0, endIndexCode);
+        var finder = ((_a = numbersOnly(code)) === null || _a === void 0 ? void 0 : _a.length) ? code : elInnerText;
+        return finder;
+    };
+    function validateLine(value, finder, el) {
+        var _a, _b, _c;
+        var retorno = false;
+        if (el) {
+            var elIndex = parseInt((_b = (_a = el === null || el === void 0 ? void 0 : el.attributes) === null || _a === void 0 ? void 0 : _a[4]) === null || _b === void 0 ? void 0 : _b.value);
+            var itemSelecionado = (_c = dados.lista) === null || _c === void 0 ? void 0 : _c[elIndex];
+            if (lodash_1.isObject(itemSelecionado))
+                retorno = JSON.stringify(value) === JSON.stringify(itemSelecionado) ? true : false;
+            else if (lodash_1.isArray(itemSelecionado))
+                retorno = value.equals(itemSelecionado) ? true : false;
+        }
+        else if (lodash_1.isArray(value)) {
+            value.forEach(function (v) {
+                if (retorno)
+                    return;
+                if (v && v.toString() === finder)
+                    retorno = true;
+            });
+        }
+        else if (lodash_1.isObject(value)) {
+            Object.values(value).forEach(function (v) {
+                if (retorno)
+                    return;
+                if (v && v.toString() === finder)
+                    retorno = true;
+            });
+        }
+        return retorno;
+    }
     function selectListboxItem(key) {
         var _a;
         var directionIndex = key === 'ArrowDown' ? 1 : key === 'ArrowUp' ? -1 : 0;
         var itens = document.querySelectorAll('#listItem');
         var array = Array.from(itens);
         var el = '';
+        var linha = '';
         var indexCapture = 0;
-        if (!value)
-            el = array === null || array === void 0 ? void 0 : array[0];
-        else {
+        if (value) {
             array.forEach(function (v, i) {
-                var elInnerText = v.innerText;
-                var endIndexCode = elInnerText.indexOf('-') - 1;
-                var code = elInnerText.substring(0, endIndexCode);
-                if (code === value[3]) {
+                var finder = getFinder(v);
+                if (linha)
+                    return;
+                if (validateLine(value, finder, v)) {
                     var nextIndex = i + directionIndex;
                     if (nextIndex < array.length)
                         indexCapture = nextIndex > -1 ? nextIndex : i;
                     else
                         indexCapture = i;
+                    linha = dados.lista[indexCapture];
                 }
             });
             el = array[indexCapture];
         }
-        var elInnerText = el.innerText;
-        var endIndexCode = elInnerText.indexOf('-') - 1;
-        var code = elInnerText.substring(0, endIndexCode);
-        var linha = (_a = dados.lista.map(function (v) { return v[3] === code && v; }).filter(function (v) { return v && v; })) === null || _a === void 0 ? void 0 : _a[0];
-        setDados(function (v) { return (__assign(__assign({}, v), { cursor: { index: indexCapture, page: v.pageNumber, linha: linha } })); });
+        if (!linha)
+            linha = dados.lista[indexCapture];
+        var elTop = 0;
+        var elTotalHeight = 0;
+        var lastScrollTop = 0;
+        var elListBox = document.getElementById('listBox');
+        if (el) {
+            elTop = (_a = el === null || el === void 0 ? void 0 : el.getBoundingClientRect()) === null || _a === void 0 ? void 0 : _a.top;
+            elTotalHeight = el.offsetHeight + el.offsetTop;
+        }
+        if (elListBox)
+            lastScrollTop = elListBox.scrollTop;
+        linha && setDados(function (v) { return (__assign(__assign({}, v), { cursor: { index: indexCapture, page: v.pageNumber, linha: linha, elTop: elTop, elTotalHeight: elTotalHeight, lastScrollTop: lastScrollTop } })); });
         if (linha !== value)
             invokeOnChange('', linha);
     }
+    var scrollToSelected = react_1.useCallback(function () {
+        var _a, _b, _c, _d;
+        var elListBox = document.getElementById('listBox');
+        if (elListBox) {
+            var clientHeight = elListBox === null || elListBox === void 0 ? void 0 : elListBox.clientHeight;
+            if (clientHeight < ((_a = dados.cursor) === null || _a === void 0 ? void 0 : _a.elTotalHeight)) {
+                var valueScrollTop = ((_b = dados.cursor) === null || _b === void 0 ? void 0 : _b.elTop) - clientHeight;
+                if ((_c = dados.cursor) === null || _c === void 0 ? void 0 : _c.lastScrollTop)
+                    valueScrollTop += (_d = dados.cursor) === null || _d === void 0 ? void 0 : _d.lastScrollTop;
+                elListBox.scrollTop = valueScrollTop;
+            }
+        }
+    }, [dados]);
+    react_1.useEffect(function () { var _a; return ((_a = dados.lista) === null || _a === void 0 ? void 0 : _a.length) && setTimeout(function () { return scrollToSelected(); }, 0); }, [dados.lista, scrollToSelected]);
     var invokeOnChange = onChange;
     return (react_1.default.createElement(lab_1.Autocomplete, __assign({}, props, { value: value }, { onChange: invokeOnChange, autoComplete: true, autoHighlight: true, openText: 'Abrir', clearText: 'Limpar', filterSelectedOptions: true, onInputChange: function (e) { var _a; return setInput(((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.value) || ''); }, getOptionSelected: function (o, v) { return o[0] === v; }, getOptionLabel: getOptionLabel && (function (option) { return getOptionLabel(option, dados === null || dados === void 0 ? void 0 : dados.lista); }), noOptionsText: inputValue.length < 2 ? 'Digite para pesquisar' : 'Não Encontrado', options: lodash_1.isObject(value) ? dados === null || dados === void 0 ? void 0 : dados.lista.filter(function (v) { return filterFunction ? filterFunction(v, value) : true || v[0] !== value[0]; }) : dados === null || dados === void 0 ? void 0 : dados.lista, renderInput: function (params) { return (react_1.default.createElement(core_1.TextField, __assign({ margin: 'dense', variant: 'outlined', label: label }, params, textFieldProps, { onKeyUp: function (e) { return keyUp(e); }, inputProps: __assign(__assign({}, params.inputProps), { onKeyDown: function (e) { return keyDown(e); } }), InputProps: __assign(__assign(__assign({}, textFieldProps.InputProps), params.InputProps), { endAdornment: (react_1.default.createElement(react_1.default.Fragment, null,
                     params.InputProps.endAdornment,

package/lib/components/AutoCompleteFavorites/AutoCompleteFavorites.js

@@ -2,7 +2,7 @@ import { serverAction, setError } 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 { isObject, isString } from 'lodash';
+import { isArray, isObject, isString } from 'lodash';
 import React, { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
 import { IoIosSearch } from 'react-icons/io';
 
@@ -133,7 +133,7 @@ const ListboxFavorites = forwardRef((props, ref) => {
 
   function retornaInicio() {
     switch (pageNumber) {
-      case 1: 
+      case 1:
         return 0;
       case 2:
         return 7;
@@ -161,8 +161,9 @@ 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 } }}>
-      <ListItem {...item.props} id='listItem' key={item.key} className={clsx(classes.listItem, { [classes.hoverListItem]: cursor?.index === itemIndex ? itemIndex : sectionIndex && cursor?.page === pageNumber })}>
+      <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>
     </CustomTooltip>;
@@ -199,41 +200,39 @@ const ListboxFavorites = forwardRef((props, ref) => {
     return 'left';
   }
 
-  return <ul {...props} className={clsx('MuiAutocomplete-listbox', classes.box)}>
-    {children.map((section, sectionIndex) => (
-      <ul {...props} className={clsx('MuiAutocomplete-listbox', classes.box)}>
-        {group ?
-          <React.Fragment>
-            <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>
-                  }
+  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>
-              </Fade>
-            </ListSubheader>
-            {retornaArray(sectionIndex, section).map((item, itemIndex) => retornaEstrutura(sectionIndex, item, itemIndex))}
-          </React.Fragment> 
-          : retornaEstrutura(sectionIndex, section)
-        }
-      </ul>
+                <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>;
 });
 
-const AutoCompleteFavorites = ({ action, busca, resposta, autoSearch, label, value, pgCode, favoritePage, group, groupName, groupHeaderColor, groupTitleColor, loadingColor, widthListBox, filterFunction, getOptionLabel, onChange = e => e, textFieldProps = {}, searchParams, ...props }) => {
+const AutoCompleteFavorites = ({ action, busca, resposta, autoSearch, label, value, pgCode, favoritePage, group = false, groupName, groupHeaderColor, groupTitleColor, loadingColor, widthListBox, filterFunction, getOptionLabel, onChange = e => e, textFieldProps = {}, searchParams, ...props }) => {
   
   const classes = useStyles({ widthListBox });
   const [dados, setDados] = useState({
@@ -278,7 +277,7 @@ const AutoCompleteFavorites = ({ action, busca, resposta, autoSearch, label, val
     setLoading(true);
     const res = await serverAction(action, { [busca]: valor || inputValue, ...searchParams }, true, pgCode);
     if (res[resposta || 'result']?.length > 1 && group) await carimbaLista(res[resposta || 'result']);
-    else if (res[resposta || 'result']) setDados({ lista: res[resposta || 'result'] || [] });
+    else if (res[resposta || 'result']) setDados(v => ({ ...v, lista: res[resposta || 'result'] || [] }));
     else setError('Erro ao tentar buscar dados.');
     setLoading(false);
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -288,45 +287,100 @@ const AutoCompleteFavorites = ({ action, busca, resposta, autoSearch, label, val
   // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(() => isString(value) && buscar(value), []);
 
-  useEffect(() => value?.[3] !== dados.cursor?.linha?.[3] && setDados(v => ({ ...v, cursor: { index: '', page: '' } })), [value, dados.cursor?.linha]);
+  useEffect(() => (value !== dados.cursor?.linha) && setDados(v => ({ ...v, cursor: { index: '', page: '' } })), [value, dados.cursor?.linha]);
 
-  const keyUp = e => {
+  const keyDown = e => {
     e.preventDefault();
     e.stopPropagation();
     ((e.key === 'Enter' || e.key === 'Tab') && !loading) && buscar();
     (e.key === 'ArrowDown' || e.key === 'ArrowUp') && selectListboxItem(e.key);
   };
 
-  const keyDown = e => (e.key === 'Enter' || e.key === 'Tab') && e.stopPropagation();
+  const keyUp = e => (e.key === 'Enter' || e.key === 'Tab') && e.stopPropagation();
+
+  const numbersOnly = value => value.replace(/[^0-9]/g, '');
+
+  const getFinder = v => {
+    const elInnerText = v.innerText;
+    const endIndexCode = elInnerText.indexOf('-') - 1;
+    const code = elInnerText.substring(0, endIndexCode);
+    const finder = numbersOnly(code)?.length ? code : elInnerText;
+    return finder;
+  };
+
+  function validateLine(value, finder, el) {
+    let retorno = false;
+    if (el) {
+      const elIndex = parseInt(el?.attributes?.[4]?.value);
+      const itemSelecionado = dados.lista?.[elIndex];
+      if (isObject(itemSelecionado)) retorno = JSON.stringify(value) === JSON.stringify(itemSelecionado) ? true : false;
+      else if (isArray(itemSelecionado)) retorno = value.equals(itemSelecionado) ? true : false;
+    } else if (isArray(value)) {
+      value.forEach(v => {
+        if (retorno) return;
+        if (v && v.toString() === finder) retorno = true;
+      });
+    } else if (isObject(value)) {
+      Object.values(value).forEach(v => {
+        if (retorno) return;
+        if (v && v.toString() === finder) retorno = true;
+      });
+    }
+    return retorno;
+  }
 
   function selectListboxItem(key) {
     const directionIndex = key === 'ArrowDown' ? 1 : key === 'ArrowUp' ? -1 : 0;
     const itens = document.querySelectorAll('#listItem');
     const array = Array.from(itens);
+
     let el = '';
+    let linha = '';
     let indexCapture = 0;
-    if (!value) el = array?.[0];
-    else {
+
+    if (value) {
       array.forEach((v, i) => {
-        const elInnerText = v.innerText;
-        const endIndexCode = elInnerText.indexOf('-') - 1;
-        const code = elInnerText.substring(0, endIndexCode);
-        if (code === value[3]) {
+        const finder = getFinder(v);
+        if (linha) return;
+        if (validateLine(value, finder, v)) {
           const nextIndex = i + directionIndex;
           if (nextIndex < array.length) indexCapture = nextIndex > -1 ? nextIndex : i;
           else indexCapture = i;
-        } 
+          linha = dados.lista[indexCapture];
+        }
       });
       el = array[indexCapture];
     }
-    const elInnerText = el.innerText;
-    const endIndexCode = elInnerText.indexOf('-') - 1;
-    const code = elInnerText.substring(0, endIndexCode);
-    const linha = dados.lista.map(v => v[3] === code && v).filter(v => v && v)?.[0];
-    setDados(v => ({ ...v, cursor: { index: indexCapture, page: v.pageNumber, linha: linha } }));
+    if (!linha)linha = dados.lista[indexCapture];
+
+    let elTop = 0;
+    let elTotalHeight = 0;
+    let lastScrollTop = 0;
+    const elListBox = document.getElementById('listBox');
+    
+    if (el) {
+      elTop = el?.getBoundingClientRect()?.top;
+      elTotalHeight = el.offsetHeight + el.offsetTop;
+    }
+    if (elListBox) lastScrollTop = elListBox.scrollTop;
+
+    linha && setDados(v => ({ ...v, cursor: { index: indexCapture, page: v.pageNumber, linha: linha, elTop: elTop, elTotalHeight: elTotalHeight, lastScrollTop: lastScrollTop } }));
     if (linha !== value) invokeOnChange('', linha);
   }
-  
+
+  const scrollToSelected = useCallback(() => {
+    const elListBox = document.getElementById('listBox');
+    if (elListBox) {
+      const clientHeight = elListBox?.clientHeight;
+      if (clientHeight < dados.cursor?.elTotalHeight) {
+        let valueScrollTop = dados.cursor?.elTop - clientHeight;
+        if (dados.cursor?.lastScrollTop) valueScrollTop += dados.cursor?.lastScrollTop;
+        elListBox.scrollTop = valueScrollTop;
+      }
+    }
+  }, [dados]);
+  useEffect(() => dados.lista?.length && setTimeout(() => scrollToSelected(), 0), [dados.lista, scrollToSelected]);
+
   const invokeOnChange = onChange;
 
   return (
@@ -338,7 +392,7 @@ const AutoCompleteFavorites = ({ action, busca, resposta, autoSearch, label, val
       autoHighlight
       openText='Abrir'
       clearText='Limpar'
-      filterSelectedOptions        
+      filterSelectedOptions
       onInputChange={e => setInput(e?.target?.value || '')}
       getOptionSelected={(o, v) => o[0] === v}
       getOptionLabel={getOptionLabel && (option => getOptionLabel(option, dados?.lista))}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "argous",
-  "version": "1.2.158",
+  "version": "1.2.159",
   "description": "Argous.",
   "main": "lib/index.js",
   "author": "Carlos Schneider",