indicator-ui 0.0.166 → 0.0.168

package/dist/index.js

@@ -8561,7 +8561,7 @@ function DropdownItem({ size = 'small', selected = false, disabled = false, supp
             [_styles__WEBPACK_IMPORTED_MODULE_4__.DropdownItemStyle.widthHug]: width === 'hug',
             [_styles__WEBPACK_IMPORTED_MODULE_4__.DropdownItemStyle.small]: size === 'small',
             [_styles__WEBPACK_IMPORTED_MODULE_4__.DropdownItemStyle.medium]: size === 'medium',
-        }), children: [showIcon != null ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: _styles__WEBPACK_IMPORTED_MODULE_4__.DropdownItemStyle.showIcon, children: showIcon }) : undefined, user !== false ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_2__.UserPick, { url: user, size: '20' }) : undefined, (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: _styles__WEBPACK_IMPORTED_MODULE_4__.DropdownItemStyle.main, children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: _styles__WEBPACK_IMPORTED_MODULE_4__.DropdownItemStyle.text, children: text }), getSupportingText()] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: _styles__WEBPACK_IMPORTED_MODULE_4__.DropdownItemStyle.check, children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_assets__WEBPACK_IMPORTED_MODULE_3__.CheckSVG, {}) })] }));
+        }), children: [showIcon != null ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: _styles__WEBPACK_IMPORTED_MODULE_4__.DropdownItemStyle.showIcon, children: showIcon }) : undefined, user ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_2__.UserPick, { url: user, size: '20' }) : undefined, (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: _styles__WEBPACK_IMPORTED_MODULE_4__.DropdownItemStyle.main, children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: _styles__WEBPACK_IMPORTED_MODULE_4__.DropdownItemStyle.text, children: text }), getSupportingText()] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: _styles__WEBPACK_IMPORTED_MODULE_4__.DropdownItemStyle.check, children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_assets__WEBPACK_IMPORTED_MODULE_3__.CheckSVG, {}) })] }));
 }
 
 
@@ -11683,8 +11683,11 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   SlideTransition: () => (/* binding */ SlideTransition)
 /* harmony export */ });
 /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ "./node_modules/react/jsx-runtime.js");
-/* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! clsx */ "./node_modules/clsx/dist/clsx.mjs");
-/* harmony import */ var _styles__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../styles */ "./src/ui/SlideTransition/styles/index.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 clsx__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! clsx */ "./node_modules/clsx/dist/clsx.mjs");
+/* harmony import */ var _styles__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../styles */ "./src/ui/SlideTransition/styles/index.ts");
+
 
 
 
@@ -11692,6 +11695,8 @@ __webpack_require__.r(__webpack_exports__);
  * ##### Компонент для анимации прокрутки вверх и вниз.
  * Для контроля анимации используйте пропс ```animation```.
  *
+ * Важно: анимации `-down` пока еще не доработаны, поэтому работают также как и `-up`
+ *
  * ---
  * ```'enter-down'``` - производит анимацию появления снизу.
  *
@@ -11711,14 +11716,35 @@ __webpack_require__.r(__webpack_exports__);
  * При высокой (автор проводил тесты на 300ms) скорости анимации ощущается нормально (если вы не Флеш).
  * */
 function SlideTransition({ children, animation, className, additionStyles, style, }) {
-    return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { style: style, className: (0,clsx__WEBPACK_IMPORTED_MODULE_1__["default"])(_styles__WEBPACK_IMPORTED_MODULE_2__.SlideTransitionStyle.slideTransition, className, additionStyles, {
-            [_styles__WEBPACK_IMPORTED_MODULE_2__.SlideTransitionStyle.enterDown]: animation === 'enter-down',
-            [_styles__WEBPACK_IMPORTED_MODULE_2__.SlideTransitionStyle.exitDown]: animation === 'exit-down',
-            [_styles__WEBPACK_IMPORTED_MODULE_2__.SlideTransitionStyle.exitUp]: animation === 'exit-up',
-            [_styles__WEBPACK_IMPORTED_MODULE_2__.SlideTransitionStyle.enterUp]: animation === 'enter-up',
-            [_styles__WEBPACK_IMPORTED_MODULE_2__.SlideTransitionStyle.hide]: animation === 'hide',
-            [_styles__WEBPACK_IMPORTED_MODULE_2__.SlideTransitionStyle.show]: animation === 'show',
-        }), children: children }));
+    const wrapperRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
+    const contentRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
+    (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {
+        const contentClientHeight = contentRef.current?.clientHeight;
+        const isShowAnimation = animation === 'show' || animation === 'enter-up' || animation === 'enter-down';
+        if (contentClientHeight != null) {
+            wrapperRef.current.style.height = contentClientHeight + 'px';
+            if (!isShowAnimation) {
+                wrapperRef.current.style.overflow = 'hidden';
+            }
+        }
+        const handleAnimationEnd = () => {
+            if (wrapperRef.current && isShowAnimation) {
+                wrapperRef.current.style.overflow = '';
+            }
+        };
+        wrapperRef.current?.addEventListener('animationend', handleAnimationEnd);
+        return () => {
+            wrapperRef.current?.removeEventListener('animationend', handleAnimationEnd);
+        };
+    }, [animation]);
+    return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { ref: wrapperRef, className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_styles__WEBPACK_IMPORTED_MODULE_3__.SlideTransitionStyle.slideTransition, additionStyles, {
+            [_styles__WEBPACK_IMPORTED_MODULE_3__.SlideTransitionStyle.enterDown]: animation === 'enter-down',
+            [_styles__WEBPACK_IMPORTED_MODULE_3__.SlideTransitionStyle.exitDown]: animation === 'exit-down',
+            [_styles__WEBPACK_IMPORTED_MODULE_3__.SlideTransitionStyle.exitUp]: animation === 'exit-up',
+            [_styles__WEBPACK_IMPORTED_MODULE_3__.SlideTransitionStyle.enterUp]: animation === 'enter-up',
+            [_styles__WEBPACK_IMPORTED_MODULE_3__.SlideTransitionStyle.hide]: animation === 'hide',
+            [_styles__WEBPACK_IMPORTED_MODULE_3__.SlideTransitionStyle.show]: animation === 'show',
+        }), children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { ref: contentRef, style: style, className: className, children: children }) }));
 }