@sberbusiness/triplex-next 0.33.0 → 0.35.0

package/components/SwipeableArea/SwipeableArea.js

@@ -1,127 +1,234 @@
-import { jsxs as W, jsx as T } from "react/jsx-runtime";
-import H, { useState as S, useRef as u, useEffect as I, useImperativeHandle as V } from "react";
-import { c as g } from "../../chunks/vendor-z35N2Tap.js";
-const $ = "swipeableArea__f5a965ea", k = "content__bc3e2af7", q = "disableScroll__7fbfb0b6", G = "disablePointerEvents__fc174edf", J = "swipeAnimationFinish__212449a5", K = "leftContent__0f97a30a", Q = "rightContent__c8cfec64", o = {
-  swipeableArea: $,
-  content: k,
-  disableScroll: q,
-  disablePointerEvents: G,
-  swipeAnimationFinish: J,
-  leftContent: K,
-  rightContent: Q
-}, m = 24, R = o.swipeAnimationFinish, U = o.disableScroll, Z = o.disablePointerEvents, y = { clientX: 0, clientY: 0 }, tt = H.forwardRef(
-  ({ children: B, className: X, leftSwipeableArea: C, rightSwipeableArea: A, onSwipeLeft: b, onSwipeRight: _, ...L }, x) => {
-    const [p, a] = S(!1), [l, d] = S(), [s, e] = S(0), r = u(null), c = u(null), n = u(0), f = u(y), E = u(null), O = () => {
-      a(!0);
-      const t = n.current - s;
-      n.current === 0 ? t > 0 ? t > m ? (e(-c.current.getBoundingClientRect().width), b == null || b()) : e(0) : Math.abs(t) > m ? (e(r.current.getBoundingClientRect().width), _ == null || _()) : e(0) : n.current > 0 ? t > 0 && e(
-        t > m ? 0 : r.current.getBoundingClientRect().width
-      ) : n.current < 0 && t < 0 && e(
-        Math.abs(t) > m ? 0 : -c.current.getBoundingClientRect().width
-      );
-    }, w = () => {
-      f.current = y, d(void 0), document.removeEventListener("touchend", w);
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useState, useRef, useEffect, useImperativeHandle } from "react";
+import { c as clsx } from "../../chunks/vendor-BtZO8a0z.js";
+const swipeableArea = "swipeableArea__78baf31e";
+const content = "content__a1dea5c9";
+const disableScroll = "disableScroll__6a3c6ceb";
+const disablePointerEvents = "disablePointerEvents__e02f41d4";
+const swipeAnimationFinish = "swipeAnimationFinish__131a4e9e";
+const leftContent = "leftContent__d9dbf0d4";
+const rightContent = "rightContent__5e885a0a";
+const styles = {
+  swipeableArea,
+  content,
+  disableScroll,
+  disablePointerEvents,
+  swipeAnimationFinish,
+  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;
+const START_COORDINATES_INITIAL = { clientX: 0, clientY: 0 };
+const SwipeableArea = React.forwardRef(
+  ({ children, className, leftSwipeableArea, rightSwipeableArea, onSwipeLeft, onSwipeRight, ...rest }, ref) => {
+    const [animating, setAnimating] = useState(false);
+    const [dragType, setDragType] = useState();
+    const [contentTranslateX, setContentTranslateX] = useState(0);
+    const leftSwipeableAreaRef = useRef(null);
+    const rightSwipeableAreaRef = useRef(null);
+    const contentTranslateXOnStartRef = useRef(0);
+    const startCoordinates = useRef(START_COORDINATES_INITIAL);
+    const containerRef = useRef(null);
+    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 handleDocumentTouchEnd = () => {
+      startCoordinates.current = START_COORDINATES_INITIAL;
+      setDragType(void 0);
+      document.removeEventListener("touchend", handleDocumentTouchEnd);
+    };
+    useEffect(() => {
+      if (!dragType && contentTranslateX !== contentTranslateXOnStartRef.current) {
+        handleSwipe();
+      }
+    }, [dragType]);
+    const handleTouchStart = (event) => {
+      startCoordinates.current = { clientX: event.touches[0].clientX, clientY: event.touches[0].clientY };
+      contentTranslateXOnStartRef.current = contentTranslateX;
+      document.addEventListener("touchend", handleDocumentTouchEnd);
     };
-    I(() => {
-      !l && s !== n.current && O();
-    }, [l]);
-    const D = (t) => {
-      f.current = { clientX: t.touches[0].clientX, clientY: t.touches[0].clientY }, n.current = s, document.addEventListener("touchend", w);
-    }, P = (t) => {
-      if (t.touches.length != 1)
+    const handleTouchMove = (event) => {
+      if (event.touches.length != 1) {
         return;
-      const i = t.touches[0].clientX - f.current.clientX, z = t.touches[0].clientY - f.current.clientY;
-      if (!l) {
-        Math.abs(z) > Math.abs(i) ? d(
-          "vertical"
-          /* vertical */
-        ) : d(
-          "horizontal"
-          /* horizontal */
-        );
+      }
+      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 */
+          );
+        }
         return;
       }
-      if (l === "vertical")
+      if (dragType === "vertical") {
         return;
-      const h = n.current + i;
-      n.current === 0 ? i > 0 && C ? e(
-        Math.min(h, r.current.getBoundingClientRect().width)
-      ) : i < 0 && A && e(
-        Math.max(h, -c.current.getBoundingClientRect().width)
-      ) : n.current > 0 ? i < 0 && e(Math.max(0, h)) : n.current < 0 && i > 0 && e(Math.min(0, h));
-    }, Y = () => a(!1), F = () => c.current ? Math.abs(s) / c.current.getBoundingClientRect().width : 1, j = () => r.current ? Math.abs(s) / r.current.getBoundingClientRect().width : 1;
-    I(() => {
-      const t = (i) => {
-        i.touches.length == 1 && E.current && !E.current.contains(i.target) && (a(!0), e(0), d(void 0));
+      }
+      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));
+        }
+      }
+    };
+    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) {
+          return;
+        }
+        if (containerRef.current && !containerRef.current.contains(event.target)) {
+          setAnimating(true);
+          setContentTranslateX(0);
+          setDragType(void 0);
+        }
       };
