indicator-ui 0.1.7 → 0.1.8

package/dist/index.js

@@ -2907,6 +2907,69 @@ function addYears(date, amount, options) {
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (addYears);
 
 
+/***/ }),
+
+/***/ "./node_modules/date-fns/compareAsc.js":
+/*!*********************************************!*\
+  !*** ./node_modules/date-fns/compareAsc.js ***!
+  \*********************************************/
+/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   compareAsc: () => (/* binding */ compareAsc),
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _toDate_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./toDate.js */ "./node_modules/date-fns/toDate.js");
+
+
+/**
+ * @name compareAsc
+ * @category Common Helpers
+ * @summary Compare the two dates and return -1, 0 or 1.
+ *
+ * @description
+ * Compare the two dates and return 1 if the first date is after the second,
+ * -1 if the first date is before the second or 0 if dates are equal.
+ *
+ * @param dateLeft - The first date to compare
+ * @param dateRight - The second date to compare
+ *
+ * @returns The result of the comparison
+ *
+ * @example
+ * // Compare 11 February 1987 and 10 July 1989:
+ * const result = compareAsc(new Date(1987, 1, 11), new Date(1989, 6, 10))
+ * //=> -1
+ *
+ * @example
+ * // Sort the array of dates:
+ * const result = [
+ *   new Date(1995, 6, 2),
+ *   new Date(1987, 1, 11),
+ *   new Date(1989, 6, 10)
+ * ].sort(compareAsc)
+ * //=> [
+ * //   Wed Feb 11 1987 00:00:00,
+ * //   Mon Jul 10 1989 00:00:00,
+ * //   Sun Jul 02 1995 00:00:00
+ * // ]
+ */
+function compareAsc(dateLeft, dateRight) {
+  const diff = +(0,_toDate_js__WEBPACK_IMPORTED_MODULE_0__.toDate)(dateLeft) - +(0,_toDate_js__WEBPACK_IMPORTED_MODULE_0__.toDate)(dateRight);
+
+  if (diff < 0) return -1;
+  else if (diff > 0) return 1;
+
+  // Return 0 if diff is 0; return NaN if diff is NaN
+  return diff;
+}
+
+// Fallback for modularized imports:
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (compareAsc);
+
+
 /***/ }),
 
 /***/ "./node_modules/date-fns/constants.js":
@@ -53631,12 +53694,12 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   useControlInput: () => (/* reexport safe */ _useControlInput__WEBPACK_IMPORTED_MODULE_0__.useControlInput),
 /* harmony export */   useKeyboardInput: () => (/* reexport safe */ _useKeyboardInput__WEBPACK_IMPORTED_MODULE_1__.useKeyboardInput),
-/* harmony export */   useKeyboardPressed: () => (/* reexport safe */ _useKeyboardPressed__WEBPACK_IMPORTED_MODULE_2__.useKeyboardPressed),
+/* harmony export */   useKeyboardPressing: () => (/* reexport safe */ _useKeyboardPressing__WEBPACK_IMPORTED_MODULE_2__.useKeyboardPressing),
 /* harmony export */   useTouchpadInput: () => (/* reexport safe */ _useTouchpadInput__WEBPACK_IMPORTED_MODULE_3__.useTouchpadInput)
 /* harmony export */ });
 /* harmony import */ var _useControlInput__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./useControlInput */ "./src/hooks/controlsInput/useControlInput.ts");
 /* harmony import */ var _useKeyboardInput__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./useKeyboardInput */ "./src/hooks/controlsInput/useKeyboardInput.ts");
-/* harmony import */ var _useKeyboardPressed__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./useKeyboardPressed */ "./src/hooks/controlsInput/useKeyboardPressed.ts");
+/* harmony import */ var _useKeyboardPressing__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./useKeyboardPressing */ "./src/hooks/controlsInput/useKeyboardPressing.ts");
 /* harmony import */ var _useTouchpadInput__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./useTouchpadInput */ "./src/hooks/controlsInput/useTouchpadInput.ts");
 
 
@@ -53703,22 +53766,22 @@ function useKeyboardInput() {
 
 /***/ }),
 
