@vkontakte/vkui 7.1.3 → 7.2.1

package/src/components/Skeleton/Skeleton.module.css

@@ -4,14 +4,14 @@
   --vkui_internal--skeleton_animation_duration: 1.5s;
   --vkui_internal--skeleton_gradient_left: 0;
 
-  display: inline-flex;
   position: relative;
+  display: inline-flex;
   inline-size: 100%;
   max-inline-size: 100%;
-  line-height: 1;
-  border-radius: 6px;
   overflow: hidden;
+  line-height: 1;
   background-color: var(--vkui_internal--skeleton_color_from);
+  border-radius: 6px;
 }
 
 /* Если скелетон находится внутри другого скелетона он меняет цвет */
@@ -27,11 +27,11 @@
 
 .host::before {
   position: absolute;
-  inset-inline-start: var(--vkui_internal--skeleton_gradient_left);
   inset-block-start: 0;
-  content: ' ';
+  inset-inline-start: var(--vkui_internal--skeleton_gradient_left);
   inline-size: 100vw;
   block-size: 100%;
+  content: ' ';
   background-image: linear-gradient(
     90deg,
     var(--vkui_internal--skeleton_color_from),
@@ -40,10 +40,10 @@
   );
   transform: translateX(-100vw);
   animation-name: animation-skeleton;
-  animation-direction: normal /*rtl:reverse*/;
   animation-duration: 1.5s;
   animation-timing-function: ease-in-out;
   animation-iteration-count: infinite;
+  animation-direction: normal /*rtl:reverse*/;
 }
 
 @keyframes animation-skeleton {
@@ -53,17 +53,17 @@
 }
 
 .disableAnimation::before {
+  background-image: none;
   /**
    * Safari тратит время не пересчет анимации даже если элемент скрыт
    * Для повышения производительности анимацию необходимо выключить
    */
   animation-name: none;
-  background-image: none;
 }
 
 @media (--reduce-motion) {
   .host::before {
-    animation-name: none;
     background-image: none;
+    animation-name: none;
   }
 }

package/src/components/Slider/Slider.module.css

@@ -1,7 +1,10 @@
 .host {
   position: relative;
-  cursor: pointer;
   block-size: var(--vkui_internal--slider_thumb_size);
+  cursor: pointer;
+
+  --vkui_internal--Slider_start_value: 0;
+  --vkui_internal--Slider_end_value: 0;
 }
 
 .disabled {
@@ -24,15 +27,21 @@
 }
 
 .trackFill {
-  inline-size: auto;
+  inline-size: calc(var(--vkui_internal--Slider_start_value) * 1%);
   background: var(--vkui--color_background_accent);
 }
 
+.multiple .trackFill {
+  inset-inline-start: calc(var(--vkui_internal--Slider_start_value) * 1%);
+  inset-inline-end: calc((100 - var(--vkui_internal--Slider_end_value)) * 1%);
+  inline-size: auto;
+}
+
 .thumbs {
-  isolation: isolate;
   position: relative;
-  margin-inline: calc(var(--vkui_internal--slider_thumb_size) / 2);
   block-size: 100%;
+  margin-inline: calc(var(--vkui_internal--slider_thumb_size) / 2);
+  isolation: isolate;
 }
 
 .thumb {
@@ -40,6 +49,18 @@
   transform: translate(-50%, -50%);
 }
 
+.rtl .thumb {
+  transform: translate(50%, -50%);
+}
+
+.thumbStart {
+  inset-inline-start: calc(var(--vkui_internal--Slider_start_value) * 1%);
+}
+
+.thumbEnd {
+  inset-inline-start: calc(var(--vkui_internal--Slider_end_value) * 1%);
+}
+
 .sizeL {
   --vkui_internal--slider_thumb_size: 28px;
 }

package/src/components/Slider/Slider.tsx

@@ -3,9 +3,11 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { clamp } from '../../helpers/math';
+import { mergeStyle } from '../../helpers/mergeStyle';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { useConfigDirection } from '../../hooks/useConfigDirection';
 import { useExternRef } from '../../hooks/useExternRef';
