linear-react-components-ui 1.1.20-beta.9 → 1.1.20-rc.0

package/lib/dialog/Question.js

@@ -4,36 +4,54 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _buttons = _interopRequireWildcard(require("../buttons"));
 var _Custom = _interopRequireDefault(require("./Custom"));
 var _icons = _interopRequireDefault(require("../icons"));
+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 _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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); }
 const Question = props => {
   const {
     visible = true,
+    closeOnEsc = false,
     isWaiting,
     onConfirmClick,
-    onUnconfirmClick
+    onUnconfirmClick,
+    confirmLabel = 'Sim',
+    declineLabel = 'Não'
   } = props;
+  const idUnconfirm = 'botao-unconfirm-click';
   const buttons = [/*#__PURE__*/_react.default.createElement(_buttons.DangerButton, {
     key: "yes-buttom",
     disabled: isWaiting,
     onClick: onConfirmClick,
     isLoading: isWaiting,
-    label: "Sim"
+    label: confirmLabel
   }), /*#__PURE__*/_react.default.createElement(_buttons.default, {
+    id: idUnconfirm,
     key: "no-buttom",
     disabled: isWaiting,
     onClick: onUnconfirmClick,
-    label: "N\xE3o"
+    label: declineLabel
   })];
+  (0, _react.useLayoutEffect)(() => {
+    const lastElementActive = document.activeElement;
+    return () => {
+      lastElementActive?.focus?.();
+    };
+  }, [visible]);
+  (0, _react.useEffect)(() => {
+    const buttonUnconfirm = document.getElementById(idUnconfirm);
+    buttonUnconfirm?.focus?.();
+  }, [visible, document.activeElement]);
   if (!visible) return null;
   return /*#__PURE__*/_react.default.createElement(_Custom.default, _extends({}, props, {
+    open: visible,
     buttons: buttons,
+    closeOnEsc: closeOnEsc,
+    handlerClose: onUnconfirmClick,
     icon: /*#__PURE__*/_react.default.createElement(_icons.default, {
       name: "question",
       color: "#3498db",

package/lib/dialog/Warning.js

@@ -11,9 +11,13 @@ var _icons = _interopRequireDefault(require("../../lib/icons"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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); }
 const Warning = props => {
+  const {
+    onConfirmClick,
+    confirmLabel = 'Confirmar'
+  } = props;
   const buttons = [/*#__PURE__*/_react.default.createElement(_buttons.PrimaryButton, {
-    onClick: props.onConfirmClick,
-    label: "Confirmar",
+    onClick: onConfirmClick,
+    label: confirmLabel,
     key: 1
   })];
   return /*#__PURE__*/_react.default.createElement(_Custom.default, _extends({}, props, {

package/lib/dialog/base/Content.js

@@ -15,7 +15,7 @@ const Content = _ref => {
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", {
     id: "modal-dialog-content",
-    className: "dialog-content ".concat(className),
+    className: `dialog-content ${className}`,
     style: styleForContent
   }, children);
 };

package/lib/dialog/base/Header.js

@@ -46,10 +46,10 @@ const Header = _ref => {
     tabIndex: -1,
     onFocus: () => {},
     onBlur: () => {},
-    ref: formDialogContext === null || formDialogContext === void 0 ? void 0 : formDialogContext.headerRef,
+    ref: formDialogContext?.headerRef,
     className: "dialog-header"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(icon !== null || titleIcon !== null ? 'left' : '')
+    className: `${icon !== null || titleIcon !== null ? 'left' : ''}`
   }, getIcon(titleIcon, icon)), /*#__PURE__*/_react.default.createElement("div", {
     className: "right"
   }, /*#__PURE__*/_react.default.createElement("h5", {

package/lib/dialog/base/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.DialogContext = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
+var uuid = _interopRequireWildcard(require("uuid"));
 var _style = _interopRequireDefault(require("./style"));
 require("../../assets/styles/dialog.scss");
 var _form = require("../form");
@@ -17,7 +18,9 @@ const {
   body
 } = document;
 const BaseDialog = props => {
+  const baseDialogId = uuid.v4();
   const {
+    id = baseDialogId,
     overlay = true,
     closeOnEsc,
     closeOnOutsideClick,
@@ -43,9 +46,7 @@ const BaseDialog = props => {
       onOpenChange(false);
     } else {
       if (handlerClose) handlerClose();
-      if (onOpenChange) {
-        onOpenChange(false);
-      }
+      if (onOpenChange) onOpenChange(false);
     }
   };
   const handleClickOutside = event => {
@@ -57,7 +58,8 @@ const BaseDialog = props => {
     }
   };
   const handleCloseOnEsc = event => {
-    if (event.key === 'Escape') {
+    if (event?.key === 'Escape') {
+      event.stopPropagation();
       handleClose();
     }
   };
@@ -75,7 +77,7 @@ const BaseDialog = props => {
       let y = positionY <= 0 ? 0 : positionY;
       if (x + width >= window.innerWidth) x = window.innerWidth - width;
       if (y + height >= window.innerHeight) y = window.innerHeight - height;
-      wrapperEl.current.style.transform = "translate(".concat(x, "px, ").concat(y, "px)");
+      wrapperEl.current.style.transform = `translate(${x}px, ${y}px)`;
       wrapperEl.current.style.transition = 'none';
       wrapperEl.current.style.left = '0';
       wrapperEl.current.style.top = '0';
@@ -95,15 +97,15 @@ const BaseDialog = props => {
     }
   };
   const onMouseDown = event => {
-    var _headerRef$current;
     const element = event.target;
-    const isHeader = headerRef === null || headerRef === void 0 ? void 0 : (_headerRef$current = headerRef.current) === null || _headerRef$current === void 0 ? void 0 : _headerRef$current.contains(element);
+    const isHeader = headerRef?.current?.contains(element);
     if (wrapperEl.current && isHeader) setIsDragging(true);
   };
   const onMouseUp = () => {
     if (wrapperEl.current) setIsDragging(false);
   };
   const createdModal = /*#__PURE__*/_react.default.createElement("div", {
+    id: id,
     className: "modalcontainer",
     onMouseDown: handleClickOutside,
     style: {
@@ -113,7 +115,7 @@ const BaseDialog = props => {
     className: "modal-overlay",
     "data-testid": "modal-overlay"
   }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "dialog ".concat(className),
+    className: `dialog ${className}`,
     "data-testid": "dialog-component"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: wrapperClassName,

package/lib/dialog/form/index.js

@@ -59,8 +59,8 @@ const ModalForm = props => {
     width: width,
     height: height
   }, props, {
-    wrapperClassName: "dialog-form-wrapper ".concat(wrapperClassName),
-    className: className
+    className: className,
+    wrapperClassName: `dialog-form-wrapper ${wrapperClassName}`
   }), props.title && /*#__PURE__*/_react.default.createElement("div", {
     className: "header-form"
   }, /*#__PURE__*/_react.default.createElement(_Header.default, {

package/lib/dialog/types.d.ts

@@ -32,6 +32,7 @@ interface IBaseProps {
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
     handlerClose?: () => void;
+    id?: string;
 }
 interface IFormProps extends Omit<IBaseProps, 'textAlign' | 'zIndex'> {
     buttons?: JSX.Element[];
@@ -47,6 +48,7 @@ interface ICommonDialogProps {
     onConfirmClick?: () => void;
     text?: string;
     title?: string;
+    confirmLabel?: string;
 }
 interface IQuestionProps {
     onUnconfirmClick: () => void;
@@ -56,6 +58,9 @@ interface IQuestionProps {
     text?: string;
     title?: string;
     zIndex?: number | string;
+    closeOnEsc?: boolean;
+    confirmLabel?: string;
+    declineLabel?: string;
 }
 interface ICustomProps {
     icon: ReactElement;
@@ -65,6 +70,9 @@ interface ICustomProps {
     height?: string;
     width?: string;
     iconName?: IconNames | null;
+    open?: boolean;
+    closeOnEsc?: boolean;
+    handlerClose?: () => void;
 }
 interface IFormDialogContext {
     headerRef?: React.RefObject<HTMLDivElement>;
@@ -76,6 +84,8 @@ interface WizardComponentProps extends Omit<IFormProps, 'content'> {
     title?: string;
     handlerClose?: () => void;
     controls: WizardControls;
+    customStyleForProgressBar?: CSSProperties;
+    customStyleForBody?: CSSProperties;
 }
 interface WizardStepComponentProps {
     children: React.ReactNode;

package/lib/dialog/wizard/index.d.ts

@@ -8,6 +8,6 @@ import '../../icons/helper.js';
 
 declare const WizardContext: React__default.Context<WizardControls | null>;
 declare const useWizardContext: () => WizardControls | null;
-declare function Wizard({ children, controls, showProgressbar, ...dialogProps }: Readonly<WizardComponentProps>): JSX.Element;
+declare function Wizard({ children, controls, showProgressbar, customStyleForProgressBar, customStyleForBody, ...dialogProps }: Readonly<WizardComponentProps>): JSX.Element;
 
 export { Wizard as Container, WizardContext, Wizard as default, useWizardContext };

package/lib/dialog/wizard/index.js

@@ -25,7 +25,7 @@ var _progressbar = require("./progressbar");
 require("../../assets/styles/wizard.scss");
 var _step = require("./step");
 var _useWizard = require("./useWizard");
-const _excluded = ["children", "controls", "showProgressbar"];
+const _excluded = ["children", "controls", "showProgressbar", "customStyleForProgressBar", "customStyleForBody"];
 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; }
@@ -39,7 +39,9 @@ function Wizard(_ref) {
   let {
       children,
       controls,
-      showProgressbar = true
+      showProgressbar = true,
+      customStyleForProgressBar,
+      customStyleForBody
     } = _ref,
     dialogProps = _objectWithoutProperties(_ref, _excluded);
   const {
@@ -66,9 +68,11 @@ function Wizard(_ref) {
     wrapperClassName: "wizard-wrapper",
     contentClassName: "wizard-content"
   }, dialogProps), showProgressbar && /*#__PURE__*/_react.default.createElement(_progressbar.Progressbar, {
-    stepsTitle: stepsTitle
+    stepsTitle: stepsTitle,
+    customStyle: customStyleForProgressBar
   }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "wizard-body"
+    className: "wizard-body",
+    style: customStyleForBody
   }, currentStepElement)));
 }
 var _default = exports.default = Wizard;

package/lib/dialog/wizard/progressbar.js

@@ -19,7 +19,7 @@ function Progressbar(_ref) {
     currentStep
   } = context;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "wizard-progresbar ".concat(customClass),
+    className: `wizard-progresbar ${customClass}`,
     style: customStyle
   }, stepsTitle.map(step => /*#__PURE__*/_react.default.createElement("div", {
     key: step.number,

package/lib/dialog/wizard/step.js

@@ -16,7 +16,7 @@ function WizardStep(_ref) {
   const context = (0, _.useWizardContext)();
   if (!context) throw new Error('WizardStep must be used within a Wizard component');
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "wizard-step-component ".concat(customClass),
+    className: `wizard-step-component ${customClass}`,
     style: customStyle
   }, children);
 }

package/lib/drawer/Drawer.js

@@ -83,7 +83,7 @@ const BaseDrawer = _ref => {
   };
   const closeDrawerOnEsc = e => {
     if (closeOnEsc && e.key === 'Escape') {
-      handlerClose === null || handlerClose === void 0 ? void 0 : handlerClose();
+      handlerClose?.();
       e.stopPropagation();
     }
   };
@@ -124,12 +124,12 @@ const BaseDrawer = _ref => {
     value: contextValues
   }, /*#__PURE__*/_react.default.createElement("div", {
     "data-testid": "drawercontainer-component",
-    className: "".concat(position, " ").concat(customClass),
+    className: `${position} ${customClass}`,
     style: style
   }, /*#__PURE__*/_react.default.createElement("div", {
     style: overlayStyle,
     "data-testid": "drawercontent",
-    className: "drawercontent ".concat(skeletonize ? '-skeletonized' : '', " ").concat(customClassForContent)
+    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())));

package/lib/drawer/Header.js

@@ -61,7 +61,7 @@ const Header = _ref => {
   };
   const checkHandlerClose = () => handlerClose ? handlerClose() : undefined;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "drawerheader ".concat(customClass),
+    className: `drawerheader ${customClass}`,
     "data-testid": "drawerheader"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "left"

package/lib/dropdown/Popup.js

@@ -20,11 +20,11 @@ const getCalendarDropdownStyle = _ref => {
     isFloatMenu,
     minWidth
   } = _ref;
-  let style = "top: ".concat(topPosition + (isFloatMenu ? 6 : 2), "px; min-width: ").concat(minWidth, "px;");
+  let style = `top: ${topPosition + (isFloatMenu ? 6 : 2)}px; min-width: ${minWidth}px;`;
   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;
 };
@@ -42,7 +42,7 @@ const DropdownPopup = _ref2 => {
     } = _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,
@@ -55,11 +55,11 @@ const DropdownPopup = _ref2 => {
   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)()}`;
     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/withDropdown.js

@@ -38,7 +38,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);
       }
     };
@@ -86,7 +86,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/FieldArray.js

@@ -77,7 +77,7 @@ const FieldArray = props => {
     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), {

package/lib/form/FieldNumber.js

@@ -4,14 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _lodash = _interopRequireDefault(require("lodash"));
 var _withFieldHOC = _interopRequireDefault(require("./withFieldHOC"));
 var _helpers = require("./helpers");
 var constants = _interopRequireWildcard(require("../internals/constants"));
-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 _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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; }
@@ -31,36 +31,33 @@ const getEventProps = _ref => {
   } = _ref;
   return {
     onBlur: e => {
-      if ((component === null || component === void 0 ? void 0 : component.name) !== 'NumberField' && handlerFieldChange) handlerFieldChange(e);
+      if (component?.name !== 'NumberField' && handlerFieldChange) handlerFieldChange(e);
       if (validators && handlerFieldValidate) handlerFieldValidate(name, e.target.value, validators);
       if (onBlur) onBlur(e);
     },
     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) handlerFieldValidate?.(name, e.target.value, validators);
         if (onKeyDown) onKeyDown(e);
       }
     },
     onChange: e => {
-      if ((component === null || component === void 0 ? void 0 : component.name) === 'NumberField') {
+      if (component?.name === 'NumberField') {
         if (validators && e.target && handlerFieldValidate) {
           handlerFieldValidate(name, e.target.value, validators);
         }
         if (handlerFieldChange) handlerFieldChange(e);
-        if (onChange) onChange(e);
       }
+      if (onChange) onChange(e);
     }
   };
 };
 const FieldMask = props => {
   const {
     data,
-    name,
-    originalData
+    name
   } = 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)), {
     errorMessages: (0, _helpers.getErrorMessages)(_objectSpread(_objectSpread({}, props), {}, {
       fieldErrors: props.fieldErrors

package/lib/form/FieldPeriod.js

@@ -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

@@ -29,6 +29,7 @@ Object.defineProperty(exports, "FieldPeriod", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _uuid = require("uuid");
 var _lodash = _interopRequireDefault(require("lodash"));
 var _helpers = require("./helpers");
 var _Field = _interopRequireDefault(require("./Field"));
@@ -69,14 +70,16 @@ const Form = _ref => {
     children,
     useInternalState = false
   } = _ref;
+  const formId = (0, _uuid.v1)();
   const [data, setData] = (0, _react.useState)(dataSource);
   const [originalData, setOriginalData] = (0, _react.useState)(dataSource);
   const [submitFormOnEnter, setSubmitFormOnEnter] = (0, _react.useState)(submitOnPressEnterKey);
   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 formRef = (0, _react.useRef)(null);
+  const fieldsValidators = (0, _react.useRef)({});
   const usedData = useInternalState ? data : dataSource;
   const getValidatesErrorMessages = (validators, fieldValue) => {
     const validatorsArray = !(validators instanceof Array) ? [validators] : validators;
@@ -137,7 +140,10 @@ const Form = _ref => {
     }
   };
   const onFormSubmit = (0, _react.useCallback)(event => {
-    if (event) event.preventDefault();
+    if (event) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
     if (checkIsValid(usedData)) onSubmit(usedData);
   }, [usedData]);
   const onResetField = (cb, fields) => {
@@ -175,23 +181,20 @@ const Form = _ref => {
   const onBeforeUnload = e => {
     const event = e;
     event.preventDefault();
-    if (_lodash.default.isEqual(usedData, originalData)) {
-      return;
-    }
-    event.returnValue = true;
-  };
-  const submitOnEnter = event => {
-    if (event.key === 'Enter') {
-      event.preventDefault();
-      if (submitFormOnEnter) onFormSubmit();
-    }
+    if (_lodash.default.isEqual(usedData, originalData)) return;
   };
   const formProps = () => {
     let propsForm = null;
     if (!disabled) {
       propsForm = {
         onSubmit: event => event.preventDefault(),
-        onKeyPress: event => submitOnEnter(event)
+        onKeyPress: event => {
+          if (event && event.key === 'Enter') {
+            event.preventDefault();
+            event.stopPropagation();
+            if (submitFormOnEnter) onFormSubmit();
+          }
+        }
       };
     }
     return propsForm;
@@ -237,7 +240,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));
@@ -262,10 +265,12 @@ const Form = _ref => {
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_helpers.FormContext.Provider, {
     value: contextValues
   }, /*#__PURE__*/_react.default.createElement("form", _extends({
+    id: formId,
+    ref: formRef,
     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',