-/***/ "./src/hooks/controlsInput/useKeyboardPressed.ts":
-/*!*******************************************************!*\
-  !*** ./src/hooks/controlsInput/useKeyboardPressed.ts ***!
-  \*******************************************************/
+/***/ "./src/hooks/controlsInput/useKeyboardPressing.ts":
+/*!********************************************************!*\
+  !*** ./src/hooks/controlsInput/useKeyboardPressing.ts ***!
+  \********************************************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   useKeyboardPressed: () => (/* binding */ useKeyboardPressed)
+/* harmony export */   useKeyboardPressing: () => (/* binding */ useKeyboardPressing)
 /* 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__);
 
 var MIN_PRESSING_DURATION_DEFAULT = 100;
-function useKeyboardPressed() {
+function useKeyboardPressing() {
   for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
     args[_key] = arguments[_key];
   }
@@ -53735,13 +53798,15 @@ function useKeyboardPressed() {
   var getKeyEvent = function getKeyEvent(props) {
     var keyCode = props.keyCode,
       eventOrigin = props.eventOrigin,
-      startDuration = props.startDuration;
+      startDuration = props.startDuration,
+      status = props.status;
     var resDuration = Date.now() - startDuration;
     return {
       originalEvent: eventOrigin,
       detail: {
         keyCode: keyCode,
-        duration: resDuration
+        duration: resDuration,
+        status: status
       }
     };
   };
@@ -53752,13 +53817,22 @@ function useKeyboardPressed() {
       callback === null || callback === void 0 || callback(getKeyEvent({
         keyCode: keyCode,
         startDuration: startDuration,
-        eventOrigin: eventOrigin
+        eventOrigin: eventOrigin,
+        status: 'pressing'
       }));
     }
   }, []);
   var onKeyUp = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (eventOrigin) {
     var keyCode = eventOrigin.code;
-    endPressed(keyCode);
+    var startDuration = endPressed(keyCode);
+    if (startDuration !== undefined) {
+      callback === null || callback === void 0 || callback(getKeyEvent({
+        keyCode: keyCode,
+        startDuration: startDuration,
+        eventOrigin: eventOrigin,
+        status: 'released'
+      }));
+    }
   }, []);
   (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
     var _ref$current, _ref$current2;
@@ -53786,7 +53860,9 @@ function usePressedListener() {
     return pressedKey.current.get(key);
   };
   var endPressed = function endPressed(key) {
+    var resDuration = pressedKey.current.get(key);
     pressedKey.current["delete"](key);
+    return resDuration;
   };
   return {
     isPressedDuring: isPressedDuring,
@@ -53833,7 +53909,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   useInteractiveZone: () => (/* reexport safe */ _useInteractiveZone__WEBPACK_IMPORTED_MODULE_11__.useInteractiveZone),
 /* harmony export */   useIsErrorField: () => (/* reexport safe */ _useIsErrorField__WEBPACK_IMPORTED_MODULE_0__.useIsErrorField),
 /* harmony export */   useKeyboardInput: () => (/* reexport safe */ _controlsInput__WEBPACK_IMPORTED_MODULE_16__.useKeyboardInput),
-/* harmony export */   useKeyboardPressed: () => (/* reexport safe */ _controlsInput__WEBPACK_IMPORTED_MODULE_16__.useKeyboardPressed),
+/* harmony export */   useKeyboardPressing: () => (/* reexport safe */ _controlsInput__WEBPACK_IMPORTED_MODULE_16__.useKeyboardPressing),
 /* harmony export */   useModal: () => (/* reexport safe */ _modalWindows__WEBPACK_IMPORTED_MODULE_15__.useModal),
 /* harmony export */   useModalAnim: () => (/* reexport safe */ _ui_animations__WEBPACK_IMPORTED_MODULE_14__.useModalAnim),
 /* harmony export */   useResettableTimeout: () => (/* reexport safe */ _useResettableTimeout__WEBPACK_IMPORTED_MODULE_6__.useResettableTimeout),
