@hh.ru/magritte-ui-swipe 4.0.15

package/Swipe.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { SwipeProps } from './types';
+export declare const Swipe: FC<SwipeProps>;

package/Swipe.js

@@ -0,0 +1,516 @@
+import './index.css';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useRef, useState, useCallback, useEffect } from 'react';
+import { useSpring, config, animated } from '@react-spring/web';
+import classNames from 'classnames';
+import { useDebounce } from '@hh.ru/magritte-common-func-utils';
+import { useSwipe, MAIN_AXIS_THRESHOLD_PX } from '@hh.ru/magritte-common-use-swipe/useSwipe';
+import { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';
+import { Layer, LayerName } from '@hh.ru/magritte-ui-layer';
+
+var styles = {"text":"magritte-text___gUsfc_4-0-15","text_max-lines":"magritte-text_max-lines___foe9-_4-0-15","textMaxLines":"magritte-text_max-lines___foe9-_4-0-15","text-dynamic":"magritte-text-dynamic___KzitV_4-0-15","textDynamic":"magritte-text-dynamic___KzitV_4-0-15","text-dynamic_stretched":"magritte-text-dynamic_stretched___hv3Th_4-0-15","textDynamicStretched":"magritte-text-dynamic_stretched___hv3Th_4-0-15","text_style-primary":"magritte-text_style-primary___vYlpl_4-0-15","textStylePrimary":"magritte-text_style-primary___vYlpl_4-0-15","text-dynamic-disabled":"magritte-text-dynamic-disabled___M1GFt_4-0-15","textDynamicDisabled":"magritte-text-dynamic-disabled___M1GFt_4-0-15","text_style-secondary":"magritte-text_style-secondary___qb-4O_4-0-15","textStyleSecondary":"magritte-text_style-secondary___qb-4O_4-0-15","text_style-tertiary":"magritte-text_style-tertiary___atZvg_4-0-15","textStyleTertiary":"magritte-text_style-tertiary___atZvg_4-0-15","text_style-accent":"magritte-text_style-accent___JDNe4_4-0-15","textStyleAccent":"magritte-text_style-accent___JDNe4_4-0-15","text_style-accent-secondary":"magritte-text_style-accent-secondary___JM6z5_4-0-15","textStyleAccentSecondary":"magritte-text_style-accent-secondary___JM6z5_4-0-15","text_style-positive":"magritte-text_style-positive___OjJIB_4-0-15","textStylePositive":"magritte-text_style-positive___OjJIB_4-0-15","text_style-positive-secondary":"magritte-text_style-positive-secondary___LkPe1_4-0-15","textStylePositiveSecondary":"magritte-text_style-positive-secondary___LkPe1_4-0-15","text_style-negative":"magritte-text_style-negative___wBLmp_4-0-15","textStyleNegative":"magritte-text_style-negative___wBLmp_4-0-15","text_style-negative-secondary":"magritte-text_style-negative-secondary___CO58y_4-0-15","textStyleNegativeSecondary":"magritte-text_style-negative-secondary___CO58y_4-0-15","text_style-warning":"magritte-text_style-warning___23C3Y_4-0-15","textStyleWarning":"magritte-text_style-warning___23C3Y_4-0-15","text_style-warning-secondary":"magritte-text_style-warning-secondary___ZJ3uf_4-0-15","textStyleWarningSecondary":"magritte-text_style-warning-secondary___ZJ3uf_4-0-15","text_style-special":"magritte-text_style-special___LaqKY_4-0-15","textStyleSpecial":"magritte-text_style-special___LaqKY_4-0-15","text_style-special-secondary":"magritte-text_style-special-secondary___-whB-_4-0-15","textStyleSpecialSecondary":"magritte-text_style-special-secondary___-whB-_4-0-15","text_style-contrast":"magritte-text_style-contrast___Bx24w_4-0-15","textStyleContrast":"magritte-text_style-contrast___Bx24w_4-0-15","text_style-contrast-secondary":"magritte-text_style-contrast-secondary___xMS2f_4-0-15","textStyleContrastSecondary":"magritte-text_style-contrast-secondary___xMS2f_4-0-15","text_typography-title-1-semibold":"magritte-text_typography-title-1-semibold___WDZXM_4-0-15","textTypographyTitle1Semibold":"magritte-text-typography-title-1-semibold___RE-5E_4-0-15","text_typography-title-2-semibold":"magritte-text_typography-title-2-semibold___4PvYn_4-0-15","textTypographyTitle2Semibold":"magritte-text-typography-title-2-semibold___r-gyn_4-0-15","text_typography-title-3-semibold":"magritte-text_typography-title-3-semibold___E7pmd_4-0-15","textTypographyTitle3Semibold":"magritte-text-typography-title-3-semibold___AxOn9_4-0-15","text_typography-title-4-semibold":"magritte-text_typography-title-4-semibold___u-8Kd_4-0-15","textTypographyTitle4Semibold":"magritte-text-typography-title-4-semibold___4FOf2_4-0-15","text_typography-title-5-semibold":"magritte-text_typography-title-5-semibold___PRTQc_4-0-15","textTypographyTitle5Semibold":"magritte-text-typography-title-5-semibold___ayTa0_4-0-15","text_typography-subtitle-1-semibold":"magritte-text_typography-subtitle-1-semibold___TNYKE_4-0-15","textTypographySubtitle1Semibold":"magritte-text_typography-subtitle-1-semibold___TNYKE_4-0-15","text_typography-subtitle-2-semibold":"magritte-text_typography-subtitle-2-semibold___8GJr9_4-0-15","textTypographySubtitle2Semibold":"magritte-text_typography-subtitle-2-semibold___8GJr9_4-0-15","text_typography-subtitle-3-semibold":"magritte-text_typography-subtitle-3-semibold___scHMl_4-0-15","textTypographySubtitle3Semibold":"magritte-text_typography-subtitle-3-semibold___scHMl_4-0-15","text_typography-subtitle-4-semibold":"magritte-text_typography-subtitle-4-semibold___Yr4Bt_4-0-15","textTypographySubtitle4Semibold":"magritte-text_typography-subtitle-4-semibold___Yr4Bt_4-0-15","text_typography-label-1-regular":"magritte-text_typography-label-1-regular___JMO56_4-0-15","textTypographyLabel1Regular":"magritte-text_typography-label-1-regular___JMO56_4-0-15","text_typography-label-2-regular":"magritte-text_typography-label-2-regular___7gS1P_4-0-15","textTypographyLabel2Regular":"magritte-text_typography-label-2-regular___7gS1P_4-0-15","text_typography-label-3-regular":"magritte-text_typography-label-3-regular___DogGv_4-0-15","textTypographyLabel3Regular":"magritte-text_typography-label-3-regular___DogGv_4-0-15","text_typography-label-4-regular":"magritte-text_typography-label-4-regular___TIPoS_4-0-15","textTypographyLabel4Regular":"magritte-text_typography-label-4-regular___TIPoS_4-0-15","text_typography-label-5-regular":"magritte-text_typography-label-5-regular___y55-P_4-0-15","textTypographyLabel5Regular":"magritte-text_typography-label-5-regular___y55-P_4-0-15","text_typography-paragraph-1-regular":"magritte-text_typography-paragraph-1-regular___ZvHBC_4-0-15","textTypographyParagraph1Regular":"magritte-text_typography-paragraph-1-regular___ZvHBC_4-0-15","text_typography-paragraph-2-regular":"magritte-text_typography-paragraph-2-regular___ndKyc_4-0-15","textTypographyParagraph2Regular":"magritte-text_typography-paragraph-2-regular___ndKyc_4-0-15","text_typography-paragraph-3-regular":"magritte-text_typography-paragraph-3-regular___g0oZF_4-0-15","textTypographyParagraph3Regular":"magritte-text_typography-paragraph-3-regular___g0oZF_4-0-15","text_typography-paragraph-4-regular":"magritte-text_typography-paragraph-4-regular___Iy3Zy_4-0-15","textTypographyParagraph4Regular":"magritte-text_typography-paragraph-4-regular___Iy3Zy_4-0-15","text_typography-custom-1-semibold":"magritte-text_typography-custom-1-semibold___Pv6Lp_4-0-15","textTypographyCustom1Semibold":"magritte-text_typography-custom-1-semibold___Pv6Lp_4-0-15","text_typography-custom-2-semibold":"magritte-text_typography-custom-2-semibold___UP1hj_4-0-15","textTypographyCustom2Semibold":"magritte-text_typography-custom-2-semibold___UP1hj_4-0-15","text_typography-custom-3-semibold":"magritte-text_typography-custom-3-semibold___6yO4m_4-0-15","textTypographyCustom3Semibold":"magritte-text_typography-custom-3-semibold___6yO4m_4-0-15","text_typography-custom-4-semibold":"magritte-text_typography-custom-4-semibold___NEahp_4-0-15","textTypographyCustom4Semibold":"magritte-text_typography-custom-4-semibold___NEahp_4-0-15","text_typography-custom-5-semibold":"magritte-text_typography-custom-5-semibold___-UJfV_4-0-15","textTypographyCustom5Semibold":"magritte-text_typography-custom-5-semibold___-UJfV_4-0-15","text_typography-custom-1-italic":"magritte-text_typography-custom-1-italic___-CpMs_4-0-15","textTypographyCustom1Italic":"magritte-text_typography-custom-1-italic___-CpMs_4-0-15","text_typography-custom-2-italic":"magritte-text_typography-custom-2-italic___SvOG4_4-0-15","textTypographyCustom2Italic":"magritte-text_typography-custom-2-italic___SvOG4_4-0-15","text_typography-custom-3-italic":"magritte-text_typography-custom-3-italic___-g0na_4-0-15","textTypographyCustom3Italic":"magritte-text_typography-custom-3-italic___-g0na_4-0-15","text_typography-custom-4-italic":"magritte-text_typography-custom-4-italic___gOGey_4-0-15","textTypographyCustom4Italic":"magritte-text_typography-custom-4-italic___gOGey_4-0-15","text_typography-custom-5-italic":"magritte-text_typography-custom-5-italic___VR9wy_4-0-15","textTypographyCustom5Italic":"magritte-text_typography-custom-5-italic___VR9wy_4-0-15","text_typography-custom-1-medium":"magritte-text_typography-custom-1-medium___hik0e_4-0-15","textTypographyCustom1Medium":"magritte-text_typography-custom-1-medium___hik0e_4-0-15","text_typography-custom-2-medium":"magritte-text_typography-custom-2-medium___-f6Sh_4-0-15","textTypographyCustom2Medium":"magritte-text_typography-custom-2-medium___-f6Sh_4-0-15","text_typography-custom-3-medium":"magritte-text_typography-custom-3-medium___pLvIb_4-0-15","textTypographyCustom3Medium":"magritte-text_typography-custom-3-medium___pLvIb_4-0-15","text_typography-custom-4-medium":"magritte-text_typography-custom-4-medium___zZteM_4-0-15","textTypographyCustom4Medium":"magritte-text_typography-custom-4-medium___zZteM_4-0-15","text_typography-custom-5-medium":"magritte-text_typography-custom-5-medium___gW1Y8_4-0-15","textTypographyCustom5Medium":"magritte-text_typography-custom-5-medium___gW1Y8_4-0-15","text-typography-title-1-semibold":"magritte-text-typography-title-1-semibold___RE-5E_4-0-15","text-typography-title-2-semibold":"magritte-text-typography-title-2-semibold___r-gyn_4-0-15","text-typography-title-3-semibold":"magritte-text-typography-title-3-semibold___AxOn9_4-0-15","text-typography-title-4-semibold":"magritte-text-typography-title-4-semibold___4FOf2_4-0-15","text-typography-title-5-semibold":"magritte-text-typography-title-5-semibold___ayTa0_4-0-15","root":"magritte-root___gbkM-_4-0-15","swipeble":"magritte-swipeble___EVyAI_4-0-15","childrenWrapper":"magritte-childrenWrapper___1tUbf_4-0-15","buttons":"magritte-buttons___PHNdL_4-0-15","buttons-left":"magritte-buttons-left___WPiN4_4-0-15","buttonsLeft":"magritte-buttons-left___WPiN4_4-0-15","buttons-right":"magritte-buttons-right___G3u6y_4-0-15","buttonsRight":"magritte-buttons-right___G3u6y_4-0-15","button":"magritte-button___jZvyY_4-0-15","button-hide":"magritte-button-hide___5AEdR_4-0-15","buttonHide":"magritte-button-hide___5AEdR_4-0-15","button-grow":"magritte-button-grow___IT4MK_4-0-15","buttonGrow":"magritte-button-grow___IT4MK_4-0-15","button-content":"magritte-button-content___hlzd-_4-0-15","buttonContent":"magritte-button-content___hlzd-_4-0-15","button-content-column":"magritte-button-content-column___48Tzo_4-0-15","buttonContentColumn":"magritte-button-content-column___48Tzo_4-0-15","button-label":"magritte-button-label___l03VO_4-0-15","buttonLabel":"magritte-button-label___l03VO_4-0-15","button_style-neutral":"magritte-button_style-neutral___1yyqh_4-0-15","buttonStyleNeutral":"magritte-button_style-neutral___1yyqh_4-0-15","button_style-accent":"magritte-button_style-accent___L9krS_4-0-15","buttonStyleAccent":"magritte-button_style-accent___L9krS_4-0-15","button_style-positive":"magritte-button_style-positive___2pgae_4-0-15","buttonStylePositive":"magritte-button_style-positive___2pgae_4-0-15","button_style-negative":"magritte-button_style-negative___UClE4_4-0-15","buttonStyleNegative":"magritte-button_style-negative___UClE4_4-0-15","button_style-special":"magritte-button_style-special___sGvAc_4-0-15","buttonStyleSpecial":"magritte-button_style-special___sGvAc_4-0-15","button_style-warning":"magritte-button_style-warning___5bEK0_4-0-15","buttonStyleWarning":"magritte-button_style-warning___5bEK0_4-0-15","icon-wrapper":"magritte-icon-wrapper___0xJZX_4-0-15","iconWrapper":"magritte-icon-wrapper___0xJZX_4-0-15"};
+
+const MIN_BUTTON_WIDTH = 76;
+const OPEN_THRESHOLD = 1 / 3;
+const MIN_SWIPE_DISTANCE = MIN_BUTTON_WIDTH * OPEN_THRESHOLD;
+var ButtonsState;
+(function (ButtonsState) {
+    ButtonsState["Close"] = "close";
+    ButtonsState["LeftOpen"] = "leftOpen";
+    ButtonsState["RightOpen"] = "rightOpen";
+})(ButtonsState || (ButtonsState = {}));
+var LongState;
+(function (LongState) {
+    LongState["Off"] = "off";
+    LongState["Left"] = "left";
+    LongState["Right"] = "right";
+})(LongState || (LongState = {}));
+const Swipe = ({ children, leftButtons, rightButtons, onStart, onFinish, useLongSwipe = true, dataQa, demo = false, twoSidedDemoMode = 'right-to-left', demoAppearTime = 200, demoIdleTime = 300, demoDisappearTime = 200, onFinishDemo, onStartDemo, onResetDemo, }) => {
+    const rootRef = useRef(null);
+    const swipeableRef = useRef(null);
+    const childrenWrapperRef = useRef(null);
+    const [swipeableWidth, setSwipeableWidth] = useState(0);
+    const leftButtonsRef = useRef(null);
+    const rightButtonsRef = useRef(null);
+    const sumRefs = useRef([]); // ссылки на кнопки, по которым считается реальный размер
+    const leftButtonsSumSizeRef = useRef(0); // реальный размер, требуемый левым кнопкам
+    const rightButtonsSumSizeRef = useRef(0); // реальный размер, требуемый правым кнопкам
+    const leftButtonsSizeRef = useRef(0); // установленный размер левых кнопок
+    const rigthButtonsSizeRef = useRef(0); // установленный размер правых кнопок
+    const prevDistance = useRef(0);
+    const swipeThresholdRef = useRef({ max: MIN_SWIPE_DISTANCE });
+    const swipeLockRef = useRef(false);
+    const { isMobile } = useBreakpoint();
+    const [leftBlockStyles, leftBlockApi] = useSpring(() => ({
+        width: 0,
+    }));
+    const [rightBlockStyles, rightBlockApi] = useSpring(() => ({
+        width: 0,
+    }));
+    const [longState, setLongState] = useState(LongState.Off);
+    const stateRef = useRef({
+        candidate: ButtonsState.Close,
+        now: ButtonsState.Close,
+        next: ButtonsState.Close, // следующее состояние, после завершения свайпа
+    });
+    const [demoInProgress, setDemoInProgress] = useState(false);
+    const setAnimateButtonsWidth = useCallback((flag) => {
+        if (leftButtonsRef.current) {
+            leftButtonsRef.current.style.transitionProperty = flag ? 'width' : 'none';
+        }
+        if (rightButtonsRef.current) {
+            rightButtonsRef.current.style.transitionProperty = flag ? 'width' : 'none';
+        }
+    }, []);
+    const setWidth = useDebounce(useCallback(() => {
+        if (swipeableRef.current && childrenWrapperRef.current && rootRef.current) {
+            const value = rootRef.current.getBoundingClientRect().width;
+            // устанавливаем размер области равной размеру контента,
+            // чтобы она не растягивалась, когда растягиваются кнопки
+            setSwipeableWidth(value);
+            swipeableRef.current.style.width = `${value}px`;
+            childrenWrapperRef.current.style.width = `${value}px`;
+            childrenWrapperRef.current.style.minWidth = `${value}px`;
+        }
+    }, [setSwipeableWidth]), 64);
+    useEffect(() => {
+        setWidth();
+    }, [setWidth]);
+    useEffect(() => {
+        if (window && isMobile) {
+            window.addEventListener('resize', setWidth);
+        }
+        return () => {
+            if (window && isMobile) {
+                window.removeEventListener('resize', setWidth);
+            }
+        };
+    }, [setWidth, isMobile]);
+    // обновляет порог срабатывания для useSwipe в зависимости от состояния
+    const updateSwipeThreshold = useCallback(() => {
+        const { now, candidate } = stateRef.current;
+        // если открыта одна из сторон, то мы можем свайпнуть к закрытию, или к активации длинного свайпа
+        if ([ButtonsState.LeftOpen, ButtonsState.RightOpen].includes(now)) {
+            swipeThresholdRef.current =
+                now === ButtonsState.LeftOpen
+                    ? {
+                        // свайп к закрытию
+                        minDelta: -MIN_SWIPE_DISTANCE,
+                        // свайп к активации длинного свайпа
+                        maxDelta: useLongSwipe ? MIN_SWIPE_DISTANCE : Number.MAX_SAFE_INTEGER,
+                    }
+                    : {
+                        // свайп к закрытию
+                        maxDelta: MIN_SWIPE_DISTANCE,
+                        // свайп к активации длинного свайпа
+                        minDelta: useLongSwipe ? -MIN_SWIPE_DISTANCE : -Number.MAX_SAFE_INTEGER,
+                    };
+        }
+        else if (candidate === ButtonsState.LeftOpen) {
+            // если кандидат на открытие слева, то мы можем свайпнуть к открытию слева
+            swipeThresholdRef.current = { maxDelta: MIN_SWIPE_DISTANCE };
+        }
+        else if (candidate === ButtonsState.RightOpen) {
+            // если кандидат на открытие справа, то мы можем свайпнуть к открытию справа, дельта с отрицательным знаком
+            // потому что свайпаем вправо
+            swipeThresholdRef.current = { minDelta: -MIN_SWIPE_DISTANCE };
+        }
+    }, [useLongSwipe]);
+    // анимирует размер кнопок для перехода в переданное состояние
+    const animateToState = useCallback((toState, velocity) => {
+        leftBlockApi.stop();
+        rightBlockApi.stop();
+        stateRef.current.now = toState;
+        const animationConfig = {
+            width: 0,
+            config: {
+                ...config.gentle,
+                clamp: true,
+                velocity: 0,
+            },
+        };
+        let api;
+        // если нужно закрыть кнопки, то сначала определяем с какой стороны кнопки открыты
+        // получаем апи для акнимации кнопок с нужной стороны
+        // вычисляем начальную скорость, т.к. анимация закрытия кнопок с разных сторон направлена в разные стороны
+        // то для правой стороны нужно поменять знак начальной скорости
+        if (toState === ButtonsState.Close) {
+            const fromLeft = leftBlockApi.current[0].get().width > 0;
+            api = fromLeft ? leftBlockApi : rightBlockApi;
+            const v = fromLeft ? velocity : -velocity;
+            // скорость делим на 1000 т.к. в событии приходит скорость в пикселях в секунду
+            // а нужна в пикселях в миллисекунду
+            animationConfig.config.velocity = v / 1000;
+        }
+        else {
+            // если нужно открыть кнопки, то получаем апи для анимации блока кнопок с нужной стороны
+            // вычисляем начальную скорость, т.к. анимация открытия кнопок с разных сторон направлена в разные стороны
+            // то для правой стороны нужно поменять знак начальной скорости
+            api = toState === ButtonsState.LeftOpen ? leftBlockApi : rightBlockApi;
+            const v = toState === ButtonsState.LeftOpen ? velocity : -velocity;
+            animationConfig.width = Math.min(swipeableWidth, (toState === ButtonsState.LeftOpen ? leftButtonsSumSizeRef : rightButtonsSumSizeRef).current);
+            animationConfig.config.velocity = v / 1000;
+        }
+        void api.start(animationConfig)[0].then(({ finished }) => {
+            if (finished) {
+                stateRef.current.candidate = ButtonsState.Close;
+            }
+        });
+    }, [leftBlockApi, rightBlockApi, swipeableWidth]);
+    const handleSwipeStart = useCallback(() => {
+        if (demoInProgress || swipeLockRef.current) {
+            return;
+        }
+        rightBlockApi.stop();
+        leftBlockApi.stop();
+        onStart?.();
+        onResetDemo?.();
+        updateSwipeThreshold();
+        if (longState !== LongState.Off) {
+            setLongState(LongState.Off);
+        }
+        prevDistance.current = 0;
+        setAnimateButtonsWidth(false);
+    }, [
+        demoInProgress,
+        rightBlockApi,
+        leftBlockApi,
+        onStart,
+        onResetDemo,
+        updateSwipeThreshold,
+        longState,
+        setAnimateButtonsWidth,
+    ]);
+    const handleChangeButtonsSizeByDistance = useCallback((distance) => {
+        // работаем с изменением дистанции, чтобы добавлять ее к существующей ширине
+        const distanceDelta = distance - prevDistance.current;
+        if (distanceDelta === 0) {
+            return;
+        }
+        prevDistance.current = distance;
+        // определяем сторону свайпа, проверяем есть ли с этой стороны кнопки, если есть меняем ширину блока кнопок
+        const isLeft = stateRef.current.now === ButtonsState.LeftOpen ||
+            stateRef.current.candidate === ButtonsState.LeftOpen ||
+            (stateRef.current.now !== ButtonsState.RightOpen &&
+                stateRef.current.candidate === ButtonsState.Close &&
+                distanceDelta > 0);
+        const hasButtons = isLeft ? !!leftButtonsRef.current : !!rightButtonsRef.current;
+        const api = isLeft ? leftBlockApi : rightBlockApi;
+        const currentWidth = api.current[0].get().width;
+        if (!hasButtons) {
+            return;
+        }
+        const width = Math.max(currentWidth + (isLeft ? distanceDelta : -distanceDelta), 0);
+        api.set({ width });
+        // если ширина блока кнопок > 0 фиксируем сторону-кандидат
+        // чтобы не было возможности двигать влево-вправо за один свайп
+        if (width > 0) {
+            stateRef.current.candidate = isLeft ? ButtonsState.LeftOpen : ButtonsState.RightOpen;
+            updateSwipeThreshold();
+        }
+        // определяем значение justifyContent у контейнера в зависимости от того, с какой стороны сейчас раскрыты кнопки
+        // если раскрыты слева, то контент должен уходить за пределы области в право, ставим flex-start
+        // если раскрыты справа, то контент должен уходить за пределы области в лево, ставим flex-end
+        // визуально ничего не меняется, потому что контент в контейнере растянут на всю ширину
+        if (swipeableRef.current) {
+            swipeableRef.current.style.justifyContent =
+                stateRef.current.candidate === ButtonsState.RightOpen ? 'flex-end' : 'flex-start';
+        }
+        // определяем выполнены ли условия для перевода компонента в состояние длинного свайпа
+        // длинный свайп может быть отключен вообще или может быть недоступен если это сдвиг на проекцию
+        const sumSize = isLeft ? leftButtonsSumSizeRef.current : rightButtonsSumSizeRef.current;
+        if (useLongSwipe && width > sumSize + MIN_SWIPE_DISTANCE) {
+            setLongState(isLeft ? LongState.Left : LongState.Right);
+            stateRef.current.next = ButtonsState.Close;
+        }
+        else {
+            setLongState(LongState.Off);
+        }
+    }, [leftBlockApi, rightBlockApi, useLongSwipe, updateSwipeThreshold]);
+    const handleSwipeMove = useCallback((event) => {
+        if (demoInProgress || swipeLockRef.current) {
+            return;
+        }
+        // сдвиг в след за пальцем, можем делать длинный свайп
+        handleChangeButtonsSizeByDistance(event.distanceX);
+    }, [demoInProgress, handleChangeButtonsSizeByDistance]);
+    const runSwipeAnimation = useCallback(() => {
+        if (!swipeableRef.current) {
+            return;
+        }
+        if (stateRef.current.next === ButtonsState.Close) {
+            // свайп завершен, кнопки должны закрыться, потому что не выполнен минимальный размер раскрытия
+            // сбрасываем ширину в 0
+            if (leftButtonsRef.current) {
+                leftButtonsRef.current.style.width = '0';
+            }
+            leftButtonsSizeRef.current = 0;
+            if (rightButtonsRef.current) {
+                rightButtonsRef.current.style.width = '0';
+            }
+            rigthButtonsSizeRef.current = 0;
+        }
+        else if (stateRef.current.next === ButtonsState.LeftOpen) {
+            // выполнено условие раскрытия слева
+            // раскрываем кнопки на ширину их контента, но не больше ширины контейнера
+            const maxLeftSize = Math.min(swipeableWidth, leftButtonsSumSizeRef.current);
+            if (leftButtonsRef.current) {
+                leftButtonsRef.current.style.width = `${maxLeftSize}px`;
+            }
+            leftButtonsSizeRef.current = maxLeftSize;
+            rigthButtonsSizeRef.current = 0;
+        }
+        else if (stateRef.current.next === ButtonsState.RightOpen) {
+            // выполнено условие раскрытия справа
+            // раскрываем кнопки на ширину их контента, но не больше ширины контейнера
+            const maxRightSize = Math.min(swipeableWidth, rightButtonsSumSizeRef.current);
+            if (rightButtonsRef.current) {
+                rightButtonsRef.current.style.width = `${maxRightSize}px`;
+            }
+            rigthButtonsSizeRef.current = maxRightSize;
+            leftButtonsSizeRef.current = 0;
+        }
+        stateRef.current.now = stateRef.current.next;
+    }, [swipeableWidth]);
+    const handleSwipeFinish = useCallback((event) => {
+        if (demoInProgress) {
+            return;
+        }
+        onFinish?.();
+        // если это длинный свайп, то трггерим клик на соответствующую кнопку, и закрываем блок кнопок
+        // если не установлен флаг keepStateAfterLong
+        if (longState !== LongState.Off) {
+            const buttons = longState === LongState.Left ? leftButtons : rightButtons;
+            const button = longState === LongState.Left ? buttons?.[0] : buttons?.[buttons.length - 1];
+            button?.onClick();
+            onResetDemo?.();
+            swipeLockRef.current = !!button?.keepStateAfterLong;
+            if (!button?.keepStateAfterLong) {
+                animateToState(ButtonsState.Close, event.velocityX);
+            }
+            return;
+        }
+        // если это не длинный свайп, то анимируем к соответствующему состоянию
+        // если открыт левый или правый блок, то анимируем в закрытое состояние
+        // если закрыты оба блока, то анимируем к открытию стороны-кадидата
+        const { now, candidate } = stateRef.current;
+        animateToState([ButtonsState.LeftOpen, ButtonsState.RightOpen].includes(now) ? ButtonsState.Close : candidate, event.velocityX);
+    }, [demoInProgress, longState, leftButtons, rightButtons, onFinish, onResetDemo, animateToState]);
+    const handleSwipeCancel = useCallback((event) => {
+        animateToState(stateRef.current.now, event.velocityX);
+    }, [animateToState]);
+    const swipeHandlers = useSwipe({
+        thresholdXRef: swipeThresholdRef,
+        onSwipeStart: handleSwipeStart,
+        onSwipeMove: handleSwipeMove,
+        onSwipeEnd: handleSwipeFinish,
+        onSwipeCancel: handleSwipeCancel,
+    });
+    const preventHorizontalScroll = useCallback((e) => {
+        if (Math.abs(prevDistance.current) > MAIN_AXIS_THRESHOLD_PX) {
+            e.preventDefault();
+        }
+    }, []);
+    const swipebleRefCurrent = swipeableRef.current;
+    // выключаем вертикальный скролл, если у нас был минимальный горизонтальный скролл, чтобы не дергалось
+    useEffect(() => {
+        if (swipebleRefCurrent) {
+            swipebleRefCurrent.addEventListener('touchmove', preventHorizontalScroll, { passive: false });
+        }
+        return () => {
+            if (swipebleRefCurrent) {
+                swipebleRefCurrent.removeEventListener('touchmove', preventHorizontalScroll);
+            }
+        };
+    }, [preventHorizontalScroll, swipebleRefCurrent]);
+    const getButtonsFromSide = useCallback((side = stateRef.current.now) => {
+        const buttons = side === ButtonsState.RightOpen ? rightButtonsRef.current : leftButtonsRef.current;
+        const oppositeButtons = buttons === rightButtonsRef.current ? leftButtonsRef.current : rightButtonsRef.current;
+        return { buttons, oppositeButtons };
+    }, []);
+    const unmountDemoEndHandler = useCallback((event) => {
+        if (event.propertyName !== 'width') {
+            return;
+        }
+        setDemoInProgress(false);
+        const isTwoSidedSwipe = !!rightButtonsRef.current && !!leftButtonsRef.current;
+        const isLeft = isTwoSidedSwipe
+            ? twoSidedDemoMode === 'right-to-left' || twoSidedDemoMode === 'left'
+            : !!leftButtonsRef.current;
+        const buttons = isLeft ? leftButtonsRef.current : rightButtonsRef.current;
+        buttons?.removeEventListener('transitionend', unmountDemoEndHandler);
+        rootRef.current?.style.removeProperty('--transition-duration');
+        rootRef.current?.style.removeProperty('--transition-delay');
+        onResetDemo?.();
+        onFinishDemo?.();
+    }, [onFinishDemo, onResetDemo, twoSidedDemoMode]);
+    const demoSideAppearHandler = useCallback((event) => {
+        if (event.propertyName !== 'width') {
+            return;
+        }
+        const currentSide = stateRef.current.now;
+        const { buttons, oppositeButtons } = getButtonsFromSide(currentSide);
+        const appearedIsFirstOfSides = !!rightButtonsRef.current &&
+            !!leftButtonsRef.current &&
+            ((currentSide === ButtonsState.LeftOpen && twoSidedDemoMode === 'left-to-right') ||
+                (currentSide === ButtonsState.RightOpen && twoSidedDemoMode === 'right-to-left'));
+        buttons?.removeEventListener('transitionend', demoSideAppearHandler);
+        if (rootRef.current) {
+            rootRef.current.style.setProperty('--transition-duration', `${appearedIsFirstOfSides ? demoAppearTime : demoDisappearTime}ms`);
+            rootRef.current.style.setProperty('--transition-delay', `${demoIdleTime}ms`);
+        }
+        stateRef.current.next = ButtonsState.Close;
+        stateRef.current.candidate = stateRef.current.next;
+        runSwipeAnimation();
+        if (appearedIsFirstOfSides) {
+            stateRef.current.next =
+                currentSide === ButtonsState.LeftOpen ? ButtonsState.RightOpen : ButtonsState.LeftOpen;
+            stateRef.current.candidate = stateRef.current.next;
+            runSwipeAnimation();
+            const twiceSideTransitionHandler = () => {
+                oppositeButtons?.removeEventListener('transitionstart', twiceSideTransitionHandler);
+                if (oppositeButtons && childrenWrapperRef.current) {
+                    const isRight = currentSide === ButtonsState.RightOpen;
+                    childrenWrapperRef.current.style.transform = `translateX(${isRight ? leftButtonsSumSizeRef.current : -rightButtonsSumSizeRef.current}px)`;
+                }
+            };
+            oppositeButtons?.addEventListener('transitionstart', twiceSideTransitionHandler);
+            oppositeButtons?.addEventListener('transitionend', demoSideAppearHandler);
+        }
+        else {
+            const startDestroyDemoHandler = () => {
+                buttons?.removeEventListener('transitionstart', startDestroyDemoHandler);
+                childrenWrapperRef.current?.style.removeProperty('transform');
+            };
+            buttons?.addEventListener('transitionstart', startDestroyDemoHandler);
+            buttons?.addEventListener('transitionend', unmountDemoEndHandler);
+        }
+    }, [
+        getButtonsFromSide,
+        twoSidedDemoMode,
+        runSwipeAnimation,
+        demoAppearTime,
+        demoDisappearTime,
+        demoIdleTime,
+        unmountDemoEndHandler,
+    ]);
+    const startDemo = useCallback((side) => {
+        onResetDemo?.();
+        onStartDemo?.();
+        setDemoInProgress(true);
+        stateRef.current.now = ButtonsState.Close;
+        stateRef.current.next = side;
+        stateRef.current.candidate = side;
+        if (swipeableRef.current) {
+            swipeableRef.current.style.justifyContent = side === ButtonsState.RightOpen ? 'flex-end' : 'flex-start';
+        }
+        if (rootRef.current) {
+            rootRef.current.style.setProperty('--transition-duration', `${demoAppearTime}ms`);
+        }
+        setLongState(LongState.Off);
+        setAnimateButtonsWidth(true);
+        runSwipeAnimation();
+        const { buttons } = getButtonsFromSide(side);
+        buttons?.addEventListener('transitionend', demoSideAppearHandler);
+    }, [
+        demoAppearTime,
+        demoSideAppearHandler,
+        getButtonsFromSide,
+        runSwipeAnimation,
+        onResetDemo,
+        onStartDemo,
+        setAnimateButtonsWidth,
+    ]);
+    useEffect(() => {
+        if (demo &&
+            !demoInProgress &&
+            stateRef.current.now === ButtonsState.Close &&
+            swipeableRef.current?.style.width) {
+            const isTwoSidedSwipe = Boolean(rightButtonsRef.current && leftButtonsRef.current);
+            if (isTwoSidedSwipe) {
+                startDemo(twoSidedDemoMode === 'right' || twoSidedDemoMode === 'right-to-left'
+                    ? ButtonsState.RightOpen
+                    : ButtonsState.LeftOpen);
+            }
+            else {
+                startDemo(rightButtonsRef.current ? ButtonsState.RightOpen : ButtonsState.LeftOpen);
+            }
+        }
+        if (!isMobile && demoInProgress) {
+            setDemoInProgress(false);
+            stateRef.current = {
+                candidate: ButtonsState.Close,
+                now: ButtonsState.Close,
+                next: ButtonsState.Close,
+            };
+        }
+    }, [demo, twoSidedDemoMode, startDemo, demoInProgress, isMobile, onResetDemo]);
+    // подсчитываем реальный необходимый размер для кнопок
+    // и назначаем проперти исходя из положения кнопки (последняя/не последняя)
+    const handleButtonContentRef = useCallback((left, isGrow) => (ref) => {
+        // нужно чтобы посчитать размеры для каждой кнопки один раз (не придумал, как сделать лучше)
+        if (sumRefs.current.includes(ref) || !ref) {
+            return;
+        }
+        const width = ref?.offsetWidth ?? 0;
+        if (!isGrow) {
+            ref.style.maxWidth = `${width}px`;
+        }
+        sumRefs.current.push(ref);
+        if (left) {
+            leftButtonsSumSizeRef.current += width;
+        }
+        else {
+            rightButtonsSumSizeRef.current += width;
+        }
+    }, []);
+    const renderButtons = (buttons, ref, left) => {
+        const isTwoSidedDemoInProgress = leftButtons && rightButtons && demoInProgress;
+        return (jsx(Layer, { layer: LayerName.Content, children: jsx(animated.div, { className: classNames(styles.buttons, {
+                    [styles.buttonsLeft]: left && twoSidedDemoMode === 'right-to-left' && isTwoSidedDemoInProgress,
+                    [styles.buttonsRight]: !left && twoSidedDemoMode === 'left-to-right' && isTwoSidedDemoInProgress,
+                }), 
+                // "длинная" кнопка растягивается максимум на ширину контейнера (buttons)
+                // чтобы не было видно пустоты между ней и контейнером
+                // нужно устанавливать выравнивание в зависимости от стороны
+                style: {
+                    justifyContent: left ? 'flex-start' : 'flex-end',
+                    ...(left ? leftBlockStyles : rightBlockStyles),
+                }, ref: ref, "data-qa": `swipe-buttons-${left ? 'left' : 'right'}`, children: buttons.map((item, index) => {
+                    if (!item) {
+                        return null;
+                    }
+                    const isGrow = left ? index === 0 : index === buttons.length - 1;
+                    const isHide = (left && index !== 0 && longState === LongState.Left) ||
+                        (!left && index !== buttons.length - 1 && longState === LongState.Right);
+                    const Icon = item.icon;
+                    const iconProps = item.showLabel
+                        ? { 'aria-hidden': true, focusable: false }
+                        : { 'aria-label': item.label };
+                    return (jsx("button", { className: classNames(styles.button, {
+                            [styles.buttonGrow]: isGrow,
+                            [styles.buttonHide]: isHide,
+                            [styles[`button_style-${item.style}`]]: item.style,
+                        }), 
+                        // это нужно чтобы анимировался длинный свайп.
+                        // Здесь должно быть значение максимально близкое к тому,
+                        // какой максимум может занимать одна кнопка, если кнопок больше 1
+                        style: isGrow ? { maxWidth: `${swipeableWidth}px` } : {}, onClick: () => {
+                            if (demoInProgress) {
+                                return;
+                            }
+                            if (item.closeOnAction) {
+                                animateToState(ButtonsState.Close, 0);
+                            }
+                            item.onClick();
+                        }, "data-qa": `swipe-button-${left ? 'left' : 'right'}-${index}`, children: jsx("div", { className: styles.buttonContent, ref: handleButtonContentRef(left, isGrow), "data-qa": `swipe-button-content-${left ? 'left' : 'right'}-${index}`, children: jsxs("div", { className: styles.buttonContentColumn, children: [Icon && (jsx("div", { className: styles.iconWrapper, children: jsx(Icon, { ...iconProps }) })), item.showLabel && jsx("span", { className: styles.buttonLabel, children: item.label })] }) }) }, index));
+                }) }) }));
+    };
+    if (!isMobile) {
+        return null;
+    }
+    return (jsx("div", { className: styles.root, ref: rootRef, "data-qa": dataQa ?? 'swipe-root', children: jsxs("div", { className: classNames(styles.swipeble), ref: swipeableRef, ...swipeHandlers, "data-qa": "swipe-swipeable", children: [!!leftButtons?.length && renderButtons(leftButtons, leftButtonsRef, true), jsx("div", { ref: childrenWrapperRef, className: styles.childrenWrapper, children: children }), !!rightButtons?.length && renderButtons(rightButtons, rightButtonsRef, false)] }) }));
+};
+
+export { Swipe };
+//# sourceMappingURL=Swipe.js.map