@vkontakte/vkui 7.1.2 → 7.2.0

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

@@ -1,17 +1,40 @@
+import { getRequiredValueByKey } from "../../helpers/getValueByKey.js";
 import { SLIDE_THRESHOLD } from "./constants.js";
-const validateIndent = (slidesManager, value)=>{
+export const revertRtlValue = (n, isRtl)=>{
+    return isRtl ? -n : n;
+};
+export const isBigger = (a, b, isRtl)=>isRtl ? a < b : a > b;
+export const isBiggerOrEqual = (a, b, isRtl)=>isRtl ? a <= b : a >= b;
+export const isLower = (a, b, isRtl)=>isRtl ? a > b : a < b;
+export const isLowerOrEqual = (a, b, isRtl)=>isRtl ? a >= b : a <= b;
+/*
+ * Считает отступ слоя галереи во время драга
+ * Используется только для looped=false галереи
+ * так как только у нее есть пределы по краям
+ */ export const validateIndent = (slidesManager, value, isRtl, 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;
 };
 /*
  * Считает отступ слоя галереи
- */ export function calculateIndent(targetIndex, slidesManager, isCenter, looped = false) {
+ */ export function calculateIndent({ targetIndex, slidesManager, isCenter, looped = false, isRtl = false }) {
     if (!slidesManager.slides.length) {
         return 0;
     }
@@ -19,10 +42,10 @@ const validateIndent = (slidesManager, value)=>{
     if (targetSlide) {
         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;
 }
@@ -42,42 +65,49 @@ const validateIndent = (slidesManager, value)=>{
     }
     return shiftedSlideIndexes;
 }
-function calculateLoopPoints(indexes, edge, slidesManager, containerWidth) {
+function calculateLoopPoints(indexes, edge, slidesManager, containerWidth, isRtl) {
     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
         };
     });
 }
 /**
  * Вычисляем "ключевые" точки, на которых должно происходить смещение слайдов
- */ export function getLoopPoints(slidesManager, containerWidth) {
+ */ export function getLoopPoints(slidesManager, containerWidth, isRtl = false) {
     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)
     ];
 }
 /*
  * Получает индекс слайда, к которому будет осуществлен переход
- */ export function getTargetIndex({ slides, slideIndex, currentShiftX, currentShiftXDelta, looped = false, max = null }) {
-    const shift = currentShiftX + currentShiftXDelta - (max ?? 0);
-    const direction = currentShiftXDelta < 0 ? 1 : -1;
+ */ export function getTargetIndex({ slides, slideIndex, currentShiftX, currentShiftXDelta, looped = false, max = null, isRtl = false }) {
+    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, item, index)=>{
-        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);
     if (targetIndex === slideIndex) {
@@ -95,29 +125,25 @@ function calculateLoopPoints(indexes, edge, slidesManager, containerWidth) {
     }
     return targetIndex;
 }
-export const calcMin = ({ containerWidth = 0, layerWidth = 0, slides = [], viewportOffsetWidth = 0, isFullyVisible, align })=>{
-    switch(align){
-        case 'left':
-            if (isFullyVisible) {
-                return 0;
-            }
-            return containerWidth - layerWidth;
-        case 'right':
-            if (isFullyVisible) {
-                return 0;
-            }
-            return viewportOffsetWidth - layerWidth;
-        case 'center':
+export const calcMin = ({ containerWidth = 0, layerWidth = 0, slides = [], viewportOffsetWidth = 0, isFullyVisible, align, isRtl = false })=>{
+    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);
 };
-export const calcMax = ({ slides = [], containerWidth = 0, isCenterAlign })=>{
+export const calcMax = ({ slides = [], containerWidth = 0, isCenterAlign, isRtl = false })=>{
     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/dist/cssm/components/CarouselBase/helpers.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CarouselBase/helpers.ts"],"sourcesContent":["import { type AlignType } from '../../types';\nimport { SLIDE_THRESHOLD } from './constants';\nimport {\n  type GallerySlidesState,\n  type LayoutState,\n  type LoopPoint,\n  type SlidesManagerState,\n} from './types';\n\nconst validateIndent = (slidesManager: SlidesManagerState, value: number) => {\n  const localMax = slidesManager.max ?? 0;\n  const localMin = slidesManager.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 */\nexport function calculateIndent(\n  targetIndex: number,\n  slidesManager: SlidesManagerState,\n  isCenter: boolean,\n  looped = false,\n): number {\n  if (!slidesManager.slides.length) {\n    return 0;\n  }\n\n  const targetSlide = slidesManager.slides[targetIndex];\n\n  if (targetSlide) {\n    const { coordX, width } = targetSlide;\n\n    if (isCenter) {\n      return slidesManager.containerWidth / 2 - coordX - width / 2;\n    }\n    const indent = -1 * coordX;\n    return looped ? indent : validateIndent(slidesManager, indent);\n  }\n\n  return 0;\n}\n\n/**\n * Вычисляем индексы слайдов, которые необходимо смещать\n */\nexport function getShiftedIndexes(\n  direction: 1 | -1,\n  slides: GallerySlidesState[],\n  availableWidth: number,\n): number[] {\n  let gap = availableWidth;\n  const shiftedSlideIndexes = [];\n  const startIndex = direction === 1 ? 0 : slides.length - 1;\n  const endIndex = direction === 1 ? slides.length - 1 : 0;\n\n  for (\n    let i = startIndex;\n    (direction === 1 ? i <= endIndex : i >= endIndex) && gap > 0;\n    i += direction\n  ) {\n    const slideWidth = slides[i].width;\n\n    if (gap > 0) {\n      shiftedSlideIndexes.push(i);\n    }\n    gap -= slideWidth;\n  }\n\n  return shiftedSlideIndexes;\n}\n\nfunction calculateLoopPoints(\n  indexes: number[],\n  edge: 'start' | 'end',\n  slidesManager: SlidesManagerState,\n  containerWidth: number,\n): LoopPoint[] {\n  const { contentSize, slides, snaps } = slidesManager;\n  const isStartEdge = edge === 'start';\n  const offset = isStartEdge ? -contentSize : contentSize;\n\n  return indexes.map((index) => {\n    const initial = isStartEdge ? 0 : -contentSize;\n    const altered = isStartEdge ? contentSize : 0;\n    const loopPoint = isStartEdge\n      ? snaps[index] + containerWidth + offset\n      : snaps[index] - slides[index].width + offset - snaps[0];\n\n    return {\n      index,\n      target: (currentLocation) => {\n        return currentLocation >= loopPoint ? initial : altered;\n      },\n    };\n  });\n}\n\n/**\n * Вычисляем \"ключевые\" точки, на которых должно происходить смещение слайдов\n */\nexport function getLoopPoints(\n  slidesManager: SlidesManagerState,\n  containerWidth: number,\n): LoopPoint[] {\n  const { slides, snaps } = slidesManager;\n  const startShiftedIndexes = getShiftedIndexes(-1, slides, snaps[0]);\n  const endShiftedIndexes = getShiftedIndexes(1, slides, containerWidth - snaps[0]);\n\n  return [\n    ...calculateLoopPoints(endShiftedIndexes, 'start', slidesManager, containerWidth),\n    ...calculateLoopPoints(startShiftedIndexes, 'end', slidesManager, containerWidth),\n  ];\n}\n\n/*\n * Получает индекс слайда, к которому будет осуществлен переход\n */\nexport function getTargetIndex({\n  slides,\n  slideIndex,\n  currentShiftX,\n  currentShiftXDelta,\n  looped = false,\n  max = null,\n}: {\n  slides: GallerySlidesState[];\n  slideIndex: number;\n  currentShiftX: number;\n  currentShiftXDelta: number;\n  looped: boolean;\n  max?: number | null;\n}): number {\n  const shift = currentShiftX + currentShiftXDelta - (max ?? 0);\n  const direction = currentShiftXDelta < 0 ? 1 : -1;\n\n  // Находим ближайшую границу слайда к текущему отступу\n  let targetIndex = slides.reduce((val: number, item: GallerySlidesState, index: number) => {\n    const previousValue = Math.abs(slides[val].coordX + shift);\n    const currentValue = Math.abs(item.coordX + shift);\n\n    return previousValue < currentValue ? val : index;\n  }, slideIndex);\n\n  if (targetIndex === slideIndex) {\n    let targetSlide = slideIndex + direction;\n\n    if (targetSlide >= 0 && targetSlide < slides.length) {\n      if (Math.abs(currentShiftXDelta) > slides[targetSlide].width * SLIDE_THRESHOLD) {\n        return targetSlide;\n      }\n      return targetIndex;\n    }\n    if (!looped) {\n      return direction < 0 ? Math.max(targetIndex, 0) : Math.min(targetIndex, slides.length - 1);\n    }\n\n    return direction < 0\n      ? (targetSlide + slides.length) % slides.length\n      : targetSlide % slides.length;\n  }\n\n  return targetIndex;\n}\n\ninterface CalcMin extends Partial<LayoutState> {\n  align: AlignType;\n}\n\nexport const calcMin = ({\n  containerWidth = 0,\n  layerWidth = 0,\n  slides = [],\n  viewportOffsetWidth = 0,\n  isFullyVisible,\n  align,\n}: CalcMin): number => {\n  switch (align) {\n    case 'left':\n      if (isFullyVisible) {\n        return 0;\n      }\n      return containerWidth - layerWidth;\n    case 'right':\n      if (isFullyVisible) {\n        return 0;\n      }\n      return viewportOffsetWidth - layerWidth;\n    case 'center':\n      const { coordX, width } = slides[slides.length - 1];\n      return containerWidth / 2 - coordX - width / 2;\n    default:\n      throw new Error(`unknown align ${align}`);\n  }\n};\n\ninterface CalcMax extends Partial<LayoutState> {\n  isCenterAlign: boolean;\n}\n\nexport const calcMax = ({ slides = [], containerWidth = 0, isCenterAlign }: CalcMax): number => {\n  if (isCenterAlign && slides.length) {\n    const { width, coordX } = slides[0];\n    return containerWidth / 2 - coordX - width / 2;\n  }\n  return 0;\n};\n"],"names":["SLIDE_THRESHOLD","validateIndent","slidesManager","value","localMax","max","localMin","min","calculateIndent","targetIndex","isCenter","looped","slides","length","targetSlide","coordX","width","containerWidth","indent","getShiftedIndexes","direction","availableWidth","gap","shiftedSlideIndexes","startIndex","endIndex","i","slideWidth","push","calculateLoopPoints","indexes","edge","contentSize","snaps","isStartEdge","offset","map","index","initial","altered","loopPoint","target","currentLocation","getLoopPoints","startShiftedIndexes","endShiftedIndexes","getTargetIndex","slideIndex","currentShiftX","currentShiftXDelta","shift","reduce","val","item","previousValue","Math","abs","currentValue","calcMin","layerWidth","viewportOffsetWidth","isFullyVisible","align","Error","calcMax","isCenterAlign"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/CarouselBase/helpers.ts"],"sourcesContent":["import { getRequiredValueByKey } from '../../helpers/getValueByKey';\nimport { type AlignType } from '../../types';\nimport { SLIDE_THRESHOLD } from './constants';\nimport {\n  type GallerySlidesState,\n  type LayoutState,\n  type LoopPoint,\n  type SlidesManagerState,\n} from './types';\n\nexport const revertRtlValue = (n: number, isRtl: boolean) => {\n  return isRtl ? -n : n;\n};\n\nexport const isBigger = (a: number, b: number, isRtl: boolean) => (isRtl ? a < b : a > b);\nexport const isBiggerOrEqual = (a: number, b: number, isRtl: boolean) => (isRtl ? a <= b : a >= b);\n\nexport const isLower = (a: number, b: number, isRtl: boolean) => (isRtl ? a > b : a < b);\nexport const isLowerOrEqual = (a: number, b: number, isRtl: boolean) => (isRtl ? a >= b : a <= b);\n\n/*\n * Считает отступ слоя галереи во время драга\n * Используется только для looped=false галереи\n * так как только у нее есть пределы по краям\n */\nexport const validateIndent = (\n  slidesManager: SlidesManagerState,\n  value: number,\n  isRtl: boolean,\n  bounded = true,\n) => {\n  const localMax = slidesManager.max ?? 0;\n  const localMin = slidesManager.min ?? 0;\n\n  const moreThanMax = isBigger(value, localMax, isRtl);\n  if (moreThanMax) {\n    if (bounded) {\n      return localMax;\n    } else {\n      return localMax + Number((value - localMax) / 3);\n    }\n  }\n\n  const lessThanMin = isLower(value, localMin, isRtl);\n  if (lessThanMin) {\n    if (bounded) {\n      return localMin;\n    } else {\n      return localMin + Number((value - localMin) / 3);\n    }\n  }\n\n  return value;\n};\n\n/*\n * Считает отступ слоя галереи\n */\nexport function calculateIndent({\n  targetIndex,\n  slidesManager,\n  isCenter,\n  looped = false,\n  isRtl = false,\n}: {\n  targetIndex: number;\n  slidesManager: SlidesManagerState;\n  isCenter: boolean;\n  looped: boolean;\n  isRtl: boolean;\n}): number {\n  if (!slidesManager.slides.length) {\n    return 0;\n  }\n\n  const targetSlide = slidesManager.slides[targetIndex];\n\n  if (targetSlide) {\n    const { coordX, width } = targetSlide;\n\n    if (isCenter) {\n      return revertRtlValue(slidesManager.containerWidth / 2 - coordX - width / 2, isRtl);\n    }\n    const indent = revertRtlValue(-1 * coordX, isRtl);\n    return looped ? indent : validateIndent(slidesManager, indent, isRtl);\n  }\n\n  return 0;\n}\n\n/**\n * Вычисляем индексы слайдов, которые необходимо смещать\n */\nexport function getShiftedIndexes(\n  direction: 1 | -1,\n  slides: GallerySlidesState[],\n  availableWidth: number,\n): number[] {\n  let gap = availableWidth;\n  const shiftedSlideIndexes = [];\n  const startIndex = direction === 1 ? 0 : slides.length - 1;\n  const endIndex = direction === 1 ? slides.length - 1 : 0;\n\n  for (\n    let i = startIndex;\n    (direction === 1 ? i <= endIndex : i >= endIndex) && gap > 0;\n    i += direction\n  ) {\n    const slideWidth = slides[i].width;\n\n    if (gap > 0) {\n      shiftedSlideIndexes.push(i);\n    }\n    gap -= slideWidth;\n  }\n\n  return shiftedSlideIndexes;\n}\n\nfunction calculateLoopPoints(\n  indexes: number[],\n  edge: 'start' | 'end',\n  slidesManager: SlidesManagerState,\n  containerWidth: number,\n  isRtl: boolean,\n): LoopPoint[] {\n  const { contentSize, slides, snaps } = slidesManager;\n  const isStartEdge = edge === 'start';\n  const offset = isStartEdge ? -contentSize : contentSize;\n\n  return indexes.map((index) => {\n    const initial = revertRtlValue(isStartEdge ? 0 : -contentSize, isRtl);\n    const altered = revertRtlValue(isStartEdge ? contentSize : 0, isRtl);\n\n    const snap = revertRtlValue(snaps[index], isRtl);\n    const firstSnap = revertRtlValue(snaps[0], isRtl);\n    const loopPoint = revertRtlValue(\n      isStartEdge\n        ? snap + containerWidth + offset\n        : snap - slides[index].width + offset - firstSnap,\n      isRtl,\n    );\n\n    return {\n      index,\n      target: (currentLocation) =>\n        isBiggerOrEqual(currentLocation, loopPoint, isRtl) ? initial : altered,\n    };\n  });\n}\n\n/**\n * Вычисляем \"ключевые\" точки, на которых должно происходить смещение слайдов\n */\nexport function getLoopPoints(\n  slidesManager: SlidesManagerState,\n  containerWidth: number,\n  isRtl = false,\n): LoopPoint[] {\n  const { slides, snaps } = slidesManager;\n  const firstSnap = revertRtlValue(snaps[0], isRtl);\n  const startShiftedIndexes = getShiftedIndexes(-1, slides, firstSnap);\n  const endShiftedIndexes = getShiftedIndexes(1, slides, containerWidth - firstSnap);\n\n  return [\n    ...calculateLoopPoints(endShiftedIndexes, 'start', slidesManager, containerWidth, isRtl),\n    ...calculateLoopPoints(startShiftedIndexes, 'end', slidesManager, containerWidth, isRtl),\n  ];\n}\n\n/*\n * Получает индекс слайда, к которому будет осуществлен переход\n */\nexport function getTargetIndex({\n  slides,\n  slideIndex,\n  currentShiftX,\n  currentShiftXDelta,\n  looped = false,\n  max = null,\n  isRtl = false,\n}: {\n  slides: GallerySlidesState[];\n  slideIndex: number;\n  currentShiftX: number;\n  currentShiftXDelta: number;\n  looped: boolean;\n  max?: number | null;\n  isRtl?: boolean;\n}): number {\n  max = max ?? 0;\n  // Инвертируем значения смещения для RTL режима\n  const shift = revertRtlValue(currentShiftX + currentShiftXDelta - max, isRtl);\n\n  // Инвертируем направление для RTL режима\n  const direction = isLower(currentShiftXDelta, 0, isRtl) ? 1 : -1;\n\n  // Находим ближайшую границу слайда к текущему отступу\n  let targetIndex = slides.reduce((val: number, item: GallerySlidesState, index: number) => {\n    // Инвертируем координаты для RTL режима\n    const previousCoordX = slides[val].coordX;\n    const currentCoordX = item.coordX;\n\n    const previousValue = Math.abs(previousCoordX + shift);\n    const currentValue = Math.abs(currentCoordX + shift);\n\n    return previousValue < currentValue ? val : index;\n  }, slideIndex);\n\n  if (targetIndex === slideIndex) {\n    let targetSlide = slideIndex + direction;\n\n    if (targetSlide >= 0 && targetSlide < slides.length) {\n      if (Math.abs(currentShiftXDelta) > slides[targetSlide].width * SLIDE_THRESHOLD) {\n        return targetSlide;\n      }\n      return targetIndex;\n    }\n    if (!looped) {\n      return direction < 0 ? Math.max(targetIndex, 0) : Math.min(targetIndex, slides.length - 1);\n    }\n\n    return direction < 0\n      ? (targetSlide + slides.length) % slides.length\n      : targetSlide % slides.length;\n  }\n\n  return targetIndex;\n}\n\ninterface CalcMin extends Partial<LayoutState> {\n  isRtl?: boolean;\n  align: AlignType;\n}\n\nexport const calcMin = ({\n  containerWidth = 0,\n  layerWidth = 0,\n  slides = [],\n  viewportOffsetWidth = 0,\n  isFullyVisible,\n  align,\n  isRtl = false,\n}: CalcMin): number => {\n  if (align !== 'center' && isFullyVisible) {\n    return 0;\n  }\n  const result = getRequiredValueByKey(align, {\n    left: () => containerWidth - layerWidth,\n    right: () => viewportOffsetWidth - layerWidth,\n    center: () => {\n      const { coordX, width } = slides[slides.length - 1];\n      return containerWidth / 2 - coordX - width / 2;\n    },\n  })();\n  return revertRtlValue(result, isRtl);\n};\n\ninterface CalcMax extends Partial<LayoutState> {\n  isRtl?: boolean;\n  isCenterAlign: boolean;\n}\n\nexport const calcMax = ({\n  slides = [],\n  containerWidth = 0,\n  isCenterAlign,\n  isRtl = false,\n}: CalcMax): number => {\n  if (isCenterAlign && slides.length) {\n    const { width, coordX } = slides[0];\n    const result = containerWidth / 2 - coordX - width / 2;\n    return revertRtlValue(result, isRtl);\n  }\n  return 0;\n};\n"],"names":["getRequiredValueByKey","SLIDE_THRESHOLD","revertRtlValue","n","isRtl","isBigger","a","b","isBiggerOrEqual","isLower","isLowerOrEqual","validateIndent","slidesManager","value","bounded","localMax","max","localMin","min","moreThanMax","Number","lessThanMin","calculateIndent","targetIndex","isCenter","looped","slides","length","targetSlide","coordX","width","containerWidth","indent","getShiftedIndexes","direction","availableWidth","gap","shiftedSlideIndexes","startIndex","endIndex","i","slideWidth","push","calculateLoopPoints","indexes","edge","contentSize","snaps","isStartEdge","offset","map","index","initial","altered","snap","firstSnap","loopPoint","target","currentLocation","getLoopPoints","startShiftedIndexes","endShiftedIndexes","getTargetIndex","slideIndex","currentShiftX","currentShiftXDelta","shift","reduce","val","item","previousCoordX","currentCoordX","previousValue","Math","abs","currentValue","calcMin","layerWidth","viewportOffsetWidth","isFullyVisible","align","result","left","right","center","calcMax","isCenterAlign"],"mappings":"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"}

package/dist/cssm/components/Cell/Cell.module.css

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

package/dist/cssm/components/Cell/CellDragger/CellDragger.module.css

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

package/dist/cssm/components/CellButton/CellButton.module.css

@@ -1,12 +1,12 @@
 .host {
   box-sizing: border-box;
-  text-decoration: none;
-  margin: 0;
-  border: 0;
   inline-size: 100%;
-  background: transparent;
-  text-align: start;
   padding-block: 0;
+  margin: 0;
+  text-align: start;
+  text-decoration: none;
+  background: transparent;
+  border: 0;
 }
 
 /**
@@ -17,8 +17,8 @@
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 
 :global(.vkuiInternalFormItem) .host {
-  inline-size: 100%;
   box-sizing: content-box;
+  inline-size: 100%;
   margin-block: 0;
   margin-inline: calc(-1 * var(--vkui--size_base_padding_horizontal--regular));
 }
@@ -42,6 +42,8 @@
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 
 .centered :global(.vkuiIcon) {
+  -webkit-padding-end: var(--vkui--spacing_size_m);
+          padding-inline-end: var(--vkui--spacing_size_m);
   /* компенсируем отступ заданные в SimpleCell__before */
   -webkit-margin-end: calc(
     -1 * var(--vkui_internal--SimpleCell-before-inline-padding-end, var(--vkui--spacing_size_xl))
@@ -49,8 +51,6 @@
           margin-inline-end: calc(
     -1 * var(--vkui_internal--SimpleCell-before-inline-padding-end, var(--vkui--spacing_size_xl))
   );
-  -webkit-padding-end: var(--vkui--spacing_size_m);
-          padding-inline-end: var(--vkui--spacing_size_m);
 }
 
 .appearanceAccent {

package/dist/cssm/components/CellButtonGroup/CellButtonGroup.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { ButtonGroup } from "../ButtonGroup/ButtonGroup.js";
+import { CellButtonGroupSeparator } from "./CellButtonGroupSeparator/CellButtonGroupSeparator.js";
+/**
+ * @since 7.2.0
+ *
+ * @see https://vkcom.github.io/VKUI/#/CellButtonGroup
+ */ export const CellButtonGroup = (props)=>{
+    return /*#__PURE__*/ _jsx(ButtonGroup, {
+        gap: "none",
+        stretched: true,
+        ...props
+    });
+};
+CellButtonGroup.displayName = 'CellButtonGroup';
+CellButtonGroup.Separator = CellButtonGroupSeparator;
+CellButtonGroup.Separator.displayName = 'CellButtonGroup.Separator';
+
+//# sourceMappingURL=CellButtonGroup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/CellButtonGroup/CellButtonGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { type HTMLAttributesWithRootRef } from '../../types';\nimport { ButtonGroup } from '../ButtonGroup/ButtonGroup';\nimport { CellButtonGroupSeparator } from './CellButtonGroupSeparator/CellButtonGroupSeparator';\n\nexport type CellButtonGroupProps = HTMLAttributesWithRootRef<HTMLDivElement>;\n\n/**\n * @since 7.2.0\n *\n * @see https://vkcom.github.io/VKUI/#/CellButtonGroup\n */\nexport const CellButtonGroup = (props: CellButtonGroupProps): React.ReactNode => {\n  return <ButtonGroup gap=\"none\" stretched {...props} />;\n};\n\nCellButtonGroup.displayName = 'CellButtonGroup';\n\nCellButtonGroup.Separator = CellButtonGroupSeparator;\nCellButtonGroup.Separator.displayName = 'CellButtonGroup.Separator';\n"],"names":["React","ButtonGroup","CellButtonGroupSeparator","CellButtonGroup","props","gap","stretched","displayName","Separator"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,WAAW,QAAQ,gCAA6B;AACzD,SAASC,wBAAwB,QAAQ,yDAAsD;AAI/F;;;;CAIC,GACD,OAAO,MAAMC,kBAAkB,CAACC;IAC9B,qBAAO,KAACH;QAAYI,KAAI;QAAOC,SAAS;QAAE,GAAGF,KAAK;;AACpD,EAAE;AAEFD,gBAAgBI,WAAW,GAAG;AAE9BJ,gBAAgBK,SAAS,GAAGN;AAC5BC,gBAAgBK,SAAS,CAACD,WAAW,GAAG"}

package/dist/cssm/components/CellButtonGroup/CellButtonGroupSeparator/CellButtonGroupSeparator.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "@vkontakte/vkjs";
+import { Separator } from "../../Separator/Separator.js";
+import styles from "./CellButtonGroupSeparator.module.css";
+export const CellButtonGroupSeparator = ({ className, ...restProps })=>{
+    return /*#__PURE__*/ _jsx(Separator, {
+        className: classNames(styles.root, className),
+        ...restProps,
+        direction: "vertical",
+        padding: true
+    });
+};
+CellButtonGroupSeparator.displayName = 'CellButtonGroupSeparator';
+
+//# sourceMappingURL=CellButtonGroupSeparator.js.map

package/dist/cssm/components/CellButtonGroup/CellButtonGroupSeparator/CellButtonGroupSeparator.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/CellButtonGroup/CellButtonGroupSeparator/CellButtonGroupSeparator.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { Separator, type SeparatorProps } from '../../Separator/Separator';\nimport styles from './CellButtonGroupSeparator.module.css';\n\ntype CellButtonGroupSeparatorProps = Omit<SeparatorProps, 'direction' | 'padding'>;\n\nexport const CellButtonGroupSeparator = ({\n  className,\n  ...restProps\n}: CellButtonGroupSeparatorProps) => {\n  return (\n    <Separator\n      className={classNames(styles.root, className)}\n      {...restProps}\n      direction=\"vertical\"\n      padding\n    />\n  );\n};\n\nCellButtonGroupSeparator.displayName = 'CellButtonGroupSeparator';\n"],"names":["classNames","Separator","styles","CellButtonGroupSeparator","className","restProps","root","direction","padding","displayName"],"mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,SAAS,QAA6B,+BAA4B;AAC3E,OAAOC,YAAY,wCAAwC;AAI3D,OAAO,MAAMC,2BAA2B,CAAC,EACvCC,SAAS,EACT,GAAGC,WAC2B;IAC9B,qBACE,KAACJ;QACCG,WAAWJ,WAAWE,OAAOI,IAAI,EAAEF;QAClC,GAAGC,SAAS;QACbE,WAAU;QACVC,OAAO;;AAGb,EAAE;AAEFL,yBAAyBM,WAAW,GAAG"}

package/dist/cssm/components/CellButtonGroup/CellButtonGroupSeparator/CellButtonGroupSeparator.module.css

@@ -0,0 +1,5 @@
+.root {
+  flex: 0 0 auto;
+
+  --vkui--size_base_padding_horizontal--regular: 10px;
+}

package/dist/cssm/components/Checkbox/CheckboxSimple/CheckboxSimple.module.css

@@ -1,10 +1,10 @@
 .host {
   display: flex;
-  justify-content: center;
   align-items: center;
-  border-radius: 50%;
+  justify-content: center;
   inline-size: var(--vkui--size_field_height--regular);
   block-size: var(--vkui--size_field_height--regular);
+  border-radius: 50%;
 }
 
 .host[disabled] {

package/dist/cssm/components/ChipsInputBase/Chip/Chip.module.css

@@ -1,11 +1,11 @@
 .host {
+  box-sizing: border-box;
   display: inline-flex;
   align-items: center;
-  border: var(--vkui--size_border--regular) solid var(--vkui--color_image_border_alpha);
+  block-size: 32px;
   background: var(--vkui--color_background_content);
+  border: var(--vkui--size_border--regular) solid var(--vkui--color_image_border_alpha);
   border-radius: 6px;
-  block-size: 32px;
-  box-sizing: border-box;
 }
 
 .in,
@@ -29,34 +29,34 @@
 }
 
 .content {
+  display: inline-block;
   overflow: hidden;
-  white-space: nowrap;
   text-overflow: ellipsis;
-  color: var(--vkui--color_text_primary);
-  display: inline-block;
+  font-family: var(--vkui--font_paragraph--font_family--regular);
 
   /* Typography/Paragraph */
   font-size: var(--vkui--font_paragraph--font_size--regular);
-  line-height: var(--vkui--font_paragraph--line_height--regular);
   font-weight: var(--vkui--font_paragraph--font_weight--regular);
-  font-family: var(--vkui--font_paragraph--font_family--regular);
+  line-height: var(--vkui--font_paragraph--line_height--regular);
+  color: var(--vkui--color_text_primary);
+  white-space: nowrap;
 }
 
 .sizeYCompact .content {
+  font-family: var(--vkui--font_footnote--font_family--regular);
   /* Typography/Footnote */
   font-size: var(--vkui--font_footnote--font_size--regular);
-  line-height: var(--vkui--font_footnote--line_height--regular);
   font-weight: var(--vkui--font_footnote--font_weight--regular);
-  font-family: var(--vkui--font_footnote--font_family--regular);
+  line-height: var(--vkui--font_footnote--line_height--regular);
 }
 
 @media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
   .sizeYNone .content {
+    font-family: var(--vkui--font_footnote--font_family--regular);
     /* Typography/Footnote */
     font-size: var(--vkui--font_footnote--font_size--regular);
-    line-height: var(--vkui--font_footnote--line_height--regular);
     font-weight: var(--vkui--font_footnote--font_weight--regular);
-    font-family: var(--vkui--font_footnote--font_family--regular);
+    line-height: var(--vkui--font_footnote--line_height--regular);
   }
 }
 
@@ -66,15 +66,15 @@
 }
 
 .remove {
+  box-sizing: border-box;
   flex: 0 0 100%;
   padding: 5px;
-  transform: translateX(-1px);
   color: var(--vkui--color_icon_secondary);
+  cursor: pointer;
+  background: transparent;
   border: 0;
   border-radius: inherit;
-  background: transparent;
-  box-sizing: border-box;
-  cursor: pointer;
+  transform: translateX(-1px);
 }
 
 .before {

package/dist/cssm/components/ChipsInputBase/ChipsInputBase.module.css

@@ -1,17 +1,17 @@
 .host {
   --vkui_internal--chips_input_base_container_gap: 4px;
 
-  flex-grow: 1;
-  flex-shrink: 1;
   position: relative;
+  z-index: var(--vkui_internal--z_index_form_field_element);
   display: flex;
+  flex-grow: 1;
+  flex-shrink: 1;
   flex-wrap: wrap;
   max-inline-size: 100%;
-  list-style: none;
-  margin: 0;
   padding: var(--vkui_internal--chips_input_base_container_gap);
-  z-index: var(--vkui_internal--z_index_form_field_element);
+  margin: 0;
   overflow: hidden;
+  list-style: none;
 }
 
 .chip {
@@ -20,19 +20,19 @@
 }
 
 .el {
-  flex: 1;
   position: relative;
+  flex: 1;
   inline-size: 100%;
+  padding: 0;
   margin-block: 2px 4px;
   margin-inline: 10px 2px;
-  padding: 0;
   color: var(--vkui--color_text_primary);
-  background: transparent;
-  border: 0;
-  box-shadow: none;
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
+  background: transparent;
+  border: 0;
+  box-shadow: none;
 }
 
 .el:not(:-moz-read-only):focus {
@@ -62,9 +62,9 @@
 }
 
 .hasPlaceholder .el {
-  white-space: nowrap;
-  text-overflow: ellipsis;
   margin-inline: calc(12px - var(--vkui_internal--chips_input_base_container_gap)) 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 /**

package/dist/cssm/components/ChipsSelect/ChipsSelect.js

@@ -39,7 +39,7 @@ const findIndexBefore = (options = [], endIndex = options.length)=>{
  * @see https://vkcom.github.io/VKUI/#/ChipsSelect
  */ export const ChipsSelect = ({ // FormFieldProps
 id: labelledbyId, getRootRef, className, status = 'default', icon: dropdownIconProp, onChangeStart, // CustomSelectDropdownProps
-options: optionsProp, placement: placementProp = 'bottom', closeAfterSelect = true, selectedBehavior = DEFAULT_SELECTED_BEHAVIOR, emptyText = DEFAULT_EMPTY_TEXT, creatable = false, fetching = false, dropdownAutoWidth, forceDropdownPortal, noMaxHeight = false, filterFn = defaultFilterFn, dropdownTestId, onClose, onOpen, overscrollBehavior, renderDropdown, // ChipsInputProps
+options: optionsProp, placement: placementProp = 'bottom', closeAfterSelect = true, selectedBehavior = DEFAULT_SELECTED_BEHAVIOR, emptyText = DEFAULT_EMPTY_TEXT, creatable = false, fetching = false, dropdownAutoWidth, forceDropdownPortal, noMaxHeight = false, filterFn = defaultFilterFn, sortFn = false, dropdownTestId, onClose, onOpen, overscrollBehavior, renderDropdown, // ChipsInputProps
 getRef, value: valueProp, defaultValue, inputValue: inputValueProp, defaultInputValue, disabled, readOnly, getOptionValue = getOptionValueDefault, getOptionLabel = getOptionLabelDefault, getNewOptionData = getNewOptionDataDefault, renderChip = renderChipDefault, renderOption = renderOptionDefault, onChange, onFocus: onFocusProp, onInputChange: onInputChangeProp, onBlur: onBlurProp, onKeyDown: onKeyDownProp, dropdownOffsetDistance = 0, allowClearButton, clearButtonTestId, ...restProps })=>{
     const { // Связано с ChipsInputProps
     // option
@@ -62,6 +62,7 @@ getRef, value: valueProp, defaultValue, inputValue: inputValueProp, defaultInput
         emptyText,
         creatable,
         filterFn,
+        sortFn,
         selectedBehavior,
         onClose,
         onOpen,