@vkontakte/vkui 7.1.3 → 7.2.0

package/src/components/CarouselBase/CarouselBase.module.css

@@ -5,17 +5,17 @@
 }
 
 .viewport {
-  margin: 0;
-  block-size: 100%;
   position: relative;
+  block-size: 100%;
+  margin: 0;
 }
 
 .layer {
   display: flex;
+  align-items: stretch;
   inline-size: 100%;
   block-size: 100%;
   min-block-size: 100px;
-  align-items: stretch;
   backface-visibility: hidden;
 }
 
@@ -28,8 +28,8 @@
 }
 
 .slide {
-  inline-size: 100%;
   flex: 0 0 auto;
+  inline-size: 100%;
   max-inline-size: 100%;
   overflow: hidden;
 }
@@ -47,12 +47,12 @@
 .bullets {
   position: absolute;
   inset-block-end: 10px;
-  block-size: 6px;
-  inline-size: 100%;
   inset-inline-start: 0;
   display: flex;
   align-items: center;
   justify-content: center;
+  inline-size: 100%;
+  block-size: 6px;
 }
 
 .bulletsDark .bullet {
@@ -64,11 +64,11 @@
 }
 
 .bullet {
-  block-size: 6px;
   inline-size: 6px;
-  border-radius: 50%;
+  block-size: 6px;
   margin-block: 0;
   margin-inline: 3px;
+  border-radius: 50%;
   opacity: var(--vkui--opacity_disable_accessibility);
 }
 
@@ -81,15 +81,15 @@
   opacity: 0;
 }
 
