linear-react-components-ui 0.4.76-beta.25 → 0.4.76-beta.26

package/lib/inputs/select/multiple/index.js

@@ -270,12 +270,12 @@ var MultipleSelect = /*#__PURE__*/function (_Component) {
 
       if (e.keyCode === constants.keyCodes.ENTER) {
         this.onSelect(selected);
-      } else if ([constants.keyCodes.ARROW_DOWN, constants.keyCodes.ARROW_UP].includes(e.keyCode)) {
+      } else if ([constants.keyCodes.ARROW_UP, constants.keyCodes.ARROW_DOWN].includes(e.keyCode)) {
         var index = dataSource.findIndex(function (d) {
           return d === selected;
         });
 
-        if (e.keyCode === constants.keyCodes.ARROW_UP) {
+        if (e.keyCode === constants.keyCodes.ARROW_DOWN) {
           index = index === dataSource.length - 1 ? 0 : index + 1;
         } else {
           index = index === 0 ? dataSource.length - 1 : index - 1;

package/lib/inputs/select/simple/index.js

@@ -385,12 +385,12 @@ var _initialiseProps = function _initialiseProps() {
         e.preventDefault();
 
         _this3.onSelect(selected);
-      } else if ([constants.keyCodes.ARROW_DOWN, constants.keyCodes.ARROW_UP].includes(e.keyCode)) {
+      } else if ([constants.keyCodes.ARROW_UP, constants.keyCodes.ARROW_DOWN].includes(e.keyCode)) {
         var index = dataSource.findIndex(function (d) {
           return d[idKey] === selected[idKey];
         });
 
-        if (e.keyCode === constants.keyCodes.ARROW_UP) {
+        if (e.keyCode === constants.keyCodes.ARROW_DOWN) {
           index = index === dataSource.length - 1 ? 0 : index + 1;
         } else {
           index = index === 0 ? dataSource.length - 1 : index - 1;

package/lib/internals/constants.js

@@ -7,9 +7,10 @@ exports.PARA_ENGANAR_O_ESLINT_JA_QUE_TENHO_SO_UMA_CONSTANTE = exports.keyCodes =
 var keyCodes = {
   TAB: 9,
   ENTER: 13,
-  ARROW_UP: 40,
-  ARROW_DOWN: 38,
-  BACKSPACE: 8
+  ARROW_UP: 38,
+  ARROW_DOWN: 40,
+  BACKSPACE: 8,
+  F: 70
 };
 exports.keyCodes = keyCodes;
 var PARA_ENGANAR_O_ESLINT_JA_QUE_TENHO_SO_UMA_CONSTANTE = 1;

package/lib/list/Item.js

@@ -21,6 +21,8 @@ var _helpers = _interopRequireDefault(require("./helpers"));
 
 var _withDropdown = require("../dropdown/withDropdown");
 
+var constants = _interopRequireWildcard(require("../internals/constants"));
+
 var _permissionValidations = require("../permissionValidations");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -44,7 +46,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr && (typeof Symbol !== "und
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var Item = function Item(props) {
-  var _onClick = props.onClick,
+  var onClick = props.onClick,
       leftIconName = props.leftIconName,
       leftIcon = props.leftIcon,
       displayCheckbox = props.displayCheckbox,
@@ -68,7 +70,8 @@ var Item = function Item(props) {
   var _useContext = (0, _react.useContext)(_helpers["default"]),
       handleSelectItem = _useContext.handleSelectItem,
       selectable = _useContext.selectable,
-      selectedItemId = _useContext.selectedItemId;
+      selectedItemId = _useContext.selectedItemId,
+      selectedItemRef = _useContext.selectedItemRef;
 
   var dropdownContext = (0, _react.useContext)(_withDropdown.WithDropdownContext);
   var options = [_permissionValidations.OPTIONS_ON_DENIED.disabled, _permissionValidations.OPTIONS_ON_DENIED.unvisible];
@@ -77,6 +80,8 @@ var Item = function Item(props) {
       _useState2 = _slicedToArray(_useState, 1),
       onDenied = _useState2[0];
 
+  var history = (0, _reactRouterDom.useHistory)();
+
   var shouldDisable = function shouldDisable() {
     return disabled || onDenied.disabled;
   };
@@ -97,16 +102,28 @@ var Item = function Item(props) {
     return null;
   };
 
+  var handleOnSelectItem = function handleOnSelectItem(e) {
+    if (onClick !== undefined) onClick(e, itemId);
+    if (dropdownContext) dropdownContext.handleDropdownClose();
+    if (selectable) handleSelectItem(itemId, onClick);
+  };
+
+  var onKeyDown = function onKeyDown(e) {
+    if ([constants.keyCodes.ENTER].includes(e.keyCode)) {
+      e.preventDefault();
+      handleOnSelectItem(e);
+      if (url) history.push(url);
+    }
+  };
+
   var getProps = function getProps() {
     if (shouldDisable()) return undefined;
-    if (_onClick === undefined && dropdownContext === undefined && !selectable) return null;
+    if (onClick === undefined && dropdownContext === undefined && !selectable) return null;
     return {
       onClick: function onClick(e) {
-        if (_onClick !== undefined) _onClick(e, itemId);
-        if (dropdownContext) dropdownContext.handleDropdownClose();
-        if (selectable) handleSelectItem(itemId, _onClick);
+        handleOnSelectItem(e);
       },
-      onKeyDown: null,
+      onKeyDown: onKeyDown,
       role: 'button',
       tabIndex: '0'
     };
@@ -114,6 +131,7 @@ var Item = function Item(props) {
 
   if (!visible || onDenied.unvisible) return null;
   return /*#__PURE__*/_react["default"].createElement("li", _extends({
+    ref: itemId && selectedItemId === itemId ? selectedItemRef : null,
     style: style,
     className: "item-container ".concat(hovered && 'hovered', "\n        ").concat(itemId && selectedItemId === itemId ? '-activedlist' : '')
   }, getProps(), {

package/lib/list/index.js

@@ -33,6 +33,8 @@ var _Header = _interopRequireDefault(require("./Header"));
 
 var _Item = _interopRequireDefault(require("./Item"));
 
+var constants = _interopRequireWildcard(require("../internals/constants"));
+
 var _Separator = _interopRequireDefault(require("./Separator"));
 
 require("../assets/styles/list.scss");
@@ -58,6 +60,19 @@ function _iterableToArrayLimit(arr, i) { var _i = arr && (typeof Symbol !== "und
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var List = function List(props) {
+  var selectedItemRef = (0, _react.useRef)(null);
+  var listRef = (0, _react.useRef)(null);
+
+  var _useState = (0, _react.useState)(''),
+      _useState2 = _slicedToArray(_useState, 2),
+      selectedItemId = _useState2[0],
+      setSelectedItemId = _useState2[1];
+
+  var _useState3 = (0, _react.useState)([]),
+      _useState4 = _slicedToArray(_useState3, 2),
+      itensId = _useState4[0],
+      setItensId = _useState4[1];
+
   var children = props.children,
       customClass = props.customClass,
       condensed = props.condensed,
@@ -65,29 +80,92 @@ var List = function List(props) {
       style = props.style,
       selectable = props.selectable,
       onSelectItem = props.onSelectItem;
-
-  var _useState = (0, _react.useState)(''),
-      _useState2 = _slicedToArray(_useState, 2),
-      selectedItemId = _useState2[0],
-      setSelectedItemId = _useState2[1];
-
   var contextValues = {
     selectable: selectable,
     selectedItemId: selectedItemId,
-    handleSelectItem: function handleSelectItem(selectedId, onClick) {
-      if (!onSelectItem && onClick) setSelectedItemId(selectedId);
-      if (onSelectItem) onSelectItem(selectedId);
+    selectedItemRef: selectedItemRef,
+    children: children,
+    handleSelectItem: function handleSelectItem(itemId, onClick) {
+      if (!onSelectItem && onClick) setSelectedItemId(itemId);
+      if (onSelectItem) onSelectItem(itemId);
+    }
+  };
+
+  var onKeyDown = function onKeyDown(e) {
+    if ([constants.keyCodes.ARROW_DOWN, constants.keyCodes.ARROW_UP].includes(e.keyCode)) {
+      e.preventDefault();
+
+      if (e.keyCode === constants.keyCodes.ARROW_DOWN) {
+        if (selectedItemId === itensId[itensId.length - 1]) {
+          setSelectedItemId(itensId[0]);
+        } else {
+          var index = itensId.indexOf(selectedItemId === '' ? '0' : selectedItemId);
+          setSelectedItemId(itensId[index + 1]);
+        }
+      } else if (e.keyCode === constants.keyCodes.ARROW_UP) {
+        if (selectedItemId === itensId[0]) {
+          setSelectedItemId(itensId[itensId.length - 1]);
+        } else {
+          var _index = itensId.indexOf(selectedItemId);
+
+          setSelectedItemId(itensId[_index - 1]);
+        }
+      }
+
+      return selectedItemRef.current && selectedItemRef.current.focus();
     }
+
+    return null;
   };
+
+  (0, _react.useEffect)(function () {
+    if (selectedItemRef.current && listRef.current && listRef.current.scroll) {
+      var selectedItemRect = selectedItemRef.current.getBoundingClientRect();
+      var listRect = listRef.current.getBoundingClientRect();
+      var defaultScrollTop = 0;
+      var defaultBottomOffset = 100;
+
+      if (selectedItemRect.top - selectedItemRect.height > listRect.bottom) {
+        listRef.current.scroll({
+          top: selectedItemRect.top
+        });
+      } else if (selectedItemRect.top + selectedItemRect.height - listRect.y >= listRect.height) {
+        listRef.current.scroll({
+          top: listRef.current.scrollTop + selectedItemRect.height
+        });
+      } else if (selectedItemRect.bottom < defaultBottomOffset) {
+        listRef.current.scroll({
+          top: defaultScrollTop
+        });
+      } else {
+        listRef.current.scroll({
+          top: listRef.current.scrollTop - selectedItemRect.height
+        });
+      }
+    }
+  }, [selectedItemRef.current]);
+  (0, _react.useEffect)(function () {
+    document.addEventListener('keydown', onKeyDown);
+    return function () {
+      document.removeEventListener('keydown', onKeyDown);
+    };
+  });
   (0, _react.useEffect)(function () {
     if (onSelectItem && props.selectedItemId) setSelectedItemId(props.selectedItemId);
   }, [props.selectedItemId]);
+  (0, _react.useEffect)(function () {
+    var newItensIds = children.length > 0 && children.map(function (item) {
+      return item.props.itemId;
+    }).filter(Boolean);
+    setItensId(newItensIds);
+  }, [children.length]);
   return /*#__PURE__*/_react["default"].createElement(_helpers["default"].Provider, {
     value: contextValues
   }, /*#__PURE__*/_react["default"].createElement("ul", {
     "data-testid": "list-component",
     style: style,
-    className: "list-component ".concat(condensed && '-condensed', " ").concat(customClass, " ").concat(!transparent && '-listbackground')
+    ref: listRef,
+    className: "list-component ".concat(condensed && '-condensed', "\n        ").concat(customClass, " ").concat(!transparent && '-listbackground')
   }, children));
 };
 

package/lib/list/list.spec.js

@@ -34,9 +34,16 @@ describe('Components', function () {
       title: "defaut"
     }, listHeaderProps), /*#__PURE__*/_react["default"].createElement("p", {
       className: "listheader-child"
-    }, "saas")), /*#__PURE__*/_react["default"].createElement(_index.ListItem, listItemProps, /*#__PURE__*/_react["default"].createElement(_buttons["default"], {
+    }, "saas")), /*#__PURE__*/_react["default"].createElement(_index.ListItem, _extends({
+      itemId: "1"
+    }, listItemProps), /*#__PURE__*/_react["default"].createElement(_buttons["default"], {
       customClass: "childbuttontest",
       label: "Teste Child"
+    })), /*#__PURE__*/_react["default"].createElement(_index.ListItem, _extends({
+      itemId: "2"
+    }, listItemProps), /*#__PURE__*/_react["default"].createElement(_buttons["default"], {
+      customClass: "childbuttontest",
+      label: "Teste Child 2"
     }))));
   };
 
@@ -93,31 +100,159 @@ describe('Components', function () {
       expect(container.firstChild).toHaveStyle(style);
     });
     it('should select item by id', function () {
-      var listItemProps = {
-        itemId: '1'
-      };
-
       var _render6 = (0, _react2.render)(list({
         selectable: true,
         onSelectItem: jest.fn(),
         selectedItemId: '1'
-      }, {}, listItemProps)),
+      })),
           container = _render6.container;
 
       var listItem = container.querySelector('.item-container');
       expect(listItem).toHaveClass('-activedlist');
     });
+    it('should select next item when pressed arrow down', function () {
+      var _render7 = (0, _react2.render)(list({
+        selectable: true,
+        onSelectItem: jest.fn()
+      })),
+          container = _render7.container;
+
+      var listComponent = container.querySelector('.list-component');
+
+      _react2.fireEvent.keyDown(listComponent, {
+        key: 'ArrowDown',
+        code: 'ArrowDown',
+        keyCode: 40
+      });
+
+      _react2.fireEvent.keyDown(listComponent, {
+        key: 'ArrowDown',
+        code: 'ArrowDown',
+        keyCode: 40
+      });
+
+      expect(container.querySelectorAll('.item-container')[1]).toHaveClass('-activedlist');
+    });
+    it('should select previous item when pressed arrow down', function () {
+      var _render8 = (0, _react2.render)(list({
+        selectable: true,
+        onSelectItem: jest.fn()
+      })),
+          container = _render8.container;
+
+      var listComponent = container.querySelector('.list-component');
+
+      _react2.fireEvent.keyDown(listComponent, {
+        key: 'ArrowDown',
+        code: 'ArrowDown',
+        keyCode: 40
+      });
+
+      _react2.fireEvent.keyDown(listComponent, {
+        key: 'ArrowDown',
+        code: 'ArrowDown',
+        keyCode: 40
+      });
+
+      _react2.fireEvent.keyDown(listComponent, {
+        key: 'ArrowUp',
+        code: 'ArrowUp',
+        keyCode: 38
+      });
+
+      expect(container.querySelectorAll('.item-container')[0]).toHaveClass('-activedlist');
+    });
+    it('should select last item when pressed arrow up at first item', function () {
+      var _render9 = (0, _react2.render)(list({
+        selectable: true,
+        onSelectItem: jest.fn()
+      })),
+          container = _render9.container;
+
+      var listComponent = container.querySelector('.list-component');
+
+      _react2.fireEvent.keyDown(listComponent, {
+        key: 'ArrowDown',
+        code: 'ArrowDown',
+        keyCode: 40
+      });
+
+      _react2.fireEvent.keyDown(listComponent, {
+        key: 'ArrowUp',
+        code: 'ArrowUp',
+        keyCode: 38
+      });
+
+      expect(container.querySelectorAll('.item-container')[1]).toHaveClass('-activedlist');
+    });
+    it('should select first item when pressed arrow down at last item', function () {
+      var _render10 = (0, _react2.render)(list({
+        selectable: true,
+        onSelectItem: jest.fn()
+      })),
+          container = _render10.container;
+
+      var listComponent = container.querySelector('.list-component');
+
+      _react2.fireEvent.keyDown(listComponent, {
+        key: 'ArrowDown',
+        code: 'ArrowDown',
+        keyCode: 40
+      });
+
+      _react2.fireEvent.keyDown(listComponent, {
+        key: 'ArrowDown',
+        code: 'ArrowDown',
+        keyCode: 40
+      });
+
+      _react2.fireEvent.keyDown(listComponent, {
+        key: 'ArrowDown',
+        code: 'ArrowDown',
+        keyCode: 40
+      });
+
+      expect(container.querySelectorAll('.item-container')[0]).toHaveClass('-activedlist');
+    });
+    it('should fire event when press Enter key', function () {
+      var mockOnSelectItem = jest.fn();
+      var itemId = '1';
+
+      var _render11 = (0, _react2.render)(list({
+        selectable: true,
+        onSelectItem: mockOnSelectItem
+      })),
+          container = _render11.container;
+
+      var listComponent = container.querySelector('.list-component');
+
+      _react2.fireEvent.keyDown(listComponent, {
+        key: 'ArrowDown',
+        code: 'ArrowDown',
+        keyCode: 40
+      });
+
+      var listItem = container.querySelector('.list-component .item-container.-activedlist');
+
+      _react2.fireEvent.keyDown(listItem, {
+        key: 'Enter',
+        code: 'Enter',
+        keyCode: 13
+      });
+
+      expect(mockOnSelectItem).toHaveBeenCalledWith(itemId);
+    });
     describe('prop selectable', function () {
       it('should allow ListItem to be selected', function () {
         var listItemProps = {
-          itemId: '1',
           onClick: jest.fn()
         };
 
-        var _render7 = (0, _react2.render)(list({
-          selectable: true
+        var _render12 = (0, _react2.render)(list({
+          selectable: true,
+          selectedItemId: '1'
         }, {}, listItemProps)),
-            container = _render7.container;
+            container = _render12.container;
 
         var listItem = container.querySelector('.item-container');
 
@@ -128,18 +263,11 @@ describe('Components', function () {
       it('should call onSelectItem', function () {
         var mockOnSelectItem = jest.fn();
 
-        var mockList = /*#__PURE__*/_react["default"].createElement(_index["default"], {
+        var _render13 = (0, _react2.render)(list({
           selectable: true,
-          onSelectItem: function onSelectItem(itemId) {
-            return mockOnSelectItem(itemId);
-          }
-        }, /*#__PURE__*/_react["default"].createElement(_index.ListItem, {
-          itemId: "1",
-          text: "Teste Foo"
-        }));
-
-        var _render8 = (0, _react2.render)(mockList),
-            container = _render8.container;
+          onSelectItem: mockOnSelectItem
+        })),
+            container = _render13.container;
 
         var listItem = container.querySelector('.item-container');
 
@@ -151,18 +279,18 @@ describe('Components', function () {
   });
   describe('ListHeader', function () {
     it('should render correctly', function () {
-      var _render9 = (0, _react2.render)(list()),
-          container = _render9.container;
+      var _render14 = (0, _react2.render)(list()),
+          container = _render14.container;
 
       expect(container.querySelector('.list-header')).toBeTruthy();
     });
     it('should apply title', function () {
       var title = 'Teste Header';
 
-      var _render10 = (0, _react2.render)(list({}, {
+      var _render15 = (0, _react2.render)(list({}, {
         title: title
       })),
-          container = _render10.container;
+          container = _render15.container;
 
       var listHeaderTitle = container.querySelector('.list-header > .title');
       expect(listHeaderTitle).toBeTruthy();
@@ -174,10 +302,10 @@ describe('Components', function () {
         paddingBottom: '2px'
       };
 
-      var _render11 = (0, _react2.render)(list({}, {
+      var _render16 = (0, _react2.render)(list({}, {
         style: style
       })),
-          container = _render11.container;
+          container = _render16.container;
 
       var listHeader = container.querySelector('.list-header');
       expect(listHeader).toHaveStyle(style);
@@ -185,17 +313,17 @@ describe('Components', function () {
     it('should apply customClass', function () {
       var customClass = 'teste-listheader';
 
-      var _render12 = (0, _react2.render)(list({}, {
+      var _render17 = (0, _react2.render)(list({}, {
         customClass: customClass
       })),
-          container = _render12.container;
+          container = _render17.container;
 
       var listHeader = container.querySelector('.list-header');
       expect(listHeader).toHaveClass(customClass);
     });
     it('should render children', function () {
-      var _render13 = (0, _react2.render)(list()),
-          container = _render13.container;
+      var _render18 = (0, _react2.render)(list()),
+          container = _render18.container;
 
       var listHeaderChild = container.querySelector('.list-header > .listheader-child');
       expect(listHeaderChild).toBeTruthy();
@@ -203,8 +331,8 @@ describe('Components', function () {
   });
   describe('ListItem', function () {
     it('should render correctly', function () {
-      var _render14 = (0, _react2.render)(list()),
-          container = _render14.container;
+      var _render19 = (0, _react2.render)(list()),
+          container = _render19.container;
 
       var listItem = container.querySelector('.item-container');
       expect(listItem).toBeTruthy();
@@ -212,10 +340,10 @@ describe('Components', function () {
     it('should apply text', function () {
       var text = 'Teste Item 1';
 
-      var _render15 = (0, _react2.render)(list({}, {}, {
+      var _render20 = (0, _react2.render)(list({}, {}, {
         text: text
       })),
-          container = _render15.container;
+          container = _render20.container;
 
       var listItemText = container.querySelector('.item-container .text');
       expect(listItemText).toBeTruthy();
@@ -224,10 +352,10 @@ describe('Components', function () {
     it('should apply subtext', function () {
       var subText = 'Teste Item 1';
 
-      var _render16 = (0, _react2.render)(list({}, {}, {
+      var _render21 = (0, _react2.render)(list({}, {}, {
         subText: subText
       })),
-          container = _render16.container;
+          container = _render21.container;
 
       var listItemSubText = container.querySelector('.item-container .subtext');
       expect(listItemSubText).toBeTruthy();
@@ -239,10 +367,10 @@ describe('Components', function () {
         paddingBottom: '2px'
       };
 
-      var _render17 = (0, _react2.render)(list({}, {}, {
+      var _render22 = (0, _react2.render)(list({}, {}, {
         style: style
       })),
-          container = _render17.container;
+          container = _render22.container;
 
       var listItem = container.querySelector('.item-container');
       expect(listItem).toHaveStyle(style);
@@ -250,41 +378,41 @@ describe('Components', function () {
     describe('prop separator', function () {
       var separator = true;
       it('apply list-separator css class to text/subtext/children container', function () {
-        var _render18 = (0, _react2.render)(list({}, {}, {
+        var _render23 = (0, _react2.render)(list({}, {}, {
           text: 'Teste',
           separator: separator
         })),
-            container = _render18.container;
+            container = _render23.container;
 
         var listItemTextContainer = container.querySelector('.item-container .item');
         expect(listItemTextContainer).toHaveClass('list-separator');
       });
       it('apply list-separator css class to leftIcon/leftElement container', function () {
-        var _render19 = (0, _react2.render)(list({}, {}, {
+        var _render24 = (0, _react2.render)(list({}, {}, {
           leftIconName: 'pencil',
           separator: separator
         })),
-            container = _render19.container;
+            container = _render24.container;
 
         var listItemLeftElContainer = container.querySelector('.item-container .item.-icon-left');
         expect(listItemLeftElContainer).toHaveClass('list-separator');
       });
       it('apply list-separator css class to rightIcon/rightElement container', function () {
-        var _render20 = (0, _react2.render)(list({}, {}, {
+        var _render25 = (0, _react2.render)(list({}, {}, {
           rightIconName: 'pencil',
           separator: separator
         })),
-            container = _render20.container;
+            container = _render25.container;
 
         var listItemRightElContainer = container.querySelector('.item-container .item.-icon-right');
         expect(listItemRightElContainer).toHaveClass('list-separator');
       });
     });
     it('prop hovered should apply css class hovered ', function () {
-      var _render21 = (0, _react2.render)(list({}, {}, {
+      var _render26 = (0, _react2.render)(list({}, {}, {
         hovered: true
       })),
-          container = _render21.container;
+          container = _render26.container;
 
       var listItem = container.querySelector('.item-container');
       expect(listItem).toHaveClass('hovered');
@@ -294,11 +422,11 @@ describe('Components', function () {
       it('should disable onClick event', function () {
         var mockFunc = jest.fn();
 
-        var _render22 = (0, _react2.render)(list({}, {}, {
+        var _render27 = (0, _react2.render)(list({}, {}, {
           disabled: disabled,
           onClick: mockFunc
         })),
-            container = _render22.container;
+            container = _render27.container;
 
         var listItem = container.querySelector('.item-container');
 
@@ -307,53 +435,53 @@ describe('Components', function () {
         expect(mockFunc).not.toBeCalled();
       });
       it('apply disabled css class to text/subtext/children container', function () {
-        var _render23 = (0, _react2.render)(list({}, {}, {
+        var _render28 = (0, _react2.render)(list({}, {}, {
           text: 'Teste',
           disabled: disabled
         })),
-            container = _render23.container;
+            container = _render28.container;
 
         var listItemTextContainer = container.querySelector('.item-container .item');
         expect(listItemTextContainer).toHaveClass('disabled');
       });
       it('apply disabled css class to leftIcon/leftElement container', function () {
-        var _render24 = (0, _react2.render)(list({}, {}, {
+        var _render29 = (0, _react2.render)(list({}, {}, {
           leftIconName: 'pencil',
           disabled: disabled
         })),
-            container = _render24.container;
+            container = _render29.container;
 
         var listItemLeftElContainer = container.querySelector('.item-container .item.-icon-left');
         expect(listItemLeftElContainer).toHaveClass('disabled');
       });
       it('apply disabled css class to rightIcon/rightElement container', function () {
-        var _render25 = (0, _react2.render)(list({}, {}, {
+        var _render30 = (0, _react2.render)(list({}, {}, {
           rightIconName: 'pencil',
           disabled: disabled
         })),
-            container = _render25.container;
+            container = _render30.container;
 
         var listItemRightElContainer = container.querySelector('.item-container .item.-icon-right');
         expect(listItemRightElContainer).toHaveClass('disabled');
       });
       it('should hide url', function () {
-        var _render26 = (0, _react2.render)(list({}, {}, {
+        var _render31 = (0, _react2.render)(list({}, {}, {
           disabled: disabled,
           url: 'saas'
         })),
-            container = _render26.container;
+            container = _render31.container;
 
         var linkitem = container.querySelector('.linkitem');
         expect(linkitem).not.toBeInTheDocument();
       });
     });
     it('prop displayCheckbox should render Checkbox within subject', function () {
-      var _render27 = (0, _react2.render)(list({}, {}, {
+      var _render32 = (0, _react2.render)(list({}, {}, {
         displayCheckbox: true
       })),
-          container = _render27.container;
+          container = _render32.container;
 
-      var checkboxComponent = container.querySelector('.item-container .item.-icon-left .checkbox-component');
+      var checkboxComponent = container.querySelector('.item-container .item.-icon-left .checkbox-component input');
       expect(checkboxComponent).toBeTruthy();
       expect(checkboxComponent.name).toEqual('checkbox');
     });
@@ -362,10 +490,10 @@ describe('Components', function () {
         customClass: "leftElTeste"
       });
 
-      var _render28 = (0, _react2.render)(list({}, {}, {
+      var _render33 = (0, _react2.render)(list({}, {}, {
         leftElement: leftElement
       })),
-          container = _render28.container;
+          container = _render33.container;
 
       var leftElementHTML = container.querySelector('.item-container .item.-icon-left .leftElTeste');
       expect(leftElementHTML).toBeTruthy();
@@ -375,10 +503,10 @@ describe('Components', function () {
         customClass: "rightElTeste"
       });
 
-      var _render29 = (0, _react2.render)(list({}, {}, {
+      var _render34 = (0, _react2.render)(list({}, {}, {
         rightElement: rightElement
       })),
-          container = _render29.container;
+          container = _render34.container;
 
       var rightElementHTML = container.querySelector('.item-container .item.-icon-right .rightElTeste');
       expect(rightElementHTML).toBeTruthy();
@@ -391,10 +519,10 @@ describe('Components', function () {
         color: "#000"
       });
 
-      var _render30 = (0, _react2.render)(list({}, {}, {
+      var _render35 = (0, _react2.render)(list({}, {}, {
         leftIcon: leftIcon
       })),
-          container = _render30.container;
+          container = _render35.container;
 
       var leftIconHTML = container.querySelector('.item-container .item.-icon-left .icon-component.iconTeste');
       expect(leftIconHTML).toBeTruthy();
@@ -407,28 +535,28 @@ describe('Components', function () {
         color: "#000"
       });
 
-      var _render31 = (0, _react2.render)(list({}, {}, {
+      var _render36 = (0, _react2.render)(list({}, {}, {
         rightIcon: rightIcon
       })),
-          container = _render31.container;
+          container = _render36.container;
 
       var rightIconHTML = container.querySelector('.item-container .item.-icon-right .icon-component.iconTeste');
       expect(rightIconHTML).toBeTruthy();
     });
     it('prop leftIconName should render Icon', function () {
-      var _render32 = (0, _react2.render)(list({}, {}, {
+      var _render37 = (0, _react2.render)(list({}, {}, {
         leftIconName: 'code'
       })),
-          container = _render32.container;
+          container = _render37.container;
 
       var leftIcon = container.querySelector('.item-container .item.-icon-left .icon-component');
       expect(leftIcon).toBeTruthy();
     });
     it('prop rightIconName should render Icon', function () {
-      var _render33 = (0, _react2.render)(list({}, {}, {
+      var _render38 = (0, _react2.render)(list({}, {}, {
         rightIconName: 'code'
       })),
-          container = _render33.container;
+          container = _render38.container;
 
       var rightIcon = container.querySelector('.item-container .item.-icon-right .icon-component');
       expect(rightIcon).toBeTruthy();
@@ -445,8 +573,8 @@ describe('Components', function () {
         }
       }));
 
-      var _render34 = (0, _react2.render)(mockList),
-          container = _render34.container;
+      var _render39 = (0, _react2.render)(mockList),
+          container = _render39.container;
 
       var listItem = container.querySelector('.item-container');
 
@@ -457,68 +585,68 @@ describe('Components', function () {
     describe('prop customClass', function () {
       var customClass = 'customclassTeste';
       it('apply customClass css class to text/subtext/children container', function () {
-        var _render35 = (0, _react2.render)(list({}, {}, {
+        var _render40 = (0, _react2.render)(list({}, {}, {
           text: 'Teste',
           customClass: customClass
         })),
-            container = _render35.container;
+            container = _render40.container;
 
         var listItemTextContainer = container.querySelector('.item-container .item');
         expect(listItemTextContainer).toHaveClass(customClass);
       });
       it('apply customClass css class to leftIcon/leftElement container', function () {
-        var _render36 = (0, _react2.render)(list({}, {}, {
+        var _render41 = (0, _react2.render)(list({}, {}, {
           leftIconName: 'pencil',
           customClass: customClass
         })),
-            container = _render36.container;
+            container = _render41.container;
 
         var listItemLeftElContainer = container.querySelector('.item-container .item.-icon-left');
         expect(listItemLeftElContainer).toHaveClass(customClass);
       });
       it('apply customClass css class to rightIcon/rightElement container', function () {
-        var _render37 = (0, _react2.render)(list({}, {}, {
+        var _render42 = (0, _react2.render)(list({}, {}, {
           rightIconName: 'pencil',
           customClass: customClass
         })),
-            container = _render37.container;
+            container = _render42.container;
 
         var listItemRightElContainer = container.querySelector('.item-container .item.-icon-right');
         expect(listItemRightElContainer).toHaveClass(customClass);
       });
     });
     it('prop url should render Link', function () {
-      var _render38 = (0, _react2.render)(list({}, {}, {
+      var _render43 = (0, _react2.render)(list({}, {}, {
         url: 'saas'
       })),
-          container = _render38.container;
+          container = _render43.container;
 
       var linkComponent = container.querySelector('.item-container .linkitem');
       expect(linkComponent).toBeTruthy();
     });
     describe('prop visible', function () {
       it('when true(default) should allow subject to render', function () {
-        var _render39 = (0, _react2.render)(list({}, {}, {
+        var _render44 = (0, _react2.render)(list({}, {}, {
           visible: true
         })),
-            container = _render39.container;
+            container = _render44.container;
 
         var listItem = container.querySelector('.item-container');
         expect(listItem).toBeTruthy();
       });
       it('when false should not let subject render', function () {
-        var _render40 = (0, _react2.render)(list({}, {}, {
+        var _render45 = (0, _react2.render)(list({}, {}, {
           visible: false
         })),
-            container = _render40.container;
+            container = _render45.container;
 
         var listItem = container.querySelector('.item-container');
         expect(listItem).not.toBeInTheDocument();
       });
     });
     it('should render children', function () {
-      var _render41 = (0, _react2.render)(list()),
-          container = _render41.container;
+      var _render46 = (0, _react2.render)(list()),
+          container = _render46.container;
 
       var listItemButtonChild = container.querySelector('.item-container .childbuttontest');
       expect(listItemButtonChild).toBeTruthy();
@@ -529,10 +657,10 @@ describe('Components', function () {
         it('should render subject', function () {
           setSessionStorageMock();
 
-          var _render42 = (0, _react2.render)(list({}, {}, {
+          var _render47 = (0, _react2.render)(list({}, {}, {
             permissionAttr: (0, _storageMock.permissionAttrMockAuthorized)('disabled')
           })),
-              container = _render42.container;
+              container = _render47.container;
 
           var listItem = container.querySelector('.item-container');
           expect(listItem).toBeTruthy();
@@ -542,10 +670,10 @@ describe('Components', function () {
         it('onDenied.unvisible option should not render subject', function () {
           setSessionStorageMock();
 
-          var _render43 = (0, _react2.render)(list({}, {}, {
+          var _render48 = (0, _react2.render)(list({}, {}, {
             permissionAttr: (0, _storageMock.permissionAttrMockUnauthorized)('unvisible')
           })),
-              container = _render43.container;
+              container = _render48.container;
 
           var listItem = container.querySelector('.item-container');
           expect(listItem).not.toBeInTheDocument();
@@ -557,10 +685,10 @@ describe('Components', function () {
           it('disable onClick event', function () {
             var mockFunc = jest.fn();
 
-            var _render44 = (0, _react2.render)(list({}, {}, _extends({}, permissionProp, {
+            var _render49 = (0, _react2.render)(list({}, {}, _extends({}, permissionProp, {
               onClick: mockFunc
             }))),
-                container = _render44.container;
+                container = _render49.container;
 
             var listItem = container.querySelector('.item-container');
 
@@ -569,37 +697,37 @@ describe('Components', function () {
             expect(mockFunc).not.toBeCalled();
           });
           it('apply disabled css class to text/subtext/children container', function () {
-            var _render45 = (0, _react2.render)(list({}, {}, _extends({
+            var _render50 = (0, _react2.render)(list({}, {}, _extends({
               text: 'Teste'
             }, permissionProp))),
-                container = _render45.container;
+                container = _render50.container;
 
             var listItemTextContainer = container.querySelector('.item-container .item');
             expect(listItemTextContainer).toHaveClass('disabled');
           });
           it('apply disabled css class to leftIcon/leftElement container', function () {
-            var _render46 = (0, _react2.render)(list({}, {}, _extends({
+            var _render51 = (0, _react2.render)(list({}, {}, _extends({
               leftIconName: 'pencil'
             }, permissionProp))),
-                container = _render46.container;
+                container = _render51.container;
 
             var listItemLeftElContainer = container.querySelector('.item-container .item.-icon-left');
             expect(listItemLeftElContainer).toHaveClass('disabled');
           });
           it('apply disabled css class to rightIcon/rightElement container', function () {
-            var _render47 = (0, _react2.render)(list({}, {}, _extends({
+            var _render52 = (0, _react2.render)(list({}, {}, _extends({
               rightIconName: 'pencil'
             }, permissionProp))),
-                container = _render47.container;
+                container = _render52.container;
 
             var listItemRightElContainer = container.querySelector('.item-container .item.-icon-right');
             expect(listItemRightElContainer).toHaveClass('disabled');
           });
           it('hide url', function () {
-            var _render48 = (0, _react2.render)(list({}, {}, _extends({}, permissionProp, {
+            var _render53 = (0, _react2.render)(list({}, {}, _extends({}, permissionProp, {
               url: 'saas'
             }))),
-                container = _render48.container;
+                container = _render53.container;
 
             var linkitem = container.querySelector('.linkitem');
             expect(linkitem).not.toBeInTheDocument();

package/lib/menus/sidenav/NavMenuItem.js

@@ -19,6 +19,8 @@ var _helpers = require("./helpers");
 
 var _permissionValidations = require("../../permissionValidations");
 
+var _withTooltip = _interopRequireDefault(require("../../internals/withTooltip"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -49,7 +51,8 @@ var NavMenuItem = function NavMenuItem(props) {
       permissionAttr = props.permissionAttr,
       maxWidth = props.maxWidth,
       minWidth = props.minWidth,
-      columnsQtty = props.columnsQtty;
+      columnsQtty = props.columnsQtty,
+      targetRef = props.targetRef;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -93,6 +96,7 @@ var NavMenuItem = function NavMenuItem(props) {
   return /*#__PURE__*/_react["default"].createElement(_helpers.SubMenuContext.Provider, {
     value: contextValues()
   }, /*#__PURE__*/_react["default"].createElement("li", {
+    ref: targetRef,
     className: "item ".concat(url && !disabled && '-withlink', " ").concat(customClass, " ").concat(disabled && '-disabled'),
     onMouseEnter: function onMouseEnter(e) {
       _onMouseEnter(e);
@@ -136,7 +140,8 @@ NavMenuItem.propTypes = {
   permissionAttr: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].arrayOf(_propTypes["default"].object)]),
   minWidth: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
   maxWidth: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
-  columnsQtty: _propTypes["default"].number
+  columnsQtty: _propTypes["default"].number,
+  targetRef: _propTypes["default"].func
 };
 NavMenuItem.defaultProps = {
   childrenIsSubMenu: true,
@@ -148,7 +153,10 @@ NavMenuItem.defaultProps = {
   permissionAttr: undefined,
   minWidth: 500,
   maxWidth: '90%',
-  columnsQtty: 2
+  columnsQtty: 2,
+  targetRef: undefined
 };
-var _default = NavMenuItem;
+
+var _default = (0, _withTooltip["default"])(NavMenuItem);
+
 exports["default"] = _default;

package/lib/menus/sidenav/index.js

@@ -53,6 +53,8 @@ var _helpers = require("./helpers");
 
 var _icons = _interopRequireDefault(require("../../icons"));
 
+var constants = _interopRequireWildcard(require("../../internals/constants"));
+
 var _popup_menu_search = _interopRequireDefault(require("./popup_menu_search"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -194,6 +196,7 @@ var SideNav = function SideNav(props) {
 
     if ((type === _NavMenuItem["default"] || type === _NavSubMenuItem["default"]) && !child.props.children) {
       menuItemsContent.push({
+        id: "".concat(child.props.title, "-").concat(_uuid["default"].v1()),
         content: child.props.title,
         url: child.props.url
       });
@@ -217,6 +220,20 @@ var SideNav = function SideNav(props) {
     }
   };
 
+  var onKeyDown = function onKeyDown(e) {
+    if ([constants.keyCodes.F].includes(e.keyCode) && e.ctrlKey && e.shiftKey) {
+      e.preventDefault();
+      setSearchFieldHasNoFocus(false);
+      if (searchFieldRef.current) searchFieldRef.current.focus();
+    }
+  };
+
+  (0, _react.useEffect)(function () {
+    document.addEventListener('keydown', onKeyDown);
+    return function () {
+      document.removeEventListener('keydown', onKeyDown);
+    };
+  }, []);
   (0, _react.useEffect)(function () {
     if (enableMenuSearch && sideNavRef && sideNavRef.current) {
       setSideNavDimensions(sideNavRef.current.getBoundingClientRect());
@@ -239,14 +256,14 @@ var SideNav = function SideNav(props) {
       key: "popup-menusearch-".concat(_uuid["default"].v1())
     }, /*#__PURE__*/_react["default"].createElement(_NavMenuItem["default"], {
       childrenIsSubMenu: false,
-      customClass: "-customsidenavitem"
+      customClass: "-customsidenavitem",
+      tooltip: "Pesquisar funcionalidades (CTRL+SHIFT+F)",
+      tooltipPosition: "right"
     }, /*#__PURE__*/_react["default"].createElement(_text["default"], _extends({
       value: searchContent,
       customClassForWrapper: "-customsizes",
       customClass: "-customsizes",
       customClassForSideButtons: "-iconcenter",
-      tooltip: "Pesquisar funcionalidades",
-      tooltipPosition: "right",
       customClassForInputContent: searchFieldHasNoFocus ? '-hidden' : '',
       onFocus: function onFocus() {
         return setSearchFieldHasNoFocus(false);
@@ -263,6 +280,9 @@ var SideNav = function SideNav(props) {
     }, returnLeftElements())), openSearchMenuPopup && /*#__PURE__*/_react["default"].createElement(_popup_menu_search["default"], _extends({}, props, {
       style: getPopupMenuSearchStyle(),
       searchContent: searchContent,
+      handleSetSearchContent: function handleSetSearchContent(searchValue) {
+        return setSearchContent(searchValue);
+      },
       handlerClose: closeSearchMenuPopup,
       menuItemsContent: menuItemsContent && returnMenuItems()
     }))));

package/lib/menus/sidenav/popup_menu_search/index.js

@@ -9,8 +9,6 @@ exports["default"] = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _uuid = _interopRequireDefault(require("uuid"));
-
 var _reactDom = _interopRequireDefault(require("react-dom"));
 
 var _search = _interopRequireDefault(require("../../../inputs/search"));
@@ -46,7 +44,8 @@ var PopupMenuSearch = function PopupMenuSearch(props) {
       searchContent = props.searchContent,
       menuItemsContent = props.menuItemsContent,
       handlerClose = props.handlerClose,
-      menuSearchEmptyMessage = props.menuSearchEmptyMessage;
+      menuSearchEmptyMessage = props.menuSearchEmptyMessage,
+      handleSetSearchContent = props.handleSetSearchContent;
 
   var _useState = (0, _react.useState)(searchContent),
       _useState2 = _slicedToArray(_useState, 2),
@@ -88,6 +87,7 @@ var PopupMenuSearch = function PopupMenuSearch(props) {
       return item.content.toLowerCase().includes(filter);
     });
     setSearchFieldContent(value);
+    handleSetSearchContent(value);
     setSearchResult(result);
   };
 
@@ -101,15 +101,19 @@ var PopupMenuSearch = function PopupMenuSearch(props) {
       return /*#__PURE__*/_react["default"].createElement(_list["default"], {
         condensed: true,
         transparent: true,
+        selectable: true,
+        onSelectItem: handlerClose,
         style: {
-          margin: '25px 0px'
+          margin: '25px 0px',
+          border: 'none',
+          boxShadow: 'none'
         }
-      }, searchResult && searchResult.map(function (item) {
+      }, searchResult.map(function (item) {
         return /*#__PURE__*/_react["default"].createElement(_list.ListItem, {
-          key: "".concat(item.content, "-").concat(_uuid["default"].v1()),
+          key: item.id,
+          itemId: item.id,
           url: item.url,
-          text: item.content,
-          onClick: handlerClose
+          text: item.content
         });
       }));
     }
@@ -137,7 +141,7 @@ var PopupMenuSearch = function PopupMenuSearch(props) {
       inputRef: searchFieldRef,
       value: searchFieldContent,
       onReset: function onReset() {
-        setSearchFieldContent('');
+        search('');
       }
     }), /*#__PURE__*/_react["default"].createElement("div", {
       style: {

package/lib/menus/sidenav/sidenav.spec.js

@@ -206,38 +206,30 @@ describe('SideNav Menu', function () {
 
       expect(container.querySelector('.openclosemenu')).toBeInTheDocument();
     });
-    it('should enable menu search', function () {
-      var _render4 = (0, _react2.render)(sidebarNavMockRender({
-        enableMenuSearch: true
-      })),
-          container = _render4.container;
-
-      expect(container.querySelector('.inputwrapper')).toBeInTheDocument();
-    });
     it('should render all items', function () {
-      var _render5 = (0, _react2.render)(sidebarNavMockRender()),
-          container = _render5.container;
+      var _render4 = (0, _react2.render)(sidebarNavMockRender()),
+          container = _render4.container;
       /* primeiro item é o float menu */
 
 
       expect(container.querySelectorAll('li.item').length - 1).toBe(menuDataMock.length);
     });
     it('should be rendering 3 items SVGs', function () {
-      var _render6 = (0, _react2.render)(sidebarNavMockRender()),
-          container = _render6.container;
+      var _render5 = (0, _react2.render)(sidebarNavMockRender()),
+          container = _render5.container;
 
       expect(container.querySelectorAll('li.item .icon-component').length).toBe(3);
     });
     it('should open submenu on over', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-      var _render7, container;
+      var _render6, container;
 
       return regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
-              _render7 = (0, _react2.render)(sidebarNavMockRender({
+              _render6 = (0, _react2.render)(sidebarNavMockRender({
                 menuSize: 'large'
-              })), container = _render7.container;
+              })), container = _render6.container;
 
               _react2.fireEvent.mouseOver(container.querySelector('.customscroll .item'));
 
@@ -257,13 +249,13 @@ describe('SideNav Menu', function () {
       }, _callee);
     })));
     it('submenu should render all items', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
-      var _render8, container;
+      var _render7, container;
 
       return regeneratorRuntime.wrap(function _callee2$(_context2) {
         while (1) {
           switch (_context2.prev = _context2.next) {
             case 0:
-              _render8 = (0, _react2.render)(sidebarNavMockRender()), container = _render8.container;
+              _render7 = (0, _react2.render)(sidebarNavMockRender()), container = _render7.container;
 
               _react2.fireEvent.mouseOver(container.querySelector('.customscroll .item'));
 
@@ -283,13 +275,13 @@ describe('SideNav Menu', function () {
       }, _callee2);
     })));
     it('submenu should have title', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
-      var _render9, container;
+      var _render8, container;
 
       return regeneratorRuntime.wrap(function _callee3$(_context3) {
         while (1) {
           switch (_context3.prev = _context3.next) {
             case 0:
-              _render9 = (0, _react2.render)(sidebarNavMockRender()), container = _render9.container;
+              _render8 = (0, _react2.render)(sidebarNavMockRender()), container = _render8.container;
 
               _react2.fireEvent.mouseOver(container.querySelector('.customscroll .item'));
 
@@ -308,5 +300,72 @@ describe('SideNav Menu', function () {
         }
       }, _callee3);
     })));
+    describe('Popup Search Menu', function () {
+      it('should enable menu search', function () {
+        var _render9 = (0, _react2.render)(sidebarNavMockRender({
+          enableMenuSearch: true
+        })),
+            container = _render9.container;
+
+        expect(container.querySelector('.inputwrapper')).toBeInTheDocument();
+      });
+      it('should render tooltip on over menu search item', function () {
+        var _render10 = (0, _react2.render)(sidebarNavMockRender({
+          enableMenuSearch: true
+        })),
+            container = _render10.container;
+
+        var navitem = container.querySelector('.-customsidenavitem');
+
+        _react2.fireEvent.mouseOver(navitem);
+
+        expect(document.querySelector('.tooltip-component')).toBeInTheDocument();
+      });
+      it('should focus input when pressed HotKey', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
+        var _render11, container;
+
+        return regeneratorRuntime.wrap(function _callee4$(_context4) {
+          while (1) {
+            switch (_context4.prev = _context4.next) {
+              case 0:
+                _render11 = (0, _react2.render)(sidebarNavMockRender({
+                  enableMenuSearch: true
+                })), container = _render11.container;
+
+                _react2.fireEvent.keyDown(container, {
+                  key: 'F',
+                  code: 'keyF',
+                  keyCode: 70,
+                  ctrlKey: true,
+                  shiftKey: true
+                });
+
+                expect(container.querySelector('.inputwrapper .sidebuttons')).not.toBeInTheDocument();
+
+              case 3:
+              case "end":
+                return _context4.stop();
+            }
+          }
+        }, _callee4);
+      })));
+      it('should render menu search on input change', function () {
+        var _render12 = (0, _react2.render)(sidebarNavMockRender({
+          enableMenuSearch: true
+        })),
+            container = _render12.container;
+
+        var input = container.querySelector('.inputwrapper .inputcontent .textinput');
+
+        _react2.fireEvent.change(input, {
+          target: {
+            value: 'A'
+          }
+        });
+
+        expect(document.querySelector('.searchmenu')).toBeInTheDocument();
+        expect(document.querySelectorAll('.list-component .item').length).toBe(5);
+      });
+    });
   });
 });

package/lib/table/index.js

@@ -200,8 +200,8 @@ Table.defaultProps = {
   bodyScrollable: false,
   skeletonize: false,
   strict: false,
-  skeletonInRows: 10,
-  skeletonInHeader: false
+  skeletonInRows: undefined,
+  skeletonInHeader: true
 };
 var _default = Table;
 exports["default"] = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "linear-react-components-ui",
-  "version": "0.4.76-beta.25",
+  "version": "0.4.76-beta.26",
   "description": "Linear Sistemas ReactJs Components",
   "main": "lib/index.js",
   "scripts": {