linear-react-components-ui 0.4.75 → 0.4.76-beta.11

package/lib/inputs/textarea/textarea.spec.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+require("@testing-library/jest-dom/extend-expect");
+
+var _index = _interopRequireDefault(require("./index"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+describe('TextArea', function () {
+  var textArea = function textArea(textAreaProps) {
+    return /*#__PURE__*/_react["default"].createElement(_index["default"], textAreaProps);
+  };
+
+  it('should render correctly', function () {
+    var _render = (0, _react2.render)(textArea()),
+        container = _render.container;
+
+    var textAreaHTML = container.querySelector('textarea.textinput');
+    expect(container.firstChild).toHaveClass('textarea-container');
+    expect(textAreaHTML).toBeInTheDocument();
+    expect(textAreaHTML.type).toBe('textarea');
+  });
+  it('should apply customClass', function () {
+    var customClass = 'teste-textarea';
+
+    var _render2 = (0, _react2.render)(textArea({
+      customClass: customClass
+    })),
+        container = _render2.container;
+
+    expect(container.firstChild).toHaveClass(customClass);
+  });
+  it('should apply rows', function () {
+    var rows = '12';
+
+    var _render3 = (0, _react2.render)(textArea({
+      rows: rows
+    })),
+        container = _render3.container;
+
+    var textAreaHTML = container.querySelector('textarea.textinput');
+    expect(textAreaHTML.rows).toBe(parseInt(rows, 10));
+  });
+  it('should apply cols', function () {
+    var cols = '12';
+
+    var _render4 = (0, _react2.render)(textArea({
+      cols: cols
+    })),
+        container = _render4.container;
+
+    var textAreaHTML = container.querySelector('textarea.textinput');
+    expect(textAreaHTML.cols).toBe(parseInt(cols, 10));
+  });
+});

package/lib/internals/withTooltip.js

@@ -33,6 +33,8 @@ function _iterableToArrayLimit(arr, i) { var _i = arr && (typeof Symbol !== "und
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+var TOOLTIP_INITIAL_HEIGHT = 40;
+
 var hasTooltip = function hasTooltip(_ref) {
   var tooltip = _ref.tooltip;
   return tooltip;
@@ -45,38 +47,37 @@ var getDisplayName = function getDisplayName(WrappedComponent) {
 var withTooltip = function withTooltip(WrappedComponent) {
   var EnhancedComponent = function EnhancedComponent(props) {
     var tooltip = props.tooltip,
-        tooltipPosition = props.tooltipPosition,
         tooltipWidth = props.tooltipWidth,
         space = props.space;
 
-    var _useState = (0, _react.useState)(false),
+    var _useState = (0, _react.useState)(props.tooltipPosition),
         _useState2 = _slicedToArray(_useState, 2),
-        showTooltip = _useState2[0],
-        setShowTooltip = _useState2[1];
+        tooltipPosition = _useState2[0],
+        setTooltipPosition = _useState2[1];
 
-    var _useState3 = (0, _react.useState)({
-      width: tooltipWidth,
-      height: undefined
-    }),
+    var _useState3 = (0, _react.useState)(''),
         _useState4 = _slicedToArray(_useState3, 2),
-        tooltipDimensions = _useState4[0],
-        setTooltipDimensions = _useState4[1];
+        tooltipStyle = _useState4[0],
+        setTooltipStyle = _useState4[1];
 
-    var _useState5 = (0, _react.useState)(true),
+    var _useState5 = (0, _react.useState)(false),
         _useState6 = _slicedToArray(_useState5, 2),
-        findScrollableParent = _useState6[0],
-        setFindScrollableParent = _useState6[1];
+        showTooltip = _useState6[0],
+        setShowTooltip = _useState6[1];
 
-    var _useState7 = (0, _react.useState)(undefined),
+    var _useState7 = (0, _react.useState)({
+      width: tooltipWidth,
+      height: TOOLTIP_INITIAL_HEIGHT
+    }),
         _useState8 = _slicedToArray(_useState7, 2),
-        dimensionsTargetElement = _useState8[0],
-        setDimensionsTargetElement = _useState8[1];
+        tooltipDimensions = _useState8[0],
+        setTooltipDimensions = _useState8[1];
 
-    var scrollableParent = (0, _react.useRef)();
-    var targetElement = (0, _react.useRef)();
+    var targetElement = (0, _react.useRef)(null);
+    var tooltipElement = (0, _react.useRef)(null);
 
     var onMouseOver = function onMouseOver(e) {
-      if (targetElement.current === e.target) {
+      if (targetElement && targetElement.current && targetElement.current.contains(e.target)) {
         setShowTooltip(true);
       } else setShowTooltip(false);
     };
@@ -85,58 +86,24 @@ var withTooltip = function withTooltip(WrappedComponent) {
       setShowTooltip(false);
     };
 
-    var onParentScroll = function onParentScroll() {
-      var currentDimensions = targetElement.current.getBoundingClientRect();
-
-      if (targetElement.current && dimensionsTargetElement !== currentDimensions) {
-        return setDimensionsTargetElement(currentDimensions);
-      }
-
-      return null;
-    };
-
-    var getScrollableParent = function getScrollableParent(node) {
-      if (node === null || node.nodeName === '#document') {
-        return setFindScrollableParent(false);
-      }
-
-      var _window$getComputedSt = window.getComputedStyle(node),
-          overflowY = _window$getComputedSt.overflowY;
-
-      var isScrollable = overflowY !== 'visible' && overflowY !== 'hidden';
-
-      if (isScrollable && node.scrollHeight > node.clientHeight) {
-        scrollableParent.current = node;
-        return setFindScrollableParent(false);
-      }
-
-      return getScrollableParent(node.parentNode);
+    var onAnyScroll = function onAnyScroll() {
+      setShowTooltip(false);
     };
 
     (0, _react.useEffect)(function () {
       if (hasTooltip(props)) {
         document.addEventListener('mouseover', onMouseOver);
+        document.addEventListener('scroll', onAnyScroll, true);
 
         if (targetElement && targetElement.current) {
           targetElement.current.addEventListener('mouseout', onMouseOut);
         }
-
-        if (targetElement && targetElement.current && findScrollableParent) {
-          getScrollableParent(targetElement.current);
-        }
-
-        if (scrollableParent && scrollableParent.current) {
-          scrollableParent.current.addEventListener('scroll', onParentScroll);
-        }
       }
 
       return function () {
         if (hasTooltip(props)) {
           document.removeEventListener('mouseover', onMouseOver);
-
-          if (scrollableParent && scrollableParent.current) {
-            scrollableParent.current.removeEventListener('scroll', onParentScroll);
-          }
+          document.removeEventListener('scroll', onAnyScroll, true);
 
           if (targetElement && targetElement.current) {
             targetElement.current.removeEventListener('mouseout', onMouseOut);
@@ -144,39 +111,76 @@ var withTooltip = function withTooltip(WrappedComponent) {
         }
       };
     }, []);
+    (0, _react.useEffect)(function () {
+      if (targetElement.current) {
+        var width = tooltipDimensions.width,
+            height = tooltipDimensions.height;
+        var targetDimensions = targetElement.current.getBoundingClientRect();
+        var targetVerticalCenter = (targetDimensions.top + targetDimensions.bottom) / 2;
+        var tooltipClientWidth = tooltipElement.current && tooltipElement.current.clientWidth;
+        var style = "width: ".concat(typeof width === 'string' ? width : "".concat(width, "px"));
+        var left = targetDimensions.left + targetDimensions.width / 2 - tooltipClientWidth / 2;
+        left = Math.min(left, document.body.clientWidth - tooltipClientWidth - space);
+        style += "; left: ".concat(Math.max(space, left), "px");
+
+        switch (tooltipPosition) {
+          case 'top':
+            if (targetDimensions.top < height) {
+              setTooltipPosition('bottom');
+            } else {
+              style += "; top: ".concat(targetDimensions.top + window.scrollY - height - 5, "px");
+            }
+
+            break;
+
+          case 'bottom':
+            if (window.innerHeight - targetDimensions.bottom < height) {
+              setTooltipPosition('top');
+            } else {
+              style += "; top: ".concat(targetDimensions.top + window.scrollY + targetDimensions.height + 5, "px");
+            }
+
+            break;
+
+          case 'left':
+            if (targetDimensions.left < tooltipClientWidth) {
+              setTooltipPosition('right');
+            } else {
+              style += "; top: ".concat(targetVerticalCenter + window.scrollY - height / 2, "px");
+              style += "; left: ".concat(targetDimensions.left - tooltipClientWidth - 6, "px");
+            }
+
+            break;
+
+          case 'right':
+            if (window.innerWidth - targetDimensions.right < tooltipClientWidth) {
+              setTooltipPosition('left');
+            } else {
+              style += "; top: ".concat(targetVerticalCenter + window.scrollY - height / 2, "px");
+              style += "; left: ".concat(targetDimensions.left + targetDimensions.width + 5, "px");
+            }
+
+            break;
+
+          default:
+            style += '';
+        }
 
-    var getStyle = function getStyle() {
-      // where on the screen is the target
-      var width = tooltipDimensions.width,
-          height = tooltipDimensions.height;
-      var targetDimensions = dimensionsTargetElement || targetElement.current.getBoundingClientRect();
-      var targetVerticalCenter = (targetDimensions.top + targetDimensions.bottom) / 2;
-      var style = "width: ".concat(width + 2, "px");
-      var left = targetDimensions.left + targetDimensions.width / 2 - width / 2;
-      left = Math.min(left, document.body.clientWidth - width - space);
-      style += "; left: ".concat(Math.max(space, left), "px"); // when the position is informed
-
-      if (tooltipPosition === 'top') {
-        style += "; top: ".concat(targetDimensions.top + window.scrollY - height - 5, "px");
-      } else if (tooltipPosition === 'bottom') {
-        style += "; top: ".concat(targetDimensions.top + window.scrollY + targetDimensions.height + 5, "px");
-      } else if (tooltipPosition === 'left') {
-        style += "; top: ".concat(targetVerticalCenter + window.scrollY - height / 2, "px");
-        style += "; left: ".concat(targetDimensions.left - width - 6, "px");
-      } else if (tooltipPosition === 'right') {
-        style += "; top: ".concat(targetVerticalCenter + window.scrollY - height / 2, "px");
-        style += "; left: ".concat(targetDimensions.left + targetDimensions.width + 5, "px");
+        setTooltipStyle(style);
       }
-
-      return style;
-    };
+    }, [tooltipDimensions, tooltipElement.current, targetElement.current, tooltipPosition]);
+    (0, _react.useEffect)(function () {
+      setTooltipPosition(props.tooltipPosition);
+    }, [window.scrollY, window.scrollX, window.innerWidth]);
 
     var getTooltip = function getTooltip() {
       if (tooltip) {
         return /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
           text: tooltip,
-          style: getStyle(),
+          tooltipRef: tooltipElement,
+          style: tooltipStyle,
           className: tooltipPosition,
+          tooltipDimensions: tooltipDimensions,
           handlerSetDimensions: setTooltipDimensions
         });
       }

package/lib/labelMessages/index.js

@@ -48,7 +48,8 @@ var LabelMessages = function LabelMessages(props) {
       showCloseButton = props.showCloseButton,
       type = props.type,
       flat = props.flat,
-      square = props.square;
+      square = props.square,
+      visible = props.visible;
 
   var getClass = function getClass() {
     return "labelmessages-component -".concat(type, " ").concat(customClass, "\n    ").concat(square && '-square', " ").concat(flat && '-flat');
@@ -69,7 +70,7 @@ var LabelMessages = function LabelMessages(props) {
     return null;
   };
 
-  if (closed) return /*#__PURE__*/_react["default"].createElement("noscript", null);
+  if (closed || !visible) return null;
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
     className: "".concat(getClass(), " ").concat(customClass),
     style: style

package/lib/labelMessages/labelMessages.spec.js

@@ -0,0 +1,176 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+require("@testing-library/jest-dom/extend-expect");
+
+require("babel-polyfill");
+
+var _index = _interopRequireDefault(require("./index"));
+
+var _icons = _interopRequireDefault(require("../icons"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+describe('LabelMessages', function () {
+  describe('Default', function () {
+    var Default = /*#__PURE__*/_react["default"].createElement(_index["default"], {
+      icon: /*#__PURE__*/_react["default"].createElement(_icons["default"], {
+        name: "user"
+      })
+    }, "Teste");
+
+    it('should render correctly', function () {
+      var _render = (0, _react2.render)(Default),
+          container = _render.container;
+
+      expect(container.firstChild).toHaveTextContent('Teste');
+    });
+    it('should render icon', function () {
+      var _render2 = (0, _react2.render)(Default),
+          getByTestId = _render2.getByTestId;
+
+      expect(getByTestId('icon')).toBeTruthy();
+    });
+    it('should render icon when use iconName', function () {
+      var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
+        iconName: "user"
+      }, "Teste")),
+          getByTestId = _render3.getByTestId;
+
+      expect(getByTestId('icon')).toBeTruthy();
+    });
+    it('should render close button', function () {
+      var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
+        showCloseButton: true
+      }, "Teste")),
+          getByRole = _render4.getByRole;
+
+      expect(getByRole('presentation')).toBeTruthy();
+    });
+    it('should execute function when clicking the close button', function () {
+      var mockHandlerClosed = jest.fn();
+
+      var mockLabelMessage = /*#__PURE__*/_react["default"].createElement(_index["default"], {
+        showCloseButton: true,
+        handlerClosed: mockHandlerClosed
+      }, "Teste");
+
+      (0, _react2.render)(mockLabelMessage);
+
+      _react2.fireEvent.click(_react2.screen.getByRole('presentation'));
+
+      expect(mockHandlerClosed).toHaveBeenCalled();
+    });
+    it('should close labelMessage', function () {
+      var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
+        showCloseButton: true
+      }, "Teste")),
+          container = _render5.container;
+
+      _react2.fireEvent.click(_react2.screen.getByRole('presentation'));
+
+      expect(container.firstChild).not.toBeInTheDocument();
+    });
+    it('should apply customClass', function () {
+      var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
+        customClass: "customClass"
+      }, "Teste")),
+          container = _render6.container;
+
+      expect(container.firstChild).toHaveClass('customClass');
+    });
+    it('should apply inline style', function () {
+      var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
+        style: {
+          borderWidth: 10
+        }
+      }, "Teste")),
+          container = _render7.container;
+
+      expect(container.firstChild).toHaveStyle('border-width: 10px');
+    });
+    it('should hide labelMessage when visible is false', function () {
+      var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
+        visible: false
+      }, "Teste")),
+          container = _render8.container;
+
+      expect(container.firstChild).not.toBeTruthy();
+    });
+  });
+  describe('Danger', function () {
+    var dangerLabelMessages = /*#__PURE__*/_react["default"].createElement(_index["default"], {
+      type: "danger"
+    }, "Teste");
+
+    it('should apply type danger', function () {
+      var _render9 = (0, _react2.render)(dangerLabelMessages),
+          container = _render9.container;
+
+      expect(container.firstChild).toHaveClass('-danger');
+    });
+  });
+  describe('Info', function () {
+    var infoLabelMessages = /*#__PURE__*/_react["default"].createElement(_index["default"], {
+      type: "info"
+    }, "Teste");
+
+    it('should apply type info', function () {
+      var _render10 = (0, _react2.render)(infoLabelMessages),
+          container = _render10.container;
+
+      expect(container.firstChild).toHaveClass('-info');
+    });
+  });
+  describe('Warning', function () {
+    var warningLabelMessages = /*#__PURE__*/_react["default"].createElement(_index["default"], {
+      type: "warning"
+    }, "Teste");
+
+    it('should apply type warning', function () {
+      var _render11 = (0, _react2.render)(warningLabelMessages),
+          container = _render11.container;
+
+      expect(container.firstChild).toHaveClass('-warning');
+    });
+  });
+  describe('Success', function () {
+    var successLabelMessages = /*#__PURE__*/_react["default"].createElement(_index["default"], {
+      type: "success"
+    }, "Teste");
+
+    it('should apply type success', function () {
+      var _render12 = (0, _react2.render)(successLabelMessages),
+          container = _render12.container;
+
+      expect(container.firstChild).toHaveClass('-success');
+    });
+  });
+  describe('Flat', function () {
+    var flatLabelMessages = /*#__PURE__*/_react["default"].createElement(_index["default"], {
+      flat: true
+    }, "Teste");
+
+    it('should apply rounded border', function () {
+      var _render13 = (0, _react2.render)(flatLabelMessages),
+          container = _render13.container;
+
+      expect(container.firstChild).toHaveClass('-flat');
+    });
+  });
+  describe('Square', function () {
+    var squareLabelMessages = /*#__PURE__*/_react["default"].createElement(_index["default"], {
+      square: true
+    }, "Teste");
+
+    it('should apply rounded borderless', function () {
+      var _render14 = (0, _react2.render)(squareLabelMessages),
+          container = _render14.container;
+
+      expect(container.firstChild).toHaveClass('-square');
+    });
+  });
+});

