indicator-ui 0.1.21 → 0.1.23

package/dist/index.js

@@ -54181,9 +54181,10 @@ function useResizeWindowObserver() {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   useBackdropModal: () => (/* reexport safe */ _modalWindows__WEBPACK_IMPORTED_MODULE_15__.useBackdropModal),
-/* harmony export */   useBackgroundModalAnim: () => (/* reexport safe */ _ui_animations__WEBPACK_IMPORTED_MODULE_14__.useBackgroundModalAnim),
-/* harmony export */   useControlInput: () => (/* reexport safe */ _controlsInput__WEBPACK_IMPORTED_MODULE_16__.useControlInput),
+/* harmony export */   calculateAvailablePosition: () => (/* reexport safe */ _placement__WEBPACK_IMPORTED_MODULE_18__.calculateAvailablePosition),
+/* harmony export */   useBackdropModal: () => (/* reexport safe */ _modalWindows__WEBPACK_IMPORTED_MODULE_14__.useBackdropModal),
+/* harmony export */   useBackgroundModalAnim: () => (/* reexport safe */ _ui_animations__WEBPACK_IMPORTED_MODULE_13__.useBackgroundModalAnim),
+/* harmony export */   useControlInput: () => (/* reexport safe */ _controlsInput__WEBPACK_IMPORTED_MODULE_15__.useControlInput),
 /* harmony export */   useDebouncedAccumulator: () => (/* reexport safe */ _useDebouncedAccumulator__WEBPACK_IMPORTED_MODULE_2__.useDebouncedAccumulator),
 /* harmony export */   useDebouncedInvoker: () => (/* reexport safe */ _useDebouncedInvoker__WEBPACK_IMPORTED_MODULE_7__.useDebouncedInvoker),
 /* harmony export */   useDeepCompareEffect: () => (/* reexport safe */ _useDeepCompareEffect__WEBPACK_IMPORTED_MODULE_3__.useDeepCompareEffect),
@@ -54191,24 +54192,25 @@ __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 */   useIntersectionObserver: () => (/* reexport safe */ _elementObservers__WEBPACK_IMPORTED_MODULE_16__.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 */   useKeyboardInput: () => (/* reexport safe */ _controlsInput__WEBPACK_IMPORTED_MODULE_15__.useKeyboardInput),
+/* harmony export */   useKeyboardPressing: () => (/* reexport safe */ _controlsInput__WEBPACK_IMPORTED_MODULE_15__.useKeyboardPressing),
+/* harmony export */   useModal: () => (/* reexport safe */ _modalWindows__WEBPACK_IMPORTED_MODULE_14__.useModal),
+/* harmony export */   useModalAnim: () => (/* reexport safe */ _ui_animations__WEBPACK_IMPORTED_MODULE_13__.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 */   useResizeObserver: () => (/* reexport safe */ _elementObservers__WEBPACK_IMPORTED_MODULE_16__.useResizeObserver),
+/* harmony export */   useResizeWindowObserver: () => (/* reexport safe */ _elementObservers__WEBPACK_IMPORTED_MODULE_16__.useResizeWindowObserver),
+/* harmony export */   useScrollIndicators: () => (/* reexport safe */ _useScrollIndicators__WEBPACK_IMPORTED_MODULE_12__.useScrollIndicators),
+/* harmony export */   useShimmer: () => (/* reexport safe */ _ui_animations__WEBPACK_IMPORTED_MODULE_13__.useShimmer),
+/* harmony export */   useSimpleRefElementWork: () => (/* reexport safe */ _simpleRefWork__WEBPACK_IMPORTED_MODULE_17__.useSimpleRefElementWork),
+/* harmony export */   useSimpleRefListElementWork: () => (/* reexport safe */ _simpleRefWork__WEBPACK_IMPORTED_MODULE_17__.useSimpleRefListElementWork),
+/* harmony export */   useSmartPlacementResolver: () => (/* reexport safe */ _placement__WEBPACK_IMPORTED_MODULE_18__.useSmartPlacementResolver),
 /* harmony export */   useSmartPosition: () => (/* reexport safe */ _useSmartPosition__WEBPACK_IMPORTED_MODULE_9__.useSmartPosition),
 /* harmony export */   useSmartScroll: () => (/* reexport safe */ _useSmartScroll__WEBPACK_IMPORTED_MODULE_10__.useSmartScroll),
 /* harmony export */   useSyncedStateRef: () => (/* reexport safe */ _useSyncedStateRef__WEBPACK_IMPORTED_MODULE_5__.useSyncedStateRef),
-/* harmony export */   useTouchpadInput: () => (/* reexport safe */ _controlsInput__WEBPACK_IMPORTED_MODULE_16__.useTouchpadInput)
+/* harmony export */   useTimeline: () => (/* reexport safe */ _ui_animations__WEBPACK_IMPORTED_MODULE_13__.useTimeline),
+/* harmony export */   useTouchpadInput: () => (/* reexport safe */ _controlsInput__WEBPACK_IMPORTED_MODULE_15__.useTouchpadInput)
 /* harmony export */ });
 /* harmony import */ var _useIsErrorField__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./useIsErrorField */ "./src/hooks/useIsErrorField.ts");
 /* harmony import */ var _useFormData__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./useFormData */ "./src/hooks/useFormData.ts");
@@ -54222,13 +54224,13 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _useSmartPosition__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./useSmartPosition */ "./src/hooks/useSmartPosition.ts");
 /* harmony import */ var _useSmartScroll__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./useSmartScroll */ "./src/hooks/useSmartScroll/index.ts");
 /* harmony import */ var _useInteractiveZone__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./useInteractiveZone */ "./src/hooks/useInteractiveZone.ts");
-/* harmony import */ var _useSmartPlacementResolver__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./useSmartPlacementResolver */ "./src/hooks/useSmartPlacementResolver.ts");
-/* harmony import */ var _useScrollIndicators__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./useScrollIndicators */ "./src/hooks/useScrollIndicators.ts");
-/* 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");
+/* harmony import */ var _useScrollIndicators__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./useScrollIndicators */ "./src/hooks/useScrollIndicators.ts");
+/* harmony import */ var _ui_animations__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./ui-animations */ "./src/hooks/ui-animations/index.ts");
+/* harmony import */ var _modalWindows__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./modalWindows */ "./src/hooks/modalWindows/index.ts");
+/* harmony import */ var _controlsInput__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./controlsInput */ "./src/hooks/controlsInput/index.ts");
+/* harmony import */ var _elementObservers__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ./elementObservers */ "./src/hooks/elementObservers/index.ts");
+/* harmony import */ var _simpleRefWork__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ./simpleRefWork */ "./src/hooks/simpleRefWork.ts");
+/* harmony import */ var _placement__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ./placement */ "./src/hooks/placement/index.ts");
 
 
 
@@ -54482,13 +54484,15 @@ function useModal() {
     addition: addition
   });
   (0,_hooks__WEBPACK_IMPORTED_MODULE_3__.useResizeWindowObserver)(updateModalPlacement);
+  var intersectionObserverService = (0,_hooks__WEBPACK_IMPORTED_MODULE_3__.useIntersectionObserver)([ref, targetRef], updateModalPlacement);
   var resizeObserverService = (0,_hooks__WEBPACK_IMPORTED_MODULE_3__.useResizeObserver)([ref, targetRef], updateModalPlacement);
   var open = function open() {
     setIsShow(true);
     requestAnimationFrame(function () {
+      resizeObserverService.reinit();
+      intersectionObserverService.reinit();
       reinit();
       appearanceAnim();
-      resizeObserverService.reinit();
     });
   };
   var close = function close() {
@@ -54518,6 +54522,534 @@ function useModal() {
 
 /***/ }),
 
