indicator-ui 0.1.8 → 0.1.10

package/dist/index.js

@@ -53888,6 +53888,271 @@ function useTouchpadInput() {}
 
 /***/ }),
 
+/***/ "./src/hooks/elementObservers/index.ts":
+/*!*********************************************!*\
+  !*** ./src/hooks/elementObservers/index.ts ***!
+  \*********************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   useIntersectionObserver: () => (/* reexport safe */ _useIntersectionObserver__WEBPACK_IMPORTED_MODULE_1__.useIntersectionObserver),
+/* harmony export */   useResizeObserver: () => (/* reexport safe */ _useResizeObserver__WEBPACK_IMPORTED_MODULE_0__.useResizeObserver),
+/* harmony export */   useResizeWindowObserver: () => (/* reexport safe */ _useResizeWindowObserver__WEBPACK_IMPORTED_MODULE_2__.useResizeWindowObserver)
+/* harmony export */ });
+/* harmony import */ var _useResizeObserver__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./useResizeObserver */ "./src/hooks/elementObservers/useResizeObserver.ts");
+/* harmony import */ var _useIntersectionObserver__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./useIntersectionObserver */ "./src/hooks/elementObservers/useIntersectionObserver.ts");
+/* harmony import */ var _useResizeWindowObserver__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./useResizeWindowObserver */ "./src/hooks/elementObservers/useResizeWindowObserver.ts");
+
+
+
+
+/***/ }),
+
+/***/ "./src/hooks/elementObservers/useIntersectionObserver.ts":
+/*!***************************************************************!*\
+  !*** ./src/hooks/elementObservers/useIntersectionObserver.ts ***!
+  \***************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   useIntersectionObserver: () => (/* binding */ useIntersectionObserver)
+/* 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__);
+/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @/hooks */ "./src/hooks/index.ts");
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+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 useIntersectionObserver() {
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+    args[_key] = arguments[_key];
+  }
+  var ref = args[0],
+    callback = args[1],
+    options = args[2];
+  var cbRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(callback);
+  var observerRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(getObserver());
+  var _useSimpleRefListElem = (0,_hooks__WEBPACK_IMPORTED_MODULE_1__.useSimpleRefListElementWork)(ref),
+    _useSimpleRefListElem2 = _slicedToArray(_useSimpleRefListElem, 2),
+    _ = _useSimpleRefListElem2[0],
+    getObjects = _useSimpleRefListElem2[1];
+  var tryClearObserver = function tryClearObserver() {
+    var objects = getObjects(ref);
+    var _iterator = _createForOfIteratorHelper(objects),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var obj = _step.value;
+        if (obj) {
+          observerRef.current.unobserve(obj);
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+  };
+  var tryInitObserver = function tryInitObserver() {
+    var objects = getObjects(ref);
+    var _iterator2 = _createForOfIteratorHelper(objects),
+      _step2;
+    try {
+      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+        var obj = _step2.value;
+        if (obj) {
+          observerRef.current.observe(obj);
+        }
+      }
+    } catch (err) {
+      _iterator2.e(err);
+    } finally {
+      _iterator2.f();
+    }
+  };
+  var init = function init() {
+    tryClearObserver();
+    tryInitObserver();
+  };
+  var reinitResizeObserver = function reinitResizeObserver() {
+    clearObserver();
+    observerRef.current = getObserver();
+    init();
+  };
+  (0,_hooks__WEBPACK_IMPORTED_MODULE_1__.useDeepCompareEffect)(function () {
+    init();
+    return clearObserver;
+  }, [ref]);
+  return {
+    reinit: init,
+    reinitObserver: reinitResizeObserver,
+    clear: tryClearObserver
+  };
+  function getObserver() {
+    return new IntersectionObserver(getCallback(), options);
+  }
+  function clearObserver() {
+    observerRef.current.disconnect();
+  }
+  function getCallback() {
+    return cbRef.current;
+  }
+}
+
+/***/ }),
+
+/***/ "./src/hooks/elementObservers/useResizeObserver.ts":
+/*!*********************************************************!*\
+  !*** ./src/hooks/elementObservers/useResizeObserver.ts ***!
+  \*********************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   useResizeObserver: () => (/* binding */ useResizeObserver)
+/* 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__);
+/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @/hooks */ "./src/hooks/index.ts");
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+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 useResizeObserver() {
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+    args[_key] = arguments[_key];
+  }
+  var ref = args[0],
+    callback = args[1];
+  var cbRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(callback);
+  var observerRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(getObserver());
+  var _useSimpleRefListElem = (0,_hooks__WEBPACK_IMPORTED_MODULE_1__.useSimpleRefListElementWork)(ref),
+    _useSimpleRefListElem2 = _slicedToArray(_useSimpleRefListElem, 2),
+    _ = _useSimpleRefListElem2[0],
+    getObjects = _useSimpleRefListElem2[1];
+  var tryClearObserver = function tryClearObserver() {
+    var objects = getObjects(ref);
+    var _iterator = _createForOfIteratorHelper(objects),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var obj = _step.value;
+        if (obj) {
+          observerRef.current.unobserve(obj);
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+  };
+  var tryInitObserver = function tryInitObserver() {
+    var objects = getObjects(ref);
+    var _iterator2 = _createForOfIteratorHelper(objects),
+      _step2;
+    try {
+      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+        var obj = _step2.value;
+        if (obj) {
+          observerRef.current.observe(obj);
+        }
+      }
+    } catch (err) {
+      _iterator2.e(err);
+    } finally {
+      _iterator2.f();
+    }
+  };
+  var init = function init() {
+    tryClearObserver();
+    tryInitObserver();
+  };
+  var reinitResizeObserver = function reinitResizeObserver() {
+    clearObserver();
+    observerRef.current = getObserver();
+    init();
+  };
+  (0,_hooks__WEBPACK_IMPORTED_MODULE_1__.useDeepCompareEffect)(function () {
+    init();
+    return clearObserver;
+  }, [ref]);
+  return {
+    reinit: init,
+    reinitObserver: reinitResizeObserver,
+    clear: tryClearObserver
+  };
+  function getObserver() {
+    return new ResizeObserver(getCallback());
+  }
+  function clearObserver() {
+    observerRef.current.disconnect();
+  }
+  function getCallback() {
+    return cbRef.current;
+  }
+}
+
+/***/ }),
+
+/***/ "./src/hooks/elementObservers/useResizeWindowObserver.ts":
+/*!***************************************************************!*\
+  !*** ./src/hooks/elementObservers/useResizeWindowObserver.ts ***!
+  \***************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   useResizeWindowObserver: () => (/* binding */ useResizeWindowObserver)
+/* 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 useResizeWindowObserver() {
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+    args[_key] = arguments[_key];
+  }
+  var callback = args[0];
+  var cbRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(callback);
+  var getCallback = function getCallback() {
+    return cbRef.current;
+  };
+  var clearListener = function clearListener() {
+    window.removeEventListener('resize', getCallback());
+  };
+  var setUpListener = function setUpListener() {
+    clearListener();
+    window.addEventListener('resize', getCallback());
+  };
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
+    setUpListener();
+    return clearListener;
+  }, []);
+  return {
+    reinit: setUpListener,
+    clear: clearListener
+  };
+}
+
+/***/ }),
+
 /***/ "./src/hooks/index.ts":
 /*!****************************!*\
   !*** ./src/hooks/index.ts ***!
@@ -53907,14 +54172,19 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   useElementFixedOffset: () => (/* reexport safe */ _useElementFixedOffset__WEBPACK_IMPORTED_MODULE_4__.useElementFixedOffset),
 /* harmony export */   useFormData: () => (/* reexport safe */ _useFormData__WEBPACK_IMPORTED_MODULE_1__.useFormData),
 /* harmony export */   useInteractiveZone: () => (/* reexport safe */ _useInteractiveZone__WEBPACK_IMPORTED_MODULE_11__.useInteractiveZone),
