indicator-ui 0.1.26 → 0.1.28

package/dist/index.js

@@ -54184,6 +54184,7 @@ __webpack_require__.r(__webpack_exports__);
 /* 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 */   useCollapsible: () => (/* reexport safe */ _ui_animations__WEBPACK_IMPORTED_MODULE_13__.useCollapsible),
 /* 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),
@@ -54363,8 +54364,8 @@ function useBackdropModal() {
     setIsShow(true);
     requestAnimationFrame(function () {
       reinit();
-      appearanceAnim();
       resizeObserverService.reinit();
+      appearanceAnim();
     });
   };
   var close = function close() {
@@ -54616,8 +54617,8 @@ var getAvailablePlacements = function getAvailablePlacements(props) {
     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 R = pX + pW + w <= wW + wX;
+  var B = pY + pH + h <= wH + wY;
   var L = pX + wX - w >= 0;
   var parentCenterX = pX + pW / 2;
   var parentCenterY = pY + pH / 2;
@@ -55131,15 +55132,21 @@ __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 WINDOW_SIZE_DEFAULT = 1920;
 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 appearStart = function appearStart(props, timeline) {
+    var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
     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;
+    var _options$backdropColo = options.backdropColor,
+      backdropColor = _options$backdropColo === void 0 ? BACKDROP_BACKGROUND_COLOR : _options$backdropColo,
+      _options$zIndex = options.zIndex,
+      zIndex = _options$zIndex === void 0 ? {} : _options$zIndex;
+    var _zIndex$modal = zIndex.modal,
+      modalZIndex = _zIndex$modal === void 0 ? Z_INDEX_MODAL_DEFAULT : _zIndex$modal,
+      _zIndex$backdrop = zIndex.backdrop,
+      backdropZIndex = _zIndex$backdrop === void 0 ? Z_INDEX_BACKDROP_DEFAULT : _zIndex$backdrop;
     timeline.set(modal, {
       visibility: 'visible',
       left: predictPos[0],
@@ -55152,7 +55159,13 @@ var FADE_IN_SCALE_UP_ANIMATION = function FADE_IN_SCALE_UP_ANIMATION() {
       backgroundColor: backdropColor,
       opacity: 0,
       zIndex: backdropZIndex
-    }).to(modal, {
+    });
+    return timeline;
+  };
+  var appearMain = function appearMain(props, timeline) {
+    var modal = props.modal,
+      backdrop = props.backdrop;
+    timeline.to(modal, {
       opacity: 1,
       scale: 1,
       duration: 0.25,
@@ -55166,7 +55179,13 @@ var FADE_IN_SCALE_UP_ANIMATION = function FADE_IN_SCALE_UP_ANIMATION() {
     });
     return timeline;
   };
-  var disappear = function disappear(props, timeline) {
+  var appear = function appear(props, timeline) {
+    var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    appearStart(props, timeline, options);
+    appearMain(props, timeline);
+    return timeline;
+  };
+  var disappearMain = function disappearMain(props, timeline) {
     var modal = props.modal,
       backdrop = props.backdrop;
     timeline.to(modal, {
@@ -55178,13 +55197,24 @@ var FADE_IN_SCALE_UP_ANIMATION = function FADE_IN_SCALE_UP_ANIMATION() {
       opacity: 0,
       duration: 0.2,
       ease: 'power2.in'
-    }, '<').set(modal, {
+    }, '<');
+    return timeline;
+  };
+  var disappearEnd = function disappearEnd(props, timeline) {
+    var modal = props.modal,
+      backdrop = props.backdrop;
+    timeline.set(modal, {
       visibility: 'hidden'
     }).set(backdrop, {
       visibility: 'hidden'
     });
     return timeline;
   };
+  var disappear = function disappear(props, timeline) {
+    disappearMain(props, timeline);
+    disappearEnd(props, timeline);
+    return timeline;
+  };
   var getInitStyle = function getInitStyle() {
     return {
       visibility: 'hidden',
@@ -55201,19 +55231,28 @@ var FADE_IN_SCALE_UP_ANIMATION = function FADE_IN_SCALE_UP_ANIMATION() {
     appear: appear,
     disappear: disappear,
     getInitStyle: getInitStyle,
-    getBackdropInitStyle: getBackdropInitStyle
+    getBackdropInitStyle: getBackdropInitStyle,
+    appearStart: appearStart,
+    appearMain: appearMain,
+    disappearEnd: disappearEnd,
+    disappearMain: disappearMain
   };
 };
 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 appearStart = function appearStart(props, timeline) {
+    var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
     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;
+    var _options$backdropColo2 = options.backdropColor,
+      backdropColor = _options$backdropColo2 === void 0 ? BACKDROP_BACKGROUND_COLOR : _options$backdropColo2,
+      _options$zIndex2 = options.zIndex,
+      zIndex = _options$zIndex2 === void 0 ? {} : _options$zIndex2;
+    var _zIndex$modal2 = zIndex.modal,
+      modalZIndex = _zIndex$modal2 === void 0 ? Z_INDEX_MODAL_DEFAULT : _zIndex$modal2,
+      _zIndex$backdrop2 = zIndex.backdrop,
+      backdropZIndex = _zIndex$backdrop2 === void 0 ? Z_INDEX_BACKDROP_DEFAULT : _zIndex$backdrop2;
     timeline.set(modal, {
       visibility: 'visible',
       left: predictPos[0],
@@ -55225,6 +55264,15 @@ var SLIDE_BASE_FADE_IN_ANIMATION = function SLIDE_BASE_FADE_IN_ANIMATION(getHide
       backgroundColor: backdropColor,
       opacity: 0,
       zIndex: backdropZIndex
+    });
+    return timeline;
+  };
+  var appearMain = function appearMain(props, timeline) {
+    var modal = props.modal,
+      backdrop = props.backdrop,
+      predictPos = props.predictPos;
+    timeline.set(modal, {
+      left: predictPos[0]
     }).to(modal, {
       top: predictPos[1],
       duration: 0.3,
@@ -55242,7 +55290,13 @@ var SLIDE_BASE_FADE_IN_ANIMATION = function SLIDE_BASE_FADE_IN_ANIMATION(getHide
     });
     return timeline;
   };
-  var disappear = function disappear(props, timeline) {
+  var appear = function appear(props, timeline) {
+    var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    appearStart(props, timeline, options);
+    appearMain(props, timeline);
+    return timeline;
+  };
+  var disappearMain = function disappearMain(props, timeline) {
     var modal = props.modal,
       backdrop = props.backdrop;
     var hideHeight = getHideHeight(props);
@@ -55258,13 +55312,24 @@ var SLIDE_BASE_FADE_IN_ANIMATION = function SLIDE_BASE_FADE_IN_ANIMATION(getHide
       opacity: 0,
       duration: 0.2,
       ease: 'power2.in'
-    }, '<').set(modal, {
+    }, '<');
+    return timeline;
+  };
+  var disappearEnd = function disappearEnd(props, timeline) {
+    var modal = props.modal,
+      backdrop = props.backdrop;
+    timeline.set(modal, {
       visibility: 'hidden'
     }).set(backdrop, {
       visibility: 'hidden'
     });
     return timeline;
   };
+  var disappear = function disappear(props, timeline) {
+    disappearMain(props, timeline);
+    disappearEnd(props, timeline);
+    return timeline;
+  };
   var getInitStyle = function getInitStyle() {
     return {
       visibility: 'hidden',
@@ -55281,15 +55346,18 @@ var SLIDE_BASE_FADE_IN_ANIMATION = function SLIDE_BASE_FADE_IN_ANIMATION(getHide
     appear: appear,
     disappear: disappear,
     getInitStyle: getInitStyle,
-    getBackdropInitStyle: getBackdropInitStyle
+    getBackdropInitStyle: getBackdropInitStyle,
+    appearStart: appearStart,
+    appearMain: appearMain,
+    disappearEnd: disappearEnd,
+    disappearMain: disappearMain
   };
 };
 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 modalSize = props.modalSize;
     var windowHeight = typeof window !== 'undefined' ? window.innerHeight : WINDOW_SIZE_DEFAULT;
-    return windowHeight - predictPos[1];
+    return windowHeight + modalSize[1];
   };
   return SLIDE_BASE_FADE_IN_ANIMATION(getHideHeight);
 };
@@ -55302,14 +55370,19 @@ var SLIDE_DOWN_FADE_IN_ANIMATION = function SLIDE_DOWN_FADE_IN_ANIMATION() {
   return SLIDE_BASE_FADE_IN_ANIMATION(getHideHeight);
 };
 var FADE_IN_ANIMATION = function FADE_IN_ANIMATION() {
-  var appear = function appear(props, timeline, options) {
-    var _options$zIndex5, _options$zIndex6;
+  var appearStart = function appearStart(props, timeline) {
+    var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
     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;
+    var _options$zIndex3 = options.zIndex,
+      zIndex = _options$zIndex3 === void 0 ? {} : _options$zIndex3,
+      _options$backdropColo3 = options.backdropColor,
+      backdropColor = _options$backdropColo3 === void 0 ? BACKDROP_BACKGROUND_COLOR : _options$backdropColo3;
+    var _zIndex$modal3 = zIndex.modal,
+      modalZIndex = _zIndex$modal3 === void 0 ? Z_INDEX_MODAL_DEFAULT : _zIndex$modal3,
+      _zIndex$backdrop3 = zIndex.backdrop,
+      backdropZIndex = _zIndex$backdrop3 === void 0 ? Z_INDEX_BACKDROP_DEFAULT : _zIndex$backdrop3;
     timeline.set(modal, {
       visibility: 'visible',
       left: predictPos[0],
@@ -55321,7 +55394,13 @@ var FADE_IN_ANIMATION = function FADE_IN_ANIMATION() {
       backgroundColor: backdropColor,
       opacity: 0,
       zIndex: backdropZIndex
-    }).to(modal, {
+    });
+    return timeline;
+  };
+  var appearMain = function appearMain(props, timeline) {
+    var modal = props.modal,
+      backdrop = props.backdrop;
+    timeline.to(modal, {
       opacity: 1,
       duration: 0.25,
       ease: 'power2.out'
@@ -55334,7 +55413,12 @@ var FADE_IN_ANIMATION = function FADE_IN_ANIMATION() {
     });
     return timeline;
   };
-  var disappear = function disappear(props, timeline) {
+  var appear = function appear(props, timeline, options) {
+    appearStart(props, timeline, options);
+    appearMain(props, timeline);
+    return timeline;
+  };
+  var disappearMain = function disappearMain(props, timeline) {
     var modal = props.modal,
       backdrop = props.backdrop;
     timeline.to(modal, {
@@ -55345,13 +55429,24 @@ var FADE_IN_ANIMATION = function FADE_IN_ANIMATION() {
       opacity: 0,
       duration: 0.2,
       ease: 'power2.in'
-    }, '<').set(modal, {
+    }, '<');
+    return timeline;
+  };
+  var disappearEnd = function disappearEnd(props, timeline) {
+    var modal = props.modal,
+      backdrop = props.backdrop;
+    timeline.set(modal, {
       visibility: 'hidden'
     }).set(backdrop, {
       visibility: 'hidden'
     });
     return timeline;
   };
+  var disappear = function disappear(props, timeline) {
+    disappearMain(props, timeline);
+    disappearEnd(props, timeline);
+    return timeline;
+  };
   var getInitStyle = function getInitStyle() {
     return {
       visibility: 'hidden',
@@ -55368,7 +55463,11 @@ var FADE_IN_ANIMATION = function FADE_IN_ANIMATION() {
     appear: appear,
     disappear: disappear,
     getInitStyle: getInitStyle,
-    getBackdropInitStyle: getBackdropInitStyle
+    getBackdropInitStyle: getBackdropInitStyle,
+    appearStart: appearStart,
+    appearMain: appearMain,
+    disappearEnd: disappearEnd,
+    disappearMain: disappearMain
   };
 };
 var BACKDROP_MODAL_ANIMATIONS = function BACKDROP_MODAL_ANIMATIONS() {
@@ -55382,6 +55481,59 @@ var BACKDROP_MODAL_ANIMATIONS = function BACKDROP_MODAL_ANIMATIONS() {
 
 /***/ }),
 
