linear-react-components-ui 1.1.2-beta.9 → 1.1.3-beta.1

package/lib/buttons/DefaultButton.js

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

package/lib/buttons/types.d.ts

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

package/lib/checkbox/Label.js

@@ -6,17 +6,26 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _withTooltip = _interopRequireDefault(require("../internals/withTooltip"));
+var _hint = _interopRequireDefault(require("../hint"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const Label = _ref => {
   let {
     label,
-    targetSpanRef
+    targetSpanRef,
+    disabled,
+    hint
   } = _ref;
-  return /*#__PURE__*/_react.default.createElement("span", {
-    className: "description",
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "description"
+  }, /*#__PURE__*/_react.default.createElement("span", {
     ref: r => {
       if (targetSpanRef) targetSpanRef(r);
     }
-  }, label);
+  }, 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/checkbox/index.d.ts

@@ -1,5 +1,5 @@
-import React__default from 'react';
 import { ICheckBoxProps } from './types.js';
+import 'react';
 import '../@types/PermissionAttr.js';
 import '../@types/Position.js';
 
@@ -8,6 +8,6 @@ import '../@types/Position.js';
  * o componente Field dentro do componente Form, pois o mesmo leva em consideração o tipo do
  * componente para gerar propriedades customizadas.
  */
-declare const CheckBox: React__default.ForwardRefExoticComponent<ICheckBoxProps & React__default.RefAttributes<HTMLInputElement>>;
+declare const CheckBox: ({ name, required, value, label, onChange, autofocus, hint, id, gridLayout, checked, disabled, permissionAttr, tooltip, tooltipPosition, tooltipWidth, skeletonize, targetRef, errorMessages, }: ICheckBoxProps) => JSX.Element | null;
 
 export { CheckBox as default };

package/lib/checkbox/index.js

@@ -5,11 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _gridlayout = _interopRequireDefault(require("../gridlayout"));
 var _Label = _interopRequireDefault(require("./Label"));
-require("../assets/styles/checkbox.scss");
+var _gridlayout = _interopRequireDefault(require("../gridlayout"));
 var _permissionValidations = require("../permissionValidations");
-var _hint = _interopRequireDefault(require("../hint"));
+require("../assets/styles/checkbox.scss");
+var _errorMessage = require("../inputs/errorMessage");
+var _ = require("..");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -20,7 +21,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
  * componente para gerar propriedades customizadas.
  */
 
-const CheckBox = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+const CheckBox = _ref => {
   let {
     name,
     required,
@@ -29,7 +30,7 @@ const CheckBox = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     onChange,
     autofocus,
     hint,
-    id = undefined,
+    id = '',
     gridLayout,
     checked = false,
     disabled,
@@ -38,13 +39,13 @@ const CheckBox = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     tooltipPosition = 'top',
     tooltipWidth = 'auto',
     skeletonize,
-    targetRef
+    targetRef,
+    errorMessages
   } = _ref;
   const [isChecked, setIsChecked] = (0, _react.useState)(checked);
   const options = [_permissionValidations.OPTIONS_ON_DENIED.disabled, _permissionValidations.OPTIONS_ON_DENIED.unvisible];
   const [onDenied] = (0, _react.useState)((0, _permissionValidations.actionsOnPermissionDenied)(options, permissionAttr));
   const inputRef = (0, _react.useRef)(null);
-  (0, _react.useImperativeHandle)(ref, () => inputRef.current, [inputRef.current]);
   (0, _react.useEffect)(() => {
     setIsChecked(checked);
   }, [checked]);
@@ -69,15 +70,18 @@ const CheckBox = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     };
   };
   const renderInput = () => /*#__PURE__*/_react.default.createElement("div", _extends({}, getProps(), {
-    className: "checkbox-component ".concat(skeletonize ? '-skeletonized' : '')
+    className: "checkbox-component",
+    "data-skeletonized": skeletonize
   }), /*#__PURE__*/_react.default.createElement("span", {
     "data-testid": "checkbox-container",
     className: "inputcontent",
     onClick: !shouldDisable() && !skeletonize ? () => setIsChecked(!isChecked) : undefined,
     tabIndex: -1,
     role: "checkbox",
-    "aria-checked": "false"
+    "aria-checked": "false",
+    onKeyPress: undefined
   }, /*#__PURE__*/_react.default.createElement("input", {
+    id: id || undefined,
     ref: r => {
       if (targetRef) targetRef(r);
       inputRef.current = r;
@@ -90,23 +94,24 @@ const CheckBox = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     name: name,
     required: required,
     value: value,
-    id: id,
     onChange: () => {}
-  }), /*#__PURE__*/_react.default.createElement("span", null), label && /*#__PURE__*/_react.default.createElement(_Label.default, {
+  }), /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_.Icon, {
+    size: 12,
+    name: "checkmark"
+  })), label && /*#__PURE__*/_react.default.createElement(_Label.default, {
     label: label,
     tooltip: tooltip,
     tooltipWidth: tooltipWidth,
-    tooltipPosition: tooltipPosition
-  })), /*#__PURE__*/_react.default.createElement(_hint.default, {
-    visible: !!hint,
-    description: hint,
-    customClass: "hint"
+    tooltipPosition: tooltipPosition,
+    disabled: disabled,
+    hint: hint
+  })), /*#__PURE__*/_react.default.createElement(_errorMessage.ErrorMessage, {
+    messages: errorMessages
   }));
   if (onDenied.unvisible) return null;
   return gridLayout ? /*#__PURE__*/_react.default.createElement(_gridlayout.default, {
     customClass: "-withinput",
     cols: gridLayout
   }, renderInput()) : renderInput();
