linear-react-components-ui 1.1.21-beta.4 → 1.1.21-beta.6

package/lib/calendar/base/index.d.ts

@@ -1,4 +1,5 @@
 import { ICalendarProps } from '../types.js';
+import 'react';
 import 'moment';
 import '../../@types/ColorStyles.js';
 

package/lib/calendar/base/index.js

@@ -5,14 +5,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _uuid = require("uuid");
 var _moment = _interopRequireDefault(require("moment"));
 var _Month = _interopRequireDefault(require("./Month"));
 var _buttons = _interopRequireDefault(require("../../buttons"));
+var _gridlayout = _interopRequireDefault(require("../../gridlayout"));
 var _helpers = require("./helpers");
 require("../../assets/styles/calendar.scss");
 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; }
+const arrowKeys = ['ArrowUp', 'ArrowRight', 'ArrowDown', 'ArrowLeft'];
 const Calendar = props => {
   const {
     currentDate = (0, _moment.default)(),
@@ -20,12 +23,14 @@ const Calendar = props => {
     drawGridLines = false,
     colorStyle,
     unpadding = false,
-    customClass
+    customClass,
+    gridLayout,
+    currentDateButton,
+    calendarContainer
   } = props;
+  const currentMonth = (0, _react.useRef)(null);
+  const currentCalendarRef = (0, _react.useRef)(null);
   const [dataAtual, setDataAtual] = (0, _react.useState)((0, _helpers.validDate)(currentDate));
-  (0, _react.useEffect)(() => {
-    setDataAtual((0, _helpers.validDate)(currentDate));
-  }, []);
   const onDateChangeFunction = date => {
     if (onDateChange) onDateChange(date);
     setDataAtual(date);
@@ -38,12 +43,46 @@ const Calendar = props => {
     const currentDateClone = dataAtual.clone();
     setDataAtual(currentDateClone.add(1, 'month'));
   };
+  const navigateWithArrows = event => {
+    const sourceTarget = event.target;
+    const daysOfMonth = currentMonth.current?.getElementsByClassName('daybutton');
+    let indexCurrentDay = 0;
+    if (daysOfMonth.length) {
+      Array.from(daysOfMonth).find((dayButton, index) => {
+        if (dayButton && dayButton.id === sourceTarget.id) indexCurrentDay = index;
+      });
+    }
+    const element = {
+      ArrowUp: daysOfMonth[indexCurrentDay - 7],
+      ArrowRight: daysOfMonth[indexCurrentDay + 1],
+      ArrowDown: daysOfMonth[indexCurrentDay + 7],
+      ArrowLeft: daysOfMonth[indexCurrentDay - 1]
+    }[event.code];
+    if (element) element.focus();
+  };
   const contextValues = {
     handleDateChange: onDateChangeFunction
   };
-  return /*#__PURE__*/_react.default.createElement(_helpers.CalendarContext.Provider, {
-    value: contextValues
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  (0, _react.useEffect)(() => {
+    calendarContainer?.(currentCalendarRef?.current);
+    setDataAtual((0, _helpers.validDate)(currentDate));
+    document.addEventListener('keydown', event => {
+      if (event && event.code && arrowKeys.includes(event.code) && currentCalendarRef.current && currentCalendarRef.current.contains(document.activeElement) && currentMonth.current && currentMonth.current.contains(document.activeElement)) {
+        navigateWithArrows(event);
+        event.stopPropagation();
+        event.preventDefault();
+      }
+    });
+    return () => {
+      document.removeEventListener('keydown', () => {});
+    };
+  }, []);
+  (0, _react.useEffect)(() => {
+    const daysOfMonth = currentMonth.current?.getElementsByClassName('-selectedday')[0];
+    currentDateButton?.(daysOfMonth.firstChild);
+  }, [currentDate]);
+  const component = /*#__PURE__*/_react.default.createElement("div", {
+    ref: currentCalendarRef,
     className: (0, _helpers.getCalendarCssClass)({
       unpadding,
       drawGridLines,
@@ -53,27 +92,36 @@ const Calendar = props => {
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "calendarheader"
   }, /*#__PURE__*/_react.default.createElement(_buttons.default, {
-    iconName: "arrow_left",
+    id: (0, _uuid.v1)(),
     boxShadow: false,
+    iconName: "arrow_left",
+    customClass: "navbutton nav-arrow-left",
     onClick: () => {
       previousMonth();
-    },
-    customClass: "navbutton"
+    }
   }), /*#__PURE__*/_react.default.createElement("span", {
     className: "monthname"
   }, dataAtual.format('MMMM YYYY')), /*#__PURE__*/_react.default.createElement(_buttons.default, {
+    id: (0, _uuid.v1)(),
     boxShadow: false,
     iconName: "arrow_right",
+    customClass: "navbutton nav-arrow-right",
     onClick: () => {
       nextMonth();
-    },
-    customClass: "navbutton"
+    }
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "daynames"
   }, (0, _helpers.dayNames)().map(name => /*#__PURE__*/_react.default.createElement("div", {
     key: `day-${name}`
   }, name))), /*#__PURE__*/_react.default.createElement(_Month.default, {
+    monthRef: currentMonth,
     currentDate: dataAtual
-  })));
+  }));
+  return /*#__PURE__*/_react.default.createElement(_helpers.CalendarContext.Provider, {
+    value: contextValues
+  }, !gridLayout ? component : /*#__PURE__*/_react.default.createElement(_gridlayout.default, {
+    customClass: "-withinput",
+    cols: gridLayout
+  }, component));
 };
 var _default = exports.default = Calendar;

package/lib/calendar/index.d.ts

@@ -5,6 +5,7 @@ export { default as DangerCalendar } from './DangerCalendar.js';
 export { default as WarningCalendar } from './WarningCalendar.js';
 export { default as InfoCalendar } from './InfoCalendar.js';
 import './types.js';
+import 'react';
 import 'moment';
 import '../@types/ColorStyles.js';
 

package/lib/calendar/types.d.ts

@@ -1,3 +1,4 @@
+import { LegacyRef } from 'react';
 import { Moment } from 'moment';
 import { ColorStyles } from '../@types/ColorStyles.js';
 
@@ -9,6 +10,9 @@ interface ICalendarProps {
     onDateChange?: (date: Moment) => void;
     colorStyle?: ColorStyles;
     handleDateChange?: (date: Moment) => void;
+    gridLayout?: string;
+    currentDateButton?: (buttonElement: HTMLButtonElement) => void;
+    calendarContainer?: (calendarElement: HTMLDivElement | null) => void;
 }
 interface IWeekProps {
     weekStartDate: Moment;
@@ -19,6 +23,7 @@ interface IDayProps {
     day: Moment;
 }
 interface IMonthProps {
+    monthRef: LegacyRef<HTMLDivElement> | undefined;
     currentDate: Moment;
 }
 

package/lib/checkbox/Label.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _withTooltip = _interopRequireDefault(require("../internals/withTooltip"));
+var _hint = _interopRequireDefault(require("../hint"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Label = _ref => {
+  let {
+    label,
+    targetSpanRef,
+    disabled,
+    hint
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "description"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    ref: r => {
+      if (targetSpanRef) targetSpanRef(r);
+    }
+  }, label), /*#__PURE__*/_react.default.createElement(_hint.default, {
+    disabled: disabled,
+    visible: !!hint,
+    description: hint,
+    customClass: "hint"
+  }));
+};
+var _default = exports.default = (0, _withTooltip.default)(Label);

package/lib/dialog/base/Content.js

@@ -4,19 +4,20 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 require("../../assets/styles/dialog.scss");
-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; }
 const Content = _ref => {
   let {
     children,
     styleForContent,
     className = ''
   } = _ref;
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement(_react.Suspense, null, /*#__PURE__*/_react.default.createElement("div", {
     id: "modal-dialog-content",
     className: `dialog-content ${className}`,
     style: styleForContent
-  }, children);
+  }, children));
 };
 var _default = exports.default = Content;