+/* harmony export */   useIntersectionObserver: () => (/* reexport safe */ _elementObservers__WEBPACK_IMPORTED_MODULE_17__.useIntersectionObserver),
 /* harmony export */   useIsErrorField: () => (/* reexport safe */ _useIsErrorField__WEBPACK_IMPORTED_MODULE_0__.useIsErrorField),
 /* harmony export */   useKeyboardInput: () => (/* reexport safe */ _controlsInput__WEBPACK_IMPORTED_MODULE_16__.useKeyboardInput),
 /* 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),
+/* harmony export */   useResizeObserver: () => (/* reexport safe */ _elementObservers__WEBPACK_IMPORTED_MODULE_17__.useResizeObserver),
+/* harmony export */   useResizeWindowObserver: () => (/* reexport safe */ _elementObservers__WEBPACK_IMPORTED_MODULE_17__.useResizeWindowObserver),
 /* harmony export */   useScrollIndicators: () => (/* reexport safe */ _useScrollIndicators__WEBPACK_IMPORTED_MODULE_13__.useScrollIndicators),
 /* harmony export */   useShimmer: () => (/* reexport safe */ _ui_animations__WEBPACK_IMPORTED_MODULE_14__.useShimmer),
+/* harmony export */   useSimpleRefElementWork: () => (/* reexport safe */ _simpleRefWork__WEBPACK_IMPORTED_MODULE_18__.useSimpleRefElementWork),
+/* harmony export */   useSimpleRefListElementWork: () => (/* reexport safe */ _simpleRefWork__WEBPACK_IMPORTED_MODULE_18__.useSimpleRefListElementWork),
 /* harmony export */   useSmartPlacementResolver: () => (/* reexport safe */ _useSmartPlacementResolver__WEBPACK_IMPORTED_MODULE_12__.useSmartPlacementResolver),
 /* harmony export */   useSmartPosition: () => (/* reexport safe */ _useSmartPosition__WEBPACK_IMPORTED_MODULE_9__.useSmartPosition),
 /* harmony export */   useSmartScroll: () => (/* reexport safe */ _useSmartScroll__WEBPACK_IMPORTED_MODULE_10__.useSmartScroll),
@@ -53938,6 +54208,10 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _ui_animations__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./ui-animations */ "./src/hooks/ui-animations/index.ts");
 /* harmony import */ var _modalWindows__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./modalWindows */ "./src/hooks/modalWindows/index.ts");
 /* harmony import */ var _controlsInput__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ./controlsInput */ "./src/hooks/controlsInput/index.ts");
+/* harmony import */ var _elementObservers__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ./elementObservers */ "./src/hooks/elementObservers/index.ts");
+/* harmony import */ var _simpleRefWork__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ./simpleRefWork */ "./src/hooks/simpleRefWork.ts");
+
+
 
 
 
@@ -53993,6 +54267,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _useInteractiveZone__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../useInteractiveZone */ "./src/hooks/useInteractiveZone.ts");
 /* harmony import */ var _useSyncedStateRef__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../useSyncedStateRef */ "./src/hooks/useSyncedStateRef.ts");
 /* harmony import */ var _ui_animations__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../ui-animations */ "./src/hooks/ui-animations/index.ts");
+/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @/hooks */ "./src/hooks/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); }
 var _excluded = ["containerClickAreaRef"];
 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; }
@@ -54012,6 +54287,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 
 
 
+
 /**
  * Хук для backdrop-модального окна.
  *
@@ -54040,6 +54316,7 @@ function useBackdropModal() {
     options = _args$ === void 0 ? {} : _args$;
   var containerClickAreaRef = options.containerClickAreaRef,
     animeOptions = _objectWithoutProperties(options, _excluded);
+  var targetRef = animeOptions.targetRef;
   var _useSyncedStateRef = (0,_useSyncedStateRef__WEBPACK_IMPORTED_MODULE_2__.useSyncedStateRef)(false),
     _useSyncedStateRef2 = _slicedToArray(_useSyncedStateRef, 3),
     isShow = _useSyncedStateRef2[0],
@@ -54048,19 +54325,24 @@ function useBackdropModal() {
   var onHiding = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function () {
     setIsShow(false);
   }, []);
-  (0,_useInteractiveZone__WEBPACK_IMPORTED_MODULE_1__.useInteractiveZone)(containerClickAreaRef || ref, {
-    onMissClick: onMissClick
-  });
   var _useBackgroundModalAn = (0,_ui_animations__WEBPACK_IMPORTED_MODULE_3__.useBackgroundModalAnim)(ref, _objectSpread(_objectSpread({}, animeOptions), {}, {
       onHiding: onHiding
     })),
     appearanceAnim = _useBackgroundModalAn.appearanceAnim,
     disappearanceAnim = _useBackgroundModalAn.disappearanceAnim,
-    reinit = _useBackgroundModalAn.reinit;
+    reinit = _useBackgroundModalAn.reinit,
+    updateModalPlacement = _useBackgroundModalAn.updateModalPlacement,
+    getInitStyle = _useBackgroundModalAn.getInitStyle;
+  (0,_useInteractiveZone__WEBPACK_IMPORTED_MODULE_1__.useInteractiveZone)(containerClickAreaRef || ref, {
+    onMissClick: onMissClick
+  });
+  (0,_hooks__WEBPACK_IMPORTED_MODULE_4__.useResizeWindowObserver)(updateModalPlacement);
+  var resizeObserverService = (0,_hooks__WEBPACK_IMPORTED_MODULE_4__.useResizeObserver)([ref, targetRef, containerClickAreaRef], updateModalPlacement);
   var open = function open() {
     setIsShow(true);
     requestAnimationFrame(function () {
       reinit();
+      resizeObserverService.reinit();
       appearanceAnim();
     });
   };
@@ -54084,7 +54366,8 @@ function useBackdropModal() {
     open: open,
     close: close,
     switching: switching,
-    reinit: reinit
+    reinit: reinit,
+    getInitStyle: getInitStyle
   };
 }
 
@@ -54104,6 +54387,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _useInteractiveZone__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../useInteractiveZone */ "./src/hooks/useInteractiveZone.ts");
 /* harmony import */ var _useSyncedStateRef__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../useSyncedStateRef */ "./src/hooks/useSyncedStateRef.ts");
 /* harmony import */ var _ui_animations__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../ui-animations */ "./src/hooks/ui-animations/index.ts");
+/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @/hooks */ "./src/hooks/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); }
 var _excluded = ["addition"];
 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; }