+/***/ "./src/hooks/ui-animations/assets/collapsibleAnimations.ts":
+/*!*****************************************************************!*\
+  !*** ./src/hooks/ui-animations/assets/collapsibleAnimations.ts ***!
+  \*****************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   COLLAPSIBLE_ANIM: () => (/* binding */ COLLAPSIBLE_ANIM)
+/* harmony export */ });
+function COLLAPSIBLE_ANIM() {
+  var appear = function appear() {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    var obj = args[0],
+      timeline = args[1],
+      height = args[2];
+    timeline.clear().set(obj, {
+      visibility: 'visible'
+    }).to(obj, {
+      height: height,
+      duration: 0.3,
+      ease: "power2.out"
+    }).set(obj, {
+      transform: 'none'
+    });
+    return timeline;
+  };
+  var disappear = function disappear() {
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+    var obj = args[0],
+      timeline = args[1];
+    timeline.clear().to(obj, {
+      height: 0,
+      duration: 0.2,
+      ease: "power2.in"
+    }).set(obj, {
+      visibility: 'hidden'
+    });
+    return timeline;
+  };
+  return {
+    appear: appear,
+    disappear: disappear
+  };
+}
+
+/***/ }),
+
 /***/ "./src/hooks/ui-animations/assets/index.ts":
 /*!*************************************************!*\
   !*** ./src/hooks/ui-animations/assets/index.ts ***!
@@ -55392,6 +55544,7 @@ var BACKDROP_MODAL_ANIMATIONS = function BACKDROP_MODAL_ANIMATIONS() {
 __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 */   COLLAPSIBLE_ANIM: () => (/* reexport safe */ _collapsibleAnimations__WEBPACK_IMPORTED_MODULE_4__.COLLAPSIBLE_ANIM),
 /* 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)
@@ -55400,6 +55553,8 @@ __webpack_require__.r(__webpack_exports__);
 /* 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");
+/* harmony import */ var _collapsibleAnimations__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./collapsibleAnimations */ "./src/hooks/ui-animations/assets/collapsibleAnimations.ts");
+
 
 
 