+/***/ "./src/hooks/placement/calculateAvailablePosition.ts":
+/*!***********************************************************!*\
+  !*** ./src/hooks/placement/calculateAvailablePosition.ts ***!
+  \***********************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   calculateAvailablePosition: () => (/* binding */ calculateAvailablePosition)
+/* harmony export */ });
+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; }
+var MIN_WEIGHT = 0.001;
+var POSITION_DEFAULT = 'fixed';
+var OFFSET_DEFAULT = 0;
+var ALIGN_X_DEFAULT = 'center';
+var ALIGN_Y_DEFAULT = 'center';
+var WEIGHTS_DEFAULT = [[0.5, 1.5, 0.5], [1, 0, 1], [0.5, 1.6, 0.5]];
+var getObjLeftOffsetFromCenter = function getObjLeftOffsetFromCenter(props) {
+  var w = props.objRect.width;
+  var pW = props.parentRect.width;
+  var _props$alignX = props.alignX,
+    alignX = _props$alignX === void 0 ? ALIGN_X_DEFAULT : _props$alignX;
+  switch (alignX) {
+    case 'left':
+      return -pW / 2;
+    case 'center':
+      return -w / 2;
+    case 'right':
+      return -w + pW / 2;
+  }
+};
+var getObjRightOffsetFromCenter = function getObjRightOffsetFromCenter(props) {
+  var w = props.objRect.width;
+  var pW = props.parentRect.width;
+  var _props$alignX2 = props.alignX,
+    alignX = _props$alignX2 === void 0 ? ALIGN_X_DEFAULT : _props$alignX2;
+  switch (alignX) {
+    case 'left':
+      return w - pW / 2;
+    case 'center':
+      return w / 2;
+    case 'right':
+      return pW / 2;
+  }
+};
+var getObjTopOffsetFromCenter = function getObjTopOffsetFromCenter(props) {
+  var h = props.objRect.height;
+  var pH = props.parentRect.height;
+  var _props$alignY = props.alignY,
+    alignY = _props$alignY === void 0 ? ALIGN_Y_DEFAULT : _props$alignY;
+  switch (alignY) {
+    case 'top':
+      return -pH / 2;
+    case 'center':
+      return -h / 2;
+    case 'bottom':
+      return -h + pH / 2;
+  }
+};
+var getObjBottomOffsetFromCenter = function getObjBottomOffsetFromCenter(props) {
+  var h = props.objRect.height;
+  var pH = props.parentRect.height;
+  var _props$alignY2 = props.alignY,
+    alignY = _props$alignY2 === void 0 ? ALIGN_Y_DEFAULT : _props$alignY2;
+  switch (alignY) {
+    case 'top':
+      return h - pH / 2;
+    case 'center':
+      return h / 2;
+    case 'bottom':
+      return pH / 2;
+  }
+};
+var getAvailablePlacements = function getAvailablePlacements(props) {
+  var _props$objRect = props.objRect,
+    w = _props$objRect.width,
+    h = _props$objRect.height;
+  var _props$parentRect = props.parentRect,
+    pW = _props$parentRect.width,
+    pH = _props$parentRect.height,
+    pY = _props$parentRect.top,
+    pX = _props$parentRect.left;
+  var _props$windowRect = props.windowRect,
+    wW = _props$windowRect.width,
+    wH = _props$windowRect.height,
+    wY = _props$windowRect.top,
+    wX = _props$windowRect.left;
+  var T = pY + wY - h >= 0;
+  var R = pX + wX + pW + w <= wW;
+  var B = pY + wY + pH + h <= wH;
+  var L = pX + wX - w >= 0;
+  var parentCenterX = pX + pW / 2;
+  var parentCenterY = pY + pH / 2;
+  var centerX = parentCenterX + getObjLeftOffsetFromCenter(props) >= wX && parentCenterX + getObjRightOffsetFromCenter(props) <= wW + wX;
+  var centerY = parentCenterY + getObjTopOffsetFromCenter(props) >= wY && parentCenterY + getObjBottomOffsetFromCenter(props) <= wH + wY;
+  return [T, R, B, L, centerX, centerY];
+};
+var replaceOnLeftSide = function replaceOnLeftSide(props) {
+  var w = props.objRect.width;
+  var pX = props.parentRect.left;
+  var _props$offset = props.offset,
+    offset = _props$offset === void 0 ? OFFSET_DEFAULT : _props$offset,
+    _props$position = props.position,
+    position = _props$position === void 0 ? POSITION_DEFAULT : _props$position;
+  var newLeft;
+  if (position === 'fixed') {
+    newLeft = pX - w - offset;
+  } else {
+    newLeft = -w - offset;
+  }
+  return newLeft;
+};
+var replaceOnCenterX = function replaceOnCenterX(props) {
+  var w = props.objRect.width;
+  var _props$parentRect2 = props.parentRect,
+    pW = _props$parentRect2.width,
+    pX = _props$parentRect2.left;
+  var _props$position2 = props.position,
+    position = _props$position2 === void 0 ? POSITION_DEFAULT : _props$position2,
+    _props$alignX3 = props.alignX,
+    alignX = _props$alignX3 === void 0 ? ALIGN_X_DEFAULT : _props$alignX3;
+  var newLeft;
+  var stepX;
+  switch (alignX) {
+    case "center":
+      stepX = w / 2;
+      break;
+    case "left":
+      stepX = pW / 2;
+      break;
+    case "right":
+      stepX = w - pW / 2;
+      break;
+  }
+  if (position === 'fixed') {
+    newLeft = pX + pW / 2 - stepX;
+  } else {
+    newLeft = pW / 2 - stepX;
+  }
+  return newLeft;
+};
+var replaceOnRightSide = function replaceOnRightSide(props) {
+  var _props$parentRect3 = props.parentRect,
+    pW = _props$parentRect3.width,
+    pX = _props$parentRect3.left;
+  var _props$position3 = props.position,
+    position = _props$position3 === void 0 ? POSITION_DEFAULT : _props$position3,
+    _props$offset2 = props.offset,
+    offset = _props$offset2 === void 0 ? OFFSET_DEFAULT : _props$offset2;
+  var newLeft;
+  if (position === 'fixed') {
+    newLeft = pX + pW + offset;
+  } else {
+    newLeft = pW + offset;
+  }
+  return newLeft;
+};
+var replaceOnTopSide = function replaceOnTopSide(props) {
+  var h = props.objRect.height;
+  var pY = props.parentRect.top;
+  var _props$position4 = props.position,
+    position = _props$position4 === void 0 ? POSITION_DEFAULT : _props$position4,
+    _props$offset3 = props.offset,
+    offset = _props$offset3 === void 0 ? OFFSET_DEFAULT : _props$offset3;
+  var newTop;
+  if (position === 'fixed') {
+    newTop = pY - h - offset;
+  } else {
+    newTop = -h - offset;
+  }
+  return newTop;
+};
+var replaceOnCenterY = function replaceOnCenterY(props) {
+  var h = props.objRect.height;
+  var _props$parentRect4 = props.parentRect,
+    pH = _props$parentRect4.height,
+    pY = _props$parentRect4.top;
+  var _props$position5 = props.position,
+    position = _props$position5 === void 0 ? POSITION_DEFAULT : _props$position5,
+    _props$alignY3 = props.alignY,
+    alignY = _props$alignY3 === void 0 ? ALIGN_Y_DEFAULT : _props$alignY3;
+  var newTop;
+  var stepY;
+  switch (alignY) {
+    case "center":
+      stepY = h / 2;
+      break;
+    case "top":
+      stepY = pH / 2;
+      break;
+    case "bottom":
+      stepY = h - pH / 2;
+      break;
+  }
+  if (position === 'fixed') {
+    newTop = pY + pH / 2 - stepY;
+  } else {
+    newTop = pH / 2 - stepY;
+  }
+  return newTop;
+};
+var replaceOnBottomSide = function replaceOnBottomSide(props) {
+  var _props$parentRect5 = props.parentRect,
+    pH = _props$parentRect5.height,
+    pY = _props$parentRect5.top;
+  var _props$position6 = props.position,
+    position = _props$position6 === void 0 ? POSITION_DEFAULT : _props$position6,
+    _props$offset4 = props.offset,
+    offset = _props$offset4 === void 0 ? OFFSET_DEFAULT : _props$offset4;
+  var newTop;
+  if (position === 'fixed') {
+    newTop = pY + pH + offset;
+  } else {
+    newTop = pH + offset;
+  }
+  return newTop;
+};
+var replaceLeftTop = function replaceLeftTop(props) {
+  return {
+    left: replaceOnLeftSide(props),
+    top: replaceOnTopSide(props)
+  };
+};
+var replaceLeftCenter = function replaceLeftCenter(props) {
+  return {
+    left: replaceOnLeftSide(props),
+    top: replaceOnCenterY(props)
+  };
+};
+var replaceLeftBottom = function replaceLeftBottom(props) {
+  return {
+    left: replaceOnLeftSide(props),
+    top: replaceOnBottomSide(props)
+  };
+};
+var replaceRightTop = function replaceRightTop(props) {
+  return {
+    left: replaceOnRightSide(props),
+    top: replaceOnTopSide(props)
+  };
+};
+var replaceRightCenter = function replaceRightCenter(props) {
+  return {
+    left: replaceOnRightSide(props),
+    top: replaceOnCenterY(props)
+  };
+};
+var replaceRightBottom = function replaceRightBottom(props) {
+  return {
+    left: replaceOnRightSide(props),
+    top: replaceOnBottomSide(props)
+  };
+};
+var replaceTopCenter = function replaceTopCenter(props) {
+  return {
+    left: replaceOnCenterX(props),
+    top: replaceOnTopSide(props)
+  };
+};
+var replaceBottomCenter = function replaceBottomCenter(props) {
+  return {
+    left: replaceOnCenterX(props),
+    top: replaceOnBottomSide(props)
+  };
+};
+var replaceCenter = function replaceCenter(props) {
+  return {
+    left: replaceOnCenterX(props),
+    top: replaceOnCenterY(props)
+  };
+};
+var callbacksMatrix = [[replaceLeftTop, replaceTopCenter, replaceRightTop], [replaceLeftCenter, replaceCenter, replaceRightCenter], [replaceLeftBottom, replaceBottomCenter, replaceRightBottom]];
+function calculateAvailablePosition(props) {
+  var _getAvailablePlacemen = getAvailablePlacements(props),
+    _getAvailablePlacemen2 = _slicedToArray(_getAvailablePlacemen, 6),
+    T = _getAvailablePlacemen2[0],
+    R = _getAvailablePlacemen2[1],
+    B = _getAvailablePlacemen2[2],
+    L = _getAvailablePlacemen2[3],
+    centerX = _getAvailablePlacemen2[4],
+    centerY = _getAvailablePlacemen2[5];
+  var _props$weights = props.weights,
+    weights = _props$weights === void 0 ? WEIGHTS_DEFAULT : _props$weights;
+  var getWeight = function getWeight(a, b) {
+    return a && b ? 1 : MIN_WEIGHT;
+  };
+  var curWeightTable = [[getWeight(T, L), getWeight(T, centerX), getWeight(T, R)], [getWeight(L, centerY), MIN_WEIGHT, getWeight(R, centerY)], [getWeight(B, L), getWeight(B, centerX), getWeight(B, R)]];
+  var resMatrix = elementwiseMultiply(curWeightTable, weights);
+  var max = getMaxPosition(resMatrix);
+  if (max.val !== 0) {
+    var _callbacksMatrix$max$, _callbacksMatrix$max$2;
+    var newPos = (_callbacksMatrix$max$ = (_callbacksMatrix$max$2 = callbacksMatrix[max.pos[0]])[max.pos[1]]) === null || _callbacksMatrix$max$ === void 0 ? void 0 : _callbacksMatrix$max$.call(_callbacksMatrix$max$2, props);
+    if (newPos) {
+      return newPos;
+    }
+  }
+  return {
+    left: 0,
+    top: 0
+  };
+}
+function getMaxPosition(matrix) {
+  var maxVal = -Infinity;
+  var maxPos = [0, 0];
+  for (var i = 0; i < matrix.length; i++) {
+    for (var j = 0; j < matrix[i].length; j++) {
+      var current = matrix[i][j];
+      if (current > maxVal) {
+        maxVal = current;
+        maxPos = [i, j];
+      }
+    }
+  }
+  return {
+    val: maxVal,
+    pos: maxPos
+  };
+}
+function elementwiseMultiply(m1, m2) {
+  return m1.map(function (row, i) {
+    return row.map(function (val, j) {
+      return val * m2[i][j];
+    });
+  });
+}
+
+/***/ }),
+
+/***/ "./src/hooks/placement/index.ts":
+/*!**************************************!*\
+  !*** ./src/hooks/placement/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 */   calculateAvailablePosition: () => (/* reexport safe */ _calculateAvailablePosition__WEBPACK_IMPORTED_MODULE_1__.calculateAvailablePosition),
+/* harmony export */   useSmartPlacementResolver: () => (/* reexport safe */ _useSmartPlacementResolver__WEBPACK_IMPORTED_MODULE_0__.useSmartPlacementResolver)
+/* harmony export */ });
+/* harmony import */ var _useSmartPlacementResolver__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./useSmartPlacementResolver */ "./src/hooks/placement/useSmartPlacementResolver.ts");
+/* harmony import */ var _calculateAvailablePosition__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./calculateAvailablePosition */ "./src/hooks/placement/calculateAvailablePosition.ts");
+
+
+
+/***/ }),
+
+/***/ "./src/hooks/placement/useSmartPlacementResolver.ts":
+/*!**********************************************************!*\
+  !*** ./src/hooks/placement/useSmartPlacementResolver.ts ***!
+  \**********************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   useSmartPlacementResolver: () => (/* binding */ useSmartPlacementResolver)
+/* harmony export */ });
+/* harmony import */ var _calculateAvailablePosition__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./calculateAvailablePosition */ "./src/hooks/placement/calculateAvailablePosition.ts");
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function 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; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+
+var DEFAULT_OFFSET_FROM_PARENT__PX = 4;
+var DEFAULT_WEIGHTS = [[0.5, 1.5, 0.5], [1, 0, 1], [0.5, 1.6, 0.5]];
+/**
+ * Хук для умного позиционирования элемента.
+ *
+ * Позволяет определить оптимальное положение элемента,
+ * чтобы он не выходил за пределы видимой области.
+ *
+ * @param [options.parentRef=undfined] Ref на контейнер, относительно которого будет происходить позиционирование. Если не задан, то будет позиционировать относительно изначального положения.
+ * @param [options.windowRef=window] Ref на контейнер, в области видимости которого будет происходить позиционирование. По умолчанию позиционирует в главном окне (`window`).
+ * @param [options.position='fixed']
+ * @param [options.offset=4]
+ *
+ * @returns FunReturnType
+ *
+ * @example
+ * @param args
+ */
+function useSmartPlacementResolver() {
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+    args[_key] = arguments[_key];
+  }
+  var ref = args[0],
+    _args$ = args[1],
+    options = _args$ === void 0 ? {} : _args$;
+  var parentRef = options.parentRef,
+    windowRef = options.windowRef,
+    _options$offset = options.offset,
+    offset = _options$offset === void 0 ? DEFAULT_OFFSET_FROM_PARENT__PX : _options$offset,
+    _options$weights = options.weights,
+    weights = _options$weights === void 0 ? DEFAULT_WEIGHTS : _options$weights,
+    _options$position = options.position,
+    position = _options$position === void 0 ? 'fixed' : _options$position;
+  var getSizeOfObj = function getSizeOfObj() {
+    var obj = ref.current;
+    if (obj) {
+      return {
+        width: obj.offsetWidth,
+        height: obj.offsetHeight
+      };
+    }
+    return {
+      width: 0,
+      height: 0
+    };
+  };
+  var getPosOfObj = function getPosOfObj() {
+    var obj = ref.current;
+    if (obj) {
+      var rect = obj.getBoundingClientRect();
+      return {
+        left: rect.x,
+        top: rect.y
+      };
+    }
+    return {
+      left: 0,
+      top: 0
+    };
+  };
+  var getSizeOfParent = function getSizeOfParent() {
+    var parent = parentRef === null || parentRef === void 0 ? void 0 : parentRef.current;
+    if (parent) {
+      return {
+        width: parent.offsetWidth,
+        height: parent.offsetHeight
+      };
+    }
+    return {
+      width: 0,
+      height: 0
+    };
+  };
+  var getPosOfParent = function getPosOfParent() {
+    var parent = parentRef === null || parentRef === void 0 ? void 0 : parentRef.current;
+    if (parent) {
+      var rect = parent.getBoundingClientRect();
+      return {
+        left: rect.x,
+        top: rect.y
+      };
+    }
+    return getPosOfObj();
+  };
+  var getSizeOfWindow = function getSizeOfWindow() {
+    var windowObj = windowRef === null || windowRef === void 0 ? void 0 : windowRef.current;
+    if (windowObj) {
+      return {
+        width: windowObj.offsetWidth,
+        height: windowObj.offsetHeight
+      };
+    }
+    return {
+      width: window.innerWidth,
+      height: window.innerHeight
+    };
+  };
+  var getPosOfWindow = function getPosOfWindow() {
+    if (windowRef) {
+      var _window = windowRef.current;
+      var rect = _window === null || _window === void 0 ? void 0 : _window.getBoundingClientRect();
+      return {
+        top: (rect === null || rect === void 0 ? void 0 : rect.x) || 0,
+        left: (rect === null || rect === void 0 ? void 0 : rect.y) || 0
+      };
+    }
+    return {
+      top: 0,
+      left: 0
+    };
+  };
+  var getCalculatedProps = function getCalculatedProps() {
+    var objRect = getSizeOfObj();
+    var parentRect = _objectSpread(_objectSpread({}, getPosOfParent()), getSizeOfParent());
+    var windowRect = _objectSpread(_objectSpread({}, getPosOfWindow()), getSizeOfWindow());
+    return _objectSpread(_objectSpread({}, options), {}, {
+      offset: offset,
+      weights: weights,
+      objRect: objRect,
+      parentRect: parentRect,
+      windowRect: windowRect
+    });
+  };
+  var changePosCalc = function changePosCalc() {
+    var props = getCalculatedProps();
+    return (0,_calculateAvailablePosition__WEBPACK_IMPORTED_MODULE_0__.calculateAvailablePosition)(props);
+  };
+  var configurateObj = function configurateObj() {
+    if (ref !== null && ref !== void 0 && ref.current) {
+      ref.current.style.position = position;
+    }
+    if (position === 'absolute' && parentRef !== null && parentRef !== void 0 && parentRef.current) {
+      parentRef.current.style.position = 'relative';
+    }
+  };
+  var getInitStyle = function getInitStyle() {
+    return {
+      position: position
+    };
+  };
+  var init = function init() {
+    configurateObj();
+    return changePosCalc();
+  };
+  var calc = function calc() {
+    return changePosCalc();
+  };
+  return {
+    init: init,
+    calc: calc,
+    getInitStyle: getInitStyle
+  };
+}
+
+/***/ }),
+
 /***/ "./src/hooks/simpleRefWork.ts":
 /*!************************************!*\
   !*** ./src/hooks/simpleRefWork.ts ***!
@@ -54647,9 +55179,23 @@ var FADE_IN_SCALE_UP_ANIMATION = function FADE_IN_SCALE_UP_ANIMATION() {
     });
     return timeline;
   };
+  var getInitStyle = function getInitStyle() {
+    return {
+      visibility: 'hidden',
+      position: 'fixed'
+    };
+  };
+  var getBackdropInitStyle = function getBackdropInitStyle() {
+    return {
+      position: 'fixed',
+      visibility: 'hidden'
+    };
+  };
   return {
     appear: appear,
-    disappear: disappear
+    disappear: disappear,
+    getInitStyle: getInitStyle,
+    getBackdropInitStyle: getBackdropInitStyle
   };
 };
 var SLIDE_BASE_FADE_IN_ANIMATION = function SLIDE_BASE_FADE_IN_ANIMATION(getHideHeight) {
@@ -54713,9 +55259,23 @@ var SLIDE_BASE_FADE_IN_ANIMATION = function SLIDE_BASE_FADE_IN_ANIMATION(getHide
     });
     return timeline;
   };
+  var getInitStyle = function getInitStyle() {
+    return {
+      visibility: 'hidden',
+      position: 'fixed'
+    };
+  };
+  var getBackdropInitStyle = function getBackdropInitStyle() {
+    return {
+      position: 'fixed',
+      visibility: 'hidden'
+    };
+  };
   return {
     appear: appear,
-    disappear: disappear
+    disappear: disappear,
+    getInitStyle: getInitStyle,
+    getBackdropInitStyle: getBackdropInitStyle
   };
 };
 var SLIDE_UP_FADE_IN_ANIMATION = function SLIDE_UP_FADE_IN_ANIMATION() {
@@ -54786,9 +55346,23 @@ var FADE_IN_ANIMATION = function FADE_IN_ANIMATION() {
     });
     return timeline;
   };
+  var getInitStyle = function getInitStyle() {
+    return {
+      visibility: 'hidden',
+      position: 'fixed'
+    };
+  };
+  var getBackdropInitStyle = function getBackdropInitStyle() {
+    return {
+      position: 'fixed',
+      visibility: 'hidden'
+    };
+  };
   return {
     appear: appear,
-    disappear: disappear
+    disappear: disappear,
+    getInitStyle: getInitStyle,
+    getBackdropInitStyle: getBackdropInitStyle
   };
 };
 var BACKDROP_MODAL_ANIMATIONS = function BACKDROP_MODAL_ANIMATIONS() {
@@ -54846,7 +55420,8 @@ var POPOVER_ANIMATION = function POPOVER_ANIMATION() {
   var appear = function appear(props, timeline, options) {
     var _options$zIndex;
     var modal = props.modal,
-      predictPos = props.predictPos;
+      predictPos = props.predictPos,
+      position = props.position;
     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.set(modal, {
       visibility: 'visible',
@@ -54854,9 +55429,11 @@ var POPOVER_ANIMATION = function POPOVER_ANIMATION() {
       top: predictPos[1],
       opacity: 0,
       transform: 'none',
-      zIndex: modalZIndex
+      zIndex: modalZIndex,
+      position: position
     }).to(modal, {
-      opacity: 0.95
+      opacity: 0.95,
+      duration: 0.1
     }).to(modal, {
       opacity: 1,
       duration: 0.2,
@@ -54878,24 +55455,31 @@ var POPOVER_ANIMATION = function POPOVER_ANIMATION() {
     });
     return timeline;
   };
+  var getInitStyle = function getInitStyle(props) {
+    var position = props.position;
+    return {
+      visibility: 'hidden',
+      position: position
+    };
+  };
   return {
     appear: appear,
-    disappear: disappear
+    disappear: disappear,
+    getInitStyle: getInitStyle
   };
 };
 var DROPDOWN_ANIMATION = function DROPDOWN_ANIMATION() {
   var appear = function appear(props, timeline, options) {
     var _options$zIndex2;
     var modal = props.modal,
-      predictPos = props.predictPos;
+      predictPos = props.predictPos,
+      position = props.position;
     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.set(modal, {
       visibility: 'visible',
-      left: predictPos[0],
-      top: predictPos[1] - 10,
-      opacity: 0,
       transform: 'none',
-      zIndex: modalZIndex
+      zIndex: modalZIndex,
+      position: position
     }).to(modal, {
       opacity: 1,
       top: predictPos[1],
@@ -54911,7 +55495,7 @@ var DROPDOWN_ANIMATION = function DROPDOWN_ANIMATION() {
       predictPos = props.predictPos;
     timeline.to(modal, {
       opacity: 0,
-      top: predictPos[0] - 5,
+      top: predictPos[1] - 5,
       duration: 0.2,
       ease: 'power2.in'
     }).set(modal, {
@@ -54919,16 +55503,25 @@ var DROPDOWN_ANIMATION = function DROPDOWN_ANIMATION() {
     });
     return timeline;
   };
+  var getInitStyle = function getInitStyle(props) {
+    var position = props.position;
+    return {
+      visibility: 'hidden',
+      position: position
+    };
+  };
   return {
     appear: appear,
-    disappear: disappear
+    disappear: disappear,
+    getInitStyle: getInitStyle
   };
 };
 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;
+      predictPos = props.predictPos,
+      position = props.position;
     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.set(modal, {
       visibility: 'visible',
@@ -54936,7 +55529,8 @@ var CONTEXT_MENU_ANIMATION = function CONTEXT_MENU_ANIMATION() {
       top: predictPos[1],
       opacity: 0,
       zIndex: modalZIndex,
-      scale: 0.95
+      scale: 0.95,
+      position: position
     }).to(modal, {
       opacity: 1,
       scale: 1.02,
@@ -54964,9 +55558,17 @@ var CONTEXT_MENU_ANIMATION = function CONTEXT_MENU_ANIMATION() {
     });
     return timeline;
   };
+  var getInitStyle = function getInitStyle(props) {
+    var position = props.position;
+    return {
+      visibility: 'hidden',
+      position: position
+    };
+  };
   return {
     appear: appear,
-    disappear: disappear
+    disappear: disappear,
+    getInitStyle: getInitStyle
   };
 };
 var ACTION_SHEET_ANIMATION = function ACTION_SHEET_ANIMATION() {
@@ -54975,7 +55577,8 @@ var ACTION_SHEET_ANIMATION = function ACTION_SHEET_ANIMATION() {
     var modal = props.modal,
       backdrop = props.backdrop,
       target = props.target,
-      predictPos = props.predictPos;
+      predictPos = props.predictPos,
+      position = props.position;
     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;
@@ -54986,7 +55589,8 @@ var ACTION_SHEET_ANIMATION = function ACTION_SHEET_ANIMATION() {
       top: predictPos[1],
       opacity: 0,
       zIndex: modalZIndex,
-      transform: 'none'
+      transform: 'none',
+      position: position
     }).set(target, {
       zIndex: targetZIndex
     }).set(backdrop, {
@@ -55026,9 +55630,17 @@ var ACTION_SHEET_ANIMATION = function ACTION_SHEET_ANIMATION() {
     });
     return timeline;
   };
+  var getInitStyle = function getInitStyle(props) {
+    var position = props.position;
+    return {
+      visibility: 'hidden',
+      position: position
+    };
+  };
   return {
     appear: appear,
-    disappear: disappear
+    disappear: disappear,
+    getInitStyle: getInitStyle
   };
 };
 var MODAL_ANIMATIONS = function MODAL_ANIMATIONS() {
@@ -55053,6 +55665,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   MOVING_ANIMATIONS: () => (/* binding */ MOVING_ANIMATIONS)
 /* harmony export */ });
