linear-react-components-ui 0.4.76-beta.27 → 0.4.76-beta.28

package/lib/menus/sidenav/NavMenuItem.js

@@ -19,8 +19,6 @@ 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); }
@@ -51,8 +49,7 @@ var NavMenuItem = function NavMenuItem(props) {
       permissionAttr = props.permissionAttr,
       maxWidth = props.maxWidth,
       minWidth = props.minWidth,
-      columnsQtty = props.columnsQtty,
-      targetRef = props.targetRef;
+      columnsQtty = props.columnsQtty;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -96,7 +93,6 @@ 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);
@@ -140,8 +136,7 @@ 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,
-  targetRef: _propTypes["default"].func
+  columnsQtty: _propTypes["default"].number
 };
 NavMenuItem.defaultProps = {
   childrenIsSubMenu: true,
@@ -153,10 +148,7 @@ NavMenuItem.defaultProps = {
   permissionAttr: undefined,
   minWidth: 500,
   maxWidth: '90%',
-  columnsQtty: 2,
-  targetRef: undefined
+  columnsQtty: 2
 };
-
-var _default = (0, _withTooltip["default"])(NavMenuItem);
-
+var _default = NavMenuItem;
 exports["default"] = _default;

package/lib/menus/sidenav/index.js

@@ -43,6 +43,8 @@ var _NavSubMenuItem = _interopRequireDefault(require("./NavSubMenuItem"));
 
 var _NavMenuGroup = _interopRequireDefault(require("./NavMenuGroup"));
 
+var _text = _interopRequireDefault(require("../../inputs/text"));
+
 var _ExpandMenu = _interopRequireDefault(require("./ExpandMenu"));
 
 require("../../assets/styles/sidenav.scss");
@@ -51,8 +53,6 @@ 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 }; }
@@ -98,20 +98,30 @@ var SideNav = function SideNav(props) {
       isExpanded = _useState2[0],
       setIsExpanded = _useState2[1];
 
-  var _useState3 = (0, _react.useState)([]),
+  var _useState3 = (0, _react.useState)(true),
       _useState4 = _slicedToArray(_useState3, 2),
-      menuItemsContent = _useState4[0],
-      setMenuItemsContent = _useState4[1];
+      searchFieldHasNoFocus = _useState4[0],
+      setSearchFieldHasNoFocus = _useState4[1];
 
-  var _useState5 = (0, _react.useState)({}),
+  var _useState5 = (0, _react.useState)([]),
       _useState6 = _slicedToArray(_useState5, 2),
-      sideNavDimensions = _useState6[0],
-      setSideNavDimensions = _useState6[1];
+      menuItemsContent = _useState6[0],
+      setMenuItemsContent = _useState6[1];
 
-  var _useState7 = (0, _react.useState)(false),
+  var _useState7 = (0, _react.useState)(''),
       _useState8 = _slicedToArray(_useState7, 2),
-      openSearchMenuPopup = _useState8[0],
-      setOpenSearchMenuPopup = _useState8[1];
+      searchContent = _useState8[0],
+      setSearchContent = _useState8[1];
+
+  var _useState9 = (0, _react.useState)({}),
+      _useState10 = _slicedToArray(_useState9, 2),
+      sideNavDimensions = _useState10[0],
+      setSideNavDimensions = _useState10[1];
+
+  var _useState11 = (0, _react.useState)(false),
+      _useState12 = _slicedToArray(_useState11, 2),
+      openSearchMenuPopup = _useState12[0],
+      setOpenSearchMenuPopup = _useState12[1];
 
   var searchFieldRef = (0, _react.useRef)(null);
   var sideNavRef = (0, _react.useRef)(null);
@@ -121,6 +131,41 @@ var SideNav = function SideNav(props) {
     if (onExpandMenuClick) onExpandMenuClick(!isExpanded);
   };
 
+  var returnLeftElements = function returnLeftElements() {
+    var propsTextField = {};
+
+    if (searchFieldHasNoFocus) {
+      propsTextField = {
+        leftElements: [/*#__PURE__*/_react["default"].createElement("div", {
+          key: "searchMenuIcon",
+          role: "button",
+          tabIndex: "-1",
+          style: {
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            justifyContent: 'center'
+          },
+          onKeyDown: function onKeyDown() {},
+          onClick: function onClick() {
+            if (searchFieldRef && searchFieldRef.current) {
+              setSearchFieldHasNoFocus(false);
+              setTimeout(function () {
+                searchFieldRef.current.focus();
+              }, 150);
+            }
+          }
+        }, /*#__PURE__*/_react["default"].createElement(_icons["default"], {
+          name: "search",
+          customClass: "searchmenuicon",
+          size: menuSize === 'small' && 16 || menuSize === 'medium' && 22 || menuSize === 'large' && 32
+        }))]
+      };
+    }
+
+    return propsTextField;
+  };
+
   var getPopupMenuSearchStyle = function getPopupMenuSearchStyle() {
     var left = sideNavDimensions.left,
         top = sideNavDimensions.top,
@@ -139,6 +184,8 @@ var SideNav = function SideNav(props) {
 
   var closeSearchMenuPopup = function closeSearchMenuPopup() {
     setOpenSearchMenuPopup(false);
+    setSearchContent('');
+    setSearchFieldHasNoFocus(true);
   };
 
   var compareChild = function compareChild(child) {
@@ -147,7 +194,6 @@ 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
       });
@@ -171,24 +217,6 @@ var SideNav = function SideNav(props) {
     }
   };
 
-  var openSearchMenu = function openSearchMenu() {
-    setOpenSearchMenuPopup(true);
-    if (searchFieldRef.current) searchFieldRef.current.focus();
-  };
-
-  var onKeyDown = function onKeyDown(e) {
-    if ([constants.keyCodes.F].includes(e.keyCode) && e.ctrlKey && e.shiftKey) {
-      e.preventDefault();
-      openSearchMenu();
-    }
-  };
-
-  (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());
@@ -211,24 +239,30 @@ var SideNav = function SideNav(props) {
       key: "popup-menusearch-".concat(_uuid["default"].v1())
     }, /*#__PURE__*/_react["default"].createElement(_NavMenuItem["default"], {
       childrenIsSubMenu: false,
-      customClass: "-customsidenavitem",
-      tooltip: "Pesquisar funcionalidades (CTRL+SHIFT+F)",
-      tooltipPosition: "right"
-    }, /*#__PURE__*/_react["default"].createElement("div", {
-      key: "searchMenuIcon",
-      className: "searchmenubutton",
-      role: "button",
-      tabIndex: "-1",
-      onKeyDown: function onKeyDown() {},
-      onClick: function onClick() {
-        if (!openSearchMenuPopup) openSearchMenu();else closeSearchMenuPopup();
+      customClass: "-customsidenavitem"
+    }, /*#__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);
+      },
+      onBlur: function onBlur(e) {
+        if (e.target.value === '') setSearchFieldHasNoFocus(true);
+      },
+      inputRef: searchFieldRef,
+      onChange: function onChange(e) {
+        setSearchContent(e.target.value);
+        setOpenSearchMenuPopup(e.target.value !== '');
+        setSideNavDimensions(sideNavRef.current.getBoundingClientRect());
       }
-    }, /*#__PURE__*/_react["default"].createElement(_icons["default"], {
-      name: "search",
-      customClass: "searchmenuicon",
-      size: menuSize === 'small' && 16 || menuSize === 'medium' && 22 || menuSize === 'large' && 32
-    })), openSearchMenuPopup && /*#__PURE__*/_react["default"].createElement(_popup_menu_search["default"], _extends({}, props, {
+    }, returnLeftElements())), openSearchMenuPopup && /*#__PURE__*/_react["default"].createElement(_popup_menu_search["default"], _extends({}, props, {
       style: getPopupMenuSearchStyle(),
+      searchContent: searchContent,
       handlerClose: closeSearchMenuPopup,
       menuItemsContent: menuItemsContent && returnMenuItems()
     }))));
@@ -274,7 +308,7 @@ SideNav.defaultProps = {
   showExpandMenu: false,
   onExpandMenuClick: undefined,
   enableMenuSearch: false,
-  menuSearchEmptyMessage: ''
+  menuSearchEmptyMessage: undefined
 };
 var _default = SideNav;
 exports["default"] = _default;

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

@@ -9,6 +9,8 @@ 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"));
@@ -41,11 +43,12 @@ var body = document.getElementsByTagName('body')[0];
 
 var PopupMenuSearch = function PopupMenuSearch(props) {
   var style = props.style,
+      searchContent = props.searchContent,
       menuItemsContent = props.menuItemsContent,
       handlerClose = props.handlerClose,
       menuSearchEmptyMessage = props.menuSearchEmptyMessage;
 
-  var _useState = (0, _react.useState)(''),
+  var _useState = (0, _react.useState)(searchContent),
       _useState2 = _slicedToArray(_useState, 2),
       searchFieldContent = _useState2[0],
       setSearchFieldContent = _useState2[1];
@@ -55,11 +58,6 @@ var PopupMenuSearch = function PopupMenuSearch(props) {
       searchResult = _useState4[0],
       setSearchResult = _useState4[1];
 
-  var _useState5 = (0, _react.useState)(''),
-      _useState6 = _slicedToArray(_useState5, 2),
-      defaultSelectedItemId = _useState6[0],
-      setDefaultSelectedItemId = _useState6[1];
-
   var searchFieldRef = (0, _react.useRef)(null);
   var popupRef = (0, _react.useRef)(document.createElement('div'));
   popupRef.current.className = 'searchmenu';
@@ -83,39 +81,35 @@ var PopupMenuSearch = function PopupMenuSearch(props) {
   (0, _react.useEffect)(function () {
     popupRef.current.style = style;
   }, [style]);
-  (0, _react.useEffect)(function () {
-    if (searchResult.length > 0) setDefaultSelectedItemId(searchResult[0].id);
-  }, []);
 
   var search = function search(value) {
     var filter = value.toLowerCase();
     var result = menuItemsContent && menuItemsContent.filter(function (item) {
       return item.content.toLowerCase().includes(filter);
     });
-    if (result.length > 0) setDefaultSelectedItemId(result[0].id);
     setSearchFieldContent(value);
     setSearchResult(result);
   };
 
+  (0, _react.useEffect)(function () {
+    setSearchFieldContent(searchContent);
+    search(searchContent);
+  }, [searchContent]);
+
   var returnList = function returnList() {
     if (searchResult && searchResult.length > 0) {
       return /*#__PURE__*/_react["default"].createElement(_list["default"], {
         condensed: true,
         transparent: true,
-        selectable: true,
-        onSelectItem: handlerClose,
-        selectedItemId: defaultSelectedItemId,
         style: {
-          margin: '25px 0px',
-          border: 'none',
-          boxShadow: 'none'
+          margin: '25px 0px'
         }
-      }, searchResult.map(function (item) {
+      }, searchResult && searchResult.map(function (item) {
         return /*#__PURE__*/_react["default"].createElement(_list.ListItem, {
-          key: item.id,
-          itemId: item.id,
+          key: "".concat(item.content, "-").concat(_uuid["default"].v1()),
           url: item.url,
-          text: item.content
+          text: item.content,
+          onClick: handlerClose
         });
       }));
     }
@@ -143,7 +137,7 @@ var PopupMenuSearch = function PopupMenuSearch(props) {
       inputRef: searchFieldRef,
       value: searchFieldContent,
       onReset: function onReset() {
-        search('');
+        setSearchFieldContent('');
       }
     }), /*#__PURE__*/_react["default"].createElement("div", {
       style: {

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

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

package/lib/treeview/Node.js

@@ -27,6 +27,8 @@ var _list = _interopRequireWildcard(require("../list"));
 
 var _toolbar = _interopRequireWildcard(require("../toolbar"));
 
+var _SpinnerLoading = _interopRequireDefault(require("../spinner/SpinnerLoading"));
+
 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); }
@@ -133,7 +135,8 @@ var TreeNode = /*#__PURE__*/function (_Component) {
           children = _this$props3.children,
           isParent = _this$props3.isParent,
           onNodeClick = _this$props3.onNodeClick,
-          nodeMenuButtonSize = _this$props3.nodeMenuButtonSize;
+          nodeMenuButtonSize = _this$props3.nodeMenuButtonSize,
+          selectedNodeId = _this$props3.selectedNodeId;
       var node = this.state.node;
       var showNodeElements = this.state.showNodeElements;
       return /*#__PURE__*/_react["default"].createElement(_constants.TreeviewContext.Consumer, null, function (_ref) {
@@ -155,6 +158,10 @@ var TreeNode = /*#__PURE__*/function (_Component) {
           className: "treeviewitem"
         }, _this2.getSpan(), /*#__PURE__*/_react["default"].createElement("div", {
           className: "label",
+          style: {
+            textDecoration: !onNodeClick ? 'none' : null,
+            backgroundColor: selectedNodeId === node.id ? 'rgb(209, 209, 209)' : null
+          },
           ref: _this2.labelRef,
           role: "button",
           onKeyPress: null,
@@ -240,8 +247,11 @@ var _initialiseProps = function _initialiseProps() {
     enumerable: true,
     writable: true,
     value: function value() {
-      var alwaysShowArrow = _this3.props.alwaysShowArrow;
+      var _this3$props = _this3.props,
+          alwaysShowArrow = _this3$props.alwaysShowArrow,
+          idsInLoading = _this3$props.idsInLoading;
       var node = _this3.state.node;
+      var isLoading = idsInLoading.includes(node.id);
 
       var span = /*#__PURE__*/_react["default"].createElement("noscript", null);
 
@@ -250,11 +260,17 @@ var _initialiseProps = function _initialiseProps() {
           onKeyPress: null,
           tabIndex: 0,
           role: "button",
+          style: isLoading ? {
+            marginLeft: '-30px',
+            marginTop: '-5px'
+          } : null,
           className: "opencloseicon",
           onClick: function onClick() {
             return _this3.openCloseTree(node);
           }
-        }, /*#__PURE__*/_react["default"].createElement(_icons["default"], {
+        }, isLoading ? /*#__PURE__*/_react["default"].createElement(_SpinnerLoading["default"], {
+          size: "35px"
+        }) : /*#__PURE__*/_react["default"].createElement(_icons["default"], {
           name: _this3.state.isVisible ? 'up' : 'down',
           size: 10
         }));
@@ -431,7 +447,9 @@ TreeNode.propTypes = {
   onNodeClick: _propTypes["default"].func,
   handlerOnNodeOpen: _propTypes["default"].func,
   nodeElementsValidations: _propTypes["default"].object,
-  startNodesOpened: _propTypes["default"].bool.isRequired
+  startNodesOpened: _propTypes["default"].bool.isRequired,
+  idsInLoading: _propTypes["default"].arrayOf(_propTypes["default"].number),
+  selectedNodeId: _propTypes["default"].number
 };
 TreeNode.defaultProps = {
   childrenIds: [],
@@ -444,7 +462,9 @@ TreeNode.defaultProps = {
   nodeMenuButtonSize: 'small',
   onNodeClick: undefined,
   handlerOnNodeOpen: undefined,
-  nodeElementsValidations: undefined
+  nodeElementsValidations: undefined,
+  idsInLoading: [],
+  selectedNodeId: undefined
 };
 TreeNode.contextType = _constants.TreeviewContext;
 var _default = TreeNode;

package/lib/treeview/index.js

@@ -469,7 +469,9 @@ var TreeView = /*#__PURE__*/function (_Component) {
             nodeToolbarElements = _this$props3.nodeToolbarElements,
             nodeMenuButtonSize = _this$props3.nodeMenuButtonSize,
             alwaysShowArrow = _this$props3.alwaysShowArrow,
-            startNodesOpened = _this$props3.startNodesOpened;
+            startNodesOpened = _this$props3.startNodesOpened,
+            idsInLoading = _this$props3.idsInLoading,
+            selectedNodeId = _this$props3.selectedNodeId;
         var childrenIds = [];
 
         if (node.itens && node.itens.length > 0) {
@@ -487,6 +489,7 @@ var TreeView = /*#__PURE__*/function (_Component) {
         return /*#__PURE__*/_react["default"].createElement(_Node["default"], {
           key: "node-".concat(node.id),
           node: node,
+          idsInLoading: idsInLoading,
           startNodesOpened: startNodesOpened,
           alwaysShowArrow: alwaysShowArrow,
           childrenIds: childrenIds,
@@ -497,6 +500,7 @@ var TreeView = /*#__PURE__*/function (_Component) {
           nodeElementsValidations: nodeElementsValidations,
           nodeMenuButtonSize: nodeMenuButtonSize,
           onNodeClick: onNodeClick,
+          selectedNodeId: selectedNodeId,
           handlerOnNodeOpen: _this.handleOnNodeOpen
         }, childrenIds.length > 0 && node.itens.map(function (nodeitem) {
           return _this.buildTree(nodeitem, node.id, ids);
@@ -606,7 +610,9 @@ TreeView.propTypes = {
   onNodeClick: _propTypes["default"].func,
   onNodeOpen: _propTypes["default"].func,
   nodeElementsValidations: _propTypes["default"].object,
-  enableDynamicData: _propTypes["default"].bool
+  enableDynamicData: _propTypes["default"].bool,
+  idsInLoading: _propTypes["default"].arrayOf(_propTypes["default"].number),
+  selectedNodeId: _propTypes["default"].number
 };
 TreeView.defaultProps = {
   customClass: '',
@@ -628,7 +634,9 @@ TreeView.defaultProps = {
   onNodeClick: undefined,
   onNodeOpen: undefined,
   nodeElementsValidations: undefined,
-  enableDynamicData: false
+  enableDynamicData: false,
+  idsInLoading: [],
+  selectedNodeId: undefined
 };
 var _default = TreeView;
 exports["default"] = _default;

package/lib/treeview/treeview.spec.js

@@ -257,5 +257,23 @@ describe('Treeview', function () {
 
       expect(container.querySelector('ul')).toHaveStyle('background-color: #000');
     });
+    it('should apply idsInLoading', function () {
+      var _render13 = (0, _react.render)(treeviewRenderMock({
+        idsInLoading: [1]
+      })),
+          container = _render13.container;
+
+      var li = container.querySelector('li').firstChild;
+      expect(li.firstChild).toHaveClass('spinnerloading');
+    });
+    it('should apply selectedNodeId', function () {
+      var _render14 = (0, _react.render)(treeviewRenderMock({
+        selectedNodeId: 1
+      })),
+          container = _render14.container;
+
+      var filhosLi = container.querySelector('li').children;
+      expect(filhosLi[1]).toHaveStyle('background-color: rgb(209, 209, 209)');
+    });
   });
 });

package/package.json

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