@vkontakte/vkui 4.32.0 → 4.33.0

package/dist/cssm/components/BaseGallery/BaseGallery.js

@@ -0,0 +1,372 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["bullets", "getRootRef", "children", "slideWidth", "slideIndex", "isDraggable", "onDragStart", "onDragEnd", "onChange", "onPrevClick", "onNextClick", "onEnd", "align", "showArrows", "getRef"];
+import { createScopedElement } from "../../lib/jsxRuntime";
+import * as React from "react";
+import { classNames } from "../../lib/classNames";
+import { Touch } from "../Touch/Touch";
+import HorizontalScrollArrow from "../HorizontalScroll/HorizontalScrollArrow";
+import { useExternRef } from "../../hooks/useExternRef";
+import { useDOM } from "../../lib/dom";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
+import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
+import { useGlobalEventListener } from "../../hooks/useGlobalEventListener";
+import { calcMax, calcMin } from "./helpers";
+import "./BaseGallery.css";
+var ANIMATION_DURATION = 0.24;
+var LAYOUT_DEFAULT_STATE = {
+  containerWidth: 0,
+  viewporOffsettWidth: 0,
+  layerWidth: 0,
+  min: 0,
+  max: 0,
+  slides: [],
+  isFullyVisible: true
+};
+var SHIFT_DEFAULT_STATE = {
+  animation: undefined,
+  shiftX: 0,
+  dragging: false,
+  deltaX: 0,
+  indent: 0
+};
+export var BaseGallery = function BaseGallery(_ref) {
+  var _layoutState$current$8;
+
+  var _ref$bullets = _ref.bullets,
+      bullets = _ref$bullets === void 0 ? false : _ref$bullets,
+      getRootRef = _ref.getRootRef,
+      children = _ref.children,
+      _ref$slideWidth = _ref.slideWidth,
+      slideWidth = _ref$slideWidth === void 0 ? "100%" : _ref$slideWidth,
+      _ref$slideIndex = _ref.slideIndex,
+      slideIndex = _ref$slideIndex === void 0 ? 0 : _ref$slideIndex,
+      _ref$isDraggable = _ref.isDraggable,
+      isDraggable = _ref$isDraggable === void 0 ? true : _ref$isDraggable,
+      onDragStart = _ref.onDragStart,
+      onDragEnd = _ref.onDragEnd,
+      onChange = _ref.onChange,
+      onPrevClick = _ref.onPrevClick,
+      onNextClick = _ref.onNextClick,
+      onEndProp = _ref.onEnd,
+      _ref$align = _ref.align,
+      align = _ref$align === void 0 ? "left" : _ref$align,
+      showArrows = _ref.showArrows,
+      getRef = _ref.getRef,
+      restProps = _objectWithoutProperties(_ref, _excluded);
+
+  var slidesStore = React.useRef({});
+  var layoutState = React.useRef(LAYOUT_DEFAULT_STATE);
+
+  var _React$useState = React.useState(SHIFT_DEFAULT_STATE),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      shiftState = _React$useState2[0],
+      setShiftState = _React$useState2[1];
+
+  var rootRef = useExternRef(getRootRef);
+  var viewportRef = useExternRef(getRef);
+
+  var _useDOM = useDOM(),
+      window = _useDOM.window;
+
+  var _useAdaptivity = useAdaptivity(),
+      hasMouse = _useAdaptivity.hasMouse;
+
+  var isCenterWithCustomWidth = slideWidth === "custom" && align === "center";
+
+  var validateIndent = function validateIndent(value) {
+    var _layoutState$current$, _layoutState$current$2;
+
+    var localMax = (_layoutState$current$ = layoutState.current.max) !== null && _layoutState$current$ !== void 0 ? _layoutState$current$ : 0;
+    var localMin = (_layoutState$current$2 = layoutState.current.min) !== null && _layoutState$current$2 !== void 0 ? _layoutState$current$2 : 0;
+
+    if (value < localMin) {
+      return localMin;
+    } else if (value > localMax) {
+      return localMax;
+    }
+
+    return value;
+  };
+  /*
+   * Считает отступ слоя галереи
+   */
+
+
+  var calculateIndent = function calculateIndent(targetIndex) {
+    var _layoutState$current$3;
+
+    if (layoutState.current.isFullyVisible) {
+      return 0;
+    }
+
+    var targetSlide = (_layoutState$current$3 = layoutState.current.slides) !== null && _layoutState$current$3 !== void 0 && _layoutState$current$3.length ? layoutState.current.slides[targetIndex] : null;
+
+    if (targetSlide) {
+      var coordX = targetSlide.coordX,
+          width = targetSlide.width;
+
+      if (isCenterWithCustomWidth) {
+        var _layoutState$current$4;
+
+        var viewportWidth = (_layoutState$current$4 = layoutState.current.viewporOffsettWidth) !== null && _layoutState$current$4 !== void 0 ? _layoutState$current$4 : 0;
+        return viewportWidth / 2 - coordX - width / 2;
+      }
+
+      return validateIndent(-1 * coordX);
+    }
+
+    return 0;
+  };
+  /*
+   * Считает отступ слоя галереи во время драга
+   */
+
+
+  var calculateDragIndent = function calculateDragIndent() {
+    var _layoutState$current$5, _layoutState$current$6;
+
+    var localMax = (_layoutState$current$5 = layoutState.current.max) !== null && _layoutState$current$5 !== void 0 ? _layoutState$current$5 : 0;
+    var localMin = (_layoutState$current$6 = layoutState.current.min) !== null && _layoutState$current$6 !== void 0 ? _layoutState$current$6 : 0;
+    var indent = shiftState.shiftX + shiftState.deltaX;
+
+    if (indent > localMax) {
+      return localMax + Number((indent - localMax) / 3);
+    } else if (indent < localMin) {
+      return localMin + Number((indent - localMin) / 3);
+    }
+
+    return indent;
+  };
+
+  var initializeSlides = function initializeSlides() {
+    var _React$Children$map, _rootRef$current$offs, _rootRef$current, _viewportRef$current$, _viewportRef$current;
+
+    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var localSlides = (_React$Children$map = React.Children.map(children, function (_item, i) {
+      var _elem$offsetLeft, _elem$offsetWidth;
+
+      var elem = slidesStore.current["slide-".concat(i)];
+      return {
+        coordX: (_elem$offsetLeft = elem === null || elem === void 0 ? void 0 : elem.offsetLeft) !== null && _elem$offsetLeft !== void 0 ? _elem$offsetLeft : 0,
+        width: (_elem$offsetWidth = elem === null || elem === void 0 ? void 0 : elem.offsetWidth) !== null && _elem$offsetWidth !== void 0 ? _elem$offsetWidth : 0
+      };
+    })) !== null && _React$Children$map !== void 0 ? _React$Children$map : [];
+    var localContainerWidth = (_rootRef$current$offs = (_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.offsetWidth) !== null && _rootRef$current$offs !== void 0 ? _rootRef$current$offs : 0;
+    var localViewporOffsettWidth = (_viewportRef$current$ = (_viewportRef$current = viewportRef.current) === null || _viewportRef$current === void 0 ? void 0 : _viewportRef$current.offsetWidth) !== null && _viewportRef$current$ !== void 0 ? _viewportRef$current$ : 0;
+    var localLayerWidth = localSlides.reduce(function (val, slide) {
+      return slide.width + val;
+    }, 0);
+    layoutState.current = {
+      containerWidth: localContainerWidth,
+      viewporOffsettWidth: localViewporOffsettWidth,
+      layerWidth: localLayerWidth,
+      max: calcMax({
+        slides: localSlides,
+        viewporOffsettWidth: localViewporOffsettWidth,
+        isCenterWithCustomWidth: isCenterWithCustomWidth
+      }),
+      min: calcMin({
+        containerWidth: localContainerWidth,
+        layerWidth: localLayerWidth,
+        slides: localSlides,
+        viewporOffsettWidth: localViewporOffsettWidth,
+        isCenterWithCustomWidth: isCenterWithCustomWidth,
+        align: align
+      }),
+      slides: localSlides,
+      isFullyVisible: localLayerWidth <= localContainerWidth
+    };
+    setShiftState(function (prevState) {
+      var _options$animation;
+
+      return _objectSpread(_objectSpread({}, prevState), {}, {
+        shiftX: calculateIndent(slideIndex),
+        animation: (_options$animation = options.animation) !== null && _options$animation !== void 0 ? _options$animation : prevState.shiftX === validateIndent(prevState.shiftX)
+      });
+    });
+  };
+
+  var onResize = function onResize() {
+    if (shiftState.animation !== undefined) {
+      initializeSlides({
+        animation: false
+      });
+    }
+  };
+
+  useGlobalEventListener(window, "resize", onResize);
+  useIsomorphicLayoutEffect(function () {
+    initializeSlides({
+      animation: false
+    });
+  }, [children, align, slideWidth]);
+  useIsomorphicLayoutEffect(function () {
+    if (shiftState.animation !== undefined) {
+      setShiftState(function (prevState) {
+        return _objectSpread(_objectSpread({}, prevState), {}, {
+          animation: true,
+          deltaX: 0,
+          shiftX: calculateIndent(slideIndex !== null && slideIndex !== void 0 ? slideIndex : 0)
+        });
+      });
+    }
+  }, [slideIndex]);
+
+  var slideLeft = function slideLeft() {
+    onChange === null || onChange === void 0 ? void 0 : onChange(slideIndex - 1);
+    onPrevClick === null || onPrevClick === void 0 ? void 0 : onPrevClick();
+  };
+
+  var slideRight = function slideRight() {
+    onChange === null || onChange === void 0 ? void 0 : onChange(slideIndex + 1);
+    onNextClick === null || onNextClick === void 0 ? void 0 : onNextClick();
+  };
+  /*
+   * Получает индекс слайда, к которому будет осуществлен переход
+   */
+
+
+  var getTarget = function getTarget(e) {
+    var _layoutState$current$7;
+
+    var expectDeltaX = shiftState.deltaX / e.duration * 240 * 0.6;
+    var shift = shiftState.shiftX + shiftState.deltaX + expectDeltaX - ((_layoutState$current$7 = layoutState.current.max) !== null && _layoutState$current$7 !== void 0 ? _layoutState$current$7 : 0);
+    var direction = shiftState.deltaX < 0 ? 1 : -1; // Находим ближайшую границу слайда к текущему отступу
+
+    var targetIndex = layoutState.current.slides.reduce(function (val, item, index) {
+      var previousValue = Math.abs(layoutState.current.slides[val].coordX + shift);
+      var currentValue = Math.abs(item.coordX + shift);
+      return previousValue < currentValue ? val : index;
+    }, slideIndex);
+
+    if (targetIndex === slideIndex) {
+      var targetSlide = slideIndex + direction;
+
+      if (targetSlide >= 0 && targetSlide < layoutState.current.slides.length) {
+        if (Math.abs(shiftState.deltaX) > layoutState.current.slides[targetSlide].width * 0.05) {
+          targetIndex = targetSlide;
+        }
+      }
+    }
+
+    return targetIndex;
+  };
+
+  var onStart = function onStart() {
+    setShiftState(function (prevState) {
+      return _objectSpread(_objectSpread({}, prevState), {}, {
+        animation: false
+      });
+    });
+  };
+
+  var onMoveX = function onMoveX(e) {
+    if (isDraggable && !layoutState.current.isFullyVisible) {
+      e.originalEvent.preventDefault();
+
+      if (e.isSlideX) {
+        // TODO исправить в рамках issue #2698
+        onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(e);
+
+        if (shiftState.deltaX !== e.shiftX) {
+          setShiftState(function (prevState) {
+            return _objectSpread(_objectSpread({}, prevState), {}, {
+              deltaX: e.shiftX,
+              dragging: e.isSlideX
+            });
+          });
+        }
+      }
+    }
+  };
+
+  var onEnd = function onEnd(e) {
+    var targetIndex = e.isSlide ? getTarget(e) : slideIndex !== null && slideIndex !== void 0 ? slideIndex : 0;
+    onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(e);
+    var nextShiftState = {
+      animation: true,
+      dragging: false,
+      deltaX: 0
+    };
+    var shiftXStick = calculateDragIndent();
+
+    if (targetIndex !== slideIndex) {
+      // Сохраняем сдвиг слайда в том положении, в каком его оставили после драга (fix issue #2185)
+      nextShiftState.shiftX = shiftXStick;
+    }
+
+    setShiftState(function (prevState) {
+      return _objectSpread(_objectSpread({}, prevState), nextShiftState);
+    });
+
+    if (targetIndex !== slideIndex) {
+      onChange === null || onChange === void 0 ? void 0 : onChange(targetIndex);
+    } // TODO исправить в рамках issue #2698
+
+
+    onEndProp === null || onEndProp === void 0 ? void 0 : onEndProp({
+      targetIndex: targetIndex
+    });
+  };
+
+  var indent = shiftState.dragging ? calculateDragIndent() : shiftState.shiftX;
+  var layerStyle = {
+    WebkitTransform: "translateX(".concat(indent, "px)"),
+    transform: "translateX(".concat(indent, "px)"),
+    WebkitTransition: shiftState.animation ? "-webkit-transform ".concat(ANIMATION_DURATION, "s cubic-bezier(.1, 0, .25, 1)") : "none",
+    transition: shiftState.animation ? "transform ".concat(ANIMATION_DURATION, "s cubic-bezier(.1, 0, .25, 1)") : "none"
+  };
+
+  var setSlideRef = function setSlideRef(slideRef, slideIndex) {
+    slidesStore.current["slide-".concat(slideIndex)] = slideRef;
+  }; // shiftX is negative number <= 0, we can swipe back only if it is < 0
+
+
+  var canSlideLeft = !layoutState.current.isFullyVisible && shiftState.shiftX < 0;
+  var canSlideRight = !layoutState.current.isFullyVisible && ( // we can't move right when gallery layer fully scrolled right, if gallery aligned by left side
+  align === "left" && layoutState.current.containerWidth - shiftState.shiftX < ((_layoutState$current$8 = layoutState.current.layerWidth) !== null && _layoutState$current$8 !== void 0 ? _layoutState$current$8 : 0) || // otherwise we need to check current slide index (align = right or align = center)
+  align !== "left" && slideIndex < layoutState.current.slides.length - 1);
+  return createScopedElement("div", _extends({}, restProps, {
+    vkuiClass: classNames("Gallery", "Gallery--".concat(align), shiftState.dragging && "Gallery--dragging", slideWidth === "custom" && "Gallery--custom-width"),
+    ref: rootRef
+  }), createScopedElement(Touch, {
+    vkuiClass: "Gallery__viewport",
+    onStartX: onStart,
+    onMoveX: onMoveX,
+    onEnd: onEnd,
+    style: {
+      width: slideWidth === "custom" ? "100%" : slideWidth
+    },
+    getRootRef: viewportRef,
+    noSlideClick: true
+  }, createScopedElement("div", {
+    vkuiClass: "Gallery__layer",
+    style: layerStyle
+  }, React.Children.map(children, function (item, i) {
+    return createScopedElement("div", {
+      vkuiClass: "Gallery__slide",
+      key: "slide-".concat(i),
+      ref: function ref(el) {
+        return setSlideRef(el, i);
+      }
+    }, item);
+  }))), bullets && createScopedElement("div", {
+    "aria-hidden": "true",
+    vkuiClass: classNames("Gallery__bullets", "Gallery__bullets--".concat(bullets))
+  }, React.Children.map(children, function (_item, index) {
+    return createScopedElement("div", {
+      vkuiClass: classNames("Gallery__bullet", index === slideIndex && "Gallery__bullet--active"),
+      key: index
+    });
+  })), showArrows && hasMouse && canSlideLeft && createScopedElement(HorizontalScrollArrow, {
+    direction: "left",
+    onClick: slideLeft
+  }), showArrows && hasMouse && canSlideRight && createScopedElement(HorizontalScrollArrow, {
+    direction: "right",
+    onClick: slideRight
+  }));
+};
+//# sourceMappingURL=BaseGallery.js.map

package/dist/cssm/components/BaseGallery/BaseGallery.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/BaseGallery/BaseGallery.tsx"],"names":["React","classNames","Touch","HorizontalScrollArrow","useExternRef","useDOM","useAdaptivity","useIsomorphicLayoutEffect","useGlobalEventListener","calcMax","calcMin","ANIMATION_DURATION","LAYOUT_DEFAULT_STATE","containerWidth","viewporOffsettWidth","layerWidth","min","max","slides","isFullyVisible","SHIFT_DEFAULT_STATE","animation","undefined","shiftX","dragging","deltaX","indent","BaseGallery","bullets","getRootRef","children","slideWidth","slideIndex","isDraggable","onDragStart","onDragEnd","onChange","onPrevClick","onNextClick","onEndProp","onEnd","align","showArrows","getRef","restProps","slidesStore","useRef","layoutState","useState","shiftState","setShiftState","rootRef","viewportRef","window","hasMouse","isCenterWithCustomWidth","validateIndent","value","localMax","current","localMin","calculateIndent","targetIndex","targetSlide","length","coordX","width","viewportWidth","calculateDragIndent","Number","initializeSlides","options","localSlides","Children","map","_item","i","elem","offsetLeft","offsetWidth","localContainerWidth","localViewporOffsettWidth","localLayerWidth","reduce","val","slide","prevState","onResize","slideLeft","slideRight","getTarget","e","expectDeltaX","duration","shift","direction","item","index","previousValue","Math","abs","currentValue","onStart","onMoveX","originalEvent","preventDefault","isSlideX","isSlide","nextShiftState","shiftXStick","layerStyle","WebkitTransform","transform","WebkitTransition","transition","setSlideRef","slideRef","canSlideLeft","canSlideRight","el"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { Touch, TouchEvent } from \"../Touch/Touch\";\nimport HorizontalScrollArrow from \"../HorizontalScroll/HorizontalScrollArrow\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { useDOM } from \"../../lib/dom\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { useIsomorphicLayoutEffect } from \"../../lib/useIsomorphicLayoutEffect\";\nimport { useGlobalEventListener } from \"../../hooks/useGlobalEventListener\";\nimport { calcMax, calcMin } from \"./helpers\";\nimport {\n  BaseGalleryProps,\n  GallerySlidesState,\n  LayoutState,\n  ShiftingState,\n} from \"./types\";\nimport \"./BaseGallery.css\";\n\nconst ANIMATION_DURATION = 0.24;\n\nconst LAYOUT_DEFAULT_STATE = {\n  containerWidth: 0,\n  viewporOffsettWidth: 0,\n  layerWidth: 0,\n  min: 0,\n  max: 0,\n  slides: [],\n  isFullyVisible: true,\n};\n\nconst SHIFT_DEFAULT_STATE = {\n  animation: undefined,\n  shiftX: 0,\n  dragging: false,\n  deltaX: 0,\n  indent: 0,\n};\n\nexport const BaseGallery = ({\n  bullets = false,\n  getRootRef,\n  children,\n  slideWidth = \"100%\",\n  slideIndex = 0,\n  isDraggable = true,\n  onDragStart,\n  onDragEnd,\n  onChange,\n  onPrevClick,\n  onNextClick,\n  onEnd: onEndProp,\n  align = \"left\",\n  showArrows,\n  getRef,\n  ...restProps\n}: BaseGalleryProps) => {\n  const slidesStore = React.useRef<Record<string, HTMLDivElement | null>>({});\n  const layoutState = React.useRef<LayoutState>(LAYOUT_DEFAULT_STATE);\n  const [shiftState, setShiftState] =\n    React.useState<ShiftingState>(SHIFT_DEFAULT_STATE);\n\n  const rootRef = useExternRef(getRootRef);\n  const viewportRef = useExternRef(getRef);\n\n  const { window } = useDOM();\n  const { hasMouse } = useAdaptivity();\n\n  const isCenterWithCustomWidth = slideWidth === \"custom\" && align === \"center\";\n\n  const validateIndent = (value: number) => {\n    const localMax = layoutState.current.max ?? 0;\n    const localMin = layoutState.current.min ?? 0;\n\n    if (value < localMin) {\n      return localMin;\n    } else if (value > localMax) {\n      return localMax;\n    }\n\n    return value;\n  };\n\n  /*\n   * Считает отступ слоя галереи\n   */\n  const calculateIndent = (targetIndex: number) => {\n    if (layoutState.current.isFullyVisible) {\n      return 0;\n    }\n\n    const targetSlide = layoutState.current.slides?.length\n      ? layoutState.current.slides[targetIndex]\n      : null;\n\n    if (targetSlide) {\n      const { coordX, width } = targetSlide;\n\n      if (isCenterWithCustomWidth) {\n        const viewportWidth = layoutState.current.viewporOffsettWidth ?? 0;\n        return viewportWidth / 2 - coordX - width / 2;\n      }\n\n      return validateIndent(-1 * coordX);\n    }\n\n    return 0;\n  };\n\n  /*\n   * Считает отступ слоя галереи во время драга\n   */\n  const calculateDragIndent = () => {\n    const localMax = layoutState.current.max ?? 0;\n    const localMin = layoutState.current.min ?? 0;\n    const indent = shiftState.shiftX + shiftState.deltaX;\n\n    if (indent > localMax) {\n      return localMax + Number((indent - localMax) / 3);\n    } else if (indent < localMin) {\n      return localMin + Number((indent - localMin) / 3);\n    }\n\n    return indent;\n  };\n\n  const initializeSlides = (options: { animation?: boolean } = {}) => {\n    const localSlides =\n      React.Children.map(\n        children,\n        (_item: React.ReactNode, i: number): GallerySlidesState => {\n          const elem = slidesStore.current[`slide-${i}`];\n          return {\n            coordX: elem?.offsetLeft ?? 0,\n            width: elem?.offsetWidth ?? 0,\n          };\n        }\n      ) ?? [];\n\n    const localContainerWidth = rootRef.current?.offsetWidth ?? 0;\n    const localViewporOffsettWidth = viewportRef.current?.offsetWidth ?? 0;\n    const localLayerWidth = localSlides.reduce(\n      (val: number, slide: GallerySlidesState) => slide.width + val,\n      0\n    );\n\n    layoutState.current = {\n      containerWidth: localContainerWidth,\n      viewporOffsettWidth: localViewporOffsettWidth,\n      layerWidth: localLayerWidth,\n      max: calcMax({\n        slides: localSlides,\n        viewporOffsettWidth: localViewporOffsettWidth,\n        isCenterWithCustomWidth,\n      }),\n      min: calcMin({\n        containerWidth: localContainerWidth,\n        layerWidth: localLayerWidth,\n        slides: localSlides,\n        viewporOffsettWidth: localViewporOffsettWidth,\n        isCenterWithCustomWidth,\n        align,\n      }),\n      slides: localSlides,\n      isFullyVisible: localLayerWidth <= localContainerWidth,\n    };\n\n    setShiftState((prevState) => ({\n      ...prevState,\n      shiftX: calculateIndent(slideIndex),\n      animation:\n        options.animation ??\n        prevState.shiftX === validateIndent(prevState.shiftX),\n    }));\n  };\n\n  const onResize = () => {\n    if (shiftState.animation !== undefined) {\n      initializeSlides({ animation: false });\n    }\n  };\n\n  useGlobalEventListener(window, \"resize\", onResize);\n\n  useIsomorphicLayoutEffect(() => {\n    initializeSlides({ animation: false });\n  }, [children, align, slideWidth]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (shiftState.animation !== undefined) {\n      setShiftState((prevState) => ({\n        ...prevState,\n        animation: true,\n        deltaX: 0,\n        shiftX: calculateIndent(slideIndex ?? 0),\n      }));\n    }\n  }, [slideIndex]);\n\n  const slideLeft = () => {\n    onChange?.(slideIndex - 1);\n    onPrevClick?.();\n  };\n\n  const slideRight = () => {\n    onChange?.(slideIndex + 1);\n    onNextClick?.();\n  };\n\n  /*\n   * Получает индекс слайда, к которому будет осуществлен переход\n   */\n  const getTarget = (e: TouchEvent) => {\n    const expectDeltaX = (shiftState.deltaX / e.duration) * 240 * 0.6;\n    const shift =\n      shiftState.shiftX +\n      shiftState.deltaX +\n      expectDeltaX -\n      (layoutState.current.max ?? 0);\n    const direction = shiftState.deltaX < 0 ? 1 : -1;\n\n    // Находим ближайшую границу слайда к текущему отступу\n    let targetIndex = layoutState.current.slides.reduce(\n      (val: number, item: GallerySlidesState, index: number) => {\n        const previousValue = Math.abs(\n          layoutState.current.slides[val].coordX + shift\n        );\n        const currentValue = Math.abs(item.coordX + shift);\n\n        return previousValue < currentValue ? val : index;\n      },\n      slideIndex\n    );\n\n    if (targetIndex === slideIndex) {\n      let targetSlide = slideIndex + direction;\n\n      if (targetSlide >= 0 && targetSlide < layoutState.current.slides.length) {\n        if (\n          Math.abs(shiftState.deltaX) >\n          layoutState.current.slides[targetSlide].width * 0.05\n        ) {\n          targetIndex = targetSlide;\n        }\n      }\n    }\n\n    return targetIndex;\n  };\n\n  const onStart = () => {\n    setShiftState((prevState) => ({ ...prevState, animation: false }));\n  };\n\n  const onMoveX = (e: TouchEvent) => {\n    if (isDraggable && !layoutState.current.isFullyVisible) {\n      e.originalEvent.preventDefault();\n\n      if (e.isSlideX) {\n        // TODO исправить в рамках issue #2698\n        onDragStart?.(e);\n\n        if (shiftState.deltaX !== e.shiftX) {\n          setShiftState((prevState) => ({\n            ...prevState,\n            deltaX: e.shiftX,\n            dragging: e.isSlideX,\n          }));\n        }\n      }\n    }\n  };\n\n  const onEnd = (e: TouchEvent) => {\n    const targetIndex = e.isSlide ? getTarget(e) : slideIndex ?? 0;\n    onDragEnd?.(e);\n\n    const nextShiftState: Partial<ShiftingState> = {\n      animation: true,\n      dragging: false,\n      deltaX: 0,\n    };\n\n    const shiftXStick = calculateDragIndent();\n    if (targetIndex !== slideIndex) {\n      // Сохраняем сдвиг слайда в том положении, в каком его оставили после драга (fix issue #2185)\n      nextShiftState.shiftX = shiftXStick;\n    }\n\n    setShiftState((prevState) => ({ ...prevState, ...nextShiftState }));\n    if (targetIndex !== slideIndex) {\n      onChange?.(targetIndex);\n    }\n\n    // TODO исправить в рамках issue #2698\n    onEndProp?.({ targetIndex });\n  };\n\n  const indent = shiftState.dragging\n    ? calculateDragIndent()\n    : shiftState.shiftX;\n\n  const layerStyle = {\n    WebkitTransform: `translateX(${indent}px)`,\n    transform: `translateX(${indent}px)`,\n    WebkitTransition: shiftState.animation\n      ? `-webkit-transform ${ANIMATION_DURATION}s cubic-bezier(.1, 0, .25, 1)`\n      : \"none\",\n    transition: shiftState.animation\n      ? `transform ${ANIMATION_DURATION}s cubic-bezier(.1, 0, .25, 1)`\n      : \"none\",\n  };\n\n  const setSlideRef = (slideRef: HTMLDivElement | null, slideIndex: number) => {\n    slidesStore.current[`slide-${slideIndex}`] = slideRef;\n  };\n\n  // shiftX is negative number <= 0, we can swipe back only if it is < 0\n  const canSlideLeft =\n    !layoutState.current.isFullyVisible && shiftState.shiftX < 0;\n\n  const canSlideRight =\n    !layoutState.current.isFullyVisible &&\n    // we can't move right when gallery layer fully scrolled right, if gallery aligned by left side\n    ((align === \"left\" &&\n      layoutState.current.containerWidth - shiftState.shiftX <\n        (layoutState.current.layerWidth ?? 0)) ||\n      // otherwise we need to check current slide index (align = right or align = center)\n      (align !== \"left\" && slideIndex < layoutState.current.slides.length - 1));\n\n  return (\n    <div\n      {...restProps}\n      vkuiClass={classNames(\n        \"Gallery\",\n        `Gallery--${align}`,\n        shiftState.dragging && \"Gallery--dragging\",\n        slideWidth === \"custom\" && \"Gallery--custom-width\"\n      )}\n      ref={rootRef}\n    >\n      <Touch\n        vkuiClass=\"Gallery__viewport\"\n        onStartX={onStart}\n        onMoveX={onMoveX}\n        onEnd={onEnd}\n        style={{ width: slideWidth === \"custom\" ? \"100%\" : slideWidth }}\n        getRootRef={viewportRef}\n        noSlideClick\n      >\n        <div vkuiClass=\"Gallery__layer\" style={layerStyle}>\n          {React.Children.map(children, (item: React.ReactNode, i: number) => (\n            <div\n              vkuiClass=\"Gallery__slide\"\n              key={`slide-${i}`}\n              ref={(el) => setSlideRef(el, i)}\n            >\n              {item}\n            </div>\n          ))}\n        </div>\n      </Touch>\n\n      {bullets && (\n        <div\n          aria-hidden=\"true\"\n          vkuiClass={classNames(\n            \"Gallery__bullets\",\n            `Gallery__bullets--${bullets}`\n          )}\n        >\n          {React.Children.map(\n            children,\n            (_item: React.ReactNode, index: number) => (\n              <div\n                vkuiClass={classNames(\n                  \"Gallery__bullet\",\n                  index === slideIndex && \"Gallery__bullet--active\"\n                )}\n                key={index}\n              />\n            )\n          )}\n        </div>\n      )}\n\n      {showArrows && hasMouse && canSlideLeft && (\n        <HorizontalScrollArrow direction=\"left\" onClick={slideLeft} />\n      )}\n      {showArrows && hasMouse && canSlideRight && (\n        <HorizontalScrollArrow direction=\"right\" onClick={slideRight} />\n      )}\n    </div>\n  );\n};\n"],"file":"BaseGallery.js"}

