@vkontakte/vkui 7.1.3 → 7.2.0

package/dist/cssm/components/SelectionControl/SelectionControlLabel/SelectionControlLabel.module.css

@@ -1,11 +1,11 @@
 .host {
   flex-grow: 1;
-  color: var(--vkui--color_text_primary);
   min-inline-size: 0; /* см. https://github.com/VKCOM/VKUI/issues/5687 */
-  word-break: break-word;
   margin-block: var(--vkui--spacing_size_xl);
   -webkit-margin-start: 12px;
           margin-inline-start: 12px;
+  color: var(--vkui--color_text_primary);
+  word-break: break-word;
 }
 
 .host:first-child {
@@ -14,16 +14,16 @@
 }
 
 .description {
-  color: var(--vkui--color_text_secondary);
   display: block;
   -webkit-margin-before: 2px;
           margin-block-start: 2px;
+  color: var(--vkui--color_text_secondary);
 }
 
 .titleLayout {
   display: flex;
-  justify-content: space-between;
   align-items: center;
+  justify-content: space-between;
 }
 
 .title {
@@ -31,9 +31,9 @@
 }
 
 .titleAfter {
+  flex-shrink: 0;
   -webkit-margin-start: 4px;
           margin-inline-start: 4px;
-  flex-shrink: 0;
   color: var(--vkui--color_icon_tertiary);
 }
 

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

@@ -25,19 +25,19 @@
 
 .sized.directionHorizontal {
   display: flex;
-  block-size: var(--vkui_internal--spacing_size);
   align-items: var(--vkui_internal--separator_align, center);
+  block-size: var(--vkui_internal--spacing_size);
 }
 
 .sized.directionVertical {
-  inline-size: var(--vkui_internal--spacing_size);
   justify-content: var(--vkui_internal--separator_align, center);
+  inline-size: var(--vkui_internal--spacing_size);
 }
 
 .in {
   margin: 0;
-  background: currentColor;
   color: inherit;
+  background: currentColor;
   border: 0;
 }
 

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

@@ -4,10 +4,10 @@
   display: flex;
   align-items: center;
   min-block-size: 48px;
+  padding-inline: var(--vkui--size_base_padding_horizontal--regular);
+  color: var(--vkui--color_text_primary);
   white-space: nowrap;
   text-decoration: none;
-  color: var(--vkui--color_text_primary);
-  padding-inline: var(--vkui--size_base_padding_horizontal--regular);
 }
 
 .mult {
@@ -25,6 +25,7 @@
 .before {
   display: flex;
   align-items: center;
+  align-self: stretch;
   padding-block: var(--vkui--spacing_size_s);
   -webkit-padding-end: var(--vkui_internal--SimpleCell-before-inline-padding-end);
           padding-inline-end: var(--vkui_internal--SimpleCell-before-inline-padding-end);
@@ -52,12 +53,12 @@
 
 .middle {
   display: flex;
+  flex-grow: 1;
   flex-direction: column;
   justify-content: center;
-  padding-block: var(--vkui--spacing_size_l);
-  max-inline-size: 100%;
-  flex-grow: 1;
   min-inline-size: 0;
+  max-inline-size: 100%;
+  padding-block: var(--vkui--spacing_size_l);
   overflow: hidden;
 }
 
@@ -73,8 +74,8 @@
 }
 
 .text {
-  text-overflow: ellipsis;
   overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .subtitle,
@@ -86,15 +87,15 @@
   display: flex;
   align-content: flex-start;
   align-items: center;
-  max-inline-size: 100%;
   justify-content: flex-start;
+  max-inline-size: 100%;
 }
 
 .children {
-  color: inherit;
-  text-overflow: ellipsis;
-  overflow: hidden;
   display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: inherit;
 }
 
 .mult .children,
@@ -118,19 +119,20 @@
 
 .indicator {
   flex-shrink: 0;
-  color: var(--vkui--color_text_secondary);
   min-inline-size: 0;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
   -webkit-padding-start: var(--vkui--spacing_size_xl);
           padding-inline-start: var(--vkui--spacing_size_xl);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--vkui--color_text_secondary);
+  white-space: nowrap;
 }
 
 .after {
-  flex-shrink: 0;
   display: flex;
+  flex-shrink: 0;
   align-items: center;
+  align-self: stretch;
   color: var(--vkui_internal--icon_color, var(--vkui--color_icon_accent));
 }
 
@@ -150,9 +152,9 @@
 }
 
 .chevronIcon {
-  color: var(--vkui--color_icon_tertiary);
   -webkit-padding-start: var(--vkui--spacing_size_xl);
           padding-inline-start: var(--vkui--spacing_size_xl);
+  color: var(--vkui--color_icon_tertiary);
 }
 
 /**

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

@@ -3,13 +3,13 @@
   --vkui_internal--min_col_width: 0;
 
   display: grid;
-  gap: var(--vkui_internal--row_gap) var(--vkui_internal--column_gap);
   grid-template-columns: repeat(var(--vkui_internal--grid_columns), minmax(0, 1fr));
+  gap: var(--vkui_internal--row_gap) var(--vkui_internal--column_gap);
 }
 
 .marginAuto {
-  margin-inline: var(--vkui--size_base_padding_horizontal--regular);
   margin-block: var(--vkui--size_base_padding_vertical--regular);
+  margin-inline: var(--vkui--size_base_padding_horizontal--regular);
 }
 
 .marginAutoInline {

package/dist/cssm/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;
 }
 
 /* Если скелетон находится внутри другого скелетона он меняет цвет */
@@ -28,11 +28,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),
@@ -41,10 +41,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 {
@@ -54,17 +54,17 @@
 }
 
 .disableAnimation::before {
+  background-image: none;
   /**
    * Safari тратит время не пересчет анимации даже если элемент скрыт
    * Для повышения производительности анимацию необходимо выключить
    */
   animation-name: none;
-  background-image: none;
 }
 
 @media screen and (prefers-reduced-motion: reduce) {
   .host::before {
-    animation-name: none;
     background-image: none;
+    animation-name: none;
   }
 }

package/dist/cssm/components/Slider/Slider.js

@@ -3,7 +3,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
 import { clamp } from "../../helpers/math.js";
+import { mergeStyle } from "../../helpers/mergeStyle.js";
 import { useAdaptivity } from "../../hooks/useAdaptivity.js";
+import { useConfigDirection } from "../../hooks/useConfigDirection.js";
 import { useExternRef } from "../../hooks/useExternRef.js";
 import { Touch } from "../Touch/Touch.js";
 import { SliderThumb } from "./SliderThumb/SliderThumb.js";
