linear-react-components-ui 0.4.76-rc.5 → 0.4.76-rc.9

package/lib/icons/helper.js

@@ -538,22 +538,6 @@ function getIcons() {
     minusCircle: {
       viewbox: '0 0 16 16',
       paths: ['M8 0c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8zM8 14c-3.314 0-6-2.686-6-6s2.686-6 6-6c3.314 0 6 2.686 6 6s-2.686 6-6 6zM4 7h8v2h-8z']
-    },
-    zoomIn: {
-      viewbox: '0 0 16 16',
-      paths: ['M6 3h-1v2h-2v1h2v2h1v-2h2v-1h-2zM9.962 8.716c0.653-0.905 1.038-2.015 1.038-3.216 0-3.038-2.462-5.5-5.5-5.5s-5.5 2.462-5.5 5.5 2.462 5.5 5.5 5.5c1.201 0 2.312-0.385 3.216-1.038l5.284 6.038 2-2-6.038-5.284zM5.5 9.5c-2.209 0-4-1.791-4-4s1.791-4 4-4 4 1.791 4 4-1.791 4-4 4z']
-    },
-    zoomOut: {
-      viewbox: '0 0 16 16',
-      paths: ['M3 5h5v1h-5zM9.962 8.716c0.653-0.905 1.038-2.015 1.038-3.216 0-3.038-2.462-5.5-5.5-5.5s-5.5 2.462-5.5 5.5 2.462 5.5 5.5 5.5c1.201 0 2.312-0.385 3.216-1.038l5.284 6.038 2-2-6.038-5.284zM5.5 9.5c-2.209 0-4-1.791-4-4s1.791-4 4-4 4 1.791 4 4-1.791 4-4 4z']
-    },
-    flipVertical3: {
-      viewbox: '0 0 16 16',
-      paths: ['M10.854 1.854c0.143-0.143 0.186-0.358 0.108-0.545s-0.26-0.309-0.462-0.309h-10c-0.202 0-0.385 0.122-0.462 0.309-0.026 0.062-0.038 0.127-0.038 0.191 0 0.13 0.051 0.258 0.146 0.354l5 5c0.195 0.195 0.512 0.195 0.707 0l5-5z', 'M9 8.5c0-0.276 0.224-0.5 0.5-0.5h1c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5h-1c-0.276 0-0.5-0.224-0.5-0.5z', 'M6 8.5c0-0.276 0.224-0.5 0.5-0.5h1c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5h-1c-0.276 0-0.5-0.224-0.5-0.5z', 'M3 8.5c0-0.276 0.224-0.5 0.5-0.5h1c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5h-1c-0.276 0-0.5-0.224-0.5-0.5z', 'M0 8.5c0-0.276 0.224-0.5 0.5-0.5h1c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5h-1c-0.276 0-0.5-0.224-0.5-0.5z', 'M10.962 15.691c0.026-0.062 0.038-0.127 0.038-0.191 0-0.13-0.051-0.258-0.146-0.354l-5-5c-0.195-0.195-0.512-0.195-0.707 0l-5 5c-0.143 0.143-0.186 0.358-0.108 0.545s0.26 0.309 0.462 0.309h10c0.202 0 0.385-0.122 0.462-0.309zM2.009 14.875l3.491-3.491 3.491 3.491h-6.982z', 'M13 12.5c1.257-0.943 2-2.419 2-4 0-1.672-0.831-3.226-2.222-4.158-0.229-0.154-0.54-0.092-0.694 0.137s-0.092 0.54 0.137 0.694c1.113 0.745 1.778 1.989 1.778 3.327 0 1.313-0.64 2.534-1.716 3.284l-1.284-1.284v3.5h3.5l-1.5-1.5z']
-    },
-    flipVertical4: {
-      viewbox: '0 0 16 16',
-      paths: ['M0.854 5.146c-0.143-0.143-0.358-0.186-0.545-0.108s-0.309 0.26-0.309 0.462v10c0 0.202 0.122 0.385 0.309 0.462 0.062 0.026 0.127 0.038 0.191 0.038 0.13 0 0.258-0.051 0.354-0.146l5-5c0.195-0.195 0.195-0.512 0-0.707l-5-5z', 'M7.5 7c-0.276 0-0.5-0.224-0.5-0.5v-1c0-0.276 0.224-0.5 0.5-0.5s0.5 0.224 0.5 0.5v1c0 0.276-0.224 0.5-0.5 0.5z', 'M7.5 10c-0.276 0-0.5-0.224-0.5-0.5v-1c0-0.276 0.224-0.5 0.5-0.5s0.5 0.224 0.5 0.5v1c0 0.276-0.224 0.5-0.5 0.5z', 'M7.5 13c-0.276 0-0.5-0.224-0.5-0.5v-1c0-0.276 0.224-0.5 0.5-0.5s0.5 0.224 0.5 0.5v1c0 0.276-0.224 0.5-0.5 0.5z', 'M7.5 16c-0.276 0-0.5-0.224-0.5-0.5v-1c0-0.276 0.224-0.5 0.5-0.5s0.5 0.224 0.5 0.5v1c0 0.276-0.224 0.5-0.5 0.5z', 'M14.691 5.038c-0.062-0.026-0.127-0.038-0.191-0.038-0.13 0-0.258 0.051-0.354 0.146l-5 5c-0.195 0.195-0.195 0.512 0 0.707l5 5c0.143 0.143 0.358 0.186 0.545 0.108s0.309-0.26 0.309-0.462v-10c0-0.202-0.122-0.385-0.309-0.462zM13.875 13.991l-3.491-3.491 3.491-3.491v6.982z', 'M11.5 3c-0.943-1.257-2.419-2-4-2-1.672 0-3.226 0.831-4.158 2.222-0.154 0.229-0.092 0.54 0.137 0.694s0.54 0.092 0.694-0.137c0.745-1.113 1.989-1.778 3.327-1.778 1.313 0 2.534 0.64 3.284 1.716l-1.284 1.284h3.5v-3.5l-1.5 1.5z']
     }
   };
   return icons;

