@sberbusiness/triplex-next 0.44.0 → 0.46.0

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":[],"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":[],"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 { c as clsx } from "../../chunks/vendor-DqGxntec.js";
+import React from "react";
+import { c as clsx } from "../../chunks/vendor-BxhAzfnS.js";
 import { ChipPanelLinks } from "./ChipPanelLinks.js";
-const chipPanel = "chipPanel__71dd5980";
+const chipPanel = "chipPanel__3e1156e4";
 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.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":[],"mappings":";;;;;;;;AAqBO,MAAM,YAAmC,OAAO;AAAA,EACnD,MAAM,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 { c as clsx } from "../../chunks/vendor-DqGxntec.js";
+import React from "react";
+import { c as clsx } from "../../chunks/vendor-BxhAzfnS.js";
 import { Text } from "../Typography/Text.js";
 import { EFontWeightText, ETextSize } from "../Typography/enums.js";
-const chipPanelLinks = "chipPanelLinks__ecdec532";
+const chipPanelLinks = "chipPanelLinks__d4b00289";
 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.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":[],"mappings":";;;;;;;;;AAQO,MAAM,iBAAiB,MAAM;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 { c as clsx } from "../../chunks/vendor-DqGxntec.js";
-const filterPanel = "filterPanel__eeb72cf5";
+import React from "react";
+import { c as clsx } from "../../chunks/vendor-BxhAzfnS.js";
+const filterPanel = "filterPanel__06a196da";
 const styles = {
   filterPanel
 };
-const FilterPanel = ({ children, className, ...htmlDivAttributes }) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    className: clsx(styles.filterPanel, className),
-    ...htmlDivAttributes,
-    "data-tx": "0.44.0",
-    children
-  }
+const FilterPanel = React.forwardRef(
+  ({ children, className, ...htmlDivAttributes }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx(styles.filterPanel, className),
+      ...htmlDivAttributes,
+      "data-tx": "0.46.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":[],"mappings":";;;;;;;AAMO,MAAM,cAAc,MAAM;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;"}

package/components/Table/MasterTable.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
-import { useState } from "react";
+import React, { useState, useMemo } from "react";
 import { MasterTableContext } from "./MasterTableContext.js";
-import { c as clsx } from "../../chunks/vendor-DqGxntec.js";
+import { c as clsx } from "../../chunks/vendor-BxhAzfnS.js";
 import { NoColumns } from "./NoColumns.js";
 import { FilterPanel } from "./FilterPanel.js";
 import { ChipPanel } from "./ChipPanel.js";
@@ -15,40 +15,39 @@ import "./TableFooter/components/TableFooterSummaryAmount.js";
 import "./TableFooter/components/TableFooterSummarySelectAllButton.js";
 import "./TableFooter/components/TableFooterSummarySelectedCount.js";
 import "./TableBasicSettings/components/ColumnSettingsSortableListItem.js";
-const masterTable = "masterTable__9b5b33b4";
+const masterTable = "masterTable__8e25300c";
 const styles = {
   masterTable
 };
-const MasterTable = ({ children, className, loading = false, ...htmlDivAttributes }) => {
-  const [columns, setColumns] = useState([]);
-  return /* @__PURE__ */ jsx(
-    MasterTableContext.Provider,
-    {
-      value: {
-        columns,
-        loading,
-        setColumns
-      },
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: clsx(styles.masterTable, className),
-          ...htmlDivAttributes,
-          "data-tx": "0.44.0",
-          children
-        }
-      )
-    }
-  );
-};
+const MasterTable = Object.assign(
+  React.forwardRef(function MasterTable2({ children, className, loading = false, ...htmlDivAttributes }, ref) {
+    const [columns, setColumns] = useState([]);
+    const contextValue = useMemo(
+      () => ({ columns, loading, setColumns }),
+      [columns, loading]
+    );
+    return /* @__PURE__ */ jsx(MasterTableContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: clsx(styles.masterTable, className),
+        ...htmlDivAttributes,
+        "data-tx": "0.46.0",
+        ref,
+        children
+      }
+    ) });
+  }),
+  {
+    NoColumns,
+    FilterPanel,
+    ChipPanel,
+    TableBasic,
+    TableBasicSettings,
+    TableFooter,
+    PaginationPanel
+  }
+);
 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 {
   MasterTable
 };