package/dist/cssm/components/BaseGallery/helpers.d.ts

@@ -0,0 +1,12 @@
+import { LayoutState } from "./types";
+import { HasAlign } from "../../types";
+interface CalcMin extends Partial<LayoutState> {
+    isCenterWithCustomWidth: boolean;
+    align: HasAlign["align"];
+}
+export declare const calcMin: ({ containerWidth, layerWidth, slides, viewporOffsettWidth, align, isCenterWithCustomWidth, }: CalcMin) => number | undefined;
+interface CalcMax extends Partial<LayoutState> {
+    isCenterWithCustomWidth: boolean;
+}
+export declare const calcMax: ({ slides, viewporOffsettWidth, isCenterWithCustomWidth, }: CalcMax) => number;
+export {};

package/dist/cssm/components/BaseGallery/helpers.js

@@ -0,0 +1,50 @@
+export var calcMin = function calcMin(_ref) {
+  var _ref$containerWidth = _ref.containerWidth,
+      containerWidth = _ref$containerWidth === void 0 ? 0 : _ref$containerWidth,
+      _ref$layerWidth = _ref.layerWidth,
+      layerWidth = _ref$layerWidth === void 0 ? 0 : _ref$layerWidth,
+      _ref$slides = _ref.slides,
+      slides = _ref$slides === void 0 ? [] : _ref$slides,
+      _ref$viewporOffsettWi = _ref.viewporOffsettWidth,
+      viewporOffsettWidth = _ref$viewporOffsettWi === void 0 ? 0 : _ref$viewporOffsettWi,
+      align = _ref.align,
+      isCenterWithCustomWidth = _ref.isCenterWithCustomWidth;
+
+  switch (align) {
+    case "left":
+      return containerWidth - layerWidth;
+
+    case "right":
+      return viewporOffsettWidth - layerWidth;
+
+    case "center":
+      if (isCenterWithCustomWidth && slides.length) {
+        var _slides = slides[slides.length - 1],
+            coordX = _slides.coordX,
+            width = _slides.width;
+        return viewporOffsettWidth / 2 - coordX - width / 2;
+      } else {
+        return viewporOffsettWidth - (containerWidth - viewporOffsettWidth) / 2 - layerWidth;
+      }
+
+  }
+
+  return undefined;
+};
+export var calcMax = function calcMax(_ref2) {
+  var _ref2$slides = _ref2.slides,
+      slides = _ref2$slides === void 0 ? [] : _ref2$slides,
+      _ref2$viewporOffsettW = _ref2.viewporOffsettWidth,
+      viewporOffsettWidth = _ref2$viewporOffsettW === void 0 ? 0 : _ref2$viewporOffsettW,
+      isCenterWithCustomWidth = _ref2.isCenterWithCustomWidth;
+
+  if (isCenterWithCustomWidth && slides.length) {
+    var _slides$ = slides[0],
+        width = _slides$.width,
+        coordX = _slides$.coordX;
+    return viewporOffsettWidth / 2 - coordX - width / 2;
+  }
+
+  return 0;
+};
+//# sourceMappingURL=helpers.js.map