package/lib/dialog/base/Header.js

@@ -14,7 +14,6 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 const getCloseButton = handleClose => /*#__PURE__*/_react.default.createElement("button", {
   id: "botao-fechar-modal-cabecalho",
   className: "close-button",
-  tabIndex: 0,
   onClick: handleClose
 }, /*#__PURE__*/_react.default.createElement(_icons.default, {
   name: "cancel2"

package/lib/dialog/base/index.js

@@ -36,6 +36,7 @@ const BaseDialog = props => {
     headerRef
   } = (0, _react.useContext)(_form.FormDialogContext);
   const wrapperEl = (0, _react.useRef)(null);
+  const modalContainerRef = (0, _react.useRef)(null);
   const [isDragging, setIsDragging] = (0, _react.useState)(false);
   const [open = true, setOpen] = (0, _react.useState)(openProp);
   if (openProp !== undefined && openProp !== open) {
@@ -57,12 +58,23 @@ const BaseDialog = props => {
       handleClose();
     }
   };
-  const handleCloseOnEsc = event => {
+  const onKeyDownPress = event => {
     if (event?.key === 'Escape') {
       event.stopPropagation();
       handleClose();
     }
   };
+  const modalContainerWithoutBlur = event => {
+    const focusOnAnotherField = !modalContainerRef.current?.contains(event.relatedTarget);
+    const modalContent = wrapperEl.current?.querySelector('#modal-dialog-content');
+    const elementsFocusable = modalContent?.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+    if (focusOnAnotherField && elementsFocusable?.length) {
+      const firstElement = elementsFocusable[0];
+      setTimeout(() => {
+        firstElement.focus();
+      }, 150);
+    }
+  };
   const onDialogPositionChange = _ref => {
     let {
       positionX,
@@ -106,6 +118,8 @@ const BaseDialog = props => {
   };
   const createdModal = /*#__PURE__*/_react.default.createElement("div", {
     id: id,
+    ref: modalContainerRef,
+    onBlur: modalContainerWithoutBlur,
     className: "modalcontainer",
     onMouseDown: handleClickOutside,
     style: {
@@ -123,14 +137,23 @@ const BaseDialog = props => {
     style: (0, _style.default)(props),
     ref: wrapperEl
   }, children)));
+  (0, _react.useLayoutEffect)(() => {
+    const {
+      activeElement
+    } = document;
+    const lastElementActiveBeforeOpen = activeElement;
+    return () => {
+      lastElementActiveBeforeOpen?.focus();
+    };
+  }, []);
   (0, _react.useEffect)(() => {
     if (open) {
       if (closeOnEsc) {
-        document.addEventListener('keydown', handleCloseOnEsc);
+        document.addEventListener('keydown', onKeyDownPress);
       }
     }
     return () => {
-      document.removeEventListener('keydown', handleCloseOnEsc);
+      document.removeEventListener('keydown', onKeyDownPress);
     };
   }, [open, closeOnEsc]);
   (0, _react.useEffect)(() => {

package/lib/drawer/Drawer.js

@@ -136,7 +136,7 @@ const BaseDrawer = _ref => {
     className: `drawercontent ${skeletonize ? '-skeletonized' : ''} ${customClassForContent}`
   }, title && /*#__PURE__*/_react.default.createElement(_.DrawerHeader, _extends({}, headerProps, {
     customClass: customClassForDrawer
-  })), content ? /*#__PURE__*/_react.default.createElement(_.DrawerContent, null, content) : children, getSpinner())));
+  })), /*#__PURE__*/_react.default.createElement(_react.Suspense, null, content ? /*#__PURE__*/_react.default.createElement(_.DrawerContent, null, content) : children), getSpinner())));
   return /*#__PURE__*/_reactDom.default.createPortal(drawerContent(), drawerContainerEl.current);
 };
 var _default = exports.default = BaseDrawer;