package/lib/inputs/base/InputTextBase.js

@@ -11,6 +11,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _lodash = _interopRequireDefault(require("lodash"));
+
 var _inputHOC = _interopRequireDefault(require("../inputHOC"));
 
 require("../../assets/styles/input.scss");
@@ -111,7 +113,14 @@ var InputTextBase = function InputTextBase(props) {
       id: id,
       className: helpers.getInputClass(props),
       ref: function ref(r) {
-        if (inputRef) inputRef.current = r;
+        if (inputRef) {
+          if (!_lodash["default"].isFunction(inputRef)) {
+            inputRef.current = r;
+          } else {
+            inputRef(r);
+          }
+        }
+
         if (targetRef) targetRef(r);
       }
     };

package/lib/inputs/base/helpers.js

@@ -7,9 +7,12 @@ exports.getRightElements = exports.getErrorMessages = exports.getInputWrapperCla
 
 var _react = _interopRequireDefault(require("react"));
 
+var _uuid = _interopRequireDefault(require("uuid"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-// import Popover from '../../popover';
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 var getInputClass = function getInputClass(_ref) {
   var textAlign = _ref.textAlign,
       readOnly = _ref.readOnly;
@@ -39,11 +42,16 @@ var getErrorMessages = function getErrorMessages(messages) {
 exports.getErrorMessages = getErrorMessages;
 
 var getRightElements = function getRightElements(rightElements, errorMessages) {
-  if (errorMessages.length === 0) return rightElements;
   var elements = rightElements || [];
+  var newElements = elements.map(function (element) {
+    return _extends({}, element, {
+      key: "rightelement-".concat(_uuid["default"].v1())
+    });
+  });
+  if (errorMessages.length === 0) return newElements;
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: "sidebuttons"
-  }, elements);
+  }, newElements);
 };
 
 exports.getRightElements = getRightElements;

package/lib/inputs/number/BaseNumber.js

@@ -49,7 +49,7 @@ var BaseNumber = function BaseNumber(props) {
 };
 
 BaseNumber.propTypes = {
-  value: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
+  value: _propTypes["default"].number,
   leftElements: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].object), _propTypes["default"].element, _propTypes["default"].object]),
   onBlur: _propTypes["default"].func,
   returnFormattedValueOnBlur: _propTypes["default"].bool

package/lib/inputs/number/index.js

@@ -40,19 +40,17 @@ var NumberField = function NumberField(props) {
     value: (0, _format_number.numberToPtBR)(props.value),
     textAlign: props.textAlign,
     mask: Number,
-    isNumeric: true,
-    scale: 0,
-    padFractionalZeros: false
+    scale: 0
   }));
 };
 
 NumberField.propTypes = {
-  value: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
-  textAlign: _propTypes["default"].string
+  textAlign: _propTypes["default"].string,
+  value: _propTypes["default"].string
 };
 NumberField.defaultProps = {
-  value: undefined,
-  textAlign: 'left'
+  textAlign: 'right',
+  value: ''
 };
 var _default = NumberField;
 exports["default"] = _default;