package/dist/cssm/components/BaseGallery/helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/BaseGallery/helpers.ts"],"names":["calcMin","containerWidth","layerWidth","slides","viewporOffsettWidth","align","isCenterWithCustomWidth","length","coordX","width","undefined","calcMax"],"mappings":"AAQA,OAAO,IAAMA,OAAO,GAAG,SAAVA,OAAU,OAOR;AAAA,iCANbC,cAMa;AAAA,MANbA,cAMa,oCANI,CAMJ;AAAA,6BALbC,UAKa;AAAA,MALbA,UAKa,gCALA,CAKA;AAAA,yBAJbC,MAIa;AAAA,MAJbA,MAIa,4BAJJ,EAII;AAAA,mCAHbC,mBAGa;AAAA,MAHbA,mBAGa,sCAHS,CAGT;AAAA,MAFbC,KAEa,QAFbA,KAEa;AAAA,MADbC,uBACa,QADbA,uBACa;;AACb,UAAQD,KAAR;AACE,SAAK,MAAL;AACE,aAAOJ,cAAc,GAAGC,UAAxB;;AACF,SAAK,OAAL;AACE,aAAOE,mBAAmB,GAAGF,UAA7B;;AACF,SAAK,QAAL;AACE,UAAII,uBAAuB,IAAIH,MAAM,CAACI,MAAtC,EAA8C;AAC5C,sBAA0BJ,MAAM,CAACA,MAAM,CAACI,MAAP,GAAgB,CAAjB,CAAhC;AAAA,YAAQC,MAAR,WAAQA,MAAR;AAAA,YAAgBC,KAAhB,WAAgBA,KAAhB;AACA,eAAOL,mBAAmB,GAAG,CAAtB,GAA0BI,MAA1B,GAAmCC,KAAK,GAAG,CAAlD;AACD,OAHD,MAGO;AACL,eACEL,mBAAmB,GACnB,CAACH,cAAc,GAAGG,mBAAlB,IAAyC,CADzC,GAEAF,UAHF;AAKD;;AAfL;;AAiBA,SAAOQ,SAAP;AACD,CA1BM;AAgCP,OAAO,IAAMC,OAAO,GAAG,SAAVA,OAAU,QAIR;AAAA,2BAHbR,MAGa;AAAA,MAHbA,MAGa,6BAHJ,EAGI;AAAA,oCAFbC,mBAEa;AAAA,MAFbA,mBAEa,sCAFS,CAET;AAAA,MADbE,uBACa,SADbA,uBACa;;AACb,MAAIA,uBAAuB,IAAIH,MAAM,CAACI,MAAtC,EAA8C;AAC5C,mBAA0BJ,MAAM,CAAC,CAAD,CAAhC;AAAA,QAAQM,KAAR,YAAQA,KAAR;AAAA,QAAeD,MAAf,YAAeA,MAAf;AACA,WAAOJ,mBAAmB,GAAG,CAAtB,GAA0BI,MAA1B,GAAmCC,KAAK,GAAG,CAAlD;AACD;;AACD,SAAO,CAAP;AACD,CAVM","sourcesContent":["import { LayoutState } from \"./types\";\nimport { HasAlign } from \"../../types\";\n\ninterface CalcMin extends Partial<LayoutState> {\n  isCenterWithCustomWidth: boolean;\n  align: HasAlign[\"align\"];\n}\n\nexport const calcMin = ({\n  containerWidth = 0,\n  layerWidth = 0,\n  slides = [],\n  viewporOffsettWidth = 0,\n  align,\n  isCenterWithCustomWidth,\n}: CalcMin) => {\n  switch (align) {\n    case \"left\":\n      return containerWidth - layerWidth;\n    case \"right\":\n      return viewporOffsettWidth - layerWidth;\n    case \"center\":\n      if (isCenterWithCustomWidth && slides.length) {\n        const { coordX, width } = slides[slides.length - 1];\n        return viewporOffsettWidth / 2 - coordX - width / 2;\n      } else {\n        return (\n          viewporOffsettWidth -\n          (containerWidth - viewporOffsettWidth) / 2 -\n          layerWidth\n        );\n      }\n  }\n  return undefined;\n};\n\ninterface CalcMax extends Partial<LayoutState> {\n  isCenterWithCustomWidth: boolean;\n}\n\nexport const calcMax = ({\n  slides = [],\n  viewporOffsettWidth = 0,\n  isCenterWithCustomWidth,\n}: CalcMax) => {\n  if (isCenterWithCustomWidth && slides.length) {\n    const { width, coordX } = slides[0];\n    return viewporOffsettWidth / 2 - coordX - width / 2;\n  }\n  return 0;\n};\n"],"file":"helpers.js"}

