linear-react-components-ui 1.1.20-beta.10 → 1.1.20-beta.12

package/lib/dropdown/Popup.js

@@ -7,28 +7,46 @@ exports.default = void 0;
 var _react = require("react");
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _uuid = require("uuid");
-const _excluded = ["id", "customClassForDropdown", "align", "isFloatMenu", "topPosition", "leftPosition", "rightPosition", "minWidth"];
+const _excluded = ["id", "customClassForDropdown", "align", "isFloatMenu", "topPosition", "leftPosition", "rightPosition", "minWidth", "targetRef"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
-const getCalendarDropdownStyle = _ref => {
+const getDropdownStyles = _ref => {
   let {
-    topPosition,
-    leftPosition,
-    rightPosition,
     align,
     isFloatMenu,
-    minWidth
+    minWidth,
+    container,
+    target
   } = _ref;
-  let style = "top: ".concat(topPosition + (isFloatMenu ? 6 : 2), "px; min-width: ").concat(minWidth, "px;");
+  if (!container || !target) return '';
+  const targetDimensions = target.getBoundingClientRect();
+  const rightPosition = !isFloatMenu ? window.innerWidth - targetDimensions.x - targetDimensions.width - 4 : undefined;
+  const leftPosition = targetDimensions.left;
+  let topPosition = targetDimensions.top + window.scrollY + targetDimensions.height;
+  let top = topPosition + (isFloatMenu ? 6 : 2);
+  let maxHeight = undefined;
+  let showScroll = false;
+  const isOverflowing = top + container.scrollHeight > window.innerHeight;
+  if (isOverflowing) {
+    const targetPosition = targetDimensions.top;
+    const containerHeight = container.scrollHeight;
+    showScroll = containerHeight > targetPosition;
+    maxHeight = showScroll ? targetPosition - 10 : containerHeight;
+    top = top - maxHeight - targetDimensions.height - (isFloatMenu ? 6 : 2) - 5;
+  }
+  let style = `top: ${top}px; min-width: ${minWidth}px;`;
+  if (showScroll) style += `max-height: ${maxHeight}px; overflow-y: scroll;`;
   if (align === 'left') {
-    style += "left: ".concat(leftPosition, "px;");
+    style += `left: ${leftPosition}px;`;
   } else if (align === 'right') {
-    style += "right: ".concat(rightPosition, "px;");
+    style += `right: ${rightPosition}px;`;
   }
   return style;
 };
-const body = document.getElementsByTagName('body')[0];
+const {
+  body
+} = document;
 const DropdownPopup = _ref2 => {
   let {
       id,
@@ -38,28 +56,31 @@ const DropdownPopup = _ref2 => {
       topPosition = 0,
       leftPosition = 0,
       rightPosition = 0,
-      minWidth = 0
+      minWidth = 0,
+      targetRef
     } = _ref2,
     props = _objectWithoutProperties(_ref2, _excluded);
   const popup = (0, _react.useRef)(document.createElement('div'));
-  popup.current.className = "dropdown-component ".concat(customClassForDropdown);
+  popup.current.className = `dropdown-component ${customClassForDropdown}`;
   popup.current.dataset.testid = 'dropdown-component';
-  popup.current.style.cssText = getCalendarDropdownStyle({
-    topPosition,
-    leftPosition,
-    rightPosition,
-    align,
-    isFloatMenu,
-    minWidth
-  });
   if (popup && popup.current) {
     const modalContainers = document.body.getElementsByClassName('modalcontainer');
     const lastModalContainer = modalContainers[modalContainers.length - 1];
-    popup.current.style.zIndex = "".concat(modalContainers.length ? Number(lastModalContainer.style.zIndex) + 1 : 99999);
+    popup.current.style.zIndex = `${modalContainers.length ? Number(lastModalContainer.style.zIndex) + 1 : 99999}`;
   }
   (0, _react.useEffect)(() => {
     body.appendChild(popup.current);
-    popup.current.id = id || "dropdown-component-".concat((0, _uuid.v1)());
+    popup.current.id = id || `dropdown-component-${(0, _uuid.v1)()}`;
+    popup.current.style.cssText = getDropdownStyles({
+      topPosition,
+      leftPosition,
+      rightPosition,
+      align,
+      isFloatMenu,
+      minWidth,
+      container: popup.current,
+      target: targetRef
+    });
     return () => {
       body.removeChild(popup.current);
     };

package/lib/dropdown/helper.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getDropdownItemCssClass = exports.contentClass = void 0;
-const contentClass = showClearButton => "content ".concat(showClearButton ? '' : 'noclear');
+const contentClass = showClearButton => `content ${showClearButton ? '' : 'noclear'}`;
 exports.contentClass = contentClass;
 const getDropdownItemCssClass = (selected, disabled, striped) => {
   let className = 'item';

package/lib/dropdown/types.d.ts

@@ -10,6 +10,7 @@ interface WithDropdownProps {
     closeDropdownOnClickOutside?: boolean;
     showDropdown?: () => void;
     isFloatMenu?: boolean;
+    handlerClose?: (cb: () => void) => void;
 }
 interface WrappedComponentProps extends WithDropdownProps {
     getDropdownPopup?: (ref: Ref<HTMLElement | null>) => ReactElement;
@@ -31,14 +32,17 @@ interface IPopUpProps {
     leftPosition?: number;
     rightPosition?: number;
     minWidth?: number;
+    targetRef?: HTMLElement;
 }
-interface GetCalendarDropdownStyleParams {
+interface GetDropdownStyleParams {
     align: 'left' | 'right';
     minWidth: number;
     isFloatMenu: boolean;
     topPosition: number;
     leftPosition: number;
     rightPosition: number;
+    container?: HTMLDivElement;
+    target?: HTMLElement;
 }
 
-export { GetCalendarDropdownStyleParams, GetDisplayNameParams, IPopUpProps, WithDropdownContextProps, WithDropdownProps, WrappedComponentProps };
+export { GetDisplayNameParams, GetDropdownStyleParams, IPopUpProps, WithDropdownContextProps, WithDropdownProps, WrappedComponentProps };

package/lib/dropdown/withDropdown.js

@@ -20,6 +20,7 @@ const withDropdown = WrappedComponent => {
       showDropdown,
       dropdown,
       closeDropdownOnClickOutside = true,
+      handlerClose,
       customClassForDropdown,
       children,
       dropdownAlign = 'left',
@@ -38,7 +39,7 @@ const withDropdown = WrappedComponent => {
       const {
         target
       } = event;
-      if (popupRef !== null && popupRef !== void 0 && popupRef.current && target !== (popupRef === null || popupRef === void 0 ? void 0 : popupRef.current) && !event.composedPath().includes(popupRef.current) && wrappedComponentRef.current !== target) {
+      if (popupRef?.current && target !== popupRef?.current && !event.composedPath().includes(popupRef.current) && wrappedComponentRef.current !== target) {
         setOpened(false);
       }
     };
@@ -48,11 +49,8 @@ const withDropdown = WrappedComponent => {
     const getDropdown = targetRef => {
       if (!targetRef || !opened) return null;
       wrappedComponentRef.current = targetRef;
-      const targetDimensions = targetRef.getBoundingClientRect();
       return /*#__PURE__*/_react.default.createElement(_Popup.default, {
-        topPosition: targetDimensions.top + window.scrollY + targetDimensions.height,
-        rightPosition: !isFloatMenu ? window.innerWidth - targetDimensions.x - targetDimensions.width - 4 : undefined,
-        leftPosition: targetDimensions.left,
+        targetRef: targetRef,
         align: dropdownAlign,
         customClassForDropdown: customClassForDropdown,
         isFloatMenu: isFloatMenu
@@ -73,6 +71,9 @@ const withDropdown = WrappedComponent => {
         }
       };
     }, []);
+    (0, _react.useEffect)(() => {
+      if (handlerClose) handlerClose(() => setOpened(false));
+    }, [handlerClose]);
     const contextValues = {
       handleDropdownClose: onDropdownClick
     };
@@ -86,7 +87,7 @@ const withDropdown = WrappedComponent => {
       value: contextValues
     }, /*#__PURE__*/_react.default.createElement(WrappedComponent, _extends({}, props, newProps)));
   };
-  EnhancedComponent.displayName = "withDropdown(".concat(getDisplayName(WrappedComponent), ")");
+  EnhancedComponent.displayName = `withDropdown(${getDisplayName(WrappedComponent)})`;
   return EnhancedComponent;
 };
 var _default = exports.default = withDropdown;

package/lib/fieldset/index.js

@@ -43,9 +43,9 @@ const Fieldset = props => {
       customClass,
       hasError
     } = _ref;
-    let cssClass = "fieldset-component ".concat(customClass);
-    if (type) cssClass = "".concat(cssClass, " -").concat(type);
-    if (hasError) cssClass = "".concat(cssClass, " -witherror");
+    let cssClass = `fieldset-component ${customClass}`;
+    if (type) cssClass = `${cssClass} -${type}`;
+    if (hasError) cssClass = `${cssClass} -witherror`;
     return cssClass;
   };
   const getContentStyle = _ref2 => {
@@ -55,11 +55,11 @@ const Fieldset = props => {
     } = _ref2;
     if (template === 'rows') {
       return {
-        gridTemplateRows: "repeat(".concat(rowsCount, ", 1fr)")
+        gridTemplateRows: `repeat(${rowsCount}, 1fr)`
       };
     } else if (template === 'columns') {
       return {
-        gridTemplateColumns: "repeat(".concat(colsCount, ", 1fr)")
+        gridTemplateColumns: `repeat(${colsCount}, 1fr)`
       };
     }
     return {};
@@ -70,9 +70,9 @@ const Fieldset = props => {
   }, onDenied.hideContent ? /*#__PURE__*/_react.default.createElement(_noPermission.default, null) : /*#__PURE__*/_react.default.createElement(_react.Fragment, null, title && /*#__PURE__*/_react.default.createElement("legend", {
     style: styleTitle,
     align: titleAlign,
-    className: "legend ".concat(titleCustomClass)
+    className: `legend ${titleCustomClass}`
   }, leftElements, title, rightElements), /*#__PURE__*/_react.default.createElement("div", {
-    className: "contentfieldset -template".concat(template, " "),
+    className: `contentfieldset -template${template} `,
     style: Object.assign(getContentStyle(props), styleContent)
   }, children)));
   if (onDenied.unvisible) return null;

package/lib/form/Field.js

@@ -8,7 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _lodash = _interopRequireDefault(require("lodash"));
 var _withFieldHOC = _interopRequireDefault(require("./withFieldHOC"));
 var _helpers = require("./helpers");
-const _excluded = ["handlerFieldChange", "handlerFieldValidate", "onChange", "onBlur", "name", "validators", "data", "fieldErrors", "handlerStoreValidators", "handlerRemoveValidators", "component", "externalFieldErrors", "originalData"];
+const _excluded = ["handlerFieldChange", "handlerFieldValidade", "onChange", "onBlur", "name", "validators", "data", "fieldErrors", "handlerStoreValidators", "handlerRemoveValidators", "component", "externalFieldErrors", "originalData"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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; }
@@ -25,23 +25,25 @@ const getEvents = _ref => {
     validators = [],
     name,
     onBlur,
-    handlerFieldValidate,
+    handlerFieldValidade,
     validatorFromComponent,
     handlerFieldChange,
-    onChange
+    onChange,
+    handleShowValidateMessages
   } = _ref;
   if (!(validators || validatorFromComponent || onBlur || onChange)) return {};
   const validatorsArray = (0, _helpers.getValidatorsArray)(validators, validatorFromComponent);
   return {
     onBlur: e => {
-      if (validatorsArray && e.target && handlerFieldValidate) {
-        handlerFieldValidate(name, e.target.value, validatorsArray);
+      if (validatorsArray && e.target && handlerFieldValidade) {
+        handlerFieldValidade(name, e.target.value, validatorsArray);
+        handleShowValidateMessages(true);
       }
       if (onBlur) onBlur(e);
     },
     onChange: e => {
-      if (validatorsArray && e.target && handlerFieldValidate) {
-        handlerFieldValidate(name, e.target.value, validatorsArray);
+      if (validatorsArray && e.target && handlerFieldValidade) {
+        handlerFieldValidade(name, e.target.value, validatorsArray);
       }
       if (handlerFieldChange) handlerFieldChange(e);
       if (onChange) onChange(e);
@@ -80,7 +82,7 @@ const getCustomProps = (props, handlerSetComponentValidator) => {
 const Field = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
   const {
       handlerFieldChange,
-      handlerFieldValidate,
+      handlerFieldValidade,
       onChange,
       onBlur,
       name,
@@ -94,23 +96,34 @@ const Field = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
       originalData
     } = props,
     rest = _objectWithoutProperties(props, _excluded);
+  const [showValidateMessages, setShowValidateMessages] = (0, _react.useState)(false);
   const {
     handlerSetValidatorFromComponent,
     validatorFromComponent
   } = (0, _react.useContext)(_helpers.withFieldContext);
+  const currentValue = _lodash.default.get(data, name);
+  const originalValue = _lodash.default.get(originalData, name);
+  (0, _react.useEffect)(() => {
+    if (currentValue && currentValue !== originalValue && (!!currentValue || currentValue === 0 || Array.isArray(currentValue) && currentValue.length > 0)) {
+      setShowValidateMessages(true);
+    } else if (_lodash.default.isEmpty(data) || _lodash.default.every(data, _lodash.default.isEmpty) || currentValue === originalValue) {
+      setShowValidateMessages(false);
+    }
+  }, [currentValue, originalValue]);
   return /*#__PURE__*/_react.default.createElement(Component, _extends({}, rest, getEvents({
     name,
     validators,
     onBlur,
     validatorFromComponent,
-    handlerFieldValidate,
+    handlerFieldValidade,
     handlerFieldChange,
-    onChange
+    onChange,
+    handleShowValidateMessages: value => setShowValidateMessages(value)
   }), getCustomProps(props, handlerSetValidatorFromComponent), {
     ref: ref,
     name: name,
     errorMessages: (0, _helpers.getErrorMessages)(_objectSpread(_objectSpread({}, props), {}, {
-      fieldErrors: props.fieldErrors
+      fieldErrors: showValidateMessages ? props.fieldErrors : {}
     }))
   }));
 });

package/lib/form/FieldArray.js

@@ -10,7 +10,7 @@ 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", "handlerFieldValidate", "changePropName", "fieldErrors", "externalMessagesErrors", "handlerRemoveValidators", "validators", "valuePropName", "originalData", "handlerSelecionados"];
+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(e) { return e && e.__esModule ? e : { default: e }; }
 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); }
@@ -23,7 +23,7 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
-const getDefaultProps = props => {
+const getDefaultProps = (props, handleShowValidateMessages) => {
   const {
     valuePropName = 'value',
     changePropName = 'onSelect',
@@ -35,8 +35,9 @@ const getDefaultProps = props => {
   } = props;
   return {
     onBlur: (0, _react.useCallback)(e => {
+      if (handleShowValidateMessages) handleShowValidateMessages(true);
       if (onBlur) onBlur(e);
-    }, [onBlur]),
+    }, [handleShowValidateMessages, onBlur]),
     [valuePropName]: _lodash.default.get(data, name),
     [changePropName]: (0, _react.useCallback)(ids => {
       if (handlerFieldChange) handlerFieldChange({
@@ -46,7 +47,8 @@ const getDefaultProps = props => {
         }
       });
       if (handlerSelecionados) handlerSelecionados(ids);
-    }, [handlerFieldChange, handlerSelecionados, changePropName])
+      if (handleShowValidateMessages) handleShowValidateMessages(true);
+    }, [handlerFieldChange, handlerSelecionados, handleShowValidateMessages, changePropName])
   };
 };
 const FieldArray = props => {
@@ -61,7 +63,7 @@ const FieldArray = props => {
       handlerStoreValidators,
       component: Component,
       handlerFieldChange,
-      handlerFieldValidate,
+      handlerFieldValidade,
       changePropName,
       fieldErrors,
       externalMessagesErrors,
@@ -72,27 +74,40 @@ const FieldArray = props => {
       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 = (0, _react.useCallback)(value => {
+    setShowValidateMessages(value);
+  }, []);
+  (0, _react.useEffect)(() => {
+    if (!_lodash.default.isEqual(currentValue, originalValue) && Array.isArray(currentValue) && currentValue.length > 0) {
+      setShowValidateMessages(true);
+    } else if (_lodash.default.isEmpty(data) || _lodash.default.every(data, _lodash.default.isEmpty) || _lodash.default.isEqual(currentValue, originalValue)) {
+      setShowValidateMessages(false);
+    }
+  }, [currentValue]);
   let content = null;
   if (Component) {
     if (!skipLabel && label) {
       content = /*#__PURE__*/_react.default.createElement(_fieldset.default, {
         title: label,
-        customClass: "arraycontainer ".concat(bordered && '-bordered'),
+        customClass: `arraycontainer ${bordered && '-bordered'}`,
         style: labelContainerStyle,
         titleCustomClass: "label"
-      }, /*#__PURE__*/_react.default.createElement(Component, _extends({}, rest, getDefaultProps(props), {
+      }, /*#__PURE__*/_react.default.createElement(Component, _extends({}, rest, getDefaultProps(props, handleShowValidateMessages), {
         label: label,
         name: name,
         errorMessages: (0, _helpers.getErrorMessages)(_objectSpread(_objectSpread({}, props), {}, {
-          fieldErrors: props.fieldErrors
+          fieldErrors: showValidateMessages ? props.fieldErrors : {}
         }))
       })));
     } else {
-      content = /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(Component, _extends({}, rest, getDefaultProps(props), {
+      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), {}, {
-          fieldErrors: props.fieldErrors
+          fieldErrors: showValidateMessages ? props.fieldErrors : {}
         }))
       })));
     }

package/lib/form/FieldNumber.js

@@ -25,26 +25,29 @@ const getEventProps = _ref => {
     onBlur,
     onKeyDown,
     onChange,
-    handlerFieldValidate,
+    handlerFieldValidade,
     handlerFieldChange,
+    handleShowValidateMessages,
     component
   } = _ref;
   return {
     onBlur: e => {
-      if ((component === null || component === void 0 ? void 0 : component.name) !== 'NumberField' && handlerFieldChange) handlerFieldChange(e);
-      if (validators && handlerFieldValidate) handlerFieldValidate(name, e.target.value, validators);
+      if (handlerFieldChange) handlerFieldChange(e);
+      if (validators && handlerFieldValidade) handlerFieldValidade(name, e.target.value, validators);
       if (onBlur) onBlur(e);
+      handleShowValidateMessages(true);
     },
     onKeyDown: e => {
       if ([constants.keyCodes.ENTER].includes(e.keyCode)) {
-        if (validators) handlerFieldValidate === null || handlerFieldValidate === void 0 ? void 0 : handlerFieldValidate(name, e.target.value, validators);
+        if (validators) handlerFieldValidade?.(name, e.target.value, validators);
         if (onKeyDown) onKeyDown(e);
+        handleShowValidateMessages(true);
       }
     },
     onChange: e => {
-      if ((component === null || component === void 0 ? void 0 : component.name) === 'NumberField') {
-        if (validators && e.target && handlerFieldValidate) {
-          handlerFieldValidate(name, e.target.value, validators);
+      if (component?.name === 'NumberField') {
+        if (validators && e.target && handlerFieldValidade) {
+          handlerFieldValidade(name, e.target.value, validators);
         }
         if (handlerFieldChange) handlerFieldChange(e);
         if (onChange) onChange(e);
@@ -61,9 +64,18 @@ const FieldMask = props => {
   const currentValue = _lodash.default.get(data, name);
   const [showValidateMessages, setShowValidateMessages] = (0, _react.useState)(false);
   const originalValue = _lodash.default.get(originalData, name);
-  return /*#__PURE__*/_react.default.createElement(props.component, _extends({}, props, getEventProps(_objectSpread({}, props)), {
+  (0, _react.useEffect)(() => {
+    if (currentValue && currentValue !== originalValue && !!currentValue) {
+      setShowValidateMessages(true);
+    } else if (_lodash.default.isEmpty(data) || _lodash.default.every(data, _lodash.default.isEmpty) || currentValue === originalValue) {
+      setShowValidateMessages(false);
+    }
+  }, [currentValue, originalValue]);
+  return /*#__PURE__*/_react.default.createElement(props.component, _extends({}, props, getEventProps(_objectSpread(_objectSpread({}, props), {}, {
+    handleShowValidateMessages: value => setShowValidateMessages(value)
+  })), {
     errorMessages: (0, _helpers.getErrorMessages)(_objectSpread(_objectSpread({}, props), {}, {
-      fieldErrors: props.fieldErrors
+      fieldErrors: showValidateMessages ? props.fieldErrors : {}
     })),
     value: currentValue
   }));

package/lib/form/FieldPeriod.js

@@ -19,7 +19,7 @@ const FieldPeriod = props => {
     nameDateInitial,
     nameDateFinal,
     handlerFieldChange,
-    handlerFieldValidate: handlerFieldValidate,
+    handlerFieldValidade,
     fieldErrors,
     externalMessagesErrors,
     onChange,
@@ -55,8 +55,8 @@ const FieldPeriod = props => {
           initial,
           final
         } = _ref;
-        if (validators && handlerFieldValidate) {
-          handlerFieldValidate(nameDateInitial, {
+        if (validators && handlerFieldValidade) {
+          handlerFieldValidade(nameDateInitial, {
             [nameDateInitial]: initial,
             [nameDateFinal]: final
           }, validators);
@@ -79,8 +79,8 @@ const FieldPeriod = props => {
         });
       },
       value: {
-        initial: _lodash.default.get(data, "".concat(name, ".").concat(nameDateInitial)),
-        final: _lodash.default.get(data, "".concat(name, ".").concat(nameDateFinal))
+        initial: _lodash.default.get(data, `${name}.${nameDateInitial}`),
+        final: _lodash.default.get(data, `${name}.${nameDateFinal}`)
       }
     }));
   }

package/lib/form/index.js

@@ -75,7 +75,6 @@ const Form = _ref => {
   const [fieldErrors, setFieldErrors] = (0, _react.useState)({});
   const fieldsValidators = (0, _react.useRef)({});
   const [oldFieldsValidatorsQuantity, setOldFieldsValidatorsQuantity] = (0, _react.useState)(0);
-  const [isValid, setIsValid] = (0, _react.useState)(false);
   const context = (0, _react.useContext)(_withFormSecurity.FormSecurityContext);
   const usedData = useInternalState ? data : dataSource;
   const getValidatesErrorMessages = (validators, fieldValue) => {
@@ -108,9 +107,8 @@ const Form = _ref => {
     let updateState = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
     let currentValidators = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
     const currentFieldErrors = getErrorMessages(currentData, currentValidators || fieldsValidators.current);
-    const isValidNow = Object.values(currentFieldErrors).every(value => value.length === 0);
-    if (updateState) setIsValid(isValidNow);
-    return isValidNow;
+    if (updateState) setFieldErrors(currentFieldErrors);
+    return Object.values(currentFieldErrors).every(value => value.length === 0);
   };
   const onFieldChange = (0, _react.useCallback)(event => {
     const {
@@ -237,7 +235,7 @@ const Form = _ref => {
     }
   }, [submitOnPressEnterKey]);
   (0, _react.useEffect)(() => {
-    const validatorsQuantity = Object.values(fieldsValidators.current).reduce((acc, currentValue) => acc + ((currentValue === null || currentValue === void 0 ? void 0 : currentValue.length) || 0), 0);
+    const validatorsQuantity = Object.values(fieldsValidators.current).reduce((acc, currentValue) => acc + (currentValue?.length || 0), 0);
     if (fieldsValidators.current && onValidateForm && oldFieldsValidatorsQuantity !== validatorsQuantity) {
       setOldFieldsValidatorsQuantity(validatorsQuantity);
       onValidateForm(checkIsValid(usedData, true, fieldsValidators.current));
@@ -246,7 +244,7 @@ const Form = _ref => {
   const contextValues = {
     skeletonize,
     handlerFieldChange: onFieldChange,
-    handlerFieldValidate: onValidate,
+    handlerFieldValidade: onValidate,
     handlerStoreValidators: (fieldName, fieldValidates) => {
       fieldsValidators.current = _objectSpread(_objectSpread({}, fieldsValidators.current), {}, {
         [fieldName]: fieldValidates
@@ -256,8 +254,7 @@ const Form = _ref => {
     data: useInternalState ? data : dataSource,
     originalData,
     fieldErrors,
-    externalFieldErrors,
-    isFormValid: isValid
+    externalFieldErrors
   };
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_helpers.FormContext.Provider, {
     value: contextValues
@@ -265,7 +262,7 @@ const Form = _ref => {
     style: style
   }, formProps(), {
     role: "presentation",
-    className: "form-component ".concat(customClass)
+    className: `form-component ${customClass}`
   }), children)), /*#__PURE__*/_react.default.createElement(_dialog.DialogQuestion, {
     zIndex: "99999999",
     title: securityTitle || 'Dados Alterados',

package/lib/form/types.d.ts

@@ -57,7 +57,7 @@ interface IFieldProps extends WithFieldProps {
     value?: string;
     label?: string;
     handlerFieldChange?: (event: ChangeEvent<HTMLInputElement> | CustomKeyboardEvent) => ChangeEvent;
-    handlerFieldValidate?: (name: string, value: string, validatorsArray: Validator[] | Validator) => void;
+    handlerFieldValidade?: (name: string, value: string, validatorsArray: Validator[] | Validator) => void;
     component: ComponentType<any>;
     componentType?: 'Radio' | 'Checkbox';
     onChange?: (event: ChangeEvent) => ChangeEvent;
@@ -86,10 +86,6 @@ interface IFieldProps extends WithFieldProps {
     autoCompleteMask?: 'left' | 'right';
     mask?: string;
     removeZeroLeft?: boolean;
-    textAlign?: 'left' | 'right';
-    disabled?: boolean;
-    displayCurrencySymbol?: boolean;
-    currencySymbol?: string;
 }
 interface CustomEvent {
     target: {
@@ -124,7 +120,7 @@ interface IFieldArrayProps extends WithFieldProps {
     multiple?: boolean;
     disabled?: boolean;
     onBlur?: (event: ChangeEvent<HTMLInputElement>) => void;
-    handlerFieldValidate?: (name: string, value: string, validatorsArray: Validator[] | Validator) => void;
+    handlerFieldValidade?: (name: string, value: string, validatorsArray: Validator[] | Validator) => void;
     required?: boolean;
 }
 type PeriodChangeEvent = {
@@ -156,21 +152,20 @@ interface IFieldPeriodProps extends WithFieldProps {
     externalFieldErrors?: {
         [name: string]: string[];
     };
-    handlerFieldValidate?: (name: string, value: object, validatorsArray: PeriodValidator[] | PeriodValidator) => void;
+    handlerFieldValidade?: (name: string, value: object, validatorsArray: PeriodValidator[] | PeriodValidator) => void;
     onChange?: (event: PeriodChangeEvent) => PeriodChangeEvent;
     gridLayout?: string;
 }
 interface FormContextProps {
     skeletonize?: boolean;
     handlerFieldChange: (event: OnFielChangeEvent) => void;
-    handlerFieldValidate: (name: string, value: string, validatorsArray: Validator[] | Validator) => void;
+    handlerFieldValidade: (name: string, value: string, validatorsArray: Validator[] | Validator) => void;
     handlerStoreValidators: (fieldName: string, fieldValidates: Validator) => void;
     handlerRemoveValidators: (fieldName: string) => void;
     data: object;
     originalData: object;
     fieldErrors: object;
     externalFieldErrors?: object;
-    isFormValid?: boolean;
 }
 interface WithFieldProps {
     name: string;
@@ -205,9 +200,10 @@ interface IEventParams {
     onBlur?: (event: ChangeEvent<HTMLInputElement>) => void;
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
     onKeyDown?: (event: CustomKeyboardEvent) => void;
-    handlerFieldValidate?: (name: string, value: string, validatorsArray: Validator[] | Validator) => void;
+    handlerFieldValidade?: (name: string, value: string, validatorsArray: Validator[] | Validator) => void;
     handlerFieldChange?: (event: ChangeEvent<HTMLInputElement> | CustomKeyboardEvent) => void;
     validatorFromComponent?: Validator | Validator[];
+    handleShowValidateMessages: (value: boolean) => void;
     component?: ComponentType<any>;
 }
 interface IGetErrorMessagesParams {

package/lib/form/withFieldHOC.js

@@ -45,7 +45,7 @@ const withFieldHOC = WrappedComponent => {
     return /*#__PURE__*/_react.default.createElement(_helpers.FormContext.Consumer, null, _ref => {
       let {
         handlerFieldChange,
-        handlerFieldValidate: handlerFieldValidate,
+        handlerFieldValidade,
         data,
         fieldErrors,
         externalFieldErrors,
@@ -56,7 +56,7 @@ const withFieldHOC = WrappedComponent => {
       return /*#__PURE__*/_react.default.createElement(EnhancedComponent, _extends({}, props, {
         skeletonize: skeletonize,
         handlerFieldChange: handlerFieldChange,
-        handlerFieldValidate: handlerFieldValidate,
+        handlerFieldValidade: handlerFieldValidade,
         handlerStoreValidators: handlerStoreValidators,
         handlerRemoveValidators: handlerRemoveValidators,
         data: data,