indicator-ui 0.0.282 → 0.0.284

package/dist/index.js

@@ -24010,6 +24010,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   useDebouncedAccumulator: () => (/* reexport safe */ _useDebouncedAccumulator__WEBPACK_IMPORTED_MODULE_2__.useDebouncedAccumulator),
 /* harmony export */   useDeepCompareEffect: () => (/* reexport safe */ _useDeepCompareEffect__WEBPACK_IMPORTED_MODULE_3__.useDeepCompareEffect),
+/* harmony export */   useElementFixedOffset: () => (/* reexport safe */ _useElementFixedOffset__WEBPACK_IMPORTED_MODULE_4__.useElementFixedOffset),
 /* harmony export */   useFormData: () => (/* reexport safe */ _useFormData__WEBPACK_IMPORTED_MODULE_1__.useFormData),
 /* harmony export */   useIsErrorField: () => (/* reexport safe */ _useIsErrorField__WEBPACK_IMPORTED_MODULE_0__.useIsErrorField)
 /* harmony export */ });
@@ -24017,6 +24018,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _useFormData__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./useFormData */ "./src/hooks/useFormData.ts");
 /* harmony import */ var _useDebouncedAccumulator__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./useDebouncedAccumulator */ "./src/hooks/useDebouncedAccumulator.ts");
 /* harmony import */ var _useDeepCompareEffect__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./useDeepCompareEffect */ "./src/hooks/useDeepCompareEffect.ts");
+/* harmony import */ var _useElementFixedOffset__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./useElementFixedOffset */ "./src/hooks/useElementFixedOffset.ts");
+
 
 
 
@@ -24097,6 +24100,71 @@ function useDeepCompareEffect(callback, dependencies) {
 
 /***/ }),
 
+/***/ "./src/hooks/useElementFixedOffset.ts":
+/*!********************************************!*\
+  !*** ./src/hooks/useElementFixedOffset.ts ***!
+  \********************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   useElementFixedOffset: () => (/* binding */ useElementFixedOffset)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+
+function useElementFixedOffset(ref) {
+  var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)({
+      top: 0,
+      left: 0,
+      width: 0,
+      height: 0
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    offset = _useState2[0],
+    setOffset = _useState2[1];
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
+    if (!ref.current) return;
+    var element = ref.current;
+    var updateOffset = function updateOffset() {
+      var rect = element.getBoundingClientRect();
+      setOffset({
+        top: rect.top + window.scrollY,
+        // Добавляем текущую прокрутку
+        left: rect.left + window.scrollX,
+        // Добавляем текущую прокрутку
+        width: rect.width,
+        height: rect.height
+      });
+    };
+    updateOffset();
+    // Слушатели событий
+    document.addEventListener("scroll", updateOffset, {
+      passive: true,
+      capture: true
+    });
+    window.addEventListener("resize", updateOffset);
+    // Наблюдатель за изменениями элемента
+    var resizeObserver = new ResizeObserver(updateOffset);
+    resizeObserver.observe(element);
+    return function () {
+      document.removeEventListener("scroll", updateOffset);
+      window.removeEventListener("resize", updateOffset);
+      resizeObserver.disconnect();
+    };
+  }, [ref]);
+  return offset;
+}
+
+/***/ }),
+
 /***/ "./src/hooks/useFormData.ts":
 /*!**********************************!*\
   !*** ./src/hooks/useFormData.ts ***!
@@ -30784,12 +30852,13 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! clsx */ "./node_modules/clsx/dist/clsx.mjs");
 /* harmony import */ var _ui__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @/ui */ "./src/ui/index.ts");
 /* harmony import */ var _assets__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @/assets */ "./src/assets/index.ts");