@@ -59689,6 +59765,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   setDateMonth: () => (/* reexport safe */ _lib__WEBPACK_IMPORTED_MODULE_1__.setDateMonth),
 /* harmony export */   setDateYear: () => (/* reexport safe */ _lib__WEBPACK_IMPORTED_MODULE_1__.setDateYear),
 /* harmony export */   setOnlyDate: () => (/* reexport safe */ _lib__WEBPACK_IMPORTED_MODULE_1__.setOnlyDate),
+/* harmony export */   sortDates: () => (/* reexport safe */ _lib__WEBPACK_IMPORTED_MODULE_1__.sortDates),
 /* harmony export */   subDateYear: () => (/* reexport safe */ _lib__WEBPACK_IMPORTED_MODULE_1__.subDateYear)
 /* harmony export */ });
 /* harmony import */ var _ui__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./ui */ "./src/ui/DateTimePicker/ui/index.ts");
@@ -59894,18 +59971,21 @@ var equalDates = function equalDates(a, b) {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   addDateYear: () => (/* reexport safe */ _helperFunctions__WEBPACK_IMPORTED_MODULE_2__.addDateYear),
+/* harmony export */   addDateYear: () => (/* reexport safe */ _helperFunctions__WEBPACK_IMPORTED_MODULE_3__.addDateYear),
 /* harmony export */   changeInterval: () => (/* reexport safe */ _changeInterval__WEBPACK_IMPORTED_MODULE_0__.changeInterval),
-/* harmony export */   convertDate: () => (/* reexport safe */ _helperFunctions__WEBPACK_IMPORTED_MODULE_2__.convertDate),
-/* harmony export */   equalDates: () => (/* reexport safe */ _helperFunctions__WEBPACK_IMPORTED_MODULE_2__.equalDates),
-/* harmony export */   setDateMonth: () => (/* reexport safe */ _helperFunctions__WEBPACK_IMPORTED_MODULE_2__.setDateMonth),
-/* harmony export */   setDateYear: () => (/* reexport safe */ _helperFunctions__WEBPACK_IMPORTED_MODULE_2__.setDateYear),
-/* harmony export */   setOnlyDate: () => (/* reexport safe */ _setOnlyDate__WEBPACK_IMPORTED_MODULE_1__.setOnlyDate),
-/* harmony export */   subDateYear: () => (/* reexport safe */ _helperFunctions__WEBPACK_IMPORTED_MODULE_2__.subDateYear)
+/* harmony export */   convertDate: () => (/* reexport safe */ _helperFunctions__WEBPACK_IMPORTED_MODULE_3__.convertDate),
+/* harmony export */   equalDates: () => (/* reexport safe */ _helperFunctions__WEBPACK_IMPORTED_MODULE_3__.equalDates),
+/* harmony export */   setDateMonth: () => (/* reexport safe */ _helperFunctions__WEBPACK_IMPORTED_MODULE_3__.setDateMonth),
+/* harmony export */   setDateYear: () => (/* reexport safe */ _helperFunctions__WEBPACK_IMPORTED_MODULE_3__.setDateYear),
+/* harmony export */   setOnlyDate: () => (/* reexport safe */ _setOnlyDate__WEBPACK_IMPORTED_MODULE_2__.setOnlyDate),
+/* harmony export */   sortDates: () => (/* reexport safe */ _sortDates__WEBPACK_IMPORTED_MODULE_1__.sortDates),
+/* harmony export */   subDateYear: () => (/* reexport safe */ _helperFunctions__WEBPACK_IMPORTED_MODULE_3__.subDateYear)
 /* harmony export */ });
 /* harmony import */ var _changeInterval__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./changeInterval */ "./src/ui/DateTimePicker/lib/changeInterval.ts");
-/* harmony import */ var _setOnlyDate__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./setOnlyDate */ "./src/ui/DateTimePicker/lib/setOnlyDate.ts");
-/* harmony import */ var _helperFunctions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./helperFunctions */ "./src/ui/DateTimePicker/lib/helperFunctions.ts");
+/* harmony import */ var _sortDates__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./sortDates */ "./src/ui/DateTimePicker/lib/sortDates.ts");
+/* harmony import */ var _setOnlyDate__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./setOnlyDate */ "./src/ui/DateTimePicker/lib/setOnlyDate.ts");
+/* harmony import */ var _helperFunctions__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./helperFunctions */ "./src/ui/DateTimePicker/lib/helperFunctions.ts");
+
 
 
 