package/lib/dropdown/Popup.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { IPopUpProps } from './types.js';
+import { IPopupProps } from './types.js';
 
-declare const DropdownPopup: ({ id, customClassForDropdown, align, isFloatMenu, topPosition, leftPosition, rightPosition, minWidth, ...props }: IPopUpProps) => React.ReactPortal;
+declare const DropdownPopup: ({ id, customClassForDropdown, align, isFloatMenu, topPosition, leftPosition, rightPosition, minWidth, targetRef, ...props }: IPopupProps) => React.ReactPortal;
 
 export { DropdownPopup as default };

package/lib/dropdown/Popup.js

@@ -7,20 +7,36 @@ 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: ${topPosition + (isFloatMenu ? 6 : 2)}px; min-width: ${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: ${leftPosition}px;`;
   } else if (align === 'right') {
@@ -28,7 +44,9 @@ const getCalendarDropdownStyle = _ref => {
   }
   return style;
 };
-const body = document.getElementsByTagName('body')[0];
+const {
+  body
+} = document;
 const DropdownPopup = _ref2 => {
   let {
       id,
@@ -38,20 +56,13 @@ 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 ${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];
@@ -60,6 +71,16 @@ const DropdownPopup = _ref2 => {
   (0, _react.useEffect)(() => {
     body.appendChild(popup.current);
     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/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;
@@ -21,7 +22,7 @@ interface GetDisplayNameParams {
 interface WithDropdownContextProps {
     handleDropdownClose: () => void;
 }
-interface IPopUpProps {
+interface IPopupProps {
     id?: string;
     children?: ReactNode;
     customClassForDropdown?: string;
@@ -31,14 +32,17 @@ interface IPopUpProps {
     leftPosition?: number;
     rightPosition?: number;
     minWidth?: number;
+    targetRef?: HTMLElement | HTMLInputElement | null;
 }
-interface GetCalendarDropdownStyleParams {
+interface GetDropdownStyleParams {
     align: 'left' | 'right';
     minWidth: number;
     isFloatMenu: boolean;
     topPosition: number;
     leftPosition: number;
     rightPosition: number;
+    container?: HTMLDivElement;
+    target?: HTMLElement | HTMLInputElement | null;
 }
 
-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',
@@ -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
     };

package/lib/form/Field.js

@@ -9,7 +9,7 @@ var _lodash = _interopRequireDefault(require("lodash"));
 var _withFieldHOC = _interopRequireDefault(require("./withFieldHOC"));
 var _helpers = require("./helpers");
 var constants = _interopRequireWildcard(require("../internals/constants"));
-const _excluded = ["handlerFieldChange", "handlerFieldValidate", "onChange", "onBlur", "name", "validators", "data", "fieldErrors", "handlerStoreValidators", "handlerRemoveValidators", "component", "externalFieldErrors", "originalData"];
+const _excluded = ["handlerFieldChange", "handlerFieldValidate", "onChange", "onBlur", "name", "validators", "data", "fieldErrors", "handlerStoreValidators", "handlerRemoveValidators", "component", "externalFieldErrors", "originalData", "handleValidationErrorsOnTab"];
 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; }
@@ -104,13 +104,22 @@ const Field = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
       handlerRemoveValidators,
       component: Component,
       externalFieldErrors,
-      originalData
+      originalData,
+      handleValidationErrorsOnTab
     } = props,
     rest = _objectWithoutProperties(props, _excluded);
   const {
     handlerSetValidatorFromComponent,
     validatorFromComponent
   } = (0, _react.useContext)(_helpers.withFieldContext);
+  const hasErrorsMessagesOnField = (0, _helpers.getErrorMessages)(_objectSpread(_objectSpread({}, props), {}, {
+    fieldErrors: props.fieldErrors
+  }));
+  if (handleValidationErrorsOnTab) handleValidationErrorsOnTab({
+    name: name,
+    tabId: props.tabId,
+    hasErrors: !!hasErrorsMessagesOnField.length
+  });
   return /*#__PURE__*/_react.default.createElement(Component, _extends({}, rest, getEvents({
     name,
     validators,

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", "handlerFieldValidate", "changePropName", "fieldErrors", "externalMessagesErrors", "handlerRemoveValidators", "validators", "valuePropName", "originalData", "handlerSelecionados", "handleValidationErrorsOnTab"];
 /* 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); }
@@ -69,10 +69,19 @@ const FieldArray = props => {
       validators,
       valuePropName,
       originalData,
-      handlerSelecionados
+      handlerSelecionados,
+      handleValidationErrorsOnTab
     } = props,
     rest = _objectWithoutProperties(props, _excluded);
   let content = null;
+  const hasErrorsMessagesOnField = (0, _helpers.getErrorMessages)(_objectSpread(_objectSpread({}, props), {}, {
+    fieldErrors: props.fieldErrors
+  }));
+  if (handleValidationErrorsOnTab) handleValidationErrorsOnTab({
+    name: name,
+    tabId: props.tabId,
+    hasErrors: !!hasErrorsMessagesOnField.length
+  });
   if (Component) {
     if (!skipLabel && label) {
       content = /*#__PURE__*/_react.default.createElement(_fieldset.default, {

package/lib/form/FieldNumber.js

@@ -55,9 +55,18 @@ const getEventProps = _ref => {
 const FieldMask = props => {
   const {
     data,
-    name
+    name,
+    handleValidationErrorsOnTab
   } = props;
   const currentValue = _lodash.default.get(data, name);
+  const hasErrorsMessagesOnField = (0, _helpers.getErrorMessages)(_objectSpread(_objectSpread({}, props), {}, {
+    fieldErrors: props.fieldErrors
+  }));
+  if (handleValidationErrorsOnTab) handleValidationErrorsOnTab({
+    name: name,
+    tabId: props.tabId,
+    hasErrors: !!hasErrorsMessagesOnField.length
+  });
   return /*#__PURE__*/_react.default.createElement(props.component, _extends({}, props, getEventProps(_objectSpread({}, props)), {
     errorMessages: (0, _helpers.getErrorMessages)(_objectSpread(_objectSpread({}, props), {}, {
       fieldErrors: props.fieldErrors

package/lib/form/FieldPeriod.js

@@ -6,13 +6,17 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _lodash = _interopRequireDefault(require("lodash"));
-var _gridlayout = _interopRequireDefault(require("../gridlayout"));
 var _withFieldHOC = _interopRequireDefault(require("./withFieldHOC"));
 var _helpers = require("./helpers");
 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; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+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); }
 const FieldPeriod = props => {
   const {
     data,
@@ -25,10 +29,10 @@ const FieldPeriod = props => {
     onChange,
     validators,
     originalData,
-    gridLayout,
     component: Component,
     name,
-    externalFieldErrors
+    externalFieldErrors,
+    handleValidationErrorsOnTab
   } = props;
   let content = null;
   const [showValidateMessages, setShowValidateMessages] = (0, _react.useState)(false);
@@ -47,6 +51,14 @@ const FieldPeriod = props => {
     externalFieldErrors,
     externalMessagesErrors
   });
+  const hasErrorsMessagesOnField = (0, _helpers.getErrorMessages)(_objectSpread(_objectSpread({}, props), {}, {
+    fieldErrors: props.fieldErrors
+  }));
+  if (handleValidationErrorsOnTab) handleValidationErrorsOnTab({
+    name: name,
+    tabId: props.tabId,
+    hasErrors: !!hasErrorsMessagesOnField.length
+  });
   if (Component) {
     content = /*#__PURE__*/_react.default.createElement(Component, _extends({}, props, {
       errorMessages: errorMessages,
@@ -84,15 +96,6 @@ const FieldPeriod = props => {
       }
     }));
   }
-  if (gridLayout !== undefined) {
-    return /*#__PURE__*/_react.default.createElement(_gridlayout.default, {
-      customClass: "-withinput",
-      cols: gridLayout,
-      style: {
-        height: '100%'
-      }
-    }, content);
-  }
   return content;
 };
 var _default = exports.default = (0, _withFieldHOC.default)(FieldPeriod);

package/lib/form/index.d.ts

@@ -13,6 +13,6 @@ import '../@types/Period.js';
 import '../internals/types.js';
 import '../@types/Position.js';
 
-declare const Form: ({ submitOnPressEnterKey, dataSource, securityBeforeUnload, handlerReset, handlerSubmit, handlerValidates, style, customClass, securityTitle, securityText, securityData, onDataChange, onValidateForm, externalFieldErrors, onSubmit, skeletonize, disabled, children, useInternalState, }: FormProps) => JSX.Element;
+declare const Form: ({ submitOnPressEnterKey, dataSource, securityBeforeUnload, handlerReset, handlerSubmit, handlerValidates, style, customClass, securityTitle, securityText, securityData, onDataChange, onValidateForm, externalFieldErrors, onSubmit, skeletonize, disabled, children, useInternalState, onValidateErrorsOnTab, }: FormProps) => JSX.Element;
 
 export { Form as default };