+/* harmony import */ var gsap__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! gsap */ "./node_modules/gsap/index.js");
+
 var DEFAULT_ANIMATION = function DEFAULT_ANIMATION() {
   for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
     args[_key] = arguments[_key];
@@ -55060,14 +55674,14 @@ var DEFAULT_ANIMATION = function DEFAULT_ANIMATION() {
   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 place = options.place;
   var left = place.left,
     top = place.top;
-  timeline.set(element, {
-    position: position
-  }).to(element, {
+  gsap__WEBPACK_IMPORTED_MODULE_0__["default"].killTweensOf(element, {
+    top: top,
+    left: left
+  });
+  timeline.to(element, {
     top: top,
     left: left,
     duration: 0.1,
@@ -55221,11 +55835,14 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   useBackgroundModalAnim: () => (/* reexport safe */ _useBackgroundModalAnim__WEBPACK_IMPORTED_MODULE_1__.useBackgroundModalAnim),
 /* harmony export */   useModalAnim: () => (/* reexport safe */ _useModalAnim__WEBPACK_IMPORTED_MODULE_0__.useModalAnim),
-/* harmony export */   useShimmer: () => (/* reexport safe */ _useShimmer__WEBPACK_IMPORTED_MODULE_2__.useShimmer)
+/* harmony export */   useShimmer: () => (/* reexport safe */ _useShimmer__WEBPACK_IMPORTED_MODULE_2__.useShimmer),
+/* harmony export */   useTimeline: () => (/* reexport safe */ _helpers__WEBPACK_IMPORTED_MODULE_3__.useTimeline)
 /* harmony export */ });
 /* harmony import */ var _useModalAnim__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./useModalAnim */ "./src/hooks/ui-animations/useModalAnim.ts");
 /* harmony import */ var _useBackgroundModalAnim__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./useBackgroundModalAnim */ "./src/hooks/ui-animations/useBackgroundModalAnim.ts");
 /* harmony import */ var _useShimmer__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./useShimmer */ "./src/hooks/ui-animations/useShimmer.ts");
+/* harmony import */ var _helpers__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./helpers */ "./src/hooks/ui-animations/helpers.ts");
+
 
 
 
