linear-react-components-ui 0.4.77-beta.27 → 0.4.77-beta.29

package/lib/inputs/multiSelect/Dropdown.js

@@ -1,6 +1,6 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+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); }
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -9,6 +9,8 @@ exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _icons = _interopRequireDefault(require("../../icons"));
 
 var _avatar = _interopRequireDefault(require("../../avatar"));
@@ -19,7 +21,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
+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); }
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
@@ -29,25 +31,21 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+function _iterableToArrayLimit(arr, i) { var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]); if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var returnDropdownDynamicStyles = function returnDropdownDynamicStyles(selectFieldRef, dropdownMaxHeight) {
-  var _selectFieldRef$curre, _selectFieldRef$curre2, _selectFieldRef$curre3;
-
-  var selectFieldRects = selectFieldRef === null || selectFieldRef === void 0 ? void 0 : (_selectFieldRef$curre = selectFieldRef.current) === null || _selectFieldRef$curre === void 0 ? void 0 : _selectFieldRef$curre.getBoundingClientRect();
-  var bottom = selectFieldRects !== null && selectFieldRects !== void 0 && selectFieldRects.bottom ? selectFieldRects === null || selectFieldRects === void 0 ? void 0 : selectFieldRects.bottom : 0;
-  var offsetTop = selectFieldRef !== null && selectFieldRef !== void 0 && (_selectFieldRef$curre2 = selectFieldRef.current) !== null && _selectFieldRef$curre2 !== void 0 && _selectFieldRef$curre2.offsetTop ? selectFieldRef === null || selectFieldRef === void 0 ? void 0 : (_selectFieldRef$curre3 = selectFieldRef.current) === null || _selectFieldRef$curre3 === void 0 ? void 0 : _selectFieldRef$curre3.offsetTop : 0;
-  var dropdownBottomDistance = window.innerHeight - bottom;
+  var selectFieldRects = selectFieldRef.current.getBoundingClientRect();
+  var dropdownBottomDistance = window.innerHeight - selectFieldRects.bottom;
   var maxDropdownBottomDistance = 200;
   var height = dropdownMaxHeight;
   var dropdownPosition;
 
   if (!height || height <= 0) {
     if (dropdownBottomDistance < maxDropdownBottomDistance) {
-      height = selectFieldRects !== null && selectFieldRects !== void 0 && selectFieldRects.top ? selectFieldRects.top : 0;
-      dropdownPosition = window.innerHeight - offsetTop + 10;
+      height = selectFieldRects.top;
+      dropdownPosition = window.innerHeight - selectFieldRef.current.offsetTop + 10;
     } else {
       height = dropdownBottomDistance;
     }
@@ -55,38 +53,38 @@ var returnDropdownDynamicStyles = function returnDropdownDynamicStyles(selectFie
     maxDropdownBottomDistance = height;
 
     if (dropdownBottomDistance < maxDropdownBottomDistance) {
-      dropdownPosition = window.innerHeight - offsetTop + 10;
+      dropdownPosition = window.innerHeight - selectFieldRef.current.offsetTop + 10;
     }
   }
 
   return {
     maxHeight: "".concat(height - 30, "px"),
-    bottom: "".concat(dropdownPosition, "px")
+    bottom: dropdownBottomDistance < maxDropdownBottomDistance && "".concat(dropdownPosition, "px")
   };
 };
 
-var Dropdown = function Dropdown(props) {
-  var _props$imageAlign = props.imageAlign,
-      imageAlign = _props$imageAlign === void 0 ? 'left' : _props$imageAlign,
-      descriptionKey = props.descriptionKey,
-      idKey = props.idKey,
-      dropdownMaxHeight = props.dropdownMaxHeight,
-      selectFieldRef = props.selectFieldRef,
-      isAllChecked = props.isAllChecked,
-      dropdownWidth = props.dropdownWidth,
-      inputValue = props.inputValue,
-      gridWrapperStyle = props.gridWrapperStyle,
-      _onFocus = props.onFocus,
-      onFilter = props.onFilter,
-      _onBlur = props.onBlur,
-      dataCombo = props.dataCombo,
-      opened = props.opened,
-      onUncheckAll = props.onUncheckAll,
-      onCheckAll = props.onCheckAll,
-      selecteds = props.selecteds,
-      onSelect = props.onSelect;
-
-  var _useState = (0, _react.useState)(returnDropdownDynamicStyles(selectFieldRef, dropdownMaxHeight || 0)),
+var Dropdown = function Dropdown(_ref) {
+  var dataCombo = _ref.dataCombo,
+      dropdownWidth = _ref.dropdownWidth,
+      _onBlur = _ref.onBlur,
+      _onFocus = _ref.onFocus,
+      onSelect = _ref.onSelect,
+      onFilter = _ref.onFilter,
+      opened = _ref.opened,
+      idKey = _ref.idKey,
+      descriptionKey = _ref.descriptionKey,
+      selecteds = _ref.selecteds,
+      imageAlign = _ref.imageAlign,
+      imgSrcKey = _ref.imgSrcKey,
+      gridWrapperStyle = _ref.gridWrapperStyle,
+      selectFieldRef = _ref.selectFieldRef,
+      dropdownMaxHeight = _ref.dropdownMaxHeight,
+      isAllChecked = _ref.isAllChecked,
+      onUncheckAll = _ref.onUncheckAll,
+      onCheckAll = _ref.onCheckAll,
+      inputValue = _ref.inputValue;
+
+  var _useState = (0, _react.useState)(returnDropdownDynamicStyles(selectFieldRef, dropdownMaxHeight)),
       _useState2 = _slicedToArray(_useState, 1),
       dropdownDynamicStyles = _useState2[0];
 
@@ -105,8 +103,8 @@ var Dropdown = function Dropdown(props) {
     onFocus: function onFocus() {
       _onFocus();
     },
-    onBlur: function onBlur(e) {
-      _onBlur(e);
+    onBlur: function onBlur() {
+      _onBlur();
     },
     onChange: function onChange(e) {
       onFilter(e.target.value);
@@ -123,7 +121,7 @@ var Dropdown = function Dropdown(props) {
   }, /*#__PURE__*/_react.default.createElement("span", {
     role: "button",
     className: "menubutton",
-    tabIndex: -1,
+    tabIndex: "-1",
     onKeyPress: function onKeyPress() {},
     onClick: function onClick() {
       return isAllChecked ? onUncheckAll(true) : onCheckAll(true);
@@ -134,16 +132,16 @@ var Dropdown = function Dropdown(props) {
   }), /*#__PURE__*/_react.default.createElement("span", {
     className: "label"
   }, inputValue !== '' ? 'Selecionar todos pesquisados' : 'Selecionar Todos'))), dataCombo.map(function (item) {
-    var isChecked = selecteds ? selecteds.find(function (selected) {
+    var isChecked = selecteds.find(function (selected) {
       return selected[idKey] === item[idKey];
-    }) : undefined;
+    });
     return /*#__PURE__*/_react.default.createElement("div", {
       key: "dropdowmItem ".concat(item[idKey], "}"),
       className: "item ".concat(isChecked && '-selected')
     }, /*#__PURE__*/_react.default.createElement("span", {
       role: "button",
       className: "menubutton",
-      tabIndex: -1,
+      tabIndex: "-1",
       onKeyPress: function onKeyPress() {},
       onClick: function onClick() {
         onSelect(item);
@@ -157,8 +155,8 @@ var Dropdown = function Dropdown(props) {
       style: {
         order: imageAlign === 'left' ? 0 : 1
       }
-    }), item.imgSrcKey && /*#__PURE__*/_react.default.createElement(_avatar.default, {
-      src: item.imgSrcKey,
+    }), item[imgSrcKey] && /*#__PURE__*/_react.default.createElement(_avatar.default, {
+      src: item[imgSrcKey],
       customClass: "menuicon",
       style: {
         order: imageAlign === 'left' ? 0 : 1
@@ -169,5 +167,34 @@ var Dropdown = function Dropdown(props) {
   })));
 };
 
+Dropdown.propTypes = {
+  dataCombo: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
+  idKey: _propTypes.default.string.isRequired,
+  descriptionKey: _propTypes.default.string.isRequired,
+  inputValue: _propTypes.default.string.isRequired,
+  isAllChecked: _propTypes.default.bool.isRequired,
+  imgSrcKey: _propTypes.default.string,
+  dropdownWidth: _propTypes.default.number.isRequired,
+  onFocus: _propTypes.default.func.isRequired,
+  onBlur: _propTypes.default.func.isRequired,
+  onSelect: _propTypes.default.func.isRequired,
+  onFilter: _propTypes.default.func.isRequired,
+  onUncheckAll: _propTypes.default.func.isRequired,
+  onCheckAll: _propTypes.default.func.isRequired,
+  opened: _propTypes.default.bool.isRequired,
+  selecteds: _propTypes.default.arrayOf(_propTypes.default.object),
+  imageAlign: _propTypes.default.oneOf(['left', 'right']),
+  gridWrapperStyle: _propTypes.default.object,
+  selectFieldRef: _propTypes.default.object,
+  dropdownMaxHeight: _propTypes.default.number
+};
+Dropdown.defaultProps = {
+  selecteds: [],
+  imageAlign: 'left',
+  imgSrcKey: undefined,
+  gridWrapperStyle: undefined,
+  selectFieldRef: undefined,
+  dropdownMaxHeight: undefined
+};
 var _default = Dropdown;
 exports.default = _default;

package/lib/inputs/multiSelect/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+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); }
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -11,6 +11,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _lodash = _interopRequireDefault(require("lodash"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _uuid = _interopRequireDefault(require("uuid"));
 
 var _Dropdown = _interopRequireDefault(require("./Dropdown"));
@@ -29,7 +31,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
+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); }
 
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 
@@ -47,28 +49,19 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+function _iterableToArrayLimit(arr, i) { var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]); if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-var MultiSelectField = function MultiSelectField(props) {
-  var onSelect = props.onSelect,
-      idKey = props.idKey,
-      _props$disabled = props.disabled,
-      disabled = _props$disabled === void 0 ? false : _props$disabled,
-      dataSource = props.dataSource,
-      descriptionKey = props.descriptionKey,
-      value = props.value,
-      onBlur = props.onBlur,
-      gridLayout = props.gridLayout;
+var MultiSelect = function MultiSelect(props) {
   var componentId = "multiSelect-component".concat(_uuid.default.v1());
 
-  var _useState = (0, _react.useState)(dataSource),
+  var _useState = (0, _react.useState)(props.dataSource),
       _useState2 = _slicedToArray(_useState, 2),
       dataCombo = _useState2[0],
       setDataCombo = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(),
+  var _useState3 = (0, _react.useState)([]),
       _useState4 = _slicedToArray(_useState3, 2),
       selecteds = _useState4[0],
       setSelecteds = _useState4[1];
@@ -98,7 +91,7 @@ var MultiSelectField = function MultiSelectField(props) {
       opened = _useState14[0],
       setOpened = _useState14[1];
 
-  var _useState15 = (0, _react.useState)(),
+  var _useState15 = (0, _react.useState)(false),
       _useState16 = _slicedToArray(_useState15, 2),
       onDenied = _useState16[0],
       setOnDenied = _useState16[1];
@@ -108,32 +101,30 @@ var MultiSelectField = function MultiSelectField(props) {
       insideComponent = _useState18[0],
       setInsideComponent = _useState18[1];
 
-  var gridEl = (0, _react.useRef)();
+  var gridEl = (0, _react.useRef)(null);
   var componentRef = (0, _react.useRef)(null);
-  var selectWrapper = (0, _react.useRef)();
+  var selectWrapper = (0, _react.useRef)(null);
 
   var handleOnSelect = function handleOnSelect(itemSelected) {
     if (itemSelected === null) return;
+    var onSelect = props.onSelect,
+        idKey = props.idKey;
     var newSelecteds = selecteds;
+    var hasSelected = newSelecteds.find(function (selected) {
+      return selected[idKey] === itemSelected[idKey];
+    });
 
-    if (newSelecteds) {
-      var hasSelected = newSelecteds.find(function (selected) {
-        return selected[idKey] === itemSelected[idKey];
+    if (hasSelected) {
+      newSelecteds = newSelecteds.filter(function (item) {
+        return item[idKey] !== itemSelected[idKey];
       });
-
-      if (hasSelected) {
-        newSelecteds = newSelecteds.filter(function (item) {
-          return item[idKey] !== itemSelected[idKey];
-        });
-      } else {
-        newSelecteds = [].concat(_toConsumableArray(newSelecteds), [itemSelected]);
-      }
-
-      if (onSelect) onSelect(newSelecteds.map(function (item) {
-        return item[idKey];
-      }));
+    } else {
+      newSelecteds = [].concat(_toConsumableArray(newSelecteds), [itemSelected]);
     }
 
+    if (onSelect) onSelect(newSelecteds.map(function (i) {
+      return i[idKey];
+    }));
     setSelecteds(newSelecteds);
   };
 
@@ -146,12 +137,14 @@ var MultiSelectField = function MultiSelectField(props) {
 
   var onMouseMove = function onMouseMove(event) {
     var target = event.target;
-    if ((target === null || target === void 0 ? void 0 : target.className) === '') return;
-    var newInsideComponent = ['item', 'menubutton', 'filterinput', 'filtercontainer', 'label'].includes(target === null || target === void 0 ? void 0 : target.className);
+    if (target.className === '') return;
+    var newInsideComponent = ['item', 'menubutton', 'filterinput', 'filtercontainer', 'label'].includes(target.className);
     setInsideComponent(newInsideComponent);
   };
 
   var onBlurComponent = function onBlurComponent(e) {
+    var dataSource = props.dataSource,
+        onBlur = props.onBlur;
     if (onBlur) onBlur(e);
 
     if (!insideComponent) {
@@ -161,28 +154,33 @@ var MultiSelectField = function MultiSelectField(props) {
     }
   };
 
-  var handleOnFilter = function handleOnFilter(currentValue) {
+  var handleOnFilter = function handleOnFilter(value) {
+    var dataSource = props.dataSource,
+        descriptionKey = props.descriptionKey;
     var newDataCombo = dataSource;
 
-    if (currentValue !== '') {
+    if (value !== '') {
       newDataCombo = (0, _helper.default)({
         dataSource: dataSource,
         descriptionKey: descriptionKey,
-        inputText: currentValue
+        inputText: value
       });
     }
 
     setDataCombo(newDataCombo);
-    setInputValue(currentValue);
+    setInputValue(value);
   };
 
   var onOpenClose = function onOpenClose() {
     setOpened(!opened);
-    if (selectWrapper.current) setDropdownWidth(selectWrapper.current.clientWidth);
+    setDropdownWidth(selectWrapper.current.clientWidth);
   };
 
   var onCheckAll = function onCheckAll() {
     var fromFilter = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    var dataSource = props.dataSource,
+        onSelect = props.onSelect,
+        idKey = props.idKey;
     var currentData = fromFilter ? dataCombo : dataSource;
     if (onSelect) onSelect(currentData.map(function (i) {
       return i[idKey];
@@ -191,22 +189,21 @@ var MultiSelectField = function MultiSelectField(props) {
   };
 
   var onUncheckAll = function onUncheckAll() {
-    if (onSelect) onSelect();
+    var onSelect = props.onSelect;
+    if (onSelect) onSelect([]);
     setSelecteds([]);
   };
 
   var onScreenResize = function onScreenResize() {
-    if (selectWrapper.current) setDropdownWidth(selectWrapper.current.clientWidth);
+    setDropdownWidth(selectWrapper.current.clientWidth);
   };
 
   var onClickOutSide = function onClickOutSide(event) {
-    var _componentRef$current;
-
     var target = event.target;
 
-    if (target !== componentRef.current && !((_componentRef$current = componentRef.current) !== null && _componentRef$current !== void 0 && _componentRef$current.contains(target))) {
+    if (target !== componentRef.current && !componentRef.current.contains(target)) {
       setOpened(false);
-      setDataCombo(dataSource);
+      setDataCombo(props.dataSource);
       setInputValue('');
     }
   };
@@ -216,19 +213,23 @@ var MultiSelectField = function MultiSelectField(props) {
   };
 
   var shouldDisabled = function shouldDisabled() {
-    return !!(disabled || onDenied && (onDenied.disabled || onDenied.hideContent));
+    var disabled = props.disabled;
+    return disabled || onDenied && (onDenied.disabled || onDenied.hideContent);
   };
 
   var getLabel = function getLabel() {
+    var dataSource = props.dataSource,
+        descriptionKey = props.descriptionKey;
+
     var checkIsAll = _lodash.default.isEqual(selecteds, dataSource);
 
     var newLabel = label;
 
     if (checkIsAll) {
       newLabel = 'Todos';
-    } else if (selecteds && selecteds.length > 1) {
+    } else if (selecteds.length > 1) {
       newLabel = 'Múltiplos';
-    } else if (selecteds && selecteds.length === 1) {
+    } else if (selecteds.length === 1) {
       newLabel = selecteds[0][descriptionKey];
     } else {
       newLabel = 'Nenhum selecionado';
@@ -238,9 +239,9 @@ var MultiSelectField = function MultiSelectField(props) {
   };
 
   (0, _react.useEffect)(function () {
-    if (gridLayout) {
+    if (props.gridLayout) {
       var currentGridEl = document.querySelector("#".concat(componentId, ">.-withinput.grid-container"));
-      if (currentGridEl) gridEl.current = currentGridEl;
+      if (gridEl !== currentGridEl) gridEl.current = currentGridEl;
     }
 
     window.addEventListener('resize', onScreenResize);
@@ -253,21 +254,22 @@ var MultiSelectField = function MultiSelectField(props) {
     };
   }, []);
   (0, _react.useEffect)(function () {
-    if (dataSource.length > 0) {
+    var dataSource = props.dataSource,
+        value = props.value,
+        idKey = props.idKey;
+
+    if (value !== null && dataSource.length > 0) {
       var newSelecteds = dataSource.filter(function (item) {
-        return value === null || value === void 0 ? void 0 : value.includes(item[idKey]);
+        return value.includes(item[idKey]);
       });
       setSelecteds(newSelecteds);
-    }
-  }, [value === null || value === void 0 ? void 0 : value.length, dataSource.length]);
-  (0, _react.useEffect)(function () {
-    if (!_lodash.default.isEqual(dataSource, dataCombo)) {
+    } else if (dataSource !== dataCombo) {
       var newDataCombo = (0, _helper.default)(_extends({}, props, {
         inputText: inputValue
       }));
       setDataCombo(newDataCombo);
     }
-  }, [dataSource]);
+  }, [props]);
   (0, _react.useEffect)(function () {
     var checkAll = _lodash.default.isEqual(dataCombo, selecteds);
 
@@ -315,9 +317,27 @@ var MultiSelectField = function MultiSelectField(props) {
     onFilter: handleOnFilter,
     onFocus: _onFocus,
     onBlur: onBlurComponent,
-    gridWrapperStyle: gridLayout ? window.getComputedStyle(gridEl.current) : undefined
+    gridWrapperStyle: props.gridLayout ? window.getComputedStyle(gridEl) : undefined
   })));
 };
 
-var _default = MultiSelectField;
+MultiSelect.propTypes = {
+  dataSource: _propTypes.default.arrayOf(_propTypes.default.object),
+  idKey: _propTypes.default.string.isRequired,
+  descriptionKey: _propTypes.default.string.isRequired,
+  value: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.number), _propTypes.default.arrayOf(_propTypes.default.string)]),
+  gridLayout: _propTypes.default.string,
+  onSelect: _propTypes.default.func,
+  onBlur: _propTypes.default.func,
+  disabled: _propTypes.default.bool
+};
+MultiSelect.defaultProps = {
+  dataSource: [],
+  value: null,
+  gridLayout: undefined,
+  onSelect: undefined,
+  onBlur: undefined,
+  disabled: false
+};
+var _default = MultiSelect;
 exports.default = _default;

package/lib/inputs/number/BaseNumber.js

@@ -7,46 +7,81 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _BaseMask = _interopRequireDefault(require("../mask/BaseMask"));
 
 var _format_number = require("./format_number");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
+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 BaseNumber = function BaseNumber(props) {
-  var _props$returnFormatte = props.returnFormattedValueOnBlur,
-      returnFormattedValueOnBlur = _props$returnFormatte === void 0 ? true : _props$returnFormatte;
-  return /*#__PURE__*/_react.default.createElement(_BaseMask.default, _extends({
-    value: (0, _format_number.numberToPtBR)(props.value),
-    thousandsSeparator: ".",
-    radix: ",",
-    mask: Number,
-    isNumeric: true,
+var returnEventFormattedValue = function returnEventFormattedValue(props, event) {
+  if (props.returnFormattedValueOnBlur || props.returnFormattedValueOnKeyDown) {
+    // Retornando um objeto com a mesma estrutura do Proxy original
+    // para recuperacao do valor formatado no padrão americano.
+    // O retorno poderá ser modificado conforme necessidade, desde que seja
+    // mantido o path até a propriedade value e name.
+    var _event$target = event.target,
+        value = _event$target.value,
+        name = _event$target.name;
+    return _extends({}, event, {
+      target: {
+        value: (0, _format_number.numberToEnUS)(value),
+        name: name
+      }
+    });
+  }
+
+  return event;
+};
+
+var getEventProps = function getEventProps(props) {
+  if (props.isNumeric) return {};
+  return {
     onBlur: function onBlur(e) {
       if (props.onBlur) {
-        if (returnFormattedValueOnBlur) {
-          // Retornando um objeto com a mesma estrutura do Proxy original
-          // para recuperacao do valor formatado no padrão americano.
-          // O retorno poderá ser modificado conforme necessidade, desde que seja
-          // mantido o path até a propriedade value e name.
-          var _ref = e.target,
-              value = _ref.value,
-              name = _ref.name;
-          props.onBlur({
-            target: {
-              value: value,
-              name: name
-            }
-          });
-        } else {
-          props.onBlur(e);
+        if (props.returnFormattedValueOnBlur) {
+          var formattedEvent = returnEventFormattedValue(props, e);
+          props.onBlur(formattedEvent);
+        }
+      }
+    },
+    onKeyDown: function onKeyDown(e) {
+      if (props.onKeyDown) {
+        if (props.returnFormattedValueOnBlur) {
+          var formattedEvent = returnEventFormattedValue(props, e);
+          props.onKeyDown(formattedEvent);
         }
       }
     }
-  }, props));
+  };
+};
+
+var BaseNumber = function BaseNumber(props) {
+  return /*#__PURE__*/_react.default.createElement(_BaseMask.default, _extends({}, props, getEventProps(props), {
+    value: (0, _format_number.numberToPtBR)(props.value),
+    mask: Number,
+    radix: ",",
+    thousandsSeparator: ".",
+    isNumeric: true
+  }));
 };
 
+BaseNumber.propTypes = {
+  value: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  leftElements: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.object), _propTypes.default.element, _propTypes.default.object]),
+  onBlur: _propTypes.default.func,
+  onKeyDown: _propTypes.default.func,
+  returnFormattedValueOnBlur: _propTypes.default.bool
+};
+BaseNumber.defaultProps = {
+  value: undefined,
+  leftElements: null,
+  onBlur: undefined,
+  returnFormattedValueOnBlur: true,
+  onKeyDown: undefined
+};
 var _default = BaseNumber;
 exports.default = _default;

package/lib/inputs/number/Currency.js

@@ -7,16 +7,18 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _BaseNumber = _interopRequireDefault(require("./BaseNumber"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
+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 CurrencyField = function CurrencyField(props) {
-  var _props$currencySymbol = props.currencySymbol,
-      currencySymbol = _props$currencySymbol === void 0 ? 'R$' : _props$currencySymbol;
-  var leftElements = props.displayCurrencySymbol ? /*#__PURE__*/_react.default.createElement("span", {
+  var currencySymbol = props.currencySymbol,
+      displayCurrencySymbol = props.displayCurrencySymbol;
+  var leftElements = displayCurrencySymbol ? /*#__PURE__*/_react.default.createElement("span", {
     className: "currency-symbol"
   }, currencySymbol) : [];
   return /*#__PURE__*/_react.default.createElement(_BaseNumber.default, _extends({}, props, {
@@ -24,5 +26,13 @@ var CurrencyField = function CurrencyField(props) {
   }));
 };
 
+CurrencyField.propTypes = {
+  currencySymbol: _propTypes.default.string,
+  displayCurrencySymbol: _propTypes.default.bool
+};
+CurrencyField.defaultProps = {
+  currencySymbol: 'R$',
+  displayCurrencySymbol: false
+};
 var _default = CurrencyField;
 exports.default = _default;

package/lib/inputs/number/format_number.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.numberToPtBR = exports.numberToEnUS = void 0;
+exports.numberToEnUS = exports.numberToPtBR = void 0;
 
 var numberToPtBR = function numberToPtBR(value) {
   if (value !== undefined && typeof value === 'number') {