linear-react-components-ui 1.1.18-beta.16 → 1.1.18-beta.18

package/lib/dialog/base/Content.js

@@ -4,18 +4,19 @@ 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
   } = _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",
     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

@@ -32,6 +32,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) {
@@ -55,11 +56,23 @@ const BaseDialog = props => {
       handleClose();
     }
   };
-  const handleCloseOnEsc = event => {
+  const onKeyDownPress = event => {
     if (event.key === 'Escape') {
       handleClose();
     }
   };
+  const modalContainerWithoutBlur = event => {
+    var _modalContainerRef$cu, _wrapperEl$current;
+    const focusOnAnotherField = !((_modalContainerRef$cu = modalContainerRef.current) !== null && _modalContainerRef$cu !== void 0 && _modalContainerRef$cu.contains(event.relatedTarget));
+    const modalContent = (_wrapperEl$current = wrapperEl.current) === null || _wrapperEl$current === void 0 ? void 0 : _wrapperEl$current.querySelector('#modal-dialog-content');
+    const elementsFocusable = modalContent === null || modalContent === void 0 ? void 0 : modalContent.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+    if (focusOnAnotherField && elementsFocusable !== null && elementsFocusable !== void 0 && elementsFocusable.length) {
+      const firstElement = elementsFocusable[0];
+      setTimeout(() => {
+        firstElement.focus();
+      }, 150);
+    }
+  };
   const onDialogPositionChange = _ref => {
     let {
       positionX,
@@ -103,6 +116,8 @@ const BaseDialog = props => {
     if (wrapperEl.current) setIsDragging(false);
   };
   const createdModal = /*#__PURE__*/_react.default.createElement("div", {
+    ref: modalContainerRef,
+    onBlur: modalContainerWithoutBlur,
     className: "modalcontainer",
     onMouseDown: handleClickOutside,
     style: {
@@ -120,14 +135,23 @@ const BaseDialog = props => {
     style: (0, _style.default)(props),
     ref: wrapperEl
   }, children)));
+  (0, _react.useLayoutEffect)(() => {
+    const {
+      activeElement
+    } = document;
+    const lastElementActiveBeforeOpen = activeElement;
+    return () => {
+      lastElementActiveBeforeOpen === null || lastElementActiveBeforeOpen === void 0 ? void 0 : 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

@@ -132,7 +132,7 @@ const BaseDrawer = _ref => {
     className: "drawercontent ".concat(skeletonize ? '-skeletonized' : '', " ").concat(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/inputs/date/Dialog.js

@@ -14,12 +14,13 @@ const Dialog = _ref => {
     dialogSize
   } = _ref;
   return /*#__PURE__*/_react.default.createElement(_base.default, {
+    closeOnEsc: true,
+    closeOnOutsideClick: true,
+    handlerClose: () => handlerClose(false),
+    wrapperClassName: "",
     width: dialogSize.width,
     height: dialogSize.height,
-    onOpenChange: handlerClose,
-    closeOnOutsideClick: true,
-    closeOnEsc: true,
-    wrapperClassName: ""
+    onOpenChange: handlerClose
   }, children);
 };
 var _default = exports.default = Dialog;

package/lib/inputs/date/Dropdown.js

@@ -6,26 +6,34 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = require("react");
 var _reactDom = _interopRequireDefault(require("react-dom"));
-var _helpers = require("./helpers");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const body = document.getElementsByTagName('body')[0];
+const CALENDAR_BUTTON_WIDTH = 24;
+const CALENDAR_MIN_WIDTH = 250;
 const Dropdown = props => {
   const {
+    containerRef,
+    showButtonOpen,
     dropdownRef,
-    children
+    children,
+    inputDimensions
   } = props;
   const elementRef = (0, _react.useRef)(document.createElement('div'));
+  const width = inputDimensions && inputDimensions.width + (showButtonOpen ? CALENDAR_BUTTON_WIDTH : 0) + 4 || CALENDAR_MIN_WIDTH;
   (0, _react.useEffect)(() => {
+    var _containerRef$current;
     elementRef.current.className = 'datepicker-component';
-    elementRef.current.setAttribute('style', (0, _helpers.getCalendarDropdownStyle)(props));
-    body.appendChild(elementRef.current);
+    elementRef.current.style.width = String(width).concat('px');
+    elementRef.current.style.top = String(inputDimensions === null || inputDimensions === void 0 ? void 0 : inputDimensions.bottom).concat('px');
+    (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.appendChild(elementRef.current);
     dropdownRef(elementRef.current);
     return () => {
-      body.removeChild(elementRef.current);
+      var _containerRef$current2;
+      (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.removeChild(elementRef.current);
     };
   }, []);
   (0, _react.useEffect)(() => {
-    elementRef.current.setAttribute('style', (0, _helpers.getCalendarDropdownStyle)(props));
+    elementRef.current.style.width = String(width).concat('px');
+    elementRef.current.style.top = String(inputDimensions === null || inputDimensions === void 0 ? void 0 : inputDimensions.bottom).concat('px');
   }, [props]);
   return /*#__PURE__*/_reactDom.default.createPortal(children, elementRef.current);
 };

package/lib/inputs/date/helpers.d.ts

@@ -1,17 +1,7 @@
 import moment from 'moment';
-import { IDateDropdownProps } from './types.js';
-import 'react';
-import '../../@types/ColorStyles.js';
-import '../../@types/PermissionAttr.js';
-import '../base/types.js';
-import '../../@types/Align.js';
-import '../../@types/Period.js';
-import '../../internals/types.js';
-import '../../@types/Position.js';
 
 declare const PT_BR_FORMAT = "DD/MM/YYYY";
 declare const EN_US_FORMAT = "YYYY-MM-DD";
-declare const getCalendarDropdownStyle: ({ topPosition, leftPosition, width, minWidth, }: IDateDropdownProps) => string;
 declare const getMomentValue: (value: string) => moment.Moment;
 
-export { EN_US_FORMAT, PT_BR_FORMAT, getCalendarDropdownStyle, getMomentValue };
+export { EN_US_FORMAT, PT_BR_FORMAT, getMomentValue };

package/lib/inputs/date/helpers.js

@@ -3,21 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getMomentValue = exports.getCalendarDropdownStyle = exports.PT_BR_FORMAT = exports.EN_US_FORMAT = void 0;
+exports.getMomentValue = exports.PT_BR_FORMAT = exports.EN_US_FORMAT = void 0;
 var _moment = _interopRequireDefault(require("moment"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const PT_BR_FORMAT = exports.PT_BR_FORMAT = 'DD/MM/YYYY';
 const EN_US_FORMAT = exports.EN_US_FORMAT = 'YYYY-MM-DD';
-const getCalendarDropdownStyle = _ref => {
-  let {
-    topPosition,
-    leftPosition,
-    width,
-    minWidth
-  } = _ref;
-  return "top: ".concat(topPosition, "px;\n  left: ").concat(leftPosition, "px;\n  width: ").concat(width, "px;\n  min-width: ").concat(minWidth, "px;");
-};
-exports.getCalendarDropdownStyle = getCalendarDropdownStyle;
 const getMomentValue = value => {
   let newValue = value;
   if ((0, _moment.default)(newValue, PT_BR_FORMAT, true).isValid()) {

package/lib/inputs/date/index.js

@@ -6,23 +6,19 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _moment = _interopRequireDefault(require("moment"));
-var _BaseMask = _interopRequireDefault(require("../mask/BaseMask"));
+var _Dialog = _interopRequireDefault(require("./Dialog"));
 var _Dropdown = _interopRequireDefault(require("./Dropdown"));
-var _calendar = _interopRequireDefault(require("../../calendar"));
-require("../../assets/styles/datepicker.scss");
-var contants = _interopRequireWildcard(require("../../internals/constants"));
 var _buttons = _interopRequireDefault(require("../../buttons"));
-var _icons = _interopRequireDefault(require("../../icons"));
-var _Dialog = _interopRequireDefault(require("./Dialog"));
+var _gridlayout = _interopRequireDefault(require("../../gridlayout"));
+var _calendar = _interopRequireDefault(require("../../calendar"));
+var _BaseMask = _interopRequireDefault(require("../mask/BaseMask"));
 var _helpers = require("./helpers");
+require("../../assets/styles/datepicker.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; }
 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 CALENDAR_BUTTON_WIDTH = 24;
-const CALENDAR_MIN_WIDTH = 250;
 const DatePicker = props => {
-  var _window;
   const {
     showButtonOpen = true,
     openOnFocus = true,
@@ -34,69 +30,105 @@ const DatePicker = props => {
     name = '',
     inputRef: inputRefProp,
     dialogSize = {
-      width: '350px',
-      height: '350px'
-    }
+      width: '384px',
+      height: '384px'
+    },
+    gridLayout,
+    shouldCloseOnEsc = true
   } = props;
   const [valueState, setValueState] = (0, _react.useState)(value ? (0, _helpers.getMomentValue)(value) : undefined);
-  const [valueFromProps, setValueFromProps] = (0, _react.useState)(value);
   const [showCalendar, setShowCalendar] = (0, _react.useState)(false);
+  const [valueFromProps, setValueFromProps] = (0, _react.useState)(value);
   const [inputDimensions, setInputDimensions] = (0, _react.useState)();
-  const [formatedLeftPosition, setFormatedLeftPosition] = (0, _react.useState)();
+  const [calendarOnDialog, setCalendarOnDialog] = (0, _react.useState)(false);
   const [onDenied, setOnDenied] = (0, _react.useState)({
     disabled: false,
     readOnly: false,
     unvisible: false,
     hideContent: false
   });
-  const inputRef = (0, _react.useRef)();
+  const inputDateRef = (0, _react.useRef)();
   const buttonOpenRef = (0, _react.useRef)();
   const dropdownContainer = (0, _react.useRef)();
-  const [insideDropdown, setInsideDropdown] = (0, _react.useState)(false);
+  const currentDateButtonRef = (0, _react.useRef)();
+  const calendarContainerRef = (0, _react.useRef)(null);
+  const datePickerContainerRef = (0, _react.useRef)(null);
   const onScreenResize = () => {
-    var _inputRef$current;
-    setInputDimensions(inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.getBoundingClientRect());
+    var _inputDateRef$current;
+    setInputDimensions(inputDateRef === null || inputDateRef === void 0 ? void 0 : (_inputDateRef$current = inputDateRef.current) === null || _inputDateRef$current === void 0 ? void 0 : _inputDateRef$current.getBoundingClientRect());
   };
-  const onClickOutside = event => {
-    var _buttonOpenRef$curren;
-    const {
-      target
-    } = event;
-    if (!dropdownContainer || target === inputRef.current || target === buttonOpenRef.current) return;
-    if (target !== dropdownContainer.current && dropdownContainer && dropdownContainer.current && !dropdownContainer.current.contains(target) && buttonOpenRef && !(buttonOpenRef !== null && buttonOpenRef !== void 0 && (_buttonOpenRef$curren = buttonOpenRef.current) !== null && _buttonOpenRef$curren !== void 0 && _buttonOpenRef$curren.contains(target))) {
+  const onCloseDateDialog = () => {
+    setShowCalendar(false);
+    if (showCalendarInDialog) {
+      setTimeout(() => {
+        var _inputDateRef$current2;
+        setCalendarOnDialog(false);
+        (_inputDateRef$current2 = inputDateRef.current) === null || _inputDateRef$current2 === void 0 ? void 0 : _inputDateRef$current2.focus();
+      }, 100);
+    }
+  };
+  const onCloseWithoutBlur = event => {
+    var _datePickerContainerR;
+    const focusOnAnotherField = !((_datePickerContainerR = datePickerContainerRef.current) !== null && _datePickerContainerR !== void 0 && _datePickerContainerR.contains(event.relatedTarget));
+    if (!showCalendarInDialog && showCalendar && focusOnAnotherField) {
       setShowCalendar(false);
     }
   };
+  const onKeyDownPress = event => {
+    if (shouldCloseOnEsc && showCalendar && event && event.key && event.key === 'Escape') {
+      var _inputDateRef$current3;
+      event.preventDefault();
+      setShowCalendar(false);
+      (_inputDateRef$current3 = inputDateRef.current) === null || _inputDateRef$current3 === void 0 ? void 0 : _inputDateRef$current3.focus();
+    }
+    if (showCalendar && showCalendarInDialog && event && event.key && event.key === 'Tab') {
+      var _calendarContainerRef, _calendarContainerRef2;
+      const buttonForNavigateCalendar = (_calendarContainerRef = calendarContainerRef.current) === null || _calendarContainerRef === void 0 ? void 0 : _calendarContainerRef.getElementsByClassName('navbutton');
+      const datePicked = (_calendarContainerRef2 = calendarContainerRef.current) === null || _calendarContainerRef2 === void 0 ? void 0 : _calendarContainerRef2.getElementsByClassName('-selectedday');
+      const buttonDatePicked = datePicked[0].firstChild;
+      const buttonsForFocus = Array.from([...buttonForNavigateCalendar, buttonDatePicked]);
+      const firstElement = buttonsForFocus[0];
+      const lastElement = buttonsForFocus[buttonsForFocus.length - 1];
+      if (event.shiftKey && document.activeElement === firstElement) {
+        event.preventDefault();
+        lastElement.focus();
+      } else if (!event.shiftKey && document.activeElement === lastElement) {
+        event.preventDefault();
+        firstElement.focus();
+      }
+    }
+    event.stopPropagation();
+  };
+  const keepPositionCalendarByScroll = () => {
+    var _inputDateRef$current4;
+    const inputDateDimensions = (_inputDateRef$current4 = inputDateRef.current) === null || _inputDateRef$current4 === void 0 ? void 0 : _inputDateRef$current4.getBoundingClientRect();
+    const positionTop = inputDateDimensions && inputDateDimensions.bottom;
+    if (dropdownContainer && dropdownContainer.current && inputDateDimensions) {
+      dropdownContainer.current.style.top = String(positionTop).concat('px');
+    }
+  };
   const openCalendar = () => {
     setShowCalendar(true);
-    if (inputRef.current) {
-      setInputDimensions(inputRef.current.getBoundingClientRect());
+    if (inputDateRef.current) {
+      var _inputDateRef$current5;
+      inputDateRef.current.focus();
+      setInputDimensions((_inputDateRef$current5 = inputDateRef.current) === null || _inputDateRef$current5 === void 0 ? void 0 : _inputDateRef$current5.getBoundingClientRect());
     }
-  };
-  const onMouseMove = event => {
-    const {
-      target
-    } = event;
-    setInsideDropdown(false);
-    if (dropdownContainer !== undefined && dropdownContainer.current) {
-      if (target === dropdownContainer.current || dropdownContainer.current.contains(target)) {
-        setInsideDropdown(true);
-      }
+    if (showCalendarInDialog) {
+      setTimeout(() => {
+        var _currentDateButtonRef;
+        (_currentDateButtonRef = currentDateButtonRef.current) === null || _currentDateButtonRef === void 0 ? void 0 : _currentDateButtonRef.focus();
+      }, 100);
     }
   };
   const onInputFocus = e => {
     if (props.onFocus) props.onFocus(e);
-    if (openOnFocus) openCalendar();
+    if (openOnFocus && !showCalendar && !calendarOnDialog) {
+      openCalendar();
+    }
   };
   const onInputBlur = e => {
     if (props.onBlur) props.onBlur(e);
-    if (!insideDropdown) setShowCalendar(false);
-  };
-  const onInputKeyDown = event => {
-    if (Number(event.code) === contants.keyCodes.TAB) {
-      setInsideDropdown(false);
-      setShowCalendar(false);
-    }
   };
   const isValidDate = date => {
     if (typeof date === 'object' && !(date instanceof Date)) {
@@ -135,11 +167,9 @@ const DatePicker = props => {
       }
     }
   };
-  const setValue = function () {
-    var _inputRef$current2;
-    let valueParam = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-    let e = arguments.length > 1 ? arguments[1] : undefined;
-    if (showCalendar && setFocusOnSelect) (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
+  const setValue = (valueParam, e) => {
+    var _inputDateRef$current6;
+    if (showCalendar && setFocusOnSelect) (_inputDateRef$current6 = inputDateRef.current) === null || _inputDateRef$current6 === void 0 ? void 0 : _inputDateRef$current6.focus();
     if (props.onComplete) props.onComplete(e, valueParam);
     if (props.onChange) onInputChange({
       target: {
@@ -154,70 +184,51 @@ const DatePicker = props => {
   const getButtonOpen = () => {
     if (!showButtonOpen) return undefined;
     return /*#__PURE__*/_react.default.createElement(_buttons.default, {
-      key: "button-1313414141",
-      boxShadow: false,
-      icon: /*#__PURE__*/_react.default.createElement(_icons.default, {
-        name: "calendar",
-        size: 16
-      }),
+      key: "button-open-date-picker",
+      disabled: shouldDisable(),
+      tabIndex: -1,
+      customClass: "calendar-button",
+      iconName: "calendar",
+      title: showCalendar ? 'Fechar Calendário' : 'Abrir Calendário',
       onClick: () => {
-        openCalendar();
+        if (showCalendar) {
+          setShowCalendar(false);
+        } else openCalendar();
       },
-      customClass: "calendar-button",
-      tabIndex: -1,
       targetRef: ref => {
         buttonOpenRef.current = ref;
-      },
-      disabled: shouldDisable()
+      }
     });
   };
   const getCalendar = (valueCalendar, calendarColorStyle) => /*#__PURE__*/_react.default.createElement(_calendar.default, {
+    colorStyle: calendarColorStyle,
     currentDate: valueCalendar !== undefined ? valueCalendar : (0, _moment.default)(),
     onDateChange: date => {
       setValue(date.format(_helpers.PT_BR_FORMAT), undefined);
+      if (showCalendarInDialog) setCalendarOnDialog(false);
     },
-    colorStyle: calendarColorStyle
+    currentDateButton: buttonElement => currentDateButtonRef.current = buttonElement,
+    calendarContainer: calendarContainer => {
+      calendarContainerRef.current = calendarContainer;
+    }
   });
-  const getWrapperComponent = () => {
+  const getCalendarComponent = () => {
     if (onDenied && onDenied.readOnly) return null;
     if (showCalendarInDialog) {
       return /*#__PURE__*/_react.default.createElement(_Dialog.default, {
         dialogSize: dialogSize,
-        handlerClose: setShowCalendar
+        handlerClose: onCloseDateDialog
       }, getCalendar(valueState, props === null || props === void 0 ? void 0 : props.calendarColorStyle));
     }
     return /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
-      topPosition: inputDimensions ? inputDimensions.top + inputDimensions.height + 5 : '',
-      leftPosition: inputDimensions ? formatedLeftPosition : '',
-      minWidth: CALENDAR_MIN_WIDTH,
-      width: inputDimensions ? inputDimensions.width + (showButtonOpen ? CALENDAR_BUTTON_WIDTH : 0) : '',
+      showButtonOpen: showButtonOpen,
+      inputDimensions: inputDimensions,
+      containerRef: datePickerContainerRef,
       dropdownRef: el => {
         dropdownContainer.current = el;
       }
     }, getCalendar(valueState, props === null || props === void 0 ? void 0 : props.calendarColorStyle));
   };
-  (0, _react.useEffect)(() => {
-    const screenWidth = window.innerWidth;
-    if (inputDimensions && screenWidth < inputDimensions.left + CALENDAR_MIN_WIDTH) {
-      setFormatedLeftPosition(inputDimensions.left - (CALENDAR_MIN_WIDTH - inputDimensions.width - CALENDAR_BUTTON_WIDTH));
-    } else {
-      setFormatedLeftPosition(inputDimensions === null || inputDimensions === void 0 ? void 0 : inputDimensions.left);
-    }
-  }, [(_window = window) === null || _window === void 0 ? void 0 : _window.innerWidth, inputDimensions]);
-  (0, _react.useEffect)(() => {
-    window.addEventListener('resize', onScreenResize);
-    document.addEventListener('click', onClickOutside);
-    document.addEventListener('mousemove', onMouseMove);
-    if (inputRef.current) onScreenResize();
-    return () => {
-      window.removeEventListener('resize', onScreenResize);
-      document.removeEventListener('click', onClickOutside);
-      document.removeEventListener('mousemove', onMouseMove);
-    };
-
-    // TODO: Procurar solução melhor.
-    // setTimeout(() => { this.onScreenResize(); }, 300);
-  }, [inputRef.current]);
   (0, _react.useEffect)(() => {
     if (value && (0, _moment.default)(value, _helpers.EN_US_FORMAT).format() !== 'Invalid date' && (0, _moment.default)(valueFromProps, _helpers.EN_US_FORMAT).format() !== (0, _moment.default)(value, _helpers.EN_US_FORMAT).format()) {
       setValueState((0, _moment.default)(value, _helpers.EN_US_FORMAT));
@@ -227,31 +238,58 @@ const DatePicker = props => {
       setValueFromProps(value);
     }
   }, [value]);
+  (0, _react.useEffect)(() => {
+    window.addEventListener('resize', onScreenResize);
+    document.addEventListener('keydown', onKeyDownPress);
+    if (inputDateRef.current) onScreenResize();
+    if (showCalendar && showCalendarInDialog) setCalendarOnDialog(true);
+    return () => {
+      window.removeEventListener('resize', onScreenResize);
+      document.removeEventListener('keydown', onKeyDownPress);
+    };
+  }, [inputDateRef.current, showCalendar]);
+  (0, _react.useEffect)(() => {
+    var _document$getElementB;
+    document.addEventListener('scroll', keepPositionCalendarByScroll);
+    (_document$getElementB = document.getElementById('modal-dialog-content')) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.addEventListener('scroll', keepPositionCalendarByScroll);
+    return () => {
+      var _document$getElementB2;
+      document.removeEventListener('scroll', keepPositionCalendarByScroll);
+      (_document$getElementB2 = document.getElementById('modal-dialog-content')) === null || _document$getElementB2 === void 0 ? void 0 : _document$getElementB2.removeEventListener('scroll', keepPositionCalendarByScroll);
+    };
+  }, []);
   if (onDenied && onDenied.unvisible) return null;
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_BaseMask.default, _extends({}, props, {
+  const component = () => /*#__PURE__*/_react.default.createElement("div", {
+    ref: datePickerContainerRef,
+    onBlur: onCloseWithoutBlur,
+    className: "datepicker-container"
+  }, /*#__PURE__*/_react.default.createElement(_BaseMask.default, _extends({}, props, {
+    gridLayout: undefined,
     value: !valueState ? ' ' : valueState.format(_helpers.PT_BR_FORMAT),
     mask: "00/00/0000",
-    onComplete: e => {
-      if (e) {
-        var _e$target;
-        setValue((_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.maskedValue, e);
+    onComplete: (e, date) => {
+      if (date) {
+        setValue(date, e);
       }
     },
     onBlur: onInputBlur,
     onFocus: e => {
       onInputFocus(e);
     },
-    onKeyDown: onInputKeyDown,
-    onChange: (e, __, date) => {
-      if (date) onInputChange(e, e.target.value);
+    onChange: (e, date) => {
+      if (date) onInputChange(e, date);
     },
     inputRef: el => {
-      inputRef.current = el;
+      inputDateRef.current = el;
       if (inputRefProp) inputRefProp.current = el;
     },
     rightElements: getButtonOpen(),
     required: required,
     handlerSetOnDenied: () => setOnDenied(onDenied)
-  })), showCalendar && getWrapperComponent());
+  })), showCalendar && getCalendarComponent());
+  return !gridLayout ? component() : /*#__PURE__*/_react.default.createElement(_gridlayout.default, {
+    customClass: "-withinput",
+    cols: gridLayout
+  }, component());
 };
 var _default = exports.default = DatePicker;

package/lib/inputs/date/types.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ReactNode, RefObject } from 'react';
 import { ColorStyles } from '../../@types/ColorStyles.js';
 import { PermissionAttr } from '../../@types/PermissionAttr.js';
 import { CustomInputEvent } from '../base/types.js';
@@ -9,10 +9,11 @@ import '../../@types/Position.js';
 
 interface IDatePickerProps {
     value?: string;
+    openOnFocus?: boolean;
     showButtonOpen?: boolean;
+    shouldCloseOnEsc?: boolean;
     shouldCloseOnSelect?: boolean;
     setFocusOnSelect?: boolean;
-    openOnFocus?: boolean;
     showCalendarInDialog?: boolean;
     inputRef?: React.MutableRefObject<HTMLInputElement | HTMLTextAreaElement | null>;
     dialogSize?: {
@@ -37,14 +38,14 @@ interface IDatePickerProps {
     disabled?: boolean;
     permissionAttr?: PermissionAttr;
     label?: string;
+    gridLayout?: string;
 }
 interface IDateDropdownProps {
     children: ReactNode | ReactNode[];
     dropdownRef: (el: HTMLDivElement) => void;
-    topPosition: number | string;
-    leftPosition?: number | string;
-    width: number | string;
-    minWidth: number | string;
+    containerRef: RefObject<HTMLDivElement | HTMLElement>;
+    showButtonOpen: boolean;
+    inputDimensions?: DOMRect;
 }
 interface IDateDialogProps {
     children: ReactNode | ReactNode[];

package/lib/inputs/period/Dialog.d.ts

@@ -9,6 +9,6 @@ import '../../@types/Align.js';
 import '../../internals/types.js';
 import '../../@types/Position.js';
 
-declare const Dialog: ({ onOpenChange, children, dialogSize }: IDialogProps) => JSX.Element;
+declare const Dialog: ({ onOpenChange, handlerClose, children, dialogSize }: IDialogProps) => JSX.Element;
 
 export { Dialog as default };

package/lib/inputs/period/Dialog.js

@@ -10,16 +10,18 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 const Dialog = _ref => {
   let {
     onOpenChange,
+    handlerClose,
     children,
     dialogSize
   } = _ref;
   return /*#__PURE__*/_react.default.createElement(_base.default, {
+    closeOnOutsideClick: true,
+    closeOnEsc: true,
+    wrapperClassName: "",
     width: dialogSize.width,
     height: dialogSize.height,
     onOpenChange: onOpenChange,
-    closeOnOutsideClick: true,
-    closeOnEsc: true,
-    wrapperClassName: ""
+    handlerClose: () => handlerClose(false)
   }, children);
 };
 var _default = exports.default = Dialog;