-.arrowAreaStretch {
+.arrow.arrowAreaStretch {
   inset-block-start: 0;
 }
 
-.arrowAreaFit {
+.arrow.arrowAreaFit {
   inset-block-start: 50%;
-  transform: translateY(-50%);
   block-size: auto;
   padding-block: calc(var(--vkui--size_base_padding_vertical--regular) * 2);
+  transform: translateY(-50%);
 }
 
 .arrowStart {

package/src/components/CarouselBase/CarouselBase.tsx

@@ -3,6 +3,7 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';
+import { useConfigDirection } from '../../hooks/useConfigDirection';
 import { useExternRef } from '../../hooks/useExternRef';
 import { useMutationObserver } from '../../hooks/useMutationObserver';
 import { useResizeObserver } from '../../hooks/useResizeObserver';
@@ -20,7 +21,18 @@ import {
   SLIDE_THRESHOLD,
   SLIDES_MANAGER_STATE,
 } from './constants';
-import { calcMax, calcMin, calculateIndent, getLoopPoints, getTargetIndex } from './helpers';
+import {
+  calcMax,
+  calcMin,
+  calculateIndent,
+  getLoopPoints,
+  getTargetIndex,
+  isBigger,
+  isBiggerOrEqual,
+  isLowerOrEqual,
+  revertRtlValue,
+  validateIndent,
+} from './helpers';
 import { useSlideAnimation } from './hooks';
 import {
   type BaseGalleryProps,
@@ -59,6 +71,8 @@ export const CarouselBase = ({
 }: BaseGalleryProps): React.ReactNode => {
   const slidesStore = React.useRef<Record<string, HTMLDivElement | null>>({});
   const slidesManager = React.useRef<SlidesManagerState>(SLIDES_MANAGER_STATE);
+  const textDirection = useConfigDirection();
+  const isRtl = textDirection === 'rtl';
 
   const rootRef = useExternRef(getRootRef);
   const viewportRef = useExternRef(getRef);
@@ -77,30 +91,12 @@ export const CarouselBase = ({
 
   const isCenterAlign = align === 'center';
 
-  /*
-   * Считает отступ слоя галереи во время драга
-   * Используется только для looped=false галереи
-   * так как только у нее есть пределы по краям
-   */
-  const calculateDragIndent = () => {
-    const localMax = slidesManager.current.max ?? 0;
-    const localMin = slidesManager.current.min ?? 0;
-    const indent = shiftXCurrentRef.current + shiftXDeltaRef.current;
-
-    if (indent > localMax) {
-      return localMax + Number((indent - localMax) / 3);
-    } else if (indent < localMin) {
-      return localMin + Number((indent - localMin) / 3);
-    }
-
-    return indent;
-  };
-
   const calculateCanSlideLeft = () => {
     if (looped) {
       return !slidesManager.current.isFullyVisible;
     }
-    return !slidesManager.current.isFullyVisible && shiftXCurrentRef.current < 0;
+    const isStartShiftX = isBiggerOrEqual(shiftXCurrentRef.current, 0, isRtl);
+    return !slidesManager.current.isFullyVisible && !isStartShiftX;
   };
 
   const calculateCanSlideRight = () => {
@@ -111,7 +107,7 @@ export const CarouselBase = ({
       !slidesManager.current.isFullyVisible &&
       // we can't move right when gallery layer fully scrolled right, if gallery aligned by left side
       ((align === 'left' &&
-        slidesManager.current.containerWidth - shiftXCurrentRef.current <
+        slidesManager.current.containerWidth - revertRtlValue(shiftXCurrentRef.current, isRtl) <
           (slidesManager.current.layerWidth ?? 0)) ||
         // otherwise we need to check current slide index (align = right or align = center)
         (align !== 'left' && slideIndex < slidesManager.current.slides.length - 1))
@@ -137,7 +133,15 @@ export const CarouselBase = ({
     }
 
     if (layerRef.current) {
-      const indent = isDragging.current && !looped ? calculateDragIndent() : shiftX;
+      const indent =
+        isDragging.current && !looped
+          ? validateIndent(
+              slidesManager.current,
+              shiftXCurrentRef.current + shiftXDeltaRef.current,
+              isRtl,
+              false,
+            )
+          : shiftX;
 
       layerRef.current.style.transform = `translate3d(${indent}px, 0, 0)`;
       layerRef.current.style.transition = animation
@@ -146,6 +150,24 @@ export const CarouselBase = ({
     }
   };
 
+  const checkShiftOutOfBoundsFromStart = (shiftX: number, snaps: number[]) =>
+    isBigger(shiftX, snaps[0], isRtl);
+
+  const checkShiftOutOfBoundsFromEnd = (shiftX: number, slides: GallerySlidesState[]) => {
+    /**
+     * Поскольку при `align="center"` слайды сдвинуты, прежде чем рассчитать крайнюю правую точку,
+     * нужно вычесть сдвиг слайдов
+     */
+    const firstSlideShift =
+      align === 'center'
+        ? (slidesManager.current.containerWidth - slidesManager.current.slides[0].width) / 2
+        : 0;
+
+    const lastPoint =
+      slides[slides.length - 1].width + slides[slides.length - 1].coordX - firstSlideShift;
+    return isRtl ? shiftX >= lastPoint : shiftX <= -lastPoint;
+  };
+
   const requestTransform = (shiftX: number, animation = false) => {
     const { snaps, contentSize, slides } = slidesManager.current;
 
@@ -153,13 +175,21 @@ export const CarouselBase = ({
       cancelAnimationFrame(animationFrameRef.current);
     }
     animationFrameRef.current = requestAnimationFrame(() => {
-      if (looped && shiftX > snaps[0]) {
-        shiftXCurrentRef.current = -contentSize + snaps[0];
+      /**
+       * Для бесконечной галереи проверяем, что при dnd мы прокрутили левее, чем первый слайд,
+       * чтобы сбросить `shiftXCurrentRef`
+       */
+      if (looped && checkShiftOutOfBoundsFromStart(shiftX, snaps)) {
+        const firstSnap = revertRtlValue(snaps[0], isRtl);
+        shiftXCurrentRef.current = revertRtlValue(-contentSize + firstSnap, isRtl);
         shiftX = shiftXCurrentRef.current + shiftXDeltaRef.current;
       }
-      const lastPoint = slides[slides.length - 1].width + slides[slides.length - 1].coordX;
 
-      if (looped && shiftX <= -lastPoint) {
+      /**
+       * Для бесконечной галереи проверяем, что при dnd мы прокрутили правее, чем последний слайд,
+       * чтобы правильно пересчитать `shiftXCurrentRef`
+       */
+      if (looped && checkShiftOutOfBoundsFromEnd(shiftX, slides)) {
         shiftXCurrentRef.current = Math.abs(shiftXDeltaRef.current) + snaps[0];
       }
       transformCssStyles(shiftX, animation);
@@ -167,13 +197,25 @@ export const CarouselBase = ({
   };
 
   const initializeSlides = () => {
-    if (!rootRef.current || !viewportRef.current) {
+    if (!rootRef.current || !viewportRef.current || !layerRef.current) {
       return;
     }
+    const layerOffsetWidth = layerRef.current.offsetWidth;
+
+    const calcRtlCoord = (element: HTMLDivElement) => {
+      const offsetLeft = element.offsetLeft;
+      const offsetWidth = element.offsetWidth;
+      return layerOffsetWidth - offsetLeft - offsetWidth;
+    };
+
     let localSlides =
       React.Children.map(children, (_item, i): GallerySlidesState => {
-        const elem = slidesStore.current[i] || { offsetLeft: 0, offsetWidth: 0 };
-        return { coordX: elem.offsetLeft, width: elem.offsetWidth };
+        const elem = slidesStore.current[i];
+        if (!elem) {
+          return { coordX: 0, width: 0 };
+        }
+        const coordX = isRtl ? calcRtlCoord(elem) : elem.offsetLeft;
+        return { coordX, width: elem.offsetWidth };
       }) || [];
 
     if (localSlides.length === 0) {
@@ -223,6 +265,7 @@ export const CarouselBase = ({
               slides: localSlides,
               containerWidth,
               isCenterAlign,
+              isRtl,
             }),
       min:
         looped || onlyOneSlide
@@ -234,22 +277,33 @@ export const CarouselBase = ({
               viewportOffsetWidth,
               isFullyVisible,
               align,
+              isRtl,
             }),
     };
     const snaps = localSlides.map((_, index) =>
-      calculateIndent(index, slidesManager.current, isCenterAlign, looped),
+      calculateIndent({
+        targetIndex: index,
+        slidesManager: slidesManager.current,
+        isCenter: isCenterAlign,
+        looped,
+        isRtl,
+      }),
     );
 
-    let contentSize = -snaps[snaps.length - 1] + localSlides[localSlides.length - 1].width;
+    let contentSize = Math.abs(snaps[snaps.length - 1]) + localSlides[localSlides.length - 1].width;
     if (align === 'center') {
-      contentSize += snaps[0];
+      contentSize += revertRtlValue(snaps[0], isRtl);
     }
 
     slidesManager.current.snaps = snaps;
     slidesManager.current.contentSize = contentSize;
     // Если галерея не зациклена и слайд всего один, то рассчитывать loopPoints тоже не надо
     if (looped && !onlyOneSlide && !isFullyVisible) {
-      slidesManager.current.loopPoints = getLoopPoints(slidesManager.current, containerWidth);
+      slidesManager.current.loopPoints = getLoopPoints(
+        slidesManager.current,
+        containerWidth,
+        isRtl,
+      );
     }
 
     shiftXCurrentRef.current = snaps[slideIndex];
@@ -276,15 +330,22 @@ export const CarouselBase = ({
     const indent = snaps[slideIndex];
     let startPoint = shiftXCurrentRef.current;
 
+    const fromLastToFirst = isLowerOrEqual(
+      shiftXCurrentRef.current,
+      snaps[snaps.length - 1],
+      isRtl,
+    );
     /**
      * Переключаемся с последнего элемента на первый
      * Для корректной анимации мы прокручиваем последний слайд на всю длину (shiftX) "вперед"
      * В конце анимации при отрисовке следующего кадра задаем всем слайдам начальные значения
      */
-    if (indent === snaps[0] && shiftXCurrentRef.current <= snaps[snaps.length - 1]) {
-      const distance =
-        Math.abs(snaps[snaps.length - 1]) + slides[slides.length - 1].width + startPoint;
-
+    if (indent === snaps[0] && fromLastToFirst) {
+      const endEdge = revertRtlValue(
+        Math.abs(snaps[snaps.length - 1]) + slides[slides.length - 1].width,
+        isRtl,
+      );
+      const distance = endEdge + startPoint;
       addToAnimationQueue(
         getAnimateFunction((progress) => {
           const shiftX = startPoint + progress * distance * -1;
@@ -305,15 +366,16 @@ export const CarouselBase = ({
        * В следующем кадре начинаем анимация прокрутки "назад"
        */
     } else if (indent === snaps[snaps.length - 1] && shiftXCurrentRef.current === snaps[0]) {
-      startPoint = indent - slides[slides.length - 1].width;
+      startPoint = indent - revertRtlValue(slides[slides.length - 1].width, isRtl);
 
       addToAnimationQueue(() => {
         requestAnimationFrame(() => {
-          const shiftX = indent - slides[slides.length - 1].width;
+          const shiftX = indent - revertRtlValue(slides[slides.length - 1].width, isRtl);
           transformCssStyles(shiftX);
 
           getAnimateFunction((progress) => {
-            transformCssStyles(startPoint + progress * slides[slides.length - 1].width);
+            const diff = revertRtlValue(progress * slides[slides.length - 1].width, isRtl);
+            transformCssStyles(startPoint + diff);
           })();
         });
       });
@@ -377,7 +439,7 @@ export const CarouselBase = ({
 
   useMutationObserver(layerRef, initializeSlides);
 
-  useIsomorphicLayoutEffect(initializeSlides, [align, slideWidth, looped]);
+  useIsomorphicLayoutEffect(initializeSlides, [align, slideWidth, looped, isRtl]);
 
   const calculateMinDeltaXToSlide = () => {
     return slidesManager.current.slides[slideIndex].width * SLIDE_THRESHOLD;
@@ -385,7 +447,7 @@ export const CarouselBase = ({
 
   const slideLeft = (event: React.MouseEvent) => {
     if (slideIndex > 0) {
-      shiftXCurrentRef.current += calculateMinDeltaXToSlide();
+      shiftXCurrentRef.current += revertRtlValue(calculateMinDeltaXToSlide(), isRtl);
     }
     onChange?.(
       (slideIndex - 1 + slidesManager.current.slides.length) % slidesManager.current.slides.length,
@@ -395,7 +457,7 @@ export const CarouselBase = ({
 
   const slideRight = (event: React.MouseEvent) => {
     if (slideIndex < slidesManager.current.slides.length - 1) {
-      shiftXCurrentRef.current -= calculateMinDeltaXToSlide();
+      shiftXCurrentRef.current -= revertRtlValue(calculateMinDeltaXToSlide(), isRtl);
     }
     onChange?.((slideIndex + 1) % slidesManager.current.slides.length);
     onNextClick?.(event);
@@ -436,6 +498,7 @@ export const CarouselBase = ({
           currentShiftXDelta: shiftXDeltaRef.current,
           max: slidesManager.current.max,
           looped,
+          isRtl,
         });
       }
       onDragEnd?.(e, targetIndex);

package/src/components/CarouselBase/helpers.ts

@@ -1,3 +1,4 @@
+import { getRequiredValueByKey } from '../../helpers/getValueByKey';
 import { type AlignType } from '../../types';
 import { SLIDE_THRESHOLD } from './constants';
 import {
@@ -7,14 +8,46 @@ import {
   type SlidesManagerState,
 } from './types';
 
-const validateIndent = (slidesManager: SlidesManagerState, value: number) => {
+export const revertRtlValue = (n: number, isRtl: boolean) => {
+  return isRtl ? -n : n;
+};
+
+export const isBigger = (a: number, b: number, isRtl: boolean) => (isRtl ? a < b : a > b);
+export const isBiggerOrEqual = (a: number, b: number, isRtl: boolean) => (isRtl ? a <= b : a >= b);
+
+export const isLower = (a: number, b: number, isRtl: boolean) => (isRtl ? a > b : a < b);
+export const isLowerOrEqual = (a: number, b: number, isRtl: boolean) => (isRtl ? a >= b : a <= b);
+
+/*
+ * Считает отступ слоя галереи во время драга
+ * Используется только для looped=false галереи
+ * так как только у нее есть пределы по краям
+ */
+export const validateIndent = (
+  slidesManager: SlidesManagerState,
+  value: number,
+  isRtl: boolean,
+  bounded = true,
+) => {
   const localMax = slidesManager.max ?? 0;
   const localMin = slidesManager.min ?? 0;
 
-  if (value < localMin) {
-    return localMin;
-  } else if (value > localMax) {
-    return localMax;
+  const moreThanMax = isBigger(value, localMax, isRtl);
+  if (moreThanMax) {
+    if (bounded) {
+      return localMax;
+    } else {
+      return localMax + Number((value - localMax) / 3);
+    }
+  }
+
+  const lessThanMin = isLower(value, localMin, isRtl);
+  if (lessThanMin) {
+    if (bounded) {
+      return localMin;
+    } else {
+      return localMin + Number((value - localMin) / 3);
+    }
   }
 
   return value;
@@ -23,12 +56,19 @@ const validateIndent = (slidesManager: SlidesManagerState, value: number) => {
 /*
  * Считает отступ слоя галереи
  */
-export function calculateIndent(
-  targetIndex: number,
-  slidesManager: SlidesManagerState,
-  isCenter: boolean,
+export function calculateIndent({
+  targetIndex,
+  slidesManager,
+  isCenter,
   looped = false,
-): number {
+  isRtl = false,
+}: {
+  targetIndex: number;
+  slidesManager: SlidesManagerState;
+  isCenter: boolean;
+  looped: boolean;
+  isRtl: boolean;
+}): number {
   if (!slidesManager.slides.length) {
     return 0;
   }
@@ -39,10 +79,10 @@ export function calculateIndent(
     const { coordX, width } = targetSlide;
 
     if (isCenter) {
-      return slidesManager.containerWidth / 2 - coordX - width / 2;
+      return revertRtlValue(slidesManager.containerWidth / 2 - coordX - width / 2, isRtl);
     }
-    const indent = -1 * coordX;
-    return looped ? indent : validateIndent(slidesManager, indent);
+    const indent = revertRtlValue(-1 * coordX, isRtl);
+    return looped ? indent : validateIndent(slidesManager, indent, isRtl);
   }
 
   return 0;
@@ -82,23 +122,29 @@ function calculateLoopPoints(
   edge: 'start' | 'end',
   slidesManager: SlidesManagerState,
   containerWidth: number,
+  isRtl: boolean,
 ): LoopPoint[] {
   const { contentSize, slides, snaps } = slidesManager;
   const isStartEdge = edge === 'start';
   const offset = isStartEdge ? -contentSize : contentSize;
 
   return indexes.map((index) => {
-    const initial = isStartEdge ? 0 : -contentSize;
-    const altered = isStartEdge ? contentSize : 0;
-    const loopPoint = isStartEdge
-      ? snaps[index] + containerWidth + offset
-      : snaps[index] - slides[index].width + offset - snaps[0];
+    const initial = revertRtlValue(isStartEdge ? 0 : -contentSize, isRtl);
+    const altered = revertRtlValue(isStartEdge ? contentSize : 0, isRtl);
+
+    const snap = revertRtlValue(snaps[index], isRtl);
+    const firstSnap = revertRtlValue(snaps[0], isRtl);
+    const loopPoint = revertRtlValue(
+      isStartEdge
+        ? snap + containerWidth + offset
+        : snap - slides[index].width + offset - firstSnap,
+      isRtl,
+    );
 
     return {
       index,
-      target: (currentLocation) => {
-        return currentLocation >= loopPoint ? initial : altered;
-      },
+      target: (currentLocation) =>
+        isBiggerOrEqual(currentLocation, loopPoint, isRtl) ? initial : altered,
     };
   });
 }
@@ -109,14 +155,16 @@ function calculateLoopPoints(
 export function getLoopPoints(
   slidesManager: SlidesManagerState,
   containerWidth: number,
+  isRtl = false,
 ): LoopPoint[] {
   const { slides, snaps } = slidesManager;
-  const startShiftedIndexes = getShiftedIndexes(-1, slides, snaps[0]);
-  const endShiftedIndexes = getShiftedIndexes(1, slides, containerWidth - snaps[0]);
+  const firstSnap = revertRtlValue(snaps[0], isRtl);
+  const startShiftedIndexes = getShiftedIndexes(-1, slides, firstSnap);
+  const endShiftedIndexes = getShiftedIndexes(1, slides, containerWidth - firstSnap);
 
   return [
-    ...calculateLoopPoints(endShiftedIndexes, 'start', slidesManager, containerWidth),
-    ...calculateLoopPoints(startShiftedIndexes, 'end', slidesManager, containerWidth),
+    ...calculateLoopPoints(endShiftedIndexes, 'start', slidesManager, containerWidth, isRtl),
+    ...calculateLoopPoints(startShiftedIndexes, 'end', slidesManager, containerWidth, isRtl),
   ];
 }
 
@@ -130,6 +178,7 @@ export function getTargetIndex({
   currentShiftXDelta,
   looped = false,
   max = null,
+  isRtl = false,
 }: {
   slides: GallerySlidesState[];
   slideIndex: number;
@@ -137,14 +186,23 @@ export function getTargetIndex({
   currentShiftXDelta: number;
   looped: boolean;
   max?: number | null;
+  isRtl?: boolean;
 }): number {
-  const shift = currentShiftX + currentShiftXDelta - (max ?? 0);
-  const direction = currentShiftXDelta < 0 ? 1 : -1;
+  max = max ?? 0;
+  // Инвертируем значения смещения для RTL режима
+  const shift = revertRtlValue(currentShiftX + currentShiftXDelta - max, isRtl);
+
+  // Инвертируем направление для RTL режима
+  const direction = isLower(currentShiftXDelta, 0, isRtl) ? 1 : -1;
 
   // Находим ближайшую границу слайда к текущему отступу
   let targetIndex = slides.reduce((val: number, item: GallerySlidesState, index: number) => {
-    const previousValue = Math.abs(slides[val].coordX + shift);
-    const currentValue = Math.abs(item.coordX + shift);
+    // Инвертируем координаты для RTL режима
+    const previousCoordX = slides[val].coordX;
+    const currentCoordX = item.coordX;
+
+    const previousValue = Math.abs(previousCoordX + shift);
+    const currentValue = Math.abs(currentCoordX + shift);
 
     return previousValue < currentValue ? val : index;
   }, slideIndex);
@@ -171,6 +229,7 @@ export function getTargetIndex({
 }
 
 interface CalcMin extends Partial<LayoutState> {
+  isRtl?: boolean;
   align: AlignType;
 }
 
@@ -181,34 +240,37 @@ export const calcMin = ({
   viewportOffsetWidth = 0,
   isFullyVisible,
   align,
+  isRtl = false,
 }: CalcMin): number => {
-  switch (align) {
-    case 'left':
-      if (isFullyVisible) {
-        return 0;
-      }
-      return containerWidth - layerWidth;
-    case 'right':
-      if (isFullyVisible) {
-        return 0;
-      }
-      return viewportOffsetWidth - layerWidth;
-    case 'center':
+  if (align !== 'center' && isFullyVisible) {
+    return 0;
+  }
+  const result = getRequiredValueByKey(align, {
+    left: () => containerWidth - layerWidth,
+    right: () => viewportOffsetWidth - layerWidth,
+    center: () => {
       const { coordX, width } = slides[slides.length - 1];
       return containerWidth / 2 - coordX - width / 2;
-    default:
-      throw new Error(`unknown align ${align}`);
-  }
+    },
+  })();
+  return revertRtlValue(result, isRtl);
 };
 
 interface CalcMax extends Partial<LayoutState> {
+  isRtl?: boolean;
   isCenterAlign: boolean;
 }
 
-export const calcMax = ({ slides = [], containerWidth = 0, isCenterAlign }: CalcMax): number => {
+export const calcMax = ({
+  slides = [],
+  containerWidth = 0,
+  isCenterAlign,
+  isRtl = false,
+}: CalcMax): number => {
   if (isCenterAlign && slides.length) {
     const { width, coordX } = slides[0];
-    return containerWidth / 2 - coordX - width / 2;
+    const result = containerWidth / 2 - coordX - width / 2;
+    return revertRtlValue(result, isRtl);
   }
   return 0;
 };

package/src/components/Cell/Cell.module.css

@@ -11,17 +11,31 @@
 .dragger {
   position: relative;
   flex-shrink: 0;
+}
+
+.checkbox {
   margin-inline-end: var(--vkui--spacing_size_2xl);
 }
 
+.dragger {
+  display: flex;
+  align-items: center;
+  block-size: 100%;
+  padding-inline-end: var(--vkui--spacing_size_2xl);
+}
+
+.dragger.controlNoBefore {
+  padding-inline-end: 0;
+}
+
 .controlNoBefore {
   /* Когда в before нет ничего, кроме dragger или checkbox, нужно добавлять компенсированный отступ */
   margin-inline-end: calc(var(--vkui--spacing_size_2xl) - var(--vkui--spacing_size_xl));
 }
 
 .content {
-  max-inline-size: 100%;
   min-inline-size: 0;
+  max-inline-size: 100%;
 }
 
 .removable .content {
@@ -46,7 +60,7 @@
  * iOS
  */
 .ios .dragger {
-  margin-inline: var(--vkui--spacing_size_xl) 0;
+  padding-inline: var(--vkui--spacing_size_xl) 0;
 }
 
 .ios .checkbox {

package/src/components/Cell/CellDragger/CellDragger.module.css

@@ -1,9 +1,9 @@
 /* stylelint-disable selector-max-universal */
 .host {
-  cursor: ns-resize;
   color: var(--vkui--color_icon_secondary);
-  user-select: none;
   touch-action: manipulation;
+  cursor: ns-resize;
+  user-select: none;
 }
 
 .icon {