@vkontakte/vkui 7.1.3 → 7.2.1

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 {

package/src/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;
 }
 
 /**
@@ -15,8 +15,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));
 }
@@ -38,11 +38,11 @@
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 .centered :global(.vkuiIcon) {
+  padding-inline-end: var(--vkui--spacing_size_m);
   /* компенсируем отступ заданные в SimpleCell__before */
   margin-inline-end: calc(
     -1 * var(--vkui_internal--SimpleCell-before-inline-padding-end, var(--vkui--spacing_size_xl))
   );
-  padding-inline-end: var(--vkui--spacing_size_m);
 }
 
 .appearanceAccent {

package/src/components/CellButtonGroup/CellButtonGroup.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { type HTMLAttributesWithRootRef } from '../../types';
+import { ButtonGroup } from '../ButtonGroup/ButtonGroup';
+import { CellButtonGroupSeparator } from './CellButtonGroupSeparator/CellButtonGroupSeparator';
+
+export type CellButtonGroupProps = HTMLAttributesWithRootRef<HTMLDivElement>;
+
+/**
+ * @since 7.2.0
+ *
+ * @see https://vkcom.github.io/VKUI/#/CellButtonGroup
+ */
+export const CellButtonGroup = (props: CellButtonGroupProps): React.ReactNode => {
+  return <ButtonGroup gap="none" stretched {...props} />;
+};
+
+CellButtonGroup.displayName = 'CellButtonGroup';
+
+CellButtonGroup.Separator = CellButtonGroupSeparator;
+CellButtonGroup.Separator.displayName = 'CellButtonGroup.Separator';

package/src/components/CellButtonGroup/CellButtonGroupSeparator/CellButtonGroupSeparator.module.css

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

package/src/components/CellButtonGroup/CellButtonGroupSeparator/CellButtonGroupSeparator.tsx

@@ -0,0 +1,21 @@
+import { classNames } from '@vkontakte/vkjs';
+import { Separator, type SeparatorProps } from '../../Separator/Separator';
+import styles from './CellButtonGroupSeparator.module.css';
+
+type CellButtonGroupSeparatorProps = Omit<SeparatorProps, 'direction' | 'padding'>;
+
+export const CellButtonGroupSeparator = ({
+  className,
+  ...restProps
+}: CellButtonGroupSeparatorProps) => {
+  return (
+    <Separator
+      className={classNames(styles.root, className)}
+      {...restProps}
+      direction="vertical"
+      padding
+    />
+  );
+};
+
+CellButtonGroupSeparator.displayName = 'CellButtonGroupSeparator';

package/src/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/src/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,
@@ -27,34 +27,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 (--sizeY-compact) {
   .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);
   }
 }
 
@@ -64,15 +64,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/src/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,17 +20,17 @@
 }
 
 .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);
+  appearance: none;
   background: transparent;
   border: 0;
   box-shadow: none;
-  appearance: none;
 }
 
 .el:not(:read-only):focus {
@@ -56,9 +56,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/src/components/ChipsInputBase/ChipsInputBase.tsx

@@ -260,6 +260,7 @@ export const ChipsInputBase = <O extends ChipOption>({
                 // чтобы можно было легче найти этот чип в DOM
                 'data-index': index,
                 'data-value': option.value,
+                'data-value-type': typeof option.value,
                 // для a11y
                 'tabIndex': lastFocusedChipOptionIndex === index ? 0 : -1,
                 'role': 'option',

package/src/components/ChipsInputBase/helpers.ts

@@ -35,8 +35,12 @@ export const getChipOptionIndexByHTMLElement = (el: HTMLElement | null): number
 /**
  * @private
  */
-export const getChipOptionValueByHTMLElement = (el: HTMLElement | null): string | -1 => {
+export const getChipOptionValueByHTMLElement = (el: HTMLElement | null): ChipOptionValue | -1 => {
   const value = el && el.dataset.value;
+  const valueType = el && el.dataset.valueType;
+  if (valueType === 'number') {
+    return Number(value);
+  }
   return typeof value === 'string' ? value : -1;
 };
 

package/src/components/ChipsInputBase/types.ts

@@ -102,7 +102,7 @@ export interface ChipsInputBaseProps<O extends ChipOption = ChipOption>
    *
    * @default Используется [Chip](#/Chip)
    */
-  renderChip?: RenderChip;
+  renderChip?: RenderChip<O>;
   /**
    * Показывать ли кнопку для очистки значения
    */

package/src/components/ChipsSelect/ChipsSelect.module.css

@@ -5,8 +5,8 @@
 .empty {
   padding-block: 12px;
   padding-inline: 0;
-  text-align: center;
   color: var(--vkui--color_text_secondary);
+  text-align: center;
 }
 
 .popDown {

package/src/components/ChipsSelect/ChipsSelect.tsx

@@ -161,6 +161,7 @@ export const ChipsSelect = <Option extends ChipOption>({
   forceDropdownPortal,
   noMaxHeight = false,
   filterFn = defaultFilterFn,
+  sortFn = false,
   dropdownTestId,
   onClose,
   onOpen,
@@ -231,6 +232,7 @@ export const ChipsSelect = <Option extends ChipOption>({
     emptyText,
     creatable,
     filterFn,
+    sortFn,
     selectedBehavior,
     onClose,
     onOpen,
@@ -242,6 +244,7 @@ export const ChipsSelect = <Option extends ChipOption>({
   // Связано с ChipsInputProps
   const rootRef = useExternRef(getRootRef);
   const inputRef = useExternRef(getRef, inputRefHook);
+  const forbidCloseByOutsideClick = React.useRef(false);
 
   // Связано с CustomSelectDropdownProps
   const [dropdownVerticalPlacement, setDropdownVerticalPlacement] = React.useState<
@@ -417,7 +420,10 @@ export const ChipsSelect = <Option extends ChipOption>({
   }, [setFocusedOptionIndex]);
 
   const handleClickOutside = React.useCallback(() => {
-    setOpened(false);
+    if (!forbidCloseByOutsideClick.current) {
+      setOpened(false);
+    }
+    forbidCloseByOutsideClick.current = false;
   }, [setOpened]);
 
   useGlobalOnClickOutside(
@@ -490,6 +496,7 @@ export const ChipsSelect = <Option extends ChipOption>({
                 if (!event.defaultPrevented) {
                   closeAfterSelect && setOpened(false);
                   addOption(option);
+                  forbidCloseByOutsideClick.current = true;
                   clearInput();
                 }
               },