-      return document.addEventListener("touchstart", t), () => document.removeEventListener("touchstart", t);
+      document.addEventListener("touchstart", handleDocumentTouchStart);
+      return () => document.removeEventListener("touchstart", handleDocumentTouchStart);
     }, []);
-    const v = () => {
-      r.current && (a(!0), e(r.current.getBoundingClientRect().width));
-    }, M = () => {
-      c.current && (a(!0), e(-c.current.getBoundingClientRect().width));
-    }, N = () => {
-      (c.current || r.current) && (a(!0), e(0));
+    const openLeftSwipeableArea = () => {
+      if (leftSwipeableAreaRef.current) {
+        setAnimating(true);
+        setContentTranslateX(leftSwipeableAreaRef.current.getBoundingClientRect().width);
+      }
+    };
+    const openRightSwipeableArea = () => {
+      if (rightSwipeableAreaRef.current) {
+        setAnimating(true);
+        setContentTranslateX(-rightSwipeableAreaRef.current.getBoundingClientRect().width);
+      }
     };
-    return V(
-      x,
+    const closeSwipeableArea = () => {
+      if (rightSwipeableAreaRef.current || leftSwipeableAreaRef.current) {
+        setAnimating(true);
+        setContentTranslateX(0);
+      }
+    };
+    useImperativeHandle(
+      ref,
       () => ({
         closeSwipe: () => {
-          N();
+          closeSwipeableArea();
         },
         swipeLeft: () => {
-          M();
+          openRightSwipeableArea();
         },
         swipeRight: () => {
-          v();
+          openLeftSwipeableArea();
         }
       }),
-      [N, M, v]
-    ), /* @__PURE__ */ W(
+      [closeSwipeableArea, openRightSwipeableArea, openLeftSwipeableArea]
+    );
+    return /* @__PURE__ */ jsxs(
       "div",
       {
-        className: g(o.swipeableArea, X),
-        ...L,
-        "data-tx": "0.33.0",
-        ref: E,
+        className: clsx(styles.swipeableArea, className),
+        ...rest,
+        "data-tx": "0.35.0",
+        ref: containerRef,
         children: [
-          typeof C < "u" ? /* @__PURE__ */ T(
+          typeof leftSwipeableArea !== "undefined" ? /* @__PURE__ */ jsx(
             "div",
             {
-              className: g(o.leftContent, {
-                [R]: p
+              className: clsx(styles.leftContent, {
+                [SWIPE_ANIMATION_CLASSNAME]: animating
               }),
-              ref: r,
-              style: { opacity: j() },
-              children: C
+              ref: leftSwipeableAreaRef,
+              style: { opacity: getOpacityLeftContent() },
+              children: leftSwipeableArea
             }
           ) : null,
-          typeof A < "u" ? /* @__PURE__ */ T(
+          typeof rightSwipeableArea !== "undefined" ? /* @__PURE__ */ jsx(
             "div",
             {
-              className: g(o.rightContent, {
-                [R]: p
+              className: clsx(styles.rightContent, {
+                [SWIPE_ANIMATION_CLASSNAME]: animating
               }),
-              ref: c,
-              style: { opacity: F() },
-              children: A
+              ref: rightSwipeableAreaRef,
+              style: { opacity: getOpacityRightContent() },
+              children: rightSwipeableArea
             }
           ) : null,
-          /* @__PURE__ */ T(
+          /* @__PURE__ */ jsx(
             "div",
             {
-              className: g(o.content, {
-                [Z]: s !== 0,
-                [U]: l === "horizontal",
-                [R]: p
+              className: clsx(styles.content, {
+                [DISABLE_POINTER_EVENTS_CLASSNAME]: contentTranslateX !== 0,
+                [DISABLE_SCROLL_CLASSNAME]: dragType === "horizontal",
+                [SWIPE_ANIMATION_CLASSNAME]: animating
               }),
-              onTouchStart: D,
-              onTouchMove: P,
+              onTouchStart: handleTouchStart,
+              onTouchMove: handleTouchMove,
               style: {
-                transform: `translateX(${s}px)`
+                transform: `translateX(${contentTranslateX}px)`
               },
-              onTransitionEnd: Y,
-              children: B
+              onTransitionEnd: handleTransitionEnd,
+              children
             }
           )
         ]
@@ -129,8 +236,8 @@ const $ = "swipeableArea__f5a965ea", k = "content__bc3e2af7", q = "disableScroll
     );
   }
 );
-tt.displayName = "SwipeableArea";
+SwipeableArea.displayName = "SwipeableArea";
 export {
-  tt as SwipeableArea
+  SwipeableArea
 };
 //# sourceMappingURL=SwipeableArea.js.map

package/components/SwipeableArea/SwipeableArea.js.map

@@ -0,0 +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":[],"mappings":"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"}

package/components/SwipeableArea/index.js

@@ -1,5 +1,5 @@
-import { SwipeableArea as a } from "./SwipeableArea.js";
+import { SwipeableArea } from "./SwipeableArea.js";
 export {
-  a as SwipeableArea
+  SwipeableArea
 };
 //# sourceMappingURL=index.js.map

package/components/SwipeableArea/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/components/Table/ChipPanel.js

@@ -1,12 +1,14 @@
-import { jsx as p } from "react/jsx-runtime";
-import { c as e } from "../../chunks/vendor-z35N2Tap.js";
-import { ChipPanelLinks as l } from "./ChipPanelLinks.js";
-const c = "chipPanel__3daaf477", o = {
-  chipPanel: c
-}, a = ({ children: i, className: s, ...n }) => /* @__PURE__ */ p("div", { className: e(o.chipPanel, s), ...n, children: i });
-a.Links = l;
-a.displayName = "ChipPanel";
+import { jsx } from "react/jsx-runtime";
+import { c as clsx } from "../../chunks/vendor-BtZO8a0z.js";
+import { ChipPanelLinks } from "./ChipPanelLinks.js";
+const chipPanel = "chipPanel__0ce71d6f";
+const styles = {
+  chipPanel
+};
+const ChipPanel = ({ children, className, ...htmlDivAttributes }) => /* @__PURE__ */ jsx("div", { className: clsx(styles.chipPanel, className), ...htmlDivAttributes, children });
+ChipPanel.Links = ChipPanelLinks;
+ChipPanel.displayName = "ChipPanel";
 export {
-  a as ChipPanel
+  ChipPanel
 };
 //# sourceMappingURL=ChipPanel.js.map

package/components/Table/ChipPanel.js.map

@@ -0,0 +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;"}

package/components/Table/ChipPanelLinks.js

@@ -1,22 +1,24 @@
-import { jsx as n } from "react/jsx-runtime";
-import { c as t } from "../../chunks/vendor-z35N2Tap.js";
-import { Text as o } from "../Typography/Text.js";
-import { EFontWeightText as a, ETextSize as p } from "../Typography/enums.js";
-const c = "chipPanelLinks__6c092165", l = {
-  chipPanelLinks: c
-}, m = ({ children: i, className: s, ...e }) => /* @__PURE__ */ n(
-  o,
+import { jsx } from "react/jsx-runtime";
+import { c as clsx } from "../../chunks/vendor-BtZO8a0z.js";
+import { Text } from "../Typography/Text.js";
+import { EFontWeightText, ETextSize } from "../Typography/enums.js";
+const chipPanelLinks = "chipPanelLinks__09f702a4";
+const styles = {
+  chipPanelLinks
+};
+const ChipPanelLinks = ({ children, className, ...htmlDivAttributes }) => /* @__PURE__ */ jsx(
+  Text,
   {
     tag: "div",
-    size: p.B3,
-    weight: a.SEMIBOLD,
-    className: t(s, l.chipPanelLinks),
-    ...e,
-    children: i
+    size: ETextSize.B3,
+    weight: EFontWeightText.SEMIBOLD,
+    className: clsx(className, styles.chipPanelLinks),
+    ...htmlDivAttributes,
+    children
   }
 );
-m.displayName = "ChipPanelLinks";
+ChipPanelLinks.displayName = "ChipPanelLinks";
 export {
-  m as ChipPanelLinks
+  ChipPanelLinks
 };
 //# sourceMappingURL=ChipPanelLinks.js.map

package/components/Table/ChipPanelLinks.js.map

@@ -0,0 +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;"}

package/components/Table/FilterPanel.js

@@ -1,18 +1,20 @@
-import { jsx as a } from "react/jsx-runtime";
-import { c as r } from "../../chunks/vendor-z35N2Tap.js";
-const s = "filterPanel__af3691db", i = {
-  filterPanel: s
-}, n = ({ children: e, className: l, ...t }) => /* @__PURE__ */ a(
+import { jsx } from "react/jsx-runtime";
+import { c as clsx } from "../../chunks/vendor-BtZO8a0z.js";
+const filterPanel = "filterPanel__6b6f9fa0";
+const styles = {
+  filterPanel
+};
+const FilterPanel = ({ children, className, ...htmlDivAttributes }) => /* @__PURE__ */ jsx(
   "div",
   {
-    className: r(i.filterPanel, l),
-    ...t,
-    "data-tx": "0.33.0",
-    children: e
+    className: clsx(styles.filterPanel, className),
+    ...htmlDivAttributes,
+    "data-tx": "0.35.0",
+    children
   }
 );
-n.displayName = "FilterPanel";
+FilterPanel.displayName = "FilterPanel";
 export {
-  n as FilterPanel
+  FilterPanel
 };
 //# sourceMappingURL=FilterPanel.js.map

package/components/Table/FilterPanel.js.map

@@ -0,0 +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;"}

package/components/Table/MasterTable.js

@@ -1,53 +1,55 @@
-import { jsx as o } from "react/jsx-runtime";
-import { useState as s } from "react";
-import { MasterTableContext as n } from "./MasterTableContext.js";
-import { c as p } from "../../chunks/vendor-z35N2Tap.js";
-import { NoColumns as c } from "./NoColumns.js";
-import { FilterPanel as b } from "./FilterPanel.js";
-import { ChipPanel as f } from "./ChipPanel.js";
-import { TableBasic as T } from "./TableBasic/TableBasic.js";
-import { TableBasicSettings as P } from "./TableBasicSettings/TableBasicSettings.js";
-import { TableFooter as u } from "./TableFooter/TableFooter.js";
-import { PaginationPanel as C } from "./PaginationPanel.js";
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { MasterTableContext } from "./MasterTableContext.js";
+import { c as clsx } from "../../chunks/vendor-BtZO8a0z.js";
+import { NoColumns } from "./NoColumns.js";
+import { FilterPanel } from "./FilterPanel.js";
+import { ChipPanel } from "./ChipPanel.js";
+import { TableBasic } from "./TableBasic/TableBasic.js";
+import { TableBasicSettings } from "./TableBasicSettings/TableBasicSettings.js";
+import { TableFooter } from "./TableFooter/TableFooter.js";
+import { PaginationPanel } from "./PaginationPanel.js";
 import "./TableBasicSettings/components/ColumnSettings.js";
 import "./TableBasic/enums.js";
 import "./TableFooter/components/TableFooterSummaryAmount.js";
 import "./TableFooter/components/TableFooterSummarySelectAllButton.js";
 import "./TableFooter/components/TableFooterSummarySelectedCount.js";
 import "./TableBasicSettings/components/ColumnSettingsSortableListItem.js";
-const d = "masterTable__c71f1869", x = {
-  masterTable: d
-}, t = ({ children: e, className: r, loading: a = !1, ...m }) => {
-  const [i, l] = s([]);
-  return /* @__PURE__ */ o(
-    n.Provider,
+const masterTable = "masterTable__d88caebd";
+const styles = {
+  masterTable
+};
+const MasterTable = ({ children, className, loading = false, ...htmlDivAttributes }) => {
+  const [columns, setColumns] = useState([]);
+  return /* @__PURE__ */ jsx(
+    MasterTableContext.Provider,
     {
       value: {
-        columns: i,
-        loading: a,
-        setColumns: l
+        columns,
+        loading,
+        setColumns
       },
-      children: /* @__PURE__ */ o(
+      children: /* @__PURE__ */ jsx(
         "div",
         {
-          className: p(x.masterTable, r),
-          ...m,
-          "data-tx": "0.33.0",
-          children: e
+          className: clsx(styles.masterTable, className),
+          ...htmlDivAttributes,
+          "data-tx": "0.35.0",
+          children
         }
       )
     }
   );
 };
-t.displayName = "MasterTable";
-t.NoColumns = c;
-t.FilterPanel = b;
-t.ChipPanel = f;
-t.TableBasic = T;
-t.TableBasicSettings = P;
-t.TableFooter = u;
-t.PaginationPanel = C;
+MasterTable.displayName = "MasterTable";
+MasterTable.NoColumns = NoColumns;
+MasterTable.FilterPanel = FilterPanel;
+MasterTable.ChipPanel = ChipPanel;
+MasterTable.TableBasic = TableBasic;
+MasterTable.TableBasicSettings = TableBasicSettings;
+MasterTable.TableFooter = TableFooter;
+MasterTable.PaginationPanel = PaginationPanel;
 export {
-  t as MasterTable
+  MasterTable
 };
 //# sourceMappingURL=MasterTable.js.map

package/components/Table/MasterTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MasterTable.js","sources":["../../../src/components/Table/MasterTable.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { MasterTableContext } from \"@sberbusiness/triplex-next/components/Table/MasterTableContext\";\nimport styles from \"./styles/MasterTable.module.less\";\nimport { clsx } from \"clsx\";\nimport { NoColumns } from \"@sberbusiness/triplex-next/components/Table/NoColumns\";\nimport { IMasterTableProps, ITableBasicColumn } from \"@sberbusiness/triplex-next/components/Table/TableBasic/types\";\nimport { FilterPanel } from \"@sberbusiness/triplex-next/components/Table/FilterPanel\";\nimport { ChipPanel } from \"@sberbusiness/triplex-next/components/Table/ChipPanel\";\nimport { TableBasic } from \"@sberbusiness/triplex-next/components/Table/TableBasic/TableBasic\";\nimport { TableBasicSettings } from \"@sberbusiness/triplex-next/components/Table/TableBasicSettings/TableBasicSettings\";\nimport { TableFooter } from \"@sberbusiness/triplex-next/components/Table/TableFooter/TableFooter\";\nimport { PaginationPanel } from \"@sberbusiness/triplex-next/components/Table/PaginationPanel\";\n\ninterface IMasterTableFC extends React.FC<IMasterTableProps> {\n    NoColumns: typeof NoColumns;\n    FilterPanel: typeof FilterPanel;\n    ChipPanel: typeof ChipPanel;\n    TableBasic: typeof TableBasic;\n    TableBasicSettings: typeof TableBasicSettings;\n    TableFooter: typeof TableFooter;\n    PaginationPanel: typeof PaginationPanel;\n}\n\nexport const MasterTable: IMasterTableFC = ({ children, className, loading = false, ...htmlDivAttributes }) => {\n    const [columns, setColumns] = useState<ITableBasicColumn[]>([]);\n\n    return (\n        <MasterTableContext.Provider\n            value={{\n                columns,\n                loading,\n                setColumns,\n            }}\n        >\n            <div\n                className={clsx(styles.masterTable, className)}\n                {...htmlDivAttributes}\n                data-tx={process.env.npm_package_version}\n            >\n                {children}\n            </div>\n        </MasterTableContext.Provider>\n    );\n};\n\nMasterTable.displayName = \"MasterTable\";\nMasterTable.NoColumns = NoColumns;\nMasterTable.FilterPanel = FilterPanel;\nMasterTable.ChipPanel = ChipPanel;\nMasterTable.TableBasic = TableBasic;\nMasterTable.TableBasicSettings = TableBasicSettings;\nMasterTable.TableFooter = TableFooter;\nMasterTable.PaginationPanel = PaginationPanel;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAuBO,MAAM,cAA8B,CAAC,EAAE,UAAU,WAAW,UAAU,OAAO,GAAG,wBAAwB;AAC3G,QAAM,CAAC,SAAS,UAAU,IAAI,SAA8B,CAAA,CAAE;AAE9D,SACI;AAAA,IAAC,mBAAmB;AAAA,IAAnB;AAAA,MACG,OAAO;AAAA,QACH;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAGJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAW,KAAK,OAAO,aAAa,SAAS;AAAA,UAC5C,GAAG;AAAA,UACJ,WAAS;AAAA,UAER;AAAA,QAAA;AAAA,MAAA;AAAA,IACL;AAAA,EAAA;AAGZ;AAEA,YAAY,cAAc;AAC1B,YAAY,YAAY;AACxB,YAAY,cAAc;AAC1B,YAAY,YAAY;AACxB,YAAY,aAAa;AACzB,YAAY,qBAAqB;AACjC,YAAY,cAAc;AAC1B,YAAY,kBAAkB;"}

package/components/Table/MasterTableContext.js

@@ -1,11 +1,11 @@
-import t from "react";
-const o = t.createContext({
+import React from "react";
+const MasterTableContext = React.createContext({
   columns: [],
-  loading: !1,
+  loading: false,
   setColumns: () => {
   }
 });
 export {
-  o as MasterTableContext
+  MasterTableContext
 };
 //# sourceMappingURL=MasterTableContext.js.map

package/components/Table/MasterTableContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MasterTableContext.js","sources":["../../../src/components/Table/MasterTableContext.ts"],"sourcesContent":["import React from \"react\";\nimport { ITableBasicColumn } from \"@sberbusiness/triplex-next/components/Table/TableBasic/types\";\n\n/** Свойства контекста MasterTableContext. */\nexport interface IMasterTableContextContext {\n    /** Структура заголовков таблицы. */\n    columns: ITableBasicColumn[];\n    /** Состояние загрузки. */\n    loading: boolean;\n    /** Установить колонки. */\n    setColumns: (columns: ITableBasicColumn[]) => void;\n}\n\n/** Контекст компонента MasterTableContext. */\nexport const MasterTableContext = React.createContext<IMasterTableContextContext>({\n    columns: [],\n    loading: false,\n    setColumns: () => {},\n});\n"],"names":[],"mappings":";AAcO,MAAM,qBAAqB,MAAM,cAA0C;AAAA,EAC9E,SAAS,CAAA;AAAA,EACT,SAAS;AAAA,EACT,YAAY,MAAM;AAAA,EAAC;AACvB,CAAC;"}