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

package/lib/inputs/select/helper.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getFilteredMultipleDataCombo = exports.getFilteredSimpleDataCombo = exports.getDropdownItemCssClass = exports.contentClass = void 0;
+exports.returnDropdownDynamicStyles = exports.getFilteredMultipleDataCombo = exports.getFilteredSimpleDataCombo = exports.getDropdownItemCssClass = exports.contentClass = void 0;
 
 var contentClass = function contentClass(props) {
   return "content ".concat(props.showClearButton ? '' : 'noclear');
@@ -42,4 +42,67 @@ var getFilteredMultipleDataCombo = function getFilteredMultipleDataCombo(_ref2)
   });
 };
 
-exports.getFilteredMultipleDataCombo = getFilteredMultipleDataCombo;
+exports.getFilteredMultipleDataCombo = getFilteredMultipleDataCombo;
+
+var returnDropdownPosition = function returnDropdownPosition(_ref3) {
+  var selectFieldRects = _ref3.selectFieldRects,
+      dropdownRef = _ref3.dropdownRef,
+      dropdownRects = _ref3.dropdownRects;
+  var aboveDropdown = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var DEFAULT_MARGIN_BOTTOM = 10;
+
+  if (aboveDropdown) {
+    return selectFieldRects.top + window.scrollY - (dropdownRef.current && dropdownRects.height) - DEFAULT_MARGIN_BOTTOM;
+  }
+
+  return selectFieldRects.top + window.scrollY + selectFieldRects.height;
+};
+
+var returnDropdownDynamicStyles = function returnDropdownDynamicStyles(_ref4) {
+  var selectFieldRef = _ref4.selectFieldRef,
+      dropdownMaxHeight = _ref4.dropdownMaxHeight,
+      dropdownRef = _ref4.dropdownRef;
+  var selectFieldRects = selectFieldRef.current.getBoundingClientRect();
+  var dropdownRects = dropdownRef.current && dropdownRef.current.getBoundingClientRect();
+  var dropdownBottomDistance = window.innerHeight - selectFieldRects.bottom;
+  var bottomOffset = 30;
+  var maxDropdownBottomDistance = 200;
+  var height = dropdownMaxHeight;
+  var dropdownPosition;
+
+  if (!height || height <= 0) {
+    if (dropdownBottomDistance < maxDropdownBottomDistance) {
+      height = selectFieldRects.top;
+      dropdownPosition = returnDropdownPosition({
+        selectFieldRects: selectFieldRects,
+        dropdownRef: dropdownRef,
+        dropdownRects: dropdownRects
+      }, true);
+    } else {
+      height = dropdownBottomDistance;
+      dropdownPosition = returnDropdownPosition({
+        selectFieldRects: selectFieldRects
+      });
+    }
+  } else {
+    maxDropdownBottomDistance = height;
+
+    if (dropdownBottomDistance < maxDropdownBottomDistance) {
+      dropdownPosition = returnDropdownPosition({
+        selectFieldRects: selectFieldRects,
+        dropdownRef: dropdownRef,
+        dropdownRects: dropdownRects
+      }, true);
+    } else {
+      dropdownPosition = returnDropdownPosition(selectFieldRects);
+    }
+  }
+
+  return {
+    maxHeight: height - bottomOffset,
+    top: dropdownPosition,
+    left: selectFieldRects.left
+  };
+};
+
+exports.returnDropdownDynamicStyles = returnDropdownDynamicStyles;

package/lib/inputs/select/index.js