@@ -59946,6 +60026,30 @@ function setOnlyDate(_ref) {
 
 /***/ }),
 
+/***/ "./src/ui/DateTimePicker/lib/sortDates.ts":
+/*!************************************************!*\
+  !*** ./src/ui/DateTimePicker/lib/sortDates.ts ***!
+  \************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   sortDates: () => (/* binding */ sortDates)
+/* harmony export */ });
+/* harmony import */ var date_fns__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! date-fns */ "./node_modules/date-fns/compareAsc.js");
+
+function sortDates(dates) {
+  var first = dates[0];
+  var second = dates[1];
+  if (first && second && (0,date_fns__WEBPACK_IMPORTED_MODULE_0__.compareAsc)(first, second) > 0) {
+    return [second, first];
+  }
+  return dates;
+}
+
+/***/ }),
+
 /***/ "./src/ui/DateTimePicker/styles/DateTimePicker.module.scss":
 /*!*****************************************************************!*\
   !*** ./src/ui/DateTimePicker/styles/DateTimePicker.module.scss ***!
@@ -60399,6 +60503,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _ui__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @/ui */ "./src/ui/index.ts");
 /* harmony import */ var _ui__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../ui */ "./src/ui/DateTimePicker/ui/index.ts");
 /* harmony import */ var _styles__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../styles */ "./src/ui/DateTimePicker/styles/index.ts");
+/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @/hooks */ "./src/hooks/index.ts");
 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; } }
