argous 1.2.155 → 1.2.158

package/dist/components/AutoCompleteFavorites/AutoCompleteFavorites.js

@@ -148,6 +148,9 @@ var useStyles = core_1.makeStyles(function (theme) { return ({
             background: theme.palette.type === '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)'
+    },
     listItemText: {
         margin: 0,
         width: '100%',
@@ -178,7 +181,7 @@ var useStyles = core_1.makeStyles(function (theme) { return ({
         }
     },
     popper: {
-        zIndex: 1301,
+        zIndex: 1300,
         width: function (_a) {
             var widthListBox = _a.widthListBox;
             return widthListBox ? "" + widthListBox + (testWidth(widthListBox.toString()) ? 'px' : '') + " !important" : '';
@@ -206,7 +209,7 @@ exports.CustomTooltip = core_1.withStyles(function (theme) { return ({
 var ListboxFavorites = react_1.forwardRef(function (props, ref) {
     var classes = useStyles();
     var children = props.children, favoritePage = props.favoritePage, dados = props.dados, setDados = props.setDados, group = props.group, groupHeaderColor = props.groupHeaderColor, groupTitleColor = props.groupTitleColor;
-    var pageNumber = dados.pageNumber, favoritosLength = dados.favoritosLength, direction = dados.direction, slide = dados.slide;
+    var pageNumber = dados.pageNumber, favoritosLength = dados.favoritosLength, direction = dados.direction, slide = dados.slide, cursor = dados.cursor;
     function retornaInicio() {
         switch (pageNumber) {
             case 1:
@@ -234,16 +237,15 @@ var ListboxFavorites = react_1.forwardRef(function (props, ref) {
             return section.props.children[1].props.children.slice(retornaInicio(), retornaFim());
         return section.props.children[1].props.children;
     }
-    function retornaEstrutura(sectionIndex, item) {
+    function retornaEstrutura(sectionIndex, item, itemIndex) {
+        var _a;
+        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.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 },
-                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, { key: item.key, className: classes.listItem }),
-                        react_1.default.createElement(core_1.ListItemText, { primary: item.props.children, className: classes.listItemText })))));
+            return react_1.default.createElement(core_1.Slide, { in: slide, direction: direction }, content);
         }
-        return (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, { key: item.key, className: classes.listItem }),
-                react_1.default.createElement(core_1.ListItemText, { primary: item.props.children, className: classes.listItemText }))));
+        return content;
     }
     function buttonClick(evento, value) {
         evento.preventDefault();
@@ -288,24 +290,26 @@ var ListboxFavorites = react_1.forwardRef(function (props, ref) {
                                 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); }))
+                retornaArray(sectionIndex, section).map(function (item, itemIndex) { return retornaEstrutura(sectionIndex, item, itemIndex); }))
             : retornaEstrutura(sectionIndex, section)));
     }));
 });
 var AutoCompleteFavorites = function (_a) {
-    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, _b = _a.onChange, onChange = _b === void 0 ? function (e) { return e; } : _b, _c = _a.textFieldProps, textFieldProps = _c === void 0 ? {} : _c, 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 _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 classes = useStyles({ widthListBox: widthListBox });
-    var _d = react_1.useState({
+    var _e = react_1.useState({
         lista: [],
         slide: true,
+        cursor: { index: '', page: '' },
         direction: '',
         favoritosLength: '',
-        pageNumber: favoritePage ? 1 : '',
-    }), dados = _d[0], setDados = _d[1];
-    var _e = react_1.useState(false), loading = _e[0], setLoading = _e[1];
-    var _f = react_1.useState(''), inputValue = _f[0], setInputValue = _f[1];
+        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];
     var interval = react_1.useRef(null);
-    var _g = react_1.useState(1), seconds = _g[0], setSeconds = _g[1];
+    var _h = react_1.useState(1), seconds = _h[0], setSeconds = _h[1];
     var startCounter = function () { return interval.current = setInterval(function () { return setSeconds(1); }, 1000); };
     var stopCounter = function () {
         clearInterval(interval.current);
@@ -365,7 +369,48 @@ 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); }, []);
-    return (react_1.default.createElement(lab_1.Autocomplete, __assign({}, props, { value: value, onChange: onChange }, { 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 ((e.key === 'Enter' || e.key === 'Tab') && !loading) && buscar(); }, inputProps: __assign(__assign({}, params.inputProps), { onKeyDown: function (e) { return (e.key === 'Enter' || e.key === 'Tab') && e.stopPropagation(); } }), InputProps: __assign(__assign(__assign({}, textFieldProps.InputProps), params.InputProps), { endAdornment: (react_1.default.createElement(react_1.default.Fragment, null,
+    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) {
+        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(); };
+    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 indexCapture = 0;
+        if (!value)
+            el = array === null || array === void 0 ? void 0 : array[0];
+        else {
+            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 nextIndex = i + directionIndex;
+                    if (nextIndex < array.length)
+                        indexCapture = nextIndex > -1 ? nextIndex : i;
+                    else
+                        indexCapture = i;
+                }
+            });
+            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 !== value)
+            invokeOnChange('', linha);
+    }
+    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,
                     react_1.default.createElement(core_1.Fade, { in: loading },
                         react_1.default.createElement(core_1.CircularProgress, { disableShrink: true, color: loadingColor || 'inherit', size: 20 })),

package/dist/components/Stepper/Stepper.js

@@ -10,6 +10,25 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -27,7 +46,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var core_1 = require("@material-ui/core");
 var clsx_1 = __importDefault(require("clsx"));
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var lib_1 = require("react-icons/lib");
 var md_1 = require("react-icons/md");
 var ColorlibConnector = core_1.withStyles(function (theme) { return ({
@@ -66,18 +85,32 @@ var ColorlibStepIcon = core_1.withStyles(function (theme) { return ({
         justifyContent: 'center',
         alignItems: 'center',
         fontSize: 24,
-        backgroundColor: '#ccc',
+        backgroundColor: theme.palette.type === 'light' ? '#ccc' : '#838383',
         transition: 'all 400ms ease 100ms'
     },
+    initial: theme.palette.type === 'light' ? {
+        backgroundColor: function (_a) {
+            var ambienteTeste = _a.ambienteTeste;
+            return ambienteTeste ? '#ffc7a2' : '#9acbb8';
+        }
+    } : {
+        backgroundColor: function (_a) {
+            var ambienteTeste = _a.ambienteTeste;
+            return ambienteTeste ? '#8b6751' : '#507265';
+        }
+    },
     active: {
-        backgroundColor: theme.palette.primary.main,
+        backgroundColor: function (_a) {
+            var ambienteTeste = _a.ambienteTeste;
+            return ambienteTeste ? '#f5781e !important' : '#00995D !important';
+        },
         boxShadow: theme.shadows[5],
     },
     completed: {
-        backgroundColor: theme.palette.secondary.main,
+        backgroundColor: '#2979ff !important',
     },
     error: {
-        backgroundColor: theme.palette.error.main,
+        backgroundColor: '#f44336 !important',
     },
     icon: {
         '& path': {
@@ -86,8 +119,9 @@ var ColorlibStepIcon = core_1.withStyles(function (theme) { return ({
     }
 }); })(function (_a) {
     var _b;
-    var active = _a.active, completed = _a.completed, icon = _a.icon, classes = _a.classes, error = _a.error;
+    var initial = _a.initial, active = _a.active, completed = _a.completed, icon = _a.icon, classes = _a.classes, error = _a.error;
     return (react_1.default.createElement("div", { className: clsx_1.default(classes.root, (_b = {},
+            _b[classes.initial] = initial,
             _b[classes.active] = active,
             _b[classes.completed] = completed,
             _b[classes.error] = error,
@@ -131,9 +165,12 @@ var stepperStyles = function (theme) {
     });
 };
 var Stepper = function (_a) {
-    var children = _a.children, _b = _a.classes, classes = _b === void 0 ? {} : _b, _c = _a.steps, steps = _c === void 0 ? [] : _c, _d = _a.onClick, onClick = _d === void 0 ? function (index) { return function (event) { return void (index, event); }; } : _d, _e = _a.onNext, onNext = _e === void 0 ? function (event) { return void (event); } : _e, _f = _a.onPrevious, onPrevious = _f === void 0 ? function (event) { return void (event); } : _f, _g = _a.onFinish, onFinish = _g === void 0 ? function (event) { return void (event); } : _g, maxStepProps = _a.maxStep, _h = _a.activeStep, activeStep = _h === void 0 ? 0 : _h, _j = _a.errors, errors = _j === void 0 ? [] : _j, _k = _a.component, Component = _k === void 0 ? 'div' : _k, _l = _a.backLabel, backLabel = _l === void 0 ? 'Voltar' : _l, _m = _a.nextLabel, nextLabel = _m === void 0 ? 'Avançar' : _m, _o = _a.finishLabel, finishLabel = _o === void 0 ? 'Finalizar' : _o, _p = _a.disableFinish, disableFinish = _p === void 0 ? false : _p, _q = _a.disableNext, disableNext = _q === void 0 ? false : _q, _r = _a.disablePrevious, disablePrevious = _r === void 0 ? false : _r, props = __rest(_a, ["children", "classes", "steps", "onClick", "onNext", "onPrevious", "onFinish", "maxStep", "activeStep", "errors", "component", "backLabel", "nextLabel", "finishLabel", "disableFinish", "disableNext", "disablePrevious"]);
+    var children = _a.children, _b = _a.classes, classes = _b === void 0 ? {} : _b, _c = _a.steps, steps = _c === void 0 ? [] : _c, _d = _a.onClick, onClick = _d === void 0 ? function (index) { return function (event) { return void (index, event); }; } : _d, _e = _a.onNext, onNext = _e === void 0 ? function (event) { return void (event); } : _e, _f = _a.onPrevious, onPrevious = _f === void 0 ? function (event) { return void (event); } : _f, _g = _a.onFinish, onFinish = _g === void 0 ? function (event) { return void (event); } : _g, maxStepProps = _a.maxStep, _h = _a.activeStep, activeStep = _h === void 0 ? 0 : _h, _j = _a.errors, errors = _j === void 0 ? [] : _j, _k = _a.component, Component = _k === void 0 ? 'div' : _k, _l = _a.backLabel, backLabel = _l === void 0 ? 'Voltar' : _l, _m = _a.nextLabel, nextLabel = _m === void 0 ? 'Avançar' : _m, _o = _a.finishLabel, finishLabel = _o === void 0 ? 'Finalizar' : _o, _p = _a.disableFinish, disableFinish = _p === void 0 ? false : _p, _q = _a.disableNext, disableNext = _q === void 0 ? false : _q, _r = _a.disablePrevious, disablePrevious = _r === void 0 ? false : _r, _s = _a.showProgress, showProgress = _s === void 0 ? false : _s, props = __rest(_a, ["children", "classes", "steps", "onClick", "onNext", "onPrevious", "onFinish", "maxStep", "activeStep", "errors", "component", "backLabel", "nextLabel", "finishLabel", "disableFinish", "disableNext", "disablePrevious", "showProgress"]);
     var maxSteps = steps.length;
     var maxStep = maxStepProps || steps.length - 1;
+    var _t = react_1.useState(-1), initialStep = _t[0], setInitialStep = _t[1];
+    react_1.useEffect(function () { return (activeStep > initialStep && showProgress) && setInitialStep(activeStep); }, [activeStep, initialStep, showProgress]);
+    var ambienteTeste = JSON.parse(window.localStorage.getItem('ambienteTeste'));
     var theme = core_1.useTheme();
     var mobile = core_1.useMediaQuery(theme.breakpoints.down(Math.max(maxSteps * 100, theme.breakpoints.values.sm)));
     return react_1.default.createElement(Component, __assign({}, props),
@@ -146,7 +183,7 @@ var Stepper = function (_a) {
             var icon = _a[0], label = _a[1], description = _a[2];
             return (react_1.default.createElement(core_1.Step, { key: label },
                 react_1.default.createElement(core_1.StepButton, { disabled: i > maxStep, onClick: onClick(i), optional: react_1.default.createElement(core_1.Typography, { variant: 'caption', className: clsx_1.default(classes.caption, (_b = {}, _b[classes.selectedCaption] = activeStep >= i, _b)) }, description) },
-                    react_1.default.createElement(core_1.StepLabel, { StepIconProps: { icon: icon, error: errors[i] }, disabled: i > maxStep, error: errors[i], StepIconComponent: ColorlibStepIcon }, label))));
+                    react_1.default.createElement(core_1.StepLabel, { disabled: i > maxStep, error: errors[i], StepIconComponent: ColorlibStepIcon, StepIconProps: { icon: icon, error: errors[i], initial: initialStep >= i, ambienteTeste: ambienteTeste } }, label))));
         }))),
         react_1.default.createElement(core_1.Box, { padding: mobile ? 0 : 4, pt: 1, pb: 0 }, children),
         mobile ? (react_1.default.createElement(core_1.MobileStepper, { steps: maxSteps, position: 'bottom', variant: 'dots', activeStep: activeStep, backButton: react_1.default.createElement(core_1.Button, { startIcon: react_1.default.createElement(md_1.MdChevronLeft, null), onClick: onPrevious, disabled: activeStep === 0 }, backLabel), nextButton: react_1.default.createElement(core_1.Button, { variant: 'contained', color: 'primary', endIcon: activeStep === maxSteps - 1 ? react_1.default.createElement(md_1.MdCheck, null) : react_1.default.createElement(md_1.MdChevronRight, null), onClick: activeStep === steps.length - 1 ? onFinish : onNext }, activeStep === steps.length - 1 ? finishLabel : nextLabel) })) : (react_1.default.createElement(core_1.DialogActions, null,

package/lib/components/AutoCompleteFavorites/AutoCompleteFavorites.js

@@ -66,6 +66,9 @@ const useStyles = makeStyles((theme) => ({
       background: theme.palette.type === '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)'
+  },
   listItemText: {
     margin: 0,
     width: '100%',
@@ -96,7 +99,7 @@ const useStyles = makeStyles((theme) => ({
     }
   },
   popper: {
-    zIndex: 1301,
+    zIndex: 1300,
     width: ({ widthListBox }) => widthListBox ? `${widthListBox}${testWidth(widthListBox.toString()) ? 'px' : ''} !important` : '',
   }
 }));
@@ -126,7 +129,7 @@ const ListboxFavorites = forwardRef((props, ref) => {
 
   const classes = useStyles();
   const { children, favoritePage, dados, setDados, group, groupHeaderColor, groupTitleColor } = props;
-  const { pageNumber, favoritosLength, direction, slide } = dados;
+  const { pageNumber, favoritosLength, direction, slide, cursor } = dados;
 
   function retornaInicio() {
     switch (pageNumber) {
@@ -157,24 +160,17 @@ const ListboxFavorites = forwardRef((props, ref) => {
     return section.props.children[1].props.children;
   }
 
-  function retornaEstrutura(sectionIndex, item) {
+  function retornaEstrutura(sectionIndex, item, itemIndex) {
+    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 })}>
+        <ListItemText primary={item.props.children} className={classes.listItemText} />
+      </ListItem>
+    </CustomTooltip>;
     if (sectionIndex === 0 && favoritePage && favoritosLength > 7) {
-      return (
-        <Slide in={slide} direction={direction}>
-          <CustomTooltip title={item.props.children} arrow enterDelay='1000' enterNextDelay='1000' placement='top-end' TransitionComponent={Fade} TransitionProps={{ timeout: { enter: 100, exit: 500 } }}>
-            <ListItem {...item.props} key={item.key} className={classes.listItem}>
-              <ListItemText primary={item.props.children} className={classes.listItemText} />
-            </ListItem>
-          </CustomTooltip>
-        </Slide>
-      );
-    } return (
-      <CustomTooltip title={item.props.children} arrow enterDelay='1000' enterNextDelay='1000' placement='top-end' TransitionComponent={Fade} TransitionProps={{ timeout: { enter: 100, exit: 500 } }}>
-        <ListItem {...item.props} key={item.key} className={classes.listItem}>
-          <ListItemText primary={item.props.children} className={classes.listItemText} />
-        </ListItem>
-      </CustomTooltip>
-    );
+      return <Slide in={slide} direction={direction}>
+        {content}
+      </Slide>;
+    } return content;
   }
 
   function buttonClick(evento, value) {
@@ -219,16 +215,16 @@ const ListboxFavorites = forwardRef((props, ref) => {
                     <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>
+                    <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))}
+            {retornaArray(sectionIndex, section).map((item, itemIndex) => retornaEstrutura(sectionIndex, item, itemIndex))}
           </React.Fragment> 
           : retornaEstrutura(sectionIndex, section)
         }
@@ -243,9 +239,10 @@ const AutoCompleteFavorites = ({ action, busca, resposta, autoSearch, label, val
   const [dados, setDados] = useState({
     lista: [],
     slide: true,
+    cursor: { index: '', page: '' },
     direction: '',
     favoritosLength: '',
-    pageNumber: favoritePage ? 1 : '',
+    pageNumber: favoritePage ? 1 : undefined,
   });
   const [loading, setLoading] = useState(false);
   const [inputValue, setInputValue] = useState('');
@@ -291,10 +288,52 @@ 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]);
+
+  const keyUp = 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();
+
+  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 indexCapture = 0;
+    if (!value) el = array?.[0];
+    else {
+      array.forEach((v, i) => {
+        const elInnerText = v.innerText;
+        const endIndexCode = elInnerText.indexOf('-') - 1;
+        const code = elInnerText.substring(0, endIndexCode);
+        if (code === value[3]) {
+          const nextIndex = i + directionIndex;
+          if (nextIndex < array.length) indexCapture = nextIndex > -1 ? nextIndex : i;
+          else indexCapture = i;
+        } 
+      });
+      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 !== value) invokeOnChange('', linha);
+  }
+  
+  const invokeOnChange = onChange;
+
   return (
     <Autocomplete
       {...props}
-      {...{ value, onChange }}
+      {...{ value }}
+      onChange={invokeOnChange}
       autoComplete
       autoHighlight
       openText='Abrir'
@@ -312,10 +351,10 @@ const AutoCompleteFavorites = ({ action, busca, resposta, autoSearch, label, val
           label={label}
           {...params}
           {...textFieldProps}
-          onKeyUp={e => ((e.key === 'Enter' || e.key === 'Tab') && !loading) && buscar()}
+          onKeyUp={e => keyUp(e)}
           inputProps={{
             ...params.inputProps,
-            onKeyDown: e => (e.key === 'Enter' || e.key === 'Tab') && e.stopPropagation()
+            onKeyDown: e => keyDown(e)
           }}
           InputProps={{
             ...textFieldProps.InputProps,

package/lib/components/Stepper/Stepper.js

@@ -1,6 +1,6 @@
 import { Box, Button, DialogActions, Divider, ListItem, ListItemIcon, ListItemText, MobileStepper, Paper, Step, StepButton, StepConnector, StepLabel, Stepper as MuiStepper, Typography, useMediaQuery, useTheme, withStyles } from '@material-ui/core';
 import clsx from 'clsx';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { IconContext } from 'react-icons/lib';
 import { MdCheck, MdChevronLeft, MdChevronRight } from 'react-icons/md';
 
@@ -41,27 +41,33 @@ const ColorlibStepIcon = withStyles(theme => ({
     justifyContent: 'center',
     alignItems: 'center',
     fontSize: 24,
-    backgroundColor: '#ccc',
+    backgroundColor: theme.palette.type === 'light' ? '#ccc' : '#838383',
     transition: 'all 400ms ease 100ms'
   },
+  initial: theme.palette.type === 'light' ? {
+    backgroundColor: ({ ambienteTeste }) => ambienteTeste ? '#ffc7a2' : '#9acbb8'
+  } : {
+    backgroundColor: ({ ambienteTeste }) => ambienteTeste ? '#8b6751' : '#507265'
+  },
   active: {
-    backgroundColor: theme.palette.primary.main,
+    backgroundColor: ({ ambienteTeste }) => ambienteTeste ? '#f5781e !important' : '#00995D !important',
     boxShadow: theme.shadows[5],
   },
   completed: {
-    backgroundColor: theme.palette.secondary.main,
+    backgroundColor: '#2979ff !important',
   },
   error: {
-    backgroundColor: theme.palette.error.main,
+    backgroundColor: '#f44336 !important',
   },
   icon: {
     '& path': {
       stroke: '#FFF'
     }
   }
-}))(({ active, completed, icon, classes, error }) => (
+}))(({ initial, active, completed, icon, classes, error }) => (
   <div
     className={clsx(classes.root, {
+      [classes.initial]: initial,
       [classes.active]: active,
       [classes.completed]: completed,
       [classes.error]: error,
@@ -125,10 +131,16 @@ const Stepper = ({
   disableFinish = false,
   disableNext = false,
   disablePrevious = false,
+  showProgress = false,
   ...props
 }) => {
   const maxSteps = steps.length;
   const maxStep = maxStepProps || steps.length - 1;
+
+  const [initialStep, setInitialStep] = useState(-1);
+  useEffect(() => (activeStep > initialStep && showProgress) && setInitialStep(activeStep), [activeStep, initialStep, showProgress]);
+
+  const ambienteTeste = JSON.parse(window.localStorage.getItem('ambienteTeste'));
   
   const theme = useTheme();
   const mobile = useMediaQuery(theme.breakpoints.down(Math.max(maxSteps * 100, theme.breakpoints.values.sm)));
@@ -157,10 +169,11 @@ const Stepper = ({
                 {description}
               </Typography>}>
               <StepLabel 
-                StepIconProps={{ icon, error: errors[i] }} 
                 disabled={i > maxStep} 
                 error={errors[i]} 
-                StepIconComponent={ColorlibStepIcon}>
+                StepIconComponent={ColorlibStepIcon}
+                StepIconProps={{ icon, error: errors[i], initial: initialStep >= i, ambienteTeste }} 
+              >
                 {label}
               </StepLabel>
             </StepButton>

package/package.json

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