-/* harmony import */ var _lib__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @/lib */ "./src/lib/index.ts");
-/* harmony import */ var _DateTimeFieldMask__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../DateTimeFieldMask */ "./src/ui/InputFields/DateTimeFieldMask/index.ts");
-/* harmony import */ var _styles__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../styles */ "./src/ui/InputFields/DateTimeField/styles/index.ts");
-/* harmony import */ var _lib__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../lib */ "./src/ui/InputFields/DateTimeField/lib/index.ts");
-/* harmony import */ var _TimeFieldBase__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./TimeFieldBase */ "./src/ui/InputFields/DateTimeField/ui/TimeFieldBase.tsx");
-/* harmony import */ var _DateFieldBase__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./DateFieldBase */ "./src/ui/InputFields/DateTimeField/ui/DateFieldBase.tsx");
+/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @/hooks */ "./src/hooks/index.ts");
+/* harmony import */ var _lib__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @/lib */ "./src/lib/index.ts");
+/* harmony import */ var _DateTimeFieldMask__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../DateTimeFieldMask */ "./src/ui/InputFields/DateTimeFieldMask/index.ts");
+/* harmony import */ var _styles__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../styles */ "./src/ui/InputFields/DateTimeField/styles/index.ts");
+/* harmony import */ var _lib__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../lib */ "./src/ui/InputFields/DateTimeField/lib/index.ts");
+/* harmony import */ var _TimeFieldBase__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./TimeFieldBase */ "./src/ui/InputFields/DateTimeField/ui/TimeFieldBase.tsx");
+/* harmony import */ var _DateFieldBase__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./DateFieldBase */ "./src/ui/InputFields/DateTimeField/ui/DateFieldBase.tsx");
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var _excluded = ["value", "onChange", "dateFormat", "timeFormat", "outFormat", "additionStyle", "datePlaceholder", "timePlaceholder", "iconDate", "iconTime", "textDate", "textTime", "clearButton", "isError", "disabled", "onFocus", "onBlur", "width"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -30816,6 +30885,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 
 
 
+
 function DateTimeField(_ref) {
   var value = _ref.value,
     onChange = _ref.onChange,
@@ -30856,7 +30926,7 @@ function DateTimeField(_ref) {
     isShowModalWindow = _useState4[0],
     setIsShowModalWindow = _useState4[1];
   var dateTimeFieldRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
-  var _useState5 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)((0,_lib__WEBPACK_IMPORTED_MODULE_8__.getTimeFromValue)({
+  var _useState5 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)((0,_lib__WEBPACK_IMPORTED_MODULE_9__.getTimeFromValue)({
       value: value,
       outFormat: outFormat,
       timeFormat: timeFormat
@@ -30864,7 +30934,7 @@ function DateTimeField(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     time = _useState6[0],
     setTime = _useState6[1];
-  var _useState7 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)((0,_lib__WEBPACK_IMPORTED_MODULE_8__.getDateFromValue)({
+  var _useState7 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)((0,_lib__WEBPACK_IMPORTED_MODULE_9__.getDateFromValue)({
       value: value,
       outFormat: outFormat,
       dateFormat: dateFormat
@@ -30875,7 +30945,7 @@ function DateTimeField(_ref) {
   // Получаем дату в выходном формате
   // (в формате, который понимает внешний приемник и поле, формат скрыт от пользователя)
   var getDateTimeFormatValue = function getDateTimeFormatValue(newValue) {
-    return newValue ? (0,_lib__WEBPACK_IMPORTED_MODULE_5__.saveFormatDate)(newValue, {
+    return newValue ? (0,_lib__WEBPACK_IMPORTED_MODULE_6__.saveFormatDate)(newValue, {
       to: outFormat,
       errorNull: true
     }) : null;
@@ -30883,8 +30953,8 @@ function DateTimeField(_ref) {
   // Получение даты компонента
   var getDateTimeValue = function getDateTimeValue() {
     var resDate = new Date();
-    (0,_lib__WEBPACK_IMPORTED_MODULE_8__.setDateInDate)(resDate, date, dateFormat);
-    (0,_lib__WEBPACK_IMPORTED_MODULE_8__.setTimeInDate)(resDate, time, timeFormat);
+    (0,_lib__WEBPACK_IMPORTED_MODULE_9__.setDateInDate)(resDate, date, dateFormat);
+    (0,_lib__WEBPACK_IMPORTED_MODULE_9__.setTimeInDate)(resDate, time, timeFormat);
     return resDate;
   };
   // Получение форматированной даты компонента
@@ -30902,7 +30972,7 @@ function DateTimeField(_ref) {
   var getDateTimeForDateTimePicker = function getDateTimeForDateTimePicker() {
     var resDate = undefined;
     if (time || date) {
-      resDate = (0,_lib__WEBPACK_IMPORTED_MODULE_5__.saveFormatDate)(getDateTimeValue(), {
+      resDate = (0,_lib__WEBPACK_IMPORTED_MODULE_6__.saveFormatDate)(getDateTimeValue(), {
         errorNull: true
       });
     }
@@ -30911,12 +30981,12 @@ function DateTimeField(_ref) {
   var setDateTime = function setDateTime(newDate) {
     var curValue = getDateTimeFormatValue(newDate);
     if (value !== curValue && curValue) {
-      setTime((0,_lib__WEBPACK_IMPORTED_MODULE_8__.getTimeFromValue)({
+      setTime((0,_lib__WEBPACK_IMPORTED_MODULE_9__.getTimeFromValue)({
         value: curValue,
         outFormat: outFormat,
         timeFormat: timeFormat
       }));
-      setDate((0,_lib__WEBPACK_IMPORTED_MODULE_8__.getDateFromValue)({
+      setDate((0,_lib__WEBPACK_IMPORTED_MODULE_9__.getDateFromValue)({
         value: curValue,
         outFormat: outFormat,
         dateFormat: dateFormat
@@ -30925,7 +30995,7 @@ function DateTimeField(_ref) {
   };
   (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () {
     var _saveParseDate;
-    setDateTime((_saveParseDate = (0,_lib__WEBPACK_IMPORTED_MODULE_5__.saveParseDate)(value, {
+    setDateTime((_saveParseDate = (0,_lib__WEBPACK_IMPORTED_MODULE_6__.saveParseDate)(value, {
       errorNull: true
     })) !== null && _saveParseDate !== void 0 ? _saveParseDate : undefined);
   }, [value]);
@@ -30952,7 +31022,7 @@ function DateTimeField(_ref) {
     setIsShowModalWindow(true);
   };
   var getTimeContent = function getTimeContent() {
-    return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_TimeFieldBase__WEBPACK_IMPORTED_MODULE_9__.TimeFieldBase, _objectSpread(_objectSpread({}, props), {}, {
+    return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_TimeFieldBase__WEBPACK_IMPORTED_MODULE_10__.TimeFieldBase, _objectSpread(_objectSpread({}, props), {}, {
       placeholder: timePlaceholder,
       onChange: setTime,
       onBlur: handleBlur,
@@ -30960,11 +31030,11 @@ function DateTimeField(_ref) {
       value: time,
       timeFormat: timeFormat,
       disabled: disabled,
-      className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_styles__WEBPACK_IMPORTED_MODULE_7__.DateTimeFieldStyle.flexField, _defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_7__.DateTimeFieldStyle.disabled, disabled))
+      className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_styles__WEBPACK_IMPORTED_MODULE_8__.DateTimeFieldStyle.flexField, _defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_8__.DateTimeFieldStyle.disabled, disabled))
     }));
   };
   var getDateContent = function getDateContent() {
-    return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_DateFieldBase__WEBPACK_IMPORTED_MODULE_10__.DateFieldBase, _objectSpread(_objectSpread({}, props), {}, {
+    return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_DateFieldBase__WEBPACK_IMPORTED_MODULE_11__.DateFieldBase, _objectSpread(_objectSpread({}, props), {}, {
       placeholder: datePlaceholder,
       value: date,
       onBlur: handleBlur,
@@ -30972,20 +31042,24 @@ function DateTimeField(_ref) {
       onChange: setDate,
       dateFormat: dateFormat,
       disabled: disabled,
-      className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_styles__WEBPACK_IMPORTED_MODULE_7__.DateTimeFieldStyle.flexField, _defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_7__.DateTimeFieldStyle.disabled, disabled))
+      className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_styles__WEBPACK_IMPORTED_MODULE_8__.DateTimeFieldStyle.flexField, _defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_8__.DateTimeFieldStyle.disabled, disabled))
     }));
   };
   var onSubmit = function onSubmit(value) {
     if (typeof value === 'string') {
-      var newDate = (0,_lib__WEBPACK_IMPORTED_MODULE_5__.saveParseDate)(value, {});
+      var newDate = (0,_lib__WEBPACK_IMPORTED_MODULE_6__.saveParseDate)(value, {});
       setDateTime(newDate);
       setIsShowModalWindow(false);
     }
   };
+  var _useElementFixedOffse = (0,_hooks__WEBPACK_IMPORTED_MODULE_5__.useElementFixedOffset)(dateTimeFieldRef),
+    top = _useElementFixedOffse.top,
+    left = _useElementFixedOffse.left,
+    height = _useElementFixedOffse.height;
   return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
     ref: dateTimeFieldRef,
-    className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_styles__WEBPACK_IMPORTED_MODULE_7__.DateTimeFieldStyle.DateTimeField, _defineProperty(_defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_7__.DateTimeFieldStyle.widthFill, width === 'fill'), _styles__WEBPACK_IMPORTED_MODULE_7__.DateTimeFieldStyle.widthHug, width === 'hug')),
-    children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_DateTimeFieldMask__WEBPACK_IMPORTED_MODULE_6__.DateTimeFieldMask, {
+    className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_styles__WEBPACK_IMPORTED_MODULE_8__.DateTimeFieldStyle.DateTimeField, _defineProperty(_defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_8__.DateTimeFieldStyle.widthFill, width === 'fill'), _styles__WEBPACK_IMPORTED_MODULE_8__.DateTimeFieldStyle.widthHug, width === 'hug')),
+    children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_DateTimeFieldMask__WEBPACK_IMPORTED_MODULE_7__.DateTimeFieldMask, {
       firstField: getDateContent(),
       secondField: getTimeContent(),
       iconFirst: iconDate,
@@ -31001,7 +31075,11 @@ function DateTimeField(_ref) {
       isShow: isShowModalWindow,
       setIsShow: setIsShowModalWindow,
       additionElements: [dateTimeFieldRef.current],
-      className: _styles__WEBPACK_IMPORTED_MODULE_7__.DateTimeFieldStyle.modalWindow,
+      className: _styles__WEBPACK_IMPORTED_MODULE_8__.DateTimeFieldStyle.modalWindow,
+      style: {
+        top: "".concat(top + height, "px"),
+        left: "".concat(left, "px")
+      },
       children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_3__.DateTimePicker, {
         type: 'datetime',
         date: getDateTimeForDateTimePicker(),
@@ -31034,12 +31112,12 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! clsx */ "./node_modules/clsx/dist/clsx.mjs");
 /* harmony import */ var _ui__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @/ui */ "./src/ui/index.ts");
 /* harmony import */ var _assets__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @/assets */ "./src/assets/index.ts");
-/* harmony import */ var _lib__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @/lib */ "./src/lib/index.ts");
-/* harmony import */ var _DateTimeFieldMask__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../DateTimeFieldMask */ "./src/ui/InputFields/DateTimeFieldMask/index.ts");
-/* harmony import */ var _styles__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../styles */ "./src/ui/InputFields/DateTimeField/styles/index.ts");
-/* harmony import */ var _lib__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../lib */ "./src/ui/InputFields/DateTimeField/lib/index.ts");
-/* harmony import */ var _TimeFieldBase__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./TimeFieldBase */ "./src/ui/InputFields/DateTimeField/ui/TimeFieldBase.tsx");
-/* harmony import */ var _ui_DateTimePicker_config__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! @/ui/DateTimePicker/config */ "./src/ui/DateTimePicker/config/index.ts");
+/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @/hooks */ "./src/hooks/index.ts");
+/* harmony import */ var _lib__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @/lib */ "./src/lib/index.ts");
+/* harmony import */ var _DateTimeFieldMask__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../DateTimeFieldMask */ "./src/ui/InputFields/DateTimeFieldMask/index.ts");
+/* harmony import */ var _styles__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../styles */ "./src/ui/InputFields/DateTimeField/styles/index.ts");
+/* harmony import */ var _lib__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../lib */ "./src/ui/InputFields/DateTimeField/lib/index.ts");
+/* harmony import */ var _TimeFieldBase__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./TimeFieldBase */ "./src/ui/InputFields/DateTimeField/ui/TimeFieldBase.tsx");
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var _excluded = ["value", "onChange", "timeFormat", "outFormat", "additionStyle", "timePlaceholder", "iconTime", "textTime", "clearButton", "isError", "disabled", "onFocus", "onBlur", "width"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -31099,7 +31177,7 @@ function TimeField(_ref) {
     isShowModalWindow = _useState4[0],
     setIsShowModalWindow = _useState4[1];
   var dateTimeFieldRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
-  var _useState5 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)((0,_lib__WEBPACK_IMPORTED_MODULE_8__.getTimeFromValue)({
+  var _useState5 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)((0,_lib__WEBPACK_IMPORTED_MODULE_9__.getTimeFromValue)({
       value: value,
       outFormat: outFormat,
       timeFormat: timeFormat
@@ -31110,7 +31188,7 @@ function TimeField(_ref) {
   // Получаем дату в выходном формате
   // (в формате, который понимает внешний приемник и поле, формат скрыт от пользователя)
   var getDateTimeFormatValue = function getDateTimeFormatValue(newValue) {
-    return newValue ? (0,_lib__WEBPACK_IMPORTED_MODULE_5__.saveFormatDate)(newValue, {
+    return newValue ? (0,_lib__WEBPACK_IMPORTED_MODULE_6__.saveFormatDate)(newValue, {
       to: outFormat,
       errorNull: true
     }) : undefined;
@@ -31118,7 +31196,7 @@ function TimeField(_ref) {
   // Получение даты компонента
   var getDateTimeValue = function getDateTimeValue() {
     var resDate = new Date();
-    (0,_lib__WEBPACK_IMPORTED_MODULE_8__.setTimeInDate)(resDate, time, timeFormat);
+    (0,_lib__WEBPACK_IMPORTED_MODULE_9__.setTimeInDate)(resDate, time, timeFormat);
     return resDate;
   };
   // Получение форматированной даты компонента
@@ -31136,7 +31214,7 @@ function TimeField(_ref) {
   var getDateTimeForDateTimePicker = function getDateTimeForDateTimePicker() {
     var resDate = undefined;
     if (time) {
-      resDate = (0,_lib__WEBPACK_IMPORTED_MODULE_5__.saveFormatDate)(getDateTimeValue(), {
+      resDate = (0,_lib__WEBPACK_IMPORTED_MODULE_6__.saveFormatDate)(getDateTimeValue(), {
         errorNull: true
       });
     }
@@ -31145,7 +31223,7 @@ function TimeField(_ref) {
   var setDateTime = function setDateTime(newDate) {
     var curValue = getDateTimeFormatValue(newDate);
     if (value !== curValue && curValue) {
-      setTime((0,_lib__WEBPACK_IMPORTED_MODULE_8__.getTimeFromValue)({
+      setTime((0,_lib__WEBPACK_IMPORTED_MODULE_9__.getTimeFromValue)({
         value: curValue,
         outFormat: outFormat,
         timeFormat: timeFormat
@@ -31154,8 +31232,8 @@ function TimeField(_ref) {
   };
   (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () {
     var _saveParseDate;
-    setDateTime((_saveParseDate = (0,_lib__WEBPACK_IMPORTED_MODULE_5__.saveParseDate)(value, {
-      from: _ui_DateTimePicker_config__WEBPACK_IMPORTED_MODULE_10__.TIME_TYPE_FORMAT,
+    setDateTime((_saveParseDate = (0,_lib__WEBPACK_IMPORTED_MODULE_6__.saveParseDate)(value, {
+      from: _ui__WEBPACK_IMPORTED_MODULE_3__.TIME_TYPE_FORMAT,
       errorNull: null
     })) !== null && _saveParseDate !== void 0 ? _saveParseDate : undefined);
   }, [value]);
@@ -31181,7 +31259,7 @@ function TimeField(_ref) {
     setIsShowModalWindow(true);
   };
   var getTimeContent = function getTimeContent() {
-    return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_TimeFieldBase__WEBPACK_IMPORTED_MODULE_9__.TimeFieldBase, _objectSpread(_objectSpread({}, props), {}, {
+    return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_TimeFieldBase__WEBPACK_IMPORTED_MODULE_10__.TimeFieldBase, _objectSpread(_objectSpread({}, props), {}, {
       placeholder: timePlaceholder,
       onChange: setTime,
       onBlur: handleBlur,
@@ -31189,22 +31267,26 @@ function TimeField(_ref) {
       value: time,
       timeFormat: timeFormat,
       disabled: disabled,
-      className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_styles__WEBPACK_IMPORTED_MODULE_7__.DateTimeFieldStyle.flexField, _defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_7__.DateTimeFieldStyle.disabled, disabled))
+      className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_styles__WEBPACK_IMPORTED_MODULE_8__.DateTimeFieldStyle.flexField, _defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_8__.DateTimeFieldStyle.disabled, disabled))
     }));
   };
   var onSubmit = function onSubmit(value) {
     if (typeof value === 'string') {
-      var newDate = (0,_lib__WEBPACK_IMPORTED_MODULE_5__.saveParseDate)(value, {
-        from: _ui_DateTimePicker_config__WEBPACK_IMPORTED_MODULE_10__.TIME_TYPE_FORMAT
+      var newDate = (0,_lib__WEBPACK_IMPORTED_MODULE_6__.saveParseDate)(value, {
+        from: _ui__WEBPACK_IMPORTED_MODULE_3__.TIME_TYPE_FORMAT
       });
       setDateTime(newDate);
       setIsShowModalWindow(false);
     }
   };
+  var _useElementFixedOffse = (0,_hooks__WEBPACK_IMPORTED_MODULE_5__.useElementFixedOffset)(dateTimeFieldRef),
+    top = _useElementFixedOffse.top,
+    left = _useElementFixedOffse.left,
+    height = _useElementFixedOffse.height;
   return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
     ref: dateTimeFieldRef,
-    className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_styles__WEBPACK_IMPORTED_MODULE_7__.DateTimeFieldStyle.DateTimeField, _defineProperty(_defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_7__.DateTimeFieldStyle.widthFill, width === 'fill'), _styles__WEBPACK_IMPORTED_MODULE_7__.DateTimeFieldStyle.widthHug, width === 'hug')),
-    children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_DateTimeFieldMask__WEBPACK_IMPORTED_MODULE_6__.DateTimeFieldMask, {
+    className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_styles__WEBPACK_IMPORTED_MODULE_8__.DateTimeFieldStyle.DateTimeField, _defineProperty(_defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_8__.DateTimeFieldStyle.widthFill, width === 'fill'), _styles__WEBPACK_IMPORTED_MODULE_8__.DateTimeFieldStyle.widthHug, width === 'hug')),
+    children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_DateTimeFieldMask__WEBPACK_IMPORTED_MODULE_7__.DateTimeFieldMask, {
       secondField: getTimeContent(),
       iconSecond: iconTime,
       textSecond: textTime,
@@ -31217,7 +31299,11 @@ function TimeField(_ref) {
       isShow: isShowModalWindow,
       setIsShow: setIsShowModalWindow,
       additionElements: [dateTimeFieldRef.current],
-      className: _styles__WEBPACK_IMPORTED_MODULE_7__.DateTimeFieldStyle.modalWindow,
+      className: _styles__WEBPACK_IMPORTED_MODULE_8__.DateTimeFieldStyle.modalWindow,
+      style: {
+        top: "".concat(top + height, "px"),
+        left: "".concat(left, "px")
+      },
       children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_3__.DateTimePicker, {
         type: 'time',
         date: getDateTimeForDateTimePicker(),
@@ -31672,9 +31758,10 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! clsx */ "./node_modules/clsx/dist/clsx.mjs");
 /* harmony import */ var _ui__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @/ui */ "./src/ui/index.ts");
 /* harmony import */ var _lib__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @/lib */ "./src/lib/index.ts");
-/* harmony import */ var _DateTimeField_styles__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../DateTimeField/styles */ "./src/ui/InputFields/DateTimeField/styles/index.ts");
-/* harmony import */ var _DateTimeField__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../DateTimeField */ "./src/ui/InputFields/DateTimeField/index.ts");
-/* harmony import */ var _styles__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../styles */ "./src/ui/InputFields/DateTimeRangeField/styles/index.ts");
+/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @/hooks */ "./src/hooks/index.ts");
+/* harmony import */ var _DateTimeField_styles__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../DateTimeField/styles */ "./src/ui/InputFields/DateTimeField/styles/index.ts");
+/* harmony import */ var _DateTimeField__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../DateTimeField */ "./src/ui/InputFields/DateTimeField/index.ts");
+/* harmony import */ var _styles__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../styles */ "./src/ui/InputFields/DateTimeRangeField/styles/index.ts");
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
@@ -31697,6 +31784,7 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 
 
 
+
 function DateRangeField(_ref) {
   var value = _ref.value,
     onChange = _ref.onChange,
@@ -31769,7 +31857,7 @@ function DateRangeField(_ref) {
     };
   };
   var getFirst = function getFirst() {
-    return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_DateTimeField__WEBPACK_IMPORTED_MODULE_6__.DateFieldBase, {
+    return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_DateTimeField__WEBPACK_IMPORTED_MODULE_7__.DateFieldBase, {
       placeholder: firstPlaceholder,
       value: getDate(0),
       onBlur: handleBlur,
@@ -31780,11 +31868,11 @@ function DateRangeField(_ref) {
       dateFormat: dateFormat,
       disabled: disabled,
       required: required,
-      className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_DateTimeField_styles__WEBPACK_IMPORTED_MODULE_5__.DateTimeFieldStyle.flexField, _defineProperty({}, _DateTimeField_styles__WEBPACK_IMPORTED_MODULE_5__.DateTimeFieldStyle.disabled, disabled))
+      className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_DateTimeField_styles__WEBPACK_IMPORTED_MODULE_6__.DateTimeFieldStyle.flexField, _defineProperty({}, _DateTimeField_styles__WEBPACK_IMPORTED_MODULE_6__.DateTimeFieldStyle.disabled, disabled))
     });
   };
   var getSecond = function getSecond() {
-    return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_DateTimeField__WEBPACK_IMPORTED_MODULE_6__.DateFieldBase, {
+    return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_DateTimeField__WEBPACK_IMPORTED_MODULE_7__.DateFieldBase, {
       placeholder: secondPlaceholder,
       value: getDate(1),
       onBlur: handleBlur,
@@ -31795,7 +31883,7 @@ function DateRangeField(_ref) {
       dateFormat: dateFormat,
       disabled: disabled,
       required: required,
-      className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_DateTimeField_styles__WEBPACK_IMPORTED_MODULE_5__.DateTimeFieldStyle.flexField, _defineProperty({}, _DateTimeField_styles__WEBPACK_IMPORTED_MODULE_5__.DateTimeFieldStyle.disabled, disabled))
+      className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_DateTimeField_styles__WEBPACK_IMPORTED_MODULE_6__.DateTimeFieldStyle.flexField, _defineProperty({}, _DateTimeField_styles__WEBPACK_IMPORTED_MODULE_6__.DateTimeFieldStyle.disabled, disabled))
     });
   };
   var onSubmit = function onSubmit(value) {
@@ -31803,9 +31891,13 @@ function DateRangeField(_ref) {
       onChange === null || onChange === void 0 || onChange(value);
     }
   };
+  var _useElementFixedOffse = (0,_hooks__WEBPACK_IMPORTED_MODULE_5__.useElementFixedOffset)(fieldRef),
+    top = _useElementFixedOffse.top,
+    left = _useElementFixedOffse.left,
+    height = _useElementFixedOffse.height;
   return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
     ref: fieldRef,
-    className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_styles__WEBPACK_IMPORTED_MODULE_7__.SingleRangeFieldStyle.SingleRangeField, _defineProperty(_defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_7__.SingleRangeFieldStyle.widthFill, width === 'fill'), _styles__WEBPACK_IMPORTED_MODULE_7__.SingleRangeFieldStyle.widthFHug, width === 'hug'), additionsStyles),
+    className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_styles__WEBPACK_IMPORTED_MODULE_8__.SingleRangeFieldStyle.SingleRangeField, _defineProperty(_defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_8__.SingleRangeFieldStyle.widthFill, width === 'fill'), _styles__WEBPACK_IMPORTED_MODULE_8__.SingleRangeFieldStyle.widthFHug, width === 'hug'), additionsStyles),
     children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_3__.DateTimeFieldMask, {
       isFocus: isFocus,
       isError: isError,
@@ -31822,7 +31914,11 @@ function DateRangeField(_ref) {
       isShow: isShowModalWindow,
       setIsShow: setIsShowModalWindow,
       additionElements: [fieldRef.current],
-      className: _styles__WEBPACK_IMPORTED_MODULE_7__.SingleRangeFieldStyle.modalWindow,
+      className: _styles__WEBPACK_IMPORTED_MODULE_8__.SingleRangeFieldStyle.modalWindow,
+      style: {
+        top: "".concat(top + height, "px"),
+        left: "".concat(left, "px")
+      },
       children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_3__.DateTimePicker, {
         type: 'date-range',
         date: value,
@@ -35003,6 +35099,8 @@ function ModalWindowWrapper(_ref) {
   var children = _ref.children,
     _ref$isShow = _ref.isShow,
     isShow = _ref$isShow === void 0 ? false : _ref$isShow,
+    _ref$closeOnScroll = _ref.closeOnScroll,
+    closeOnScroll = _ref$closeOnScroll === void 0 ? false : _ref$closeOnScroll,
     setIsShow = _ref.setIsShow,
     _ref$additionElements = _ref.additionElements,
     additionElements = _ref$additionElements === void 0 ? [] : _ref$additionElements,
@@ -35024,11 +35122,23 @@ function ModalWindowWrapper(_ref) {
         setIsShow(false);
       }
     };
+    var handleScroll = function handleScroll() {
+      if (closeOnScroll) {
+        setIsShow(false);
+      }
+    };
+    if (closeOnScroll) {
+      document.addEventListener("scroll", handleScroll, {
+        passive: true,
+        capture: true
+      });
+    }
     document.addEventListener('mousedown', handleMouseDown);
     return function () {
       document.removeEventListener('mousedown', handleMouseDown);
+      document.removeEventListener("scroll", handleScroll);
     };
-  }, [additionElements]);
+  }, [additionElements, closeOnScroll]);
   if (!isShow) return undefined;
   return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", {
     ref: modalWindowRef,
@@ -38071,6 +38181,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   uniqueByKey: () => (/* reexport safe */ _lib__WEBPACK_IMPORTED_MODULE_4__.uniqueByKey),
 /* harmony export */   useDebouncedAccumulator: () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_2__.useDebouncedAccumulator),
 /* harmony export */   useDeepCompareEffect: () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_2__.useDeepCompareEffect),
+/* harmony export */   useElementFixedOffset: () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_2__.useElementFixedOffset),
 /* harmony export */   useFormData: () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_2__.useFormData),
 /* harmony export */   useIsErrorField: () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_2__.useIsErrorField)
 /* harmony export */ });