@@ -55673,6 +55828,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   MOVING_ANIMATIONS: () => (/* binding */ MOVING_ANIMATIONS)
 /* harmony export */ });
+var MOVING_DURATION = 0.05;
 var DEFAULT_ANIMATION = function DEFAULT_ANIMATION() {
   for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
     args[_key] = arguments[_key];
@@ -55680,13 +55836,15 @@ var DEFAULT_ANIMATION = function DEFAULT_ANIMATION() {
   var element = args[0],
     timeline = args[1],
     options = args[2];
-  var place = options.place;
+  var place = options.place,
+    _options$duration = options.duration,
+    duration = _options$duration === void 0 ? MOVING_DURATION : _options$duration;
   var left = place.left,
     top = place.top;
-  timeline.clear().to(element, {
+  timeline.to(element, {
     top: top,
     left: left,
-    duration: 0.1,
+    duration: duration,
     ease: "power1.out"
   });
   return timeline;
@@ -55836,14 +55994,17 @@ function useTimeline() {
 __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 */   useCollapsible: () => (/* reexport safe */ _useCollapsible__WEBPACK_IMPORTED_MODULE_3__.useCollapsible),
 /* harmony export */   useModalAnim: () => (/* reexport safe */ _useModalAnim__WEBPACK_IMPORTED_MODULE_0__.useModalAnim),
 /* harmony export */   useShimmer: () => (/* reexport safe */ _useShimmer__WEBPACK_IMPORTED_MODULE_2__.useShimmer),
-/* harmony export */   useTimeline: () => (/* reexport safe */ _helpers__WEBPACK_IMPORTED_MODULE_3__.useTimeline)
+/* harmony export */   useTimeline: () => (/* reexport safe */ _helpers__WEBPACK_IMPORTED_MODULE_4__.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");
+/* harmony import */ var _useCollapsible__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./useCollapsible */ "./src/hooks/ui-animations/useCollapsible.ts");
+/* harmony import */ var _helpers__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./helpers */ "./src/hooks/ui-animations/helpers.ts");
+
 
 
 
@@ -56007,11 +56168,27 @@ function useBackgroundModalAnim() {
     var _getObjData2 = getObjData(),
       predictPlace = _getObjData2.predictPlace;
     var timeline = getTimeline();
-    var additionTimeline = initAdditionTimeline();
+    var additionTimeline = getAdditionTimeline(0);
+    var secondaryAdditionTimeline = getAdditionTimeline(1);
     var newPlace = predictPlace;
     var obj = ref.current;
     if (obj) {
-      if (timeline.progress() === 1) {
+      if (timeline.isActive()) {
+        additionTimeline.clear();
+        (0,_assets__WEBPACK_IMPORTED_MODULE_1__.MOVING_ANIMATIONS)()["default"](obj, additionTimeline, {
+          place: {
+            left: newPlace[0]
+          }
+        }).play();
+        secondaryAdditionTimeline.clear();
+        (0,_assets__WEBPACK_IMPORTED_MODULE_1__.MOVING_ANIMATIONS)()["default"](obj, secondaryAdditionTimeline, {
+          place: {
+            top: newPlace[1]
+          }
+        });
+        timeline.add(secondaryAdditionTimeline.play());
+      } else {
+        additionTimeline.clear();
         (0,_assets__WEBPACK_IMPORTED_MODULE_1__.MOVING_ANIMATIONS)()["default"](obj, additionTimeline, {
           place: {
             left: newPlace[0],
@@ -56044,10 +56221,7 @@ function useBackgroundModalAnim() {
       var props = getAnimationProps();
       if (props) {
         timeline.clear();
-        (0,_assets__WEBPACK_IMPORTED_MODULE_1__.BACKDROP_MODAL_ANIMATIONS)()[animeType].disappear(props, timeline, {
-          zIndex: zIndex,
-          backdropColor: backdropColor
-        }).play();
+        (0,_assets__WEBPACK_IMPORTED_MODULE_1__.BACKDROP_MODAL_ANIMATIONS)()[animeType].disappear(props, timeline).play();
       }
     }
   }
@@ -56103,6 +56277,128 @@ function useBackgroundModalAnim() {
 
 /***/ }),
 
+/***/ "./src/hooks/ui-animations/useCollapsible.ts":
+/*!***************************************************!*\
+  !*** ./src/hooks/ui-animations/useCollapsible.ts ***!
+  \***************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   useCollapsible: () => (/* binding */ useCollapsible)
+/* 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");
+/* 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 _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 useCollapsible() {
+  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 _options$initState = options.initState,
+    initState = _options$initState === void 0 ? 'hide' : _options$initState;
+  var _useIsOpen = useIsOpen(),
+    getIsOpen = _useIsOpen.getIsOpen,
+    setOpen = _useIsOpen.setOpen,
+    setHide = _useIsOpen.setHide;
+  var _useTimeline = (0,_helpers__WEBPACK_IMPORTED_MODULE_3__.useTimeline)(),
+    getTimeline = _useTimeline.getTimeline;
+  var _useSimpleRefElementW = (0,_hooks__WEBPACK_IMPORTED_MODULE_1__.useSimpleRefElementWork)(ref),
+    _useSimpleRefElementW2 = _slicedToArray(_useSimpleRefElementW, 1),
+    getParent = _useSimpleRefElementW2[0];
+  var getRealObjHeight = function getRealObjHeight() {
+    var parent = getParent();
+    if (parent) {
+      return parent.scrollHeight;
+    }
+    return 0;
+  };
+  var open = function open() {
+    var parent = getParent();
+    if (!parent) return;
+    var timeline = getTimeline();
+    (0,_assets__WEBPACK_IMPORTED_MODULE_2__.COLLAPSIBLE_ANIM)().appear(parent, timeline, getRealObjHeight()).play();
+    setOpen();
+  };
+  var hide = function hide() {
+    var parent = getParent();
+    if (!parent) return;
+    var timeline = getTimeline();
+    (0,_assets__WEBPACK_IMPORTED_MODULE_2__.COLLAPSIBLE_ANIM)().disappear(parent, timeline, 0).play();
+    setHide();
+  };
+  var toggle = function toggle() {
+    if (!getIsOpen()) {
+      open();
+    } else {
+      hide();
+    }
+  };
+  var getInitStyle = function getInitStyle() {
+    var isHidden = initState === 'hide';
+    var height = isHidden ? 0 : getRealObjHeight();
+    var visibility = isHidden ? 'hidden' : 'visible';
+    return {
+      height: height,
+      visibility: visibility,
+      overflow: 'hidden'
+    };
+  };
+  var initStyle = function initStyle() {
+    var parent = getParent();
+    if (!parent) return;
+    if (initState === 'open') {
+      setOpen();
+    } else {
+      setHide();
+    }
+    Object.assign(parent.style, getInitStyle());
+  };
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
+    initStyle();
+  }, []);
+  return {
+    open: open,
+    hide: hide,
+    toggle: toggle,
+    getInitStyle: getInitStyle
+  };
+}
+function useIsOpen() {
+  var isOpenRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(false);
+  var setOpen = function setOpen() {
+    return isOpenRef.current = true;
+  };
+  var setHide = function setHide() {
+    return isOpenRef.current = false;
+  };
+  var getIsOpen = function getIsOpen() {
+    return isOpenRef.current;
+  };
+  return {
+    setHide: setHide,
+    setOpen: setOpen,
+    getIsOpen: getIsOpen
+  };
+}
+
+/***/ }),
+
 /***/ "./src/hooks/ui-animations/useModalAnim.ts":
 /*!*************************************************!*\
   !*** ./src/hooks/ui-animations/useModalAnim.ts ***!
@@ -56277,11 +56573,9 @@ function useModalAnim() {
     var newPlace = smartPlacementServices.calc();
     var obj = ref.current;
     if (obj) {
-      if (timeline.progress() === 1) {
-        (0,_assets__WEBPACK_IMPORTED_MODULE_2__.MOVING_ANIMATIONS)()["default"](obj, additionTimeline, {
-          place: newPlace
-        }).play();
-      }
+      (0,_assets__WEBPACK_IMPORTED_MODULE_2__.MOVING_ANIMATIONS)()["default"](obj, additionTimeline, {
+        place: newPlace
+      }).play();
     }
   }
   function appearanceAnim() {
@@ -72159,6 +72453,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   uniqueByKey: () => (/* reexport safe */ _lib__WEBPACK_IMPORTED_MODULE_4__.uniqueByKey),
 /* harmony export */   useBackdropModal: () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_2__.useBackdropModal),
 /* harmony export */   useBackgroundModalAnim: () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_2__.useBackgroundModalAnim),
+/* harmony export */   useCollapsible: () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_2__.useCollapsible),
 /* harmony export */   useControlInput: () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_2__.useControlInput),
 /* harmony export */   useDebouncedAccumulator: () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_2__.useDebouncedAccumulator),
 /* harmony export */   useDebouncedInvoker: () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_2__.useDebouncedInvoker),