linear-react-components-ui 1.1.3 → 1.1.4

package/lib/alerts/Message.d.ts

@@ -4,6 +4,6 @@ import '../@types/PositionAlert.js';
 import '../@types/Icon.js';
 import '../icons/helper.js';
 
-declare const Message: ({ handleClose, message, id, color, icon, iconName, timeout, customClass, closeButton, className, position, }: IMessageProps) => JSX.Element;
+declare const Message: ({ handleClose, message, id, color, icon, iconName, timeout, customClass, closeButton, className, position, pauseTimeoutOnMouseHover, }: IMessageProps) => JSX.Element;
 
 export { Message as default };

package/lib/alerts/Message.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _icons = _interopRequireDefault(require("../icons"));
+var _progress = _interopRequireDefault(require("../progress"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -40,16 +41,58 @@ const Message = _ref2 => {
     customClass = '',
     closeButton = false,
     className = 'message',
-    position = 'centerTop'
+    position = 'centerTop',
+    pauseTimeoutOnMouseHover = false
   } = _ref2;
+  const [progressBarTime, setProgressBarTime] = (0, _react.useState)(timeout - 300);
+  const [pauseTimeout, setPauseTimeout] = (0, _react.useState)(false);
+  const timeoutIdentifier = (0, _react.useRef)(null);
+  const intervalIdentifier = (0, _react.useRef)(null);
+  const handleMouseEnter = () => {
+    if (pauseTimeoutOnMouseHover) {
+      setPauseTimeout(true);
+      setProgressBarTime(prevProgressBarTime => prevProgressBarTime >= 800 ? prevProgressBarTime + 600 : prevProgressBarTime + 500);
+    }
+  };
+  const handleMouseLeave = () => {
+    if (pauseTimeoutOnMouseHover) {
+      setPauseTimeout(false);
+      setProgressBarTime(prevProgressBarTime => prevProgressBarTime >= 800 ? prevProgressBarTime - 600 : prevProgressBarTime - 500);
+    }
+  };
+  const getProgressBarType = () => customClass.replace('-', '');
   (0, _react.useEffect)(() => {
-    if (timeout > 0) {
-      setTimeout(() => {
+    if (!pauseTimeout && progressBarTime > 0) {
+      timeoutIdentifier.current = setTimeout(() => {
         handleClose(id, position);
-      }, timeout);
+      }, progressBarTime);
+      intervalIdentifier.current = setInterval(() => progressBarTime > 0 ? setProgressBarTime(prevProgressBarTime => prevProgressBarTime > 0 ? prevProgressBarTime - 100 : 0) : null, 100);
+    } else {
+      if (timeoutIdentifier.current) clearInterval(timeoutIdentifier.current);
+      if (intervalIdentifier.current) clearInterval(intervalIdentifier.current);
     }
-  }, []);
+    return () => {
+      if (timeoutIdentifier.current) clearInterval(timeoutIdentifier.current);
+      if (intervalIdentifier.current) clearInterval(intervalIdentifier.current);
+    };
+  }, [pauseTimeout]);
   return /*#__PURE__*/_react.default.createElement("div", {
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave
+  }, timeout > 0 && /*#__PURE__*/_react.default.createElement(_progress.default, {
+    min: 300,
+    max: timeout,
+    value: progressBarTime,
+    showLabel: false,
+    style: {
+      animation: 'tinRightIn 1s forwards ease-in-out',
+      margin: '0px',
+      borderRadius: '0px',
+      backgroundColor: 'rgb(234 234 234)'
+    },
+    height: "6px",
+    type: getProgressBarType()
+  }), /*#__PURE__*/_react.default.createElement("div", {
     className: getClass({
       className,
       customClass
@@ -58,7 +101,7 @@ const Message = _ref2 => {
     className: "-icon"
   }, (icon || iconName || color) && getIcon(icon, iconName, color)), /*#__PURE__*/_react.default.createElement("div", {
     className: "-messagecontent"
-  }, message), /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("p", null, message)), /*#__PURE__*/_react.default.createElement("div", {
     className: "close"
   }, closeButton || timeout === 0 ? /*#__PURE__*/_react.default.createElement("span", {
     className: "close-button",
@@ -66,6 +109,6 @@ const Message = _ref2 => {
     onKeyPress: () => {},
     tabIndex: -1,
     onClick: () => handleClose !== undefined ? handleClose(id, position) : null
-  }, "x") : null));
+  }, "x") : null)));
 };
 var _default = exports.default = Message;