@@ -55387,18 +56004,16 @@ function useBackgroundModalAnim() {
   function updateModalPlacement() {
     var _getObjData2 = getObjData(),
       predictPlace = _getObjData2.predictPlace;
-    var timeline = initAdditionTimeline();
+    var additionTimeline = 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, {
+    if (obj) {
+      (0,_assets__WEBPACK_IMPORTED_MODULE_1__.MOVING_ANIMATIONS)()["default"](obj, additionTimeline, {
         place: {
           left: newPlace[0],
           top: newPlace[1]
-        },
-        position: 'fixed'
+        }
       }).play();
     }
   }
@@ -55424,9 +56039,8 @@ function useBackgroundModalAnim() {
     if (timeline) {
       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, {
+        (0,_assets__WEBPACK_IMPORTED_MODULE_1__.BACKDROP_MODAL_ANIMATIONS)()[animeType].disappear(props, timeline, {
           zIndex: zIndex,
           backdropColor: backdropColor
         }).play();
@@ -55438,10 +56052,7 @@ function useBackgroundModalAnim() {
     setHiddeState();
   }
   function getInitStyle() {
-    return {
-      position: 'fixed',
-      visibility: 'hidden'
-    };
+    return (0,_assets__WEBPACK_IMPORTED_MODULE_1__.BACKDROP_MODAL_ANIMATIONS)()[animeType].getInitStyle();
   }
   function setInitStyle() {
     var obj = ref.current;
@@ -55453,12 +56064,14 @@ function useBackgroundModalAnim() {
     var _ref$current;
     if (backdropRef.current) backdropRef.current.remove();
     var backdrop = document.createElement('div');
-    backdrop.style.position = 'fixed';
     backdrop.style.width = '100vw';
     backdrop.style.height = '100dvh';
     backdrop.style.top = '0';
     backdrop.style.left = '0';
+    backdrop.style.position = 'fixed';
     backdrop.style.visibility = 'hidden';
+    var initBackdropStyle = (0,_assets__WEBPACK_IMPORTED_MODULE_1__.BACKDROP_MODAL_ANIMATIONS)()[animeType].getBackdropInitStyle();
+    Object.assign(backdrop.style, initBackdropStyle);
     backdrop.className = backdropClassName || '';
     (_ref$current = ref.current) === null || _ref$current === void 0 || (_ref$current = _ref$current.parentElement) === null || _ref$current === void 0 || _ref$current.appendChild(backdrop);
     backdropRef.current = backdrop;
@@ -55499,7 +56112,7 @@ __webpack_require__.r(__webpack_exports__);
 /* 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 _useSmartPlacementResolver__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../useSmartPlacementResolver */ "./src/hooks/useSmartPlacementResolver.ts");
+/* harmony import */ var _placement_useSmartPlacementResolver__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../placement/useSmartPlacementResolver */ "./src/hooks/placement/useSmartPlacementResolver.ts");
 /* harmony import */ var _assets__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./assets */ "./src/hooks/ui-animations/assets/index.ts");
 /* harmony import */ var _helpers__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./helpers */ "./src/hooks/ui-animations/helpers.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); }
@@ -55551,7 +56164,7 @@ function useModalAnim() {
     zIndex = options.zIndex,
     backdropColor = options.backdropColor;
   var backdropRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
-  var smartPlacementServices = (0,_useSmartPlacementResolver__WEBPACK_IMPORTED_MODULE_1__.useSmartPlacementResolver)(ref, _objectSpread({
+  var smartPlacementServices = (0,_placement_useSmartPlacementResolver__WEBPACK_IMPORTED_MODULE_1__.useSmartPlacementResolver)(ref, _objectSpread({
     parentRef: targetRef,
     position: position,
     alignX: 'left'
@@ -55641,7 +56254,8 @@ function useModalAnim() {
         target: target,
         targetSize: targetSize,
         modal: modal,
-        backdrop: backdrop
+        backdrop: backdrop,
+        position: position
       };
     }
     return undefined;
@@ -55661,8 +56275,7 @@ function useModalAnim() {
     if (obj && timeline) {
       timeline.clear();
       anim(obj, timeline, {
-        place: newPlace,
-        position: position
+        place: newPlace
       }).play();
     }
   }
@@ -55702,10 +56315,14 @@ function useModalAnim() {
     setHiddeState();
   }
   function getInitStyle() {
-    return {
-      position: position,
-      visibility: 'hidden'
-    };
+    var props = getAnimProps();
+    if (!props) {
+      return {
+        position: position,
+        visibility: 'hidden'
+      };
+    }
+    return (0,_assets__WEBPACK_IMPORTED_MODULE_2__.MODAL_ANIMATIONS)()[animeType].getInitStyle(props);
   }
   function setInitStyle() {
     var obj = ref.current;
@@ -56764,377 +57381,6 @@ function useIsShowEdge() {
 
 /***/ }),
 
-/***/ "./src/hooks/useSmartPlacementResolver.ts":
-/*!************************************************!*\
-  !*** ./src/hooks/useSmartPlacementResolver.ts ***!
-  \************************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   useSmartPlacementResolver: () => (/* binding */ useSmartPlacementResolver)
-/* harmony export */ });
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function 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; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-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; }
-var MIN_WEIGHT = 0.001;
-var DEFAULT_OFFSET_FROM_PARENT__PX = 4;
-var DEFAULT_WEIGHTS = [[0.5, 1.5, 0.5], [1, 0, 1], [0.5, 1.6, 0.5]];
-/**
- * Хук для умного позиционирования элемента.
- *
- * Позволяет определить оптимальное положение элемента,
- * чтобы он не выходил за пределы видимой области.
- *
- * @param [options.parentRef=undfined] Ref на контейнер, относительно которого будет происходить позиционирование. Если не задан, то будет позиционировать относительно изначального положения.
- * @param [options.windowRef=window] Ref на контейнер, в области видимости которого будет происходить позиционирование. По умолчанию позиционирует в главном окне (`window`).
- * @param [options.position='fixed']
- * @param [options.offset=4]
- *
- * @returns FunReturnType
- *
- * @example
- * @param args
- */
-function useSmartPlacementResolver() {
-  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-    args[_key] = arguments[_key];
-  }
-  var ref = args[0],
-    _args$ = args[1],
-    options = _args$ === void 0 ? {} : _args$;
-  var parentRef = options.parentRef,
-    windowRef = options.windowRef,
-    _options$offset = options.offset,
-    offset = _options$offset === void 0 ? DEFAULT_OFFSET_FROM_PARENT__PX : _options$offset,
-    _options$position = options.position,
-    position = _options$position === void 0 ? 'fixed' : _options$position,
-    _options$weights = options.weights,
-    weights = _options$weights === void 0 ? DEFAULT_WEIGHTS : _options$weights,
-    _options$alignX = options.alignX,
-    alignX = _options$alignX === void 0 ? 'center' : _options$alignX,
-    _options$alignY = options.alignY,
-    alignY = _options$alignY === void 0 ? 'center' : _options$alignY;
-  var getSizeOfObj = function getSizeOfObj() {
-    var obj = ref.current;
-    if (obj) {
-      return [obj.offsetWidth, obj.offsetHeight];
-    }
-    return [0, 0];
-  };
-  var getPosOfObj = function getPosOfObj() {
-    var obj = ref.current;
-    if (obj) {
-      var rect = obj.getBoundingClientRect();
-      return [rect.x, rect.y];
-    }
-    return [0, 0];
-  };
-  var getSizeOfParent = function getSizeOfParent() {
-    var parent = parentRef === null || parentRef === void 0 ? void 0 : parentRef.current;
-    if (parent) {
-      return [parent.offsetWidth, parent.offsetHeight];
-    }
-    return [0, 0];
-  };
-  var getPosOfParent = function getPosOfParent() {
-    var parent = parentRef === null || parentRef === void 0 ? void 0 : parentRef.current;
-    if (parent) {
-      var rect = parent.getBoundingClientRect();
-      return [rect.x, rect.y];
-    }
-    return getPosOfObj();
-  };
-  var getSizeOfWindow = function getSizeOfWindow() {
-    var windowObj = windowRef === null || windowRef === void 0 ? void 0 : windowRef.current;
-    if (windowObj) {
-      return [windowObj.offsetWidth, windowObj.offsetHeight];
-    }
-    return [window.innerWidth, window.innerHeight];
-  };
-  var getPosOfWindow = function getPosOfWindow() {
-    if (windowRef) {
-      var _window = windowRef.current;
-      var rect = _window === null || _window === void 0 ? void 0 : _window.getBoundingClientRect();
-      return [(rect === null || rect === void 0 ? void 0 : rect.x) || 0, (rect === null || rect === void 0 ? void 0 : rect.y) || 0];
-    }
-    return [0, 0];
-  };
-  var getAvailablePlacements = function getAvailablePlacements() {
-    var _getSizeOfObj = getSizeOfObj(),
-      _getSizeOfObj2 = _slicedToArray(_getSizeOfObj, 2),
-      w = _getSizeOfObj2[0],
-      h = _getSizeOfObj2[1];
-    var _getSizeOfParent = getSizeOfParent(),
-      _getSizeOfParent2 = _slicedToArray(_getSizeOfParent, 2),
-      pW = _getSizeOfParent2[0],
-      pH = _getSizeOfParent2[1];
-    var _getPosOfParent = getPosOfParent(),
-      _getPosOfParent2 = _slicedToArray(_getPosOfParent, 2),
-      pX = _getPosOfParent2[0],
-      pY = _getPosOfParent2[1];
-    var _getSizeOfWindow = getSizeOfWindow(),
-      _getSizeOfWindow2 = _slicedToArray(_getSizeOfWindow, 2),
-      wW = _getSizeOfWindow2[0],
-      wH = _getSizeOfWindow2[1];
-    var _getPosOfWindow = getPosOfWindow(),
-      _getPosOfWindow2 = _slicedToArray(_getPosOfWindow, 2),
-      wX = _getPosOfWindow2[0],
-      wY = _getPosOfWindow2[1];
-    var T = pY + wY - h >= 0;
-    var R = pX + wX + pW + w <= wW;
-    var B = pY + wY + pH + h <= wH;
-    var L = pX + wX - w >= 0;
-    var parentCenterX = pX + pW / 2;
-    var parentCenterY = pY + pH / 2;
-    var centerX = parentCenterX - w / 2 >= 0 && parentCenterX + w / 2 <= wW;
-    var centerY = parentCenterY - h / 2 >= 0 && parentCenterY + h / 2 <= wH;
-    return [T, R, B, L, centerX, centerY];
-  };
-  var replaceOnLeftSide = function replaceOnLeftSide() {
-    var _getSizeOfObj3 = getSizeOfObj(),
-      _getSizeOfObj4 = _slicedToArray(_getSizeOfObj3, 1),
-      w = _getSizeOfObj4[0];
-    var _getPosOfParent3 = getPosOfParent(),
-      _getPosOfParent4 = _slicedToArray(_getPosOfParent3, 1),
-      pX = _getPosOfParent4[0];
-    var newLeft;
-    if (position === 'fixed') {
-      newLeft = pX - w - offset;
-    } else {
-      newLeft = -w - offset;
-    }
-    return {
-      left: newLeft
-    };
-  };
-  var replaceOnCenterX = function replaceOnCenterX() {
-    var _getSizeOfObj5 = getSizeOfObj(),
-      _getSizeOfObj6 = _slicedToArray(_getSizeOfObj5, 1),
-      w = _getSizeOfObj6[0];
-    var _getSizeOfParent3 = getSizeOfParent(),
-      _getSizeOfParent4 = _slicedToArray(_getSizeOfParent3, 1),
-      pW = _getSizeOfParent4[0];
-    var _getPosOfParent5 = getPosOfParent(),
-      _getPosOfParent6 = _slicedToArray(_getPosOfParent5, 1),
-      pX = _getPosOfParent6[0];
-    var newLeft;
-    var stepX;
-    switch (alignX) {
-      case "center":
-        stepX = w / 2;
-        break;
-      case "left":
-        stepX = pW / 2;
-        break;
-      case "right":
-        stepX = w - pW / 2;
-        break;
-    }
-    if (position === 'fixed') {
-      newLeft = pX + pW / 2 - stepX;
-    } else {
-      newLeft = pW / 2 - stepX;
-    }
-    return {
-      left: newLeft
-    };
-  };
-  var replaceOnRightSide = function replaceOnRightSide() {
-    var _getSizeOfParent5 = getSizeOfParent(),
-      _getSizeOfParent6 = _slicedToArray(_getSizeOfParent5, 1),
-      pW = _getSizeOfParent6[0];
-    var _getPosOfParent7 = getPosOfParent(),
-      _getPosOfParent8 = _slicedToArray(_getPosOfParent7, 1),
-      pX = _getPosOfParent8[0];
-    var newLeft;
-    if (position === 'fixed') {
-      newLeft = pX + pW + offset;
-    } else {
-      newLeft = pW + offset;
-    }
-    return {
-      left: newLeft
-    };
-  };
-  var replaceOnTopSide = function replaceOnTopSide() {
-    var _getSizeOfObj7 = getSizeOfObj(),
-      _getSizeOfObj8 = _slicedToArray(_getSizeOfObj7, 2),
-      h = _getSizeOfObj8[1];
-    var _getPosOfParent9 = getPosOfParent(),
-      _getPosOfParent10 = _slicedToArray(_getPosOfParent9, 2),
-      pY = _getPosOfParent10[1];
-    var newTop;
-    if (position === 'fixed') {
-      newTop = pY - h - offset;
-    } else {
-      newTop = -h - offset;
-    }
-    return {
-      top: newTop
-    };
-  };
-  var replaceOnCenterY = function replaceOnCenterY() {
-    var _getSizeOfObj9 = getSizeOfObj(),
-      _getSizeOfObj10 = _slicedToArray(_getSizeOfObj9, 2),
-      h = _getSizeOfObj10[1];
-    var _getPosOfParent11 = getPosOfParent(),
-      _getPosOfParent12 = _slicedToArray(_getPosOfParent11, 2),
-      pY = _getPosOfParent12[1];
-    var _getSizeOfParent7 = getSizeOfParent(),
-      _getSizeOfParent8 = _slicedToArray(_getSizeOfParent7, 2),
-      pH = _getSizeOfParent8[1];
-    var newTop;
-    var stepY;
-    switch (alignY) {
-      case "center":
-        stepY = h / 2;
-        break;
-      case "top":
-        stepY = pH / 2;
-        break;
-      case "bottom":
-        stepY = h - pH / 2;
-        break;
-    }
-    if (position === 'fixed') {
-      newTop = pY + pH / 2 - stepY;
-    } else {
-      newTop = pH / 2 - stepY;
-    }
-    return {
-      top: newTop
-    };
-  };
-  var replaceOnBottomSide = function replaceOnBottomSide() {
-    var _getSizeOfParent9 = getSizeOfParent(),
-      _getSizeOfParent10 = _slicedToArray(_getSizeOfParent9, 2),
-      pH = _getSizeOfParent10[1];
-    var _getPosOfParent13 = getPosOfParent(),
-      _getPosOfParent14 = _slicedToArray(_getPosOfParent13, 2),
-      pY = _getPosOfParent14[1];
-    var newTop;
-    if (position === 'fixed') {
-      newTop = pY + pH + offset;
-    } else {
-      newTop = pH + offset;
-    }
-    return {
-      top: newTop
-    };
-  };
-  var replaceLeftTop = function replaceLeftTop() {
-    return _objectSpread(_objectSpread({}, replaceOnLeftSide()), replaceOnTopSide());
-  };
-  var replaceLeftCenter = function replaceLeftCenter() {
-    return _objectSpread(_objectSpread({}, replaceOnLeftSide()), replaceOnCenterY());
-  };
-  var replaceLeftBottom = function replaceLeftBottom() {
-    return _objectSpread(_objectSpread({}, replaceOnLeftSide()), replaceOnBottomSide());
-  };
-  var replaceRightTop = function replaceRightTop() {
-    return _objectSpread(_objectSpread({}, replaceOnRightSide()), replaceOnTopSide());
-  };
-  var replaceRightCenter = function replaceRightCenter() {
-    return _objectSpread(_objectSpread({}, replaceOnRightSide()), replaceOnCenterY());
-  };
-  var replaceRightBottom = function replaceRightBottom() {
-    return _objectSpread(_objectSpread({}, replaceOnRightSide()), replaceOnBottomSide());
-  };
-  var replaceTopCenter = function replaceTopCenter() {
-    return _objectSpread(_objectSpread({}, replaceOnTopSide()), replaceOnCenterX());
-  };
-  var replaceBottomCenter = function replaceBottomCenter() {
-    return _objectSpread(_objectSpread({}, replaceOnBottomSide()), replaceOnCenterX());
-  };
-  var replaceCenter = function replaceCenter() {
-    return _objectSpread(_objectSpread({}, replaceOnCenterY()), replaceOnCenterX());
-  };
-  var callbacksMatrix = [[replaceLeftTop, replaceTopCenter, replaceRightTop], [replaceLeftCenter, replaceCenter, replaceRightCenter], [replaceLeftBottom, replaceBottomCenter, replaceRightBottom]];
-  var changePosCalc = function changePosCalc() {
-    var _getAvailablePlacemen = getAvailablePlacements(),
-      _getAvailablePlacemen2 = _slicedToArray(_getAvailablePlacemen, 6),
-      T = _getAvailablePlacemen2[0],
-      R = _getAvailablePlacemen2[1],
-      B = _getAvailablePlacemen2[2],
-      L = _getAvailablePlacemen2[3],
-      centerX = _getAvailablePlacemen2[4],
-      centerY = _getAvailablePlacemen2[5];
-    var getWeight = function getWeight(a, b) {
-      return a && b ? 1 : MIN_WEIGHT;
-    };
-    var curWeightTable = [[getWeight(T, L), getWeight(T, centerX), getWeight(T, R)], [getWeight(L, centerY), MIN_WEIGHT, getWeight(R, centerY)], [getWeight(B, L), getWeight(B, centerX), getWeight(B, R)]];
-    var resMatrix = elementwiseMultiply(curWeightTable, weights);
-    var max = getMaxPosition(resMatrix);
-    if (max.val !== 0) {
-      var _callbacksMatrix$max$, _callbacksMatrix$max$2;
-      var newPos = (_callbacksMatrix$max$ = (_callbacksMatrix$max$2 = callbacksMatrix[max.pos[0]])[max.pos[1]]) === null || _callbacksMatrix$max$ === void 0 ? void 0 : _callbacksMatrix$max$.call(_callbacksMatrix$max$2);
-      if (newPos) {
-        return newPos;
-      }
-    }
-    return {
-      left: 0,
-      top: 0
-    };
-  };
-  var configurateObj = function configurateObj() {
-    if (ref !== null && ref !== void 0 && ref.current) {
-      ref.current.style.position = position;
-    }
-    if (position === 'absolute' && parentRef !== null && parentRef !== void 0 && parentRef.current) {
-      parentRef.current.style.position = 'relative';
-    }
-  };
-  var init = function init() {
-    configurateObj();
-    return changePosCalc();
-  };
-  var calc = function calc() {
-    return changePosCalc();
-  };
-  return {
-    init: init,
-    calc: calc
-  };
-}
-function getMaxPosition(matrix) {
-  var maxVal = -Infinity;
-  var maxPos = [0, 0];
-  for (var i = 0; i < matrix.length; i++) {
-    for (var j = 0; j < matrix[i].length; j++) {
-      var current = matrix[i][j];
-      if (current > maxVal) {
-        maxVal = current;
-        maxPos = [i, j];
-      }
-    }
-  }
-  return {
-    val: maxVal,
-    pos: maxPos
-  };
-}
-function elementwiseMultiply(m1, m2) {
-  return m1.map(function (row, i) {
-    return row.map(function (val, j) {
-      return val * m2[i][j];
-    });
-  });
-}
-
-/***/ }),
-
 /***/ "./src/hooks/useSmartPosition.ts":
 /*!***************************************!*\
   !*** ./src/hooks/useSmartPosition.ts ***!
@@ -57146,7 +57392,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   useSmartPosition: () => (/* binding */ useSmartPosition)
 /* harmony export */ });