package/lib/inputs/select/Dropdown.js

@@ -105,6 +105,9 @@ var Dropdown = function Dropdown(_ref) {
     onFocus: function onFocus() {
       handleOnFocus();
     },
+    onBlur: function onBlur() {
+      handleOnBlur();
+    },
     onChange: function onChange(e) {
       handleOnFilter(e.target.value);
     },
@@ -129,10 +132,7 @@ var Dropdown = function Dropdown(_ref) {
       tabIndex: "-1",
       onKeyPress: function onKeyPress() {},
       onClick: function onClick() {
-        if (!disabled) {
-          handleOnSelect(item);
-          handleOnBlur(item);
-        }
+        if (!disabled) handleOnSelect(item);
       }
     }, item.iconName && /*#__PURE__*/_react["default"].createElement(_icons["default"], {
       name: item.iconName,

package/lib/inputs/select/index.js

@@ -15,40 +15,17 @@ var _simple = _interopRequireDefault(require("./simple"));
 
 require("../../assets/styles/select.scss");
 
-var _gridlayout = _interopRequireDefault(require("../../gridlayout"));
-
-var _excluded = ["gridLayout", "multiple"];
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 var SelectField = function SelectField(props) {
-  var gridLayout = props.gridLayout,
-      multiple = props.multiple,
-      newProps = _objectWithoutProperties(props, _excluded);
-
-  var component = multiple ? /*#__PURE__*/_react["default"].createElement(_multiple["default"], newProps) : /*#__PURE__*/_react["default"].createElement(_simple["default"], newProps);
-
-  if (gridLayout !== undefined) {
-    return /*#__PURE__*/_react["default"].createElement(_gridlayout["default"], {
-      customClass: "-withinput",
-      cols: gridLayout
-    }, component);
-  }
-
-  return component;
+  return props.multiple ? /*#__PURE__*/_react["default"].createElement(_multiple["default"], props) : /*#__PURE__*/_react["default"].createElement(_simple["default"], props);
 };
 
 SelectField.propTypes = {
-  multiple: _propTypes["default"].bool,
-  gridLayout: _propTypes["default"].string
+  multiple: _propTypes["default"].bool
 };
 SelectField.defaultProps = {
-  multiple: false,
-  gridLayout: undefined
+  multiple: false
 };
 var _default = SelectField;
 exports["default"] = _default;

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

@@ -84,7 +84,6 @@ var MultipleSelect = /*#__PURE__*/function (_Component) {
     _this.componentId = "select-component".concat(_uuid["default"].v1());
     _this.componentRef = /*#__PURE__*/_react["default"].createRef();
     _this.state = {
-      valueFromProps: null,
       dataCombo: props.dataSource,
       currents: [],
       selected: null,
@@ -386,19 +385,18 @@ Object.defineProperty(MultipleSelect, "getDerivedStateFromProps", {
         value = props.value,
         idKey = props.idKey;
 
-    if (value !== state.valueFromProps && dataSource.length > 0) {
-      return {
-        valueFromProps: value,
-        currents: dataSource.filter(function (item) {
-          return value.includes(item[idKey]);
-        })
-      };
-    } else if (dataSource !== state.dataCombo) {
+    if (dataSource !== state.dataCombo) {
       var dataCombo = remoteSearch ? dataSource : (0, _helper.getFilteredMultipleDataCombo)(_extends({}, props, state));
       return {
         dataCombo: dataCombo,
         selected: dataSource.length > 0 && remoteSearch ? dataSource[0] : null
       };
+    } else if (value !== null && dataSource.length > 0) {
+      return {
+        currents: dataSource.filter(function (item) {
+          return value.includes(item[idKey]);
+        })
+      };
     }
 
     return null;

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

@@ -127,6 +127,9 @@ var SimpleSelect = /*#__PURE__*/function (_Component) {
         onFocus: function onFocus() {
           _this2.onFocus();
         },
+        onBlur: function onBlur(e) {
+          _this2.onBlur(e);
+        },
         onChange: function onChange(e) {
           _this2.onFilter(e.target.value);
         },
@@ -290,11 +293,18 @@ var _initialiseProps = function _initialiseProps() {
     enumerable: true,
     writable: true,
     value: function value(selected) {
-      var onChange = _this3.props.onChange;
+      var _this3$props2 = _this3.props,
+          onChange = _this3$props2.onChange,
+          idKey = _this3$props2.idKey,
+          name = _this3$props2.name;
 
       if (onChange) {
-        var event = _this3.getSelectEvent(selected);
-
+        var event = {
+          target: {
+            name: name,
+            value: selected ? selected[idKey] : undefined
+          }
+        };
         onChange(event);
       }
     }
@@ -354,15 +364,9 @@ var _initialiseProps = function _initialiseProps() {
     configurable: true,
     enumerable: true,
     writable: true,
-    value: function value(selected) {
+    value: function value(e) {
       var onBlur = _this3.props.onBlur;
-
-      if (onBlur) {
-        var event = _this3.getSelectEvent(selected);
-
-        onBlur(event);
-      }
-
+      if (onBlur) onBlur(e);
       if (!_this3.state.insideComponent) _this3.setState({
         opened: false,
         isTyping: false
@@ -374,9 +378,9 @@ var _initialiseProps = function _initialiseProps() {
     enumerable: true,
     writable: true,
     value: function value(e) {
-      var _this3$props2 = _this3.props,
-          dataSource = _this3$props2.dataSource,
-          idKey = _this3$props2.idKey;
+      var _this3$props3 = _this3.props,
+          dataSource = _this3$props3.dataSource,
+          idKey = _this3$props3.idKey;
       var _this3$state = _this3.state,
           selected = _this3$state.selected,
           isTyping = _this3$state.isTyping;
@@ -417,22 +421,6 @@ var _initialiseProps = function _initialiseProps() {
       });
     }
   });
-  Object.defineProperty(this, "getSelectEvent", {
-    configurable: true,
-    enumerable: true,
-    writable: true,
-    value: function value(selected) {
-      var _this3$props3 = _this3.props,
-          idKey = _this3$props3.idKey,
-          name = _this3$props3.name;
-      return {
-        target: {
-          name: name,
-          value: selected ? selected[idKey] : undefined
-        }
-      };
-    }
-  });
   Object.defineProperty(this, "setOnDenied", {
     configurable: true,
     enumerable: true,

package/lib/internals/withTooltip.js

@@ -33,8 +33,6 @@ 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;
@@ -47,32 +45,34 @@ 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)(props.tooltipPosition),
+    var _useState = (0, _react.useState)(false),
         _useState2 = _slicedToArray(_useState, 2),
-        tooltipPosition = _useState2[0],
-        setTooltipPosition = _useState2[1];
+        showTooltip = _useState2[0],
+        setShowTooltip = _useState2[1];
 
-    var _useState3 = (0, _react.useState)(''),
+    var _useState3 = (0, _react.useState)({
+      width: tooltipWidth,
+      height: undefined
+    }),
         _useState4 = _slicedToArray(_useState3, 2),
-        tooltipStyle = _useState4[0],
-        setTooltipStyle = _useState4[1];
+        tooltipDimensions = _useState4[0],
+        setTooltipDimensions = _useState4[1];
 
-    var _useState5 = (0, _react.useState)(false),
+    var _useState5 = (0, _react.useState)(true),
         _useState6 = _slicedToArray(_useState5, 2),
-        showTooltip = _useState6[0],
-        setShowTooltip = _useState6[1];
+        findScrollableParent = _useState6[0],
+        setFindScrollableParent = _useState6[1];
 
-    var _useState7 = (0, _react.useState)({
-      width: tooltipWidth,
-      height: TOOLTIP_INITIAL_HEIGHT
-    }),
+    var _useState7 = (0, _react.useState)(undefined),
         _useState8 = _slicedToArray(_useState7, 2),
-        tooltipDimensions = _useState8[0],
-        setTooltipDimensions = _useState8[1];
+        dimensionsTargetElement = _useState8[0],
+        setDimensionsTargetElement = _useState8[1];
 
+    var scrollableParent = (0, _react.useRef)();
     var targetElement = (0, _react.useRef)();
 
     var onMouseOver = function onMouseOver(e) {
@@ -85,24 +85,58 @@ var withTooltip = function withTooltip(WrappedComponent) {
       setShowTooltip(false);
     };
 
-    var onAnyScroll = function onAnyScroll() {
-      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);
     };
 
     (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);
-          document.removeEventListener('scroll', onAnyScroll, true);
+
+          if (scrollableParent && scrollableParent.current) {
+            scrollableParent.current.removeEventListener('scroll', onParentScroll);
+          }
 
           if (targetElement && targetElement.current) {
             targetElement.current.removeEventListener('mouseout', onMouseOut);
@@ -110,74 +144,39 @@ 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 style = "width: ".concat(width, "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");
-
-        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 < width) {
-              setTooltipPosition('right');
-            } else {
-              style += "; top: ".concat(targetVerticalCenter + window.scrollY - height / 2, "px");
-              style += "; left: ".concat(targetDimensions.left - width - 6, "px");
-            }
-
-            break;
-
-          case 'right':
-            if (window.innerWidth - targetDimensions.right < width) {
-              setTooltipPosition('left');
-            } else {
-              style += "; top: ".concat(targetVerticalCenter + window.scrollY - height / 2, "px");
-              style += "; left: ".concat(targetDimensions.left + targetDimensions.width + 5, "px");
-            }
-
-            break;
-
-          default:
-            style += '';
-        }
 
-        setTooltipStyle(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");
       }
-    }, [tooltipDimensions, targetElement.current, tooltipPosition]);
-    (0, _react.useEffect)(function () {
-      setTooltipPosition(props.tooltipPosition);
-    }, [window.scrollY, window.scrollX, window.innerWidth]);
+
+      return style;
+    };
 
     var getTooltip = function getTooltip() {
       if (tooltip) {
         return /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
           text: tooltip,
-          style: tooltipStyle,
+          style: getStyle(),
           className: tooltipPosition,
-          tooltipDimensions: tooltipDimensions,
           handlerSetDimensions: setTooltipDimensions
         });
       }
@@ -202,7 +201,7 @@ var withTooltip = function withTooltip(WrappedComponent) {
     tooltipPosition: _propTypes["default"].string
   };
   EnhancedComponent.defaultProps = {
-    tooltipWidth: undefined,
+    tooltipWidth: 'auto',
     space: 20,
     tooltip: '',
     tooltipPosition: 'bottom'

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 && !selectable) return null;
+    if (_onClick === undefined && dropdownContext === undefined) return null;
     return {
       onClick: function onClick(e) {
-        if (_onClick !== undefined) _onClick(e, itemId);
+        if (_onClick !== undefined) _onClick(e);
         if (dropdownContext) dropdownContext.handleDropdownClose();
-        if (selectable) handleSelectItem(itemId, _onClick);
+        if (selectable && handleSelectItem(itemId)) ;
       },
       onKeyDown: null,
       role: 'button',

package/lib/list/index.js

@@ -58,30 +58,24 @@ 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 children = props.children,
-      customClass = props.customClass,
-      condensed = props.condensed,
-      transparent = props.transparent,
-      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 children = props.children,
+      customClass = props.customClass,
+      condensed = props.condensed,
+      transparent = props.transparent,
+      style = props.style,
+      selectable = props.selectable;
   var contextValues = {
     selectable: selectable,
     selectedItemId: selectedItemId,
-    handleSelectItem: function handleSelectItem(selectedId, onClick) {
-      if (!onSelectItem && onClick) setSelectedItemId(selectedId);
-      if (onSelectItem) onSelectItem(selectedId);
+    handleSelectItem: function handleSelectItem(selectedId) {
+      setSelectedItemId(selectedId);
     }
   };
-  (0, _react.useEffect)(function () {
-    if (onSelectItem && props.selectedItemId) setSelectedItemId(props.selectedItemId);
-  }, [props.selectedItemId]);
   return /*#__PURE__*/_react["default"].createElement(_helpers["default"].Provider, {
     value: contextValues
   }, /*#__PURE__*/_react["default"].createElement("ul", {
@@ -97,18 +91,14 @@ List.propTypes = {
   customClass: _propTypes["default"].string,
   condensed: _propTypes["default"].bool,
   selectable: _propTypes["default"].bool,
-  style: _propTypes["default"].object,
-  onSelectItem: _propTypes["default"].func,
-  selectedItemId: _propTypes["default"].string
+  style: _propTypes["default"].object
 };
 List.defaultProps = {
   customClass: '',
   condensed: false,
   transparent: false,
   selectable: false,
-  style: {},
-  onSelectItem: undefined,
-  selectedItemId: ''
+  style: {}
 };
 var _default = List;
 exports["default"] = _default;