package/lib/alerts/types.d.ts

@@ -29,6 +29,7 @@ interface IMessageProps {
     icon?: ReactNode | null;
     iconName?: IconNames | null;
     timeout?: number;
+    pauseTimeoutOnMouseHover?: boolean;
 }
 interface IBaseAlertProps {
     children: ReactNode;

package/lib/assets/styles/alerts.scss

@@ -8,12 +8,13 @@
 .alert-component {
   position: fixed;
   z-index: 9999999;
-  pointer-events: none;
   > .messagecontainer {
     height: 100%;
     > .lefttop, > .leftbottom, > .rightbottom, .righttop, .centertop, .centerbottom {
       position: fixed;
-      width: 370px;
+      width: auto;
+      min-width: 20%;
+      max-width: 25%;
     }
     > .lefttop {
       left: 0;
@@ -53,15 +54,11 @@
     > .rightbottom {
       right: 0;
       bottom: 0;
-      &:hover {
-        opacity: 0.3!important;
-        background-color: #E0CABB;
-      }
     }
   }
   .message {
     display: flex;
-    flex-wrap: nowrap;
+    flex-wrap: wrap;
     width: 100%;
     height: 100%;
     min-height: 80px;

package/lib/assets/styles/button.scss

@@ -38,13 +38,14 @@ $shadow-button-inset-default: inset 0 0 0 1px $default-border-color, $shadow-but
     @extend %component-splash-click;
     content: "";
     position: absolute;
-    top: 50%;
-    left: 50%;
+    top: 50% !important;
+    left: 50% !important;
     display: block;
-    width: 0;
     padding-top: 0;
     border-radius: 100%;
     background-color: rgba(236, 240, 241, 0.3);
+    width: 0;
+    height: 0 !important;
   }
   > .icon-component {
     width: 15px;
@@ -69,7 +70,7 @@ $shadow-button-inset-default: inset 0 0 0 1px $default-border-color, $shadow-but
   &:active:before {
     @extend %component-effect-click;
   }
-  &:hover {
+  &:hover, &[data-uitour="hover"] {
     background-color: $default-hover-color;
   }
   &:focus {
@@ -102,6 +103,7 @@ $shadow-button-inset-default: inset 0 0 0 1px $default-border-color, $shadow-but
     @extend %component-disabled;
     opacity: 0.7;
     border: solid 1px $font-color-disabled;
+    pointer-events: auto;
   }
   &.-shadowsdisabled {
     box-shadow: none!important;
@@ -162,7 +164,7 @@ $shadow-button-inset-default: inset 0 0 0 1px $default-border-color, $shadow-but
     border: 1px solid $primary-border-color;
     text-shadow: $shadow-text-button;
     @extend %color-effects;
-    &:hover {
+    &:hover, &[data-uitour="hover"] {
       background-color: $primary-hover-color;
     }
     &:focus {
@@ -201,7 +203,7 @@ $shadow-button-inset-default: inset 0 0 0 1px $default-border-color, $shadow-but
     border: 1px solid $warning-color;
     text-shadow: $shadow-text-button;
     @extend %color-effects;
-    &:hover {
+    &:hover, &[data-uitour="hover"] {
       background-color: $warning-hover-color;
     }
     &:focus {
@@ -220,7 +222,7 @@ $shadow-button-inset-default: inset 0 0 0 1px $default-border-color, $shadow-but
     text-shadow: $shadow-text-button;
     @extend %color-effects;
     color: $font-color-second;
-    &:hover {
+    &:hover, &[data-uitour="hover"] {
       background-color: $danger-hover-color;
     }
     &:focus {
@@ -239,7 +241,7 @@ $shadow-button-inset-default: inset 0 0 0 1px $default-border-color, $shadow-but
     text-shadow: $shadow-text-button;
     @extend %color-effects;
     color: $font-color-second;
-    &:hover {
+    &:hover, &[data-uitour="hover"] {
       background-color: $success-hover-color;
       color: $font-color-second;
     }
@@ -259,7 +261,7 @@ $shadow-button-inset-default: inset 0 0 0 1px $default-border-color, $shadow-but
     text-shadow: $shadow-text-button;
     @extend %color-effects;
     color: $font-color-second;
-    &:hover { 
+    &:hover, &[data-uitour="hover"] { 
       background-color: $info-hover-color;
       color: $font-color-second;
     }

package/lib/assets/styles/table.scss

@@ -58,11 +58,19 @@
     &.-noborder {
       border-bottom: 0;
     }
+    &.menu-column {
+      width: 100px;
+      text-align: center;
+      svg {
+        margin-left: 0;
+      }
+    }
   }
 
   > .bodycontainer > .innertable > .tbody > .trow,
   > .tbody > .trow {
-    &.-selected {
+    &.-selected,
+    &[data-uitour="selected"] {
       background-color: $component-bg-selected-color !important;
       color: $font-selected-color;
     }

package/lib/buttons/DefaultButton.js

@@ -7,11 +7,11 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _lodash = _interopRequireDefault(require("lodash"));
 var _icons = _interopRequireDefault(require("../../lib/icons"));
-var _withTooltip = _interopRequireDefault(require("../internals/withTooltip"));
+var _withTooltip = _interopRequireWildcard(require("../internals/withTooltip"));
 var _spinner = _interopRequireDefault(require("../spinner"));
 var _withDropdown = _interopRequireDefault(require("../dropdown/withDropdown"));
 var _permissionValidations = require("../permissionValidations");
-const _excluded = ["dropdown", "onClick", "disabled", "iconName", "icon", "targetRef", "tabIndex", "isLoading", "label", "showDropdown", "getDropdownPopup", "isDropdownOpened", "showIconDropdown", "content", "style", "toggleable", "activeIconColor", "iconStyle", "visible", "customClass", "className", "size", "iconAlign", "boxShadow", "transparent", "round", "permissionAttr", "skeletonize", "tooltipPosition", "errorMessage", "tooltipWidth", "isFloatMenu", "dropdownAlign", "customClassForDropdown", "buttonRef"];
+const _excluded = ["dropdown", "onClick", "disabled", "iconName", "icon", "targetRef", "tabIndex", "isLoading", "label", "showDropdown", "getDropdownPopup", "isDropdownOpened", "showIconDropdown", "content", "style", "toggleable", "activeIconColor", "iconStyle", "visible", "customClass", "className", "size", "iconAlign", "boxShadow", "transparent", "round", "permissionAttr", "skeletonize", "errorMessage", "tooltipWidth", "isFloatMenu", "dropdownAlign", "customClassForDropdown", "buttonRef", "onDeniedText"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -53,13 +53,13 @@ const DefaultButton = _ref => {
       round,
       permissionAttr,
       skeletonize,
-      tooltipPosition,
       errorMessage,
       tooltipWidth,
       isFloatMenu,
       dropdownAlign,
       customClassForDropdown,
-      buttonRef
+      buttonRef,
+      onDeniedText = 'Permissão Negada! Consulte o Administrador do sistema.'
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
   const options = [_permissionValidations.OPTIONS_ON_DENIED.disabled, _permissionValidations.OPTIONS_ON_DENIED.unvisible];
@@ -67,18 +67,30 @@ const DefaultButton = _ref => {
   const [onDenied] = (0, _react.useState)((0, _permissionValidations.actionsOnPermissionDenied)(options, permissionAttr));
   const refButton = (0, _react.useRef)(null);
   const disabledIconColor = 'rgb(193, 193, 193)';
-  const shouldDisable = () => !!onDenied.disabled || disabled;
-  const getClass = () => "button-component ".concat(className, " \n      ").concat(customClass, " \n      ").concat(transparent && '-transparent', "\n      ").concat(shouldDisable() && '-disabled', "\n      ").concat(size && "-".concat(size), "\n      ").concat(dropdown && !round && 'icon-right', " \n      ").concat(dropdown && round && 'icon-center', " \n      ").concat(iconAlign && !dropdown && "icon-".concat(iconAlign), "\n      ").concat(boxShadow ? '' : '-shadowsdisabled', "\n      ").concat(round && '-round');
+  const disabledByPermission = onDenied.disabled;
+  const isDisabled = !!onDenied.disabled || disabled;
+  const {
+    handlerSetOnDeniedText
+  } = (0, _react.useContext)(_withTooltip.TooltipContext);
+  const getClass = () => "button-component ".concat(className, "\n      ").concat(customClass, "\n      ").concat(transparent && '-transparent', "\n      ").concat(isDisabled && '-disabled', "\n      ").concat(size && "-".concat(size), "\n      ").concat(dropdown && !round && 'icon-right', "\n      ").concat(dropdown && round && 'icon-center', "\n      ").concat(iconAlign && !dropdown && "icon-".concat(iconAlign), "\n      ").concat(boxShadow ? '' : '-shadowsdisabled', "\n      ").concat(round && '-round');
+  const returnPadlockIcon = resultantStyle => /*#__PURE__*/_react.default.createElement(_icons.default, {
+    name: "padlock",
+    size: 16,
+    pointerEvents: "none",
+    color: disabledIconColor,
+    style: resultantStyle
+  });
   const getIcon = () => {
     let resultantStyle = iconStyle;
-    if (shouldDisable()) {
+    if (isDisabled) {
       resultantStyle = _objectSpread(_objectSpread({}, resultantStyle), {}, {
         fill: disabledIconColor
       });
     }
     if (dropdown && showIconDropdown) {
+      const openDropDownRule = isDropdownOpened ? 'mini_up' : 'mini_down';
       return /*#__PURE__*/_react.default.createElement(_icons.default, {
-        name: isDropdownOpened ? 'mini_up' : 'mini_down',
+        name: openDropDownRule,
         size: 16,
         customClass: "dropdown-icon",
         pointerEvents: "none",
@@ -86,12 +98,16 @@ const DefaultButton = _ref => {
       });
     }
     if (icon) {
-      if (shouldDisable()) {
+      if (disabledByPermission) {
+        return returnPadlockIcon(resultantStyle);
+      } else if (disabled) {
         return /*#__PURE__*/_react.default.createElement(_icons.default, _extends({}, icon.props, {
           color: disabledIconColor
         }));
       }
       return icon;
+    } else if (!icon && disabledByPermission) {
+      return returnPadlockIcon(resultantStyle);
     } else if (iconName) {
       return /*#__PURE__*/_react.default.createElement(_icons.default, {
         name: iconName,
@@ -103,16 +119,18 @@ const DefaultButton = _ref => {
     }
     return null;
   };
+  (0, _react.useEffect)(() => {
+    if (disabledByPermission) handlerSetOnDeniedText(onDeniedText);
+  }, [disabledByPermission]);
   if (!visible || onDenied.unvisible) return null;
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("button", _extends({}, rest, {
     style: style,
     onClick: e => {
-      if (shouldDisable()) return;
+      if (isDisabled) return;
       if (onClick) onClick(e);
       if (dropdown && showDropdown) showDropdown();
       if (onClick && toggleable) setActiveButton(!activeButton);
     },
-    disabled: shouldDisable(),
     className: "".concat(getClass(), " ").concat(activeButton ? '-toggleable' : '', " ").concat(skeletonize ? '-skeletonized' : ''),
     ref: r => {
       if (buttonRef) {

package/lib/buttons/types.d.ts

@@ -43,6 +43,7 @@ interface IButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
     closeDropdownOnClickOutside?: boolean;
     errorMessage?: string;
+    onDeniedText?: string;
 }
 
 export { IButtonProps };

package/lib/checkbox/index.js

@@ -81,6 +81,7 @@ const CheckBox = _ref => {
     "aria-checked": "false",
     onKeyPress: undefined
   }, /*#__PURE__*/_react.default.createElement("input", {
+    id: id || undefined,
     ref: r => {
       if (targetRef) targetRef(r);
       inputRef.current = r;
@@ -93,7 +94,6 @@ const CheckBox = _ref => {
     name: name,
     required: required,
     value: value,
-    id: id,
     onChange: () => {}
   }), /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_.Icon, {
     size: 12,

package/lib/form/FieldArray.js

@@ -10,7 +10,8 @@ var _withFieldHOC = _interopRequireDefault(require("./withFieldHOC"));
 var _gridlayout = _interopRequireDefault(require("../gridlayout"));
 var _fieldset = _interopRequireDefault(require("../fieldset"));
 var _helpers = require("./helpers");
-const _excluded = ["cols", "label", "bordered", "labelContainerStyle", "skipLabel", "data", "name", "handlerStoreValidators", "component", "handlerFieldChange", "handlerFieldValidade", "changePropName", "fieldErrors", "externalMessagesErrors", "handlerRemoveValidators", "validators", "valuePropName", "originalData"];
+const _excluded = ["cols", "label", "bordered", "labelContainerStyle", "skipLabel", "data", "name", "handlerStoreValidators", "component", "handlerFieldChange", "handlerFieldValidade", "changePropName", "fieldErrors", "externalMessagesErrors", "handlerRemoveValidators", "validators", "valuePropName", "originalData", "handlerSelecionados"];
+/* eslint-disable react-hooks/rules-of-hooks */
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -33,12 +34,12 @@ const getDefaultProps = (props, handleShowValidateMessages) => {
     onBlur
   } = props;
   return {
-    onBlur: e => {
+    onBlur: (0, _react.useCallback)(e => {
       if (handleShowValidateMessages) handleShowValidateMessages(true);
       if (onBlur) onBlur(e);
-    },
+    }, [handleShowValidateMessages, onBlur]),
     [valuePropName]: _lodash.default.get(data, name),
-    [changePropName]: ids => {
+    [changePropName]: (0, _react.useCallback)(ids => {
       if (handlerFieldChange) handlerFieldChange({
         target: {
           value: ids,
@@ -47,19 +48,7 @@ const getDefaultProps = (props, handleShowValidateMessages) => {
       });
       if (handlerSelecionados) handlerSelecionados(ids);
       if (handleShowValidateMessages) handleShowValidateMessages(true);
-    }
-  };
-};
-const getEvents = _ref => {
-  let {
-    onBlur,
-    handleShowValidateMessages
-  } = _ref;
-  return {
-    onBlur: e => {
-      handleShowValidateMessages(true);
-      if (onBlur) onBlur(e);
-    }
+    }, [handlerFieldChange, handlerSelecionados, handleShowValidateMessages, changePropName])
   };
 };
 const FieldArray = props => {
@@ -81,15 +70,16 @@ const FieldArray = props => {
       handlerRemoveValidators,
       validators,
       valuePropName,
-      originalData
+      originalData,
+      handlerSelecionados
     } = props,
     rest = _objectWithoutProperties(props, _excluded);
   const [showValidateMessages, setShowValidateMessages] = (0, _react.useState)(false);
   const currentValue = _lodash.default.get(data, name);
   const originalValue = _lodash.default.get(originalData, name);
-  const handleShowValidateMessages = value => {
+  const handleShowValidateMessages = (0, _react.useCallback)(value => {
     setShowValidateMessages(value);
-  };
+  }, []);
   (0, _react.useEffect)(() => {
     if (!_lodash.default.isEqual(currentValue, originalValue) && Array.isArray(currentValue) && currentValue.length > 0) {
       setShowValidateMessages(true);
@@ -105,9 +95,7 @@ const FieldArray = props => {
         customClass: "arraycontainer ".concat(bordered && '-bordered'),
         style: labelContainerStyle,
         titleCustomClass: "label"
-      }, /*#__PURE__*/_react.default.createElement(Component, _extends({}, rest, getDefaultProps(props, handleShowValidateMessages), getEvents(_objectSpread(_objectSpread({}, props), {}, {
-        handleShowValidateMessages: value => setShowValidateMessages(value)
-      })), {
+      }, /*#__PURE__*/_react.default.createElement(Component, _extends({}, rest, getDefaultProps(props, handleShowValidateMessages), {
         label: label,
         name: name,
         errorMessages: (0, _helpers.getErrorMessages)(_objectSpread(_objectSpread({}, props), {}, {
@@ -115,9 +103,7 @@ const FieldArray = props => {
         }))
       })));
     } else {
-      content = /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(Component, _extends({}, rest, getDefaultProps(props, handleShowValidateMessages), getEvents(_objectSpread(_objectSpread({}, props), {}, {
-        handleShowValidateMessages: value => setShowValidateMessages(value)
-      })), {
+      content = /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(Component, _extends({}, rest, getDefaultProps(props, handleShowValidateMessages), {
         label: label,
         name: name,
         errorMessages: (0, _helpers.getErrorMessages)(_objectSpread(_objectSpread({}, props), {}, {

package/lib/form/index.js

@@ -110,17 +110,16 @@ const Form = _ref => {
     if (updateState) setFieldErrors(currentFieldErrors);
     return Object.values(currentFieldErrors).every(value => value.length === 0);
   };
-  const onFieldChange = event => {
+  const onFieldChange = (0, _react.useCallback)(event => {
     const {
       target
     } = event;
     if (!useInternalState && onDataChange) {
-      const newData = (0, _helpers.changeValue)(dataSource, target);
-      onDataChange(newData);
+      onDataChange(prevState => (0, _helpers.changeValue)(prevState, target));
     } else {
       setData(prevState => (0, _helpers.changeValue)(prevState, target));
     }
-  };
+  }, []);
   const onValidate = (fieldName, fieldValue, validators) => {
     if (validators) {
       let currentFieldErrors = fieldErrors;
@@ -135,10 +134,10 @@ const Form = _ref => {
       setFieldErrors(currentFieldErrors);
     }
   };
-  const onFormSubmit = event => {
+  const onFormSubmit = (0, _react.useCallback)(event => {
     if (event) event.preventDefault();
     if (checkIsValid(usedData)) onSubmit(usedData);
-  };
+  }, [usedData]);
   const onReset = () => {
     if (!useInternalState && onDataChange) {
       onDataChange(JSON.parse(JSON.stringify(originalData)));
@@ -186,7 +185,7 @@ const Form = _ref => {
         onChangedData(false);
       }
     }
-    if (onDataChange) onDataChange(usedData);
+    if (onDataChange && useInternalState) onDataChange(usedData);
 
     // TODO - Usar debounce para evitar chamada a cada letra digitada
     if (onValidateForm) onValidateForm(checkIsValid(usedData, true));

package/lib/form/types.d.ts

@@ -38,12 +38,13 @@ type BaseFormProps = {
     skeletonize?: boolean;
     disabled?: boolean;
 };
+type OnDataChange = React.Dispatch<React.SetStateAction<any>>;
 type FormProps = BaseFormProps & ({
     useInternalState?: false;
-    onDataChange: (data: object) => void;
+    onDataChange: OnDataChange;
 } | {
     useInternalState: true;
-    onDataChange?: (data: object) => void;
+    onDataChange?: OnDataChange;
 });
 type Data = {
     [key: string]: any;

package/lib/inputs/mask/Cpf.js

@@ -30,7 +30,6 @@ const CpfField = props => {
   }, 300), [handlerSetComponentValidator]);
   (0, _react.useEffect)(() => debouncedOnChange.cancel, []);
   const onChange = e => {
-    // console.log('onChange >>>', props.onChange);
     if (enableValidation && e) {
       debouncedOnChange(e.target.value);
       if (props.onChange) props.onChange(e);

package/lib/internals/types.d.ts

@@ -8,9 +8,12 @@ interface WithTooltipProps {
     tooltip?: string;
     tooltipPosition?: Exclude<Position, 'center'>;
     style?: CSSProperties;
-    handlerSetOnDenied?: (onDeniedValue: OnDenied) => void;
+    handlerSetOnDeniedText?: (onDeniedValue: OnDenied) => void;
     errorMessage?: string;
 }
+interface ITooltipContext {
+    handlerSetOnDeniedText: (text: string) => void;
+}
 interface GetDisplayNameParams {
     displayName?: string;
     name?: string;
@@ -19,4 +22,4 @@ interface HasToolTipParams {
     tooltip?: string;
 }
 
-export { GetDisplayNameParams, HasToolTipParams, WithTooltipProps };
+export { GetDisplayNameParams, HasToolTipParams, ITooltipContext, WithTooltipProps };

package/lib/internals/withTooltip.d.ts

@@ -1,11 +1,12 @@
 import React__default from 'react';
-import { WithTooltipProps } from './types.js';
+import { ITooltipContext, WithTooltipProps } from './types.js';
 import '../@types/PermissionAttr.js';
 import '../@types/Position.js';
 
+declare const TooltipContext: React__default.Context<ITooltipContext>;
 declare const withTooltip: <ComponentProps extends WithTooltipProps>(WrappedComponent: React__default.ComponentType<ComponentProps>) => {
     (props: ComponentProps): JSX.Element;
     displayName: string;
 };
 
-export { withTooltip as default };
+export { TooltipContext, withTooltip as default };

package/lib/internals/withTooltip.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.TooltipContext = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _tooltip = _interopRequireDefault(require("../tooltip"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -17,6 +17,7 @@ const hasTooltip = _ref => {
   } = _ref;
   return tooltip;
 };
+const TooltipContext = exports.TooltipContext = /*#__PURE__*/_react.default.createContext({});
 const getDisplayName = _ref2 => {
   let {
     displayName,
@@ -34,6 +35,7 @@ const withTooltip = WrappedComponent => {
       errorMessage
     } = props;
     const [stateTooltipPosition, setStateTooltipPosition] = (0, _react.useState)(tooltipPosition);
+    const [onDeniedText, setOnDeniedText] = (0, _react.useState)('');
     const [tooltipStyle, setTooltipStyle] = (0, _react.useState)('');
     const [showTooltip, setShowTooltip] = (0, _react.useState)(false);
     const [tooltipDimensions, setTooltipDimensions] = (0, _react.useState)({
@@ -54,7 +56,7 @@ const withTooltip = WrappedComponent => {
       setShowTooltip(false);
     };
     (0, _react.useEffect)(() => {
-      if (hasTooltip(props)) {
+      if (hasTooltip(props) || onDeniedText) {
         if (errorMessage) {
           setShowTooltip(true);
         } else {
@@ -67,7 +69,7 @@ const withTooltip = WrappedComponent => {
         }
       }
       return () => {
-        if (hasTooltip(props)) {
+        if (hasTooltip(props) || onDeniedText) {
           document.removeEventListener('mouseover', onMouseOver);
           document.removeEventListener('scroll', onAnyScroll, true);
           if (targetElement && targetElement.current) {
@@ -75,7 +77,7 @@ const withTooltip = WrappedComponent => {
           }
         }
       };
-    }, [errorMessage, tooltip]);
+    }, [errorMessage, tooltip, onDeniedText]);
     (0, _react.useEffect)(() => {
       if (targetElement.current && tooltipElement.current) {
         const {
@@ -134,9 +136,9 @@ const withTooltip = WrappedComponent => {
       setStateTooltipPosition(tooltipPosition);
     }, [window.scrollY, window.scrollX, window.innerWidth]);
     const getTooltip = () => {
-      if (tooltip) {
+      if (tooltip || onDeniedText) {
         return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
-          text: tooltip,
+          text: onDeniedText || tooltip,
           textError: errorMessage,
           tooltipRef: tooltipElement,
           style: tooltipStyle,
@@ -150,8 +152,17 @@ const withTooltip = WrappedComponent => {
     const getTarget = targetEl => {
       if (!targetElement.current) targetElement.current = targetEl;
     };
-    if (!hasTooltip(props)) return /*#__PURE__*/_react.default.createElement(WrappedComponent, props);
-    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(WrappedComponent, _extends({}, props, {
+    const contextValues = {
+      handlerSetOnDeniedText: setOnDeniedText
+    };
+    if (!hasTooltip(props) && !onDeniedText) {
+      return /*#__PURE__*/_react.default.createElement(TooltipContext.Provider, {
+        value: contextValues
+      }, /*#__PURE__*/_react.default.createElement(WrappedComponent, props));
+    }
+    return /*#__PURE__*/_react.default.createElement(TooltipContext.Provider, {
+      value: contextValues
+    }, /*#__PURE__*/_react.default.createElement(WrappedComponent, _extends({}, props, {
       targetRef: getTarget
     })), showTooltip && getTooltip());
   };