linear-react-components-ui 0.4.76-beta.12 → 0.4.76-beta.13

package/lib/list/list.spec.js

@@ -92,6 +92,21 @@ 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');
+    });
     describe('prop selectable', function () {
       it('should allow ListItem to be selected', function () {
         var listItemProps = {
@@ -99,10 +114,10 @@ describe('Components', function () {
           onClick: jest.fn()
         };
 
-        var _render6 = (0, _react2.render)(list({
+        var _render7 = (0, _react2.render)(list({
           selectable: true
         }, {}, listItemProps)),
-            container = _render6.container;
+            container = _render7.container;
 
         var listItem = container.querySelector('.item-container');
 
@@ -110,22 +125,44 @@ describe('Components', function () {
 
         expect(listItem).toHaveClass('-activedlist');
       });
+      it('should call onSelectItem', function () {
+        var mockOnSelectItem = jest.fn();
+
+        var mockList = /*#__PURE__*/_react["default"].createElement(_index["default"], {
+          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;
+
+        var listItem = container.querySelector('.item-container');
+
+        _react2.fireEvent.click(listItem);
+
+        expect(mockOnSelectItem).toHaveBeenCalledWith('1');
+      });
     });
   });
   describe('ListHeader', function () {
     it('should render correctly', function () {
-      var _render7 = (0, _react2.render)(list()),
-          container = _render7.container;
+      var _render9 = (0, _react2.render)(list()),
+          container = _render9.container;
 
       expect(container.querySelector('.list-header')).toBeTruthy();
     });
     it('should apply title', function () {
       var title = 'Teste Header';
 
-      var _render8 = (0, _react2.render)(list({}, {
+      var _render10 = (0, _react2.render)(list({}, {
         title: title
       })),
-          container = _render8.container;
+          container = _render10.container;
 
       var listHeaderTitle = container.querySelector('.list-header > .title');
       expect(listHeaderTitle).toBeTruthy();
@@ -137,10 +174,10 @@ describe('Components', function () {
         paddingBottom: '2px'
       };
 
-      var _render9 = (0, _react2.render)(list({}, {
+      var _render11 = (0, _react2.render)(list({}, {
         style: style
       })),
-          container = _render9.container;
+          container = _render11.container;
 
       var listHeader = container.querySelector('.list-header');
       expect(listHeader).toHaveStyle(style);
@@ -148,17 +185,17 @@ describe('Components', function () {
     it('should apply customClass', function () {
       var customClass = 'teste-listheader';
 
-      var _render10 = (0, _react2.render)(list({}, {
+      var _render12 = (0, _react2.render)(list({}, {
         customClass: customClass
       })),
-          container = _render10.container;
+          container = _render12.container;
 
       var listHeader = container.querySelector('.list-header');
       expect(listHeader).toHaveClass(customClass);
     });
     it('should render children', function () {
-      var _render11 = (0, _react2.render)(list()),
-          container = _render11.container;
+      var _render13 = (0, _react2.render)(list()),
+          container = _render13.container;
 
       var listHeaderChild = container.querySelector('.list-header > .listheader-child');
       expect(listHeaderChild).toBeTruthy();
@@ -166,8 +203,8 @@ describe('Components', function () {
   });
   describe('ListItem', function () {
     it('should render correctly', function () {
-      var _render12 = (0, _react2.render)(list()),
-          container = _render12.container;
+      var _render14 = (0, _react2.render)(list()),
+          container = _render14.container;
 
       var listItem = container.querySelector('.item-container');
       expect(listItem).toBeTruthy();
@@ -175,10 +212,10 @@ describe('Components', function () {
     it('should apply text', function () {
       var text = 'Teste Item 1';
 
-      var _render13 = (0, _react2.render)(list({}, {}, {
+      var _render15 = (0, _react2.render)(list({}, {}, {
         text: text
       })),
-          container = _render13.container;
+          container = _render15.container;
 
       var listItemText = container.querySelector('.item-container .text');
       expect(listItemText).toBeTruthy();
@@ -187,10 +224,10 @@ describe('Components', function () {
     it('should apply subtext', function () {
       var subText = 'Teste Item 1';
 
-      var _render14 = (0, _react2.render)(list({}, {}, {
+      var _render16 = (0, _react2.render)(list({}, {}, {
         subText: subText
       })),
-          container = _render14.container;
+          container = _render16.container;
 
       var listItemSubText = container.querySelector('.item-container .subtext');
       expect(listItemSubText).toBeTruthy();
@@ -202,10 +239,10 @@ describe('Components', function () {
         paddingBottom: '2px'
       };
 
-      var _render15 = (0, _react2.render)(list({}, {}, {
+      var _render17 = (0, _react2.render)(list({}, {}, {
         style: style
       })),
-          container = _render15.container;
+          container = _render17.container;
 
       var listItem = container.querySelector('.item-container');
       expect(listItem).toHaveStyle(style);
@@ -213,41 +250,41 @@ describe('Components', function () {
     describe('prop separator', function () {
       var separator = true;
       it('apply list-separator css class to text/subtext/children container', function () {
-        var _render16 = (0, _react2.render)(list({}, {}, {
+        var _render18 = (0, _react2.render)(list({}, {}, {
           text: 'Teste',
           separator: separator
         })),
-            container = _render16.container;
+            container = _render18.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 _render17 = (0, _react2.render)(list({}, {}, {
+        var _render19 = (0, _react2.render)(list({}, {}, {
           leftIconName: 'pencil',
           separator: separator
         })),
-            container = _render17.container;
+            container = _render19.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 _render18 = (0, _react2.render)(list({}, {}, {
+        var _render20 = (0, _react2.render)(list({}, {}, {
           rightIconName: 'pencil',
           separator: separator
         })),
-            container = _render18.container;
+            container = _render20.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 _render19 = (0, _react2.render)(list({}, {}, {
+      var _render21 = (0, _react2.render)(list({}, {}, {
         hovered: true
       })),
-          container = _render19.container;
+          container = _render21.container;
 
       var listItem = container.querySelector('.item-container');
       expect(listItem).toHaveClass('hovered');
@@ -257,11 +294,11 @@ describe('Components', function () {
       it('should disable onClick event', function () {
         var mockFunc = jest.fn();
 
-        var _render20 = (0, _react2.render)(list({}, {}, {
+        var _render22 = (0, _react2.render)(list({}, {}, {
           disabled: disabled,
           onClick: mockFunc
         })),
-            container = _render20.container;
+            container = _render22.container;
 
         var listItem = container.querySelector('.item-container');
 
@@ -270,51 +307,51 @@ describe('Components', function () {
         expect(mockFunc).not.toBeCalled();
       });
       it('apply disabled css class to text/subtext/children container', function () {
-        var _render21 = (0, _react2.render)(list({}, {}, {
+        var _render23 = (0, _react2.render)(list({}, {}, {
           text: 'Teste',
           disabled: disabled
         })),
-            container = _render21.container;
+            container = _render23.container;
 
         var listItemTextContainer = container.querySelector('.item-container .item');
         expect(listItemTextContainer).toHaveClass('disabled');
       });
       it('apply disabled css class to leftIcon/leftElement container', function () {
-        var _render22 = (0, _react2.render)(list({}, {}, {
+        var _render24 = (0, _react2.render)(list({}, {}, {
           leftIconName: 'pencil',
           disabled: disabled
         })),
-            container = _render22.container;
+            container = _render24.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 _render23 = (0, _react2.render)(list({}, {}, {
+        var _render25 = (0, _react2.render)(list({}, {}, {
           rightIconName: 'pencil',
           disabled: disabled
         })),
-            container = _render23.container;
+            container = _render25.container;
 
         var listItemRightElContainer = container.querySelector('.item-container .item.-icon-right');
         expect(listItemRightElContainer).toHaveClass('disabled');
       });
       it('should hide url', function () {
-        var _render24 = (0, _react2.render)(list({}, {}, {
+        var _render26 = (0, _react2.render)(list({}, {}, {
           disabled: disabled,
           url: 'saas'
         })),
-            container = _render24.container;
+            container = _render26.container;
 
         var linkitem = container.querySelector('.linkitem');
         expect(linkitem).not.toBeInTheDocument();
       });
     });
     it('prop displayCheckbox should render Checkbox within subject', function () {
-      var _render25 = (0, _react2.render)(list({}, {}, {
+      var _render27 = (0, _react2.render)(list({}, {}, {
         displayCheckbox: true
       })),
-          container = _render25.container;
+          container = _render27.container;
 
       var checkboxComponent = container.querySelector('.item-container .item.-icon-left .checkbox-component');
       expect(checkboxComponent).toBeTruthy();
@@ -325,10 +362,10 @@ describe('Components', function () {
         customClass: "leftElTeste"
       });
 
-      var _render26 = (0, _react2.render)(list({}, {}, {
+      var _render28 = (0, _react2.render)(list({}, {}, {
         leftElement: leftElement
       })),
-          container = _render26.container;
+          container = _render28.container;
 
       var leftElementHTML = container.querySelector('.item-container .item.-icon-left .leftElTeste');
       expect(leftElementHTML).toBeTruthy();
@@ -338,10 +375,10 @@ describe('Components', function () {
         customClass: "rightElTeste"
       });
 
-      var _render27 = (0, _react2.render)(list({}, {}, {
+      var _render29 = (0, _react2.render)(list({}, {}, {
         rightElement: rightElement
       })),
-          container = _render27.container;
+          container = _render29.container;
 
       var rightElementHTML = container.querySelector('.item-container .item.-icon-right .rightElTeste');
       expect(rightElementHTML).toBeTruthy();
@@ -354,10 +391,10 @@ describe('Components', function () {
         color: "#000"
       });
 
-      var _render28 = (0, _react2.render)(list({}, {}, {
+      var _render30 = (0, _react2.render)(list({}, {}, {
         leftIcon: leftIcon
       })),
-          container = _render28.container;
+          container = _render30.container;
 
       var leftIconHTML = container.querySelector('.item-container .item.-icon-left .icon-component.iconTeste');
       expect(leftIconHTML).toBeTruthy();
@@ -370,111 +407,118 @@ describe('Components', function () {
         color: "#000"
       });
 
-      var _render29 = (0, _react2.render)(list({}, {}, {
+      var _render31 = (0, _react2.render)(list({}, {}, {
         rightIcon: rightIcon
       })),
-          container = _render29.container;
+          container = _render31.container;
 
       var rightIconHTML = container.querySelector('.item-container .item.-icon-right .icon-component.iconTeste');
       expect(rightIconHTML).toBeTruthy();
     });
     it('prop leftIconName should render Icon', function () {
-      var _render30 = (0, _react2.render)(list({}, {}, {
+      var _render32 = (0, _react2.render)(list({}, {}, {
         leftIconName: 'code'
       })),
-          container = _render30.container;
+          container = _render32.container;
 
       var leftIcon = container.querySelector('.item-container .item.-icon-left .icon-component');
       expect(leftIcon).toBeTruthy();
     });
     it('prop rightIconName should render Icon', function () {
-      var _render31 = (0, _react2.render)(list({}, {}, {
+      var _render33 = (0, _react2.render)(list({}, {}, {
         rightIconName: 'code'
       })),
-          container = _render31.container;
+          container = _render33.container;
 
       var rightIcon = container.querySelector('.item-container .item.-icon-right .icon-component');
       expect(rightIcon).toBeTruthy();
     });
     it('should apply onClick', function () {
       var mockFunc = jest.fn();
+      var listItemId = '1';
 
-      var _render32 = (0, _react2.render)(list({}, {}, {
-        onClick: mockFunc
-      })),
-          container = _render32.container;
+      var mockList = /*#__PURE__*/_react["default"].createElement(_index["default"], null, /*#__PURE__*/_react["default"].createElement(_index.ListItem, {
+        itemId: listItemId,
+        text: "Teste Foo",
+        onClick: function onClick(_, itemId) {
+          return mockFunc(itemId);
+        }
+      }));
+
+      var _render34 = (0, _react2.render)(mockList),
+          container = _render34.container;
 
       var listItem = container.querySelector('.item-container');
 
       _react2.fireEvent.click(listItem);
 
-      expect(mockFunc).toBeCalled();
+      expect(mockFunc).toBeCalledWith(listItemId);
     });
     describe('prop customClass', function () {
       var customClass = 'customclassTeste';
       it('apply customClass css class to text/subtext/children container', function () {
-        var _render33 = (0, _react2.render)(list({}, {}, {
+        var _render35 = (0, _react2.render)(list({}, {}, {
           text: 'Teste',
           customClass: customClass
         })),
-            container = _render33.container;
+            container = _render35.container;
 
         var listItemTextContainer = container.querySelector('.item-container .item');
         expect(listItemTextContainer).toHaveClass(customClass);
       });
       it('apply customClass css class to leftIcon/leftElement container', function () {
-        var _render34 = (0, _react2.render)(list({}, {}, {
+        var _render36 = (0, _react2.render)(list({}, {}, {
           leftIconName: 'pencil',
           customClass: customClass
         })),
-            container = _render34.container;
+            container = _render36.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 _render35 = (0, _react2.render)(list({}, {}, {
+        var _render37 = (0, _react2.render)(list({}, {}, {
           rightIconName: 'pencil',
           customClass: customClass
         })),
-            container = _render35.container;
+            container = _render37.container;
 
         var listItemRightElContainer = container.querySelector('.item-container .item.-icon-right');
         expect(listItemRightElContainer).toHaveClass(customClass);
       });
     });
     it('prop url should render Link', function () {
-      var _render36 = (0, _react2.render)(list({}, {}, {
+      var _render38 = (0, _react2.render)(list({}, {}, {
         url: 'saas'
       })),
-          container = _render36.container;
+          container = _render38.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 _render37 = (0, _react2.render)(list({}, {}, {
+        var _render39 = (0, _react2.render)(list({}, {}, {
           visible: true
         })),
-            container = _render37.container;
+            container = _render39.container;
 
         var listItem = container.querySelector('.item-container');
         expect(listItem).toBeTruthy();
       });
       it('when false should not let subject render', function () {
-        var _render38 = (0, _react2.render)(list({}, {}, {
+        var _render40 = (0, _react2.render)(list({}, {}, {
           visible: false
         })),
-            container = _render38.container;
+            container = _render40.container;
 
         var listItem = container.querySelector('.item-container');
         expect(listItem).not.toBeInTheDocument();
       });
     });
     it('should render children', function () {
-      var _render39 = (0, _react2.render)(list()),
-          container = _render39.container;
+      var _render41 = (0, _react2.render)(list()),
+          container = _render41.container;
 
       var listItemButtonChild = container.querySelector('.item-container .childbuttontest');
       expect(listItemButtonChild).toBeTruthy();
@@ -485,10 +529,10 @@ describe('Components', function () {
         it('should render subject', function () {
           setSessionStorageMock();
 
-          var _render40 = (0, _react2.render)(list({}, {}, {
+          var _render42 = (0, _react2.render)(list({}, {}, {
             permissionAttr: (0, _storageMock.permissionAttrMockAuthorized)('disabled')
           })),
-              container = _render40.container;
+              container = _render42.container;
 
           var listItem = container.querySelector('.item-container');
           expect(listItem).toBeTruthy();
@@ -498,10 +542,10 @@ describe('Components', function () {
         it('onDenied.unvisible option should not render subject', function () {
           setSessionStorageMock();
 
-          var _render41 = (0, _react2.render)(list({}, {}, {
+          var _render43 = (0, _react2.render)(list({}, {}, {
             permissionAttr: (0, _storageMock.permissionAttrMockUnauthorized)('unvisible')
           })),
-              container = _render41.container;
+              container = _render43.container;
 
           var listItem = container.querySelector('.item-container');
           expect(listItem).not.toBeInTheDocument();
@@ -513,10 +557,10 @@ describe('Components', function () {
           it('disable onClick event', function () {
             var mockFunc = jest.fn();
 
-            var _render42 = (0, _react2.render)(list({}, {}, _extends({}, permissionProp, {
+            var _render44 = (0, _react2.render)(list({}, {}, _extends({}, permissionProp, {
               onClick: mockFunc
             }))),
-                container = _render42.container;
+                container = _render44.container;
 
             var listItem = container.querySelector('.item-container');
 
@@ -525,37 +569,37 @@ describe('Components', function () {
             expect(mockFunc).not.toBeCalled();
           });
           it('apply disabled css class to text/subtext/children container', function () {
-            var _render43 = (0, _react2.render)(list({}, {}, _extends({
+            var _render45 = (0, _react2.render)(list({}, {}, _extends({
               text: 'Teste'
             }, permissionProp))),
-                container = _render43.container;
+                container = _render45.container;
 
             var listItemTextContainer = container.querySelector('.item-container .item');
             expect(listItemTextContainer).toHaveClass('disabled');
           });
           it('apply disabled css class to leftIcon/leftElement container', function () {
-            var _render44 = (0, _react2.render)(list({}, {}, _extends({
+            var _render46 = (0, _react2.render)(list({}, {}, _extends({
               leftIconName: 'pencil'
             }, permissionProp))),
-                container = _render44.container;
+                container = _render46.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 _render45 = (0, _react2.render)(list({}, {}, _extends({
+            var _render47 = (0, _react2.render)(list({}, {}, _extends({
               rightIconName: 'pencil'
             }, permissionProp))),
-                container = _render45.container;
+                container = _render47.container;
 
             var listItemRightElContainer = container.querySelector('.item-container .item.-icon-right');
             expect(listItemRightElContainer).toHaveClass('disabled');
           });
           it('hide url', function () {
-            var _render46 = (0, _react2.render)(list({}, {}, _extends({}, permissionProp, {
+            var _render48 = (0, _react2.render)(list({}, {}, _extends({}, permissionProp, {
               url: 'saas'
             }))),
-                container = _render46.container;
+                container = _render48.container;
 
             var linkitem = container.querySelector('.linkitem');
             expect(linkitem).not.toBeInTheDocument();

package/lib/menus/float/MenuItem.js

@@ -9,12 +9,16 @@ exports["default"] = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _lodash = _interopRequireDefault(require("lodash"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _icons = _interopRequireDefault(require("../../icons"));
 
 var _withDropdown = require("../../dropdown/withDropdown");
 
+var _buttons = _interopRequireDefault(require("../../buttons"));
+
 var _helpers = _interopRequireDefault(require("./helpers"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -28,22 +32,33 @@ var MenuItem = function MenuItem(_ref) {
       url = _ref.url,
       iconName = _ref.iconName,
       iconColor = _ref.iconColor,
-      iconSize = _ref.iconSize;
+      iconSize = _ref.iconSize,
+      dropdownMenu = _ref.dropdownMenu;
 
   var _useContext = (0, _react.useContext)(_helpers["default"]),
       customClassMenuItem = _useContext.customClassMenuItem;
 
   var dropdownContext = (0, _react.useContext)(_withDropdown.WithDropdownContext);
-  return /*#__PURE__*/_react["default"].createElement("a", {
-    target: "_blank",
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "floatmenuitem"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(customClassMenuItem, " -items")
+  }, !_lodash["default"].isEmpty(dropdownMenu) && /*#__PURE__*/_react["default"].createElement(_buttons["default"], {
+    customClass: "floatmenudropdown",
+    iconName: "more1",
+    transparent: true,
+    size: "medium",
+    boxShadow: false,
+    dropdown: true,
+    showIconDropdown: false
+  }, dropdownMenu), /*#__PURE__*/_react["default"].createElement("a", {
     className: "floatmenulink",
+    target: "_blank",
     onClick: function onClick() {
       if (dropdownContext) dropdownContext.handleDropdownClose();
     },
     href: url,
     rel: "noreferrer"
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "".concat(customClassMenuItem, " -items")
   }, /*#__PURE__*/_react["default"].createElement("span", {
     className: "iconcontainer"
   }, /*#__PURE__*/_react["default"].createElement(_icons["default"], {
@@ -53,7 +68,7 @@ var MenuItem = function MenuItem(_ref) {
     customClass: "iconmenu"
   })), /*#__PURE__*/_react["default"].createElement("span", {
     className: "nameitem"
-  }, title)));
+  }, title))));
 };
 
 MenuItem.propTypes = {
@@ -63,7 +78,8 @@ MenuItem.propTypes = {
   iconName: _propTypes["default"].string,
   iconColor: _propTypes["default"].string,
   iconSize: _propTypes["default"].number,
-  customClass: _propTypes["default"].string
+  customClass: _propTypes["default"].string,
+  dropdownMenu: _propTypes["default"].element
 };
 MenuItem.defaultProps = {
   iconColor: 'gray',
@@ -72,7 +88,8 @@ MenuItem.defaultProps = {
   iconName: '',
   customClass: '',
   url: undefined,
-  urlHref: undefined
+  urlHref: undefined,
+  dropdownMenu: undefined
 };
 var _default = MenuItem;
 exports["default"] = _default;

package/lib/menus/sidenav/NavMenuItem.js

@@ -134,8 +134,8 @@ NavMenuItem.propTypes = {
   url: _propTypes["default"].string,
   customClass: _propTypes["default"].string,
   permissionAttr: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].arrayOf(_propTypes["default"].object)]),
-  minWidth: _propTypes["default"].oneOf([_propTypes["default"].string, _propTypes["default"].number]),
-  maxWidth: _propTypes["default"].oneOf([_propTypes["default"].string, _propTypes["default"].number]),
+  minWidth: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  maxWidth: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
   columnsQtty: _propTypes["default"].number
 };
 NavMenuItem.defaultProps = {