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

package/lib/inputs/period/PeriodList.js

@@ -38,24 +38,15 @@ const PeriodList = _ref => {
     className: "dropdown-period"
   }, periodOptions.map(item => {
     const itemSelected = selected === item.id;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      role: "button",
+    return /*#__PURE__*/_react.default.createElement("button", {
+      key: String('item-').concat(item.id),
       tabIndex: -1,
-      onKeyDown: () => {},
-      key: "item-".concat(item.id),
       className: (0, _helper.getDropdownItemCssClass)(itemSelected),
       onClick: () => {
         const dates = item.id !== 'custom' ? (0, _helper.CalcDatesByPeriod)(item.id) : null;
         handleOnSelect(item.id, dates);
       }
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      role: "button",
-      className: "menubutton",
-      tabIndex: -1,
-      onKeyPress: () => {}
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: "label"
-    }, item.label)));
+    }, item.label);
   }));
 };
 var _default = exports.default = PeriodList;

package/lib/inputs/period/index.js

@@ -14,11 +14,10 @@ var _buttons = _interopRequireDefault(require("../../buttons"));
 var _icons = _interopRequireDefault(require("../../icons"));
 var _Dialog = _interopRequireDefault(require("./Dialog"));
 var _hint = _interopRequireDefault(require("../../hint"));
+var _gridlayout = _interopRequireDefault(require("../../gridlayout"));
 var helperBase = _interopRequireWildcard(require("../base/helpers"));
 require("../../assets/styles/periodpicker.scss");
 var _errorMessage = require("../errorMessage");
-var _textContent = _interopRequireDefault(require("../../textContent"));
-var _popover = _interopRequireDefault(require("../../popover"));
 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,10 +38,10 @@ const PeriodPicker = props => {
       height: '350px'
     },
     hint,
-    hintPosition = 'below',
-    themePopover = 'light',
-    popoverAlign = 'left'
+    gridLayout
   } = props;
+  const idValueInitial = (0, _react.useId)();
+  const idValueFinal = (0, _react.useId)();
   const [valueInitial, setValueInitial] = (0, _react.useState)(props.value && (0, _moment.default)(props.value.initial, 'DD/MM/YYYY'));
   const [valueFinal, setValueFinal] = (0, _react.useState)(props.value && (0, _moment.default)(props.value.final, 'DD/MM/YYYY'));
   const [valuePeriodSelection, setValuePeriodSelection] = (0, _react.useState)('week');