package/dist/cssm/components/BaseGallery/types.d.ts

@@ -0,0 +1,43 @@
+import * as React from "react";
+import { HasAlign, HasRef, HasRootRef } from "../../types";
+import { TouchEventHandler } from "../Touch/Touch";
+export interface GallerySlidesState {
+    coordX: number;
+    width: number;
+}
+export interface ShiftingState {
+    deltaX: number;
+    shiftX: number;
+    animation?: boolean;
+    dragging: boolean;
+}
+export interface LayoutState {
+    containerWidth: number;
+    viewporOffsettWidth: number;
+    layerWidth: number;
+    min?: number;
+    max: number;
+    slides: GallerySlidesState[];
+    isFullyVisible: boolean;
+}
+export interface BaseGalleryProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "onDragStart" | "onDragEnd">, HasAlign, HasRootRef<HTMLDivElement>, HasRef<HTMLElement> {
+    slideWidth?: string | number;
+    slideIndex?: number;
+    onDragStart?: TouchEventHandler;
+    onDragEnd?: TouchEventHandler;
+    onChange?(current: number): void;
+    onEnd?({ targetIndex }: {
+        targetIndex: number;
+    }): void;
+    /**
+     * Будет вызвано при клике на кнопку-стрелку влево
+     */
+    onPrevClick?(): void;
+    /**
+     * Будет вызвано при клике на кнопку-стрелку вправо
+     */
+    onNextClick?(): void;
+    bullets?: "dark" | "light" | false;
+    isDraggable?: boolean;
+    showArrows?: boolean;
+}