-/* harmony import */ var _hooks_useSmartPlacementResolver__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @/hooks/useSmartPlacementResolver */ "./src/hooks/useSmartPlacementResolver.ts");
+/* harmony import */ var _hooks_placement_useSmartPlacementResolver__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @/hooks/placement/useSmartPlacementResolver */ "./src/hooks/placement/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");
@@ -57167,7 +57413,7 @@ function useSmartPosition() {
   var onChangePlacement = callbacks.onChangePlacement,
     onInitPlacement = callbacks.onInitPlacement;
   var lastPlacement = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(undefined);
-  var _useSmartPlacementRes = (0,_hooks_useSmartPlacementResolver__WEBPACK_IMPORTED_MODULE_0__.useSmartPlacementResolver)(ref, options),
+  var _useSmartPlacementRes = (0,_hooks_placement_useSmartPlacementResolver__WEBPACK_IMPORTED_MODULE_0__.useSmartPlacementResolver)(ref, options),
     init = _useSmartPlacementRes.init,
     calc = _useSmartPlacementRes.calc;
   var handleInitPlacement = function handleInitPlacement(pos) {
@@ -57209,7 +57455,6 @@ function useSmartPosition() {
   var recalc = function recalc() {
     setUp();
   };
-  var resizeObserver = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(new ResizeObserver(resizeListener));
   var intersectionObserverCallback = function intersectionObserverCallback(entries) {
     entries.forEach(function (entry) {
       if (entry.isIntersecting) {
@@ -57220,17 +57465,16 @@ function useSmartPosition() {
   var intersectionObserverServices = (0,_hooks_elementObservers__WEBPACK_IMPORTED_MODULE_2__.useIntersectionObserver)([ref, parentRef], intersectionObserverCallback, {
     threshold: [0, 0.5, 1]
   });
-  var resizeObserverServices = (0,_hooks_elementObservers__WEBPACK_IMPORTED_MODULE_2__.useResizeObserver)(windowRef, resizeListener);
+  var resizeObserverServices = (0,_hooks_elementObservers__WEBPACK_IMPORTED_MODULE_2__.useResizeObserver)([windowRef, ref, parentRef], resizeListener);
+  var resizeWindowObserverServices = (0,_hooks_elementObservers__WEBPACK_IMPORTED_MODULE_2__.useResizeWindowObserver)(resizeListener);
   var setUpListeners = function setUpListeners() {
-    window.addEventListener('resize', resizeListener);
     intersectionObserverServices.reinit();
     resizeObserverServices.reinit();
   };
   var clearListeners = function clearListeners() {
     intersectionObserverServices.clear();
     resizeObserverServices.clear();
-    window.removeEventListener('resize', resizeListener);
-    window.removeEventListener('scroll', resizeListener);
+    resizeWindowObserverServices.clear();
   };
   return {
     recalc: recalc
@@ -61093,7 +61337,8 @@ var DateTimePicker = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardR
     _props$type = props.type,
     type = _props$type === void 0 ? 'datetime' : _props$type,
     onCancel = props.onCancel,
-    subTitle = props.subTitle;
+    subTitle = props.subTitle,
+    style = props.style;
   var _useState = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)((0,_ui__WEBPACK_IMPORTED_MODULE_4__.convertDate)({
       initDate: date || undefined,
       type: type
@@ -61252,6 +61497,7 @@ var DateTimePicker = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardR
   };
   return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
     className: _styles__WEBPACK_IMPORTED_MODULE_6__.DateTimePickerStyle.DateTimePicker,
+    style: style,
     ref: ref,
     children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
       className: _styles__WEBPACK_IMPORTED_MODULE_6__.DateTimePickerStyle.header,
@@ -62783,7 +63029,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @/hooks */ "./src/hooks/index.ts");
 /* harmony import */ var _styles__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../styles */ "./src/ui/Dropdown/styles/index.ts");
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["items", "title", "size", "onClick", "width", "isActive", "className", "styles", "elementAfter", "elementBefore"];
+var _excluded = ["items", "title", "size", "onClick", "width", "isActive", "className", "styles", "style", "elementAfter", "elementBefore"];
 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; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -62811,6 +63057,8 @@ var _Dropdown = function _Dropdown(props, ref) {
     className = props.className,
     _props$styles = props.styles,
     styles = _props$styles === void 0 ? {} : _props$styles,
+    _props$style = props.style,
+    style = _props$style === void 0 ? {} : _props$style,
     elementAfter = props.elementAfter,
     elementBefore = props.elementBefore,
     scrollCallbacks = _objectWithoutProperties(props, _excluded);
@@ -62828,9 +63076,9 @@ var _Dropdown = function _Dropdown(props, ref) {
     } else {
       resWidth = 'fit-content';
     }
-    return _objectSpread({
+    return _objectSpread(_objectSpread({
       width: resWidth
-    }, styles);
+    }, styles), style);
   };
   var getValue = function getValue(curItem) {
     if ((0,_lib__WEBPACK_IMPORTED_MODULE_3__.isObject)(curItem) && 'value' in curItem) {
@@ -64247,7 +64495,8 @@ function DateField(_ref) {
     }),
     open = _useModal.open,
     close = _useModal.close,
-    getIsShow = _useModal.getIsShow;
+    getIsShow = _useModal.getIsShow,
+    getInitStyle = _useModal.getInitStyle;
   var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)((0,_lib__WEBPACK_IMPORTED_MODULE_9__.getDateFromValue)({
       value: value,
       outFormat: outFormat,
@@ -64368,7 +64617,8 @@ function DateField(_ref) {
       date: getDateTimeForDateTimePicker(),
       onSubmit: onSubmit,
       onCancel: close,
-      ref: datePickerRef
+      ref: datePickerRef,
+      style: getInitStyle()
     })]
   });
 }
@@ -64584,7 +64834,8 @@ function DateTimeField(_ref) {
     }),
     open = _useModal.open,
     close = _useModal.close,
-    getIsShow = _useModal.getIsShow;
+    getIsShow = _useModal.getIsShow,
+    getInitStyle = _useModal.getInitStyle;
   var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)((0,_lib__WEBPACK_IMPORTED_MODULE_9__.getTimeFromValue)({
       value: value,
       outFormat: outFormat,
@@ -64732,7 +64983,8 @@ function DateTimeField(_ref) {
       date: getDateTimeForDateTimePicker(),
       onSubmit: onSubmit,
       onCancel: close,
-      ref: datePickerRef
+      ref: datePickerRef,
+      style: getInitStyle()
     })]
   });
 }
@@ -64827,7 +65079,8 @@ function TimeField(_ref) {
     }),
     open = _useModal.open,
     close = _useModal.close,
-    getIsShow = _useModal.getIsShow;
+    getIsShow = _useModal.getIsShow,
+    getInitStyle = _useModal.getInitStyle;
   var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)((0,_lib__WEBPACK_IMPORTED_MODULE_9__.getTimeFromValue)({
       value: value,
       outFormat: outFormat,
@@ -64948,6 +65201,7 @@ function TimeField(_ref) {
       date: getDateTimeForDateTimePicker(),
       onSubmit: onSubmit,
       onCancel: close,
+      style: getInitStyle(),
       ref: datePickerRef
     })]
   });