@@ -15,17 +15,40 @@ 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) {
-  return props.multiple ? /*#__PURE__*/_react["default"].createElement(_multiple["default"], props) : /*#__PURE__*/_react["default"].createElement(_simple["default"], 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;
 };
 
 SelectField.propTypes = {
-  multiple: _propTypes["default"].bool
+  multiple: _propTypes["default"].bool,
+  gridLayout: _propTypes["default"].string
 };
 SelectField.defaultProps = {
-  multiple: false
+  multiple: false,
+  gridLayout: undefined
 };
 var _default = SelectField;
 exports["default"] = _default;

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

@@ -83,7 +83,9 @@ var MultipleSelect = /*#__PURE__*/function (_Component) {
 
     _this.componentId = "select-component".concat(_uuid["default"].v1());
     _this.componentRef = /*#__PURE__*/_react["default"].createRef();
+    _this.dropdownRef = /*#__PURE__*/_react["default"].createRef();
     _this.state = {
+      valueFromProps: null,
       dataCombo: props.dataSource,
       currents: [],
       selected: null,
@@ -141,10 +143,11 @@ var MultipleSelect = /*#__PURE__*/function (_Component) {
   }, {
     key: "onClickOutside",
     value: function onClickOutside(event) {
-      var selectWrapper = this.selectWrapper;
+      var selectWrapper = this.selectWrapper,
+          dropdownRef = this.dropdownRef;
       var target = event.target;
 
-      if (target !== selectWrapper && !selectWrapper.contains(target)) {
+      if (target !== selectWrapper && !selectWrapper.contains(target) && dropdownRef.current && !dropdownRef.current.contains(target)) {
         this.setState({
           opened: false
         });
@@ -269,12 +272,12 @@ var MultipleSelect = /*#__PURE__*/function (_Component) {
 
       if (e.keyCode === constants.keyCodes.ENTER) {
         this.onSelect(selected);
-      } else if ([constants.keyCodes.ARROW_DOWN, constants.keyCodes.ARROW_UP].includes(e.keyCode)) {
+      } else if ([constants.keyCodes.ARROW_UP, constants.keyCodes.ARROW_DOWN].includes(e.keyCode)) {
         var index = dataSource.findIndex(function (d) {
           return d === selected;
         });
 
-        if (e.keyCode === constants.keyCodes.ARROW_UP) {
+        if (e.keyCode === constants.keyCodes.ARROW_DOWN) {
           index = index === dataSource.length - 1 ? 0 : index + 1;
         } else {
           index = index === 0 ? dataSource.length - 1 : index - 1;
@@ -362,6 +365,7 @@ var MultipleSelect = /*#__PURE__*/function (_Component) {
         handleOnUnselect: this.onUnselect
       }))), opened && /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], _extends({}, this.state, this.props, {
         selectFieldRef: this.componentRef,
+        dropdownRef: this.dropdownRef,
         gridWrapperStyle: gridLayout ? window.getComputedStyle(this.gridEl) : undefined,
         handleOnSelect: this.onSelect,
         handleOnFilter: this.onFilter,
@@ -385,18 +389,19 @@ Object.defineProperty(MultipleSelect, "getDerivedStateFromProps", {
         value = props.value,
         idKey = props.idKey;
 
-    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) {
+    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) {
+      var dataCombo = remoteSearch ? dataSource : (0, _helper.getFilteredMultipleDataCombo)(_extends({}, props, state));
+      return {
+        dataCombo: dataCombo,
+        selected: dataCombo.length > 0 ? dataCombo[0] : null
+      };
     }
 
     return null;

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

@@ -78,6 +78,7 @@ var SimpleSelect = /*#__PURE__*/function (_Component) {
       onDenied: undefined,
       isTyping: false
     };
+    _this.dropdownRef = /*#__PURE__*/_react["default"].createRef();
     _this.componentId = "select-component".concat(_uuid["default"].v1());
     _this.componentRef = /*#__PURE__*/_react["default"].createRef();
     return _this;
@@ -127,9 +128,6 @@ 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);
         },
@@ -155,6 +153,7 @@ var SimpleSelect = /*#__PURE__*/function (_Component) {
         }))
       })), opened && /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], _extends({}, this.state, this.props, {
         selectFieldRef: this.componentRef,
+        dropdownRef: this.dropdownRef,
         gridWrapperStyle: gridLayout ? window.getComputedStyle(this.gridEl) : undefined,
         handleOnSelect: this.onSelect,
         handleOnFilter: this.onFilter,
@@ -175,14 +174,14 @@ Object.defineProperty(SimpleSelect, "getDerivedStateFromProps", {
   value: function value(props, state) {
     var value = props.value,
         dataSource = props.dataSource,
+        descriptionKey = props.descriptionKey,
         idKey = props.idKey,
         selectFirstOnEnter = props.selectFirstOnEnter,
-        descriptionKey = props.descriptionKey,
         remoteSearch = props.remoteSearch,
         undigitable = props.undigitable;
     var current = null;
 
-    if (value !== state.valueFromProps) {
+    if (value !== state.valueFromProps && dataSource.length > 0) {
       if (value !== null) {
         current = dataSource.find(function (i) {
           return i[idKey].toString().toLowerCase() === value.toString().toLowerCase();
@@ -230,10 +229,11 @@ var _initialiseProps = function _initialiseProps() {
     enumerable: true,
     writable: true,
     value: function value(event) {
-      var selectWrapper = _this3.selectWrapper;
+      var selectWrapper = _this3.selectWrapper,
+          dropdownRef = _this3.dropdownRef;
       var target = event.target;
 
-      if (target !== selectWrapper && !selectWrapper.contains(target)) {
+      if (target !== selectWrapper && !selectWrapper.contains(target) && dropdownRef.current && !dropdownRef.current.contains(target)) {
         _this3.setState({
           opened: false
         });
@@ -293,18 +293,11 @@ var _initialiseProps = function _initialiseProps() {
     enumerable: true,
     writable: true,
     value: function value(selected) {
-      var _this3$props2 = _this3.props,
-          onChange = _this3$props2.onChange,
-          idKey = _this3$props2.idKey,
-          name = _this3$props2.name;
+      var onChange = _this3.props.onChange;
 
       if (onChange) {
-        var event = {
-          target: {
-            name: name,
-            value: selected ? selected[idKey] : undefined
-          }
-        };
+        var event = _this3.getSelectEvent(selected);
+
         onChange(event);
       }
     }
@@ -364,9 +357,15 @@ var _initialiseProps = function _initialiseProps() {
     configurable: true,
     enumerable: true,
     writable: true,
-    value: function value(e) {
+    value: function value(selected) {
       var onBlur = _this3.props.onBlur;
-      if (onBlur) onBlur(e);
+
+      if (onBlur) {
+        var event = _this3.getSelectEvent(selected);
+
+        onBlur(event);
+      }
+
       if (!_this3.state.insideComponent) _this3.setState({
         opened: false,
         isTyping: false
@@ -378,9 +377,9 @@ var _initialiseProps = function _initialiseProps() {
     enumerable: true,
     writable: true,
     value: function value(e) {
-      var _this3$props3 = _this3.props,
-          dataSource = _this3$props3.dataSource,
-          idKey = _this3$props3.idKey;
+      var _this3$props2 = _this3.props,
+          dataSource = _this3$props2.dataSource,
+          idKey = _this3$props2.idKey;
       var _this3$state = _this3.state,
           selected = _this3$state.selected,
           isTyping = _this3$state.isTyping;
@@ -389,12 +388,12 @@ var _initialiseProps = function _initialiseProps() {
         e.preventDefault();
 
         _this3.onSelect(selected);
-      } else if ([constants.keyCodes.ARROW_DOWN, constants.keyCodes.ARROW_UP].includes(e.keyCode)) {
+      } else if ([constants.keyCodes.ARROW_UP, constants.keyCodes.ARROW_DOWN].includes(e.keyCode)) {
         var index = dataSource.findIndex(function (d) {
           return d[idKey] === selected[idKey];
         });
 
-        if (e.keyCode === constants.keyCodes.ARROW_UP) {
+        if (e.keyCode === constants.keyCodes.ARROW_DOWN) {
           index = index === dataSource.length - 1 ? 0 : index + 1;
         } else {
           index = index === 0 ? dataSource.length - 1 : index - 1;
@@ -421,6 +420,22 @@ 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/constants.js

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

package/lib/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.contains(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 && tooltipElement.current) {
+        var width = tooltipDimensions.width,
+            height = tooltipDimensions.height;
+        var targetDimensions = targetElement.current.getBoundingClientRect();
+        var targetVerticalCenter = (targetDimensions.top + targetDimensions.bottom) / 2;
+        var tooltipClientWidth = 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/labels/DefaultLabel.js

@@ -48,7 +48,8 @@ var DefaultLabel = function DefaultLabel(props) {
       size = props.size,
       iconAlign = props.iconAlign,
       bordered = props.bordered,
-      permissionAttr = props.permissionAttr;
+      permissionAttr = props.permissionAttr,
+      skeletonize = props.skeletonize;
   var options = [_permissionValidations.OPTIONS_ON_DENIED.unvisible];
 
   var _useState = (0, _react.useState)((0, _permissionValidations.actionsOnPermissionDenied)(permissionAttr, options)),
@@ -56,7 +57,7 @@ var DefaultLabel = function DefaultLabel(props) {
       onDenied = _useState2[0];
 
   var getClass = function getClass() {
-    return "label-component ".concat(className, " ").concat(customClass, " ").concat(bordered && '-bordered', " ").concat(disabled && '-disabled', " \n    ").concat(size && "-".concat(size), "\n    ").concat(iconAlign && "icon-".concat(iconAlign));
+    return "label-component ".concat(className, " ").concat(customClass, " ").concat(bordered ? '-bordered' : '', " ").concat(disabled ? '-disabled' : '', "\n    ").concat(skeletonize ? '-skeletonized' : '', "\n    ").concat(size ? "-".concat(size) : '', "\n    ").concat(iconAlign ? "icon-".concat(iconAlign) : '');
   };
 
   var getIcon = function getIcon() {
@@ -94,7 +95,8 @@ DefaultLabel.defaultProps = {
   style: {},
   visible: true,
   disabled: false,
-  permissionAttr: undefined
+  permissionAttr: undefined,
+  skeletonize: false
 };
 DefaultLabel.propTypes = {
   customClass: _propTypes["default"].string,
@@ -109,7 +111,8 @@ DefaultLabel.propTypes = {
   style: _propTypes["default"].object,
   visible: _propTypes["default"].bool,
   disabled: _propTypes["default"].bool,
-  permissionAttr: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].arrayOf(_propTypes["default"].object)])
+  permissionAttr: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].arrayOf(_propTypes["default"].object)]),
+  skeletonize: _propTypes["default"].bool
 };
 
 var _default = (0, _withTooltip["default"])(DefaultLabel);