-});
-CheckBox.displayName = 'CheckBox';
+};
 var _default = exports.default = CheckBox;

package/lib/checkbox/types.d.ts

@@ -4,7 +4,7 @@ import { Position } from '../@types/Position.js';
 
 type ChangeEvent = {
     checked: boolean;
-    id?: string;
+    id: string;
     name?: string;
     value: boolean;
 };
@@ -37,6 +37,7 @@ interface ICheckBoxProps {
     skeletonize?: boolean;
     targetRef?: (ref: HTMLInputElement | null) => void;
     targetSpanRef?: (ref: HTMLSpanElement | null) => void;
+    errorMessages?: string[] | undefined;
 }
 
 export type { ChangeEvent, ICheckBoxProps };

package/lib/dialog/base/Content.js

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

package/lib/dialog/base/Header.js

@@ -11,11 +11,11 @@ var _base = require("../base");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const getCloseButton = handleClose => /*#__PURE__*/_react.default.createElement("span", {
+const getCloseButton = handleClose => /*#__PURE__*/_react.default.createElement("button", {
+  id: "botao-fechar-modal-cabecalho",
   className: "close-button",
-  onClick: handleClose,
-  role: "button",
-  tabIndex: 0
+  tabIndex: 0,
+  onClick: handleClose
 }, /*#__PURE__*/_react.default.createElement(_icons.default, {
   name: "cancel2"
 }));

package/lib/dialog/base/index.js

@@ -42,8 +42,9 @@ const BaseDialog = props => {
       onOpenChange(false);
     } else {
       if (handlerClose) handlerClose();
-      onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(false);
-      setOpen(false);
+      if (onOpenChange) {
+        onOpenChange(false);
+      }
     }
   };
   const handleClickOutside = event => {
@@ -103,10 +104,10 @@ const BaseDialog = props => {
   };
   const createdModal = /*#__PURE__*/_react.default.createElement("div", {
     className: "modalcontainer",
+    onMouseDown: handleClickOutside,
     style: {
       zIndex: 99999 + Number(zIndex)
-    },
-    onMouseDown: handleClickOutside
+    }
   }, overlay && /*#__PURE__*/_react.default.createElement("div", {
     className: "modal-overlay",
     "data-testid": "modal-overlay"
@@ -120,8 +121,10 @@ const BaseDialog = props => {
     ref: wrapperEl
   }, children)));
   (0, _react.useEffect)(() => {
-    if (open && closeOnEsc) {
-      document.addEventListener('keydown', handleCloseOnEsc);
+    if (open) {
+      if (closeOnEsc) {
+        document.addEventListener('keydown', handleCloseOnEsc);
+      }
     }
     return () => {
       document.removeEventListener('keydown', handleCloseOnEsc);

package/lib/drawer/Drawer.js

@@ -82,8 +82,9 @@ const BaseDrawer = _ref => {
     body.appendChild(drawerOverlay);
   };
   const closeDrawerOnEsc = e => {
-    if (closeOnEsc && (e.keyCode === 27 || e.key === 'ESC')) {
+    if (closeOnEsc && e.key === 'Escape') {
       handlerClose === null || handlerClose === void 0 ? void 0 : handlerClose();
+      e.stopPropagation();
     }
   };
   (0, _react.useEffect)(() => {
@@ -98,7 +99,7 @@ const BaseDrawer = _ref => {
     if (overlay && !targetId && body) setDrawerOverlay(body);
     return () => {
       const drawerOverlay = document.getElementsByClassName('drawer-overlay')[0];
-      if (closeOnEsc) document.body.removeEventListener('keyup', closeDrawerOnEsc);
+      if (closeOnEsc) document.body.removeEventListener('keydown', closeDrawerOnEsc);
       if (targetId) {
         const drawerComponentTarget = document.getElementById(targetId);
         if (drawerComponentTarget && drawerComponentEl.current) {
@@ -110,9 +111,9 @@ const BaseDrawer = _ref => {
   }, []);
   (0, _react.useEffect)(() => {
     if (closeOnEsc) {
-      document.body.addEventListener('keyup', closeDrawerOnEsc);
+      document.body.addEventListener('keydown', closeDrawerOnEsc);
     }
-    return () => document.body.removeEventListener('keyup', closeDrawerOnEsc);
+    return () => document.body.removeEventListener('keydown', closeDrawerOnEsc);
   }, [closeOnEsc]);
   const contextValues = {
     handlerClose,

package/lib/drawer/Header.js

@@ -24,7 +24,7 @@ const getIcon = (titleIcon, icon) => {
     return /*#__PURE__*/_react.default.createElement("span", {
       "data-testid": "icon-header",
       className: "icon-header"
-    }, icon || titleIcon && /*#__PURE__*/_react.default.createElement(_icons.default, {
+    }, icon || /*#__PURE__*/_react.default.createElement(_icons.default, {
       name: titleIcon,
       color: "#000",
       size: 24

package/lib/dropdown/Popup.d.ts

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

package/lib/dropdown/Popup.js

@@ -6,7 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = require("react");
 var _reactDom = _interopRequireDefault(require("react-dom"));
-const _excluded = ["customClassForDropdown", "align", "isFloatMenu", "topPosition", "leftPosition", "rightPosition", "minWidth"];
+var _uuid = require("uuid");
+const _excluded = ["id", "customClassForDropdown", "align", "isFloatMenu", "topPosition", "leftPosition", "rightPosition", "minWidth"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -30,6 +31,7 @@ const getCalendarDropdownStyle = _ref => {
 const body = document.getElementsByTagName('body')[0];
 const DropdownPopup = _ref2 => {
   let {
+      id,
       customClassForDropdown = '',
       align = 'left',
       isFloatMenu = false,
@@ -53,10 +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 ? lastModalContainer.style.zIndex : 99999);
+    popup.current.style.zIndex = "".concat(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)());
     return () => {
       body.removeChild(popup.current);
     };

package/lib/dropdown/types.d.ts

@@ -22,6 +22,7 @@ interface WithDropdownContextProps {
     handleDropdownClose: () => void;
 }
 interface IPopUpProps {
+    id?: string;
     children?: ReactNode;
     customClassForDropdown?: string;
     align: 'left' | 'right';

package/lib/fieldset/index.js

@@ -28,7 +28,9 @@ const Fieldset = props => {
     styleTitle,
     template = 'none',
     titleCustomClass,
-    permissionAttr
+    permissionAttr,
+    leftElements = null,
+    rightElements = null
   } = props;
   const {
     hideContent,
@@ -69,7 +71,7 @@ const Fieldset = props => {
     style: styleTitle,
     align: titleAlign,
     className: "legend ".concat(titleCustomClass)
-  }, title), /*#__PURE__*/_react.default.createElement("div", {
+  }, leftElements, title, rightElements), /*#__PURE__*/_react.default.createElement("div", {
     className: "contentfieldset -template".concat(template, " "),
     style: Object.assign(getContentStyle(props), styleContent)
   }, children)));

package/lib/fieldset/types.d.ts

@@ -18,6 +18,8 @@ interface IFieldsetProps {
     hasError?: boolean;
     gridCols?: string;
     permissionAttr?: PermissionAttr | PermissionAttr[];
+    leftElements?: ReactNode;
+    rightElements?: ReactNode;
 }
 interface ExpandedElement extends Element {
     name?: string;

package/lib/form/Field.d.ts

@@ -6,6 +6,8 @@ import '../@types/DataCombo.js';
 import '../@types/PermissionAttr.js';
 import '../inputs/base/types.js';
 import '../@types/Period.js';
+import '../internals/types.js';
+import '../@types/Position.js';
 
 declare const _default: React__default.ForwardRefExoticComponent<Pick<IFieldProps & React__default.RefAttributes<unknown>, keyof IFieldProps | "key"> & React__default.RefAttributes<HTMLElement>>;
 

package/lib/form/FieldArray.d.ts

@@ -6,6 +6,8 @@ import '../@types/DataCombo.js';
 import '../@types/PermissionAttr.js';
 import '../inputs/base/types.js';
 import '../@types/Period.js';
+import '../internals/types.js';
+import '../@types/Position.js';
 
 declare const _default: React__default.ForwardRefExoticComponent<IFieldArrayProps & React__default.RefAttributes<HTMLElement>>;
 

package/lib/form/FieldArray.js

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

package/lib/form/FieldNumber.d.ts

@@ -6,6 +6,8 @@ import '../@types/DataCombo.js';
 import '../@types/PermissionAttr.js';
 import '../inputs/base/types.js';
 import '../@types/Period.js';
+import '../internals/types.js';
+import '../@types/Position.js';
 
 declare const _default: React__default.ForwardRefExoticComponent<IFieldProps & React__default.RefAttributes<HTMLElement>>;
 

package/lib/form/FieldPeriod.d.ts

@@ -6,6 +6,8 @@ import '../@types/DataCombo.js';
 import '../@types/PermissionAttr.js';
 import '../inputs/base/types.js';
 import '../@types/Period.js';
+import '../internals/types.js';
+import '../@types/Position.js';
 
 declare const _default: React__default.ForwardRefExoticComponent<IFieldPeriodProps & React__default.RefAttributes<HTMLElement>>;
 

package/lib/form/helpers.d.ts

@@ -6,6 +6,8 @@ import '../@types/DataCombo.js';
 import '../@types/PermissionAttr.js';
 import '../inputs/base/types.js';
 import '../@types/Period.js';
+import '../internals/types.js';
+import '../@types/Position.js';
 
 declare const securityBeforeUnload = "securityBeforeUnload";
 declare const FormContext: React__default.Context<FormContextProps>;

package/lib/form/index.d.ts

@@ -10,6 +10,8 @@ import '../@types/DataCombo.js';
 import '../@types/PermissionAttr.js';
 import '../inputs/base/types.js';
 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;