@@ -60412,6 +60517,7 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 
 
 
+
 var DateTimePicker = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function (props, ref) {
   var date = props.date,
     onSubmit = props.onSubmit,
@@ -60430,7 +60536,7 @@ var DateTimePicker = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardR
     _useState4 = _slicedToArray(_useState3, 2),
     pickerType = _useState4[0],
     setPickerType = _useState4[1];
-  (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () {
+  (0,_hooks__WEBPACK_IMPORTED_MODULE_7__.useDeepCompareEffect)(function () {
     var convertedDate = (0,_ui__WEBPACK_IMPORTED_MODULE_4__.convertDate)({
       initDate: date || undefined,
       type: type
@@ -60457,7 +60563,7 @@ var DateTimePicker = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardR
   var handleChangeDate = function handleChangeDate(value) {
     var processDate = function processDate(newDate) {
       if (Array.isArray(newDate) && type === 'date-range') {
-        return newDate;
+        return (0,_ui__WEBPACK_IMPORTED_MODULE_4__.sortDates)(newDate);
       } else if (typeof newDate === 'string') {
         return newDate;
       }
@@ -60873,9 +60979,6 @@ function TimePickerFeed(_ref) {
     getCurScrollTop = _useSyncedStateRef2[2];
   var containerHeight = _config__WEBPACK_IMPORTED_MODULE_5__.SIDES_NUM * _config__WEBPACK_IMPORTED_MODULE_5__.SIDE_ELEMENT_NUM * _config__WEBPACK_IMPORTED_MODULE_5__.CELL_SIZE + _config__WEBPACK_IMPORTED_MODULE_5__.VIEW_CELL_SIZE;
   var viewRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
-  var scrollEndTimeout = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
-  var changeValueTimeoutRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
-  var adjustScrollPositionTimeoutRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
   (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () {
     var startScrollTop = getCurScrollTop();
     if (containerRef.current && startScrollTop !== undefined) {
@@ -60899,38 +61002,12 @@ function TimePickerFeed(_ref) {
       (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 || _containerRef$current2.removeEventListener('wheel', onWheel);
     };
   }, []);
+  var updateValue = (0,_hooks__WEBPACK_IMPORTED_MODULE_3__.useDebouncedInvoker)(function () {
+    var centerItem = getCenterItem();
+    onChangeCenterItem === null || onChangeCenterItem === void 0 || onChangeCenterItem(centerItem);
+  }, _config__WEBPACK_IMPORTED_MODULE_5__.CHANGE_VALUE_TIMEOUT);
   (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () {
-    var _clearChangeTimeout = function _clearChangeTimeout() {
-      if (adjustScrollPositionTimeoutRef.current != null) {
-        clearTimeout(adjustScrollPositionTimeoutRef.current);
-      }
-    };
-    _clearChangeTimeout();
-    if (changeValueTimeoutRef.current) {
-      changeValueTimeoutRef.current = setTimeout(function () {
-        adjustScrollPosition(centerItem);
-      }, _config__WEBPACK_IMPORTED_MODULE_5__.ADJUST_SCROLL_POSITION_TIMEOUT);
-    }
-    return function () {
-      _clearChangeTimeout();
-    };
-  }, [centerItem]);
-  (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () {
-    var _clearChangeTimeout = function _clearChangeTimeout() {
-      if (changeValueTimeoutRef.current != null) {
-        clearTimeout(changeValueTimeoutRef.current);
-      }
-    };
-    _clearChangeTimeout();
-    if (changeValueTimeoutRef.current) {
-      changeValueTimeoutRef.current = setTimeout(function () {
-        var centerItem = getCenterItem();
-        onChangeCenterItem === null || onChangeCenterItem === void 0 || onChangeCenterItem(centerItem);
-      }, _config__WEBPACK_IMPORTED_MODULE_5__.CHANGE_VALUE_TIMEOUT);
-    }
-    return function () {
-      _clearChangeTimeout();
-    };
+    updateValue();
   }, [curScrollTop]);
   var getCenterItem = function getCenterItem() {
     return Math.round(Math.abs(getCurScrollTop()) / _config__WEBPACK_IMPORTED_MODULE_5__.CELL_SIZE);
@@ -60961,30 +61038,24 @@ function TimePickerFeed(_ref) {
       children: item
     })), idx);
   };
-  var adjustScrollPosition = function adjustScrollPosition(centerIndex) {
-    if (scrollEndTimeout.current != null) {
-      clearTimeout(scrollEndTimeout.current);
-    }
-    scrollEndTimeout.current = setTimeout(function () {
-      if (!isDragging.current) {
-        if (!containerRef.current) return;
-        var newPosition = centerIndex * _config__WEBPACK_IMPORTED_MODULE_5__.CELL_SIZE;
-        // Плавная коррекция позиции
-        containerRef.current.scrollTo({
-          top: newPosition,
-          behavior: 'smooth'
-        });
-      }
-    }, _config__WEBPACK_IMPORTED_MODULE_5__.SCROLL_END_TIMEOUT);
-  };
+  var adjustScrollPosition = (0,_hooks__WEBPACK_IMPORTED_MODULE_3__.useDebouncedInvoker)(function () {
+    var centerIndex = getCenterItem();
+    if (!isDragging.current && !isTouchedRef.current) {
+      if (!containerRef.current) return;
+      var newPosition = centerIndex * _config__WEBPACK_IMPORTED_MODULE_5__.CELL_SIZE;
+      // Плавная коррекция позиции
+      containerRef.current.scrollTo({
+        top: newPosition,
+        behavior: 'smooth'
+      });
+    }
+  }, _config__WEBPACK_IMPORTED_MODULE_5__.SCROLL_END_TIMEOUT);
   var onScroll = function onScroll(event) {
     setCurScrollTop(event.currentTarget.scrollTop);
     if (viewRef.current) {
       viewRef.current.scrollTop = event.currentTarget.scrollTop;
     }
-    if (isTouchedRef.current) {
-      adjustScrollPosition(getCenterItem());
-    }
+    adjustScrollPosition();
   };
   var getContent = function getContent() {
     var isView = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
@@ -61032,7 +61103,7 @@ function TimePickerFeed(_ref) {
     var _containerRef$current8;
     isDragging.current = false;
     (_containerRef$current8 = containerRef.current) === null || _containerRef$current8 === void 0 || _containerRef$current8.classList.remove(_styles__WEBPACK_IMPORTED_MODULE_4__.TimePickerFeedStyle.grabbing);
-    adjustScrollPosition(getCenterItem());
+    adjustScrollPosition();
   };
   var isTouchedRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(false);
   var onTouchStart = function onTouchStart() {
@@ -61040,6 +61111,7 @@ function TimePickerFeed(_ref) {
   };
   var onTouchEnd = function onTouchEnd() {
     isTouchedRef.current = false;
+    adjustScrollPosition();
   };
   return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
     className: _styles__WEBPACK_IMPORTED_MODULE_4__.TimePickerFeedStyle.wrapper,
@@ -61823,7 +61895,6 @@ function TimePicker(_ref4) {
       });
     }
   }, [hoursCenter, minuteCenter]);
-  //
   (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () {
     if (time) {
       var newHours = getHours({
@@ -63598,7 +63669,8 @@ function DateField(_ref) {
       animeType: 'popover'
     }),
     open = _useModal.open,
-    close = _useModal.close;
+    close = _useModal.close,
+    getIsShow = _useModal.getIsShow;
   var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)((0,_lib__WEBPACK_IMPORTED_MODULE_9__.getDateFromValue)({
       value: value,
       outFormat: outFormat,
@@ -63675,9 +63747,11 @@ function DateField(_ref) {
     setIsFocus(false);
   };
   var handleFocus = function handleFocus(e) {
-    onFocus && onFocus(e);
     setIsFocus(true);
-    open();
+    if (!getIsShow()) {
+      open();
+    }
+    onFocus === null || onFocus === void 0 || onFocus(e);
   };
   var getDateContent = function getDateContent() {
     return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_DateFieldBase__WEBPACK_IMPORTED_MODULE_10__.DateFieldBase, _objectSpread(_objectSpread({}, props), {}, {
@@ -63932,7 +64006,8 @@ function DateTimeField(_ref) {
       animeType: 'popover'
     }),
     open = _useModal.open,
-    close = _useModal.close;
+    close = _useModal.close,
+    getIsShow = _useModal.getIsShow;
   var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)((0,_lib__WEBPACK_IMPORTED_MODULE_9__.getTimeFromValue)({
       value: value,
       outFormat: outFormat,
@@ -64023,9 +64098,11 @@ function DateTimeField(_ref) {
     setIsFocus(false);
   };
   var handleFocus = function handleFocus(e) {
-    onFocus && onFocus(e);
     setIsFocus(true);
-    open();
+    if (!getIsShow()) {
+      open();
+    }
+    onFocus === null || onFocus === void 0 || onFocus(e);
   };
   var getTimeContent = function getTimeContent() {
     return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_TimeFieldBase__WEBPACK_IMPORTED_MODULE_10__.TimeFieldBase, _objectSpread(_objectSpread({}, props), {}, {
@@ -64172,7 +64249,8 @@ function TimeField(_ref) {
       animeType: 'popover'
     }),
     open = _useModal.open,
-    close = _useModal.close;
+    close = _useModal.close,
+    getIsShow = _useModal.getIsShow;
   var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)((0,_lib__WEBPACK_IMPORTED_MODULE_9__.getTimeFromValue)({
       value: value,
       outFormat: outFormat,
@@ -64249,9 +64327,11 @@ function TimeField(_ref) {
     setIsFocus(false);
   };
   var handleFocus = function handleFocus(e) {
-    onFocus && onFocus(e);
     setIsFocus(true);
-    open();
+    if (!getIsShow()) {
+      open();
+    }
+    onFocus === null || onFocus === void 0 || onFocus(e);
   };
   var getTimeContent = function getTimeContent() {
     return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_TimeFieldBase__WEBPACK_IMPORTED_MODULE_10__.TimeFieldBase, _objectSpread(_objectSpread({}, props), {}, {
@@ -64792,7 +64872,7 @@ function DateRangeField(_ref) {
     width = _ref$width === void 0 ? 'fill' : _ref$width,
     additionsStyles = _ref.additionsStyles,
     _ref$position = _ref.position,
-    position = _ref$position === void 0 ? 'absolute' : _ref$position;
+    position = _ref$position === void 0 ? 'fixed' : _ref$position;
   var _useState = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
     isFocus = _useState2[0],
@@ -64801,13 +64881,17 @@ function DateRangeField(_ref) {
   var datePickerRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
   var _useModal = (0,_hooks__WEBPACK_IMPORTED_MODULE_5__.useModal)(datePickerRef, {
       targetRef: fieldRef,
-      animeType: 'popover'
+      animeType: 'popover',
+      position: position
     }),
     open = _useModal.open,
-    close = _useModal.close;
+    close = _useModal.close,
+    getIsShow = _useModal.getIsShow;
   var handleFocus = function handleFocus(e) {
     setIsFocus(true);
-    open();
+    if (!getIsShow()) {
+      open();
+    }
     onFocus === null || onFocus === void 0 || onFocus(e);
   };
   var handleBlur = function handleBlur(e) {
@@ -64891,8 +64975,8 @@ function DateRangeField(_ref) {
       iconSecond: secondIcon,
       textFirst: firstText,
       textSecond: secondText,
-      disabled: disabled,
       width: width,
+      disabled: disabled,
       onXClose: getClearButton()
     }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_3__.DateTimePicker, {
       type: 'date-range',
@@ -70936,6 +71020,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   setDateMonth: () => (/* reexport safe */ _DateTimePicker__WEBPACK_IMPORTED_MODULE_24__.setDateMonth),
 /* harmony export */   setDateYear: () => (/* reexport safe */ _DateTimePicker__WEBPACK_IMPORTED_MODULE_24__.setDateYear),
 /* harmony export */   setOnlyDate: () => (/* reexport safe */ _DateTimePicker__WEBPACK_IMPORTED_MODULE_24__.setOnlyDate),
+/* harmony export */   sortDates: () => (/* reexport safe */ _DateTimePicker__WEBPACK_IMPORTED_MODULE_24__.sortDates),
 /* harmony export */   subDateYear: () => (/* reexport safe */ _DateTimePicker__WEBPACK_IMPORTED_MODULE_24__.subDateYear)
 /* harmony export */ });
 /* harmony import */ var _Buttons__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Buttons */ "./src/ui/Buttons/index.ts");
@@ -71229,6 +71314,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   setDateYear: () => (/* reexport safe */ _ui__WEBPACK_IMPORTED_MODULE_1__.setDateYear),
 /* harmony export */   setDeepValue: () => (/* reexport safe */ _lib__WEBPACK_IMPORTED_MODULE_4__.setDeepValue),
 /* harmony export */   setOnlyDate: () => (/* reexport safe */ _ui__WEBPACK_IMPORTED_MODULE_1__.setOnlyDate),
+/* harmony export */   sortDates: () => (/* reexport safe */ _ui__WEBPACK_IMPORTED_MODULE_1__.sortDates),
 /* harmony export */   startOfDayUTC: () => (/* reexport safe */ _lib__WEBPACK_IMPORTED_MODULE_4__.startOfDayUTC),
 /* harmony export */   subDateYear: () => (/* reexport safe */ _ui__WEBPACK_IMPORTED_MODULE_1__.subDateYear),
 /* harmony export */   throttle: () => (/* reexport safe */ _lib__WEBPACK_IMPORTED_MODULE_4__.throttle),
@@ -71247,7 +71333,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   useInteractiveZone: () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_2__.useInteractiveZone),
 /* harmony export */   useIsErrorField: () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_2__.useIsErrorField),
 /* harmony export */   useKeyboardInput: () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_2__.useKeyboardInput),
-/* harmony export */   useKeyboardPressed: () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_2__.useKeyboardPressed),
+/* harmony export */   useKeyboardPressing: () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_2__.useKeyboardPressing),
 /* harmony export */   useModal: () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_2__.useModal),
 /* harmony export */   useModalAnim: () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_2__.useModalAnim),
 /* harmony export */   useResettableTimeout: () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_2__.useResettableTimeout),