package/dist/cssm/components/BaseGallery/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/cssm/components/BaseGallery/types.js.map

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

package/dist/cssm/components/Button/Button.css

@@ -1,4 +1,4 @@
-.vkuiButton{position:relative;display:inline-block;box-sizing:border-box;text-decoration:none;border:0;min-height:28px;min-height:var(--vkui--size_button_small_height--compact,28px);margin:0;padding:0;-webkit-user-select:none;user-select:none;border-radius:8px;border-radius:var(--vkui--size_border_radius--regular,8px);max-width:100%;min-width:80px;min-width:var(--vkui--size_button_minimum_width--regular,80px)}.vkuiButton--singleIcon{min-width:28px;min-width:var(--vkui--size_button_small_height--compact,28px)}.vkuiButton--stretched{display:block;width:100%;flex-grow:1;flex-basis:0}.vkuiButton__in{display:flex;align-items:center;justify-content:center;width:100%;min-height:inherit;text-align:center;box-sizing:border-box}.vkuiButton--aln-left .vkuiButton__in{justify-content:flex-start;text-align:left}.vkuiButton--aln-right .vkuiButton__in{justify-content:flex-end;text-align:right}.vkuiButton[disabled]{opacity:.4;opacity:var(--vkui--opacity_disable,0.4)}.vkuiButton--lvl-primary[disabled]:not(.vkuiButton--clr-overlay):not(.vkuiButton--clr-negative):not(.vkuiButton--clr-positive),.vkuiButton--lvl-secondary[disabled]:not(.vkuiButton--clr-overlay),.vkuiButton--lvl-tertiary[disabled]:not(.vkuiButton--clr-overlay),.vkuiButton--lvl-outline[disabled]:not(.vkuiButton--clr-overlay){opacity:.64}.vkuiButton__content{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.vkuiButton--sz-s .vkuiButton__content:first-child{padding-left:16px;padding-left:var(--vkui--size_button_base_small_padding_horizontal--regular,16px)}.vkuiButton--sz-s .vkuiButton__content:last-child,.vkuiButton--sz-s .vkuiButton__after{padding-right:var(--vkui--size_button_base_small_padding_horizontal--regular)}.vkuiButton--sz-m .vkuiButton__content:first-child{padding-left:var(--vkui--size_button_base_medium_padding_horizontal--regular)}.vkuiButton--sz-m .vkuiButton__content:last-child,.vkuiButton--sz-m .vkuiButton__after{padding-right:var(--vkui--size_button_base_medium_padding_horizontal--regular)}.vkuiButton--sz-l .vkuiButton__content:first-child{padding-left:20px;padding-left:var(--vkui--size_button_base_large_padding_horizontal--regular,20px)}.vkuiButton--sz-l .vkuiButton__content:last-child,.vkuiButton--sz-l .vkuiButton__after{padding-right:var(--vkui--size_button_base_large_padding_horizontal--regular)}.vkuiButton--sz-s .vkuiButton__before{padding-left:var(--vkui--size_button_base_small_padding_horizontal_icon--regular)}.vkuiButton--sz-m .vkuiButton__before{padding-left:var(--vkui--size_button_base_medium_padding_horizontal_icon--regular)}.vkuiButton--sz-l .vkuiButton__before{padding-left:var(--vkui--size_button_base_large_padding_horizontal_icon--regular)}.vkuiButton--lvl-tertiary.vkuiButton--sz-s .vkuiButton__content:first-child{padding-left:var(--vkui--size_button_tertiary_small_padding_horizontal--regular)}.vkuiButton--lvl-tertiary.vkuiButton--sz-s .vkuiButton__content:last-child,.vkuiButton--lvl-tertiary.vkuiButton--sz-s .vkuiButton__after{padding-right:var(--vkui--size_button_tertiary_small_padding_horizontal--regular)}.vkuiButton--lvl-tertiary.vkuiButton--sz-m .vkuiButton__content:first-child{padding-left:var(--vkui--size_button_tertiary_medium_padding_horizontal--regular)}.vkuiButton--lvl-tertiary.vkuiButton--sz-m .vkuiButton__content:last-child,.vkuiButton--lvl-tertiary.vkuiButton--sz-m .vkuiButton__after{padding-right:var(--vkui--size_button_tertiary_medium_padding_horizontal--regular)}.vkuiButton--lvl-tertiary.vkuiButton--sz-l .vkuiButton__content:first-child{padding-left:var(--vkui--size_button_tertiary_large_padding_horizontal--regular)}.vkuiButton--lvl-tertiary.vkuiButton--sz-l .vkuiButton__content:last-child,.vkuiButton--lvl-tertiary.vkuiButton--sz-l .vkuiButton__after{padding-right:var(--vkui--size_button_tertiary_large_padding_horizontal--regular)}.vkuiButton--lvl-tertiary.vkuiButton--sz-s .vkuiButton__before{padding-left:var(--vkui--size_button_tertiary_small_padding_horizontal_icon--regular)}.vkuiButton--lvl-tertiary.vkuiButton--sz-m .vkuiButton__before{padding-left:var(--vkui--size_button_tertiary_medium_padding_horizontal_icon--regular)}.vkuiButton--lvl-tertiary.vkuiButton--sz-l .vkuiButton__before{padding-left:var(--vkui--size_button_tertiary_large_padding_horizontal_icon--regular)}.vkuiButton--singleIcon .vkuiButton__after,.vkuiButton--singleIcon .vkuiButton__before,.vkuiButton--lvl-tertiary.vkuiButton--singleIcon .vkuiButton__after,.vkuiButton--lvl-tertiary.vkuiButton--singleIcon .vkuiButton__before{margin-left:auto;margin-right:auto;padding-left:0;padding-right:0}.vkuiButton__content--caps{-webkit-transform:translateY(0);transform:translateY(0)}.vkuiButton__spinner{position:absolute;left:0;top:0;right:0;bottom:0}.vkuiButton__spinner+.vkuiButton__in{visibility:hidden}.vkuiButton--lvl-primary.vkuiButton--clr-accent{background-color:#2d81e0;background-color:var(--button_primary_background,
+.vkuiButton{position:relative;display:inline-block;box-sizing:border-box;text-decoration:none;border:0;min-height:28px;min-height:var(--vkui--size_button_small_height--compact,28px);margin:0;padding:0;-webkit-user-select:none;user-select:none;border-radius:8px;border-radius:var(--vkui--size_border_radius--regular,8px);max-width:100%;min-width:80px;min-width:var(--vkui--size_button_minimum_width--regular,80px)}.vkuiButton--loading{cursor:progress}.vkuiButton--singleIcon{min-width:28px;min-width:var(--vkui--size_button_small_height--compact,28px)}.vkuiButton--stretched{display:block;width:100%;flex-grow:1;flex-basis:0}.vkuiButton__in{display:flex;align-items:center;justify-content:center;width:100%;min-height:inherit;text-align:center;box-sizing:border-box}.vkuiButton--aln-left .vkuiButton__in{justify-content:flex-start;text-align:left}.vkuiButton--aln-right .vkuiButton__in{justify-content:flex-end;text-align:right}.vkuiButton[disabled]{opacity:.4;opacity:var(--vkui--opacity_disable,0.4)}.vkuiButton--lvl-primary[disabled]:not(.vkuiButton--clr-overlay):not(.vkuiButton--clr-negative):not(.vkuiButton--clr-positive),.vkuiButton--lvl-secondary[disabled]:not(.vkuiButton--clr-overlay),.vkuiButton--lvl-tertiary[disabled]:not(.vkuiButton--clr-overlay),.vkuiButton--lvl-outline[disabled]:not(.vkuiButton--clr-overlay){opacity:.64}.vkuiButton__content{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.vkuiButton--sz-s .vkuiButton__content:first-child{padding-left:16px;padding-left:var(--vkui--size_button_base_small_padding_horizontal--regular,16px)}.vkuiButton--sz-s .vkuiButton__content:last-child,.vkuiButton--sz-s .vkuiButton__after{padding-right:var(--vkui--size_button_base_small_padding_horizontal--regular)}.vkuiButton--sz-m .vkuiButton__content:first-child{padding-left:var(--vkui--size_button_base_medium_padding_horizontal--regular)}.vkuiButton--sz-m .vkuiButton__content:last-child,.vkuiButton--sz-m .vkuiButton__after{padding-right:var(--vkui--size_button_base_medium_padding_horizontal--regular)}.vkuiButton--sz-l .vkuiButton__content:first-child{padding-left:20px;padding-left:var(--vkui--size_button_base_large_padding_horizontal--regular,20px)}.vkuiButton--sz-l .vkuiButton__content:last-child,.vkuiButton--sz-l .vkuiButton__after{padding-right:var(--vkui--size_button_base_large_padding_horizontal--regular)}.vkuiButton--sz-s .vkuiButton__before{padding-left:var(--vkui--size_button_base_small_padding_horizontal_icon--regular)}.vkuiButton--sz-m .vkuiButton__before{padding-left:var(--vkui--size_button_base_medium_padding_horizontal_icon--regular)}.vkuiButton--sz-l .vkuiButton__before{padding-left:var(--vkui--size_button_base_large_padding_horizontal_icon--regular)}.vkuiButton--lvl-tertiary.vkuiButton--sz-s .vkuiButton__content:first-child{padding-left:var(--vkui--size_button_tertiary_small_padding_horizontal--regular)}.vkuiButton--lvl-tertiary.vkuiButton--sz-s .vkuiButton__content:last-child,.vkuiButton--lvl-tertiary.vkuiButton--sz-s .vkuiButton__after{padding-right:var(--vkui--size_button_tertiary_small_padding_horizontal--regular)}.vkuiButton--lvl-tertiary.vkuiButton--sz-m .vkuiButton__content:first-child{padding-left:var(--vkui--size_button_tertiary_medium_padding_horizontal--regular)}.vkuiButton--lvl-tertiary.vkuiButton--sz-m .vkuiButton__content:last-child,.vkuiButton--lvl-tertiary.vkuiButton--sz-m .vkuiButton__after{padding-right:var(--vkui--size_button_tertiary_medium_padding_horizontal--regular)}.vkuiButton--lvl-tertiary.vkuiButton--sz-l .vkuiButton__content:first-child{padding-left:var(--vkui--size_button_tertiary_large_padding_horizontal--regular)}.vkuiButton--lvl-tertiary.vkuiButton--sz-l .vkuiButton__content:last-child,.vkuiButton--lvl-tertiary.vkuiButton--sz-l .vkuiButton__after{padding-right:var(--vkui--size_button_tertiary_large_padding_horizontal--regular)}.vkuiButton--lvl-tertiary.vkuiButton--sz-s .vkuiButton__before{padding-left:var(--vkui--size_button_tertiary_small_padding_horizontal_icon--regular)}.vkuiButton--lvl-tertiary.vkuiButton--sz-m .vkuiButton__before{padding-left:var(--vkui--size_button_tertiary_medium_padding_horizontal_icon--regular)}.vkuiButton--lvl-tertiary.vkuiButton--sz-l .vkuiButton__before{padding-left:var(--vkui--size_button_tertiary_large_padding_horizontal_icon--regular)}.vkuiButton--singleIcon .vkuiButton__after,.vkuiButton--singleIcon .vkuiButton__before,.vkuiButton--lvl-tertiary.vkuiButton--singleIcon .vkuiButton__after,.vkuiButton--lvl-tertiary.vkuiButton--singleIcon .vkuiButton__before{margin-left:auto;margin-right:auto;padding-left:0;padding-right:0}.vkuiButton__content--caps{-webkit-transform:translateY(0);transform:translateY(0)}.vkuiButton__spinner{position:absolute;left:0;top:0;right:0;bottom:0}.vkuiButton__spinner+.vkuiButton__in{visibility:hidden}.vkuiButton--lvl-primary.vkuiButton--clr-accent{background-color:#2d81e0;background-color:var(--button_primary_background,
     var(--vkui--color_background_accent)
   )}.vkuiButton--lvl-primary.vkuiButton--clr-accent.vkuiButton--hover{background-color:#2483e4;background-color:var(--vkui--color_background_accent--hover,#2483E4)}.vkuiButton--lvl-primary.vkuiButton--clr-accent.vkuiButton--active{background-color:#237edd;background-color:var(--vkui--color_background_accent--active,#237EDD)}.vkuiButton--lvl-primary.vkuiButton--clr-positive{background-color:#4bb34b;background-color:var(--button_commerce_background,
     var(--vkui--color_background_positive)

package/dist/cssm/components/Button/Button.js

@@ -6,7 +6,7 @@ import { createScopedElement } from "../../lib/jsxRuntime";
 import * as React from "react";
 import { classNames } from "../../lib/classNames";
 import { ConfigProviderContext } from "../ConfigProvider/ConfigProviderContext";
-import Tappable from "../Tappable/Tappable";
+import { Tappable } from "../Tappable/Tappable";
 import { Title } from "../Typography/Title/Title";
 import { Text } from "../Typography/Text/Text";
 import { Subhead } from "../Typography/Subhead/Subhead";
@@ -163,7 +163,7 @@ var ButtonComponent = function ButtonComponent(_ref) {
     onClick: loading ? undefined : onClick,
     focusVisibleMode: "outside",
     stopPropagation: stopPropagation,
-    vkuiClass: classNames("Button", "Button--sz-".concat(size), "Button--lvl-".concat(resolvedMode), "Button--clr-".concat(resolvedAppearance), "Button--aln-".concat(align), "Button--sizeY-".concat(sizeY), stretched && "Button--stretched", hasIcons && "Button--with-icon", hasIconOnly && "Button--singleIcon"),
+    vkuiClass: classNames("Button", "Button--sz-".concat(size), "Button--lvl-".concat(resolvedMode), "Button--clr-".concat(resolvedAppearance), "Button--aln-".concat(align), "Button--sizeY-".concat(sizeY), stretched && "Button--stretched", hasIcons && "Button--with-icon", hasIconOnly && "Button--singleIcon", loading && "Button--loading"),
     getRootRef: getRootRef,
     hoverMode: hasNewTokens ? "Button--hover" : "background",
     activeMode: hasNewTokens ? "Button--active" : "opacity"