@sberbusiness/triplex-next 1.52.0 → 1.53.0

package/components/Carousel/CarouselButton.js

@@ -1,26 +1,21 @@
 import { jsx } from "react/jsx-runtime";
-import React__default, { useContext, useCallback } from "react";
+import React__default, { useCallback, useContext } from "react";
 import { c as clsx } from "../../chunks/vendor-CUIykw0y.js";
-import { CarouselContext } from "./CarouselContext.js";
-import { useMatchMedia } from "../MediaWidth/useMatchMedia.js";
-import { ButtonIcon } from "../Button/ButtonIcon.js";
 import { CaretupStrokeSrvIcon20, CaretleftStrokeSrvIcon20, CaretdownStrokeSrvIcon20, CaretrightStrokeSrvIcon20 } from "@sberbusiness/icons-next";
 import { EOrientation } from "../../enums/EOrientation.js";
-import { s as styles } from "../../chunks/Carousel.module-D9WQGi1c.js";
-const ORIENTATION_TO_PREV_ICON_MAP = {
-  [EOrientation.HORIZONTAL]: /* @__PURE__ */ jsx(CaretleftStrokeSrvIcon20, { paletteIndex: 7 }),
-  [EOrientation.VERTICAL]: /* @__PURE__ */ jsx(CaretupStrokeSrvIcon20, { paletteIndex: 7 })
-};
-const CarouselPrevButton = React__default.forwardRef(
-  ({ children, className, onClick, ...restProps }, ref) => {
-    const { orientation, atStart, prevSlide } = useContext(CarouselContext);
+import { ButtonIcon } from "../Button/ButtonIcon.js";
+import { useMatchMedia } from "../MediaWidth/useMatchMedia.js";
+import { CarouselContext } from "./CarouselContext.js";
+import { s as styles } from "../../chunks/Carousel.module-wVF6c2RP.js";
+const CarouselNavButton = React__default.forwardRef(
+  ({ atBoundary, slide, onClick, className, children, defaultIcon, ...restProps }, ref) => {
     const touchDevice = useMatchMedia("(pointer: coarse)");
     const handleClick = useCallback(
       (event) => {
-        if (!atStart) prevSlide();
+        if (!atBoundary) slide();
         onClick == null ? void 0 : onClick(event);
       },
-      [atStart, prevSlide, onClick]
+      [atBoundary, slide, onClick]
     );
     if (touchDevice) {
       return null;
@@ -29,11 +24,32 @@ const CarouselPrevButton = React__default.forwardRef(
       ButtonIcon,
       {
         ...restProps,
-        className: clsx(styles.navButton, styles.prev, className),
-        "aria-disabled": atStart,
+        className: clsx(styles.navButton, className),
+        "aria-disabled": atBoundary,
         onClick: handleClick,
         ref,
-        children: children || ORIENTATION_TO_PREV_ICON_MAP[orientation]
+        children: children || defaultIcon
+      }
+    );
+  }
+);
+CarouselNavButton.displayName = "CarouselNavButton";
+const ORIENTATION_TO_PREV_ICON_MAP = {
+  [EOrientation.HORIZONTAL]: /* @__PURE__ */ jsx(CaretleftStrokeSrvIcon20, { paletteIndex: 7 }),
+  [EOrientation.VERTICAL]: /* @__PURE__ */ jsx(CaretupStrokeSrvIcon20, { paletteIndex: 7 })
+};
+const CarouselPrevButton = React__default.forwardRef(
+  ({ className, ...restProps }, ref) => {
+    const { orientation, atStart, prevSlide } = useContext(CarouselContext);
+    return /* @__PURE__ */ jsx(
+      CarouselNavButton,
+      {
+        ...restProps,
+        className: clsx(styles.prev, className),
+        atBoundary: atStart,
+        slide: prevSlide,
+        defaultIcon: ORIENTATION_TO_PREV_ICON_MAP[orientation],
+        ref
       }
     );
   }
@@ -44,28 +60,17 @@ const ORIENTATION_TO_NEXT_ICON_MAP = {
   [EOrientation.VERTICAL]: /* @__PURE__ */ jsx(CaretdownStrokeSrvIcon20, { paletteIndex: 7 })
 };
 const CarouselNextButton = React__default.forwardRef(
-  ({ children, className, onClick, ...restProps }, ref) => {
+  ({ className, ...restProps }, ref) => {
     const { orientation, atEnd, nextSlide } = useContext(CarouselContext);
-    const touchDevice = useMatchMedia("(pointer: coarse)");
-    const handleClick = useCallback(
-      (event) => {
-        if (!atEnd) nextSlide();
-        onClick == null ? void 0 : onClick(event);
-      },
-      [atEnd, nextSlide, onClick]
-    );
-    if (touchDevice) {
-      return null;
-    }
     return /* @__PURE__ */ jsx(
-      ButtonIcon,
+      CarouselNavButton,
       {
         ...restProps,
-        className: clsx(styles.navButton, styles.next, className),
-        "aria-disabled": atEnd,
-        onClick: handleClick,
-        ref,
-        children: children || ORIENTATION_TO_NEXT_ICON_MAP[orientation]
+        className: clsx(styles.next, className),
+        atBoundary: atEnd,
+        slide: nextSlide,
+        defaultIcon: ORIENTATION_TO_NEXT_ICON_MAP[orientation],
+        ref
       }
     );
   }

package/components/Carousel/CarouselButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselButton.js","sources":["../../../src/components/Carousel/CarouselButton.tsx"],"sourcesContent":["import React, { useContext, useCallback } from \"react\";\nimport clsx from \"clsx\";\nimport { CarouselContext } from \"./CarouselContext\";\nimport { useMatchMedia } from \"../MediaWidth/useMatchMedia\";\nimport { ButtonIcon, IButtonIconProps } from \"../Button/ButtonIcon\";\nimport {\n    CaretleftStrokeSrvIcon20,\n    CaretupStrokeSrvIcon20,\n    CaretrightStrokeSrvIcon20,\n    CaretdownStrokeSrvIcon20,\n} from \"@sberbusiness/icons-next\";\nimport { EOrientation } from \"../../enums\";\nimport styles from \"./styles/Carousel.module.less\";\n\nconst ORIENTATION_TO_PREV_ICON_MAP: Record<EOrientation, React.ReactElement> = {\n    [EOrientation.HORIZONTAL]: <CaretleftStrokeSrvIcon20 paletteIndex={7} />,\n    [EOrientation.VERTICAL]: <CaretupStrokeSrvIcon20 paletteIndex={7} />,\n};\n\nexport const CarouselPrevButton = React.forwardRef<HTMLButtonElement, IButtonIconProps>(\n    ({ children, className, onClick, ...restProps }, ref) => {\n        const { orientation, atStart, prevSlide } = useContext(CarouselContext);\n        const touchDevice = useMatchMedia(\"(pointer: coarse)\");\n\n        const handleClick = useCallback<React.MouseEventHandler<HTMLButtonElement>>(\n            (event) => {\n                if (!atStart) prevSlide();\n                onClick?.(event);\n            },\n            [atStart, prevSlide, onClick],\n        );\n\n        if (touchDevice) {\n            return null;\n        }\n\n        return (\n            <ButtonIcon\n                {...restProps}\n                className={clsx(styles.navButton, styles.prev, className)}\n                aria-disabled={atStart}\n                onClick={handleClick}\n                ref={ref}\n            >\n                {children || ORIENTATION_TO_PREV_ICON_MAP[orientation]}\n            </ButtonIcon>\n        );\n    },\n);\n\nCarouselPrevButton.displayName = \"Carousel.PrevButton\";\n\nconst ORIENTATION_TO_NEXT_ICON_MAP: Record<EOrientation, React.ReactElement> = {\n    [EOrientation.HORIZONTAL]: <CaretrightStrokeSrvIcon20 paletteIndex={7} />,\n    [EOrientation.VERTICAL]: <CaretdownStrokeSrvIcon20 paletteIndex={7} />,\n};\n\nexport const CarouselNextButton = React.forwardRef<HTMLButtonElement, IButtonIconProps>(\n    ({ children, className, onClick, ...restProps }, ref) => {\n        const { orientation, atEnd, nextSlide } = useContext(CarouselContext);\n        const touchDevice = useMatchMedia(\"(pointer: coarse)\");\n\n        const handleClick = useCallback<React.MouseEventHandler<HTMLButtonElement>>(\n            (event) => {\n                if (!atEnd) nextSlide();\n                onClick?.(event);\n            },\n            [atEnd, nextSlide, onClick],\n        );\n\n        if (touchDevice) {\n            return null;\n        }\n\n        return (\n            <ButtonIcon\n                {...restProps}\n                className={clsx(styles.navButton, styles.next, className)}\n                aria-disabled={atEnd}\n                onClick={handleClick}\n                ref={ref}\n            >\n                {children || ORIENTATION_TO_NEXT_ICON_MAP[orientation]}\n            </ButtonIcon>\n        );\n    },\n);\n\nCarouselNextButton.displayName = \"Carousel.NextButton\";\n"],"names":["React"],"mappings":";;;;;;;;;AAcA,MAAM,+BAAyE;AAAA,EAC3E,CAAC,aAAa,UAAU,GAAG,oBAAC,0BAAA,EAAyB,cAAc,GAAG;AAAA,EACtE,CAAC,aAAa,QAAQ,GAAG,oBAAC,wBAAA,EAAuB,cAAc,EAAA,CAAG;AACtE;AAEO,MAAM,qBAAqBA,eAAM;AAAA,EACpC,CAAC,EAAE,UAAU,WAAW,SAAS,GAAG,UAAA,GAAa,QAAQ;AACrD,UAAM,EAAE,aAAa,SAAS,UAAA,IAAc,WAAW,eAAe;AACtE,UAAM,cAAc,cAAc,mBAAmB;AAErD,UAAM,cAAc;AAAA,MAChB,CAAC,UAAU;AACP,YAAI,CAAC,QAAS,WAAA;AACd,2CAAU;AAAA,MACd;AAAA,MACA,CAAC,SAAS,WAAW,OAAO;AAAA,IAAA;AAGhC,QAAI,aAAa;AACb,aAAO;AAAA,IACX;AAEA,WACI;AAAA,MAAC;AAAA,MAAA;AAAA,QACI,GAAG;AAAA,QACJ,WAAW,KAAK,OAAO,WAAW,OAAO,MAAM,SAAS;AAAA,QACxD,iBAAe;AAAA,QACf,SAAS;AAAA,QACT;AAAA,QAEC,UAAA,YAAY,6BAA6B,WAAW;AAAA,MAAA;AAAA,IAAA;AAAA,EAGjE;AACJ;AAEA,mBAAmB,cAAc;AAEjC,MAAM,+BAAyE;AAAA,EAC3E,CAAC,aAAa,UAAU,GAAG,oBAAC,2BAAA,EAA0B,cAAc,GAAG;AAAA,EACvE,CAAC,aAAa,QAAQ,GAAG,oBAAC,0BAAA,EAAyB,cAAc,EAAA,CAAG;AACxE;AAEO,MAAM,qBAAqBA,eAAM;AAAA,EACpC,CAAC,EAAE,UAAU,WAAW,SAAS,GAAG,UAAA,GAAa,QAAQ;AACrD,UAAM,EAAE,aAAa,OAAO,UAAA,IAAc,WAAW,eAAe;AACpE,UAAM,cAAc,cAAc,mBAAmB;AAErD,UAAM,cAAc;AAAA,MAChB,CAAC,UAAU;AACP,YAAI,CAAC,MAAO,WAAA;AACZ,2CAAU;AAAA,MACd;AAAA,MACA,CAAC,OAAO,WAAW,OAAO;AAAA,IAAA;AAG9B,QAAI,aAAa;AACb,aAAO;AAAA,IACX;AAEA,WACI;AAAA,MAAC;AAAA,MAAA;AAAA,QACI,GAAG;AAAA,QACJ,WAAW,KAAK,OAAO,WAAW,OAAO,MAAM,SAAS;AAAA,QACxD,iBAAe;AAAA,QACf,SAAS;AAAA,QACT;AAAA,QAEC,UAAA,YAAY,6BAA6B,WAAW;AAAA,MAAA;AAAA,IAAA;AAAA,EAGjE;AACJ;AAEA,mBAAmB,cAAc;"}
+{"version":3,"file":"CarouselButton.js","sources":["../../../src/components/Carousel/CarouselButton.tsx"],"sourcesContent":["import React, { useContext, useCallback } from \"react\";\nimport clsx from \"clsx\";\nimport {\n    CaretleftStrokeSrvIcon20,\n    CaretupStrokeSrvIcon20,\n    CaretrightStrokeSrvIcon20,\n    CaretdownStrokeSrvIcon20,\n} from \"@sberbusiness/icons-next\";\nimport { EOrientation } from \"../../enums\";\nimport { ButtonIcon, IButtonIconProps } from \"../Button/ButtonIcon\";\nimport { useMatchMedia } from \"../MediaWidth/useMatchMedia\";\nimport { CarouselContext } from \"./CarouselContext\";\nimport styles from \"./styles/Carousel.module.less\";\n\n/** Свойства компонента CarouselNavButton. */\ninterface ICarouselNavButtonProps extends IButtonIconProps {\n    /** Карусель у края в направлении кнопки: переход не выполняется, `aria-disabled` равен `true`. */\n    atBoundary: boolean;\n    /** Переход к соседнему слайду в направлении кнопки. */\n    slide: () => void;\n    /** Иконка, когда `children` не заданы. */\n    defaultIcon: React.ReactElement;\n}\n\n/** Общая реализация `Carousel.PrevButton` и `Carousel.NextButton`. */\nconst CarouselNavButton = React.forwardRef<HTMLButtonElement, ICarouselNavButtonProps>(\n    ({ atBoundary, slide, onClick, className, children, defaultIcon, ...restProps }, ref) => {\n        const touchDevice = useMatchMedia(\"(pointer: coarse)\");\n\n        const handleClick = useCallback<React.MouseEventHandler<HTMLButtonElement>>(\n            (event) => {\n                if (!atBoundary) slide();\n                onClick?.(event);\n            },\n            [atBoundary, slide, onClick],\n        );\n\n        if (touchDevice) {\n            return null;\n        }\n\n        return (\n            <ButtonIcon\n                {...restProps}\n                className={clsx(styles.navButton, className)}\n                aria-disabled={atBoundary}\n                onClick={handleClick}\n                ref={ref}\n            >\n                {children || defaultIcon}\n            </ButtonIcon>\n        );\n    },\n);\n\nCarouselNavButton.displayName = \"CarouselNavButton\";\n\nconst ORIENTATION_TO_PREV_ICON_MAP: Record<EOrientation, React.ReactElement> = {\n    [EOrientation.HORIZONTAL]: <CaretleftStrokeSrvIcon20 paletteIndex={7} />,\n    [EOrientation.VERTICAL]: <CaretupStrokeSrvIcon20 paletteIndex={7} />,\n};\n\n/** Кнопка перехода к предыдущему слайду Carousel. При (pointer: coarse) не рендерится. */\nexport const CarouselPrevButton = React.forwardRef<HTMLButtonElement, IButtonIconProps>(\n    ({ className, ...restProps }, ref) => {\n        const { orientation, atStart, prevSlide } = useContext(CarouselContext);\n\n        return (\n            <CarouselNavButton\n                {...restProps}\n                className={clsx(styles.prev, className)}\n                atBoundary={atStart}\n                slide={prevSlide}\n                defaultIcon={ORIENTATION_TO_PREV_ICON_MAP[orientation]}\n                ref={ref}\n            />\n        );\n    },\n);\n\nCarouselPrevButton.displayName = \"Carousel.PrevButton\";\n\nconst ORIENTATION_TO_NEXT_ICON_MAP: Record<EOrientation, React.ReactElement> = {\n    [EOrientation.HORIZONTAL]: <CaretrightStrokeSrvIcon20 paletteIndex={7} />,\n    [EOrientation.VERTICAL]: <CaretdownStrokeSrvIcon20 paletteIndex={7} />,\n};\n\n/** Кнопка перехода к следующему слайду Carousel. При (pointer: coarse) не рендерится. */\nexport const CarouselNextButton = React.forwardRef<HTMLButtonElement, IButtonIconProps>(\n    ({ className, ...restProps }, ref) => {\n        const { orientation, atEnd, nextSlide } = useContext(CarouselContext);\n\n        return (\n            <CarouselNavButton\n                {...restProps}\n                className={clsx(styles.next, className)}\n                atBoundary={atEnd}\n                slide={nextSlide}\n                defaultIcon={ORIENTATION_TO_NEXT_ICON_MAP[orientation]}\n                ref={ref}\n            />\n        );\n    },\n);\n\nCarouselNextButton.displayName = \"Carousel.NextButton\";\n"],"names":["React"],"mappings":";;;;;;;;;AAyBA,MAAM,oBAAoBA,eAAM;AAAA,EAC5B,CAAC,EAAE,YAAY,OAAO,SAAS,WAAW,UAAU,aAAa,GAAG,UAAA,GAAa,QAAQ;AACrF,UAAM,cAAc,cAAc,mBAAmB;AAErD,UAAM,cAAc;AAAA,MAChB,CAAC,UAAU;AACP,YAAI,CAAC,WAAY,OAAA;AACjB,2CAAU;AAAA,MACd;AAAA,MACA,CAAC,YAAY,OAAO,OAAO;AAAA,IAAA;AAG/B,QAAI,aAAa;AACb,aAAO;AAAA,IACX;AAEA,WACI;AAAA,MAAC;AAAA,MAAA;AAAA,QACI,GAAG;AAAA,QACJ,WAAW,KAAK,OAAO,WAAW,SAAS;AAAA,QAC3C,iBAAe;AAAA,QACf,SAAS;AAAA,QACT;AAAA,QAEC,UAAA,YAAY;AAAA,MAAA;AAAA,IAAA;AAAA,EAGzB;AACJ;AAEA,kBAAkB,cAAc;AAEhC,MAAM,+BAAyE;AAAA,EAC3E,CAAC,aAAa,UAAU,GAAG,oBAAC,0BAAA,EAAyB,cAAc,GAAG;AAAA,EACtE,CAAC,aAAa,QAAQ,GAAG,oBAAC,wBAAA,EAAuB,cAAc,EAAA,CAAG;AACtE;AAGO,MAAM,qBAAqBA,eAAM;AAAA,EACpC,CAAC,EAAE,WAAW,GAAG,UAAA,GAAa,QAAQ;AAClC,UAAM,EAAE,aAAa,SAAS,UAAA,IAAc,WAAW,eAAe;AAEtE,WACI;AAAA,MAAC;AAAA,MAAA;AAAA,QACI,GAAG;AAAA,QACJ,WAAW,KAAK,OAAO,MAAM,SAAS;AAAA,QACtC,YAAY;AAAA,QACZ,OAAO;AAAA,QACP,aAAa,6BAA6B,WAAW;AAAA,QACrD;AAAA,MAAA;AAAA,IAAA;AAAA,EAGZ;AACJ;AAEA,mBAAmB,cAAc;AAEjC,MAAM,+BAAyE;AAAA,EAC3E,CAAC,aAAa,UAAU,GAAG,oBAAC,2BAAA,EAA0B,cAAc,GAAG;AAAA,EACvE,CAAC,aAAa,QAAQ,GAAG,oBAAC,0BAAA,EAAyB,cAAc,EAAA,CAAG;AACxE;AAGO,MAAM,qBAAqBA,eAAM;AAAA,EACpC,CAAC,EAAE,WAAW,GAAG,UAAA,GAAa,QAAQ;AAClC,UAAM,EAAE,aAAa,OAAO,UAAA,IAAc,WAAW,eAAe;AAEpE,WACI;AAAA,MAAC;AAAA,MAAA;AAAA,QACI,GAAG;AAAA,QACJ,WAAW,KAAK,OAAO,MAAM,SAAS;AAAA,QACtC,YAAY;AAAA,QACZ,OAAO;AAAA,QACP,aAAa,6BAA6B,WAAW;AAAA,QACrD;AAAA,MAAA;AAAA,IAAA;AAAA,EAGZ;AACJ;AAEA,mBAAmB,cAAc;"}

package/components/Carousel/CarouselIndicators.js

@@ -4,7 +4,7 @@ import { c as clsx } from "../../chunks/vendor-CUIykw0y.js";
 import { CarouselContext } from "./CarouselContext.js";
 import { ECarouselScrollMode } from "./enums.js";
 import { PageIndicators } from "../PageIndicators/PageIndicators.js";
-import { s as styles } from "../../chunks/Carousel.module-D9WQGi1c.js";
+import { s as styles } from "../../chunks/Carousel.module-wVF6c2RP.js";
 const CarouselIndicators = React__default.forwardRef(
   ({ className, ...restProps }, ref) => {
     const { currentIndex, orientation, scrollMode, activeIndices, goToSlide } = useContext(CarouselContext);

package/components/Carousel/CarouselItem.js

@@ -3,7 +3,7 @@ import React__default, { useContext, useRef, useCallback } from "react";
 import { c as clsx } from "../../chunks/vendor-CUIykw0y.js";
 import { CarouselContext } from "./CarouselContext.js";
 import { mergeRefs } from "../../utils/refs.js";
-import { s as styles } from "../../chunks/Carousel.module-D9WQGi1c.js";
+import { s as styles } from "../../chunks/Carousel.module-wVF6c2RP.js";
 const CarouselItem = React__default.forwardRef(
   ({ children, className, index, ...restProps }, ref) => {
     const { slideRefs } = useContext(CarouselContext);

package/components/Carousel/CarouselTrack.js

@@ -4,7 +4,7 @@ import { c as clsx } from "../../chunks/vendor-CUIykw0y.js";
 import { CarouselContext } from "./CarouselContext.js";
 import { mergeRefs } from "../../utils/refs.js";
 import { ORIENTATION_TRANSFORM } from "./constants.js";
-import { s as styles } from "../../chunks/Carousel.module-D9WQGi1c.js";
+import { s as styles } from "../../chunks/Carousel.module-wVF6c2RP.js";
 const CarouselTrack = React__default.forwardRef(
   ({ children, className, style, ...restProps }, ref) => {
     const { gap, orientation, offset, trackRef } = useContext(CarouselContext);

package/components/Carousel/CarouselViewport.js

@@ -2,18 +2,17 @@ import { jsx } from "react/jsx-runtime";
 import React__default, { useContext, useRef, useCallback, useEffect } from "react";
 import { c as clsx } from "../../chunks/vendor-CUIykw0y.js";
 import { CarouselContext } from "./CarouselContext.js";
-import { mergeRefs } from "../../utils/refs.js";
+import { mergeRefs, useLatestRef } from "../../utils/refs.js";
 import { ORIENTATION_TRANSFORM } from "./constants.js";
 import { EOrientation } from "../../enums/EOrientation.js";
-import { s as styles } from "../../chunks/Carousel.module-D9WQGi1c.js";
-const ORIENTATION_TO_TOUCH_KEY = {
-  [EOrientation.HORIZONTAL]: "clientX",
-  [EOrientation.VERTICAL]: "clientY"
-};
-const ORIENTATION_TO_CROSS_TOUCH_KEY = {
-  [EOrientation.HORIZONTAL]: "clientY",
-  [EOrientation.VERTICAL]: "clientX"
+import { s as styles } from "../../chunks/Carousel.module-wVF6c2RP.js";
+const ORIENTATION_TOUCH_KEYS = {
+  [EOrientation.HORIZONTAL]: { main: "clientX", cross: "clientY" },
+  [EOrientation.VERTICAL]: { main: "clientY", cross: "clientX" }
 };
+const AXIS_LOCK_THRESHOLD = 5;
+const SWIPE_THRESHOLD = 50;
+const RUBBER_BAND_RESISTANCE = 3;
 const CarouselViewport = React__default.forwardRef(
   ({ children, className, style, onTouchStart, ...restProps }, ref) => {
     const {
@@ -27,112 +26,83 @@ const CarouselViewport = React__default.forwardRef(
       trackRef
     } = useContext(CarouselContext);
     const combinedRef = mergeRefs(ref, viewportRef);
-    const draggingRef = useRef(false);
-    const scrollingRef = useRef(null);
-    const startCoordsRef = useRef({ clientX: 0, clientY: 0 });
-    const startOffsetRef = useRef(0);
-    const dragDistanceRef = useRef(0);
-    const touchMoveHandlerRef = useRef(null);
-    const touchEndHandlerRef = useRef(null);
+    const nextSlideRef = useLatestRef(nextSlide);
+    const prevSlideRef = useLatestRef(prevSlide);
+    const removeTouchListenersRef = useRef(null);
     const clearTouchListeners = useCallback(() => {
-      if (touchMoveHandlerRef.current) {
-        window.removeEventListener("touchmove", touchMoveHandlerRef.current);
-        touchMoveHandlerRef.current = null;
-      }
-      if (touchEndHandlerRef.current) {
-        window.removeEventListener("touchend", touchEndHandlerRef.current);
-        window.removeEventListener("touchcancel", touchEndHandlerRef.current);
-        touchEndHandlerRef.current = null;
-      }
+      var _a;
+      (_a = removeTouchListenersRef.current) == null ? void 0 : _a.call(removeTouchListenersRef);
+      removeTouchListenersRef.current = null;
     }, []);
-    const handleTouchMove = useCallback((event) => {
-      if (!draggingRef.current || !trackRef.current) return;
-      const touch = event.targetTouches[0];
-      if (!touch) return;
+    const startGesture = (touch) => {
       const orientation = orientationRef.current;
-      const touchKey = ORIENTATION_TO_TOUCH_KEY[orientation];
-      const crossKey = ORIENTATION_TO_CROSS_TOUCH_KEY[orientation];
-      const dragDistance = touch[touchKey] - startCoordsRef.current[touchKey];
-      const crossDistance = touch[crossKey] - startCoordsRef.current[crossKey];
-      if (scrollingRef.current === null) {
-        const absMain = Math.abs(dragDistance);
-        const absCross = Math.abs(crossDistance);
-        if (absMain > 5 || absCross > 5) {
-          scrollingRef.current = absCross > absMain;
+      const { main: mainKey, cross: crossKey } = ORIENTATION_TOUCH_KEYS[orientation];
+      const startMain = touch[mainKey];
+      const startCross = touch[crossKey];
+      const startOffset = offsetRef.current;
+      let scrolling = null;
+      let dragDistance = 0;
+      const handleTouchMove = (moveEvent) => {
+        if (!trackRef.current) return;
+        const moveTouch = moveEvent.targetTouches[0];
+        if (!moveTouch) return;
+        const mainDistance = moveTouch[mainKey] - startMain;
+        const crossDistance = moveTouch[crossKey] - startCross;
+        if (scrolling === null) {
+          const absMain = Math.abs(mainDistance);
+          const absCross = Math.abs(crossDistance);
+          if (absMain <= AXIS_LOCK_THRESHOLD && absCross <= AXIS_LOCK_THRESHOLD) return;
+          scrolling = absCross > absMain;
+          if (scrolling) {
+            window.removeEventListener("touchmove", handleTouchMove);
+            return;
+          }
+          trackRef.current.style.transition = "none";
         }
-      }
-      if (scrollingRef.current) {
-        return;
-      }
-      if (event.cancelable) {
-        event.preventDefault();
-      }
-      dragDistanceRef.current = dragDistance;
-      const maxOffset = maxOffsetRef.current;
-      const targetOffset = startOffsetRef.current - dragDistance;
-      let currentTranslate = -targetOffset;
-      if (targetOffset < 0) {
-        currentTranslate = -targetOffset / 3;
-      } else if (targetOffset > maxOffset) {
-        currentTranslate = -(maxOffset + (targetOffset - maxOffset) / 3);
-      }
-      trackRef.current.style.transform = ORIENTATION_TRANSFORM[orientation](currentTranslate);
-      trackRef.current.style.transition = "none";
-    }, []);
-    const handleTouchEnd = useCallback(
-      (event) => {
-        if (!draggingRef.current) return;
-        draggingRef.current = false;
-        const scrolling = scrollingRef.current;
-        scrollingRef.current = null;
+        if (moveEvent.cancelable) {
+          moveEvent.preventDefault();
+        }
+        dragDistance = mainDistance;
+        const maxOffset = maxOffsetRef.current;
+        const targetOffset = startOffset - mainDistance;
+        let currentTranslate = -targetOffset;
+        if (targetOffset < 0) {
+          currentTranslate = -targetOffset / RUBBER_BAND_RESISTANCE;
+        } else if (targetOffset > maxOffset) {
+          currentTranslate = -(maxOffset + (targetOffset - maxOffset) / RUBBER_BAND_RESISTANCE);
+        }
+        trackRef.current.style.transform = ORIENTATION_TRANSFORM[orientation](currentTranslate);
+      };
+      const handleTouchEnd = (endEvent) => {
         clearTouchListeners();
         if (!trackRef.current) return;
         trackRef.current.style.transition = "";
-        if (event.type === "touchcancel" || scrolling) {
-          trackRef.current.style.transform = "";
-          return;
-        }
-        const finalDrag = dragDistanceRef.current;
-        const threshold = 50;
-        if (finalDrag > threshold) {
-          prevSlide();
-        } else if (finalDrag < -threshold) {
-          nextSlide();
-        }
         trackRef.current.style.transform = "";
-      },
-      [nextSlide, prevSlide, clearTouchListeners]
-    );
-    const handleTouchStart = useCallback(
-      (event) => {
-        const touch = event.targetTouches[0];
-        if (!touch) return;
-        draggingRef.current = true;
-        scrollingRef.current = null;
-        startCoordsRef.current = {
-          clientX: touch.clientX,
-          clientY: touch.clientY
-        };
-        startOffsetRef.current = offsetRef.current;
-        dragDistanceRef.current = 0;
-        if (trackRef.current) {
-          trackRef.current.style.transition = "none";
+        if (endEvent.type === "touchcancel" || scrolling) return;
+        if (dragDistance > SWIPE_THRESHOLD) {
+          prevSlideRef.current();
+        } else if (dragDistance < -SWIPE_THRESHOLD) {
+          nextSlideRef.current();
         }
-        clearTouchListeners();
-        touchMoveHandlerRef.current = handleTouchMove;
-        touchEndHandlerRef.current = handleTouchEnd;
-        window.addEventListener("touchmove", handleTouchMove, { passive: false });
-        window.addEventListener("touchend", handleTouchEnd);
-        window.addEventListener("touchcancel", handleTouchEnd);
-        onTouchStart == null ? void 0 : onTouchStart(event);
-      },
-      [handleTouchMove, handleTouchEnd, clearTouchListeners, onTouchStart]
-    );
-    useEffect(() => {
-      return () => {
-        clearTouchListeners();
       };
-    }, [clearTouchListeners]);
+      clearTouchListeners();
+      window.addEventListener("touchmove", handleTouchMove, { passive: false });
+      window.addEventListener("touchend", handleTouchEnd);
+      window.addEventListener("touchcancel", handleTouchEnd);
+      removeTouchListenersRef.current = () => {
+        window.removeEventListener("touchmove", handleTouchMove);
+        window.removeEventListener("touchend", handleTouchEnd);
+        window.removeEventListener("touchcancel", handleTouchEnd);
+      };
+    };
+    const handleTouchStart = (event) => {
+      const touch = event.targetTouches[0];
+      if (touch) {
+        startGesture(touch);
+      }
+      onTouchStart == null ? void 0 : onTouchStart(event);
+    };
+    useEffect(() => clearTouchListeners, [clearTouchListeners]);
     const runtimeStyle = {
       "--triplex-next-runtime-carousel-viewport-padding": viewportPaddingStyle
     };

package/components/Carousel/CarouselViewport.js.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselViewport.js","sources":["../../../src/components/Carousel/CarouselViewport.tsx"],"sourcesContent":["import React, { useContext, useRef, useCallback, useEffect } from \"react\";\nimport clsx from \"clsx\";\nimport { ICarouselViewportProps } from \"./types\";\nimport { CarouselContext } from \"./CarouselContext\";\nimport { mergeRefs } from \"../../utils/refs\";\nimport { ORIENTATION_TRANSFORM } from \"./constants\";\nimport { EOrientation } from \"../../enums\";\nimport styles from \"./styles/Carousel.module.less\";\n\nconst ORIENTATION_TO_TOUCH_KEY = {\n    [EOrientation.HORIZONTAL]: \"clientX\",\n    [EOrientation.VERTICAL]: \"clientY\",\n} as const;\n\nconst ORIENTATION_TO_CROSS_TOUCH_KEY = {\n    [EOrientation.HORIZONTAL]: \"clientY\",\n    [EOrientation.VERTICAL]: \"clientX\",\n} as const;\n\nexport const CarouselViewport = React.forwardRef<HTMLDivElement, ICarouselViewportProps>(\n    ({ children, className, style, onTouchStart, ...restProps }, ref) => {\n        const {\n            viewportPaddingStyle,\n            nextSlide,\n            prevSlide,\n            offsetRef,\n            maxOffsetRef,\n            orientationRef,\n            viewportRef,\n            trackRef,\n        } = useContext(CarouselContext);\n        const combinedRef = mergeRefs(ref, viewportRef);\n\n        const draggingRef = useRef(false);\n        const scrollingRef = useRef<boolean | null>(null);\n\n        const startCoordsRef = useRef({ clientX: 0, clientY: 0 });\n        const startOffsetRef = useRef(0);\n        const dragDistanceRef = useRef(0);\n\n        const touchMoveHandlerRef = useRef<typeof handleTouchMove | null>(null);\n        const touchEndHandlerRef = useRef<typeof handleTouchEnd | null>(null);\n\n        const clearTouchListeners = useCallback(() => {\n            if (touchMoveHandlerRef.current) {\n                window.removeEventListener(\"touchmove\", touchMoveHandlerRef.current);\n                touchMoveHandlerRef.current = null;\n            }\n            if (touchEndHandlerRef.current) {\n                window.removeEventListener(\"touchend\", touchEndHandlerRef.current);\n                window.removeEventListener(\"touchcancel\", touchEndHandlerRef.current);\n                touchEndHandlerRef.current = null;\n            }\n        }, []);\n\n        const handleTouchMove = useCallback((event: TouchEvent) => {\n            if (!draggingRef.current || !trackRef.current) return;\n\n            const touch = event.targetTouches[0];\n            if (!touch) return;\n\n            const orientation = orientationRef.current;\n            const touchKey = ORIENTATION_TO_TOUCH_KEY[orientation];\n            const crossKey = ORIENTATION_TO_CROSS_TOUCH_KEY[orientation];\n\n            const dragDistance = touch[touchKey] - startCoordsRef.current[touchKey];\n            const crossDistance = touch[crossKey] - startCoordsRef.current[crossKey];\n\n            if (scrollingRef.current === null) {\n                const absMain = Math.abs(dragDistance);\n                const absCross = Math.abs(crossDistance);\n\n                if (absMain > 5 || absCross > 5) {\n                    scrollingRef.current = absCross > absMain;\n                }\n            }\n\n            if (scrollingRef.current) {\n                return;\n            }\n\n            if (event.cancelable) {\n                event.preventDefault();\n            }\n\n            dragDistanceRef.current = dragDistance;\n            const maxOffset = maxOffsetRef.current;\n            const targetOffset = startOffsetRef.current - dragDistance;\n            let currentTranslate = -targetOffset;\n\n            if (targetOffset < 0) {\n                currentTranslate = -targetOffset / 3;\n            } else if (targetOffset > maxOffset) {\n                currentTranslate = -(maxOffset + (targetOffset - maxOffset) / 3);\n            }\n\n            trackRef.current.style.transform = ORIENTATION_TRANSFORM[orientation](currentTranslate);\n            trackRef.current.style.transition = \"none\";\n        }, []);\n\n        const handleTouchEnd = useCallback(\n            (event: TouchEvent) => {\n                if (!draggingRef.current) return;\n\n                draggingRef.current = false;\n\n                const scrolling = scrollingRef.current;\n                scrollingRef.current = null;\n\n                clearTouchListeners();\n\n                if (!trackRef.current) return;\n\n                trackRef.current.style.transition = \"\";\n\n                if (event.type === \"touchcancel\" || scrolling) {\n                    trackRef.current.style.transform = \"\";\n                    return;\n                }\n\n                const finalDrag = dragDistanceRef.current;\n                const threshold = 50;\n\n                if (finalDrag > threshold) {\n                    prevSlide();\n                } else if (finalDrag < -threshold) {\n                    nextSlide();\n                }\n\n                trackRef.current.style.transform = \"\";\n            },\n            [nextSlide, prevSlide, clearTouchListeners],\n        );\n\n        const handleTouchStart = useCallback<React.TouchEventHandler<HTMLDivElement>>(\n            (event) => {\n                const touch = event.targetTouches[0];\n                if (!touch) return;\n\n                draggingRef.current = true;\n                scrollingRef.current = null;\n\n                startCoordsRef.current = {\n                    clientX: touch.clientX,\n                    clientY: touch.clientY,\n                };\n\n                startOffsetRef.current = offsetRef.current;\n                dragDistanceRef.current = 0;\n\n                if (trackRef.current) {\n                    trackRef.current.style.transition = \"none\";\n                }\n\n                clearTouchListeners();\n\n                touchMoveHandlerRef.current = handleTouchMove;\n                touchEndHandlerRef.current = handleTouchEnd;\n\n                window.addEventListener(\"touchmove\", handleTouchMove, { passive: false });\n                window.addEventListener(\"touchend\", handleTouchEnd);\n                window.addEventListener(\"touchcancel\", handleTouchEnd);\n\n                onTouchStart?.(event);\n            },\n            [handleTouchMove, handleTouchEnd, clearTouchListeners, onTouchStart],\n        );\n\n        useEffect(() => {\n            return () => {\n                clearTouchListeners();\n            };\n        }, [clearTouchListeners]);\n\n        const runtimeStyle = {\n            \"--triplex-next-runtime-carousel-viewport-padding\": viewportPaddingStyle,\n        };\n\n        return (\n            <div\n                className={clsx(styles.viewPort, className)}\n                {...restProps}\n                onTouchStart={handleTouchStart}\n                style={{\n                    ...style,\n                    ...runtimeStyle,\n                }}\n                ref={combinedRef}\n            >\n                {children}\n            </div>\n        );\n    },\n);\n\nCarouselViewport.displayName = \"Carousel.Viewport\";\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"CarouselViewport.js","sources":["../../../src/components/Carousel/CarouselViewport.tsx"],"sourcesContent":["import React, { useContext, useRef, useCallback, useEffect } from \"react\";\nimport clsx from \"clsx\";\nimport { ICarouselViewportProps } from \"./types\";\nimport { CarouselContext } from \"./CarouselContext\";\nimport { mergeRefs, useLatestRef } from \"../../utils/refs\";\nimport { ORIENTATION_TRANSFORM } from \"./constants\";\nimport { EOrientation } from \"../../enums\";\nimport styles from \"./styles/Carousel.module.less\";\n\nconst ORIENTATION_TOUCH_KEYS = {\n    [EOrientation.HORIZONTAL]: { main: \"clientX\", cross: \"clientY\" },\n    [EOrientation.VERTICAL]: { main: \"clientY\", cross: \"clientX\" },\n} as const;\n\n/** Смещение в px, после которого жест закрепляется за осью карусели или за прокруткой страницы. */\nconst AXIS_LOCK_THRESHOLD = 5;\n/** Строгий порог в px вдоль оси для перехода к соседнему слайду. */\nconst SWIPE_THRESHOLD = 50;\n/** Во сколько раз уменьшается смещение за границей ленты. */\nconst RUBBER_BAND_RESISTANCE = 3;\n\n/** Область просмотра карусели: ограничивает ленту и обрабатывает touch-жесты. */\nexport const CarouselViewport = React.forwardRef<HTMLDivElement, ICarouselViewportProps>(\n    ({ children, className, style, onTouchStart, ...restProps }, ref) => {\n        const {\n            viewportPaddingStyle,\n            nextSlide,\n            prevSlide,\n            offsetRef,\n            maxOffsetRef,\n            orientationRef,\n            viewportRef,\n            trackRef,\n        } = useContext(CarouselContext);\n        const combinedRef = mergeRefs(ref, viewportRef);\n        // Обработчики на window живут весь жест, поэтому навигация берётся актуальной на момент touchend.\n        const nextSlideRef = useLatestRef(nextSlide);\n        const prevSlideRef = useLatestRef(prevSlide);\n\n        const removeTouchListenersRef = useRef<(() => void) | null>(null);\n\n        const clearTouchListeners = useCallback(() => {\n            removeTouchListenersRef.current?.();\n            removeTouchListenersRef.current = null;\n        }, []);\n\n        const startGesture = (touch: React.Touch) => {\n            const orientation = orientationRef.current;\n            const { main: mainKey, cross: crossKey } = ORIENTATION_TOUCH_KEYS[orientation];\n            const startMain = touch[mainKey];\n            const startCross = touch[crossKey];\n            const startOffset = offsetRef.current;\n            let scrolling: boolean | null = null;\n            let dragDistance = 0;\n\n            const handleTouchMove = (moveEvent: TouchEvent) => {\n                if (!trackRef.current) return;\n\n                const moveTouch = moveEvent.targetTouches[0];\n                if (!moveTouch) return;\n\n                const mainDistance = moveTouch[mainKey] - startMain;\n                const crossDistance = moveTouch[crossKey] - startCross;\n\n                if (scrolling === null) {\n                    const absMain = Math.abs(mainDistance);\n                    const absCross = Math.abs(crossDistance);\n\n                    // До выбора оси touchmove не отменяется: иначе браузер может не начать прокрутку страницы.\n                    if (absMain <= AXIS_LOCK_THRESHOLD && absCross <= AXIS_LOCK_THRESHOLD) return;\n\n                    scrolling = absCross > absMain;\n\n                    if (scrolling) {\n                        // Иначе браузер ждёт non-passive listener на каждом touchmove прокрутки.\n                        window.removeEventListener(\"touchmove\", handleTouchMove);\n                        return;\n                    }\n\n                    // Отключение transition обрывает анимацию перехода, поэтому только для жеста по оси карусели.\n                    trackRef.current.style.transition = \"none\";\n                }\n\n                if (moveEvent.cancelable) {\n                    moveEvent.preventDefault();\n                }\n\n                dragDistance = mainDistance;\n                const maxOffset = maxOffsetRef.current;\n                const targetOffset = startOffset - mainDistance;\n                let currentTranslate = -targetOffset;\n\n                if (targetOffset < 0) {\n                    currentTranslate = -targetOffset / RUBBER_BAND_RESISTANCE;\n                } else if (targetOffset > maxOffset) {\n                    currentTranslate = -(maxOffset + (targetOffset - maxOffset) / RUBBER_BAND_RESISTANCE);\n                }\n\n                trackRef.current.style.transform = ORIENTATION_TRANSFORM[orientation](currentTranslate);\n            };\n\n            const handleTouchEnd = (endEvent: TouchEvent) => {\n                clearTouchListeners();\n\n                if (!trackRef.current) return;\n\n                trackRef.current.style.transition = \"\";\n                trackRef.current.style.transform = \"\";\n\n                if (endEvent.type === \"touchcancel\" || scrolling) return;\n\n                if (dragDistance > SWIPE_THRESHOLD) {\n                    prevSlideRef.current();\n                } else if (dragDistance < -SWIPE_THRESHOLD) {\n                    nextSlideRef.current();\n                }\n            };\n\n            clearTouchListeners();\n\n            window.addEventListener(\"touchmove\", handleTouchMove, { passive: false });\n            window.addEventListener(\"touchend\", handleTouchEnd);\n            window.addEventListener(\"touchcancel\", handleTouchEnd);\n\n            removeTouchListenersRef.current = () => {\n                window.removeEventListener(\"touchmove\", handleTouchMove);\n                window.removeEventListener(\"touchend\", handleTouchEnd);\n                window.removeEventListener(\"touchcancel\", handleTouchEnd);\n            };\n        };\n\n        const handleTouchStart = (event: React.TouchEvent<HTMLDivElement>) => {\n            const touch = event.targetTouches[0];\n            if (touch) {\n                startGesture(touch);\n            }\n\n            onTouchStart?.(event);\n        };\n\n        useEffect(() => clearTouchListeners, [clearTouchListeners]);\n\n        const runtimeStyle = {\n            \"--triplex-next-runtime-carousel-viewport-padding\": viewportPaddingStyle,\n        };\n\n        return (\n            <div\n                className={clsx(styles.viewPort, className)}\n                {...restProps}\n                onTouchStart={handleTouchStart}\n                style={{\n                    ...style,\n                    ...runtimeStyle,\n                }}\n                ref={combinedRef}\n            >\n                {children}\n            </div>\n        );\n    },\n);\n\nCarouselViewport.displayName = \"Carousel.Viewport\";\n"],"names":["React"],"mappings":";;;;;;;;AASA,MAAM,yBAAyB;AAAA,EAC3B,CAAC,aAAa,UAAU,GAAG,EAAE,MAAM,WAAW,OAAO,UAAA;AAAA,EACrD,CAAC,aAAa,QAAQ,GAAG,EAAE,MAAM,WAAW,OAAO,UAAA;AACvD;AAGA,MAAM,sBAAsB;AAE5B,MAAM,kBAAkB;AAExB,MAAM,yBAAyB;AAGxB,MAAM,mBAAmBA,eAAM;AAAA,EAClC,CAAC,EAAE,UAAU,WAAW,OAAO,cAAc,GAAG,UAAA,GAAa,QAAQ;AACjE,UAAM;AAAA,MACF;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,IACA,WAAW,eAAe;AAC9B,UAAM,cAAc,UAAU,KAAK,WAAW;AAE9C,UAAM,eAAe,aAAa,SAAS;AAC3C,UAAM,eAAe,aAAa,SAAS;AAE3C,UAAM,0BAA0B,OAA4B,IAAI;AAEhE,UAAM,sBAAsB,YAAY,MAAM;;AAC1C,oCAAwB,YAAxB;AACA,8BAAwB,UAAU;AAAA,IACtC,GAAG,CAAA,CAAE;AAEL,UAAM,eAAe,CAAC,UAAuB;AACzC,YAAM,cAAc,eAAe;AACnC,YAAM,EAAE,MAAM,SAAS,OAAO,SAAA,IAAa,uBAAuB,WAAW;AAC7E,YAAM,YAAY,MAAM,OAAO;AAC/B,YAAM,aAAa,MAAM,QAAQ;AACjC,YAAM,cAAc,UAAU;AAC9B,UAAI,YAA4B;AAChC,UAAI,eAAe;AAEnB,YAAM,kBAAkB,CAAC,cAA0B;AAC/C,YAAI,CAAC,SAAS,QAAS;AAEvB,cAAM,YAAY,UAAU,cAAc,CAAC;AAC3C,YAAI,CAAC,UAAW;AAEhB,cAAM,eAAe,UAAU,OAAO,IAAI;AAC1C,cAAM,gBAAgB,UAAU,QAAQ,IAAI;AAE5C,YAAI,cAAc,MAAM;AACpB,gBAAM,UAAU,KAAK,IAAI,YAAY;AACrC,gBAAM,WAAW,KAAK,IAAI,aAAa;AAGvC,cAAI,WAAW,uBAAuB,YAAY,oBAAqB;AAEvE,sBAAY,WAAW;AAEvB,cAAI,WAAW;AAEX,mBAAO,oBAAoB,aAAa,eAAe;AACvD;AAAA,UACJ;AAGA,mBAAS,QAAQ,MAAM,aAAa;AAAA,QACxC;AAEA,YAAI,UAAU,YAAY;AACtB,oBAAU,eAAA;AAAA,QACd;AAEA,uBAAe;AACf,cAAM,YAAY,aAAa;AAC/B,cAAM,eAAe,cAAc;AACnC,YAAI,mBAAmB,CAAC;AAExB,YAAI,eAAe,GAAG;AAClB,6BAAmB,CAAC,eAAe;AAAA,QACvC,WAAW,eAAe,WAAW;AACjC,6BAAmB,EAAE,aAAa,eAAe,aAAa;AAAA,QAClE;AAEA,iBAAS,QAAQ,MAAM,YAAY,sBAAsB,WAAW,EAAE,gBAAgB;AAAA,MAC1F;AAEA,YAAM,iBAAiB,CAAC,aAAyB;AAC7C,4BAAA;AAEA,YAAI,CAAC,SAAS,QAAS;AAEvB,iBAAS,QAAQ,MAAM,aAAa;AACpC,iBAAS,QAAQ,MAAM,YAAY;AAEnC,YAAI,SAAS,SAAS,iBAAiB,UAAW;AAElD,YAAI,eAAe,iBAAiB;AAChC,uBAAa,QAAA;AAAA,QACjB,WAAW,eAAe,CAAC,iBAAiB;AACxC,uBAAa,QAAA;AAAA,QACjB;AAAA,MACJ;AAEA,0BAAA;AAEA,aAAO,iBAAiB,aAAa,iBAAiB,EAAE,SAAS,OAAO;AACxE,aAAO,iBAAiB,YAAY,cAAc;AAClD,aAAO,iBAAiB,eAAe,cAAc;AAErD,8BAAwB,UAAU,MAAM;AACpC,eAAO,oBAAoB,aAAa,eAAe;AACvD,eAAO,oBAAoB,YAAY,cAAc;AACrD,eAAO,oBAAoB,eAAe,cAAc;AAAA,MAC5D;AAAA,IACJ;AAEA,UAAM,mBAAmB,CAAC,UAA4C;AAClE,YAAM,QAAQ,MAAM,cAAc,CAAC;AACnC,UAAI,OAAO;AACP,qBAAa,KAAK;AAAA,MACtB;AAEA,mDAAe;AAAA,IACnB;AAEA,cAAU,MAAM,qBAAqB,CAAC,mBAAmB,CAAC;AAE1D,UAAM,eAAe;AAAA,MACjB,oDAAoD;AAAA,IAAA;AAGxD,WACI;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,KAAK,OAAO,UAAU,SAAS;AAAA,QACzC,GAAG;AAAA,QACJ,cAAc;AAAA,QACd,OAAO;AAAA,UACH,GAAG;AAAA,UACH,GAAG;AAAA,QAAA;AAAA,QAEP,KAAK;AAAA,QAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAGb;AACJ;AAEA,iBAAiB,cAAc;"}

package/components/CarouselExtended/CarouselExtended.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import React__default, { useState, useRef, useCallback, useEffect } from "react";
 import { scrollSmoothHorizontally } from "../../utils/scroll.js";
 import { i as isEqual } from "../../chunks/vendor-CUIykw0y.js";
-const carouselExtended = "carouselExtended__0dd4d512";
+const carouselExtended = "carouselExtended__bc81398a";
 const styles = {
   carouselExtended
 };

package/components/Checkbox/Checkbox.js

@@ -9,15 +9,15 @@ import { Text } from "../Typography/Text.js";
 import "../Typography/Title.js";
 import { EComponentSize } from "../../enums/EComponentSize.js";
 import { createSizeToClassNameMap } from "../../utils/classNameMaps.js";
-const label = "label__2d15191c";
-const sm = "sm__3adb8d77";
-const nonempty = "nonempty__68f5d5b7";
-const md = "md__d4624f5a";
-const lg = "lg__2573227d";
-const disabled = "disabled__e654fce9";
-const checkbox = "checkbox__ac18c5df";
-const checkboxIcon = "checkboxIcon__f6327454";
-const checkmarkIcon = "checkmarkIcon__7fbeb717";
+const label = "label__49f8ba27";
+const sm = "sm__91991992";
+const nonempty = "nonempty__3222a6f4";
+const md = "md__17f7a05e";
+const lg = "lg__dbca4076";
+const disabled = "disabled__87d76fc0";
+const checkbox = "checkbox__cff3967c";
+const checkboxIcon = "checkboxIcon__0aeefd35";
+const checkmarkIcon = "checkmarkIcon__d44c93f9";
 const styles = {
   label,
   sm,
@@ -53,7 +53,7 @@ const Checkbox = React__default.forwardRef((props, ref) => {
     labelAttributes == null ? void 0 : labelAttributes.className
   );
   const CheckmarkIcon = bulk ? CheckboxbulkStrokeSrvIcon24 : CheckboxtickStrokeSrvIcon24;
-  return /* @__PURE__ */ jsxs("label", { ...labelAttributes, className: labelClassName, "data-tx": "1.52.0", children: [
+  return /* @__PURE__ */ jsxs("label", { ...labelAttributes, className: labelClassName, "data-tx": "1.53.0", children: [
     /* @__PURE__ */ jsx("input", { type: "checkbox", className: styles.checkbox, disabled: disabled2, ...inputAttributes, ref }),
     /* @__PURE__ */ jsx("span", { className: styles.checkboxIcon }),
     /* @__PURE__ */ jsx(CheckmarkIcon, { className: styles.checkmarkIcon, paletteIndex: 7 }),

package/components/Checkbox/CheckboxXGroup.js

@@ -1,17 +1,17 @@
 import { jsx } from "react/jsx-runtime";
 import React__default from "react";
 import { c as clsx } from "../../chunks/vendor-CUIykw0y.js";
-const checkboxXGroup = "checkboxXGroup__4487e4ba";
-const label = "label__2d15191c";
+const checkboxXGroup = "checkboxXGroup__3893539c";
+const label = "label__49f8ba27";
 const styles = {
   checkboxXGroup,
-  "indent-12": "indent-12__a425399d",
+  "indent-12": "indent-12__cfe13070",
   label,
-  "indent-16": "indent-16__6197271a",
-  "indent-20": "indent-20__d328dbfb",
-  "indent-24": "indent-24__2414f78f",
-  "indent-28": "indent-28__45e370ce",
-  "indent-32": "indent-32__2799d896"
+  "indent-16": "indent-16__e0de7f27",
+  "indent-20": "indent-20__54804de1",
+  "indent-24": "indent-24__3bba52e4",
+  "indent-28": "indent-28__81e2daf7",
+  "indent-32": "indent-32__b8a2ecf4"
 };
 const CheckboxXGroup = React__default.forwardRef((props, ref) => {
   const { children, className, indent = 12, ...rest } = props;

package/components/Checkbox/CheckboxYGroup.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import React__default from "react";
 import { c as clsx } from "../../chunks/vendor-CUIykw0y.js";
-const checkboxYGroup = "checkboxYGroup__d8c66adf";
+const checkboxYGroup = "checkboxYGroup__eb662ed8";
 const styles = {
   checkboxYGroup
 };

package/components/CheckboxTreeExtended/CheckboxTreeExtended.js

@@ -8,7 +8,7 @@ import { useMobileView } from "../MobileView/useMobileView.js";
 import { CheckboxTreeExtendedContext } from "./CheckboxTreeExtendedContext.js";
 import { CheckboxTreeExtendedCheckbox } from "./components/CheckboxTreeExtendedCheckbox.js";
 import { CheckboxTreeExtendedNode } from "./components/CheckboxTreeExtendedNode.js";
-import { s as styles } from "../../chunks/CheckboxTreeExtended.module-CGwoKN_-.js";
+import { s as styles } from "../../chunks/CheckboxTreeExtended.module-C9MBlDS4.js";
 const CheckboxTreeExtended = Object.assign(
   React__default.forwardRef(
     ({ className, size = EComponentSize.MD, ...rest }, ref) => {

package/components/CheckboxTreeExtended/components/CheckboxTreeExtendedArrow.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { useRef, useEffect } from "react";
 import { CaretdownStrokeSrvIcon16 } from "@sberbusiness/icons-next";
 import { EVENT_KEY_CODES } from "../../../utils/keyboard.js";
-import { s as styles } from "../../../chunks/CheckboxTreeExtended.module-CGwoKN_-.js";
+import { s as styles } from "../../../chunks/CheckboxTreeExtended.module-C9MBlDS4.js";
 const CheckboxTreeExtendedArrow = ({ active, opened, toggle }) => {
   const arrowNode = useRef(null);
   const prevActive = useRef(active);

package/components/CheckboxTreeExtended/components/CheckboxTreeExtendedCheckbox.js

@@ -3,7 +3,7 @@ import { useRef, useContext, useEffect } from "react";
 import { c as clsx } from "../../../chunks/vendor-CUIykw0y.js";
 import { Checkbox } from "../../Checkbox/Checkbox.js";
 import { CheckboxTreeExtendedContext } from "../CheckboxTreeExtendedContext.js";
-import { s as styles } from "../../../chunks/CheckboxTreeExtended.module-CGwoKN_-.js";
+import { s as styles } from "../../../chunks/CheckboxTreeExtended.module-C9MBlDS4.js";
 const CheckboxTreeExtendedCheckbox = ({
   active,
   className,

package/components/CheckboxTreeExtended/components/CheckboxTreeExtendedNode.js

@@ -6,7 +6,7 @@ import { CollapsibleTreeExtended } from "../../CollapsibleTreeExtended/Collapsib
 import { CheckboxTreeExtendedContext } from "../CheckboxTreeExtendedContext.js";
 import { isStaticCheckboxTreeExtended } from "../isStaticCheckboxTreeExtended.js";
 import "./CheckboxTreeExtendedArrow.js";
-import { s as styles } from "../../../chunks/CheckboxTreeExtended.module-CGwoKN_-.js";
+import { s as styles } from "../../../chunks/CheckboxTreeExtended.module-C9MBlDS4.js";
 const sizeToClassNameMap = createSizeToClassNameMap(styles);
 const CheckboxTreeExtendedNode = ({
   children,

package/components/Chip/Chip.js

@@ -7,7 +7,7 @@ import "../../utils/keyboard.js";
 import "../Badge/Badge.js";
 import "../IconWrapper/IconWrapper.js";
 import "./enums.js";
-import { C } from "../../chunks/Chip-DCtXwIVE.js";
+import { C } from "../../chunks/Chip-BV7H9wek.js";
 export {
   C as Chip
 };

package/components/Chip/ChipClearButton.js

@@ -4,7 +4,7 @@ import { c as clsx } from "../../chunks/vendor-CUIykw0y.js";
 import { CrossStrokeSrvIcon24, CrossStrokeSrvIcon20, CrossStrokeSrvIcon16 } from "@sberbusiness/icons-next";
 import { EComponentSize } from "../../enums/EComponentSize.js";
 import { ButtonIcon } from "../Button/ButtonIcon.js";
-const chipClearButton = "chipClearButton__40c701a0";
+const chipClearButton = "chipClearButton__32bc8b6a";
 const styles = {
   chipClearButton
 };

package/components/Chip/ChipDatePicker/ChipDatePicker.js

@@ -6,8 +6,8 @@ import { DateFieldUtils } from "../../DateField/utils.js";
 import { DatePickerExtended } from "../../DatePickerExtended/DatePickerExtended.js";
 import { ChipDatePickerTarget } from "./ChipDatePickerTarget.js";
 import { inputDateFormat } from "../../DateField/constants.js";
-import { DropdownMobileMaskedInput } from "../../Dropdown/mobile/DropdownMobileMaskedInput.js";
-import { s as styles } from "../../../chunks/Chip-DCtXwIVE.js";
+import { PullerMaskedInput } from "../../Puller/PullerMaskedInput.js";
+import { s as styles } from "../../../chunks/Chip-BV7H9wek.js";
 const ChipDatePicker = React__default.forwardRef((props, ref) => {
   const {
     size,
@@ -60,10 +60,10 @@ const ChipDatePicker = React__default.forwardRef((props, ref) => {
     onDropdownClose == null ? void 0 : onDropdownClose();
   };
   const renderDropdownHeaderTarget = () => /* @__PURE__ */ jsx(
-    DropdownMobileMaskedInput,
+    PullerMaskedInput,
     {
       value: pickerValues.inputString,
-      mask: DropdownMobileMaskedInput.presets.masks.date,
+      mask: PullerMaskedInput.presets.masks.date,
       placeholderMask,
       onChange: handleInputChange,
       autoFocus: true