@@ -65463,7 +65717,8 @@ function DateRangeField(_ref) {
     }),
     open = _useModal.open,
     close = _useModal.close,
-    getIsShow = _useModal.getIsShow;
+    getIsShow = _useModal.getIsShow,
+    getInitStyle = _useModal.getInitStyle;
   var handleFocus = function handleFocus(e) {
     setIsFocus(true);
     if (!getIsShow()) {
@@ -65560,6 +65815,7 @@ function DateRangeField(_ref) {
       date: value,
       onSubmit: onSubmit,
       onCancel: close,
+      style: getInitStyle(),
       ref: datePickerRef
     })]
   });
@@ -67000,7 +67256,8 @@ function SelectField(_ref) {
     open = _useModal.open,
     close = _useModal.close,
     switching = _useModal.switching,
-    isShow = _useModal.isShow;
+    isShow = _useModal.isShow,
+    getInitStyle = _useModal.getInitStyle;
   (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () {
     // Установка значения при required
     var firstOptions = optionsState === null || optionsState === void 0 ? void 0 : optionsState[0];
@@ -67222,6 +67479,7 @@ function SelectField(_ref) {
       onScrollEnd: onScrollToBottom,
       onClick: handleClick,
       isActive: isActive,
+      style: getInitStyle(),
       ref: modalRef
     })]
   });