@@ -54122,6 +54406,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 
 
 
+
 /**
  * Хук для модального окна.
  *
@@ -54163,23 +54448,28 @@ function useModal() {
     setIsShow(false);
     animeOptions === null || animeOptions === void 0 || (_animeOptions$onHidin = animeOptions.onHiding) === null || _animeOptions$onHidin === void 0 || _animeOptions$onHidin.call(animeOptions);
   };
+  var _useModalAnim = (0,_ui_animations__WEBPACK_IMPORTED_MODULE_2__.useModalAnim)(ref, _objectSpread(_objectSpread({}, animeOptions), {}, {
+      onHiding: onHiding
+    })),
+    appearanceAnim = _useModalAnim.appearanceAnim,
+    disappearanceAnim = _useModalAnim.disappearanceAnim,
+    reinit = _useModalAnim.reinit,
+    updateModalPlacement = _useModalAnim.updateModalPlacement,
+    getInitStyle = _useModalAnim.getInitStyle;
   (0,_useInteractiveZone__WEBPACK_IMPORTED_MODULE_0__.useInteractiveZone)(ref, {
     onMissClick: onMissClick
   }, {
     ignore: [(targetRef === null || targetRef === void 0 ? void 0 : targetRef.current) || null],
     addition: addition
   });
-  var _useModalAnim = (0,_ui_animations__WEBPACK_IMPORTED_MODULE_2__.useModalAnim)(ref, _objectSpread(_objectSpread({}, animeOptions), {}, {
-      onHiding: onHiding
-    })),
-    appearanceAnim = _useModalAnim.appearanceAnim,
-    disappearanceAnim = _useModalAnim.disappearanceAnim,
-    reinit = _useModalAnim.reinit;
+  (0,_hooks__WEBPACK_IMPORTED_MODULE_3__.useResizeWindowObserver)(updateModalPlacement);
+  var resizeObserverService = (0,_hooks__WEBPACK_IMPORTED_MODULE_3__.useResizeObserver)([ref, targetRef], updateModalPlacement);
   var open = function open() {
     setIsShow(true);
     requestAnimationFrame(function () {
       reinit();
       appearanceAnim();
+      resizeObserverService.reinit();
     });
   };
   var close = function close() {
@@ -54202,8 +54492,70 @@ function useModal() {
     open: open,
     close: close,
     switching: switching,
-    reinit: reinit
+    reinit: reinit,
+    getInitStyle: getInitStyle
+  };
+}
+
+/***/ }),
+
+/***/ "./src/hooks/simpleRefWork.ts":
+/*!************************************!*\
+  !*** ./src/hooks/simpleRefWork.ts ***!
+  \************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   useSimpleRefElementWork: () => (/* binding */ useSimpleRefElementWork),
+/* harmony export */   useSimpleRefListElementWork: () => (/* binding */ useSimpleRefListElementWork)
+/* harmony export */ });
+/* harmony import */ var _lib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @/lib */ "./src/lib/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; } }
+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 useSimpleRefElementWork() {
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+    args[_key] = arguments[_key];
+  }
+  var ref = args[0];
+  var _getObj = function _getObj(item) {
+    return (0,_lib__WEBPACK_IMPORTED_MODULE_0__.isObject)(item) && 'current' in item ? item.current : item || null;
+  };
+  var getObj = function getObj() {
+    return _getObj(ref);
+  };
+  return [getObj, _getObj];
+}
+function useSimpleRefListElementWork() {
+  for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+    args[_key2] = arguments[_key2];
+  }
+  var ref = args[0];
+  var _useSimpleRefElementW = useSimpleRefElementWork(),
+    _useSimpleRefElementW2 = _slicedToArray(_useSimpleRefElementW, 2),
+    _ = _useSimpleRefElementW2[0],
+    getObj = _useSimpleRefElementW2[1];
+  var _getObjects = function _getObjects(items) {
+    var res = [];
+    if (Array.isArray(items)) {
+      items.forEach(function (item) {
+        res.push(getObj(item));
+      });
+    } else {
+      res.push(getObj(items));
+    }
+    return res;
+  };
+  var getObjects = function getObjects() {
+    return _getObjects(ref);
   };
+  return [getObjects, _getObjects];
 }
 
 /***/ }),
@@ -54222,16 +54574,16 @@ __webpack_require__.r(__webpack_exports__);
 var BACKDROP_BACKGROUND_COLOR = 'rgba(0, 0, 0, 0.3)';
 var Z_INDEX_MODAL_DEFAULT = 15;
 var Z_INDEX_BACKDROP_DEFAULT = 14;