@@ -23,8 +25,10 @@ const sizeClassNames = {
  */ export const Slider = ({ step = 1, min = 0, max = 100, value: valueProp, multiple: multipleProp, defaultValue = multipleProp ? [
     min,
     max
-] : min, disabled, className, getRootRef, getAriaLabel, getAriaValueText, startThumbTestId, endThumbTestId, onChange, withTooltip, size = 'l', ...restProps })=>{
+] : min, disabled, className, getRootRef, getAriaLabel, getAriaValueText, startThumbTestId, endThumbTestId, onChange, withTooltip, size = 'l', style: styleProp, ...restProps })=>{
     const { sizeY = 'none' } = useAdaptivity();
+    const direction = useConfigDirection();
+    const isRtl = direction === 'rtl';
     const isControlled = valueProp !== undefined;
     const [localValue, setValue] = React.useState(defaultValue);
     const value = React.useMemo(()=>{
@@ -78,7 +82,10 @@ const sizeClassNames = {
         const { left: nextContainerX, width: nextContainerWidth } = thumbsContainerRef.current.getBoundingClientRect();
         // @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);
         gesture.dragging = nextDragging;
@@ -100,7 +107,7 @@ const sizeClassNames = {
     const handlePointerMove = (event)=>{
         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);
         event.originalEvent.stopPropagation();
@@ -114,10 +121,16 @@ const sizeClassNames = {
     const handleChangeByNativeInput = (event)=>{
         changeValue(updateInternalStateValueByNativeChange(value, Number(event.target.value), getDraggingTypeByTargetDataset(event.target)), event);
     };
+    const style = {
+        '--vkui_internal--Slider_start_value': String(startValueInPercent),
+        '--vkui_internal--Slider_end_value': String(endReversedValueInPercent)
+    };
     return /*#__PURE__*/ _jsxs(Touch, {
         "data-value": multiple ? `${startValue},${endValue}` : startValue,
         ...restPropsWithoutAriaAttributes,
-        className: classNames(styles.host, disabled && styles.disabled, sizeY !== 'regular' && sizeYClassNames[sizeY], sizeClassNames[size], className),
+        className: classNames(styles.host, 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,
@@ -126,13 +139,7 @@ const sizeClassNames = {
                 className: styles.track
             }),
             /*#__PURE__*/ _jsx("div", {
-                className: styles.trackFill,
-                style: multiple ? {
-                    left: `${startValueInPercent}%`,
-                    right: `${100 - endReversedValueInPercent}%`
-                } : {
-                    width: `${startValueInPercent}%`
-                }
+                className: styles.trackFill
             }),
             /*#__PURE__*/ _jsxs("div", {
                 ref: thumbsContainerRef,
@@ -140,9 +147,8 @@ const sizeClassNames = {
                 children: [
                     /*#__PURE__*/ _jsx(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
                         },
@@ -165,10 +171,7 @@ const sizeClassNames = {
                     }),
                     multiple && /*#__PURE__*/ _jsx(SliderThumb, {
                         "data-type": "end",
-                        className: styles.thumb,
-                        style: {
-                            left: `${endReversedValueInPercent}%`
-                        },
+                        className: classNames(styles.thumb, styles.thumbEnd),
                         withTooltip: withTooltip,
                         inputProps: {
                             'data-type': 'end',

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { type CustomTouchEvent, type CustomTouchEventHandler, Touch } from '../Touch/Touch';\nimport { SliderThumb } from './SliderThumb/SliderThumb';\nimport {\n  extractSliderAriaAttributesFromRestProps,\n  getDraggingTypeByTargetDataset,\n  isMultipleValues,\n  offsetToValue,\n  snapDirection,\n  toPercent,\n  updateInternalStateValue,\n  updateInternalStateValueByNativeChange,\n} from './helpers';\nimport type { InternalDraggingType, InternalGestureRef, InternalValueState } from './types';\nimport styles from './Slider.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nconst sizeClassNames = {\n  l: styles.sizeL,\n  m: styles.sizeM,\n  s: styles.sizeS,\n};\n\nexport interface SliderBaseProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'value' | 'defaultValue' | 'onChange'> {\n  min?: number;\n  max?: number;\n  step?: number;\n  disabled?: boolean;\n  /**\n   * Тоже самое, что и `aria-label`, но на вход можно получать индекс текущего ползунка и в зависимости от этого выдавать разный текст.\n   *\n   * > Перебивает `aria-label`.\n   */\n  getAriaLabel?: (index: number) => string;\n  /**\n   * В отличие от `aria-valuetext`, позволяет более гибко форматировать текст в зависимости от значения ползунка.\n   *\n   * Полезно при использовании компонента как неконтролируемого.\n   *\n   * > Перебивает `aria-valuetext`.\n   */\n  getAriaValueText?: (value: number, index: number) => string;\n  withTooltip?: boolean;\n  /**\n   * Размер ползунка.\n   */\n  size?: 's' | 'm' | 'l';\n  /**\n   * Передает атрибут `data-testid` для первого ползунка\n   */\n  startThumbTestId?: string;\n  /**\n   * Передает атрибут `data-testid` для второго ползунка когда `multiple=true`\n   */\n  endThumbTestId?: string;\n}\n\nexport interface SliderProps extends SliderBaseProps {\n  multiple?: false;\n  value?: number;\n  defaultValue?: number;\n  onChange?: (value: number, event: CustomTouchEvent | React.ChangeEvent) => void;\n}\n\nexport interface SliderMultipleProps extends SliderBaseProps {\n  multiple: true;\n  value?: [number, number];\n  defaultValue?: [number, number];\n  onChange?: (value: [number, number], event: CustomTouchEvent | React.ChangeEvent) => void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Slider\n */\nexport const Slider = ({\n  step = 1,\n  min = 0,\n  max = 100,\n  value: valueProp,\n  multiple: multipleProp,\n  defaultValue = multipleProp ? [min, max] : min,\n  disabled,\n  className,\n  getRootRef,\n  getAriaLabel,\n  getAriaValueText,\n  startThumbTestId,\n  endThumbTestId,\n  onChange,\n  withTooltip,\n  size = 'l',\n  ...restProps\n}: SliderProps | SliderMultipleProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const isControlled = valueProp !== undefined;\n  const [localValue, setValue] = React.useState(defaultValue);\n\n  const value = React.useMemo<InternalValueState>(() => {\n    const resolvedValue = isControlled ? valueProp : localValue;\n    return Array.isArray(resolvedValue)\n      ? [clamp(resolvedValue[0], min, max), clamp(resolvedValue[1], min, max)]\n      : [clamp(resolvedValue, min, max), null];\n  }, [isControlled, valueProp, localValue, min, max]);\n\n  const [startValue, endValue] = value;\n  const multiple = multipleProp && endValue !== null;\n  const startValueInPercent = toPercent(startValue, min, max);\n  const endReversedValueInPercent = multiple ? toPercent(endValue, min, max) : 0;\n  const [activeThumb, setActiveThumb] = React.useState<InternalDraggingType | null>(null);\n\n  const gesture = React.useRef<InternalGestureRef>({\n    dragging: null,\n    startX: 0,\n    containerWidth: 0,\n  }).current;\n  const thumbsContainerRef = useExternRef(getRootRef);\n  const thumbStartInputRef = React.useRef<HTMLInputElement>(null);\n  const thumbEndInputRef = React.useRef<HTMLInputElement>(null);\n\n  const { ariaLabel, ariaValueText, ariaLabelledBy, ...restPropsWithoutAriaAttributes } =\n    extractSliderAriaAttributesFromRestProps(restProps);\n\n  const changeValue = (\n    nextValue: InternalValueState,\n    event: CustomTouchEvent | React.ChangeEvent,\n  ) => {\n    if (disabled || (value[0] === nextValue[0] && value[1] === nextValue[1])) {\n      return;\n    }\n\n    if (multipleProp) {\n      if (isMultipleValues(nextValue)) {\n        !isControlled && setValue(nextValue);\n        onChange && onChange(nextValue, event);\n      }\n    } else {\n      !isControlled && setValue(nextValue[0]);\n      onChange && onChange(nextValue[0], event);\n    }\n  };\n\n  const handlePointerStart: CustomTouchEventHandler = (event: CustomTouchEvent) => {\n    if (!thumbsContainerRef.current) {\n      return;\n    }\n\n    const { left: nextContainerX, width: nextContainerWidth } =\n      thumbsContainerRef.current.getBoundingClientRect();\n\n    // @ts-expect-error: TS2345 в VKUITouchEvent плохо описаны типы. `target` это просто `EventTarget`.\n    const foundDraggingType = getDraggingTypeByTargetDataset(event.originalEvent.target);\n\n    const nextStartX = event.startX - nextContainerX;\n    const nextValue = offsetToValue(nextStartX, nextContainerWidth, min, max, step);\n    const nextDragging = snapDirection(value, nextValue, foundDraggingType);\n\n    gesture.dragging = nextDragging;\n    gesture.containerWidth = nextContainerWidth;\n    gesture.startX = nextStartX;\n\n    const updatedInternalStateValue = updateInternalStateValue(\n      value,\n      nextValue,\n      min,\n      max,\n      nextDragging,\n    );\n\n    const [nextStartValue, nextEndValue] = updatedInternalStateValue;\n    if (\n      thumbStartInputRef.current &&\n      (foundDraggingType === 'start' ||\n        (nextStartValue !== startValue && nextEndValue === endValue))\n    ) {\n      thumbStartInputRef.current.focus();\n      event.originalEvent.preventDefault();\n    } else if (\n      thumbEndInputRef.current &&\n      (foundDraggingType === 'end' || (nextEndValue !== endValue && nextStartValue === startValue))\n    ) {\n      thumbEndInputRef.current.focus();\n      event.originalEvent.preventDefault();\n    }\n\n    changeValue(updatedInternalStateValue, event);\n\n    event.originalEvent.stopPropagation();\n    setActiveThumb(gesture.dragging);\n  };\n\n  const handlePointerMove: CustomTouchEventHandler = (event: CustomTouchEvent) => {\n    const { startX, containerWidth, dragging } = gesture;\n\n    const { shiftX = 0 } = event;\n    const nextStartX = startX + shiftX;\n    const nextValue = offsetToValue(nextStartX, containerWidth, min, max, step);\n\n    changeValue(updateInternalStateValue(value, nextValue, min, max, dragging), event);\n\n    event.originalEvent.stopPropagation();\n    event.originalEvent.preventDefault();\n  };\n\n  const handlePointerEnd: CustomTouchEventHandler = (event) => {\n    gesture.dragging = null;\n    event.originalEvent.stopPropagation();\n    setActiveThumb(null);\n  };\n\n  const handleChangeByNativeInput = (event: React.ChangeEvent<HTMLInputElement>) => {\n    changeValue(\n      updateInternalStateValueByNativeChange(\n        value,\n        Number(event.target.value),\n        getDraggingTypeByTargetDataset(event.target),\n      ),\n      event,\n    );\n  };\n\n  return (\n    <Touch\n      data-value={multiple ? `${startValue},${endValue}` : startValue}\n      {...restPropsWithoutAriaAttributes}\n      className={classNames(\n        styles.host,\n        disabled && styles.disabled,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        sizeClassNames[size],\n        className,\n      )}\n      onStart={disabled ? undefined : handlePointerStart}\n      onMove={disabled ? undefined : handlePointerMove}\n      onEnd={disabled ? undefined : handlePointerEnd}\n    >\n      <div className={styles.track} />\n      <div\n        className={styles.trackFill}\n        style={\n          multiple\n            ? { left: `${startValueInPercent}%`, right: `${100 - endReversedValueInPercent}%` }\n            : { width: `${startValueInPercent}%` }\n        }\n      />\n      <div ref={thumbsContainerRef} className={styles.thumbs}>\n        <SliderThumb\n          data-type=\"start\"\n          className={styles.thumb}\n          style={{\n            left: `${startValueInPercent}%`,\n            // Меняем местами порядок слоёв, иначе, при достижении `start` и `end` 100%, `end` будет перекрывать `start`.\n            zIndex: multiple && startValueInPercent >= 50 ? 2 : undefined,\n          }}\n          withTooltip={withTooltip}\n          inputProps={{\n            'data-type': 'start',\n            'data-testid': startThumbTestId,\n            'ref': thumbStartInputRef,\n            'step': step,\n            'min': min,\n            'value': startValue,\n            'max': multiple ? endValue : max,\n            'disabled': disabled,\n            'aria-label': getAriaLabel ? getAriaLabel(0) : ariaLabel,\n            'aria-valuetext': getAriaValueText ? getAriaValueText(startValue, 0) : ariaValueText,\n            'aria-labelledby': ariaLabelledBy,\n            'onChange': handleChangeByNativeInput,\n          }}\n          isActive={activeThumb === 'start'}\n        />\n        {multiple && (\n          <SliderThumb\n            data-type=\"end\"\n            className={styles.thumb}\n            style={{ left: `${endReversedValueInPercent}%` }}\n            withTooltip={withTooltip}\n            inputProps={{\n              'data-type': 'end',\n              'data-testid': endThumbTestId,\n              'ref': thumbEndInputRef,\n              'step': step,\n              'min': startValue,\n              'value': endValue,\n              'max': max,\n              'disabled': disabled,\n              'aria-label': getAriaLabel ? getAriaLabel(1) : ariaLabel,\n              'aria-valuetext': getAriaValueText ? getAriaValueText(endValue, 1) : ariaValueText,\n              'aria-labelledby': ariaLabelledBy,\n              'onChange': handleChangeByNativeInput,\n            }}\n            isActive={activeThumb === 'end'}\n          />\n        )}\n      </div>\n    </Touch>\n  );\n};\n"],"names":["React","classNames","clamp","useAdaptivity","useExternRef","Touch","SliderThumb","extractSliderAriaAttributesFromRestProps","getDraggingTypeByTargetDataset","isMultipleValues","offsetToValue","snapDirection","toPercent","updateInternalStateValue","updateInternalStateValueByNativeChange","styles","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","sizeClassNames","l","sizeL","m","sizeM","s","sizeS","Slider","step","min","max","value","valueProp","multiple","multipleProp","defaultValue","disabled","className","getRootRef","getAriaLabel","getAriaValueText","startThumbTestId","endThumbTestId","onChange","withTooltip","size","restProps","sizeY","isControlled","undefined","localValue","setValue","useState","useMemo","resolvedValue","Array","isArray","startValue","endValue","startValueInPercent","endReversedValueInPercent","activeThumb","setActiveThumb","gesture","useRef","dragging","startX","containerWidth","current","thumbsContainerRef","thumbStartInputRef","thumbEndInputRef","ariaLabel","ariaValueText","ariaLabelledBy","restPropsWithoutAriaAttributes","changeValue","nextValue","event","handlePointerStart","left","nextContainerX","width","nextContainerWidth","getBoundingClientRect","foundDraggingType","originalEvent","target","nextStartX","nextDragging","updatedInternalStateValue","nextStartValue","nextEndValue","focus","preventDefault","stopPropagation","handlePointerMove","shiftX","handlePointerEnd","handleChangeByNativeInput","Number","data-value","host","onStart","onMove","onEnd","div","track","trackFill","style","right","ref","thumbs","data-type","thumb","zIndex","inputProps","isActive"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { mergeStyle } from '../../helpers/mergeStyle';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useConfigDirection } from '../../hooks/useConfigDirection';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport type { CSSCustomProperties, HTMLAttributesWithRootRef } from '../../types';\nimport { type CustomTouchEvent, type CustomTouchEventHandler, Touch } from '../Touch/Touch';\nimport { SliderThumb } from './SliderThumb/SliderThumb';\nimport {\n  extractSliderAriaAttributesFromRestProps,\n  getDraggingTypeByTargetDataset,\n  isMultipleValues,\n  offsetToValue,\n  snapDirection,\n  toPercent,\n  updateInternalStateValue,\n  updateInternalStateValueByNativeChange,\n} from './helpers';\nimport type { InternalDraggingType, InternalGestureRef, InternalValueState } from './types';\nimport styles from './Slider.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nconst sizeClassNames = {\n  l: styles.sizeL,\n  m: styles.sizeM,\n  s: styles.sizeS,\n};\n\nexport interface SliderBaseProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'value' | 'defaultValue' | 'onChange'> {\n  min?: number;\n  max?: number;\n  step?: number;\n  disabled?: boolean;\n  /**\n   * Тоже самое, что и `aria-label`, но на вход можно получать индекс текущего ползунка и в зависимости от этого выдавать разный текст.\n   *\n   * > Перебивает `aria-label`.\n   */\n  getAriaLabel?: (index: number) => string;\n  /**\n   * В отличие от `aria-valuetext`, позволяет более гибко форматировать текст в зависимости от значения ползунка.\n   *\n   * Полезно при использовании компонента как неконтролируемого.\n   *\n   * > Перебивает `aria-valuetext`.\n   */\n  getAriaValueText?: (value: number, index: number) => string;\n  withTooltip?: boolean;\n  /**\n   * Размер ползунка.\n   */\n  size?: 's' | 'm' | 'l';\n  /**\n   * Передает атрибут `data-testid` для первого ползунка\n   */\n  startThumbTestId?: string;\n  /**\n   * Передает атрибут `data-testid` для второго ползунка когда `multiple=true`\n   */\n  endThumbTestId?: string;\n}\n\nexport interface SliderProps extends SliderBaseProps {\n  multiple?: false;\n  value?: number;\n  defaultValue?: number;\n  onChange?: (value: number, event: CustomTouchEvent | React.ChangeEvent) => void;\n}\n\nexport interface SliderMultipleProps extends SliderBaseProps {\n  multiple: true;\n  value?: [number, number];\n  defaultValue?: [number, number];\n  onChange?: (value: [number, number], event: CustomTouchEvent | React.ChangeEvent) => void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Slider\n */\nexport const Slider = ({\n  step = 1,\n  min = 0,\n  max = 100,\n  value: valueProp,\n  multiple: multipleProp,\n  defaultValue = multipleProp ? [min, max] : min,\n  disabled,\n  className,\n  getRootRef,\n  getAriaLabel,\n  getAriaValueText,\n  startThumbTestId,\n  endThumbTestId,\n  onChange,\n  withTooltip,\n  size = 'l',\n  style: styleProp,\n  ...restProps\n}: SliderProps | SliderMultipleProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const direction = useConfigDirection();\n  const isRtl = direction === 'rtl';\n\n  const isControlled = valueProp !== undefined;\n  const [localValue, setValue] = React.useState(defaultValue);\n\n  const value = React.useMemo<InternalValueState>(() => {\n    const resolvedValue = isControlled ? valueProp : localValue;\n    return Array.isArray(resolvedValue)\n      ? [clamp(resolvedValue[0], min, max), clamp(resolvedValue[1], min, max)]\n      : [clamp(resolvedValue, min, max), null];\n  }, [isControlled, valueProp, localValue, min, max]);\n\n  const [startValue, endValue] = value;\n  const multiple = multipleProp && endValue !== null;\n  const startValueInPercent = toPercent(startValue, min, max);\n  const endReversedValueInPercent = multiple ? toPercent(endValue, min, max) : 0;\n  const [activeThumb, setActiveThumb] = React.useState<InternalDraggingType | null>(null);\n\n  const gesture = React.useRef<InternalGestureRef>({\n    dragging: null,\n    startX: 0,\n    containerWidth: 0,\n  }).current;\n  const thumbsContainerRef = useExternRef(getRootRef);\n  const thumbStartInputRef = React.useRef<HTMLInputElement>(null);\n  const thumbEndInputRef = React.useRef<HTMLInputElement>(null);\n\n  const { ariaLabel, ariaValueText, ariaLabelledBy, ...restPropsWithoutAriaAttributes } =\n    extractSliderAriaAttributesFromRestProps(restProps);\n\n  const changeValue = (\n    nextValue: InternalValueState,\n    event: CustomTouchEvent | React.ChangeEvent,\n  ) => {\n    if (disabled || (value[0] === nextValue[0] && value[1] === nextValue[1])) {\n      return;\n    }\n\n    if (multipleProp) {\n      if (isMultipleValues(nextValue)) {\n        !isControlled && setValue(nextValue);\n        onChange && onChange(nextValue, event);\n      }\n    } else {\n      !isControlled && setValue(nextValue[0]);\n      onChange && onChange(nextValue[0], event);\n    }\n  };\n\n  const handlePointerStart: CustomTouchEventHandler = (event: CustomTouchEvent) => {\n    if (!thumbsContainerRef.current) {\n      return;\n    }\n\n    const { left: nextContainerX, width: nextContainerWidth } =\n      thumbsContainerRef.current.getBoundingClientRect();\n\n    // @ts-expect-error: TS2345 в VKUITouchEvent плохо описаны типы. `target` это просто `EventTarget`.\n    const foundDraggingType = getDraggingTypeByTargetDataset(event.originalEvent.target);\n\n    let nextStartX = event.startX - nextContainerX;\n    if (isRtl) {\n      nextStartX = nextContainerWidth - nextStartX;\n    }\n    const nextValue = offsetToValue(nextStartX, nextContainerWidth, min, max, step);\n    const nextDragging = snapDirection(value, nextValue, foundDraggingType);\n\n    gesture.dragging = nextDragging;\n    gesture.containerWidth = nextContainerWidth;\n    gesture.startX = nextStartX;\n\n    const updatedInternalStateValue = updateInternalStateValue(\n      value,\n      nextValue,\n      min,\n      max,\n      nextDragging,\n    );\n\n    const [nextStartValue, nextEndValue] = updatedInternalStateValue;\n    if (\n      thumbStartInputRef.current &&\n      (foundDraggingType === 'start' ||\n        (nextStartValue !== startValue && nextEndValue === endValue))\n    ) {\n      thumbStartInputRef.current.focus();\n      event.originalEvent.preventDefault();\n    } else if (\n      thumbEndInputRef.current &&\n      (foundDraggingType === 'end' || (nextEndValue !== endValue && nextStartValue === startValue))\n    ) {\n      thumbEndInputRef.current.focus();\n      event.originalEvent.preventDefault();\n    }\n\n    changeValue(updatedInternalStateValue, event);\n\n    event.originalEvent.stopPropagation();\n    setActiveThumb(gesture.dragging);\n  };\n\n  const handlePointerMove: CustomTouchEventHandler = (event: CustomTouchEvent) => {\n    const { startX, containerWidth, dragging } = gesture;\n\n    const { shiftX = 0 } = event;\n    const nextStartX = startX + (isRtl ? -shiftX : shiftX);\n    const nextValue = offsetToValue(nextStartX, containerWidth, min, max, step);\n\n    changeValue(updateInternalStateValue(value, nextValue, min, max, dragging), event);\n\n    event.originalEvent.stopPropagation();\n    event.originalEvent.preventDefault();\n  };\n\n  const handlePointerEnd: CustomTouchEventHandler = (event) => {\n    gesture.dragging = null;\n    event.originalEvent.stopPropagation();\n    setActiveThumb(null);\n  };\n\n  const handleChangeByNativeInput = (event: React.ChangeEvent<HTMLInputElement>) => {\n    changeValue(\n      updateInternalStateValueByNativeChange(\n        value,\n        Number(event.target.value),\n        getDraggingTypeByTargetDataset(event.target),\n      ),\n      event,\n    );\n  };\n\n  const style: CSSCustomProperties = {\n    '--vkui_internal--Slider_start_value': String(startValueInPercent),\n    '--vkui_internal--Slider_end_value': String(endReversedValueInPercent),\n  };\n\n  return (\n    <Touch\n      data-value={multiple ? `${startValue},${endValue}` : startValue}\n      {...restPropsWithoutAriaAttributes}\n      className={classNames(\n        styles.host,\n        disabled && styles.disabled,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        sizeClassNames[size],\n        multiple && styles.multiple,\n        isRtl && styles.rtl,\n        className,\n      )}\n      style={mergeStyle(styleProp, style)}\n      getRootRef={getRootRef}\n      onStart={disabled ? undefined : handlePointerStart}\n      onMove={disabled ? undefined : handlePointerMove}\n      onEnd={disabled ? undefined : handlePointerEnd}\n    >\n      <div className={styles.track} />\n      <div className={styles.trackFill} />\n      <div ref={thumbsContainerRef} className={styles.thumbs}>\n        <SliderThumb\n          data-type=\"start\"\n          className={classNames(styles.thumb, styles.thumbStart)}\n          style={{\n            // Меняем местами порядок слоёв, иначе, при достижении `start` и `end` 100%, `end` будет перекрывать `start`.\n            zIndex: multiple && startValueInPercent >= 50 ? 2 : undefined,\n          }}\n          withTooltip={withTooltip}\n          inputProps={{\n            'data-type': 'start',\n            'data-testid': startThumbTestId,\n            'ref': thumbStartInputRef,\n            'step': step,\n            'min': min,\n            'value': startValue,\n            'max': multiple ? endValue : max,\n            'disabled': disabled,\n            'aria-label': getAriaLabel ? getAriaLabel(0) : ariaLabel,\n            'aria-valuetext': getAriaValueText ? getAriaValueText(startValue, 0) : ariaValueText,\n            'aria-labelledby': ariaLabelledBy,\n            'onChange': handleChangeByNativeInput,\n          }}\n          isActive={activeThumb === 'start'}\n        />\n        {multiple && (\n          <SliderThumb\n            data-type=\"end\"\n            className={classNames(styles.thumb, styles.thumbEnd)}\n            withTooltip={withTooltip}\n            inputProps={{\n              'data-type': 'end',\n              'data-testid': endThumbTestId,\n              'ref': thumbEndInputRef,\n              'step': step,\n              'min': startValue,\n              'value': endValue,\n              'max': max,\n              'disabled': disabled,\n              'aria-label': getAriaLabel ? getAriaLabel(1) : ariaLabel,\n              'aria-valuetext': getAriaValueText ? getAriaValueText(endValue, 1) : ariaValueText,\n              'aria-labelledby': ariaLabelledBy,\n              'onChange': handleChangeByNativeInput,\n            }}\n            isActive={activeThumb === 'end'}\n          />\n        )}\n      </div>\n    </Touch>\n  );\n};\n"],"names":["React","classNames","clamp","mergeStyle","useAdaptivity","useConfigDirection","useExternRef","Touch","SliderThumb","extractSliderAriaAttributesFromRestProps","getDraggingTypeByTargetDataset","isMultipleValues","offsetToValue","snapDirection","toPercent","updateInternalStateValue","updateInternalStateValueByNativeChange","styles","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","sizeClassNames","l","sizeL","m","sizeM","s","sizeS","Slider","step","min","max","value","valueProp","multiple","multipleProp","defaultValue","disabled","className","getRootRef","getAriaLabel","getAriaValueText","startThumbTestId","endThumbTestId","onChange","withTooltip","size","style","styleProp","restProps","sizeY","direction","isRtl","isControlled","undefined","localValue","setValue","useState","useMemo","resolvedValue","Array","isArray","startValue","endValue","startValueInPercent","endReversedValueInPercent","activeThumb","setActiveThumb","gesture","useRef","dragging","startX","containerWidth","current","thumbsContainerRef","thumbStartInputRef","thumbEndInputRef","ariaLabel","ariaValueText","ariaLabelledBy","restPropsWithoutAriaAttributes","changeValue","nextValue","event","handlePointerStart","left","nextContainerX","width","nextContainerWidth","getBoundingClientRect","foundDraggingType","originalEvent","target","nextStartX","nextDragging","updatedInternalStateValue","nextStartValue","nextEndValue","focus","preventDefault","stopPropagation","handlePointerMove","shiftX","handlePointerEnd","handleChangeByNativeInput","Number","String","data-value","host","rtl","onStart","onMove","onEnd","div","track","trackFill","ref","thumbs","data-type","thumb","thumbStart","zIndex","inputProps","isActive","thumbEnd"],"mappings":"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"}

package/dist/cssm/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/dist/cssm/components/Slider/SliderThumb/SliderThumb.js

@@ -70,7 +70,11 @@ export const SliderThumb = ({ className, getRootRef, inputProps, withTooltip, is
             shouldShowTooltip && /*#__PURE__*/ _jsx(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/dist/cssm/components/Slider/SliderThumb/SliderThumb.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Slider/SliderThumb/SliderThumb.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useBooleanState } from '../../../hooks/useBooleanState';\nimport { useExternRef } from '../../../hooks/useExternRef';\nimport { useFocusVisible } from '../../../hooks/useFocusVisible';\nimport { useFocusVisibleClassName } from '../../../hooks/useFocusVisibleClassName';\nimport {\n  arrowMiddleware,\n  convertFloatingDataToReactCSSProperties,\n  flipMiddleware,\n  offsetMiddleware,\n  shiftMiddleware,\n  useFloating,\n} from '../../../lib/floating';\nimport type { HasDataAttribute, HasRootRef } from '../../../types';\nimport { TooltipBase } from '../../TooltipBase/TooltipBase';\nimport styles from './SliderThumb.module.css';\n\ninterface SliderThumbProps extends HasRootRef<HTMLSpanElement>, HasDataAttribute {\n  className?: string;\n  style?: React.CSSProperties;\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement> &\n    React.RefAttributes<HTMLInputElement> &\n    HasDataAttribute;\n  withTooltip?: boolean;\n  isActive?: boolean;\n}\n\nexport const SliderThumb = ({\n  className,\n  getRootRef,\n  inputProps,\n  withTooltip,\n  isActive,\n  ...restProps\n}: SliderThumbProps): React.ReactNode => {\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n  const focusVisibleClassNames = useFocusVisibleClassName({\n    focusVisible,\n    mode: styles.focusVisible,\n  });\n  const [arrowRef, setArrowRef] = React.useState<HTMLDivElement | null>(null);\n\n  const memoizedMiddlewares = React.useMemo(() => {\n    return [\n      offsetMiddleware({\n        crossAxis: 0,\n        mainAxis: 15,\n      }),\n      flipMiddleware(),\n      shiftMiddleware({ padding: 8 }),\n      arrowMiddleware({\n        element: arrowRef,\n      }),\n    ];\n  }, [arrowRef]);\n\n  const {\n    x: floatingDataX,\n    y: floatingDataY,\n    placement: resolvedPlacement,\n    refs,\n    strategy: floatingPositionStrategy,\n    middlewareData: { arrow: arrowCoords },\n    update: updateTooltipPosition,\n  } = useFloating({\n    placement: 'top',\n    middleware: memoizedMiddlewares,\n  });\n\n  const {\n    value: isHovered,\n    setTrue: setHoveredTrue,\n    setFalse: setHoveredFalse,\n  } = useBooleanState(false);\n\n  const handleRootRef = useExternRef<HTMLSpanElement>(getRootRef, refs.setReference);\n\n  const shouldShowTooltip = withTooltip && (focusVisible || isHovered || isActive);\n\n  const inputValue = inputProps && inputProps.value;\n  React.useEffect(\n    function udpateTooltipPositionOnValueChange() {\n      if (shouldShowTooltip && inputValue !== 'undefined') {\n        updateTooltipPosition();\n      }\n    },\n    [inputValue, updateTooltipPosition, shouldShowTooltip],\n  );\n\n  return (\n    <React.Fragment>\n      <span\n        {...restProps}\n        ref={handleRootRef}\n        onMouseEnter={setHoveredTrue}\n        onMouseLeave={setHoveredFalse}\n        className={classNames(\n          styles.host,\n          focusVisibleClassNames,\n          isActive && styles.active,\n          isHovered && styles.hover,\n          className,\n        )}\n      >\n        <input\n          {...inputProps}\n          type=\"range\"\n          className={styles.nativeInput}\n          aria-orientation=\"horizontal\"\n          onBlur={onBlur}\n          onFocus={onFocus}\n        />\n      </span>\n      {shouldShowTooltip && (\n        <TooltipBase\n          appearance=\"neutral\"\n          getRootRef={refs.setFloating}\n          style={convertFloatingDataToReactCSSProperties(\n            floatingPositionStrategy,\n            floatingDataX,\n            floatingDataY,\n          )}\n          arrowProps={{\n            coords: arrowCoords,\n            placement: resolvedPlacement,\n            getRootRef: setArrowRef,\n          }}\n          description={inputValue}\n        />\n      )}\n    </React.Fragment>\n  );\n};\n"],"names":["React","classNames","useBooleanState","useExternRef","useFocusVisible","useFocusVisibleClassName","arrowMiddleware","convertFloatingDataToReactCSSProperties","flipMiddleware","offsetMiddleware","shiftMiddleware","useFloating","TooltipBase","styles","SliderThumb","className","getRootRef","inputProps","withTooltip","isActive","restProps","focusVisible","onBlur","onFocus","focusVisibleClassNames","mode","arrowRef","setArrowRef","useState","memoizedMiddlewares","useMemo","crossAxis","mainAxis","padding","element","x","floatingDataX","y","floatingDataY","placement","resolvedPlacement","refs","strategy","floatingPositionStrategy","middlewareData","arrow","arrowCoords","update","updateTooltipPosition","middleware","value","isHovered","setTrue","setHoveredTrue","setFalse","setHoveredFalse","handleRootRef","setReference","shouldShowTooltip","inputValue","useEffect","udpateTooltipPositionOnValueChange","Fragment","span","ref","onMouseEnter","onMouseLeave","host","active","hover","input","type","nativeInput","aria-orientation","appearance","setFloating","style","arrowProps","coords","description"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,eAAe,QAAQ,oCAAiC;AACjE,SAASC,YAAY,QAAQ,iCAA8B;AAC3D,SAASC,eAAe,QAAQ,oCAAiC;AACjE,SAASC,wBAAwB,QAAQ,6CAA0C;AACnF,SACEC,eAAe,EACfC,uCAAuC,EACvCC,cAAc,EACdC,gBAAgB,EAChBC,eAAe,EACfC,WAAW,QACN,iCAAwB;AAE/B,SAASC,WAAW,QAAQ,mCAAgC;AAC5D,OAAOC,YAAY,2BAA2B;AAY9C,OAAO,MAAMC,cAAc,CAAC,EAC1BC,SAAS,EACTC,UAAU,EACVC,UAAU,EACVC,WAAW,EACXC,QAAQ,EACR,GAAGC,WACc;IACjB,MAAM,EAAEC,YAAY,EAAEC,MAAM,EAAEC,OAAO,EAAE,GAAGnB;IAC1C,MAAMoB,yBAAyBnB,yBAAyB;QACtDgB;QACAI,MAAMZ,OAAOQ,YAAY;IAC3B;IACA,MAAM,CAACK,UAAUC,YAAY,GAAG3B,MAAM4B,QAAQ,CAAwB;IAEtE,MAAMC,sBAAsB7B,MAAM8B,OAAO,CAAC;QACxC,OAAO;YACLrB,iBAAiB;gBACfsB,WAAW;gBACXC,UAAU;YACZ;YACAxB;YACAE,gBAAgB;gBAAEuB,SAAS;YAAE;YAC7B3B,gBAAgB;gBACd4B,SAASR;YACX;SACD;IACH,GAAG;QAACA;KAAS;IAEb,MAAM,EACJS,GAAGC,aAAa,EAChBC,GAAGC,aAAa,EAChBC,WAAWC,iBAAiB,EAC5BC,IAAI,EACJC,UAAUC,wBAAwB,EAClCC,gBAAgB,EAAEC,OAAOC,WAAW,EAAE,EACtCC,QAAQC,qBAAqB,EAC9B,GAAGrC,YAAY;QACd4B,WAAW;QACXU,YAAYpB;IACd;IAEA,MAAM,EACJqB,OAAOC,SAAS,EAChBC,SAASC,cAAc,EACvBC,UAAUC,eAAe,EAC1B,GAAGrD,gBAAgB;IAEpB,MAAMsD,gBAAgBrD,aAA8Ba,YAAYyB,KAAKgB,YAAY;IAEjF,MAAMC,oBAAoBxC,eAAgBG,CAAAA,gBAAgB8B,aAAahC,QAAO;IAE9E,MAAMwC,aAAa1C,cAAcA,WAAWiC,KAAK;IACjDlD,MAAM4D,SAAS,CACb,SAASC;QACP,IAAIH,qBAAqBC,eAAe,aAAa;YACnDX;QACF;IACF,GACA;QAACW;QAAYX;QAAuBU;KAAkB;IAGxD,qBACE,MAAC1D,MAAM8D,QAAQ;;0BACb,KAACC;gBACE,GAAG3C,SAAS;gBACb4C,KAAKR;gBACLS,cAAcZ;gBACda,cAAcX;gBACdxC,WAAWd,WACTY,OAAOsD,IAAI,EACX3C,wBACAL,YAAYN,OAAOuD,MAAM,EACzBjB,aAAatC,OAAOwD,KAAK,EACzBtD;0BAGF,cAAA,KAACuD;oBACE,GAAGrD,UAAU;oBACdsD,MAAK;oBACLxD,WAAWF,OAAO2D,WAAW;oBAC7BC,oBAAiB;oBACjBnD,QAAQA;oBACRC,SAASA;;;YAGZmC,mCACC,KAAC9C;gBACC8D,YAAW;gBACX1D,YAAYyB,KAAKkC,WAAW;gBAC5BC,OAAOrE,wCACLoC,0BACAP,eACAE;gBAEFuC,YAAY;oBACVC,QAAQhC;oBACRP,WAAWC;oBACXxB,YAAYW;gBACd;gBACAoD,aAAapB;;;;AAKvB,EAAE"}
+{"version":3,"sources":["../../../../../src/components/Slider/SliderThumb/SliderThumb.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useBooleanState } from '../../../hooks/useBooleanState';\nimport { useExternRef } from '../../../hooks/useExternRef';\nimport { useFocusVisible } from '../../../hooks/useFocusVisible';\nimport { useFocusVisibleClassName } from '../../../hooks/useFocusVisibleClassName';\nimport {\n  arrowMiddleware,\n  convertFloatingDataToReactCSSProperties,\n  flipMiddleware,\n  offsetMiddleware,\n  shiftMiddleware,\n  useFloating,\n} from '../../../lib/floating';\nimport type { HasDataAttribute, HasRootRef } from '../../../types';\nimport { TooltipBase } from '../../TooltipBase/TooltipBase';\nimport styles from './SliderThumb.module.css';\n\ninterface SliderThumbProps extends HasRootRef<HTMLSpanElement>, HasDataAttribute {\n  className?: string;\n  style?: React.CSSProperties;\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement> &\n    React.RefAttributes<HTMLInputElement> &\n    HasDataAttribute;\n  withTooltip?: boolean;\n  isActive?: boolean;\n}\n\nexport const SliderThumb = ({\n  className,\n  getRootRef,\n  inputProps,\n  withTooltip,\n  isActive,\n  ...restProps\n}: SliderThumbProps): React.ReactNode => {\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n  const focusVisibleClassNames = useFocusVisibleClassName({\n    focusVisible,\n    mode: styles.focusVisible,\n  });\n  const [arrowRef, setArrowRef] = React.useState<HTMLDivElement | null>(null);\n\n  const memoizedMiddlewares = React.useMemo(() => {\n    return [\n      offsetMiddleware({\n        crossAxis: 0,\n        mainAxis: 15,\n      }),\n      flipMiddleware(),\n      shiftMiddleware({ padding: 8 }),\n      arrowMiddleware({\n        element: arrowRef,\n      }),\n    ];\n  }, [arrowRef]);\n\n  const {\n    x: floatingDataX,\n    y: floatingDataY,\n    placement: resolvedPlacement,\n    refs,\n    strategy: floatingPositionStrategy,\n    middlewareData: { arrow: arrowCoords },\n    update: updateTooltipPosition,\n  } = useFloating({\n    placement: 'top',\n    middleware: memoizedMiddlewares,\n  });\n\n  const {\n    value: isHovered,\n    setTrue: setHoveredTrue,\n    setFalse: setHoveredFalse,\n  } = useBooleanState(false);\n\n  const handleRootRef = useExternRef<HTMLSpanElement>(getRootRef, refs.setReference);\n\n  const shouldShowTooltip = withTooltip && (focusVisible || isHovered || isActive);\n\n  const inputValue = inputProps && inputProps.value;\n  React.useEffect(\n    function udpateTooltipPositionOnValueChange() {\n      if (shouldShowTooltip && inputValue !== 'undefined') {\n        updateTooltipPosition();\n      }\n    },\n    [inputValue, updateTooltipPosition, shouldShowTooltip],\n  );\n\n  return (\n    <React.Fragment>\n      <span\n        {...restProps}\n        ref={handleRootRef}\n        onMouseEnter={setHoveredTrue}\n        onMouseLeave={setHoveredFalse}\n        className={classNames(\n          styles.host,\n          focusVisibleClassNames,\n          isActive && styles.active,\n          isHovered && styles.hover,\n          className,\n        )}\n      >\n        <input\n          {...inputProps}\n          type=\"range\"\n          className={styles.nativeInput}\n          aria-orientation=\"horizontal\"\n          onBlur={onBlur}\n          onFocus={onFocus}\n        />\n      </span>\n      {shouldShowTooltip && (\n        <TooltipBase\n          appearance=\"neutral\"\n          getRootRef={refs.setFloating}\n          style={convertFloatingDataToReactCSSProperties({\n            strategy: floatingPositionStrategy,\n            x: floatingDataX,\n            y: floatingDataY,\n          })}\n          arrowProps={{\n            coords: arrowCoords,\n            placement: resolvedPlacement,\n            getRootRef: setArrowRef,\n          }}\n          description={inputValue}\n        />\n      )}\n    </React.Fragment>\n  );\n};\n"],"names":["React","classNames","useBooleanState","useExternRef","useFocusVisible","useFocusVisibleClassName","arrowMiddleware","convertFloatingDataToReactCSSProperties","flipMiddleware","offsetMiddleware","shiftMiddleware","useFloating","TooltipBase","styles","SliderThumb","className","getRootRef","inputProps","withTooltip","isActive","restProps","focusVisible","onBlur","onFocus","focusVisibleClassNames","mode","arrowRef","setArrowRef","useState","memoizedMiddlewares","useMemo","crossAxis","mainAxis","padding","element","x","floatingDataX","y","floatingDataY","placement","resolvedPlacement","refs","strategy","floatingPositionStrategy","middlewareData","arrow","arrowCoords","update","updateTooltipPosition","middleware","value","isHovered","setTrue","setHoveredTrue","setFalse","setHoveredFalse","handleRootRef","setReference","shouldShowTooltip","inputValue","useEffect","udpateTooltipPositionOnValueChange","Fragment","span","ref","onMouseEnter","onMouseLeave","host","active","hover","input","type","nativeInput","aria-orientation","appearance","setFloating","style","arrowProps","coords","description"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,eAAe,QAAQ,oCAAiC;AACjE,SAASC,YAAY,QAAQ,iCAA8B;AAC3D,SAASC,eAAe,QAAQ,oCAAiC;AACjE,SAASC,wBAAwB,QAAQ,6CAA0C;AACnF,SACEC,eAAe,EACfC,uCAAuC,EACvCC,cAAc,EACdC,gBAAgB,EAChBC,eAAe,EACfC,WAAW,QACN,iCAAwB;AAE/B,SAASC,WAAW,QAAQ,mCAAgC;AAC5D,OAAOC,YAAY,2BAA2B;AAY9C,OAAO,MAAMC,cAAc,CAAC,EAC1BC,SAAS,EACTC,UAAU,EACVC,UAAU,EACVC,WAAW,EACXC,QAAQ,EACR,GAAGC,WACc;IACjB,MAAM,EAAEC,YAAY,EAAEC,MAAM,EAAEC,OAAO,EAAE,GAAGnB;IAC1C,MAAMoB,yBAAyBnB,yBAAyB;QACtDgB;QACAI,MAAMZ,OAAOQ,YAAY;IAC3B;IACA,MAAM,CAACK,UAAUC,YAAY,GAAG3B,MAAM4B,QAAQ,CAAwB;IAEtE,MAAMC,sBAAsB7B,MAAM8B,OAAO,CAAC;QACxC,OAAO;YACLrB,iBAAiB;gBACfsB,WAAW;gBACXC,UAAU;YACZ;YACAxB;YACAE,gBAAgB;gBAAEuB,SAAS;YAAE;YAC7B3B,gBAAgB;gBACd4B,SAASR;YACX;SACD;IACH,GAAG;QAACA;KAAS;IAEb,MAAM,EACJS,GAAGC,aAAa,EAChBC,GAAGC,aAAa,EAChBC,WAAWC,iBAAiB,EAC5BC,IAAI,EACJC,UAAUC,wBAAwB,EAClCC,gBAAgB,EAAEC,OAAOC,WAAW,EAAE,EACtCC,QAAQC,qBAAqB,EAC9B,GAAGrC,YAAY;QACd4B,WAAW;QACXU,YAAYpB;IACd;IAEA,MAAM,EACJqB,OAAOC,SAAS,EAChBC,SAASC,cAAc,EACvBC,UAAUC,eAAe,EAC1B,GAAGrD,gBAAgB;IAEpB,MAAMsD,gBAAgBrD,aAA8Ba,YAAYyB,KAAKgB,YAAY;IAEjF,MAAMC,oBAAoBxC,eAAgBG,CAAAA,gBAAgB8B,aAAahC,QAAO;IAE9E,MAAMwC,aAAa1C,cAAcA,WAAWiC,KAAK;IACjDlD,MAAM4D,SAAS,CACb,SAASC;QACP,IAAIH,qBAAqBC,eAAe,aAAa;YACnDX;QACF;IACF,GACA;QAACW;QAAYX;QAAuBU;KAAkB;IAGxD,qBACE,MAAC1D,MAAM8D,QAAQ;;0BACb,KAACC;gBACE,GAAG3C,SAAS;gBACb4C,KAAKR;gBACLS,cAAcZ;gBACda,cAAcX;gBACdxC,WAAWd,WACTY,OAAOsD,IAAI,EACX3C,wBACAL,YAAYN,OAAOuD,MAAM,EACzBjB,aAAatC,OAAOwD,KAAK,EACzBtD;0BAGF,cAAA,KAACuD;oBACE,GAAGrD,UAAU;oBACdsD,MAAK;oBACLxD,WAAWF,OAAO2D,WAAW;oBAC7BC,oBAAiB;oBACjBnD,QAAQA;oBACRC,SAASA;;;YAGZmC,mCACC,KAAC9C;gBACC8D,YAAW;gBACX1D,YAAYyB,KAAKkC,WAAW;gBAC5BC,OAAOrE,wCAAwC;oBAC7CmC,UAAUC;oBACVR,GAAGC;oBACHC,GAAGC;gBACL;gBACAuC,YAAY;oBACVC,QAAQhC;oBACRP,WAAWC;oBACXxB,YAAYW;gBACd;gBACAoD,aAAapB;;;;AAKvB,EAAE"}

package/dist/cssm/components/Slider/SliderThumb/SliderThumb.module.css

@@ -4,13 +4,13 @@
   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);
-  background-color: var(--vkui--color_background_contrast);
-  box-shadow: var(--vkui--elevation3);
   -webkit-user-select: none;
      -moz-user-select: none;
           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);
   transition: background-color 0.15s ease-out;
 }
 
@@ -32,14 +32,14 @@
  */
 
 .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/dist/cssm/components/Snackbar/Snackbar.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
+import { useConfigDirection } from "../../hooks/useConfigDirection.js";
 import { useExternRef } from "../../hooks/useExternRef.js";
 import { useFocusWithin } from "../../hooks/useFocusWithin.js";
 import { useGlobalEscKeyDown } from "../../hooks/useGlobalEscKeyDown.js";
@@ -38,6 +39,8 @@ const animationStateClassNames = {
     const platform = usePlatform();
     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(null);
@@ -85,14 +88,14 @@ const animationStateClassNames = {
         if (shiftDataRef.current && panGestureRecognizer.current) {
             panGestureRecognizer.current.setInitialTimeOnce();
             panGestureRecognizer.current.setEndCoords(event.nativeEvent);
-            shiftDataRef.current = getMovedShiftData(placement, shiftDataRef.current, panGestureRecognizer.current.delta());
+            shiftDataRef.current = getMovedShiftData(placement, shiftDataRef.current, panGestureRecognizer.current.delta(), isRtl);
             if (shiftDataRef.current.shifted) {
                 updateShiftAxisCSSProperties(shiftDataRef.current.x, shiftDataRef.current.y, shiftDataRef.current.direction);
             }
         }
     };
     const handleTouchEnd = ()=>{
-        if (touched && shiftDataRef.current && panGestureRecognizer.current && shouldBeClosedByShiftData(placement, shiftDataRef.current, getRelativeBoundingClientRect(rootRef.current, inRef.current), panGestureRecognizer.current.velocity())) {
+        if (touched && shiftDataRef.current && panGestureRecognizer.current && shouldBeClosedByShiftData(placement, shiftDataRef.current, getRelativeBoundingClientRect(rootRef.current, inRef.current), panGestureRecognizer.current.velocity(), isRtl)) {
             close();
         }
         setTouched(false);
@@ -138,7 +141,7 @@ const animationStateClassNames = {
     return /*#__PURE__*/ _jsx(RootComponent, {
         ...restProps,
         role: "presentation",
-        baseClassName: classNames(styles.host, platform === 'ios' && styles.ios, touched && styles.touched, placementClassNames[placement], animationStateClassNames[animationState]),
+        baseClassName: classNames(styles.host, platform === 'ios' && styles.ios, touched && styles.touched, placementClassNames[placement], animationStateClassNames[animationState], isRtl && styles.rtl),
         baseStyle: resolveOffsetYCssStyle(placement, offsetY),
         getRootRef: rootRef,
         children: /*#__PURE__*/ _jsx("div", {