@@ -71864,6 +72122,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   addDateYear: () => (/* reexport safe */ _ui__WEBPACK_IMPORTED_MODULE_1__.addDateYear),
 /* harmony export */   arrayFieldComponent: () => (/* reexport safe */ _ui__WEBPACK_IMPORTED_MODULE_1__.arrayFieldComponent),
 /* harmony export */   blockWrapperComponent: () => (/* reexport safe */ _ui__WEBPACK_IMPORTED_MODULE_1__.blockWrapperComponent),
+/* harmony export */   calculateAvailablePosition: () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_2__.calculateAvailablePosition),
 /* harmony export */   changeInterval: () => (/* reexport safe */ _ui__WEBPACK_IMPORTED_MODULE_1__.changeInterval),
 /* harmony export */   clearDeepValue: () => (/* reexport safe */ _lib__WEBPACK_IMPORTED_MODULE_4__.clearDeepValue),
 /* harmony export */   compKeyWays: () => (/* reexport safe */ _lib__WEBPACK_IMPORTED_MODULE_4__.compKeyWays),
@@ -71922,6 +72181,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   useSmartPosition: () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_2__.useSmartPosition),
 /* harmony export */   useSmartScroll: () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_2__.useSmartScroll),
 /* harmony export */   useSyncedStateRef: () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_2__.useSyncedStateRef),
+/* harmony export */   useTimeline: () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_2__.useTimeline),
 /* harmony export */   useTouchpadInput: () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_2__.useTouchpadInput)
 /* harmony export */ });
 /* harmony import */ var _styles_colors_css_variables_index_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @/styles/colors/css-variables/index.css */ "./src/styles/colors/css-variables/index.css");