@@ -51,53 +50,128 @@ const PeriodPicker = props => {
   const [showPeriodSelection, setShowPeriodSelection] = (0, _react.useState)(false);
   const [inputDimensions, setInputDimensions] = (0, _react.useState)();
   const [onDenied, setOnDenied] = (0, _react.useState)();
+  const [currentTypeDate, setCurrentTypeDate] = (0, _react.useState)('valueInitial');
   const wrapperBaseInputPeriodRef = (0, _react.useRef)(null);
   const inputContainerRef = (0, _react.useRef)(null);
   const inputInitialRef = (0, _react.useRef)(null);
   const buttonOpenRef = (0, _react.useRef)(null);
+  const currentDateButtonRef = (0, _react.useRef)();
   const buttonSelectPeriodRef = (0, _react.useRef)(null);
   const dropdownCalendarContainer = (0, _react.useRef)(null);
   const dropdownPeriodContainer = (0, _react.useRef)(null);
   const inputFinalRef = (0, _react.useRef)(null);
+  const calendarContainerRef = (0, _react.useRef)(null);
   const onScreenResize = () => {
     var _inputContainerRef$cu;
-    const inputDimensionsAux = inputContainerRef === null || inputContainerRef === void 0 ? void 0 : (_inputContainerRef$cu = inputContainerRef.current) === null || _inputContainerRef$cu === void 0 ? void 0 : _inputContainerRef$cu.getBoundingClientRect();
-    setInputDimensions(inputDimensionsAux);
+    setInputDimensions(inputContainerRef === null || inputContainerRef === void 0 ? void 0 : (_inputContainerRef$cu = inputContainerRef.current) === null || _inputContainerRef$cu === void 0 ? void 0 : _inputContainerRef$cu.getBoundingClientRect());
   };
-  const onClickOutside = event => {
-    const {
-      target
-    } = event;
-    if (target === inputContainerRef.current || target === inputInitialRef.current || target === inputFinalRef.current || target === buttonOpenRef.current || target === buttonSelectPeriodRef.current) {
-      return;
+  const onBlurWithoutWrapper = event => {
+    var _wrapperBaseInputPeri;
+    const focusOnAnotherField = !((_wrapperBaseInputPeri = wrapperBaseInputPeriodRef.current) !== null && _wrapperBaseInputPeri !== void 0 && _wrapperBaseInputPeri.contains(event.relatedTarget));
+    if (!showCalendarInDialog && showCalendarValueInitial && focusOnAnotherField) {
+      setShowCalendarValueInitial(false);
     }
-    if (dropdownCalendarContainer.current && dropdownCalendarContainer.current.contains(target)) {
-      return;
+    if (!showCalendarInDialog && showCalendarValueFinal && focusOnAnotherField) {
+      setShowCalendarValueFinal(false);
     }
-    if (dropdownPeriodContainer.current && dropdownPeriodContainer.current.contains(target)) return;
-    setShowCalendarValueInitial(false);
-    setShowCalendarValueFinal(false);
-    setShowPeriodSelection(false);
   };
-  const onCloseCalendarWithoutFocus = event => {
-    if (event.key === 'Tab') {
-      if (wrapperBaseInputPeriodRef.current && wrapperBaseInputPeriodRef.current.contains(document.activeElement) && document.activeElement instanceof HTMLInputElement) {
+  const onKeyDownPress = event => {
+    const {
+      target
+    } = event;
+    const targetElement = target;
+    if (calendarContainerRef.current && event && event.key && event.key === 'Escape') {
+      event.preventDefault();
+      targetElement.focus();
+      if (showCalendarValueInitial) {
+        if (targetElement.id !== 'valueInitial') {
+          var _inputInitialRef$curr;
+          (_inputInitialRef$curr = inputInitialRef.current) === null || _inputInitialRef$curr === void 0 ? void 0 : _inputInitialRef$curr.focus();
+        }
         setShowCalendarValueInitial(false);
+      }
+      if (showCalendarValueFinal) {
+        if (targetElement.id !== 'valueFinal') {
+          var _inputFinalRef$curren;
+          (_inputFinalRef$curren = inputFinalRef.current) === null || _inputFinalRef$curren === void 0 ? void 0 : _inputFinalRef$curren.focus();
+        }
         setShowCalendarValueFinal(false);
       }
+      if (showPeriodSelection) {
+        var _inputFinalRef$curren2;
+        setShowPeriodSelection(false);
+        (_inputFinalRef$curren2 = inputFinalRef.current) === null || _inputFinalRef$curren2 === void 0 ? void 0 : _inputFinalRef$curren2.focus();
+        setShowCalendarValueFinal(false);
+      }
+    }
+    if (calendarContainerRef.current && 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];
+      const calendarOpenedIsInitial = calendarContainerRef.current.id === 'valueInitial';
+      if (!event.shiftKey && showCalendarValueInitial && document.activeElement === inputInitialRef.current) {
+        event.preventDefault();
+        firstElement.focus();
+      }
+      if (event.shiftKey && calendarOpenedIsInitial && document.activeElement === firstElement) {
+        var _inputInitialRef$curr2;
+        event.preventDefault();
+        (_inputInitialRef$curr2 = inputInitialRef.current) === null || _inputInitialRef$curr2 === void 0 ? void 0 : _inputInitialRef$curr2.focus();
+      }
+      if (!event.shiftKey && calendarOpenedIsInitial && document.activeElement === lastElement) {
+        var _inputFinalRef$curren3;
+        event.preventDefault();
+        (_inputFinalRef$curren3 = inputFinalRef.current) === null || _inputFinalRef$curren3 === void 0 ? void 0 : _inputFinalRef$curren3.focus();
+      }
+    }
+    event.stopPropagation();
+  };
+  const keepPositionCalendarByScroll = () => {
+    var _inputContainerRef$cu2;
+    const inputDateDimensions = (_inputContainerRef$cu2 = inputContainerRef.current) === null || _inputContainerRef$cu2 === void 0 ? void 0 : _inputContainerRef$cu2.getBoundingClientRect();
+    const positionTop = inputDateDimensions && inputDateDimensions.bottom;
+    if (dropdownCalendarContainer && dropdownCalendarContainer.current && inputDateDimensions) {
+      dropdownCalendarContainer.current.style.top = String(positionTop).concat('px');
     }
   };
   (0, _react.useEffect)(() => {
+    var _document$getElementB;
     window.addEventListener('resize', onScreenResize);
-    document.addEventListener('click', onClickOutside);
-    document.addEventListener('keydown', onCloseCalendarWithoutFocus);
+    document.addEventListener('scroll', keepPositionCalendarByScroll);
+    (_document$getElementB = document.getElementById('modal-dialog-content')) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.addEventListener('scroll', keepPositionCalendarByScroll);
     if (inputContainerRef.current) onScreenResize();
+    if (inputInitialRef && inputInitialRef.current) inputInitialRef.current.id = idValueInitial;
+    if (inputFinalRef && inputFinalRef.current) inputFinalRef.current.id = idValueFinal;
     return () => {
+      var _document$getElementB2;
       window.removeEventListener('resize', onScreenResize);
-      document.removeEventListener('click', onClickOutside);
-      document.removeEventListener('keydown', onCloseCalendarWithoutFocus);
+      document.removeEventListener('scroll', keepPositionCalendarByScroll);
+      (_document$getElementB2 = document.getElementById('modal-dialog-content')) === null || _document$getElementB2 === void 0 ? void 0 : _document$getElementB2.removeEventListener('scroll', keepPositionCalendarByScroll);
     };
   }, []);
+  (0, _react.useEffect)(() => {
+    document.addEventListener('keydown', onKeyDownPress);
+    return () => {
+      document.removeEventListener('keydown', onKeyDownPress);
+    };
+  }, [showCalendarValueFinal, showCalendarValueInitial, showPeriodSelection, calendarContainerRef.current]);
+  (0, _react.useEffect)(() => {
+    if (valueFinal && valueInitial && (0, _moment.default)(valueFinal).isBefore((0, _moment.default)(valueInitial))) {
+      setValueInitial(valueFinal);
+      setValueFinal(valueInitial);
+    } else if (props.onChange) {
+      const initial = valueInitial ? valueInitial.format('YYYY-MM-DD') : '';
+      const final = valueFinal ? valueFinal.format('YYYY-MM-DD') : '';
+      props.onChange(undefined, '', {
+        initial,
+        final
+      });
+    }
+  }, [valueInitial, valueFinal]);
   (0, _react.useEffect)(() => {
     if (props.value && !((0, _moment.default)(props.value.initial).isSame(valueInitial) || (0, _moment.default)(props.value.final).isSame(valueFinal))) {
       const {
@@ -118,17 +192,71 @@ const PeriodPicker = props => {
   }, [props.value]);
   const openCalendar = calendarName => {
     if (calendarName === 'valueInitial') {
+      setCurrentTypeDate('valueInitial');
       setShowCalendarValueFinal(false);
-      setShowCalendarValueInitial(true);
-    } else {
+      if (!showCalendarValueInitial) {
+        var _inputInitialRef$curr3;
+        (_inputInitialRef$curr3 = inputInitialRef.current) === null || _inputInitialRef$curr3 === void 0 ? void 0 : _inputInitialRef$curr3.focus();
+        if (showCalendarInDialog) {
+          setTimeout(() => {
+            var _currentDateButtonRef;
+            (_currentDateButtonRef = currentDateButtonRef.current) === null || _currentDateButtonRef === void 0 ? void 0 : _currentDateButtonRef.focus();
+          }, 100);
+        }
+        setShowCalendarValueInitial(true);
+      }
+    }
+    if (calendarName === 'valueFinal') {
+      setCurrentTypeDate('valueFinal');
       setShowCalendarValueInitial(false);
-      setShowCalendarValueFinal(true);
+      if (!showCalendarValueFinal) {
+        var _inputFinalRef$curren4;
+        (_inputFinalRef$curren4 = inputFinalRef.current) === null || _inputFinalRef$curren4 === void 0 ? void 0 : _inputFinalRef$curren4.focus();
+        if (showCalendarInDialog) {
+          setTimeout(() => {
+            var _currentDateButtonRef2;
+            (_currentDateButtonRef2 = currentDateButtonRef.current) === null || _currentDateButtonRef2 === void 0 ? void 0 : _currentDateButtonRef2.focus();
+          }, 100);
+        }
+        setShowCalendarValueFinal(true);
+      }
     }
-    setShowPeriodSelection(false);
     if (inputContainerRef.current) {
       setInputDimensions(inputContainerRef.current.getBoundingClientRect());
     }
   };
+  const closeCalendar = calendarName => {
+    if (calendarName === 'valueInitial') {
+      var _inputInitialRef$curr4;
+      (_inputInitialRef$curr4 = inputInitialRef.current) === null || _inputInitialRef$curr4 === void 0 ? void 0 : _inputInitialRef$curr4.focus();
+    }
+    if (calendarName === 'valueFinal') {
+      var _inputFinalRef$curren5;
+      (_inputFinalRef$curren5 = inputFinalRef.current) === null || _inputFinalRef$curren5 === void 0 ? void 0 : _inputFinalRef$curren5.focus();
+    }
+    setShowCalendarValueInitial(false);
+    setShowCalendarValueFinal(false);
+  };
+  const onCloseDateDialog = calendarName => {
+    setTimeout(() => {
+      if (calendarName === 'valueInitial') {
+        var _inputInitialRef$curr5;
+        (_inputInitialRef$curr5 = inputInitialRef.current) === null || _inputInitialRef$curr5 === void 0 ? void 0 : _inputInitialRef$curr5.focus();
+        setShowCalendarValueInitial(false);
+      }
+      if (calendarName === 'valueFinal') {
+        var _inputFinalRef$curren6;
+        (_inputFinalRef$curren6 = inputFinalRef.current) === null || _inputFinalRef$curren6 === void 0 ? void 0 : _inputFinalRef$curren6.focus();
+        setShowCalendarValueFinal(false);
+      }
+      if (calendarName === 'periodSelection') {
+        var _inputFinalRef$curren7;
+        setShowPeriodSelection(false);
+        (_inputFinalRef$curren7 = inputFinalRef.current) === null || _inputFinalRef$curren7 === void 0 ? void 0 : _inputFinalRef$curren7.focus();
+        setShowCalendarValueFinal(false);
+      }
+    }, 100);
+  };
   const onInputFocus = e => {
     const {
       name
@@ -164,12 +292,12 @@ const PeriodPicker = props => {
     }
   };
   const setValue = function (event, value) {
-    var _inputInitialRef$curr, _inputFinalRef$curren;
+    var _inputInitialRef$curr6, _inputFinalRef$curren8;
     let shouldOpenDropdown = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
     const valueDateName = event ? event.target.name : '';
     const dateObj = (0, _moment.default)(value, 'DD/MM/YYYY');
-    if (showCalendarValueInitial) (_inputInitialRef$curr = inputInitialRef.current) === null || _inputInitialRef$curr === void 0 ? void 0 : _inputInitialRef$curr.focus();
-    if (showCalendarValueFinal) (_inputFinalRef$curren = inputFinalRef.current) === null || _inputFinalRef$curren === void 0 ? void 0 : _inputFinalRef$curren.focus();
+    if (showCalendarValueInitial) (_inputInitialRef$curr6 = inputInitialRef.current) === null || _inputInitialRef$curr6 === void 0 ? void 0 : _inputInitialRef$curr6.focus();
+    if (showCalendarValueFinal) (_inputFinalRef$curren8 = inputFinalRef.current) === null || _inputFinalRef$curren8 === void 0 ? void 0 : _inputFinalRef$curren8.focus();
     if (valueDateName === 'valueFinal' && valueInitial && dateObj.isBefore(valueInitial)) {
       setValueInitial(dateObj);
       setValueFinal(valueInitial);
@@ -198,8 +326,8 @@ const PeriodPicker = props => {
       });
     }
     if (valueDateName === 'valueInitial' && !valueFinal && shouldOpenDropdown) {
-      var _inputFinalRef$curren2;
-      (_inputFinalRef$curren2 = inputFinalRef.current) === null || _inputFinalRef$curren2 === void 0 ? void 0 : _inputFinalRef$curren2.focus();
+      var _inputFinalRef$curren9;
+      (_inputFinalRef$curren9 = inputFinalRef.current) === null || _inputFinalRef$curren9 === void 0 ? void 0 : _inputFinalRef$curren9.focus();
       setTimeout(() => setShowCalendarValueFinal(true), 100);
     }
     if (shouldCloseOnSelect) {
@@ -213,27 +341,29 @@ const PeriodPicker = props => {
     } = props;
     return disabled || onDenied && (onDenied.disabled || onDenied.hideContent);
   };
-  const getButtonOpen = () => {
+  const getButtonOpen = (0, _react.useCallback)(() => {
     if (!showButtonOpen) return null;
     return /*#__PURE__*/_react.default.createElement(_buttons.default, {
       key: "button-open",
       boxShadow: false,
+      disabled: shouldDisable(),
+      customClass: "calendar-button",
       icon: /*#__PURE__*/_react.default.createElement(_icons.default, {
         name: "calendar"
       }),
       onClick: () => {
-        var _inputInitialRef$curr2;
-        (_inputInitialRef$curr2 = inputInitialRef.current) === null || _inputInitialRef$curr2 === void 0 ? void 0 : _inputInitialRef$curr2.focus();
-        openCalendar('valueInitial');
+        if (showCalendarValueFinal || showCalendarValueInitial) {
+          closeCalendar(currentTypeDate);
+        } else {
+          openCalendar(currentTypeDate);
+        }
       },
-      customClass: "calendar-button",
       tabIndex: -1,
       targetRef: ref => {
         buttonOpenRef.current = ref;
-      },
-      disabled: shouldDisable()
+      }
     });
-  };
+  }, [showCalendarValueFinal, showCalendarValueInitial]);
   const getPeriodSelection = (valuePeriodSelectionAux, setPeriodDates) => /*#__PURE__*/_react.default.createElement(_PeriodList.default, {
     selected: valuePeriodSelectionAux,
     handleOnSelect: setPeriodDates
@@ -246,36 +376,46 @@ const PeriodPicker = props => {
       setInputDimensions(inputContainerRef.current.getBoundingClientRect());
     }
   };
-  const getButtonSelectPeriod = () => /*#__PURE__*/_react.default.createElement(_buttons.default, {
-    key: "button-select-period",
-    boxShadow: false,
-    icon: /*#__PURE__*/_react.default.createElement(_icons.default, {
-      name: "more1"
-    }),
-    onBlur: () => setTimeout(() => setShowPeriodSelection(false), 100),
-    onClick: () => openPeriodSelecion(),
-    customClass: "calendar-button",
-    tabIndex: -1,
-    targetRef: ref => {
-      buttonSelectPeriodRef.current = ref;
-    },
-    disabled: shouldDisable()
-  });
+  const closePeriodSelection = () => {
+    var _inputFinalRef$curren10;
+    setShowPeriodSelection(false);
+    (_inputFinalRef$curren10 = inputFinalRef.current) === null || _inputFinalRef$curren10 === void 0 ? void 0 : _inputFinalRef$curren10.focus();
+    setShowCalendarValueFinal(false);
+  };
+  const getButtonSelectPeriod = (0, _react.useCallback)(() => {
+    return /*#__PURE__*/_react.default.createElement(_buttons.default, {
+      key: "button-select-period",
+      disabled: shouldDisable(),
+      tabIndex: -1,
+      customClass: "calendar-button",
+      icon: /*#__PURE__*/_react.default.createElement(_icons.default, {
+        name: "more1"
+      }),
+      onBlur: () => setTimeout(() => setShowPeriodSelection(false), 100),
+      onClick: () => !showPeriodSelection ? openPeriodSelecion() : closePeriodSelection(),
+      targetRef: ref => {
+        buttonSelectPeriodRef.current = ref;
+      }
+    });
+  }, [showPeriodSelection]);
   const getCalendar = (value, calendarColorStyleCalendar, valueDateName) => /*#__PURE__*/_react.default.createElement(_calendar.default, {
+    colorStyle: calendarColorStyleCalendar,
     currentDate: value !== undefined ? (0, _moment.default)(value) : (0, _moment.default)(),
-    onDateChange: date => {
-      setValue({
-        target: {
-          name: valueDateName
-        }
-      }, date);
+    calendarContainer: ref => {
+      calendarContainerRef.current = ref;
     },
-    colorStyle: calendarColorStyleCalendar
+    onDateChange: date => setValue({
+      target: {
+        name: valueDateName
+      }
+    }, date),
+    currentDateButton: buttonElement => currentDateButtonRef.current = buttonElement
   });
   const setPeriodDates = (selected, dates) => {
+    var _inputFinalRef$curren11;
     if (selected === 'custom') {
-      var _inputInitialRef$curr3;
-      (_inputInitialRef$curr3 = inputInitialRef.current) === null || _inputInitialRef$curr3 === void 0 ? void 0 : _inputInitialRef$curr3.focus();
+      var _inputInitialRef$curr7;
+      (_inputInitialRef$curr7 = inputInitialRef.current) === null || _inputInitialRef$curr7 === void 0 ? void 0 : _inputInitialRef$curr7.focus();
       setValuePeriodSelection(selected);
       setShowPeriodSelection(false);
       return;
@@ -288,99 +428,83 @@ const PeriodPicker = props => {
     if (shouldCloseOnSelect) {
       setShowPeriodSelection(false);
     }
+    (_inputFinalRef$curren11 = inputFinalRef.current) === null || _inputFinalRef$curren11 === void 0 ? void 0 : _inputFinalRef$curren11.focus();
+    setShowCalendarValueFinal(false);
   };
-  const getWrapperComponentCalendarValueInitial = () => {
+  const getCalendarInitial = () => {
     if (onDenied && onDenied.readOnly) return null;
+    if (calendarContainerRef && calendarContainerRef.current) calendarContainerRef.current.id = 'valueInitial';
     if (showCalendarInDialog) {
       return /*#__PURE__*/_react.default.createElement(_Dialog.default, {
+        handlerClose: () => onCloseDateDialog('valueInitial'),
         dialogSize: dialogSize,
         onOpenChange: setShowCalendarValueInitial
       }, getCalendar(valueInitial, calendarColorStyle, 'valueInitial'));
     }
     return /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
-      targetElement: inputContainerRef.current,
-      topPosition: inputDimensions ? inputDimensions.top + inputDimensions.height + 5 : '',
-      leftPosition: inputDimensions ? inputDimensions.left : '',
-      width: inputDimensions ? inputDimensions.width : '',
+      containerRef: wrapperBaseInputPeriodRef,
+      showButtonOpen: showButtonOpen,
+      inputDimensions: inputDimensions,
       dropdownRef: el => {
         dropdownCalendarContainer.current = el;
       }
     }, getCalendar(valueInitial, calendarColorStyle, 'valueInitial'));
   };
-  const getWrapperComponentCalendarValueFinal = () => {
+  const getCalendarFinal = () => {
     if (onDenied && onDenied.readOnly) return null;
+    if (calendarContainerRef && calendarContainerRef.current) calendarContainerRef.current.id = 'valueFinal';
     if (showCalendarInDialog) {
       return /*#__PURE__*/_react.default.createElement(_Dialog.default, {
+        handlerClose: () => onCloseDateDialog('valueFinal'),
         dialogSize: dialogSize,
         onOpenChange: setShowCalendarValueFinal
       }, getCalendar(valueFinal, calendarColorStyle, 'valueFinal'));
     }
     return /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
-      targetElement: inputContainerRef.current,
-      topPosition: inputDimensions ? inputDimensions.top + inputDimensions.height + 5 : '',
-      leftPosition: inputDimensions ? inputDimensions.left : '',
-      width: inputDimensions ? inputDimensions.width : '',
+      containerRef: wrapperBaseInputPeriodRef,
+      showButtonOpen: showButtonOpen,
+      inputDimensions: inputDimensions,
       dropdownRef: el => {
         dropdownCalendarContainer.current = el;
       }
     }, getCalendar(valueFinal, calendarColorStyle, 'valueFinal'));
   };
-  const getWrapperComponentPeriodSelection = () => {
+  const getPeriodOfDatesSelection = () => {
     if (showCalendarInDialog) {
       return /*#__PURE__*/_react.default.createElement(_Dialog.default, {
+        handlerClose: () => onCloseDateDialog('periodSelection'),
         dialogSize: dialogSize,
         onOpenChange: setShowPeriodSelection
       }, getPeriodSelection(valuePeriodSelection, setPeriodDates));
     }
     return /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
-      targetElement: inputContainerRef.current,
-      topPosition: inputDimensions ? inputDimensions.top + inputDimensions.height + 5 : '',
-      leftPosition: inputDimensions ? inputDimensions.left : '',
-      width: inputDimensions ? inputDimensions.width : '',
+      containerRef: wrapperBaseInputPeriodRef,
+      showButtonOpen: showButtonOpen,
+      inputDimensions: inputDimensions,
       dropdownRef: el => {
-        dropdownPeriodContainer.current = el;
+        dropdownCalendarContainer.current = el;
       }
     }, getPeriodSelection(valuePeriodSelection, setPeriodDates));
   };
   if (onDenied && onDenied.unvisible) return null;
-  return /*#__PURE__*/_react.default.createElement("div", {
+  const component = () => /*#__PURE__*/_react.default.createElement("div", {
     ref: wrapperBaseInputPeriodRef,
-    className: "input-base-component"
+    onBlur: onBlurWithoutWrapper,
+    className: "input-base-component datepicker-period-container"
   }, props.label && /*#__PURE__*/_react.default.createElement("div", {
     className: "labelcontainer"
-  }, /*#__PURE__*/_react.default.createElement(_textContent.default, {
-    required: props.required,
-    className: props.customClassForLabel,
-    labelUppercase: props.labelUppercase
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "text-content",
-    style: {
-      display: 'flex'
-    }
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "label ".concat(props.customClassForLabel, " ").concat(props.labelUppercase && ' -uppercase'),
-    style: {
-      alignSelf: 'center'
-    }
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "label ".concat(props.customClassForLabel, " ").concat(props.labelUppercase && ' -uppercase')
   }, props.label, props.required && /*#__PURE__*/_react.default.createElement("span", {
     className: "-requiredlabel"
-  }, "*"), !!hint && hintPosition === 'onLabelRight' && /*#__PURE__*/_react.default.createElement(_popover.default, {
-    theme: themePopover,
-    align: popoverAlign,
-    iconColor: "#03bde2",
-    customClass: "-hint",
-    style: {
-      margin: '0px 5px',
-      height: 'auto',
-      width: 20
-    }
-  }, hint))), /*#__PURE__*/_react.default.createElement(_textContent.default, null)), /*#__PURE__*/_react.default.createElement("div", {
+  }, "*"))), /*#__PURE__*/_react.default.createElement("div", {
     className: "periodpicker-component ".concat(helperBase.getInputWrapperClass(_objectSpread(_objectSpread({}, props), {}, {
       value: !valueInitial ? '' : (0, _moment.default)(valueInitial).format('DD/MM/YYYY'),
       disabled: shouldDisable()
     }))),
     ref: inputContainerRef
   }, /*#__PURE__*/_react.default.createElement(_BaseMask.default, {
+    gridLayout: undefined,
     permissionAttr: props.permissionAttr,
     name: "valueInitial",
     value: !valueInitial ? '' : (0, _moment.default)(valueInitial).format('DD/MM/YYYY'),
@@ -402,6 +526,7 @@ const PeriodPicker = props => {
     name: "arrow_right",
     customClass: "separation_icon"
   }), /*#__PURE__*/_react.default.createElement(_BaseMask.default, {
+    gridLayout: undefined,
     permissionAttr: props.permissionAttr,
     name: "valueFinal",
     value: !valueFinal ? '' : (0, _moment.default)(valueFinal).format('DD/MM/YYYY'),
@@ -417,12 +542,16 @@ const PeriodPicker = props => {
     },
     handlerSetOnDenied: denied => setOnDenied(denied),
     required: props.required
-  }), getButtonOpen(), getButtonSelectPeriod()), showCalendarValueInitial && getWrapperComponentCalendarValueInitial(), showCalendarValueFinal && getWrapperComponentCalendarValueFinal(), showPeriodSelection && getWrapperComponentPeriodSelection(), /*#__PURE__*/_react.default.createElement(_hint.default, {
-    visible: !!hint && hintPosition === 'below',
+  }), getButtonOpen(), getButtonSelectPeriod()), showCalendarValueInitial && getCalendarInitial(), showCalendarValueFinal && getCalendarFinal(), showPeriodSelection && getPeriodOfDatesSelection(), /*#__PURE__*/_react.default.createElement(_hint.default, {
+    visible: !!hint,
     customClass: "hint",
     description: hint
   }), /*#__PURE__*/_react.default.createElement(_errorMessage.ErrorMessage, {
     messages: props.errorMessages
   }));
+  return !gridLayout ? component() : /*#__PURE__*/_react.default.createElement(_gridlayout.default, {
+    customClass: "-withinput",
+    cols: gridLayout
+  }, component());
 };
 var _default = exports.default = PeriodPicker;

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

@@ -1,5 +1,5 @@
 import { Moment } from 'moment';
-import { ReactNode } from 'react';
+import { ReactNode, RefObject } from 'react';
 import { ColorStyles } from '../../@types/ColorStyles.js';
 import { Period } from '../../@types/Period.js';
 import { PermissionAttr } from '../../@types/PermissionAttr.js';
@@ -9,6 +9,7 @@ import '../../internals/types.js';
 import '../../@types/Position.js';
 
 type DateTypes = 'today' | 'week' | 'lastweek' | 'last15' | 'month' | 'lastmonth';
+type TypeCurrentDate = 'valueInitial' | 'valueFinal';
 interface ChangeInputPeriodEvent {
     target: {
         value?: string;
@@ -26,14 +27,14 @@ interface IDialogProps {
         width: string;
         height: string;
     };
+    handlerClose: (open: boolean) => void;
 }
 interface IPeriodDropdownProps {
-    topPosition: number | string;
-    leftPosition: number | string;
-    width: number | string;
-    children: JSX.Element | JSX.Element[];
-    dropdownRef: (el: HTMLElement) => void;
-    targetElement?: HTMLDivElement | HTMLInputElement | null;
+    children: ReactNode | ReactNode[];
+    dropdownRef: (el: HTMLDivElement) => void;
+    containerRef: RefObject<HTMLDivElement | HTMLElement>;
+    showButtonOpen: boolean;
+    inputDimensions?: DOMRect;
 }
 interface IPeriodPickerProps {
     label?: string;
@@ -59,15 +60,13 @@ interface IPeriodPickerProps {
     errorMessages?: string[];
     name?: string;
     hint?: string;
-    hintPosition?: 'below' | 'onLabelRight';
     onBlur?: (e: CustomInputEvent) => void;
     onFocus?: (e: CustomInputEvent) => void;
-    themePopover?: 'light' | 'dark';
-    popoverAlign?: 'right' | 'left';
+    gridLayout?: string;
 }
 interface IPeriodListProps {
     handleOnSelect: (value: DateTypes | 'custom', date: Moment[] | null) => void;
     selected?: string;
 }
 
-export { ChangeInputPeriodEvent, DateTypes, IDialogProps, IPeriodDropdownProps, IPeriodListProps, IPeriodOptions, IPeriodPickerProps };
+export { ChangeInputPeriodEvent, DateTypes, IDialogProps, IPeriodDropdownProps, IPeriodListProps, IPeriodOptions, IPeriodPickerProps, TypeCurrentDate };

package/lib/inputs/select/ActionButtons.js

@@ -13,10 +13,11 @@ const ActionButtons = props => {
     showClearButton = true,
     dropDownOpened,
     handlerOpenClose,
-    handlerClear
+    handlerClear,
+    customClassForSideButtons
   } = props;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "actionbuttonsselect"
+    className: "actionbuttonsselect ".concat(customClassForSideButtons)
   }, showClearButton && /*#__PURE__*/_react.default.createElement("button", {
     disabled: disabled,
     tabIndex: -1,