package/lib/labels/label.spec.js

@@ -0,0 +1,162 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+require("@testing-library/jest-dom/extend-expect");
+
+var _index = _interopRequireWildcard(require("./index"));
+
+var _icons = _interopRequireDefault(require("../icons"));
+
+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); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+describe('Labels', function () {
+  describe('Default', function () {
+    var Default = /*#__PURE__*/_react["default"].createElement(_index["default"], {
+      icon: /*#__PURE__*/_react["default"].createElement(_icons["default"], {
+        name: "user"
+      })
+    }, "TESTE");
+
+    it('should have text content iguals children', function () {
+      var _render = (0, _react2.render)(Default),
+          container = _render.container;
+
+      expect(container.firstChild).toHaveTextContent('TESTE');
+    });
+    it('should be rendering icon from icon prop', function () {
+      var _render2 = (0, _react2.render)(Default),
+          getByTestId = _render2.getByTestId;
+
+      expect(getByTestId('icon')).toBeTruthy();
+    });
+    it('should be rendering icon from iconName prop', function () {
+      var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
+        iconName: "user"
+      }, "TESTE")),
+          getByTestId = _render3.getByTestId;
+
+      expect(getByTestId('icon')).toBeTruthy();
+    });
+    it('should have class mini', function () {
+      var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
+        iconName: "user",
+        size: "mini"
+      }, "TESTE")),
+          container = _render4.container;
+
+      expect(container.firstChild).toHaveClass('-mini');
+    });
+    it('should have class small', function () {
+      var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
+        iconName: "user",
+        size: "small"
+      }, "TESTE")),
+          container = _render5.container;
+
+      expect(container.firstChild).toHaveClass('-small');
+    });
+    it('should have class large', function () {
+      var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
+        iconName: "user",
+        size: "large"
+      }, "TESTE")),
+          container = _render6.container;
+
+      expect(container.firstChild).toHaveClass('-large');
+    });
+    it('should apply customClass', function () {
+      var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
+        customClass: "customClass"
+      }, "TESTE")),
+          container = _render7.container;
+
+      expect(container.firstChild).toHaveClass('customClass');
+    });
+    it('should apply border', function () {
+      var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
+        bordered: true
+      }, "TESTE")),
+          container = _render8.container;
+
+      expect(container.firstChild).toHaveClass('-bordered');
+    });
+    it('should apply style prop', function () {
+      var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
+        style: {
+          borderWidth: 10
+        }
+      }, "TESTE")),
+          container = _render9.container;
+
+      expect(container.firstChild).toHaveStyle('border-width: 10px');
+    });
+    it('should apply invisible prop', function () {
+      var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
+        visible: false
+      }, "TESTE")),
+          container = _render10.container;
+
+      expect(container.firstChild).not.toBeTruthy();
+    });
+    it('should apply right icon align', function () {
+      var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
+        iconName: "user",
+        iconAlign: "right"
+      }, "TESTE")),
+          container = _render11.container;
+
+      expect(container.firstChild).toHaveClass('icon-right');
+    });
+  });
+  describe('Danger', function () {
+    var dangerLabel = /*#__PURE__*/_react["default"].createElement(_index.DangerLabel, null, "TESTE");
+
+    it('should have class -danger', function () {
+      var _render12 = (0, _react2.render)(dangerLabel),
+          container = _render12.container;
+
+      expect(container.firstChild).toHaveClass('-danger');
+    });
+  });
+  describe('Info', function () {
+    it('should have class -info', function () {
+      var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_index.InfoLabel, null, "TESTE")),
+          container = _render13.container;
+
+      expect(container.firstChild).toHaveClass('-info');
+    });
+  });
+  describe('Primary', function () {
+    it('should have class -primary', function () {
+      var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_index.PrimaryLabel, null, "TESTE")),
+          container = _render14.container;
+
+      expect(container.firstChild).toHaveClass('-primary');
+    });
+  });
+  describe('Success', function () {
+    it('should have class -success', function () {
+      var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_index.SuccessLabel, null, "TESTE")),
+          container = _render15.container;
+
+      expect(container.firstChild).toHaveClass('-success');
+    });
+  });
+  describe('Warning', function () {
+    it('should have class -warning', function () {
+      var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_index.WarningLabel, null, "TESTE")),
+          container = _render16.container;
+
+      expect(container.firstChild).toHaveClass('-warning');
+    });
+  });
+});

package/lib/list/Item.js

@@ -99,12 +99,12 @@ var Item = function Item(props) {
 
   var getProps = function getProps() {
     if (shouldDisable()) return undefined;
-    if (_onClick === undefined && dropdownContext === undefined) return null;
+    if (_onClick === undefined && dropdownContext === undefined && !selectable) return null;
     return {
       onClick: function onClick(e) {
-        if (_onClick !== undefined) _onClick(e);
+        if (_onClick !== undefined) _onClick(e, itemId);
         if (dropdownContext) dropdownContext.handleDropdownClose();
-        if (selectable && handleSelectItem(itemId)) ;
+        if (selectable) handleSelectItem(itemId, _onClick);
       },
       onKeyDown: null,
       role: 'button',