package/components/Table/MasterTable.js.map

@@ -1 +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;"}
+{"version":3,"file":"MasterTable.js","sources":["../../../src/components/Table/MasterTable.tsx"],"sourcesContent":["import React, { useMemo, useState } from \"react\";\nimport {\n    IMasterTableContextContext,\n    MasterTableContext,\n} 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\n/**\n * Статические субкомпоненты MasterTable. Тип задан через typeof-запросы, а не выведен:\n * TableBasicSettings и TableFooter типизированы неэкспортируемыми интерфейсами, и выведенный\n * тип Object.assign невозможно сгенерировать в d.ts (TS4023) — declaration emit падает.\n *\n * Явная аннотация снимает проверку лишних свойств у Object.assign, поэтому при добавлении\n * или удалении статики этот интерфейс нужно править синхронно: иначе новая статика окажется\n * в рантайме, но не попадёт в публичный тип, и TypeScript промолчит.\n */\ninterface IMasterTableStatics {\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\n/**\n * Контейнер таблицы. Объединяет панели фильтров, саму таблицу, подвал и пагинацию,\n * раздавая им общее состояние (колонки и признак загрузки) через MasterTableContext.\n */\nexport const MasterTable: React.ForwardRefExoticComponent<IMasterTableProps & React.RefAttributes<HTMLDivElement>> &\n    IMasterTableStatics = Object.assign(\n    React.forwardRef<HTMLDivElement, IMasterTableProps>(function MasterTable(\n        { children, className, loading = false, ...htmlDivAttributes },\n        ref,\n    ) {\n        const [columns, setColumns] = useState<ITableBasicColumn[]>([]);\n\n        const contextValue = useMemo<IMasterTableContextContext>(\n            () => ({ columns, loading, setColumns }),\n            [columns, loading],\n        );\n\n        return (\n            <MasterTableContext.Provider value={contextValue}>\n                <div\n                    className={clsx(styles.masterTable, className)}\n                    {...htmlDivAttributes}\n                    data-tx={process.env.npm_package_version}\n                    ref={ref}\n                >\n                    {children}\n                </div>\n            </MasterTableContext.Provider>\n        );\n    }),\n    {\n        NoColumns,\n        FilterPanel,\n        ChipPanel,\n        TableBasic,\n        TableBasicSettings,\n        TableFooter,\n        PaginationPanel,\n    },\n);\n\nMasterTable.displayName = \"MasterTable\";\n"],"names":["MasterTable"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAuCO,MAAM,cACa,OAAO;AAAA,EAC7B,MAAM,WAA8C,SAASA,aACzD,EAAE,UAAU,WAAW,UAAU,OAAO,GAAG,kBAAA,GAC3C,KACF;AACE,UAAM,CAAC,SAAS,UAAU,IAAI,SAA8B,CAAA,CAAE;AAE9D,UAAM,eAAe;AAAA,MACjB,OAAO,EAAE,SAAS,SAAS;MAC3B,CAAC,SAAS,OAAO;AAAA,IAAA;AAGrB,+BACK,mBAAmB,UAAnB,EAA4B,OAAO,cAChC,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,KAAK,OAAO,aAAa,SAAS;AAAA,QAC5C,GAAG;AAAA,QACJ,WAAS;AAAA,QACT;AAAA,QAEC;AAAA,MAAA;AAAA,IAAA,GAET;AAAA,EAER,CAAC;AAAA,EACD;AAAA,IACI;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAER;AAEA,YAAY,cAAc;"}

package/components/Table/NoColumns.js

@@ -1,18 +1,21 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { c as clsx } from "../../chunks/vendor-DqGxntec.js";
+import React from "react";
+import { c as clsx } from "../../chunks/vendor-BxhAzfnS.js";
 import { Gap } from "../Gap/Gap.js";
 import { ServicesetupSysIcon96 } from "@sberbusiness/icons-next";
-const noColumns = "noColumns__74762018";
-const content = "content__8fddffea";
+const noColumns = "noColumns__a8af9e72";
+const content = "content__1129aa59";
 const styles = {
   noColumns,
   content
 };
-const NoColumns = ({ children, className, ...htmlDivAttributes }) => /* @__PURE__ */ jsxs("div", { className: clsx(styles.noColumns, className), ...htmlDivAttributes, children: [
-  /* @__PURE__ */ jsx(ServicesetupSysIcon96, {}),
-  /* @__PURE__ */ jsx(Gap, { size: 8 }),
-  /* @__PURE__ */ jsx("div", { className: styles.content, children })
-] });
+const NoColumns = React.forwardRef(
+  ({ children, className, ...htmlDivAttributes }, ref) => /* @__PURE__ */ jsxs("div", { className: clsx(styles.noColumns, className), ...htmlDivAttributes, ref, children: [
+    /* @__PURE__ */ jsx(ServicesetupSysIcon96, {}),
+    /* @__PURE__ */ jsx(Gap, { size: 8 }),
+    /* @__PURE__ */ jsx("div", { className: styles.content, children })
+  ] })
+);
 NoColumns.displayName = "NoColumns";
 export {
   NoColumns

package/components/Table/NoColumns.js.map

@@ -1 +1 @@
-{"version":3,"file":"NoColumns.js","sources":["../../../src/components/Table/NoColumns.tsx"],"sourcesContent":["import React from \"react\";\nimport { clsx } from \"clsx\";\nimport { INoColumnsProps } from \"@sberbusiness/triplex-next/components/Table/TableBasic/types\";\nimport { Gap } from \"@sberbusiness/triplex-next/components/Gap\";\nimport styles from \"./styles/NoColumns.module.less\";\nimport { ServicesetupSysIcon96 } from \"@sberbusiness/icons-next\";\n\n/** Компонент отображающий информацию, когда скрыты все колонки таблицы. */\nexport const NoColumns: React.FC<INoColumnsProps> = ({ children, className, ...htmlDivAttributes }) => (\n    <div className={clsx(styles.noColumns, className)} {...htmlDivAttributes}>\n        <ServicesetupSysIcon96 />\n        <Gap size={8} />\n        <div className={styles.content}>{children}</div>\n    </div>\n);\n\nNoColumns.displayName = \"NoColumns\";\n"],"names":[],"mappings":";;;;;;;;;;AAQO,MAAM,YAAuC,CAAC,EAAE,UAAU,WAAW,GAAG,kBAAA,MAC3E,qBAAC,OAAA,EAAI,WAAW,KAAK,OAAO,WAAW,SAAS,GAAI,GAAG,mBACnD,UAAA;AAAA,EAAA,oBAAC,uBAAA,EAAsB;AAAA,EACvB,oBAAC,KAAA,EAAI,MAAM,EAAA,CAAG;AAAA,EACd,oBAAC,OAAA,EAAI,WAAW,OAAO,SAAU,SAAA,CAAS;AAAA,EAAA,CAC9C;AAGJ,UAAU,cAAc;"}
+{"version":3,"file":"NoColumns.js","sources":["../../../src/components/Table/NoColumns.tsx"],"sourcesContent":["import React from \"react\";\nimport { clsx } from \"clsx\";\nimport { INoColumnsProps } from \"@sberbusiness/triplex-next/components/Table/TableBasic/types\";\nimport { Gap } from \"@sberbusiness/triplex-next/components/Gap\";\nimport styles from \"./styles/NoColumns.module.less\";\nimport { ServicesetupSysIcon96 } from \"@sberbusiness/icons-next\";\n\n/** Компонент отображающий информацию, когда скрыты все колонки таблицы. */\nexport const NoColumns = React.forwardRef<HTMLDivElement, INoColumnsProps>(\n    ({ children, className, ...htmlDivAttributes }, ref) => (\n        <div className={clsx(styles.noColumns, className)} {...htmlDivAttributes} ref={ref}>\n            <ServicesetupSysIcon96 />\n            <Gap size={8} />\n            <div className={styles.content}>{children}</div>\n        </div>\n    ),\n);\n\nNoColumns.displayName = \"NoColumns\";\n"],"names":[],"mappings":";;;;;;;;;;;AAQO,MAAM,YAAY,MAAM;AAAA,EAC3B,CAAC,EAAE,UAAU,WAAW,GAAG,kBAAA,GAAqB,QAC5C,qBAAC,OAAA,EAAI,WAAW,KAAK,OAAO,WAAW,SAAS,GAAI,GAAG,mBAAmB,KACtE,UAAA;AAAA,IAAA,oBAAC,uBAAA,EAAsB;AAAA,IACvB,oBAAC,KAAA,EAAI,MAAM,EAAA,CAAG;AAAA,IACd,oBAAC,OAAA,EAAI,WAAW,OAAO,SAAU,SAAA,CAAS;AAAA,EAAA,EAAA,CAC9C;AAER;AAEA,UAAU,cAAc;"}

package/components/Table/PaginationPanel.js

@@ -1,17 +1,21 @@
 import { jsx } from "react/jsx-runtime";
-import { c as clsx } from "../../chunks/vendor-DqGxntec.js";
-const paginationPanel = "paginationPanel__588b0611";
+import React from "react";
+import { c as clsx } from "../../chunks/vendor-BxhAzfnS.js";
+const paginationPanel = "paginationPanel__051ad8c5";
 const styles = {
   paginationPanel
 };
-const PaginationPanel = ({ children, className, ...htmlDivAttributes }) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    className: clsx(styles.paginationPanel, className),
-    ...htmlDivAttributes,
-    "data-tx": "0.44.0",
-    children
-  }
+const PaginationPanel = React.forwardRef(
+  ({ children, className, ...htmlDivAttributes }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx(styles.paginationPanel, className),
+      ...htmlDivAttributes,
+      "data-tx": "0.46.0",
+      ref,
+      children
+    }
+  )
 );
 PaginationPanel.displayName = "PaginationPanel";
 export {

package/components/Table/PaginationPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaginationPanel.js","sources":["../../../src/components/Table/PaginationPanel.tsx"],"sourcesContent":["import React from \"react\";\nimport { clsx } from \"clsx\";\nimport styles from \"./styles/PaginationPanel.module.less\";\nimport { IPaginationPanelProps } from \"@sberbusiness/triplex-next/components/Table/TableBasic/types\";\n\n/** Компонент панели под элементы пагинации таблицы. */\nexport const PaginationPanel: React.FC<IPaginationPanelProps> = ({ children, className, ...htmlDivAttributes }) => (\n    <div\n        className={clsx(styles.paginationPanel, className)}\n        {...htmlDivAttributes}\n        data-tx={process.env.npm_package_version}\n    >\n        {children}\n    </div>\n);\n\nPaginationPanel.displayName = \"PaginationPanel\";\n"],"names":[],"mappings":";;;;;;AAMO,MAAM,kBAAmD,CAAC,EAAE,UAAU,WAAW,GAAG,wBACvF;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,WAAW,KAAK,OAAO,iBAAiB,SAAS;AAAA,IAChD,GAAG;AAAA,IACJ,WAAS;AAAA,IAER;AAAA,EAAA;AACL;AAGJ,gBAAgB,cAAc;"}
+{"version":3,"file":"PaginationPanel.js","sources":["../../../src/components/Table/PaginationPanel.tsx"],"sourcesContent":["import React from \"react\";\nimport { clsx } from \"clsx\";\nimport styles from \"./styles/PaginationPanel.module.less\";\nimport { IPaginationPanelProps } from \"@sberbusiness/triplex-next/components/Table/TableBasic/types\";\n\n/** Компонент панели под элементы пагинации таблицы. */\nexport const PaginationPanel = React.forwardRef<HTMLDivElement, IPaginationPanelProps>(\n    ({ children, className, ...htmlDivAttributes }, ref) => (\n        <div\n            className={clsx(styles.paginationPanel, className)}\n            {...htmlDivAttributes}\n            data-tx={process.env.npm_package_version}\n            ref={ref}\n        >\n            {children}\n        </div>\n    ),\n);\n\nPaginationPanel.displayName = \"PaginationPanel\";\n"],"names":[],"mappings":";;;;;;;AAMO,MAAM,kBAAkB,MAAM;AAAA,EACjC,CAAC,EAAE,UAAU,WAAW,GAAG,kBAAA,GAAqB,QAC5C;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAW,KAAK,OAAO,iBAAiB,SAAS;AAAA,MAChD,GAAG;AAAA,MACJ,WAAS;AAAA,MACT;AAAA,MAEC;AAAA,IAAA;AAAA,EAAA;AAGb;AAEA,gBAAgB,cAAc;"}

