@sberbusiness/triplex-next 1.44.0 → 1.45.0

package/components/SwipeableArea/SwipeableArea.js

@@ -1,13 +1,14 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import React__default, { useState, useRef, useEffect, useImperativeHandle } from "react";
+import React__default, { useState, useRef, useCallback, useEffect, useImperativeHandle } from "react";
 import { c as clsx } from "../../chunks/vendor-D4wvHis9.js";
-const swipeableArea = "swipeableArea__fa06667d";
-const content = "content__820df18c";
-const disableScroll = "disableScroll__0d13c35a";
-const disablePointerEvents = "disablePointerEvents__74ba3cc7";
-const swipeAnimationFinish = "swipeAnimationFinish__b5e93f06";
-const leftContent = "leftContent__030533ab";
-const rightContent = "rightContent__b27fbbab";
+import { getElementWidth, getSwipeableAreaOpacity, resolveSwipeEnd, ESwipeDirection, resolveSwipeMove } from "./utils.js";
+const swipeableArea = "swipeableArea__77057fad";
+const content = "content__759e208c";
+const disableScroll = "disableScroll__a2f903c6";
+const disablePointerEvents = "disablePointerEvents__1bc3ba10";
+const swipeAnimationFinish = "swipeAnimationFinish__5eba24ab";
+const leftContent = "leftContent__c7a99259";
+const rightContent = "rightContent__74990911";
 const styles = {
   swipeableArea,
   content,
@@ -17,7 +18,6 @@ const styles = {
   leftContent,
   rightContent
 };
-const SWIPE_MIN_DISTANCE = 24;
 const SWIPE_ANIMATION_CLASSNAME = styles.swipeAnimationFinish;
 const DISABLE_SCROLL_CLASSNAME = styles.disableScroll;
 const DISABLE_POINTER_EVENTS_CLASSNAME = styles.disablePointerEvents;
@@ -32,44 +32,27 @@ const SwipeableArea = React__default.forwardRef(
     const contentTranslateXOnStartRef = useRef(0);
     const startCoordinates = useRef(START_COORDINATES_INITIAL);
     const containerRef = useRef(null);
+    const hasLeftSwipeableArea = leftSwipeableArea !== void 0;
+    const hasRightSwipeableArea = rightSwipeableArea !== void 0;
     const handleSwipe = () => {
       setAnimating(true);
-      const deltaContentTranslateX = contentTranslateXOnStartRef.current - contentTranslateX;
-      if (contentTranslateXOnStartRef.current === 0) {
-        if (deltaContentTranslateX > 0) {
-          if (deltaContentTranslateX > SWIPE_MIN_DISTANCE) {
-            setContentTranslateX(-rightSwipeableAreaRef.current.getBoundingClientRect().width);
-            onSwipeLeft == null ? void 0 : onSwipeLeft();
-          } else {
-            setContentTranslateX(0);
-          }
-        } else {
-          if (Math.abs(deltaContentTranslateX) > SWIPE_MIN_DISTANCE) {
-            setContentTranslateX(leftSwipeableAreaRef.current.getBoundingClientRect().width);
-            onSwipeRight == null ? void 0 : onSwipeRight();
-          } else {
-            setContentTranslateX(0);
-          }
-        }
-      } else if (contentTranslateXOnStartRef.current > 0) {
-        if (deltaContentTranslateX > 0) {
-          setContentTranslateX(
-            deltaContentTranslateX > SWIPE_MIN_DISTANCE ? 0 : leftSwipeableAreaRef.current.getBoundingClientRect().width
-          );
-        }
-      } else if (contentTranslateXOnStartRef.current < 0) {
-        if (deltaContentTranslateX < 0) {
-          setContentTranslateX(
-            Math.abs(deltaContentTranslateX) > SWIPE_MIN_DISTANCE ? 0 : -rightSwipeableAreaRef.current.getBoundingClientRect().width
-          );
-        }
+      const { translateX, direction } = resolveSwipeEnd({
+        translateX: contentTranslateX,
+        translateXOnStart: contentTranslateXOnStartRef.current,
+        leftAreaWidth: getElementWidth(leftSwipeableAreaRef.current),
+        rightAreaWidth: getElementWidth(rightSwipeableAreaRef.current)
+      });
+      setContentTranslateX(translateX);
+      if (direction === ESwipeDirection.LEFT) {
+        onSwipeLeft == null ? void 0 : onSwipeLeft();
+      } else if (direction === ESwipeDirection.RIGHT) {
+        onSwipeRight == null ? void 0 : onSwipeRight();
       }
     };
-    const handleDocumentTouchEnd = () => {
+    const handleDocumentTouchEnd = useCallback(() => {
       startCoordinates.current = START_COORDINATES_INITIAL;
       setDragType(void 0);
-      document.removeEventListener("touchend", handleDocumentTouchEnd);
-    };
+    }, []);
     useEffect(() => {
       if (!dragType && contentTranslateX !== contentTranslateXOnStartRef.current) {
         handleSwipe();
@@ -78,68 +61,38 @@ const SwipeableArea = React__default.forwardRef(
     const handleTouchStart = (event) => {
       startCoordinates.current = { clientX: event.touches[0].clientX, clientY: event.touches[0].clientY };
       contentTranslateXOnStartRef.current = contentTranslateX;
-      document.addEventListener("touchend", handleDocumentTouchEnd);
+      document.addEventListener("touchend", handleDocumentTouchEnd, { once: true });
     };
     const handleTouchMove = (event) => {
-      if (event.touches.length != 1) {
+      if (event.touches.length !== 1) {
         return;
       }
       const deltaX = event.touches[0].clientX - startCoordinates.current.clientX;
       const deltaY = event.touches[0].clientY - startCoordinates.current.clientY;
       if (!dragType) {
-        if (Math.abs(deltaY) > Math.abs(deltaX)) {
-          setDragType(
-            "vertical"
-            /* vertical */
-          );
-        } else {
-          setDragType(
-            "horizontal"
-            /* horizontal */
-          );
-        }
+        setDragType(
+          Math.abs(deltaY) > Math.abs(deltaX) ? "vertical" : "horizontal"
+          /* horizontal */
+        );
         return;
       }
       if (dragType === "vertical") {
         return;
       }
-      const contentTranslateXNext = contentTranslateXOnStartRef.current + deltaX;
-      if (contentTranslateXOnStartRef.current === 0) {
-        if (deltaX > 0 && leftSwipeableArea) {
-          setContentTranslateX(
-            Math.min(contentTranslateXNext, leftSwipeableAreaRef.current.getBoundingClientRect().width)
-          );
-        } else if (deltaX < 0 && rightSwipeableArea) {
-          setContentTranslateX(
-            Math.max(contentTranslateXNext, -rightSwipeableAreaRef.current.getBoundingClientRect().width)
-          );
-        }
-      } else if (contentTranslateXOnStartRef.current > 0) {
-        if (deltaX < 0) {
-          setContentTranslateX(Math.max(0, contentTranslateXNext));
-        }
-      } else if (contentTranslateXOnStartRef.current < 0) {
-        if (deltaX > 0) {
-          setContentTranslateX(Math.min(0, contentTranslateXNext));
-        }
-      }
+      setContentTranslateX(
+        resolveSwipeMove({
+          translateX: contentTranslateX,
+          translateXOnStart: contentTranslateXOnStartRef.current,
+          deltaX,
+          leftAreaWidth: hasLeftSwipeableArea ? getElementWidth(leftSwipeableAreaRef.current) : null,
+          rightAreaWidth: hasRightSwipeableArea ? getElementWidth(rightSwipeableAreaRef.current) : null
+        })
+      );
     };
     const handleTransitionEnd = () => setAnimating(false);
-    const getOpacityRightContent = () => {
-      if (rightSwipeableAreaRef.current) {
-        return Math.abs(contentTranslateX) / rightSwipeableAreaRef.current.getBoundingClientRect().width;
-      }
-      return 1;
-    };
-    const getOpacityLeftContent = () => {
-      if (leftSwipeableAreaRef.current) {
-        return Math.abs(contentTranslateX) / leftSwipeableAreaRef.current.getBoundingClientRect().width;
-      }
-      return 1;
-    };
     useEffect(() => {
       const handleDocumentTouchStart = (event) => {
-        if (event.touches.length != 1) {
+        if (event.touches.length !== 1) {
           return;
         }
         if (containerRef.current && !containerRef.current.contains(event.target)) {
@@ -149,68 +102,72 @@ const SwipeableArea = React__default.forwardRef(
         }
       };
       document.addEventListener("touchstart", handleDocumentTouchStart);
-      return () => document.removeEventListener("touchstart", handleDocumentTouchStart);
-    }, []);
-    const openLeftSwipeableArea = () => {
-      if (leftSwipeableAreaRef.current) {
-        setAnimating(true);
-        setContentTranslateX(leftSwipeableAreaRef.current.getBoundingClientRect().width);
-      }
-    };
-    const openRightSwipeableArea = () => {
-      if (rightSwipeableAreaRef.current) {
-        setAnimating(true);
-        setContentTranslateX(-rightSwipeableAreaRef.current.getBoundingClientRect().width);
-      }
-    };
-    const closeSwipeableArea = () => {
-      if (rightSwipeableAreaRef.current || leftSwipeableAreaRef.current) {
-        setAnimating(true);
-        setContentTranslateX(0);
-      }
-    };
+      return () => {
+        document.removeEventListener("touchstart", handleDocumentTouchStart);
+        document.removeEventListener("touchend", handleDocumentTouchEnd);
+      };
+    }, [handleDocumentTouchEnd]);
     useImperativeHandle(
       ref,
       () => ({
         closeSwipe: () => {
-          closeSwipeableArea();
+          if (leftSwipeableAreaRef.current || rightSwipeableAreaRef.current) {
+            setAnimating(true);
+            setContentTranslateX(0);
+          }
         },
         swipeLeft: () => {
-          openRightSwipeableArea();
+          if (rightSwipeableAreaRef.current) {
+            setAnimating(true);
+            setContentTranslateX(-getElementWidth(rightSwipeableAreaRef.current));
+          }
         },
         swipeRight: () => {
-          openLeftSwipeableArea();
+          if (leftSwipeableAreaRef.current) {
+            setAnimating(true);
+            setContentTranslateX(getElementWidth(leftSwipeableAreaRef.current));
+          }
         }
       }),
-      [closeSwipeableArea, openRightSwipeableArea, openLeftSwipeableArea]
+      []
     );
     return /* @__PURE__ */ jsxs(
       "div",
       {
         className: clsx(styles.swipeableArea, className),
         ...rest,
-        "data-tx": "1.44.0",
+        "data-tx": "1.45.0",
         ref: containerRef,
         children: [
-          typeof leftSwipeableArea !== "undefined" ? /* @__PURE__ */ jsx(
+          hasLeftSwipeableArea ? /* @__PURE__ */ jsx(
             "div",
             {
               className: clsx(styles.leftContent, {
                 [SWIPE_ANIMATION_CLASSNAME]: animating
               }),
               ref: leftSwipeableAreaRef,
-              style: { opacity: getOpacityLeftContent() },
+              style: {
+                opacity: getSwipeableAreaOpacity(
+                  contentTranslateX,
+                  getElementWidth(leftSwipeableAreaRef.current)
+                )
+              },
               children: leftSwipeableArea
             }
           ) : null,
-          typeof rightSwipeableArea !== "undefined" ? /* @__PURE__ */ jsx(
+          hasRightSwipeableArea ? /* @__PURE__ */ jsx(
             "div",
             {
               className: clsx(styles.rightContent, {
                 [SWIPE_ANIMATION_CLASSNAME]: animating
               }),
               ref: rightSwipeableAreaRef,
-              style: { opacity: getOpacityRightContent() },
+              style: {
+                opacity: getSwipeableAreaOpacity(
+                  contentTranslateX,
+                  getElementWidth(rightSwipeableAreaRef.current)
+                )
+              },
               children: rightSwipeableArea
             }
           ) : null,

package/components/SwipeableArea/SwipeableArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"SwipeableArea.js","sources":["../../../src/components/SwipeableArea/SwipeableArea.tsx"],"sourcesContent":["import React, { useEffect, useImperativeHandle, useRef, useState } from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./styles/SwipeableArea.module.less\";\n\nexport interface ISwipeableAreaProps extends React.HTMLAttributes<HTMLDivElement> {\n    /** Контент карточки. */\n    children: React.ReactNode;\n    /** Появляющийся контент при свайпе вправо. */\n    leftSwipeableArea?: React.ReactNode;\n    /** Появляющийся контент при свайпе влево. */\n    rightSwipeableArea?: React.ReactNode;\n    /** Колбэк завершённого свайпа влево (открытие rightSwipeableArea). Срабатывает только если дельта превысила порог. */\n    onSwipeLeft?: () => void;\n    /** Колбэк завершённого свайпа вправо (открытие leftSwipeableArea). Срабатывает только если дельта превысила порог. */\n    onSwipeRight?: () => void;\n}\n\n// Минимальная ширина свайпа в px, при котором откроется боковая панель.\nconst SWIPE_MIN_DISTANCE = 24;\n// Css-класс, задающий завершение анимации движения свайпа и изменение opacity leftSwipeableArea и rightSwipeableArea.\nconst SWIPE_ANIMATION_CLASSNAME = styles.swipeAnimationFinish;\n// Css-класс, предотвращающий скролл при свайпе.\nconst DISABLE_SCROLL_CLASSNAME = styles.disableScroll;\n// Css-класс, предотвращающий нажатие на элементы карточки при свайпе.\nconst DISABLE_POINTER_EVENTS_CLASSNAME = styles.disablePointerEvents;\n// Изначальное значение startCoordinates.\nconst START_COORDINATES_INITIAL = { clientX: 0, clientY: 0 };\n\n// Направление перемещения пальца.\nenum EDragType {\n    horizontal = \"horizontal\",\n    vertical = \"vertical\",\n}\n\nexport interface ISwipeableAreaRef {\n    /** Закрывает leftSwipeableAreaRef или rightSwipeableArea. */\n    closeSwipe: () => void;\n    /** Открывает rightSwipeableArea. */\n    swipeLeft: () => void;\n    /** Открывает leftSwipeableAreaRef. */\n    swipeRight: () => void;\n}\n\n/**\n * Контейнер с реализацией свайпа.\n * При свайпе влево открывается rightSwipeableArea.\n * При свайпе вправо открывается leftSwipeableArea.\n */\nexport const SwipeableArea = React.forwardRef<ISwipeableAreaRef, ISwipeableAreaProps>(\n    ({ children, className, leftSwipeableArea, rightSwipeableArea, onSwipeLeft, onSwipeRight, ...rest }, ref) => {\n        // Происходит анимация завершения свайпа.\n        const [animating, setAnimating] = useState(false);\n        // Направление перемещения пальца, вертикальное - скролл, горизонтальное - свайп.\n        const [dragType, setDragType] = useState<EDragType>();\n        // Координата перемещения контента карточки.\n        const [contentTranslateX, setContentTranslateX] = useState(0);\n        const leftSwipeableAreaRef = useRef<HTMLDivElement>(null);\n        const rightSwipeableAreaRef = useRef<HTMLDivElement>(null);\n        // Координата X карточки на старте перемещения.\n        const contentTranslateXOnStartRef = useRef(0);\n        // Координата пальца при старте свайпа.\n        const startCoordinates = useRef(START_COORDINATES_INITIAL);\n        // Ссылка на контейнер.\n        const containerRef = useRef<HTMLDivElement | null>(null);\n\n        /**\n         * Обработчик свайпа, срабатывает при отпускании пальца.\n         */\n        const handleSwipe = () => {\n            // Установка анимации завершения свайпа.\n            setAnimating(true);\n\n            const deltaContentTranslateX = contentTranslateXOnStartRef.current - contentTranslateX;\n\n            // Свайп отктырия левой или правой области.\n            if (contentTranslateXOnStartRef.current === 0) {\n                // Свайп влево.\n                if (deltaContentTranslateX > 0) {\n                    // Если сдвиг слишком короткий - возврат на прежнее положение, или открытие левого контента.\n                    if (deltaContentTranslateX > SWIPE_MIN_DISTANCE) {\n                        setContentTranslateX(-rightSwipeableAreaRef.current!.getBoundingClientRect().width);\n                        onSwipeLeft?.();\n                    } else {\n                        setContentTranslateX(0);\n                    }\n                } else {\n                    // Свайп вправо.\n                    if (Math.abs(deltaContentTranslateX) > SWIPE_MIN_DISTANCE) {\n                        setContentTranslateX(leftSwipeableAreaRef.current!.getBoundingClientRect().width);\n                        onSwipeRight?.();\n                    } else {\n                        setContentTranslateX(0);\n                    }\n                }\n            } else if (contentTranslateXOnStartRef.current > 0) {\n                // Свайп закрытия левой области.\n                // Свайп влево.\n                if (deltaContentTranslateX > 0) {\n                    setContentTranslateX(\n                        deltaContentTranslateX > SWIPE_MIN_DISTANCE\n                            ? 0\n                            : leftSwipeableAreaRef.current!.getBoundingClientRect().width,\n                    );\n                }\n            } else if (contentTranslateXOnStartRef.current < 0) {\n                // Свайп закрытия правой области.\n                // Свайп вправо.\n                if (deltaContentTranslateX < 0) {\n                    setContentTranslateX(\n                        Math.abs(deltaContentTranslateX) > SWIPE_MIN_DISTANCE\n                            ? 0\n                            : -rightSwipeableAreaRef.current!.getBoundingClientRect().width,\n                    );\n                }\n            }\n        };\n\n        const handleDocumentTouchEnd = () => {\n            startCoordinates.current = START_COORDINATES_INITIAL;\n\n            setDragType(undefined);\n\n            document.removeEventListener(\"touchend\", handleDocumentTouchEnd);\n        };\n\n        useEffect(() => {\n            // contentTranslateX !== contentTranslateXOnStartRef.current - был свайп, а не скролл.\n            if (!dragType && contentTranslateX !== contentTranslateXOnStartRef.current) {\n                handleSwipe();\n            }\n            // Другие зависимости добавлять не нужно.\n            // eslint-disable-next-line react-hooks/exhaustive-deps\n        }, [dragType]);\n\n        const handleTouchStart = (event: React.TouchEvent) => {\n            startCoordinates.current = { clientX: event.touches[0].clientX, clientY: event.touches[0].clientY };\n            contentTranslateXOnStartRef.current = contentTranslateX;\n            document.addEventListener(\"touchend\", handleDocumentTouchEnd);\n        };\n\n        const handleTouchMove = (event: React.TouchEvent) => {\n            if (event.touches.length != 1) {\n                return;\n            }\n\n            // Величина изменения перемещения пальца.\n            const deltaX = event.touches[0].clientX - startCoordinates.current.clientX;\n            const deltaY = event.touches[0].clientY - startCoordinates.current.clientY;\n\n            if (!dragType) {\n                // Это скролл, а не свайп.\n                if (Math.abs(deltaY) > Math.abs(deltaX)) {\n                    setDragType(EDragType.vertical);\n                } else {\n                    setDragType(EDragType.horizontal);\n                }\n\n                return;\n            }\n\n            if (dragType === EDragType.vertical) {\n                // Это скролл, а не свайп, движение пальца не обрабатывается.\n                return;\n            }\n\n            // Координата X контента карточки.\n            const contentTranslateXNext = contentTranslateXOnStartRef.current + deltaX;\n\n            // Свайп открытия левой или правой области.\n            if (contentTranslateXOnStartRef.current === 0) {\n                // Свайп вправо и есть контент слева.\n                if (deltaX > 0 && leftSwipeableArea) {\n                    setContentTranslateX(\n                        Math.min(contentTranslateXNext, leftSwipeableAreaRef.current!.getBoundingClientRect().width),\n                    );\n                } else if (deltaX < 0 && rightSwipeableArea) {\n                    // Свайп влево и есть контент справа.\n                    setContentTranslateX(\n                        Math.max(contentTranslateXNext, -rightSwipeableAreaRef.current!.getBoundingClientRect().width),\n                    );\n                }\n            } else if (contentTranslateXOnStartRef.current > 0) {\n                // Свайп закрытия левой области.\n                if (deltaX < 0) {\n                    setContentTranslateX(Math.max(0, contentTranslateXNext));\n                }\n            } else if (contentTranslateXOnStartRef.current < 0) {\n                // Свайп закрытия правой области.\n                if (deltaX > 0) {\n                    setContentTranslateX(Math.min(0, contentTranslateXNext));\n                }\n            }\n        };\n\n        const handleTransitionEnd = () => setAnimating(false);\n\n        const getOpacityRightContent = (): number => {\n            if (rightSwipeableAreaRef.current) {\n                return Math.abs(contentTranslateX) / rightSwipeableAreaRef.current.getBoundingClientRect().width;\n            }\n\n            return 1;\n        };\n\n        const getOpacityLeftContent = (): number => {\n            if (leftSwipeableAreaRef.current) {\n                return Math.abs(contentTranslateX) / leftSwipeableAreaRef.current.getBoundingClientRect().width;\n            }\n\n            return 1;\n        };\n\n        // Обработчик тапа за пределами элемента(outside).\n        useEffect(() => {\n            const handleDocumentTouchStart = (event: TouchEvent) => {\n                if (event.touches.length != 1) {\n                    return;\n                }\n\n                if (containerRef.current && !containerRef.current.contains(event.target as Node)) {\n                    // Установка анимации завершения свайпа.\n                    setAnimating(true);\n                    setContentTranslateX(0);\n                    setDragType(undefined);\n                }\n            };\n\n            document.addEventListener(\"touchstart\", handleDocumentTouchStart);\n\n            return () => document.removeEventListener(\"touchstart\", handleDocumentTouchStart);\n        }, []);\n\n        // Открывает leftSwipeableAreaRef.\n        const openLeftSwipeableArea = () => {\n            if (leftSwipeableAreaRef.current) {\n                // Установка анимации завершения свайпа.\n                setAnimating(true);\n                setContentTranslateX(leftSwipeableAreaRef.current.getBoundingClientRect().width);\n            }\n        };\n\n        // Открывает rightSwipeableArea.\n        const openRightSwipeableArea = () => {\n            if (rightSwipeableAreaRef.current) {\n                // Установка анимации завершения свайпа.\n                setAnimating(true);\n                setContentTranslateX(-rightSwipeableAreaRef.current.getBoundingClientRect().width);\n            }\n        };\n\n        // Закрывает leftSwipeableAreaRef или rightSwipeableArea.\n        const closeSwipeableArea = () => {\n            if (rightSwipeableAreaRef.current || leftSwipeableAreaRef.current) {\n                // Установка анимации завершения свайпа.\n                setAnimating(true);\n                setContentTranslateX(0);\n            }\n        };\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                closeSwipe: () => {\n                    closeSwipeableArea();\n                },\n                swipeLeft: () => {\n                    openRightSwipeableArea();\n                },\n                swipeRight: () => {\n                    openLeftSwipeableArea();\n                },\n            }),\n            [closeSwipeableArea, openRightSwipeableArea, openLeftSwipeableArea],\n        );\n\n        return (\n            <div\n                className={clsx(styles.swipeableArea, className)}\n                {...rest}\n                data-tx={process.env.npm_package_version}\n                ref={containerRef}\n            >\n                {typeof leftSwipeableArea !== \"undefined\" ? (\n                    <div\n                        className={clsx(styles.leftContent, {\n                            [SWIPE_ANIMATION_CLASSNAME]: animating,\n                        })}\n                        ref={leftSwipeableAreaRef}\n                        /* Плавное появление контента при свайпе. */\n                        style={{ opacity: getOpacityLeftContent() }}\n                    >\n                        {leftSwipeableArea}\n                    </div>\n                ) : null}\n\n                {typeof rightSwipeableArea !== \"undefined\" ? (\n                    <div\n                        className={clsx(styles.rightContent, {\n                            [SWIPE_ANIMATION_CLASSNAME]: animating,\n                        })}\n                        ref={rightSwipeableAreaRef}\n                        /* Плавное появление контента при свайпе. */\n                        style={{ opacity: getOpacityRightContent() }}\n                    >\n                        {rightSwipeableArea}\n                    </div>\n                ) : null}\n\n                <div\n                    className={clsx(styles.content, {\n                        [DISABLE_POINTER_EVENTS_CLASSNAME]: contentTranslateX !== 0,\n                        [DISABLE_SCROLL_CLASSNAME]: dragType === EDragType.horizontal,\n                        [SWIPE_ANIMATION_CLASSNAME]: animating,\n                    })}\n                    onTouchStart={handleTouchStart}\n                    onTouchMove={handleTouchMove}\n                    style={{\n                        transform: `translateX(${contentTranslateX}px)`,\n                    }}\n                    onTransitionEnd={handleTransitionEnd}\n                >\n                    {children}\n                </div>\n            </div>\n        );\n    },\n);\n\nSwipeableArea.displayName = \"SwipeableArea\";\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"SwipeableArea.js","sources":["../../../src/components/SwipeableArea/SwipeableArea.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from \"react\";\nimport clsx from \"clsx\";\nimport { ESwipeDirection, getElementWidth, getSwipeableAreaOpacity, resolveSwipeEnd, resolveSwipeMove } from \"./utils\";\nimport styles from \"./styles/SwipeableArea.module.less\";\n\nexport interface ISwipeableAreaProps extends React.HTMLAttributes<HTMLDivElement> {\n    /** Контент карточки. */\n    children: React.ReactNode;\n    /** Появляющийся контент при свайпе вправо. */\n    leftSwipeableArea?: React.ReactNode;\n    /** Появляющийся контент при свайпе влево. */\n    rightSwipeableArea?: React.ReactNode;\n    /** Колбэк завершённого свайпа влево (открытие rightSwipeableArea). Срабатывает только если дельта превысила порог. */\n    onSwipeLeft?: () => void;\n    /** Колбэк завершённого свайпа вправо (открытие leftSwipeableArea). Срабатывает только если дельта превысила порог. */\n    onSwipeRight?: () => void;\n}\n\n// Css-класс, задающий завершение анимации движения свайпа и изменение opacity leftSwipeableArea и rightSwipeableArea.\nconst SWIPE_ANIMATION_CLASSNAME = styles.swipeAnimationFinish;\n// Css-класс, предотвращающий скролл при свайпе.\nconst DISABLE_SCROLL_CLASSNAME = styles.disableScroll;\n// Css-класс, предотвращающий нажатие на элементы карточки при свайпе.\nconst DISABLE_POINTER_EVENTS_CLASSNAME = styles.disablePointerEvents;\n// Изначальное значение startCoordinates.\nconst START_COORDINATES_INITIAL = { clientX: 0, clientY: 0 };\n\n// Направление перемещения пальца.\nenum EDragType {\n    horizontal = \"horizontal\",\n    vertical = \"vertical\",\n}\n\nexport interface ISwipeableAreaRef {\n    /** Закрывает leftSwipeableArea или rightSwipeableArea. */\n    closeSwipe: () => void;\n    /** Открывает rightSwipeableArea. */\n    swipeLeft: () => void;\n    /** Открывает leftSwipeableArea. */\n    swipeRight: () => void;\n}\n\n/**\n * Контейнер с реализацией свайпа.\n * При свайпе влево открывается rightSwipeableArea.\n * При свайпе вправо открывается leftSwipeableArea.\n */\nexport const SwipeableArea = React.forwardRef<ISwipeableAreaRef, ISwipeableAreaProps>(\n    ({ children, className, leftSwipeableArea, rightSwipeableArea, onSwipeLeft, onSwipeRight, ...rest }, ref) => {\n        // Происходит анимация завершения свайпа.\n        const [animating, setAnimating] = useState(false);\n        // Направление перемещения пальца, вертикальное - скролл, горизонтальное - свайп.\n        const [dragType, setDragType] = useState<EDragType>();\n        // Координата перемещения контента карточки.\n        const [contentTranslateX, setContentTranslateX] = useState(0);\n        const leftSwipeableAreaRef = useRef<HTMLDivElement>(null);\n        const rightSwipeableAreaRef = useRef<HTMLDivElement>(null);\n        // Координата X карточки на старте перемещения.\n        const contentTranslateXOnStartRef = useRef(0);\n        // Координата пальца при старте свайпа.\n        const startCoordinates = useRef(START_COORDINATES_INITIAL);\n        // Ссылка на контейнер.\n        const containerRef = useRef<HTMLDivElement | null>(null);\n        const hasLeftSwipeableArea = leftSwipeableArea !== undefined;\n        const hasRightSwipeableArea = rightSwipeableArea !== undefined;\n\n        /**\n         * Обработчик свайпа, срабатывает при отпускании пальца.\n         */\n        const handleSwipe = () => {\n            // Установка анимации завершения свайпа.\n            setAnimating(true);\n\n            const { translateX, direction } = resolveSwipeEnd({\n                translateX: contentTranslateX,\n                translateXOnStart: contentTranslateXOnStartRef.current,\n                leftAreaWidth: getElementWidth(leftSwipeableAreaRef.current),\n                rightAreaWidth: getElementWidth(rightSwipeableAreaRef.current),\n            });\n\n            setContentTranslateX(translateX);\n\n            if (direction === ESwipeDirection.LEFT) {\n                onSwipeLeft?.();\n            } else if (direction === ESwipeDirection.RIGHT) {\n                onSwipeRight?.();\n            }\n        };\n\n        // Обработчик отпускания пальца. Слушатель вешается на документ, чтобы поймать отпускание за пределами карточки.\n        const handleDocumentTouchEnd = useCallback(() => {\n            startCoordinates.current = START_COORDINATES_INITIAL;\n\n            setDragType(undefined);\n        }, []);\n\n        useEffect(() => {\n            // contentTranslateX !== contentTranslateXOnStartRef.current - был свайп, а не скролл.\n            if (!dragType && contentTranslateX !== contentTranslateXOnStartRef.current) {\n                handleSwipe();\n            }\n            // Другие зависимости добавлять не нужно.\n            // eslint-disable-next-line react-hooks/exhaustive-deps\n        }, [dragType]);\n\n        const handleTouchStart = (event: React.TouchEvent) => {\n            startCoordinates.current = { clientX: event.touches[0].clientX, clientY: event.touches[0].clientY };\n            contentTranslateXOnStartRef.current = contentTranslateX;\n            // once - слушатель снимается сам после отпускания пальца.\n            document.addEventListener(\"touchend\", handleDocumentTouchEnd, { once: true });\n        };\n\n        const handleTouchMove = (event: React.TouchEvent) => {\n            if (event.touches.length !== 1) {\n                return;\n            }\n\n            // Величина изменения перемещения пальца.\n            const deltaX = event.touches[0].clientX - startCoordinates.current.clientX;\n            const deltaY = event.touches[0].clientY - startCoordinates.current.clientY;\n\n            if (!dragType) {\n                // Вертикальное перемещение пальца - скролл, горизонтальное - свайп.\n                setDragType(Math.abs(deltaY) > Math.abs(deltaX) ? EDragType.vertical : EDragType.horizontal);\n\n                return;\n            }\n\n            if (dragType === EDragType.vertical) {\n                // Это скролл, а не свайп, движение пальца не обрабатывается.\n                return;\n            }\n\n            setContentTranslateX(\n                resolveSwipeMove({\n                    translateX: contentTranslateX,\n                    translateXOnStart: contentTranslateXOnStartRef.current,\n                    deltaX,\n                    leftAreaWidth: hasLeftSwipeableArea ? getElementWidth(leftSwipeableAreaRef.current) : null,\n                    rightAreaWidth: hasRightSwipeableArea ? getElementWidth(rightSwipeableAreaRef.current) : null,\n                }),\n            );\n        };\n\n        const handleTransitionEnd = () => setAnimating(false);\n\n        // Обработчик тапа за пределами элемента(outside).\n        useEffect(() => {\n            const handleDocumentTouchStart = (event: TouchEvent) => {\n                if (event.touches.length !== 1) {\n                    return;\n                }\n\n                if (containerRef.current && !containerRef.current.contains(event.target as Node)) {\n                    // Установка анимации завершения свайпа.\n                    setAnimating(true);\n                    setContentTranslateX(0);\n                    setDragType(undefined);\n                }\n            };\n\n            document.addEventListener(\"touchstart\", handleDocumentTouchStart);\n\n            return () => {\n                document.removeEventListener(\"touchstart\", handleDocumentTouchStart);\n                // Слушатель остаётся висеть, если компонент размонтирован между началом и концом свайпа.\n                document.removeEventListener(\"touchend\", handleDocumentTouchEnd);\n            };\n        }, [handleDocumentTouchEnd]);\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                closeSwipe: () => {\n                    if (leftSwipeableAreaRef.current || rightSwipeableAreaRef.current) {\n                        // Установка анимации завершения свайпа.\n                        setAnimating(true);\n                        setContentTranslateX(0);\n                    }\n                },\n                swipeLeft: () => {\n                    if (rightSwipeableAreaRef.current) {\n                        // Установка анимации завершения свайпа.\n                        setAnimating(true);\n                        setContentTranslateX(-getElementWidth(rightSwipeableAreaRef.current));\n                    }\n                },\n                swipeRight: () => {\n                    if (leftSwipeableAreaRef.current) {\n                        // Установка анимации завершения свайпа.\n                        setAnimating(true);\n                        setContentTranslateX(getElementWidth(leftSwipeableAreaRef.current));\n                    }\n                },\n            }),\n            [],\n        );\n\n        return (\n            <div\n                className={clsx(styles.swipeableArea, className)}\n                {...rest}\n                data-tx={process.env.npm_package_version}\n                ref={containerRef}\n            >\n                {hasLeftSwipeableArea ? (\n                    <div\n                        className={clsx(styles.leftContent, {\n                            [SWIPE_ANIMATION_CLASSNAME]: animating,\n                        })}\n                        ref={leftSwipeableAreaRef}\n                        /* Плавное появление контента при свайпе. */\n                        style={{\n                            opacity: getSwipeableAreaOpacity(\n                                contentTranslateX,\n                                getElementWidth(leftSwipeableAreaRef.current),\n                            ),\n                        }}\n                    >\n                        {leftSwipeableArea}\n                    </div>\n                ) : null}\n\n                {hasRightSwipeableArea ? (\n                    <div\n                        className={clsx(styles.rightContent, {\n                            [SWIPE_ANIMATION_CLASSNAME]: animating,\n                        })}\n                        ref={rightSwipeableAreaRef}\n                        /* Плавное появление контента при свайпе. */\n                        style={{\n                            opacity: getSwipeableAreaOpacity(\n                                contentTranslateX,\n                                getElementWidth(rightSwipeableAreaRef.current),\n                            ),\n                        }}\n                    >\n                        {rightSwipeableArea}\n                    </div>\n                ) : null}\n\n                <div\n                    className={clsx(styles.content, {\n                        [DISABLE_POINTER_EVENTS_CLASSNAME]: contentTranslateX !== 0,\n                        [DISABLE_SCROLL_CLASSNAME]: dragType === EDragType.horizontal,\n                        [SWIPE_ANIMATION_CLASSNAME]: animating,\n                    })}\n                    onTouchStart={handleTouchStart}\n                    onTouchMove={handleTouchMove}\n                    style={{\n                        transform: `translateX(${contentTranslateX}px)`,\n                    }}\n                    onTransitionEnd={handleTransitionEnd}\n                >\n                    {children}\n                </div>\n            </div>\n        );\n    },\n);\n\nSwipeableArea.displayName = \"SwipeableArea\";\n"],"names":["React"],"mappings":"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"}

package/components/SwipeableArea/utils.js

@@ -0,0 +1,72 @@
+const SWIPE_MIN_DISTANCE = 24;
+var ESwipeDirection = /* @__PURE__ */ ((ESwipeDirection2) => {
+  ESwipeDirection2["LEFT"] = "left";
+  ESwipeDirection2["RIGHT"] = "right";
+  return ESwipeDirection2;
+})(ESwipeDirection || {});
+const getElementWidth = (element) => element ? element.getBoundingClientRect().width : 0;
+const resolveSwipeMove = ({
+  translateX,
+  translateXOnStart,
+  deltaX,
+  leftAreaWidth,
+  rightAreaWidth
+}) => {
+  const translateXNext = translateXOnStart + deltaX;
+  if (translateXOnStart === 0) {
+    if (deltaX > 0 && leftAreaWidth !== null) {
+      return Math.min(translateXNext, leftAreaWidth);
+    }
+    if (deltaX < 0 && rightAreaWidth !== null) {
+      return Math.max(translateXNext, -rightAreaWidth);
+    }
+    return translateX;
+  }
+  if (translateXOnStart > 0) {
+    return deltaX < 0 ? Math.max(0, translateXNext) : translateX;
+  }
+  return deltaX > 0 ? Math.min(0, translateXNext) : translateX;
+};
+const resolveSwipeEnd = ({
+  translateX,
+  translateXOnStart,
+  leftAreaWidth,
+  rightAreaWidth
+}) => {
+  const deltaTranslateX = translateXOnStart - translateX;
+  const passedMinDistance = Math.abs(deltaTranslateX) > SWIPE_MIN_DISTANCE;
+  if (translateXOnStart === 0) {
+    if (!passedMinDistance) {
+      return { translateX: 0, direction: null };
+    }
+    return deltaTranslateX > 0 ? {
+      translateX: -rightAreaWidth,
+      direction: "left"
+      /* LEFT */
+    } : {
+      translateX: leftAreaWidth,
+      direction: "right"
+      /* RIGHT */
+    };
+  }
+  if (translateXOnStart > 0) {
+    if (deltaTranslateX <= 0) {
+      return { translateX, direction: null };
+    }
+    return { translateX: passedMinDistance ? 0 : leftAreaWidth, direction: null };
+  }
+  if (deltaTranslateX >= 0) {
+    return { translateX, direction: null };
+  }
+  return { translateX: passedMinDistance ? 0 : -rightAreaWidth, direction: null };
+};
+const getSwipeableAreaOpacity = (translateX, areaWidth) => areaWidth > 0 ? Math.abs(translateX) / areaWidth : 1;
+export {
+  ESwipeDirection,
+  SWIPE_MIN_DISTANCE,
+  getElementWidth,
+  getSwipeableAreaOpacity,
+  resolveSwipeEnd,
+  resolveSwipeMove
+};
+//# sourceMappingURL=utils.js.map

package/components/SwipeableArea/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../src/components/SwipeableArea/utils.ts"],"sourcesContent":["/** Минимальная длина свайпа в px, при которой боковая область открывается или закрывается. */\nexport const SWIPE_MIN_DISTANCE = 24;\n\n/** Направление завершённого свайпа. */\nexport enum ESwipeDirection {\n    LEFT = \"left\",\n    RIGHT = \"right\",\n}\n\n/** Ширина элемента. Если элемента нет — 0. */\nexport const getElementWidth = (element: HTMLElement | null): number =>\n    element ? element.getBoundingClientRect().width : 0;\n\n/** Параметры расчёта координаты контента при перемещении пальца. */\nexport interface IResolveSwipeMoveParams {\n    /** Текущая координата контента. */\n    translateX: number;\n    /** Координата контента на старте свайпа. */\n    translateXOnStart: number;\n    /** Смещение пальца по оси X относительно старта свайпа. */\n    deltaX: number;\n    /** Ширина левой области. null, если левой области нет. */\n    leftAreaWidth: number | null;\n    /** Ширина правой области. null, если правой области нет. */\n    rightAreaWidth: number | null;\n}\n\n/**\n * Возвращает координату контента при перемещении пальца.\n * Перемещение ограничено шириной открываемой области. Если двигать некуда, координата не меняется.\n */\nexport const resolveSwipeMove = ({\n    translateX,\n    translateXOnStart,\n    deltaX,\n    leftAreaWidth,\n    rightAreaWidth,\n}: IResolveSwipeMoveParams): number => {\n    // Координата контента без учёта ограничений.\n    const translateXNext = translateXOnStart + deltaX;\n\n    // Свайп открытия левой или правой области.\n    if (translateXOnStart === 0) {\n        // Свайп вправо, и есть контент слева.\n        if (deltaX > 0 && leftAreaWidth !== null) {\n            return Math.min(translateXNext, leftAreaWidth);\n        }\n\n        // Свайп влево, и есть контент справа.\n        if (deltaX < 0 && rightAreaWidth !== null) {\n            return Math.max(translateXNext, -rightAreaWidth);\n        }\n\n        return translateX;\n    }\n\n    // Свайп закрытия левой области — контент двигается только влево, до исходного положения.\n    if (translateXOnStart > 0) {\n        return deltaX < 0 ? Math.max(0, translateXNext) : translateX;\n    }\n\n    // Свайп закрытия правой области — контент двигается только вправо, до исходного положения.\n    return deltaX > 0 ? Math.min(0, translateXNext) : translateX;\n};\n\n/** Параметры расчёта координаты контента при отпускании пальца. */\nexport interface IResolveSwipeEndParams {\n    /** Текущая координата контента. */\n    translateX: number;\n    /** Координата контента на старте свайпа. */\n    translateXOnStart: number;\n    /** Ширина левой области. */\n    leftAreaWidth: number;\n    /** Ширина правой области. */\n    rightAreaWidth: number;\n}\n\n/** Результат расчёта завершённого свайпа. */\nexport interface IResolveSwipeEndResult {\n    /** Итоговая координата контента. */\n    translateX: number;\n    /** Направление свайпа, открывшего боковую область. null, если область не открылась. */\n    direction: ESwipeDirection | null;\n}\n\n/**\n * Возвращает итоговую координату контента при отпускании пальца и направление открывшего свайпа.\n * Область открывается или закрывается, только если длина свайпа превысила SWIPE_MIN_DISTANCE,\n * иначе контент возвращается в положение, которое занимал на старте свайпа.\n *\n * Предусловие: ширина области, в сторону которой шёл свайп, больше нуля. Отсутствующая область\n * отсеивается раньше — resolveSwipeMove не даёт сдвинуть контент в её сторону, поэтому до\n * отпускания пальца дело не доходит.\n */\nexport const resolveSwipeEnd = ({\n    translateX,\n    translateXOnStart,\n    leftAreaWidth,\n    rightAreaWidth,\n}: IResolveSwipeEndParams): IResolveSwipeEndResult => {\n    // Длина свайпа: положительная — свайп влево, отрицательная — свайп вправо.\n    const deltaTranslateX = translateXOnStart - translateX;\n    const passedMinDistance = Math.abs(deltaTranslateX) > SWIPE_MIN_DISTANCE;\n\n    // Свайп открытия левой или правой области.\n    if (translateXOnStart === 0) {\n        if (!passedMinDistance) {\n            return { translateX: 0, direction: null };\n        }\n\n        return deltaTranslateX > 0\n            ? { translateX: -rightAreaWidth, direction: ESwipeDirection.LEFT }\n            : { translateX: leftAreaWidth, direction: ESwipeDirection.RIGHT };\n    }\n\n    // Свайп закрытия левой области — закрывает только движение влево.\n    if (translateXOnStart > 0) {\n        if (deltaTranslateX <= 0) {\n            return { translateX, direction: null };\n        }\n\n        return { translateX: passedMinDistance ? 0 : leftAreaWidth, direction: null };\n    }\n\n    // Свайп закрытия правой области — закрывает только движение вправо.\n    if (deltaTranslateX >= 0) {\n        return { translateX, direction: null };\n    }\n\n    return { translateX: passedMinDistance ? 0 : -rightAreaWidth, direction: null };\n};\n\n/**\n * Возвращает прозрачность боковой области — она пропорциональна тому, насколько область открыта.\n * Если ширина области равна нулю (элемент ещё не смонтирован либо область скрыта), возвращается 1,\n * как в состоянии покоя, когда область целиком закрыта контентом.\n */\nexport const getSwipeableAreaOpacity = (translateX: number, areaWidth: number): number =>\n    areaWidth > 0 ? Math.abs(translateX) / areaWidth : 1;\n"],"names":["ESwipeDirection"],"mappings":"AACO,MAAM,qBAAqB;AAG3B,IAAK,oCAAAA,qBAAL;AACHA,mBAAA,MAAA,IAAO;AACPA,mBAAA,OAAA,IAAQ;AAFA,SAAAA;AAAA,GAAA,mBAAA,CAAA,CAAA;AAML,MAAM,kBAAkB,CAAC,YAC5B,UAAU,QAAQ,sBAAA,EAAwB,QAAQ;AAoB/C,MAAM,mBAAmB,CAAC;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,MAAuC;AAEnC,QAAM,iBAAiB,oBAAoB;AAG3C,MAAI,sBAAsB,GAAG;AAEzB,QAAI,SAAS,KAAK,kBAAkB,MAAM;AACtC,aAAO,KAAK,IAAI,gBAAgB,aAAa;AAAA,IACjD;AAGA,QAAI,SAAS,KAAK,mBAAmB,MAAM;AACvC,aAAO,KAAK,IAAI,gBAAgB,CAAC,cAAc;AAAA,IACnD;AAEA,WAAO;AAAA,EACX;AAGA,MAAI,oBAAoB,GAAG;AACvB,WAAO,SAAS,IAAI,KAAK,IAAI,GAAG,cAAc,IAAI;AAAA,EACtD;AAGA,SAAO,SAAS,IAAI,KAAK,IAAI,GAAG,cAAc,IAAI;AACtD;AA+BO,MAAM,kBAAkB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,MAAsD;AAElD,QAAM,kBAAkB,oBAAoB;AAC5C,QAAM,oBAAoB,KAAK,IAAI,eAAe,IAAI;AAGtD,MAAI,sBAAsB,GAAG;AACzB,QAAI,CAAC,mBAAmB;AACpB,aAAO,EAAE,YAAY,GAAG,WAAW,KAAA;AAAA,IACvC;AAEA,WAAO,kBAAkB,IACnB;AAAA,MAAE,YAAY,CAAC;AAAA,MAAgB,WAAW;AAAA;AAAA,IAAA,IAC1C;AAAA,MAAE,YAAY;AAAA,MAAe,WAAW;AAAA;AAAA,IAAA;AAAA,EAClD;AAGA,MAAI,oBAAoB,GAAG;AACvB,QAAI,mBAAmB,GAAG;AACtB,aAAO,EAAE,YAAY,WAAW,KAAA;AAAA,IACpC;AAEA,WAAO,EAAE,YAAY,oBAAoB,IAAI,eAAe,WAAW,KAAA;AAAA,EAC3E;AAGA,MAAI,mBAAmB,GAAG;AACtB,WAAO,EAAE,YAAY,WAAW,KAAA;AAAA,EACpC;AAEA,SAAO,EAAE,YAAY,oBAAoB,IAAI,CAAC,gBAAgB,WAAW,KAAA;AAC7E;AAOO,MAAM,0BAA0B,CAAC,YAAoB,cACxD,YAAY,IAAI,KAAK,IAAI,UAAU,IAAI,YAAY;"}

package/components/Table/ChipPanel.js

@@ -1,12 +1,17 @@
 import { jsx } from "react/jsx-runtime";
+import React__default from "react";
 import { c as clsx } from "../../chunks/vendor-D4wvHis9.js";
 import { ChipPanelLinks } from "./ChipPanelLinks.js";
-const chipPanel = "chipPanel__70dfe145";
+const chipPanel = "chipPanel__6a8eff0c";
 const styles = {
   chipPanel
 };
-const ChipPanel = ({ children, className, ...htmlDivAttributes }) => /* @__PURE__ */ jsx("div", { className: clsx(styles.chipPanel, className), ...htmlDivAttributes, children });
-ChipPanel.Links = ChipPanelLinks;
+const ChipPanel = Object.assign(
+  React__default.forwardRef(({ children, className, ...htmlDivAttributes }, ref) => /* @__PURE__ */ jsx("div", { className: clsx(styles.chipPanel, className), ...htmlDivAttributes, ref, children })),
+  {
+    Links: ChipPanelLinks
+  }
+);
 ChipPanel.displayName = "ChipPanel";
 export {
   ChipPanel

package/components/Table/ChipPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChipPanel.js","sources":["../../../src/components/Table/ChipPanel.tsx"],"sourcesContent":["import React from \"react\";\nimport { clsx } from \"clsx\";\nimport styles from \"./styles/ChipPanel.module.less\";\nimport { ChipPanelLinks } from \"@sberbusiness/triplex-next/components/Table/ChipPanelLinks\";\nimport { IChipPanelProps } from \"@sberbusiness/triplex-next/components/Table/TableBasic/types\";\n\n/** Внутренние составляющие панели табличных фильтров. */\nexport interface IChipPanelComposition extends React.FC<IChipPanelProps> {\n    Links: typeof ChipPanelLinks;\n}\n\n/** Компонент ChipPanel. */\nexport const ChipPanel: IChipPanelComposition = ({ children, className, ...htmlDivAttributes }) => (\n    <div className={clsx(styles.chipPanel, className)} {...htmlDivAttributes}>\n        {children}\n    </div>\n);\n\nChipPanel.Links = ChipPanelLinks;\nChipPanel.displayName = \"ChipPanel\";\n"],"names":[],"mappings":";;;;;;;AAYO,MAAM,YAAmC,CAAC,EAAE,UAAU,WAAW,GAAG,wBACvE,oBAAC,OAAA,EAAI,WAAW,KAAK,OAAO,WAAW,SAAS,GAAI,GAAG,mBAClD,SAAA,CACL;AAGJ,UAAU,QAAQ;AAClB,UAAU,cAAc;"}
+{"version":3,"file":"ChipPanel.js","sources":["../../../src/components/Table/ChipPanel.tsx"],"sourcesContent":["import React from \"react\";\nimport { clsx } from \"clsx\";\nimport styles from \"./styles/ChipPanel.module.less\";\nimport { ChipPanelLinks } from \"@sberbusiness/triplex-next/components/Table/ChipPanelLinks\";\nimport { IChipPanelProps } from \"@sberbusiness/triplex-next/components/Table/TableBasic/types\";\n\n/**\n * Внутренние составляющие панели табличных фильтров.\n *\n * Явная аннотация снимает проверку лишних свойств у Object.assign, поэтому при добавлении\n * или удалении статики этот интерфейс нужно править синхронно: иначе новая статика окажется\n * в рантайме, но не попадёт в публичный тип, и TypeScript промолчит.\n */\nexport interface IChipPanelComposition extends React.ForwardRefExoticComponent<\n    IChipPanelProps & React.RefAttributes<HTMLDivElement>\n> {\n    /** Блок со ссылками-действиями панели. */\n    Links: typeof ChipPanelLinks;\n}\n\n/** Компонент ChipPanel. */\nexport const ChipPanel: IChipPanelComposition = Object.assign(\n    React.forwardRef<HTMLDivElement, IChipPanelProps>(({ children, className, ...htmlDivAttributes }, ref) => (\n        <div className={clsx(styles.chipPanel, className)} {...htmlDivAttributes} ref={ref}>\n            {children}\n        </div>\n    )),\n    {\n        Links: ChipPanelLinks,\n    },\n);\n\nChipPanel.displayName = \"ChipPanel\";\n"],"names":["React"],"mappings":";;;;;;;;AAqBO,MAAM,YAAmC,OAAO;AAAA,EACnDA,eAAM,WAA4C,CAAC,EAAE,UAAU,WAAW,GAAG,kBAAA,GAAqB,QAC9F,oBAAC,SAAI,WAAW,KAAK,OAAO,WAAW,SAAS,GAAI,GAAG,mBAAmB,KACrE,SAAA,CACL,CACH;AAAA,EACD;AAAA,IACI,OAAO;AAAA,EAAA;AAEf;AAEA,UAAU,cAAc;"}

package/components/Table/ChipPanelLinks.js

@@ -1,21 +1,25 @@
 import { jsx } from "react/jsx-runtime";
+import React__default from "react";
 import { c as clsx } from "../../chunks/vendor-D4wvHis9.js";
 import { Text } from "../Typography/Text.js";
 import { EFontWeightText, ETextSize } from "../Typography/enums.js";
-const chipPanelLinks = "chipPanelLinks__fa039882";
+const chipPanelLinks = "chipPanelLinks__d0a47b17";
 const styles = {
   chipPanelLinks
 };
-const ChipPanelLinks = ({ children, className, ...htmlDivAttributes }) => /* @__PURE__ */ jsx(
-  Text,
-  {
-    tag: "div",
-    size: ETextSize.B3,
-    weight: EFontWeightText.SEMIBOLD,
-    className: clsx(className, styles.chipPanelLinks),
-    ...htmlDivAttributes,
-    children
-  }
+const ChipPanelLinks = React__default.forwardRef(
+  ({ children, className, ...htmlDivAttributes }, ref) => /* @__PURE__ */ jsx(
+    Text,
+    {
+      tag: "div",
+      size: ETextSize.B3,
+      weight: EFontWeightText.SEMIBOLD,
+      className: clsx(className, styles.chipPanelLinks),
+      ...htmlDivAttributes,
+      ref,
+      children
+    }
+  )
 );
 ChipPanelLinks.displayName = "ChipPanelLinks";
 export {

package/components/Table/ChipPanelLinks.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChipPanelLinks.js","sources":["../../../src/components/Table/ChipPanelLinks.tsx"],"sourcesContent":["import React from \"react\";\nimport { clsx } from \"clsx\";\nimport styles from \"./styles/ChipPanelLinks.module.less\";\nimport { IChipPanelLinksProps } from \"@sberbusiness/triplex-next/components/Table/TableBasic/types\";\nimport { Text } from \"@sberbusiness/triplex-next/components/Typography/Text\";\nimport { EFontWeightText, ETextSize } from \"@sberbusiness/triplex-next/components/Typography/enums\";\n\n/** Компонент ChipPanelLinks. */\nexport const ChipPanelLinks: React.FC<IChipPanelLinksProps> = ({ children, className, ...htmlDivAttributes }) => (\n    <Text\n        tag=\"div\"\n        size={ETextSize.B3}\n        weight={EFontWeightText.SEMIBOLD}\n        className={clsx(className, styles.chipPanelLinks)}\n        {...htmlDivAttributes}\n    >\n        {children}\n    </Text>\n);\n\nChipPanelLinks.displayName = \"ChipPanelLinks\";\n"],"names":[],"mappings":";;;;;;;;AAQO,MAAM,iBAAiD,CAAC,EAAE,UAAU,WAAW,GAAG,wBACrF;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,KAAI;AAAA,IACJ,MAAM,UAAU;AAAA,IAChB,QAAQ,gBAAgB;AAAA,IACxB,WAAW,KAAK,WAAW,OAAO,cAAc;AAAA,IAC/C,GAAG;AAAA,IAEH;AAAA,EAAA;AACL;AAGJ,eAAe,cAAc;"}
+{"version":3,"file":"ChipPanelLinks.js","sources":["../../../src/components/Table/ChipPanelLinks.tsx"],"sourcesContent":["import React from \"react\";\nimport { clsx } from \"clsx\";\nimport styles from \"./styles/ChipPanelLinks.module.less\";\nimport { IChipPanelLinksProps } from \"@sberbusiness/triplex-next/components/Table/TableBasic/types\";\nimport { Text } from \"@sberbusiness/triplex-next/components/Typography/Text\";\nimport { EFontWeightText, ETextSize } from \"@sberbusiness/triplex-next/components/Typography/enums\";\n\n/** Компонент ChipPanelLinks. */\nexport const ChipPanelLinks = React.forwardRef<HTMLDivElement, IChipPanelLinksProps>(\n    ({ children, className, ...htmlDivAttributes }, ref) => (\n        <Text\n            tag=\"div\"\n            size={ETextSize.B3}\n            weight={EFontWeightText.SEMIBOLD}\n            className={clsx(className, styles.chipPanelLinks)}\n            {...htmlDivAttributes}\n            ref={ref}\n        >\n            {children}\n        </Text>\n    ),\n);\n\nChipPanelLinks.displayName = \"ChipPanelLinks\";\n"],"names":["React"],"mappings":";;;;;;;;;AAQO,MAAM,iBAAiBA,eAAM;AAAA,EAChC,CAAC,EAAE,UAAU,WAAW,GAAG,kBAAA,GAAqB,QAC5C;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAI;AAAA,MACJ,MAAM,UAAU;AAAA,MAChB,QAAQ,gBAAgB;AAAA,MACxB,WAAW,KAAK,WAAW,OAAO,cAAc;AAAA,MAC/C,GAAG;AAAA,MACJ;AAAA,MAEC;AAAA,IAAA;AAAA,EAAA;AAGb;AAEA,eAAe,cAAc;"}

package/components/Table/FilterPanel.js

@@ -1,17 +1,21 @@
 import { jsx } from "react/jsx-runtime";
+import React__default from "react";
 import { c as clsx } from "../../chunks/vendor-D4wvHis9.js";
-const filterPanel = "filterPanel__7155c739";
+const filterPanel = "filterPanel__8cd437e9";
 const styles = {
   filterPanel
 };
-const FilterPanel = ({ children, className, ...htmlDivAttributes }) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    className: clsx(styles.filterPanel, className),
-    ...htmlDivAttributes,
-    "data-tx": "1.44.0",
-    children
-  }
+const FilterPanel = React__default.forwardRef(
+  ({ children, className, ...htmlDivAttributes }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx(styles.filterPanel, className),
+      ...htmlDivAttributes,
+      "data-tx": "1.45.0",
+      ref,
+      children
+    }
+  )
 );
 FilterPanel.displayName = "FilterPanel";
 export {

package/components/Table/FilterPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterPanel.js","sources":["../../../src/components/Table/FilterPanel.tsx"],"sourcesContent":["import React from \"react\";\nimport { clsx } from \"clsx\";\nimport styles from \"./styles/FilterPanel.module.less\";\nimport { IFilterPanelProps } from \"@sberbusiness/triplex-next/components/Table/TableBasic/types\";\n\n/** Компонент панели под элементы фильтрации данных для таблицы. */\nexport const FilterPanel: React.FC<IFilterPanelProps> = ({ children, className, ...htmlDivAttributes }) => (\n    <div\n        className={clsx(styles.filterPanel, className)}\n        {...htmlDivAttributes}\n        data-tx={process.env.npm_package_version}\n    >\n        {children}\n    </div>\n);\n\nFilterPanel.displayName = \"FilterPanel\";\n"],"names":[],"mappings":";;;;;;AAMO,MAAM,cAA2C,CAAC,EAAE,UAAU,WAAW,GAAG,wBAC/E;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,WAAW,KAAK,OAAO,aAAa,SAAS;AAAA,IAC5C,GAAG;AAAA,IACJ,WAAS;AAAA,IAER;AAAA,EAAA;AACL;AAGJ,YAAY,cAAc;"}
+{"version":3,"file":"FilterPanel.js","sources":["../../../src/components/Table/FilterPanel.tsx"],"sourcesContent":["import React from \"react\";\nimport { clsx } from \"clsx\";\nimport styles from \"./styles/FilterPanel.module.less\";\nimport { IFilterPanelProps } from \"@sberbusiness/triplex-next/components/Table/TableBasic/types\";\n\n/** Компонент панели под элементы фильтрации данных для таблицы. */\nexport const FilterPanel = React.forwardRef<HTMLDivElement, IFilterPanelProps>(\n    ({ children, className, ...htmlDivAttributes }, ref) => (\n        <div\n            className={clsx(styles.filterPanel, className)}\n            {...htmlDivAttributes}\n            data-tx={process.env.npm_package_version}\n            ref={ref}\n        >\n            {children}\n        </div>\n    ),\n);\n\nFilterPanel.displayName = \"FilterPanel\";\n"],"names":["React"],"mappings":";;;;;;;AAMO,MAAM,cAAcA,eAAM;AAAA,EAC7B,CAAC,EAAE,UAAU,WAAW,GAAG,kBAAA,GAAqB,QAC5C;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAW,KAAK,OAAO,aAAa,SAAS;AAAA,MAC5C,GAAG;AAAA,MACJ,WAAS;AAAA,MACT;AAAA,MAEC;AAAA,IAAA;AAAA,EAAA;AAGb;AAEA,YAAY,cAAc;"}