indicator-ui 0.1.37 → 0.1.38

package/dist/index.js

@@ -54287,10 +54287,10 @@ __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 _useInteractiveZone__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../useInteractiveZone */ "./src/hooks/useInteractiveZone.ts");
-/* harmony import */ var _useSyncedStateRef__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../useSyncedStateRef */ "./src/hooks/useSyncedStateRef.ts");
-/* harmony import */ var _ui_animations__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../ui-animations */ "./src/hooks/ui-animations/index.ts");
-/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @/hooks */ "./src/hooks/index.ts");
+/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @/hooks */ "./src/hooks/index.ts");
+/* harmony import */ var _useInteractiveZone__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../useInteractiveZone */ "./src/hooks/useInteractiveZone.ts");
+/* harmony import */ var _useSyncedStateRef__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../useSyncedStateRef */ "./src/hooks/useSyncedStateRef.ts");
+/* harmony import */ var _ui_animations__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../ui-animations */ "./src/hooks/ui-animations/index.ts");
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var _excluded = ["containerClickAreaRef"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -54340,7 +54340,7 @@ function useBackdropModal() {
   var containerClickAreaRef = options.containerClickAreaRef,
     animeOptions = _objectWithoutProperties(options, _excluded);
   var targetRef = animeOptions.targetRef;
-  var _useSyncedStateRef = (0,_useSyncedStateRef__WEBPACK_IMPORTED_MODULE_2__.useSyncedStateRef)(false),
+  var _useSyncedStateRef = (0,_useSyncedStateRef__WEBPACK_IMPORTED_MODULE_3__.useSyncedStateRef)(false),
     _useSyncedStateRef2 = _slicedToArray(_useSyncedStateRef, 3),
     isShow = _useSyncedStateRef2[0],
     setIsShow = _useSyncedStateRef2[1],
@@ -54348,7 +54348,7 @@ function useBackdropModal() {
   var onHiding = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function () {
     setIsShow(false);
   }, []);
-  var _useBackgroundModalAn = (0,_ui_animations__WEBPACK_IMPORTED_MODULE_3__.useBackgroundModalAnim)(ref, _objectSpread(_objectSpread({}, animeOptions), {}, {
+  var _useBackgroundModalAn = (0,_ui_animations__WEBPACK_IMPORTED_MODULE_4__.useBackgroundModalAnim)(ref, _objectSpread(_objectSpread({}, animeOptions), {}, {
       onHiding: onHiding
     })),
     appearanceAnim = _useBackgroundModalAn.appearanceAnim,
@@ -54356,11 +54356,11 @@ function useBackdropModal() {
     reinit = _useBackgroundModalAn.reinit,
     updateModalPlacement = _useBackgroundModalAn.updateModalPlacement,
     getInitStyle = _useBackgroundModalAn.getInitStyle;
-  (0,_useInteractiveZone__WEBPACK_IMPORTED_MODULE_1__.useInteractiveZone)(containerClickAreaRef || ref, {
+  (0,_useInteractiveZone__WEBPACK_IMPORTED_MODULE_2__.useInteractiveZone)(containerClickAreaRef || ref, {
     onMissClick: onMissClick
   });
-  (0,_hooks__WEBPACK_IMPORTED_MODULE_4__.useResizeWindowObserver)(updateModalPlacement);
-  var resizeObserverService = (0,_hooks__WEBPACK_IMPORTED_MODULE_4__.useResizeObserver)([ref, targetRef, containerClickAreaRef], updateModalPlacement);
+  (0,_hooks__WEBPACK_IMPORTED_MODULE_1__.useResizeWindowObserver)(updateModalPlacement);
+  var resizeObserverService = (0,_hooks__WEBPACK_IMPORTED_MODULE_1__.useResizeObserver)([ref, targetRef, containerClickAreaRef], updateModalPlacement);
   var open = function open() {
     setIsShow(true);
     requestAnimationFrame(function () {
@@ -54407,10 +54407,10 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   useModal: () => (/* binding */ useModal)
 /* harmony export */ });
-/* harmony import */ var _useInteractiveZone__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../useInteractiveZone */ "./src/hooks/useInteractiveZone.ts");
-/* harmony import */ var _useSyncedStateRef__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../useSyncedStateRef */ "./src/hooks/useSyncedStateRef.ts");
-/* harmony import */ var _ui_animations__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../ui-animations */ "./src/hooks/ui-animations/index.ts");
-/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @/hooks */ "./src/hooks/index.ts");
+/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @/hooks */ "./src/hooks/index.ts");
+/* harmony import */ var _useInteractiveZone__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../useInteractiveZone */ "./src/hooks/useInteractiveZone.ts");
+/* harmony import */ var _useSyncedStateRef__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../useSyncedStateRef */ "./src/hooks/useSyncedStateRef.ts");
+/* harmony import */ var _ui_animations__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../ui-animations */ "./src/hooks/ui-animations/index.ts");
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var _excluded = ["addition"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -54461,7 +54461,7 @@ function useModal() {
   var addition = options.addition,
     animeOptions = _objectWithoutProperties(options, _excluded);
   var targetRef = options.targetRef;
-  var _useSyncedStateRef = (0,_useSyncedStateRef__WEBPACK_IMPORTED_MODULE_1__.useSyncedStateRef)(false),
+  var _useSyncedStateRef = (0,_useSyncedStateRef__WEBPACK_IMPORTED_MODULE_2__.useSyncedStateRef)(false),
     _useSyncedStateRef2 = _slicedToArray(_useSyncedStateRef, 3),
     isShow = _useSyncedStateRef2[0],
     setIsShow = _useSyncedStateRef2[1],
@@ -54471,7 +54471,7 @@ function useModal() {
     setIsShow(false);
     animeOptions === null || animeOptions === void 0 || (_animeOptions$onHidin = animeOptions.onHiding) === null || _animeOptions$onHidin === void 0 || _animeOptions$onHidin.call(animeOptions);
   };
-  var _useModalAnim = (0,_ui_animations__WEBPACK_IMPORTED_MODULE_2__.useModalAnim)(ref, _objectSpread(_objectSpread({}, animeOptions), {}, {
+  var _useModalAnim = (0,_ui_animations__WEBPACK_IMPORTED_MODULE_3__.useModalAnim)(ref, _objectSpread(_objectSpread({}, animeOptions), {}, {
       onHiding: onHiding
     })),
     appearanceAnim = _useModalAnim.appearanceAnim,
@@ -54479,15 +54479,15 @@ function useModal() {
     reinit = _useModalAnim.reinit,
     updateModalPlacement = _useModalAnim.updateModalPlacement,
     getInitStyle = _useModalAnim.getInitStyle;
-  (0,_useInteractiveZone__WEBPACK_IMPORTED_MODULE_0__.useInteractiveZone)(ref, {
+  (0,_useInteractiveZone__WEBPACK_IMPORTED_MODULE_1__.useInteractiveZone)(ref, {
     onMissClick: onMissClick
   }, {
-    ignore: [(targetRef === null || targetRef === void 0 ? void 0 : targetRef.current) || null],
+    ignore: [targetRef],
     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);
+  (0,_hooks__WEBPACK_IMPORTED_MODULE_0__.useResizeWindowObserver)(updateModalPlacement);
+  var intersectionObserverService = (0,_hooks__WEBPACK_IMPORTED_MODULE_0__.useIntersectionObserver)([ref, targetRef], updateModalPlacement);
+  var resizeObserverService = (0,_hooks__WEBPACK_IMPORTED_MODULE_0__.useResizeObserver)([ref, targetRef], updateModalPlacement);
   var open = function open() {
     setIsShow(true);
     requestAnimationFrame(function () {
@@ -54889,12 +54889,20 @@ __webpack_require__.r(__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");
+/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @/hooks */ "./src/hooks/index.ts");
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 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 DEFAULT_OFFSET_FROM_PARENT__PX = 4;
 var DEFAULT_WEIGHTS = [[0.5, 1.5, 0.5], [1, 0, 1], [0.5, 1.6, 0.5]];
@@ -54929,8 +54937,17 @@ function useSmartPlacementResolver() {
     weights = _options$weights === void 0 ? DEFAULT_WEIGHTS : _options$weights,
     _options$position = options.position,
     position = _options$position === void 0 ? 'fixed' : _options$position;
+  var _useSimpleRefElementW = (0,_hooks__WEBPACK_IMPORTED_MODULE_1__.useSimpleRefElementWork)(ref),
+    _useSimpleRefElementW2 = _slicedToArray(_useSimpleRefElementW, 1),
+    getObj = _useSimpleRefElementW2[0];
+  var _useSimpleRefElementW3 = (0,_hooks__WEBPACK_IMPORTED_MODULE_1__.useSimpleRefElementWork)(parentRef),
+    _useSimpleRefElementW4 = _slicedToArray(_useSimpleRefElementW3, 1),
+    getParent = _useSimpleRefElementW4[0];
+  var _useSimpleRefElementW5 = (0,_hooks__WEBPACK_IMPORTED_MODULE_1__.useSimpleRefElementWork)(windowRef),
+    _useSimpleRefElementW6 = _slicedToArray(_useSimpleRefElementW5, 1),
+    getWindow = _useSimpleRefElementW6[0];
   var getSizeOfObj = function getSizeOfObj() {
-    var obj = ref.current;
+    var obj = getObj();
     if (obj) {
       return {
         width: obj.offsetWidth,
@@ -54943,7 +54960,7 @@ function useSmartPlacementResolver() {
     };
   };
   var getPosOfObj = function getPosOfObj() {
-    var obj = ref.current;
+    var obj = getObj();
     if (obj) {
       var rect = obj.getBoundingClientRect();
       return {
@@ -54957,7 +54974,7 @@ function useSmartPlacementResolver() {
     };
   };
   var getSizeOfParent = function getSizeOfParent() {
-    var parent = parentRef === null || parentRef === void 0 ? void 0 : parentRef.current;
+    var parent = getParent();
     if (parent) {
       return {
         width: parent.offsetWidth,
@@ -54970,7 +54987,7 @@ function useSmartPlacementResolver() {
     };
   };
   var getPosOfParent = function getPosOfParent() {
-    var parent = parentRef === null || parentRef === void 0 ? void 0 : parentRef.current;
+    var parent = getParent();
     if (parent) {
       var rect = parent.getBoundingClientRect();
       return {
@@ -54981,7 +54998,7 @@ function useSmartPlacementResolver() {
     return getPosOfObj();
   };
   var getSizeOfWindow = function getSizeOfWindow() {
-    var windowObj = windowRef === null || windowRef === void 0 ? void 0 : windowRef.current;
+    var windowObj = getWindow();
     if (windowObj) {
       return {
         width: windowObj.offsetWidth,
@@ -55001,7 +55018,7 @@ function useSmartPlacementResolver() {
   };
   var getPosOfWindow = function getPosOfWindow() {
     if (windowRef) {
-      var _window = windowRef.current;
+      var _window = getWindow();
       var rect = _window === null || _window === void 0 ? void 0 : _window.getBoundingClientRect();
       return {
         top: (rect === null || rect === void 0 ? void 0 : rect.x) || 0,
@@ -55030,11 +55047,13 @@ function useSmartPlacementResolver() {
     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;
+    var obj = getObj();
+    if (obj) {
+      obj.style.position = position;
     }
-    if (position === 'absolute' && parentRef !== null && parentRef !== void 0 && parentRef.current) {
-      parentRef.current.style.position = 'relative';
+    var parent = getParent();
+    if (position === 'absolute' && parent) {
+      parent.style.position = 'relative';
     }
   };
   var getInitStyle = function getInitStyle() {
@@ -56185,6 +56204,14 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _assets__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./assets */ "./src/hooks/ui-animations/assets/index.ts");
 /* harmony import */ var _helpers__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./helpers */ "./src/hooks/ui-animations/helpers.ts");
+/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @/hooks */ "./src/hooks/index.ts");
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+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; }
+
 
 
 
@@ -56219,6 +56246,12 @@ function useBackgroundModalAnim() {
     animeType = _options$animeType === void 0 ? 'fade-in-scale-up' : _options$animeType,
     zIndex = options.zIndex,
     backdropColor = options.backdropColor;
+  var _useSimpleRefElementW = (0,_hooks__WEBPACK_IMPORTED_MODULE_3__.useSimpleRefElementWork)(ref),
+    _useSimpleRefElementW2 = _slicedToArray(_useSimpleRefElementW, 1),
+    getObj = _useSimpleRefElementW2[0];
+  var _useSimpleRefElementW3 = (0,_hooks__WEBPACK_IMPORTED_MODULE_3__.useSimpleRefElementWork)(targetRef),
+    _useSimpleRefElementW4 = _slicedToArray(_useSimpleRefElementW3, 1),
+    getTarget = _useSimpleRefElementW4[0];
   var backdropRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
   (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
     init();
@@ -56232,7 +56265,7 @@ function useBackgroundModalAnim() {
     removeBackdropObj();
   };
   var calcPredictPlace = function calcPredictPlace() {
-    var obj = ref.current;
+    var obj = getObj();
     if (obj) {
       var top = window.innerHeight / 2 - obj.offsetHeight / 2;
       var left = window.innerWidth / 2 - obj.offsetWidth / 2;
@@ -56241,8 +56274,8 @@ function useBackgroundModalAnim() {
     return [0, 0];
   };
   var getObjData = function getObjData() {
-    var target = targetRef === null || targetRef === void 0 ? void 0 : targetRef.current;
-    var obj = ref.current;
+    var target = getTarget();
+    var obj = getObj();
     var targetPos = [0, 0]; // [x, y]
     var targetCenter = [0, 0]; // [x, y]
     var targetSize = [0, 0]; // [w, h]
@@ -56289,8 +56322,8 @@ function useBackgroundModalAnim() {
       targetSize = _getObjData.targetSize,
       objSize = _getObjData.objSize,
       targetPos = _getObjData.targetPos;
-    var target = targetRef === null || targetRef === void 0 ? void 0 : targetRef.current;
-    var modal = ref.current;
+    var target = getTarget();
+    var modal = getObj();
     var backdrop = backdropRef.current;
     if (modal && backdrop) {
       return {
@@ -56318,7 +56351,7 @@ function useBackgroundModalAnim() {
       predictPlace = _getObjData2.predictPlace;
     var additionTimeline = getAdditionTimeline();
     var newPlace = predictPlace;
-    var obj = ref.current;
+    var obj = getObj();
     if (obj) {
       additionTimeline.clear();
       (0,_assets__WEBPACK_IMPORTED_MODULE_1__.MOVING_ANIMATIONS)()["default"](obj, additionTimeline, {
@@ -56364,13 +56397,13 @@ function useBackgroundModalAnim() {
     return (0,_assets__WEBPACK_IMPORTED_MODULE_1__.BACKDROP_MODAL_ANIMATIONS)()[animeType].getInitStyle();
   }
   function setInitStyle() {
-    var obj = ref.current;
+    var obj = getObj();
     if (obj) {
       Object.assign(obj.style, getInitStyle());
     }
   }
   function initBackdropObj() {
-    var _ref$current;
+    var _getObj;
     if (backdropRef.current) backdropRef.current.remove();
     var backdrop = document.createElement('div');
     backdrop.style.width = '100vw';
@@ -56382,14 +56415,14 @@ function useBackgroundModalAnim() {
     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);
+    (_getObj = getObj()) === null || _getObj === void 0 || (_getObj = _getObj.parentElement) === null || _getObj === void 0 || _getObj.appendChild(backdrop);
     backdropRef.current = backdrop;
   }
   function removeBackdropObj() {
     if (backdropRef.current) backdropRef.current.remove();
   }
   function setHiddeState() {
-    var obj = ref.current;
+    var obj = getObj();
     var backdrop = backdropRef.current;
     if (obj) {
       obj.style.visibility = 'hidden';
@@ -56603,12 +56636,20 @@ __webpack_require__.r(__webpack_exports__);
 /* 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");
+/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @/hooks */ "./src/hooks/index.ts");
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 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; }
+
 
 
 
@@ -56652,6 +56693,12 @@ function useModalAnim() {
     zIndex = options.zIndex,
     backdropColor = options.backdropColor;
   var backdropRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
+  var _useSimpleRefElementW = (0,_hooks__WEBPACK_IMPORTED_MODULE_4__.useSimpleRefElementWork)(ref),
+    _useSimpleRefElementW2 = _slicedToArray(_useSimpleRefElementW, 1),
+    getObj = _useSimpleRefElementW2[0];
+  var _useSimpleRefElementW3 = (0,_hooks__WEBPACK_IMPORTED_MODULE_4__.useSimpleRefElementWork)(targetRef),
+    _useSimpleRefElementW4 = _slicedToArray(_useSimpleRefElementW3, 1),
+    getTarget = _useSimpleRefElementW4[0];
   var smartPlacementServices = (0,_placement_useSmartPlacementResolver__WEBPACK_IMPORTED_MODULE_1__.useSmartPlacementResolver)(ref, _objectSpread({
     parentRef: targetRef,
     position: position,
@@ -56670,8 +56717,8 @@ function useModalAnim() {
     removeBackdropObj();
   };
   var getObjData = function getObjData() {
-    var target = targetRef === null || targetRef === void 0 ? void 0 : targetRef.current;
-    var obj = ref.current;
+    var target = getTarget();
+    var obj = getObj();
     var targetPos = [0, 0]; // [x, y]
     var targetCenter = [0, 0]; // [x, y]
     var targetSize = [0, 0]; // [w, h]
@@ -56730,8 +56777,8 @@ function useModalAnim() {
       targetSize = _getObjData.targetSize,
       objSize = _getObjData.objSize,
       targetPos = _getObjData.targetPos;
-    var target = (targetRef === null || targetRef === void 0 ? void 0 : targetRef.current) || ref.current;
-    var modal = ref.current;
+    var target = getTarget() || getObj();
+    var modal = getObj();
     var backdrop = backdropRef.current;
     if (modal && backdrop && target) {
       return {
@@ -56758,7 +56805,7 @@ function useModalAnim() {
   function updateModalPlacement() {
     var additionTimeline = initAdditionTimeline();
     var newPlace = smartPlacementServices.calc();
-    var obj = ref.current;
+    var obj = getObj();
     if (obj) {
       (0,_assets__WEBPACK_IMPORTED_MODULE_2__.MOVING_ANIMATIONS)()["default"](obj, additionTimeline, {
         place: newPlace
@@ -56811,13 +56858,13 @@ function useModalAnim() {
     return (0,_assets__WEBPACK_IMPORTED_MODULE_2__.MODAL_ANIMATIONS)()[animeType].getInitStyle(props);
   }
   function setInitStyle() {
-    var obj = ref.current;
+    var obj = getObj();
     if (obj) {
       Object.assign(obj.style, getInitStyle());
     }
   }
   function initBackdropObj() {
-    var _ref$current;
+    var _getObj;
     if (backdropRef.current) backdropRef.current.remove();
     var backdrop = document.createElement('div');
     backdrop.style.position = 'fixed';
@@ -56827,14 +56874,14 @@ function useModalAnim() {
     backdrop.style.left = '0';
     backdrop.style.visibility = 'hidden';
     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);
+    (_getObj = getObj()) === null || _getObj === void 0 || (_getObj = _getObj.parentElement) === null || _getObj === void 0 || _getObj.appendChild(backdrop);
     backdropRef.current = backdrop;
   }
   function removeBackdropObj() {
     if (backdropRef.current) backdropRef.current.remove();
   }
   function setHiddeState() {
-    var obj = ref.current;
+    var obj = getObj();
     var backdrop = backdropRef.current;
     if (obj) {
       obj.style.visibility = 'hidden';
@@ -57393,6 +57440,14 @@ __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 _hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @/hooks */ "./src/hooks/index.ts");
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+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; }
+
 
 /**
  * Хук позволяет отслеживать клики по контейнеру и вне его.
@@ -57408,19 +57463,26 @@ function useInteractiveZone() {
     options = _args$2 === void 0 ? {} : _args$2;
   var onMissClick = callbacks.onMissClick,
     onInnerClick = callbacks.onInnerClick;
+  var _useSimpleRefElementW = (0,_hooks__WEBPACK_IMPORTED_MODULE_1__.useSimpleRefElementWork)(ref),
+    _useSimpleRefElementW2 = _slicedToArray(_useSimpleRefElementW, 1),
+    getObj = _useSimpleRefElementW2[0];
   var _options$ignore = options.ignore,
     ignore = _options$ignore === void 0 ? [] : _options$ignore,
     _options$addition = options.addition,
     addition = _options$addition === void 0 ? [] : _options$addition;
+  var _useSimpleRefListElem = (0,_hooks__WEBPACK_IMPORTED_MODULE_1__.useSimpleRefListElementWork)(ignore),
+    _useSimpleRefListElem2 = _slicedToArray(_useSimpleRefListElem, 1),
+    getObjects = _useSimpleRefListElem2[0];
   (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
     function handleClick(event) {
       var target = event.target;
-      if (!ref.current) return;
-      var isClickInTarget = ref.current.contains(target);
+      var obj = getObj();
+      if (!obj) return;
+      var isClickInTarget = obj.contains(target);
       var isClickInAddition = addition.find(function (item) {
         return !!(item !== null && item !== void 0 && item.contains(target));
       }) !== undefined;
-      var isClickInIgnored = ignore.find(function (item) {
+      var isClickInIgnored = getObjects().find(function (item) {
         return !!(item !== null && item !== void 0 && item.contains(target));
       }) !== undefined;
       if (isClickInTarget || isClickInAddition) {
@@ -57882,6 +57944,14 @@ __webpack_require__.r(__webpack_exports__);
 /* 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");
+/* harmony import */ var _hooks_simpleRefWork__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @/hooks/simpleRefWork */ "./src/hooks/simpleRefWork.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; }
+
 
 
 
@@ -57899,6 +57969,9 @@ function useSmartPosition() {
   var onChangePlacement = callbacks.onChangePlacement,
     onInitPlacement = callbacks.onInitPlacement;
   var lastPlacement = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(undefined);
+  var _useSimpleRefElementW = (0,_hooks_simpleRefWork__WEBPACK_IMPORTED_MODULE_3__.useSimpleRefElementWork)(ref),
+    _useSimpleRefElementW2 = _slicedToArray(_useSimpleRefElementW, 1),
+    getObj = _useSimpleRefElementW2[0];
   var _useSmartPlacementRes = (0,_hooks_placement_useSmartPlacementResolver__WEBPACK_IMPORTED_MODULE_0__.useSmartPlacementResolver)(ref, options),
     init = _useSmartPlacementRes.init,
     calc = _useSmartPlacementRes.calc;
@@ -57917,7 +57990,7 @@ function useSmartPosition() {
     return clearListeners;
   }, []);
   var setPos = function setPos(pos) {
-    var obj = ref.current;
+    var obj = getObj();
     if (obj) {
       obj.style.top = pos.top + 'px';
       obj.style.left = pos.left + 'px';
@@ -68848,7 +68921,8 @@ var MediaViewer = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)
     mediaIndex = props.mediaIndex,
     _props$nearestElement = props.nearestElementsOnly,
     nearestElementsOnly = _props$nearestElement === void 0 ? true : _props$nearestElement,
-    onClose = props.onClose;
+    onClose = props.onClose,
+    style = props.style;
   var _useState = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(mediaIndex || 0),
     _useState2 = _slicedToArray(_useState, 2),
     curMediaIndex = _useState2[0],
@@ -68926,6 +69000,7 @@ var MediaViewer = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)
   };
   return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
     className: _styles__WEBPACK_IMPORTED_MODULE_3__.MediaViewerStyle.MediaViewer,
+    style: style,
     children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_2__.Carousel, {
       activeIndex: curMediaIndex,
       setActiveIndex: setCurMediaIndex,