package/components/Table/TableBasic/TableBasic.js

@@ -1,8 +1,8 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import React, { useContext, useEffect } from "react";
-import { i as isEqual } from "../../../chunks/vendor-DqGxntec.js";
+import { i as isEqual } from "../../../chunks/vendor-BxhAzfnS.js";
 import { MasterTableContext } from "../MasterTableContext.js";
-import { s as styles } from "../../../chunks/utils-_G4-vsUx.js";
+import { s as styles } from "../../../chunks/utils-haFRFWPQ.js";
 import { TableBasicHeader } from "./components/TableBasicHeader.js";
 import { TableBasicBody } from "./components/TableBasicBody.js";
 import { LoaderMiddle } from "../../Loader/LoaderMiddle/LoaderMiddle.js";

package/components/Table/TableBasic/components/TableBasicBody.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { TableBasicRow } from "./TableBasicRow.js";
-import { c as clsx } from "../../../../chunks/vendor-DqGxntec.js";
-import { s as styles } from "../../../../chunks/utils-_G4-vsUx.js";
+import { c as clsx } from "../../../../chunks/vendor-BxhAzfnS.js";
+import { s as styles } from "../../../../chunks/utils-haFRFWPQ.js";
 const TableBasicBody = ({ columns, data, highlightRowOnHover, onClickRow }) => {
   if (data.length === 0) {
     return null;

package/components/Table/TableBasic/components/TableBasicHeader.js

@@ -3,8 +3,8 @@ import { SortdecreaseStrokeSrvIcon16, SortincreaseStrokeSrvIcon16, SortStrokeSrv
 import { getAriaHTMLAttributes } from "../../../../utils/html/AriaAttributes.js";
 import { getDataHTMLAttributes } from "../../../../utils/html/DataAttributes.js";
 import { ECellType, EHorizontalAlign, EOrderDirection } from "../enums.js";
-import { c as clsx } from "../../../../chunks/vendor-DqGxntec.js";
-import { s as styles, m as mapHorizontalAlignToClassName } from "../../../../chunks/utils-_G4-vsUx.js";
+import { c as clsx } from "../../../../chunks/vendor-BxhAzfnS.js";
+import { s as styles, m as mapHorizontalAlignToClassName } from "../../../../chunks/utils-haFRFWPQ.js";
 import { Text } from "../../../Typography/Text.js";
 import { ETextSize } from "../../../Typography/enums.js";
 const getNextOrderDirection = (currentDirection) => {

package/components/Table/TableBasic/components/TableBasicRow.js

@@ -2,8 +2,8 @@ import { jsx } from "react/jsx-runtime";
 import { getAriaHTMLAttributes } from "../../../../utils/html/AriaAttributes.js";
 import { getDataHTMLAttributes } from "../../../../utils/html/DataAttributes.js";
 import { DataTestId } from "../../../../consts/DataTestId.js";
-import { c as clsx } from "../../../../chunks/vendor-DqGxntec.js";
-import { s as styles, a as mapVerticalAlignToClassName, m as mapHorizontalAlignToClassName, b as mapCellTypeToClassName } from "../../../../chunks/utils-_G4-vsUx.js";
+import { c as clsx } from "../../../../chunks/vendor-BxhAzfnS.js";
+import { s as styles, a as mapVerticalAlignToClassName, m as mapHorizontalAlignToClassName, b as mapCellTypeToClassName } from "../../../../chunks/utils-haFRFWPQ.js";
 import { ECellType, EVerticalAlign } from "../enums.js";
 import { ETextSize } from "../../../Typography/enums.js";
 import { Text } from "../../../Typography/Text.js";