-var FADE_IN_SCALE_UP_ANIMATION = function FADE_IN_SCALE_UP_ANIMATION(_ref) {
-  var modal = _ref.modal,
-    backdrop = _ref.backdrop,
-    predictPos = _ref.predictPos;
-  var appear = function appear(timeline, options) {
+var FADE_IN_SCALE_UP_ANIMATION = function FADE_IN_SCALE_UP_ANIMATION() {
+  var appear = function appear(props, timeline, options) {
     var _options$zIndex, _options$zIndex2;
+    var modal = props.modal,
+      backdrop = props.backdrop,
+      predictPos = props.predictPos;
     var modalZIndex = (options === null || options === void 0 || (_options$zIndex = options.zIndex) === null || _options$zIndex === void 0 ? void 0 : _options$zIndex.modal) || Z_INDEX_MODAL_DEFAULT;
     var backdropZIndex = (options === null || options === void 0 || (_options$zIndex2 = options.zIndex) === null || _options$zIndex2 === void 0 ? void 0 : _options$zIndex2.backdrop) || Z_INDEX_BACKDROP_DEFAULT;
     var backdropColor = (options === null || options === void 0 ? void 0 : options.backdropColor) || BACKDROP_BACKGROUND_COLOR;
-    timeline.clear().set(modal, {
+    timeline.set(modal, {
       visibility: 'visible',
       left: predictPos[0],
       top: predictPos[1],
@@ -54257,8 +54609,10 @@ var FADE_IN_SCALE_UP_ANIMATION = function FADE_IN_SCALE_UP_ANIMATION(_ref) {
     });
     return timeline;
   };
-  var disappear = function disappear(timeline) {
-    timeline.clear().to(modal, {
+  var disappear = function disappear(props, timeline) {
+    var modal = props.modal,
+      backdrop = props.backdrop;
+    timeline.to(modal, {
       opacity: 0,
       scale: 0.97,
       duration: 0.2,
@@ -54279,16 +54633,17 @@ var FADE_IN_SCALE_UP_ANIMATION = function FADE_IN_SCALE_UP_ANIMATION(_ref) {
     disappear: disappear
   };
 };
-var SLIDE_BASE_FADE_IN_ANIMATION = function SLIDE_BASE_FADE_IN_ANIMATION(_ref2, hideHeight) {
-  var modal = _ref2.modal,
-    backdrop = _ref2.backdrop,
-    predictPos = _ref2.predictPos;
-  var appear = function appear(timeline, options) {
+var SLIDE_BASE_FADE_IN_ANIMATION = function SLIDE_BASE_FADE_IN_ANIMATION(getHideHeight) {
+  var appear = function appear(props, timeline, options) {
     var _options$zIndex3, _options$zIndex4;
+    var hideHeight = getHideHeight(props);
+    var modal = props.modal,
+      backdrop = props.backdrop,
+      predictPos = props.predictPos;
     var modalZIndex = (options === null || options === void 0 || (_options$zIndex3 = options.zIndex) === null || _options$zIndex3 === void 0 ? void 0 : _options$zIndex3.modal) || Z_INDEX_MODAL_DEFAULT;
     var backdropZIndex = (options === null || options === void 0 || (_options$zIndex4 = options.zIndex) === null || _options$zIndex4 === void 0 ? void 0 : _options$zIndex4.backdrop) || Z_INDEX_BACKDROP_DEFAULT;
     var backdropColor = (options === null || options === void 0 ? void 0 : options.backdropColor) || BACKDROP_BACKGROUND_COLOR;
-    timeline.clear().set(modal, {
+    timeline.set(modal, {
       visibility: 'visible',
       left: predictPos[0],
       top: hideHeight,
@@ -54316,8 +54671,11 @@ var SLIDE_BASE_FADE_IN_ANIMATION = function SLIDE_BASE_FADE_IN_ANIMATION(_ref2,
     });
     return timeline;
   };
-  var disappear = function disappear(timeline) {
-    timeline.clear().to(modal, {
+  var disappear = function disappear(props, timeline) {
+    var modal = props.modal,
+      backdrop = props.backdrop;
+    var hideHeight = getHideHeight(props);
+    timeline.to(modal, {
       opacity: 0,
       duration: 0.3,
       ease: 'power2.in'
@@ -54341,29 +54699,33 @@ var SLIDE_BASE_FADE_IN_ANIMATION = function SLIDE_BASE_FADE_IN_ANIMATION(_ref2,
     disappear: disappear
   };
 };
-var SLIDE_UP_FADE_IN_ANIMATION = function SLIDE_UP_FADE_IN_ANIMATION(props) {
-  var predictPos = props.predictPos;
-  var WINDOW_SIZE_DEFAULT = 1920;
-  var windowHeight = typeof window !== 'undefined' ? window.innerHeight : WINDOW_SIZE_DEFAULT;
-  var hideHeight = windowHeight - predictPos[1];
-  return SLIDE_BASE_FADE_IN_ANIMATION(props, hideHeight);
+var SLIDE_UP_FADE_IN_ANIMATION = function SLIDE_UP_FADE_IN_ANIMATION() {
+  var getHideHeight = function getHideHeight(props) {
+    var predictPos = props.predictPos;
+    var WINDOW_SIZE_DEFAULT = 1920;
+    var windowHeight = typeof window !== 'undefined' ? window.innerHeight : WINDOW_SIZE_DEFAULT;
+    return windowHeight - predictPos[1];
+  };
+  return SLIDE_BASE_FADE_IN_ANIMATION(getHideHeight);
 };
-var SLIDE_DOWN_FADE_IN_ANIMATION = function SLIDE_DOWN_FADE_IN_ANIMATION(props) {
-  var predictPos = props.predictPos,
-    modalSize = props.modalSize;
-  var hideHeight = -(predictPos[1] + modalSize[1]);
-  return SLIDE_BASE_FADE_IN_ANIMATION(props, hideHeight);
+var SLIDE_DOWN_FADE_IN_ANIMATION = function SLIDE_DOWN_FADE_IN_ANIMATION() {
+  var getHideHeight = function getHideHeight(props) {
+    var predictPos = props.predictPos,
+      modalSize = props.modalSize;
+    return -(predictPos[1] + modalSize[1]);
+  };
+  return SLIDE_BASE_FADE_IN_ANIMATION(getHideHeight);
 };
-var FADE_IN_ANIMATION = function FADE_IN_ANIMATION(_ref3) {
-  var modal = _ref3.modal,
-    backdrop = _ref3.backdrop,
-    predictPos = _ref3.predictPos;
-  var appear = function appear(timeline, options) {
+var FADE_IN_ANIMATION = function FADE_IN_ANIMATION() {
+  var appear = function appear(props, timeline, options) {
     var _options$zIndex5, _options$zIndex6;
+    var modal = props.modal,
+      backdrop = props.backdrop,
+      predictPos = props.predictPos;
     var modalZIndex = (options === null || options === void 0 || (_options$zIndex5 = options.zIndex) === null || _options$zIndex5 === void 0 ? void 0 : _options$zIndex5.modal) || Z_INDEX_MODAL_DEFAULT;
     var backdropZIndex = (options === null || options === void 0 || (_options$zIndex6 = options.zIndex) === null || _options$zIndex6 === void 0 ? void 0 : _options$zIndex6.backdrop) || Z_INDEX_BACKDROP_DEFAULT;
     var backdropColor = (options === null || options === void 0 ? void 0 : options.backdropColor) || BACKDROP_BACKGROUND_COLOR;
-    timeline.clear().set(modal, {
+    timeline.set(modal, {
       visibility: 'visible',
       left: predictPos[0],
       top: predictPos[1],
@@ -54387,8 +54749,10 @@ var FADE_IN_ANIMATION = function FADE_IN_ANIMATION(_ref3) {
     });
     return timeline;
   };
-  var disappear = function disappear(timeline) {
-    timeline.clear().to(modal, {
+  var disappear = function disappear(props, timeline) {
+    var modal = props.modal,
+      backdrop = props.backdrop;
+    timeline.to(modal, {
       opacity: 0,
       duration: 0.2,
       ease: 'power2.in'
@@ -54408,12 +54772,12 @@ var FADE_IN_ANIMATION = function FADE_IN_ANIMATION(_ref3) {
     disappear: disappear
   };
 };
-var BACKDROP_MODAL_ANIMATIONS = function BACKDROP_MODAL_ANIMATIONS(props) {
+var BACKDROP_MODAL_ANIMATIONS = function BACKDROP_MODAL_ANIMATIONS() {
   return {
-    'fade-in-scale-up': FADE_IN_SCALE_UP_ANIMATION(props),
-    'slide-up-fade-in': SLIDE_UP_FADE_IN_ANIMATION(props),
-    'slide-down-fade-in': SLIDE_DOWN_FADE_IN_ANIMATION(props),
-    'fade-in': FADE_IN_ANIMATION(props)
+    'fade-in-scale-up': FADE_IN_SCALE_UP_ANIMATION(),
+    'slide-up-fade-in': SLIDE_UP_FADE_IN_ANIMATION(),
+    'slide-down-fade-in': SLIDE_DOWN_FADE_IN_ANIMATION(),
+    'fade-in': FADE_IN_ANIMATION()
   };
 };
 
@@ -54430,11 +54794,14 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   BACKDROP_MODAL_ANIMATIONS: () => (/* reexport safe */ _backdropModalAnimations__WEBPACK_IMPORTED_MODULE_1__.BACKDROP_MODAL_ANIMATIONS),
 /* harmony export */   MODAL_ANIMATIONS: () => (/* reexport safe */ _modalAnimations__WEBPACK_IMPORTED_MODULE_0__.MODAL_ANIMATIONS),
+/* harmony export */   MOVING_ANIMATIONS: () => (/* reexport safe */ _movingAnimations__WEBPACK_IMPORTED_MODULE_3__.MOVING_ANIMATIONS),
 /* harmony export */   SHIMMER_ANIMATIONS: () => (/* reexport safe */ _shimmerAnimation__WEBPACK_IMPORTED_MODULE_2__.SHIMMER_ANIMATIONS)
 /* harmony export */ });
 /* harmony import */ var _modalAnimations__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./modalAnimations */ "./src/hooks/ui-animations/assets/modalAnimations.ts");
 /* harmony import */ var _backdropModalAnimations__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./backdropModalAnimations */ "./src/hooks/ui-animations/assets/backdropModalAnimations.ts");
 /* harmony import */ var _shimmerAnimation__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./shimmerAnimation */ "./src/hooks/ui-animations/assets/shimmerAnimation.ts");
+/* harmony import */ var _movingAnimations__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./movingAnimations */ "./src/hooks/ui-animations/assets/movingAnimations.ts");
+
 
 
 
@@ -54456,13 +54823,13 @@ var BACKDROP_BACKGROUND_COLOR = 'rgba(0, 0, 0, 0.3)';
 var Z_INDEX_MODAL_DEFAULT = 10;
 var Z_INDEX_BACKDROP_DEFAULT = 9;
 var Z_INDEX_TARGET_DEFAULT = 11;
-var POPOVER_ANIMATION = function POPOVER_ANIMATION(_ref) {
-  var modal = _ref.modal,
-    predictPos = _ref.predictPos;
-  var appear = function appear(timeline, options) {
+var POPOVER_ANIMATION = function POPOVER_ANIMATION() {
+  var appear = function appear(props, timeline, options) {
     var _options$zIndex;
+    var modal = props.modal,
+      predictPos = props.predictPos;
     var modalZIndex = (options === null || options === void 0 || (_options$zIndex = options.zIndex) === null || _options$zIndex === void 0 ? void 0 : _options$zIndex.modal) || Z_INDEX_MODAL_DEFAULT;
-    timeline.clear().set(modal, {
+    timeline.set(modal, {
       visibility: 'visible',
       left: predictPos[0],
       top: predictPos[1],
@@ -54480,8 +54847,9 @@ var POPOVER_ANIMATION = function POPOVER_ANIMATION(_ref) {
     });
     return timeline;
   };
-  var disappear = function disappear(timeline) {
-    timeline.clear().to(modal, {
+  var disappear = function disappear(props, timeline) {
+    var modal = props.modal;
+    timeline.to(modal, {
       opacity: 0,
       scale: 0.95,
       duration: 0.4,
@@ -54496,13 +54864,13 @@ var POPOVER_ANIMATION = function POPOVER_ANIMATION(_ref) {
     disappear: disappear
   };
 };
-var DROPDOWN_ANIMATION = function DROPDOWN_ANIMATION(_ref2) {
-  var modal = _ref2.modal,
-    predictPos = _ref2.predictPos;
-  var appear = function appear(timeline, options) {
+var DROPDOWN_ANIMATION = function DROPDOWN_ANIMATION() {
+  var appear = function appear(props, timeline, options) {
     var _options$zIndex2;
+    var modal = props.modal,
+      predictPos = props.predictPos;
     var modalZIndex = (options === null || options === void 0 || (_options$zIndex2 = options.zIndex) === null || _options$zIndex2 === void 0 ? void 0 : _options$zIndex2.modal) || Z_INDEX_MODAL_DEFAULT;
-    timeline.clear().set(modal, {
+    timeline.set(modal, {
       visibility: 'visible',
       left: predictPos[0],
       top: predictPos[1] - 10,
@@ -54519,8 +54887,10 @@ var DROPDOWN_ANIMATION = function DROPDOWN_ANIMATION(_ref2) {
     });
     return timeline;
   };
-  var disappear = function disappear(timeline) {
-    timeline.clear().to(modal, {
+  var disappear = function disappear(props, timeline) {
+    var modal = props.modal,
+      predictPos = props.predictPos;
+    timeline.to(modal, {
       opacity: 0,
       top: predictPos[0] - 5,
       duration: 0.2,
@@ -54535,13 +54905,13 @@ var DROPDOWN_ANIMATION = function DROPDOWN_ANIMATION(_ref2) {
     disappear: disappear
   };
 };
-var CONTEXT_MENU_ANIMATION = function CONTEXT_MENU_ANIMATION(_ref3) {
-  var modal = _ref3.modal,
-    predictPos = _ref3.predictPos;
-  var appear = function appear(timeline, options) {
+var CONTEXT_MENU_ANIMATION = function CONTEXT_MENU_ANIMATION() {
+  var appear = function appear(props, timeline, options) {
     var _options$zIndex3;
+    var modal = props.modal,
+      predictPos = props.predictPos;
     var modalZIndex = (options === null || options === void 0 || (_options$zIndex3 = options.zIndex) === null || _options$zIndex3 === void 0 ? void 0 : _options$zIndex3.modal) || Z_INDEX_MODAL_DEFAULT;
-    timeline.clear().set(modal, {
+    timeline.set(modal, {
       visibility: 'visible',
       left: predictPos[0],
       top: predictPos[1],
@@ -54563,7 +54933,8 @@ var CONTEXT_MENU_ANIMATION = function CONTEXT_MENU_ANIMATION(_ref3) {
     });
     return timeline;
   };
-  var disappear = function disappear(timeline) {
+  var disappear = function disappear(props, timeline) {
+    var modal = props.modal;
     timeline.clear().to(modal, {
       opacity: 0,
       scale: 0.95,
@@ -54579,18 +54950,18 @@ var CONTEXT_MENU_ANIMATION = function CONTEXT_MENU_ANIMATION(_ref3) {
     disappear: disappear
   };
 };
-var ACTION_SHEET_ANIMATION = function ACTION_SHEET_ANIMATION(_ref4) {
-  var modal = _ref4.modal,
-    backdrop = _ref4.backdrop,
-    target = _ref4.target,
-    predictPos = _ref4.predictPos;
-  var appear = function appear(timeline, options) {
+var ACTION_SHEET_ANIMATION = function ACTION_SHEET_ANIMATION() {
+  var appear = function appear(props, timeline, options) {
     var _options$zIndex4, _options$zIndex5, _options$zIndex6;
+    var modal = props.modal,
+      backdrop = props.backdrop,
+      target = props.target,
+      predictPos = props.predictPos;
     var modalZIndex = (options === null || options === void 0 || (_options$zIndex4 = options.zIndex) === null || _options$zIndex4 === void 0 ? void 0 : _options$zIndex4.modal) || Z_INDEX_MODAL_DEFAULT;
     var backdropZIndex = (options === null || options === void 0 || (_options$zIndex5 = options.zIndex) === null || _options$zIndex5 === void 0 ? void 0 : _options$zIndex5.backdrop) || Z_INDEX_BACKDROP_DEFAULT;
     var targetZIndex = (options === null || options === void 0 || (_options$zIndex6 = options.zIndex) === null || _options$zIndex6 === void 0 ? void 0 : _options$zIndex6.target) || Z_INDEX_TARGET_DEFAULT;
     var backdropColor = (options === null || options === void 0 ? void 0 : options.backdropColor) || BACKDROP_BACKGROUND_COLOR;
-    timeline.clear().set(modal, {
+    timeline.set(modal, {
       visibility: 'visible',
       left: predictPos[0],
       top: predictPos[1],
@@ -54616,8 +54987,11 @@ var ACTION_SHEET_ANIMATION = function ACTION_SHEET_ANIMATION(_ref4) {
     });
     return timeline;
   };
-  var disappear = function disappear(timeline) {
-    timeline.clear().to(modal, {
+  var disappear = function disappear(props, timeline) {
+    var modal = props.modal,
+      backdrop = props.backdrop,
+      target = props.target;
+    timeline.to(modal, {
       opacity: 0,
       duration: 0.2,
       ease: 'power2.in'
@@ -54639,12 +55013,53 @@ var ACTION_SHEET_ANIMATION = function ACTION_SHEET_ANIMATION(_ref4) {
     disappear: disappear
   };
 };
-var MODAL_ANIMATIONS = function MODAL_ANIMATIONS(props) {
+var MODAL_ANIMATIONS = function MODAL_ANIMATIONS() {
+  return {
+    'popover': POPOVER_ANIMATION(),
+    'dropdown': DROPDOWN_ANIMATION(),
+    'context-menu': CONTEXT_MENU_ANIMATION(),
+    'action-sheet': ACTION_SHEET_ANIMATION()
+  };
+};
+
+/***/ }),
+
+/***/ "./src/hooks/ui-animations/assets/movingAnimations.ts":
+/*!************************************************************!*\
+  !*** ./src/hooks/ui-animations/assets/movingAnimations.ts ***!
+  \************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   MOVING_ANIMATIONS: () => (/* binding */ MOVING_ANIMATIONS)
+/* harmony export */ });
+var DEFAULT_ANIMATION = function DEFAULT_ANIMATION() {
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+    args[_key] = arguments[_key];
+  }
+  var element = args[0],
+    timeline = args[1],
+    options = args[2];
+  var place = options.place,
+    _options$position = options.position,
+    position = _options$position === void 0 ? 'fixed' : _options$position;
+  var left = place.left,
+    top = place.top;
+  timeline.set(element, {
+    position: position
+  }).to(element, {
+    top: top,
+    left: left,
+    duration: 0.1,
+    ease: "power1.out"
+  });
+  return timeline;
+};
+var MOVING_ANIMATIONS = function MOVING_ANIMATIONS() {
   return {
-    'popover': POPOVER_ANIMATION(props),
-    'dropdown': DROPDOWN_ANIMATION(props),
-    'context-menu': CONTEXT_MENU_ANIMATION(props),
-    'action-sheet': ACTION_SHEET_ANIMATION(props)
+    'default': DEFAULT_ANIMATION
   };
 };
 
@@ -54839,22 +55254,27 @@ function useBackgroundModalAnim() {
     };
   };
   var _useTimeline = useTimeline(),
-    setTimeline = _useTimeline.setTimeline;
+    getAdditionTimeline = _useTimeline.getAdditionTimeline,
+    getTimeline = _useTimeline.getTimeline;
   var initTimeline = function initTimeline() {
-    var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-      onStart = _ref.onStart,
-      onComplete = _ref.onComplete;
-    if (ref.current) {
-      var timeline = gsap__WEBPACK_IMPORTED_MODULE_2__["default"].timeline({
-        onStart: onStart,
-        onComplete: onComplete,
-        paused: true
-      });
-      setTimeline(timeline);
-      return timeline;
+    var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var onComplete = props.onComplete;
+    var timeline = getTimeline();
+    if (onComplete) {
+      timeline.eventCallback('onComplete', onComplete);
     }
+    return timeline;
   };
-  var getAnim = function getAnim() {
+  var initAdditionTimeline = function initAdditionTimeline() {
+    var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var onComplete = props.onComplete;
+    var timeline = getAdditionTimeline();
+    if (onComplete) {
+      timeline.eventCallback('onComplete', onComplete);
+    }
+    return timeline;
+  };
+  var getAnimationProps = function getAnimationProps() {
     var _getObjData = getObjData(),
       predictPlace = _getObjData.predictPlace,
       targetCenter = _getObjData.targetCenter,
@@ -54865,7 +55285,7 @@ function useBackgroundModalAnim() {
     var modal = ref.current;
     var backdrop = backdropRef.current;
     if (modal && backdrop) {
-      return (0,_assets__WEBPACK_IMPORTED_MODULE_1__.BACKDROP_MODAL_ANIMATIONS)({
+      return {
         predictPos: predictPlace,
         modalSize: objSize,
         targetCenter: targetCenter,
@@ -54874,49 +55294,80 @@ function useBackgroundModalAnim() {
         targetSize: targetSize,
         modal: modal,
         backdrop: backdrop
-      });
+      };
     }
     return undefined;
   };
+  return {
+    appearanceAnim: appearanceAnim,
+    disappearanceAnim: disappearanceAnim,
+    updateModalPlacement: updateModalPlacement,
+    getInitStyle: getInitStyle,
+    reinit: init
+  };
+  function updateModalPlacement() {
+    var _getObjData2 = getObjData(),
+      predictPlace = _getObjData2.predictPlace;
+    var timeline = initAdditionTimeline();
+    var newPlace = predictPlace;
+    var anim = (0,_assets__WEBPACK_IMPORTED_MODULE_1__.MOVING_ANIMATIONS)()["default"];
+    var obj = ref.current;
+    if (obj && timeline) {
+      timeline.clear();
+      anim(obj, timeline, {
+        place: {
+          left: newPlace[0],
+          top: newPlace[1]
+        },
+        position: 'fixed'
+      }).play();
+    }
+  }
   function appearanceAnim() {
     var timeline = initTimeline({
       onComplete: onAppearEnd
     });
     if (timeline) {
-      var anim = getAnim();
-      anim === null || anim === void 0 || anim[animeType].appear(timeline, {
-        zIndex: zIndex,
-        backdropColor: backdropColor
-      }).play();
+      var props = getAnimationProps();
+      if (props) {
+        timeline.clear();
+        (0,_assets__WEBPACK_IMPORTED_MODULE_1__.BACKDROP_MODAL_ANIMATIONS)()[animeType].appear(props, timeline, {
+          zIndex: zIndex,
+          backdropColor: backdropColor
+        }).play();
+      }
     }
   }
-  var disappearanceAnim = function disappearanceAnim() {
+  function disappearanceAnim() {
     var timeline = initTimeline({
       onComplete: onDisappearEnd
     });
     if (timeline) {
-      var _anim$animeType;
-      var anim = getAnim();
-      anim === null || anim === void 0 || (_anim$animeType = anim[animeType]) === null || _anim$animeType === void 0 || _anim$animeType.disappear(timeline, {
-        zIndex: zIndex,
-        backdropColor: backdropColor
-      }).play();
+      var props = getAnimationProps();
+      if (props) {
+        var _BACKDROP_MODAL_ANIMA;
+        timeline.clear();
+        (_BACKDROP_MODAL_ANIMA = (0,_assets__WEBPACK_IMPORTED_MODULE_1__.BACKDROP_MODAL_ANIMATIONS)()[animeType]) === null || _BACKDROP_MODAL_ANIMA === void 0 || _BACKDROP_MODAL_ANIMA.disappear(props, timeline, {
+          zIndex: zIndex,
+          backdropColor: backdropColor
+        }).play();
+      }
     }
-  };
-  return {
-    appearanceAnim: appearanceAnim,
-    disappearanceAnim: disappearanceAnim,
-    reinit: init
-  };
+  }
   function initObjStates() {
     setInitStyle();
     setHiddeState();
   }
+  function getInitStyle() {
+    return {
+      position: 'fixed',
+      visibility: 'hidden'
+    };
+  }
   function setInitStyle() {
     var obj = ref.current;
     if (obj) {
-      obj.style.position = 'fixed';
-      obj.style.visibility = 'hidden';
+      Object.assign(obj.style, getInitStyle());
     }
   }
   function initBackdropObj() {
@@ -54954,19 +55405,21 @@ function useBackgroundModalAnim() {
   }
 }
 function useTimeline() {
-  var timelineRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(undefined);
+  var timelineRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(gsap__WEBPACK_IMPORTED_MODULE_2__["default"].timeline({
+    paused: true
+  }));
+  var additionTimelineRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(gsap__WEBPACK_IMPORTED_MODULE_2__["default"].timeline({
+    paused: true
+  }));
   var getTimeline = function getTimeline() {
     return timelineRef.current;
   };
-  var setTimeline = function setTimeline(v) {
-    if (timelineRef.current) {
-      timelineRef.current.kill();
-    }
-    timelineRef.current = v;
+  var getAdditionTimeline = function getAdditionTimeline() {
+    return additionTimelineRef.current;
   };
   return {
     getTimeline: getTimeline,
-    setTimeline: setTimeline
+    getAdditionTimeline: getAdditionTimeline
   };
 }
 
@@ -55088,22 +55541,27 @@ function useModalAnim() {
     };
   };
   var _useTimeline = useTimeline(),
-    setTimeline = _useTimeline.setTimeline;
+    getAdditionTimeline = _useTimeline.getAdditionTimeline,
+    getTimeline = _useTimeline.getTimeline;
   var initTimeline = function initTimeline() {
-    var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-      onStart = _ref.onStart,
-      onComplete = _ref.onComplete;
-    if (ref.current) {
-      var timeline = gsap__WEBPACK_IMPORTED_MODULE_3__["default"].timeline({
-        onStart: onStart,
-        onComplete: onComplete,
-        paused: true
-      });
-      setTimeline(timeline);
-      return timeline;
+    var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var onComplete = props.onComplete;
+    var timeline = getTimeline();
+    if (onComplete) {
+      timeline.eventCallback('onComplete', onComplete);
+    }
+    return timeline;
+  };
+  var initAdditionTimeline = function initAdditionTimeline() {
+    var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var onComplete = props.onComplete;
+    var timeline = getAdditionTimeline();
+    if (onComplete) {
+      timeline.eventCallback('onComplete', onComplete);
     }
+    return timeline;
   };
-  var getAnim = function getAnim() {
+  var getAnimProps = function getAnimProps() {
     var _getObjData = getObjData(),
       predictPlace = _getObjData.predictPlace,
       targetCenter = _getObjData.targetCenter,
@@ -55114,7 +55572,7 @@ function useModalAnim() {
     var modal = ref.current;
     var backdrop = backdropRef.current;
     if (modal && backdrop && target) {
-      return (0,_assets__WEBPACK_IMPORTED_MODULE_2__.MODAL_ANIMATIONS)({
+      return {
         predictPos: predictPlace,
         modalSize: objSize,
         targetCenter: targetCenter,
@@ -55123,49 +55581,75 @@ function useModalAnim() {
         targetSize: targetSize,
         modal: modal,
         backdrop: backdrop
-      });
+      };
     }
     return undefined;
   };
+  return {
+    appearanceAnim: appearanceAnim,
+    disappearanceAnim: disappearanceAnim,
+    updateModalPlacement: updateModalPlacement,
+    getInitStyle: getInitStyle,
+    reinit: init
+  };
+  function updateModalPlacement() {
+    var timeline = initAdditionTimeline();
+    var newPlace = smartPlacementServices.calc();
+    var anim = (0,_assets__WEBPACK_IMPORTED_MODULE_2__.MOVING_ANIMATIONS)()["default"];
+    var obj = ref.current;
+    if (obj && timeline) {
+      timeline.clear();
+      anim(obj, timeline, {
+        place: newPlace,
+        position: position
+      }).play();
+    }
+  }
   function appearanceAnim() {
     var timeline = initTimeline({
       onComplete: onAppearEnd
     });
     if (timeline) {
-      var anim = getAnim();
-      anim === null || anim === void 0 || anim[animeType].appear(timeline, {
-        zIndex: zIndex,
-        backdropColor: backdropColor
-      }).play();
+      var props = getAnimProps();
+      if (props) {
+        timeline.clear();
+        (0,_assets__WEBPACK_IMPORTED_MODULE_2__.MODAL_ANIMATIONS)()[animeType].appear(props, timeline, {
+          zIndex: zIndex,
+          backdropColor: backdropColor
+        }).play();
+      }
     }
   }
-  var disappearanceAnim = function disappearanceAnim() {
+  function disappearanceAnim() {
     var timeline = initTimeline({
       onComplete: onDisappearEnd
     });
     if (timeline) {
-      var _anim$animeType;
-      var anim = getAnim();
-      anim === null || anim === void 0 || (_anim$animeType = anim[animeType]) === null || _anim$animeType === void 0 || _anim$animeType.disappear(timeline, {
-        zIndex: zIndex,
-        backdropColor: backdropColor
-      }).play();
+      var props = getAnimProps();
+      if (props) {
+        var _MODAL_ANIMATIONS$ani;
+        timeline.clear();
+        (_MODAL_ANIMATIONS$ani = (0,_assets__WEBPACK_IMPORTED_MODULE_2__.MODAL_ANIMATIONS)()[animeType]) === null || _MODAL_ANIMATIONS$ani === void 0 || _MODAL_ANIMATIONS$ani.disappear(props, timeline, {
+          zIndex: zIndex,
+          backdropColor: backdropColor
+        }).play();
+      }
     }
-  };
-  return {
-    appearanceAnim: appearanceAnim,
-    disappearanceAnim: disappearanceAnim,
-    reinit: init
-  };
+  }
   function initObjStates() {
     setInitStyle();
     setHiddeState();
   }
+  function getInitStyle() {
+    return {
+      position: position,
+      visibility: 'hidden'
+    };
+  }
   function setInitStyle() {
     var obj = ref.current;
     if (obj) {
-      obj.style.position = position;
-      obj.style.visibility = 'hidden';
+      Object.assign(obj.style, getInitStyle());
     }
   }
   function initBackdropObj() {
@@ -55203,19 +55687,21 @@ function useModalAnim() {
   }
 }
 function useTimeline() {
-  var timelineRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(undefined);
+  var timelineRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(gsap__WEBPACK_IMPORTED_MODULE_3__["default"].timeline({
+    paused: true
+  }));
+  var additionTimelineRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(gsap__WEBPACK_IMPORTED_MODULE_3__["default"].timeline({
+    paused: true
+  }));
   var getTimeline = function getTimeline() {
     return timelineRef.current;
   };
-  var setTimeline = function setTimeline(v) {
-    if (timelineRef.current) {
-      timelineRef.current.kill();
-    }
-    timelineRef.current = v;
+  var getAdditionTimeline = function getAdditionTimeline() {
+    return additionTimelineRef.current;
   };
   return {
     getTimeline: getTimeline,
-    setTimeline: setTimeline
+    getAdditionTimeline: getAdditionTimeline
   };
 }
 
@@ -56606,6 +57092,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _hooks_useSmartPlacementResolver__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @/hooks/useSmartPlacementResolver */ "./src/hooks/useSmartPlacementResolver.ts");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _hooks_elementObservers__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @/hooks/elementObservers */ "./src/hooks/elementObservers/index.ts");
+
 
 
 function useSmartPosition() {
@@ -56664,27 +57152,26 @@ function useSmartPosition() {
   var recalc = function recalc() {
     setUp();
   };
-  var viewObserver = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(new IntersectionObserver(function (entries) {
+  var resizeObserver = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(new ResizeObserver(resizeListener));
+  var intersectionObserverCallback = function intersectionObserverCallback(entries) {
     entries.forEach(function (entry) {
-      console.log(entry);
       if (entry.isIntersecting) {
         resizeListener();
       }
     });
-  }, {
+  };
+  var intersectionObserverServices = (0,_hooks_elementObservers__WEBPACK_IMPORTED_MODULE_2__.useIntersectionObserver)([ref, parentRef], intersectionObserverCallback, {
     threshold: [0, 0.5, 1]
-  }));
-  var resizeObserver = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(new ResizeObserver(resizeListener));
+  });
+  var resizeObserverServices = (0,_hooks_elementObservers__WEBPACK_IMPORTED_MODULE_2__.useResizeObserver)(windowRef, resizeListener);
   var setUpListeners = function setUpListeners() {
     window.addEventListener('resize', resizeListener);
-    if (ref.current) viewObserver.current.observe(ref.current);
-    if (parentRef !== null && parentRef !== void 0 && parentRef.current) viewObserver.current.observe(parentRef.current);
-    if (windowRef !== null && windowRef !== void 0 && windowRef.current) resizeObserver.current.observe(windowRef.current);
+    intersectionObserverServices.reinit();
+    resizeObserverServices.reinit();
   };
   var clearListeners = function clearListeners() {
-    if (ref.current) viewObserver.current.unobserve(ref.current);
-    if (parentRef !== null && parentRef !== void 0 && parentRef.current) viewObserver.current.unobserve(parentRef.current);
-    if (windowRef !== null && windowRef !== void 0 && windowRef.current) resizeObserver.current.unobserve(windowRef.current);
+    intersectionObserverServices.clear();
+    resizeObserverServices.clear();
     window.removeEventListener('resize', resizeListener);
     window.removeEventListener('scroll', resizeListener);
   };
@@ -62262,7 +62749,7 @@ var _Dropdown = function _Dropdown(props, ref) {
     }
   };
   var getItemProps = function getItemProps(curItem) {
-    if ((0,_lib__WEBPACK_IMPORTED_MODULE_3__.isObject)(curItem) && 'value' in curItem) {
+    if ((0,_lib__WEBPACK_IMPORTED_MODULE_3__.isObject)(curItem)) {
       return curItem;
     } else {
       return {
@@ -66274,7 +66761,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
 // extracted by mini-css-extract-plugin
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"selectField":"SelectField-module__selectField___p9S2j","modalWindowWrapper":"SelectField-module__modalWindowWrapper___i4_Uy","modalWindow":"SelectField-module__modalWindow___JVZ8d","selectModalWindow":"SelectField-module__selectModalWindow___w55Pm","show-animation":"SelectField-module__show-animation___Ee3LS","selectFieldOptionsItem":"SelectField-module__selectFieldOptionsItem___hQMC7","label":"SelectField-module__label___Orjua","active":"SelectField-module__active___a3j2T"});
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"selectField":"SelectField-module__selectField___p9S2j"});
 
 /***/ }),
 
@@ -66372,6 +66859,7 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 
 
 
+var SmartPlacementWeights = [[0, 0, 0], [0, 0, 0], [0, 1, 0]];
 function SelectField(_ref) {
   var value = _ref.value,
     onChange = _ref.onChange,
@@ -66388,7 +66876,9 @@ function SelectField(_ref) {
     onBlur = _ref.onBlur,
     pagination = _ref.pagination,
     _onFocus = _ref.onFocus,
-    isActiveItem = _ref.isActiveItem;
+    isActiveItem = _ref.isActiveItem,
+    _ref$position = _ref.position,
+    position = _ref$position === void 0 ? 'absolute' : _ref$position;
   var _useState = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
     isFocus = _useState2[0],
@@ -66397,19 +66887,30 @@ function SelectField(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     searchingString = _useState4[0],
     setSearchingString = _useState4[1];
-  var _useState5 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    isShowModalWindow = _useState6[0],
-    setIsShowModalWindow = _useState6[1];
   var requestPromiseRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(undefined);
   // Кэширование выбранных options
   var optionsCacheRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(options);
-  var _useState7 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(options),
-    _useState8 = _slicedToArray(_useState7, 2),
-    optionsState = _useState8[0],
-    setOptionsState = _useState8[1];
+  var _useState5 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(options),
+    _useState6 = _slicedToArray(_useState5, 2),
+    optionsState = _useState6[0],
+    setOptionsState = _useState6[1];
   var inputRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
   var searchingTimeoutRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
+  var targetRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
+  var modalRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
+  var _useModal = (0,_hooks__WEBPACK_IMPORTED_MODULE_2__.useModal)(modalRef, {
+      targetRef: targetRef,
+      position: position,
+      animeType: 'dropdown',
+      smartPlacementOptions: {
+        weights: SmartPlacementWeights
+      }
+    }),
+    getIsShow = _useModal.getIsShow,
+    open = _useModal.open,
+    close = _useModal.close,
+    switching = _useModal.switching,
+    isShow = _useModal.isShow;
   (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () {
     // Установка значения при required
     var firstOptions = optionsState === null || optionsState === void 0 ? void 0 : optionsState[0];
@@ -66471,7 +66972,7 @@ function SelectField(_ref) {
       onChange === null || onChange === void 0 || onChange(resValues);
     } else {
       onChange === null || onChange === void 0 || onChange(resValues[resValues.length - 1]);
-      setIsShowModalWindow(false);
+      close();
       onBlur === null || onBlur === void 0 || onBlur();
     }
   };
@@ -66593,22 +67094,20 @@ function SelectField(_ref) {
         onChange: search,
         disabled: disabled,
         onFocus: function onFocus() {
-          setIsShowModalWindow(true);
+          if (!getIsShow()) {
+            open();
+          }
           setIsFocus(true);
           _onFocus === null || _onFocus === void 0 || _onFocus();
         },
         onBlur: function onBlur() {
           return setIsFocus(false);
         },
-        onDropdownClick: function onDropdownClick() {
-          return setIsShowModalWindow(function (prevState) {
-            return !prevState;
-          });
-        },
+        onDropdownClick: switching,
         isError: isError,
         placeholder: placeholder,
         dropdown: true,
-        dropdownState: isShowModalWindow,
+        dropdownState: isShow,
         ref: inputRef
       });
     }
@@ -66619,37 +67118,21 @@ function SelectField(_ref) {
       placeholder: placeholder,
       notInput: true,
       onFocus: _onFocus,
-      onClick: function onClick() {
-        return setIsShowModalWindow(function (prevState) {
-          return !prevState;
-        });
-      },
+      onClick: switching,
       dropdown: true,
-      dropdownState: isShowModalWindow,
+      dropdownState: isShow,
       ref: inputRef
     });
   };
   return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
     className: _styles__WEBPACK_IMPORTED_MODULE_7__.SelectFieldStyle.selectField,
-    children: [getViewField(), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", {
-      className: _styles__WEBPACK_IMPORTED_MODULE_7__.SelectFieldStyle.modalWindowWrapper,
-      children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_3__.ModalWindowWrapper, {
-        isShow: isShowModalWindow,
-        setIsShow: function setIsShow(newValue) {
-          if (newValue === false) {
-            onBlur === null || onBlur === void 0 || onBlur();
-          }
-          setIsShowModalWindow(newValue);
-        },
-        additionElements: [inputRef.current],
-        className: _styles__WEBPACK_IMPORTED_MODULE_7__.SelectFieldStyle.modalWindow,
-        children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_3__.Dropdown, {
-          items: getOptionsItems(),
-          onScrollBottom: onScrollToBottom,
-          onClick: handleClick,
-          isActive: isActive
-        })
-      })
+    ref: targetRef,
+    children: [getViewField(), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_3__.Dropdown, {
+      items: getOptionsItems(),
+      onScrollBottom: onScrollToBottom,
+      onClick: handleClick,
+      isActive: isActive,
+      ref: modalRef
     })]
   });
 }
@@ -71331,14 +71814,19 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   useElementFixedOffset: () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_2__.useElementFixedOffset),
 /* harmony export */   useFormData: () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_2__.useFormData),
 /* harmony export */   useInteractiveZone: () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_2__.useInteractiveZone),
+/* harmony export */   useIntersectionObserver: () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_2__.useIntersectionObserver),
 /* harmony export */   useIsErrorField: () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_2__.useIsErrorField),
 /* harmony export */   useKeyboardInput: () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_2__.useKeyboardInput),
 /* 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),
+/* harmony export */   useResizeObserver: () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_2__.useResizeObserver),
+/* harmony export */   useResizeWindowObserver: () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_2__.useResizeWindowObserver),
 /* harmony export */   useScrollIndicators: () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_2__.useScrollIndicators),
 /* harmony export */   useShimmer: () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_2__.useShimmer),
+/* harmony export */   useSimpleRefElementWork: () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_2__.useSimpleRefElementWork),
+/* harmony export */   useSimpleRefListElementWork: () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_2__.useSimpleRefListElementWork),
 /* harmony export */   useSmartPlacementResolver: () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_2__.useSmartPlacementResolver),
 /* harmony export */   useSmartPosition: () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_2__.useSmartPosition),
 /* harmony export */   useSmartScroll: () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_2__.useSmartScroll),