-import type { HTMLAttributesWithRootRef } from '../../types';
+import type { CSSCustomProperties, HTMLAttributesWithRootRef } from '../../types';
 import { type CustomTouchEvent, type CustomTouchEventHandler, Touch } from '../Touch/Touch';
 import { SliderThumb } from './SliderThumb/SliderThumb';
 import {
@@ -101,9 +103,12 @@ export const Slider = ({
   onChange,
   withTooltip,
   size = 'l',
+  style: styleProp,
   ...restProps
 }: SliderProps | SliderMultipleProps): React.ReactNode => {
   const { sizeY = 'none' } = useAdaptivity();
+  const direction = useConfigDirection();
+  const isRtl = direction === 'rtl';
 
   const isControlled = valueProp !== undefined;
   const [localValue, setValue] = React.useState(defaultValue);
@@ -163,7 +168,10 @@ export const Slider = ({
     // @ts-expect-error: TS2345 в VKUITouchEvent плохо описаны типы. `target` это просто `EventTarget`.
     const foundDraggingType = getDraggingTypeByTargetDataset(event.originalEvent.target);
 
-    const nextStartX = event.startX - nextContainerX;
+    let nextStartX = event.startX - nextContainerX;
+    if (isRtl) {
+      nextStartX = nextContainerWidth - nextStartX;
+    }
     const nextValue = offsetToValue(nextStartX, nextContainerWidth, min, max, step);
     const nextDragging = snapDirection(value, nextValue, foundDraggingType);
 
@@ -205,7 +213,7 @@ export const Slider = ({
     const { startX, containerWidth, dragging } = gesture;
 
     const { shiftX = 0 } = event;
-    const nextStartX = startX + shiftX;
+    const nextStartX = startX + (isRtl ? -shiftX : shiftX);
     const nextValue = offsetToValue(nextStartX, containerWidth, min, max, step);
 
     changeValue(updateInternalStateValue(value, nextValue, min, max, dragging), event);
@@ -231,6 +239,11 @@ export const Slider = ({
     );
   };
 
+  const style: CSSCustomProperties = {
+    '--vkui_internal--Slider_start_value': String(startValueInPercent),
+    '--vkui_internal--Slider_end_value': String(endReversedValueInPercent),
+  };
+
   return (
     <Touch
       data-value={multiple ? `${startValue},${endValue}` : startValue}
@@ -240,27 +253,23 @@ export const Slider = ({
         disabled && styles.disabled,
         sizeY !== 'regular' && sizeYClassNames[sizeY],
         sizeClassNames[size],
+        multiple && styles.multiple,
+        isRtl && styles.rtl,
         className,
       )}
+      style={mergeStyle(styleProp, style)}
+      getRootRef={getRootRef}
       onStart={disabled ? undefined : handlePointerStart}
       onMove={disabled ? undefined : handlePointerMove}
       onEnd={disabled ? undefined : handlePointerEnd}
     >
       <div className={styles.track} />
-      <div
-        className={styles.trackFill}
-        style={
-          multiple
-            ? { left: `${startValueInPercent}%`, right: `${100 - endReversedValueInPercent}%` }
-            : { width: `${startValueInPercent}%` }
-        }
-      />
+      <div className={styles.trackFill} />
       <div ref={thumbsContainerRef} className={styles.thumbs}>
         <SliderThumb
           data-type="start"
-          className={styles.thumb}
+          className={classNames(styles.thumb, styles.thumbStart)}
           style={{
-            left: `${startValueInPercent}%`,
             // Меняем местами порядок слоёв, иначе, при достижении `start` и `end` 100%, `end` будет перекрывать `start`.
             zIndex: multiple && startValueInPercent >= 50 ? 2 : undefined,
           }}
@@ -284,8 +293,7 @@ export const Slider = ({
         {multiple && (
           <SliderThumb
             data-type="end"
-            className={styles.thumb}
-            style={{ left: `${endReversedValueInPercent}%` }}
+            className={classNames(styles.thumb, styles.thumbEnd)}
             withTooltip={withTooltip}
             inputProps={{
               'data-type': 'end',

package/src/components/Slider/SliderThumb/SliderThumb.module.css

@@ -4,11 +4,11 @@
   box-sizing: border-box;
   inline-size: var(--vkui_internal--slider_thumb_size);
   block-size: var(--vkui_internal--slider_thumb_size);
-  border-radius: 50%;
-  border: var(--vkui--size_border--regular) solid var(--vkui--color_separator_primary_alpha);
+  user-select: none;
   background-color: var(--vkui--color_background_contrast);
+  border: var(--vkui--size_border--regular) solid var(--vkui--color_separator_primary_alpha);
+  border-radius: 50%;
   box-shadow: var(--vkui--elevation3);
-  user-select: none;
   transition: background-color 0.15s ease-out;
 }
 
@@ -29,14 +29,14 @@
  * Задаём ширину и высоту родителя, чтобы скринридер правильно выделял элемент (скопировано с MUI).
  */
 .nativeInput {
-  direction: ltr;
   position: absolute;
   inline-size: 100%;
   block-size: 100%;
-  margin: -1px;
   padding: 0;
-  border: 0 none;
-  clip: rect(0, 0, 0, 0);
+  margin: -1px;
   overflow: hidden;
   white-space: nowrap;
+  border: 0 none;
+  clip: rect(0, 0, 0, 0);
+  direction: ltr;
 }

package/src/components/Slider/SliderThumb/SliderThumb.tsx

@@ -118,11 +118,11 @@ export const SliderThumb = ({
         <TooltipBase
           appearance="neutral"
           getRootRef={refs.setFloating}
-          style={convertFloatingDataToReactCSSProperties(
-            floatingPositionStrategy,
-            floatingDataX,
-            floatingDataY,
-          )}
+          style={convertFloatingDataToReactCSSProperties({
+            strategy: floatingPositionStrategy,
+            x: floatingDataX,
+            y: floatingDataY,
+          })}
           arrowProps={{
             coords: arrowCoords,
             placement: resolvedPlacement,

package/src/components/Snackbar/Snackbar.module.css

@@ -7,6 +7,7 @@
   --vkui_internal--snackbar_animation_from: translate3d(0, 0, 0);
   --vkui_internal--snackbar_animation_to: translate3d(0, 0, 0);
   --vkui_internal--snackbar_animation_duration: 340ms;
+  --vkui_internal--snackbar_animation_text_direction: 1;
 
   position: fixed;
   inset-inline: var(--vkui_internal--safe_area_inset_left)
@@ -19,6 +20,10 @@
   --vkui_internal--snackbar_animation_duration: 400ms;
 }
 
+.rtl {
+  --vkui_internal--snackbar_animation_text_direction: -1;
+}
+
 .placementTopStart,
 .placementTop,
 .placementTopEnd {
@@ -29,11 +34,15 @@
 }
 
 .placementBottomStart {
-  --vkui_internal--snackbar_direction: -1;
+  --vkui_internal--snackbar_direction: calc(
+    -1 * var(--vkui_internal--snackbar_animation_text_direction)
+  );
 }
 
 .placementBottomEnd {
-  --vkui_internal--snackbar_direction: 1;
+  --vkui_internal--snackbar_direction: calc(
+    1 * var(--vkui_internal--snackbar_animation_text_direction)
+  );
 }
 
 .placementBottomStart,
@@ -71,7 +80,11 @@
 
   .placementTopStart,
   .placementBottomStart {
-    --vkui_internal--snackbar_animation_from: translate3d(-100%, 0, 0);
+    --vkui_internal--snackbar_animation_from: translate3d(
+      calc(-100% * var(--vkui_internal--snackbar_animation_text_direction)),
+      0,
+      0
+    );
     --vkui_internal--snackbar_animation_to: translate3d(
       var(--vkui_internal--snackbar_shift_x),
       0,
@@ -84,7 +97,11 @@
 
   .placementTopEnd,
   .placementBottomEnd {
-    --vkui_internal--snackbar_animation_from: translate3d(100%, 0, 0);
+    --vkui_internal--snackbar_animation_from: translate3d(
+      calc(100% * var(--vkui_internal--snackbar_animation_text_direction)),
+      0,
+      0
+    );
     --vkui_internal--snackbar_animation_to: translate3d(
       var(--vkui_internal--snackbar_shift_x),
       0,
@@ -145,9 +162,9 @@
 }
 
 .stateEntered .in {
-  transition-property: transform;
-  transition-duration: var(--vkui_internal--snackbar_animation_duration);
   transition-timing-function: var(--vkui--animation_easing_platform);
+  transition-duration: var(--vkui_internal--snackbar_animation_duration);
+  transition-property: transform;
 }
 
 .touched .in {

package/src/components/Snackbar/Snackbar.tsx

@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
+import { useConfigDirection } from '../../hooks/useConfigDirection';
 import { useExternRef } from '../../hooks/useExternRef';
 import { useFocusWithin } from '../../hooks/useFocusWithin';
 import { useGlobalEscKeyDown } from '../../hooks/useGlobalEscKeyDown';
@@ -104,6 +105,9 @@ export const Snackbar: React.FC<SnackbarProps> & { Basic: typeof Basic } = ({
   const [open, setOpen] = React.useState(true);
   const [touched, setTouched] = React.useState(false);
 
+  const direction = useConfigDirection();
+  const isRtl = direction === 'rtl';
+
   const rootRef = useExternRef(getRootRef);
   const focused = useFocusWithin(rootRef);
   const inRef = React.useRef<HTMLDivElement>(null);
@@ -181,6 +185,7 @@ export const Snackbar: React.FC<SnackbarProps> & { Basic: typeof Basic } = ({
         placement,
         shiftDataRef.current,
         panGestureRecognizer.current.delta(),
+        isRtl,
       );
 
       if (shiftDataRef.current.shifted) {
@@ -203,6 +208,7 @@ export const Snackbar: React.FC<SnackbarProps> & { Basic: typeof Basic } = ({
         shiftDataRef.current,
         getRelativeBoundingClientRect(rootRef.current!, inRef.current!),
         panGestureRecognizer.current.velocity(),
+        isRtl,
       )
     ) {
       close();
@@ -257,6 +263,7 @@ export const Snackbar: React.FC<SnackbarProps> & { Basic: typeof Basic } = ({
         touched && styles.touched,
         placementClassNames[placement],
         animationStateClassNames[animationState],
+        isRtl && styles.rtl,
       )}
       baseStyle={resolveOffsetYCssStyle(placement, offsetY)}
       getRootRef={rootRef}

package/src/components/Snackbar/subcomponents/Basic/Basic.module.css

@@ -9,13 +9,13 @@
   );
 
   box-sizing: border-box;
-  padding: 12px;
-  min-block-size: 56px;
   display: flex;
   align-items: center;
+  min-block-size: 56px;
+  padding: 12px;
   background: var(--vkui--color_background_contrast_themed);
-  box-shadow: var(--vkui--elevation4);
   border-radius: var(--vkui--size_card_border_radius--regular);
+  box-shadow: var(--vkui--elevation4);
 }
 
 .sizeYRegular {
@@ -55,24 +55,25 @@
 }
 
 .content {
-  flex: 1;
   display: flex;
+  flex: 1;
   align-items: center;
+  word-break: break-word;
 }
 
 .contentText {
+  display: -webkit-box;
   flex: 1;
-  color: var(--vkui--color_text_primary);
   inline-size: 100%;
-  display: -webkit-box;
+  overflow: hidden;
   -webkit-line-clamp: 3;
+  color: var(--vkui--color_text_primary);
   -webkit-box-orient: vertical;
-  overflow: hidden;
 }
 
 .contentSubtitle {
-  color: var(--vkui--color_text_subhead);
   margin-block-start: 2px;
+  color: var(--vkui--color_text_subhead);
 }
 
 .modeDark .contentText {

package/src/components/Snackbar/utils.ts

@@ -22,6 +22,10 @@ export function resolveOffsetYCssStyle(
   }
 }
 
+export function revertRtlValue(value: number, isRtl: boolean) {
+  return isRtl ? -1 * value : value;
+}
+
 export function getInitialShiftData(
   width: number,
   height: number,
@@ -42,13 +46,18 @@ export function getMovedShiftData(
   placement: SnackbarPlacement,
   shiftData: ShiftData,
   nextShift: { x: number; y: number },
+  isRtl = false,
 ): ShiftData {
   /* istanbul ignore else: TODO чтобы протестировать кейс в блоке else, нужно мокать useMediaQueries(), чтобы перебивать mediaQueries.smallTabletPlus.matches */
   if (shiftData.isDesktop) {
     if (placement.endsWith('start')) {
-      shiftData.x = rubberbandIfOutOfBounds(nextShift.x, -shiftData.width, 0);
+      shiftData.x = isRtl
+        ? rubberbandIfOutOfBounds(nextShift.x, 0, shiftData.width)
+        : rubberbandIfOutOfBounds(nextShift.x, -shiftData.width, 0);
     } else if (placement.endsWith('end')) {
-      shiftData.x = rubberbandIfOutOfBounds(nextShift.x, 0, shiftData.width);
+      shiftData.x = isRtl
+        ? rubberbandIfOutOfBounds(nextShift.x, -shiftData.width, 0)
+        : rubberbandIfOutOfBounds(nextShift.x, 0, shiftData.width);
     }
 
     if (placement.startsWith('bottom')) {
@@ -78,6 +87,7 @@ export function shouldBeClosedByShiftData(
   shiftData: ShiftData,
   relativeClientRect: DOMRect,
   velocity: { x: number; y: number },
+  isRtl = false,
 ): boolean {
   if (!shiftData.shifted) {
     return false;
@@ -89,13 +99,21 @@ export function shouldBeClosedByShiftData(
   /* istanbul ignore else: TODO чтобы протестировать кейс в блоке else, нужно мокать useMediaQueries(), чтобы перебивать mediaQueries.smallTabletPlus.matches */
   if (shiftData.isDesktop) {
     if (placement.endsWith('start')) {
-      shouldBeClosedThreshold.x = relativeClientRect.x < -relativeClientRect.width / 2;
+      shouldBeClosedThreshold.x =
+        revertRtlValue(relativeClientRect.x, isRtl) < -relativeClientRect.width / 2;
       shouldBeClosedByVelocity.x =
-        relativeClientRect.x < 0 ? velocity.x < -MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE : false;
+        revertRtlValue(relativeClientRect.x, isRtl) < 0
+          ? revertRtlValue(velocity.x, isRtl) <
+            revertRtlValue(-MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE, isRtl)
+          : false;
     } else if (placement.endsWith('end')) {
-      shouldBeClosedThreshold.x = relativeClientRect.x > relativeClientRect.width / 2;
+      shouldBeClosedThreshold.x =
+        revertRtlValue(relativeClientRect.x, isRtl) > relativeClientRect.width / 2;
       shouldBeClosedByVelocity.x =
-        relativeClientRect.x > 0 ? velocity.x > MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE : false;
+        revertRtlValue(relativeClientRect.x, isRtl) > 0
+          ? revertRtlValue(velocity.x, isRtl) >
+            revertRtlValue(MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE, isRtl)
+          : false;
     }
 
     if (placement.startsWith('bottom')) {

package/src/components/Spacing/Spacing.module.css

@@ -1,5 +1,5 @@
 .host {
   position: relative;
-  padding-block: calc(var(--vkui_internal--spacing_size) / 2);
   box-sizing: border-box;
+  padding-block: calc(var(--vkui_internal--spacing_size) / 2);
 }

package/src/components/Spinner/Spinner.module.css

@@ -1,9 +1,9 @@
 .host {
-  inline-size: 100%;
-  block-size: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
+  inline-size: 100%;
+  block-size: 100%;
   color: var(--vkui--color_icon_medium);
 }
 

package/src/components/SplitCol/SplitCol.module.css

@@ -1,9 +1,9 @@
 .host {
-  block-size: 100%;
-  inline-size: 1px;
+  position: relative;
   flex-grow: 1;
   flex-shrink: 1;
-  position: relative;
+  inline-size: 1px;
+  block-size: 100%;
 }
 
 .viewWidthSmallTabletPlus.spacedAuto {
@@ -35,19 +35,19 @@
 }
 
 .fixed {
-  block-size: 100%;
-  inline-size: 1px;
   flex-grow: 1;
   flex-shrink: 1;
+  inline-size: 1px;
+  block-size: 100%;
 }
 
 .fixedInner {
-  block-size: inherit;
+  position: fixed;
+  inset-block-start: 0;
   inline-size: inherit;
   min-inline-size: inherit;
   max-inline-size: inherit;
-  position: fixed;
-  transform: translateZ(0);
+  block-size: inherit;
   overflow: hidden;
-  inset-block-start: 0;
+  transform: translateZ(0);
 }

package/src/components/SplitLayout/SplitLayout.module.css

@@ -1,13 +1,13 @@
 .host {
+  position: relative;
   inline-size: 100%;
   block-size: 100%;
-  position: relative;
 }
 
 .inner {
+  display: flex;
   inline-size: 100%;
   block-size: 100%;
-  display: flex;
 }
 
 /* Hack with using PanelHeaderSimple */

package/src/components/SubnavigationBar/SubnavigationBar.module.css

@@ -5,21 +5,21 @@
 }
 
 .scrollIn {
-  margin: 0;
+  display: flex;
   padding-block: calc(var(--vkui--size_subnavigation_bar_padding_vertical--regular) + 8px);
   padding-inline: 0;
-  display: flex;
+  margin: 0;
 }
 
 .scrollIn::before,
 .scrollIn::after {
-  content: '';
   min-inline-size: var(--vkui--size_base_padding_horizontal--regular);
+  content: '';
 }
 
 .item {
-  list-style-type: none;
   display: flex;
+  list-style-type: none;
 }
 
 .item + .item {

package/src/components/SubnavigationButton/SubnavigationButton.module.css

@@ -4,6 +4,10 @@
   border-radius: var(--vkui--size_border_radius--regular);
 }
 
+.disabled {
+  opacity: var(--vkui--opacity_disable_accessibility);
+}
+
 .in {
   display: flex;
   align-items: center;
@@ -70,9 +74,9 @@
 
 .label {
   flex-grow: 0;
-  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .after {
@@ -81,8 +85,8 @@
 
 .chevronIcon {
   box-sizing: content-box;
-  margin-inline-start: 8px;
   margin-block-start: 1px; /* Смещает иконку относительно текста */
+  margin-inline-start: 8px;
   color: var(--vkui--color_icon_secondary);
 }
 
@@ -124,16 +128,16 @@
  */
 
 .selected {
-  background-color: var(--vkui--color_background_accent_themed);
   color: var(--vkui--color_text_contrast_themed);
-  box-shadow: none;
+  background-color: var(--vkui--color_background_accent_themed);
   border: 0;
+  box-shadow: none;
 }
 
 .selected.modeTertiary,
 .selected.appearanceNeutral {
-  background-color: var(--vkui--color_transparent--active);
   color: var(--vkui--color_text_primary);
+  background-color: var(--vkui--color_transparent--active);
 }
 
 .selected.appearanceAccent:not(.modeTertiary) .before,

package/src/components/SubnavigationButton/SubnavigationButton.tsx

@@ -99,6 +99,7 @@ export const SubnavigationButton = ({
         appearanceStyles[appearance],
         selected && styles.selected,
         sizeY !== 'regular' && sizeYClassNames[sizeY],
+        restProps.disabled && styles.disabled,
       )}
     >
       <span className={styles.in}>