@vkontakte/vkui 6.0.3 → 6.1.0

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

@@ -1,3 +1,4 @@
+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';
@@ -11,12 +12,17 @@ const sizeYClassNames = {
     none: styles['Slider--sizeY-none'],
     ['compact']: styles['Slider--sizeY-compact']
 };
+const sizeClassNames = {
+    l: styles['Slider--size-l'],
+    m: styles['Slider--size-m'],
+    s: styles['Slider--size-s']
+};
 /**
  * @see https://vkcom.github.io/VKUI/#/Slider
  */ export const Slider = ({ step = 1, min = 0, max = 100, value: valueProp, multiple: multipleProp, defaultValue = multipleProp ? [
     min,
     max
-] : min, disabled, className, getRootRef, getAriaLabel, getAriaValueText, onChange, withTooltip, ...restProps })=>{
+] : min, disabled, className, getRootRef, getAriaLabel, getAriaValueText, onChange, withTooltip, size = 'l', ...restProps })=>{
     const { sizeY = 'none' } = useAdaptivity();
     const isControlled = valueProp !== undefined;
     const [localValue, setValue] = React.useState(defaultValue);
@@ -104,69 +110,78 @@ const sizeYClassNames = {
     const handleChangeByNativeInput = (event)=>{
         changeValue(updateInternalStateValueByNativeChange(value, Number(event.target.value), getDraggingTypeByTargetDataset(event.target)), event);
     };
-    return /*#__PURE__*/ React.createElement(Touch, {
+    return /*#__PURE__*/ _jsxs(Touch, {
         "data-value": multiple ? `${startValue},${endValue}` : startValue,
         ...restPropsWithoutAriaAttributes,
-        className: classNames(styles['Slider'], disabled && styles['Slider--disabled'], sizeY !== 'regular' && sizeYClassNames[sizeY], className),
+        className: classNames(styles['Slider'], disabled && styles['Slider--disabled'], sizeY !== 'regular' && sizeYClassNames[sizeY], sizeClassNames[size], className),
         onStart: disabled ? undefined : handlePointerStart,
         onMove: disabled ? undefined : handlePointerMove,
-        onEnd: disabled ? undefined : handlePointerEnd
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: styles['Slider__track']
-    }), /*#__PURE__*/ React.createElement("div", {
-        className: styles['Slider__track-fill'],
-        style: multiple ? {
-            left: `${startValueInPercent}%`,
-            right: `${100 - endReversedValueInPercent}%`
-        } : {
-            width: `${startValueInPercent}%`
-        }
-    }), /*#__PURE__*/ React.createElement("div", {
-        ref: thumbsContainerRef,
-        className: styles['Slider__thumbs']
-    }, /*#__PURE__*/ React.createElement(SliderThumb, {
-        "data-type": "start",
-        className: styles['Slider__thumb'],
-        style: {
-            left: `${startValueInPercent}%`,
-            // Меняем местами порядок слоёв, иначе, при достижении `start` и `end` 100%, `end` будет перекрывать `start`.
-            zIndex: multiple && startValueInPercent >= 50 ? 2 : undefined
-        },
-        withTooltip: withTooltip,
-        inputProps: {
-            'data-type': 'start',
-            'ref': thumbStartInputRef,
-            'step': step,
-            'min': min,
-            'value': startValue,
-            'max': multiple ? endValue : max,
-            'disabled': disabled,
-            'aria-label': getAriaLabel ? getAriaLabel(0) : ariaLabel,
-            'aria-valuetext': getAriaValueText ? getAriaValueText(startValue, 0) : ariaValueText,
-            'aria-labelledby': ariaLabelledBy,
-            'onChange': handleChangeByNativeInput
-        }
-    }), multiple && /*#__PURE__*/ React.createElement(SliderThumb, {
-        "data-type": "end",
-        className: styles['Slider__thumb'],
-        style: {
-            left: `${endReversedValueInPercent}%`
-        },
-        withTooltip: withTooltip,
-        inputProps: {
-            'data-type': 'end',
-            'ref': thumbEndInputRef,
-            'step': step,
-            'min': startValue,
-            'value': endValue,
-            'max': max,
-            'disabled': disabled,
-            'aria-label': getAriaLabel ? getAriaLabel(1) : ariaLabel,
-            'aria-valuetext': getAriaValueText ? getAriaValueText(endValue, 1) : ariaValueText,
-            'aria-labelledby': ariaLabelledBy,
-            'onChange': handleChangeByNativeInput
-        }
-    })));
+        onEnd: disabled ? undefined : handlePointerEnd,
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                className: styles['Slider__track']
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: styles['Slider__track-fill'],
+                style: multiple ? {
+                    left: `${startValueInPercent}%`,
+                    right: `${100 - endReversedValueInPercent}%`
+                } : {
+                    width: `${startValueInPercent}%`
+                }
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                ref: thumbsContainerRef,
+                className: styles['Slider__thumbs'],
+                children: [
+                    /*#__PURE__*/ _jsx(SliderThumb, {
+                        "data-type": "start",
+                        className: styles['Slider__thumb'],
+                        style: {
+                            left: `${startValueInPercent}%`,
+                            // Меняем местами порядок слоёв, иначе, при достижении `start` и `end` 100%, `end` будет перекрывать `start`.
+                            zIndex: multiple && startValueInPercent >= 50 ? 2 : undefined
+                        },
+                        withTooltip: withTooltip,
+                        inputProps: {
+                            'data-type': 'start',
+                            'ref': thumbStartInputRef,
+                            'step': step,
+                            'min': min,
+                            'value': startValue,
+                            'max': multiple ? endValue : max,
+                            'disabled': disabled,
+                            'aria-label': getAriaLabel ? getAriaLabel(0) : ariaLabel,
+                            'aria-valuetext': getAriaValueText ? getAriaValueText(startValue, 0) : ariaValueText,
+                            'aria-labelledby': ariaLabelledBy,
+                            'onChange': handleChangeByNativeInput
+                        }
+                    }),
+                    multiple && /*#__PURE__*/ _jsx(SliderThumb, {
+                        "data-type": "end",
+                        className: styles['Slider__thumb'],
+                        style: {
+                            left: `${endReversedValueInPercent}%`
+                        },
+                        withTooltip: withTooltip,
+                        inputProps: {
+                            'data-type': 'end',
+                            'ref': thumbEndInputRef,
+                            'step': step,
+                            'min': startValue,
+                            'value': endValue,
+                            'max': max,
+                            'disabled': disabled,
+                            'aria-label': getAriaLabel ? getAriaLabel(1) : ariaLabel,
+                            'aria-valuetext': getAriaValueText ? getAriaValueText(endValue, 1) : ariaValueText,
+                            'aria-labelledby': ariaLabelledBy,
+                            'onChange': handleChangeByNativeInput
+                        }
+                    })
+                ]
+            })
+        ]
+    });
 };
 
 //# sourceMappingURL=Slider.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import * 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 { HTMLAttributesWithRootRef } from '../../types';\nimport { Touch, type TouchEvent, type TouchEventHandler } 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 { InternalGestureRef, InternalValueState } from './types';\nimport styles from './Slider.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Slider--sizeY-none'],\n  ['compact']: styles['Slider--sizeY-compact'],\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\nexport interface SliderProps extends SliderBaseProps {\n  multiple?: false;\n  value?: number;\n  defaultValue?: number;\n  onChange?: (value: number, event: TouchEvent | 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: TouchEvent | 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  onChange,\n  withTooltip,\n  ...restProps\n}: SliderProps | SliderMultipleProps) => {\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\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 = (nextValue: InternalValueState, event: TouchEvent | React.ChangeEvent) => {\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: TouchEventHandler = (event: TouchEvent) => {\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  };\n\n  const handlePointerMove: TouchEventHandler = (event: TouchEvent) => {\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: TouchEventHandler = (event) => {\n    gesture.dragging = null;\n    event.originalEvent.stopPropagation();\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['Slider'],\n        disabled && styles['Slider--disabled'],\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        className,\n      )}\n      onStart={disabled ? undefined : handlePointerStart}\n      onMove={disabled ? undefined : handlePointerMove}\n      onEnd={disabled ? undefined : handlePointerEnd}\n    >\n      <div className={styles['Slider__track']} />\n      <div\n        className={styles['Slider__track-fill']}\n        style={\n          multiple\n            ? { left: `${startValueInPercent}%`, right: `${100 - endReversedValueInPercent}%` }\n            : { width: `${startValueInPercent}%` }\n        }\n      />\n      <div ref={thumbsContainerRef} className={styles['Slider__thumbs']}>\n        <SliderThumb\n          data-type=\"start\"\n          className={styles['Slider__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            '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        />\n        {multiple && (\n          <SliderThumb\n            data-type=\"end\"\n            className={styles['Slider__thumb']}\n            style={{ left: `${endReversedValueInPercent}%` }}\n            withTooltip={withTooltip}\n            inputProps={{\n              'data-type': 'end',\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          />\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","Slider","step","min","max","value","valueProp","multiple","multipleProp","defaultValue","disabled","className","getRootRef","getAriaLabel","getAriaValueText","onChange","withTooltip","restProps","sizeY","isControlled","undefined","localValue","setValue","useState","useMemo","resolvedValue","Array","isArray","startValue","endValue","startValueInPercent","endReversedValueInPercent","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","onStart","onMove","onEnd","div","style","right","ref","data-type","zIndex","inputProps"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import * 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 { HTMLAttributesWithRootRef } from '../../types';\nimport { Touch, type TouchEvent, type TouchEventHandler } 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 { InternalGestureRef, InternalValueState } from './types';\nimport styles from './Slider.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Slider--sizeY-none'],\n  ['compact']: styles['Slider--sizeY-compact'],\n};\n\nconst sizeClassNames = {\n  l: styles['Slider--size-l'],\n  m: styles['Slider--size-m'],\n  s: styles['Slider--size-s'],\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\nexport interface SliderProps extends SliderBaseProps {\n  multiple?: false;\n  value?: number;\n  defaultValue?: number;\n  onChange?: (value: number, event: TouchEvent | 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: TouchEvent | 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  onChange,\n  withTooltip,\n  size = 'l',\n  ...restProps\n}: SliderProps | SliderMultipleProps) => {\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\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 = (nextValue: InternalValueState, event: TouchEvent | React.ChangeEvent) => {\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: TouchEventHandler = (event: TouchEvent) => {\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  };\n\n  const handlePointerMove: TouchEventHandler = (event: TouchEvent) => {\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: TouchEventHandler = (event) => {\n    gesture.dragging = null;\n    event.originalEvent.stopPropagation();\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['Slider'],\n        disabled && styles['Slider--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['Slider__track']} />\n      <div\n        className={styles['Slider__track-fill']}\n        style={\n          multiple\n            ? { left: `${startValueInPercent}%`, right: `${100 - endReversedValueInPercent}%` }\n            : { width: `${startValueInPercent}%` }\n        }\n      />\n      <div ref={thumbsContainerRef} className={styles['Slider__thumbs']}>\n        <SliderThumb\n          data-type=\"start\"\n          className={styles['Slider__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            '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        />\n        {multiple && (\n          <SliderThumb\n            data-type=\"end\"\n            className={styles['Slider__thumb']}\n            style={{ left: `${endReversedValueInPercent}%` }}\n            withTooltip={withTooltip}\n            inputProps={{\n              'data-type': 'end',\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          />\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","sizeClassNames","l","m","s","Slider","step","min","max","value","valueProp","multiple","multipleProp","defaultValue","disabled","className","getRootRef","getAriaLabel","getAriaValueText","onChange","withTooltip","size","restProps","sizeY","isControlled","undefined","localValue","setValue","useState","useMemo","resolvedValue","Array","isArray","startValue","endValue","startValueInPercent","endReversedValueInPercent","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","onStart","onMove","onEnd","div","style","right","ref","data-type","zIndex","inputProps"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

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

@@ -40,16 +40,44 @@
   transform: translate(-50%, -50%);
 }
 
+.Slider--size-l {
+  --vkui_internal--slider_thumb_size: 28px;
+}
+
+.Slider--size-m {
+  --vkui_internal--slider_thumb_size: 20px;
+}
+
+.Slider--size-s {
+  --vkui_internal--slider_thumb_size: 16px;
+}
+
 /**
  * sizeY COMPACT
  */
 
-.Slider--sizeY-compact {
+.Slider--sizeY-compact.Slider--size-l {
   --vkui_internal--slider_thumb_size: 24px;
 }
 
+.Slider--sizeY-compact.Slider--size-m {
+  --vkui_internal--slider_thumb_size: 16px;
+}
+
+.Slider--sizeY-compact.Slider--size-s {
+  --vkui_internal--slider_thumb_size: 12px;
+}
+
 @media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
-  .Slider--sizeY-none {
+  .Slider--sizeY-none.Slider--size-l {
     --vkui_internal--slider_thumb_size: 24px;
   }
+
+  .Slider--sizeY-none.Slider--size-m {
+    --vkui_internal--slider_thumb_size: 16px;
+  }
+
+  .Slider--sizeY-none.Slider--size-s {
+    --vkui_internal--slider_thumb_size: 12px;
+  }
 }

package/dist/cssm/components/Slider/SliderThumb/SliderThumb.d.ts

@@ -6,6 +6,6 @@ interface SliderThumbProps extends HasRootRef<HTMLSpanElement>, HasDataAttribute
     inputProps?: React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement> & HasDataAttribute;
     withTooltip?: boolean;
 }
-export declare const SliderThumb: ({ className, getRootRef, inputProps, withTooltip, ...restProps }: SliderThumbProps) => React.JSX.Element;
+export declare const SliderThumb: ({ className, getRootRef, inputProps, withTooltip, ...restProps }: SliderThumbProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=SliderThumb.d.ts.map

package/dist/cssm/components/Slider/SliderThumb/SliderThumb.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SliderThumb.d.ts","sourceRoot":"","sources":["../../../../../src/components/Slider/SliderThumb/SliderThumb.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAc/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAInE,UAAU,gBAAiB,SAAQ,UAAU,CAAC,eAAe,CAAC,EAAE,gBAAgB;IAC9E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,UAAU,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,GACtD,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,GACrC,gBAAgB,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,WAAW,qEAMrB,gBAAgB,sBA4FlB,CAAC"}
+{"version":3,"file":"SliderThumb.d.ts","sourceRoot":"","sources":["../../../../../src/components/Slider/SliderThumb/SliderThumb.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAc/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAInE,UAAU,gBAAiB,SAAQ,UAAU,CAAC,eAAe,CAAC,EAAE,gBAAgB;IAC9E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,UAAU,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,GACtD,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,GACrC,gBAAgB,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,WAAW,qEAMrB,gBAAgB,4CA4FlB,CAAC"}

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useBooleanState } from '../../../hooks/useBooleanState';
@@ -48,30 +49,36 @@ export const SliderThumb = ({ className, getRootRef, inputProps, withTooltip, ..
         updateTooltipPosition,
         shouldShowTooltip
     ]);
-    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("span", {
-        ...restProps,
-        ref: handleRootRef,
-        onMouseEnter: setHoveredTrue,
-        onMouseLeave: setHoveredFalse,
-        className: classNames(styles['SliderThumb'], focusVisibleClassNames, className)
-    }, /*#__PURE__*/ React.createElement("input", {
-        ...inputProps,
-        type: "range",
-        className: styles['SliderThumb__nativeInput'],
-        "aria-orientation": "horizontal",
-        onBlur: onBlur,
-        onFocus: onFocus
-    })), shouldShowTooltip && /*#__PURE__*/ React.createElement(TooltipBase, {
-        appearance: "neutral",
-        getRootRef: refs.setFloating,
-        style: convertFloatingDataToReactCSSProperties(floatingPositionStrategy, floatingDataX, floatingDataY),
-        arrowProps: {
-            coords: arrowCoords,
-            placement: resolvedPlacement,
-            getRootRef: setArrowRef
-        },
-        text: inputValue
-    }));
+    return /*#__PURE__*/ _jsxs(React.Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx("span", {
+                ...restProps,
+                ref: handleRootRef,
+                onMouseEnter: setHoveredTrue,
+                onMouseLeave: setHoveredFalse,
+                className: classNames(styles['SliderThumb'], focusVisibleClassNames, className),
+                children: /*#__PURE__*/ _jsx("input", {
+                    ...inputProps,
+                    type: "range",
+                    className: styles['SliderThumb__nativeInput'],
+                    "aria-orientation": "horizontal",
+                    onBlur: onBlur,
+                    onFocus: onFocus
+                })
+            }),
+            shouldShowTooltip && /*#__PURE__*/ _jsx(TooltipBase, {
+                appearance: "neutral",
+                getRootRef: refs.setFloating,
+                style: convertFloatingDataToReactCSSProperties(floatingPositionStrategy, floatingDataX, floatingDataY),
+                arrowProps: {
+                    coords: arrowCoords,
+                    placement: resolvedPlacement,
+                    getRootRef: setArrowRef
+                },
+                text: inputValue
+            })
+        ]
+    });
 };
 
 //# sourceMappingURL=SliderThumb.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Slider/SliderThumb/SliderThumb.tsx"],"sourcesContent":["import * 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}\n\nexport const SliderThumb = ({\n  className,\n  getRootRef,\n  inputProps,\n  withTooltip,\n  ...restProps\n}: SliderThumbProps) => {\n  const { focusVisible, onBlur, onFocus } = useFocusVisible(false);\n  const focusVisibleClassNames = useFocusVisibleClassName({\n    focusVisible,\n    mode: styles['SliderThumb--focus-visible'],\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);\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(styles['SliderThumb'], focusVisibleClassNames, className)}\n      >\n        <input\n          {...inputProps}\n          type=\"range\"\n          className={styles['SliderThumb__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          text={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","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","input","type","aria-orientation","appearance","setFloating","style","arrowProps","coords","text"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,eAAe,QAAQ,iCAAiC;AACjE,SAASC,YAAY,QAAQ,8BAA8B;AAC3D,SAASC,eAAe,QAAQ,iCAAiC;AACjE,SAASC,wBAAwB,QAAQ,0CAA0C;AACnF,SACEC,eAAe,EACfC,uCAAuC,EACvCC,cAAc,EACdC,gBAAgB,EAChBC,eAAe,EACfC,WAAW,QACN,wBAAwB;AAE/B,SAASC,WAAW,QAAQ,gCAAgC;AAC5D,OAAOC,YAAY,2BAA2B;AAW9C,OAAO,MAAMC,cAAc,CAAC,EAC1BC,SAAS,EACTC,UAAU,EACVC,UAAU,EACVC,WAAW,EACX,GAAGC,WACc;IACjB,MAAM,EAAEC,YAAY,EAAEC,MAAM,EAAEC,OAAO,EAAE,GAAGlB,gBAAgB;IAC1D,MAAMmB,yBAAyBlB,yBAAyB;QACtDe;QACAI,MAAMX,MAAM,CAAC,6BAA6B;IAC5C;IACA,MAAM,CAACY,UAAUC,YAAY,GAAG1B,MAAM2B,QAAQ,CAAwB;IAEtE,MAAMC,sBAAsB5B,MAAM6B,OAAO,CAAC;QACxC,OAAO;YACLpB,iBAAiB;gBACfqB,WAAW;gBACXC,UAAU;YACZ;YACAvB;YACAE,gBAAgB;gBAAEsB,SAAS;YAAE;YAC7B1B,gBAAgB;gBACd2B,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,GAAGpC,YAAY;QACd2B,WAAW;QACXU,YAAYpB;IACd;IAEA,MAAM,EACJqB,OAAOC,SAAS,EAChBC,SAASC,cAAc,EACvBC,UAAUC,eAAe,EAC1B,GAAGpD,gBAAgB;IAEpB,MAAMqD,gBAAgBpD,aAA8Ba,YAAYwB,KAAKgB,YAAY;IAEjF,MAAMC,oBAAoBvC,eAAgBE,CAAAA,gBAAgB8B,SAAQ;IAElE,MAAMQ,aAAazC,cAAcA,WAAWgC,KAAK;IACjDjD,MAAM2D,SAAS,CACb,SAASC;QACP,IAAIH,qBAAqBC,eAAe,aAAa;YACnDX;QACF;IACF,GACA;QAACW;QAAYX;QAAuBU;KAAkB;IAGxD,qBACE,oBAACzD,MAAM6D,QAAQ,sBACb,oBAACC;QACE,GAAG3C,SAAS;QACb4C,KAAKR;QACLS,cAAcZ;QACda,cAAcX;QACdvC,WAAWd,WAAWY,MAAM,CAAC,cAAc,EAAEU,wBAAwBR;qBAErE,oBAACmD;QACE,GAAGjD,UAAU;QACdkD,MAAK;QACLpD,WAAWF,MAAM,CAAC,2BAA2B;QAC7CuD,oBAAiB;QACjB/C,QAAQA;QACRC,SAASA;SAGZmC,mCACC,oBAAC7C;QACCyD,YAAW;QACXrD,YAAYwB,KAAK8B,WAAW;QAC5BC,OAAOhE,wCACLmC,0BACAP,eACAE;QAEFmC,YAAY;YACVC,QAAQ5B;YACRP,WAAWC;YACXvB,YAAYU;QACd;QACAgD,MAAMhB;;AAKhB,EAAE"}
+{"version":3,"sources":["../../../../../src/components/Slider/SliderThumb/SliderThumb.tsx"],"sourcesContent":["import * 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}\n\nexport const SliderThumb = ({\n  className,\n  getRootRef,\n  inputProps,\n  withTooltip,\n  ...restProps\n}: SliderThumbProps) => {\n  const { focusVisible, onBlur, onFocus } = useFocusVisible(false);\n  const focusVisibleClassNames = useFocusVisibleClassName({\n    focusVisible,\n    mode: styles['SliderThumb--focus-visible'],\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);\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(styles['SliderThumb'], focusVisibleClassNames, className)}\n      >\n        <input\n          {...inputProps}\n          type=\"range\"\n          className={styles['SliderThumb__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          text={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","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","input","type","aria-orientation","appearance","setFloating","style","arrowProps","coords","text"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,eAAe,QAAQ,iCAAiC;AACjE,SAASC,YAAY,QAAQ,8BAA8B;AAC3D,SAASC,eAAe,QAAQ,iCAAiC;AACjE,SAASC,wBAAwB,QAAQ,0CAA0C;AACnF,SACEC,eAAe,EACfC,uCAAuC,EACvCC,cAAc,EACdC,gBAAgB,EAChBC,eAAe,EACfC,WAAW,QACN,wBAAwB;AAE/B,SAASC,WAAW,QAAQ,gCAAgC;AAC5D,OAAOC,YAAY,2BAA2B;AAW9C,OAAO,MAAMC,cAAc,CAAC,EAC1BC,SAAS,EACTC,UAAU,EACVC,UAAU,EACVC,WAAW,EACX,GAAGC,WACc;IACjB,MAAM,EAAEC,YAAY,EAAEC,MAAM,EAAEC,OAAO,EAAE,GAAGlB,gBAAgB;IAC1D,MAAMmB,yBAAyBlB,yBAAyB;QACtDe;QACAI,MAAMX,MAAM,CAAC,6BAA6B;IAC5C;IACA,MAAM,CAACY,UAAUC,YAAY,GAAG1B,MAAM2B,QAAQ,CAAwB;IAEtE,MAAMC,sBAAsB5B,MAAM6B,OAAO,CAAC;QACxC,OAAO;YACLpB,iBAAiB;gBACfqB,WAAW;gBACXC,UAAU;YACZ;YACAvB;YACAE,gBAAgB;gBAAEsB,SAAS;YAAE;YAC7B1B,gBAAgB;gBACd2B,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,GAAGpC,YAAY;QACd2B,WAAW;QACXU,YAAYpB;IACd;IAEA,MAAM,EACJqB,OAAOC,SAAS,EAChBC,SAASC,cAAc,EACvBC,UAAUC,eAAe,EAC1B,GAAGpD,gBAAgB;IAEpB,MAAMqD,gBAAgBpD,aAA8Ba,YAAYwB,KAAKgB,YAAY;IAEjF,MAAMC,oBAAoBvC,eAAgBE,CAAAA,gBAAgB8B,SAAQ;IAElE,MAAMQ,aAAazC,cAAcA,WAAWgC,KAAK;IACjDjD,MAAM2D,SAAS,CACb,SAASC;QACP,IAAIH,qBAAqBC,eAAe,aAAa;YACnDX;QACF;IACF,GACA;QAACW;QAAYX;QAAuBU;KAAkB;IAGxD,qBACE,MAACzD,MAAM6D,QAAQ;;0BACb,KAACC;gBACE,GAAG3C,SAAS;gBACb4C,KAAKR;gBACLS,cAAcZ;gBACda,cAAcX;gBACdvC,WAAWd,WAAWY,MAAM,CAAC,cAAc,EAAEU,wBAAwBR;0BAErE,cAAA,KAACmD;oBACE,GAAGjD,UAAU;oBACdkD,MAAK;oBACLpD,WAAWF,MAAM,CAAC,2BAA2B;oBAC7CuD,oBAAiB;oBACjB/C,QAAQA;oBACRC,SAASA;;;YAGZmC,mCACC,KAAC7C;gBACCyD,YAAW;gBACXrD,YAAYwB,KAAK8B,WAAW;gBAC5BC,OAAOhE,wCACLmC,0BACAP,eACAE;gBAEFmC,YAAY;oBACVC,QAAQ5B;oBACRP,WAAWC;oBACXvB,YAAYU;gBACd;gBACAgD,MAAMhB;;;;AAKhB,EAAE"}

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

@@ -1,6 +1,7 @@
 .SliderThumb {
   position: absolute;
   z-index: 1;
+  box-sizing: border-box;
   inline-size: var(--vkui_internal--slider_thumb_size);
   block-size: var(--vkui_internal--slider_thumb_size);
   border-radius: 50%;

package/dist/cssm/components/Slider/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/components/Slider/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAExE,eAAO,MAAM,SAAS,MAAO,MAAM,OAAO,MAAM,OAAO,MAAM,WAAoC,CAAC;AAElG,eAAO,MAAM,aAAa,WAChB,MAAM,SACP,MAAM,OACR,MAAM,OACN,MAAM,SACJ,MAAM,WAGd,CAAC;AAYF,eAAO,MAAM,wBAAwB,6CAExB,MAAM,OACZ,MAAM,OACN,MAAM,YACD,oBAAoB,GAAG,IAAI,uBAqBtC,CAAC;AAEF,eAAO,MAAM,sCAAsC,6CAEtC,MAAM,YACP,oBAAoB,GAAG,IAAI,uBAYtC,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,kBAAkB,GAAG,KAAK,IAAI,CAAC,MAAM,EAAE,MAAM,CAAC,CAErF;AAED,eAAO,MAAM,aAAa,6CAEb,MAAM,QACX,oBAAoB,GAAG,IAAI,oBAelC,CAAC;AAEF,eAAO,MAAM,8BAA8B,qFAY1C,CAAC;AAQF,eAAO,MAAM,wCAAwC;;;;;;;CAOpD,CAAC"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/components/Slider/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAExE,eAAO,MAAM,SAAS,MAAO,MAAM,OAAO,MAAM,OAAO,MAAM,WAAoC,CAAC;AAElG,eAAO,MAAM,aAAa,WAChB,MAAM,SACP,MAAM,OACR,MAAM,OACN,MAAM,SACJ,MAAM,WAGd,CAAC;AAYF,eAAO,MAAM,wBAAwB,6CAExB,MAAM,OACZ,MAAM,OACN,MAAM,YACD,oBAAoB,GAAG,IAAI,uBAqBtC,CAAC;AAEF,eAAO,MAAM,sCAAsC,6CAEtC,MAAM,YACP,oBAAoB,GAAG,IAAI,uBAYtC,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,kBAAkB,GAAG,KAAK,IAAI,CAAC,MAAM,EAAE,MAAM,CAAC,CAErF;AAED,eAAO,MAAM,aAAa,6CAEb,MAAM,QACX,oBAAoB,GAAG,IAAI,oBAelC,CAAC;AAEF,eAAO,MAAM,8BAA8B,yDACjC,CAAC,2BAWV,CAAC;AAQF,eAAO,MAAM,wCAAwC,8CACxC,CAAC;;;;;;;CAMb,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Slider/helpers.ts"],"sourcesContent":["import * as React from 'react';\nimport { rescale } from '../../helpers/math';\nimport type { InternalDraggingType, InternalValueState } from './types';\n\nexport const toPercent = (v: number, min: number, max: number) => ((v - min) / (max - min)) * 100;\n\nexport const offsetToValue = (\n  startX: number,\n  width: number,\n  min: number,\n  max: number,\n  step?: number,\n) => {\n  return rescale(startX, [0, width], [min, max], { step });\n};\n\nconst restrictValueByMinMax = (value: number, min: number, max: number) => {\n  if (value < min) {\n    return min;\n  }\n  if (value > max) {\n    return max;\n  }\n  return value;\n};\n\nexport const updateInternalStateValue = (\n  prevValue: InternalValueState,\n  nextValue: number,\n  min: number,\n  max: number,\n  dragging: InternalDraggingType | null,\n): InternalValueState => {\n  const [prevStartValue, prevEndValue] = prevValue;\n\n  if (prevEndValue === null) {\n    return [restrictValueByMinMax(nextValue, min, max), null];\n  }\n\n  switch (dragging) {\n    case 'start':\n      return nextValue > prevEndValue\n        ? [prevEndValue, prevEndValue]\n        : [restrictValueByMinMax(nextValue, min, max), prevEndValue];\n    case 'end':\n      return nextValue < prevStartValue\n        ? [prevStartValue, prevStartValue]\n        : [prevStartValue, restrictValueByMinMax(nextValue, min, max)];\n    case null:\n    default:\n      return prevValue;\n  }\n};\n\nexport const updateInternalStateValueByNativeChange = (\n  prevValue: InternalValueState,\n  nextValue: number,\n  dragging: InternalDraggingType | null,\n): InternalValueState => {\n  const [prevStartValue, prevEndValue] = prevValue;\n  switch (dragging) {\n    case 'start':\n      return [nextValue, prevEndValue];\n    case 'end':\n      return [prevStartValue, nextValue];\n    case null:\n    default:\n      return prevValue;\n  }\n};\n\nexport function isMultipleValues(value: InternalValueState): value is [number, number] {\n  return value[1] !== null;\n}\n\nexport const snapDirection = (\n  prevValue: InternalValueState,\n  nextValue: number,\n  type: InternalDraggingType | null,\n) => {\n  if (type === 'start') {\n    return 'start';\n  }\n  if (type === 'end') {\n    return 'end';\n  }\n\n  const [startRaw, endRaw] = prevValue;\n  /* startRaw и endRaw могут быть равны, поэтому насильно добавляем разницу. */\n  const FORCE_DIFF_VALUE = 0.1;\n  const start = endRaw !== null ? startRaw - FORCE_DIFF_VALUE : startRaw;\n  const end = endRaw !== null ? endRaw + FORCE_DIFF_VALUE : 0;\n  return Math.abs(start - nextValue) <= Math.abs(end - nextValue) ? 'start' : 'end';\n};\n\nexport const getDraggingTypeByTargetDataset = <T extends (EventTarget & HTMLElement) | null>(\n  target: T,\n) => {\n  if (target) {\n    if (target.dataset.type === 'start') {\n      return 'start';\n    }\n    if (target.dataset.type === 'end') {\n      return 'end';\n    }\n  }\n  return null;\n};\n\nconst resetProps = {\n  'aria-label': undefined,\n  'aria-valuetext': undefined,\n  'aria-labelledby': undefined,\n};\n\nexport const extractSliderAriaAttributesFromRestProps = <T extends React.AriaAttributes>(\n  restProps: T,\n) => {\n  const ariaLabel = restProps['aria-label'];\n  const ariaValueText = restProps['aria-valuetext'];\n  const ariaLabelledBy = restProps['aria-labelledby'];\n  return { ...restProps, ...resetProps, ariaLabel, ariaValueText, ariaLabelledBy };\n};\n"],"names":["React","rescale","toPercent","v","min","max","offsetToValue","startX","width","step","restrictValueByMinMax","value","updateInternalStateValue","prevValue","nextValue","dragging","prevStartValue","prevEndValue","updateInternalStateValueByNativeChange","isMultipleValues","snapDirection","type","startRaw","endRaw","FORCE_DIFF_VALUE","start","end","Math","abs","getDraggingTypeByTargetDataset","target","dataset","resetProps","undefined","extractSliderAriaAttributesFromRestProps","restProps","ariaLabel","ariaValueText","ariaLabelledBy"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,OAAO,QAAQ,qBAAqB;AAG7C,OAAO,MAAMC,YAAY,CAACC,GAAWC,KAAaC,MAAgB,AAAEF,CAAAA,IAAIC,GAAE,IAAMC,CAAAA,MAAMD,GAAE,IAAM,IAAI;AAElG,OAAO,MAAME,gBAAgB,CAC3BC,QACAC,OACAJ,KACAC,KACAI;IAEA,OAAOR,QAAQM,QAAQ;QAAC;QAAGC;KAAM,EAAE;QAACJ;QAAKC;KAAI,EAAE;QAAEI;IAAK;AACxD,EAAE;AAEF,MAAMC,wBAAwB,CAACC,OAAeP,KAAaC;IACzD,IAAIM,QAAQP,KAAK;QACf,OAAOA;IACT;IACA,IAAIO,QAAQN,KAAK;QACf,OAAOA;IACT;IACA,OAAOM;AACT;AAEA,OAAO,MAAMC,2BAA2B,CACtCC,WACAC,WACAV,KACAC,KACAU;IAEA,MAAM,CAACC,gBAAgBC,aAAa,GAAGJ;IAEvC,IAAII,iBAAiB,MAAM;QACzB,OAAO;YAACP,sBAAsBI,WAAWV,KAAKC;YAAM;SAAK;IAC3D;IAEA,OAAQU;QACN,KAAK;YACH,OAAOD,YAAYG,eACf;gBAACA;gBAAcA;aAAa,GAC5B;gBAACP,sBAAsBI,WAAWV,KAAKC;gBAAMY;aAAa;QAChE,KAAK;YACH,OAAOH,YAAYE,iBACf;gBAACA;gBAAgBA;aAAe,GAChC;gBAACA;gBAAgBN,sBAAsBI,WAAWV,KAAKC;aAAK;QAClE,KAAK;QACL;YACE,OAAOQ;IACX;AACF,EAAE;AAEF,OAAO,MAAMK,yCAAyC,CACpDL,WACAC,WACAC;IAEA,MAAM,CAACC,gBAAgBC,aAAa,GAAGJ;IACvC,OAAQE;QACN,KAAK;YACH,OAAO;gBAACD;gBAAWG;aAAa;QAClC,KAAK;YACH,OAAO;gBAACD;gBAAgBF;aAAU;QACpC,KAAK;QACL;YACE,OAAOD;IACX;AACF,EAAE;AAEF,OAAO,SAASM,iBAAiBR,KAAyB;IACxD,OAAOA,KAAK,CAAC,EAAE,KAAK;AACtB;AAEA,OAAO,MAAMS,gBAAgB,CAC3BP,WACAC,WACAO;IAEA,IAAIA,SAAS,SAAS;QACpB,OAAO;IACT;IACA,IAAIA,SAAS,OAAO;QAClB,OAAO;IACT;IAEA,MAAM,CAACC,UAAUC,OAAO,GAAGV;IAC3B,2EAA2E,GAC3E,MAAMW,mBAAmB;IACzB,MAAMC,QAAQF,WAAW,OAAOD,WAAWE,mBAAmBF;IAC9D,MAAMI,MAAMH,WAAW,OAAOA,SAASC,mBAAmB;IAC1D,OAAOG,KAAKC,GAAG,CAACH,QAAQX,cAAca,KAAKC,GAAG,CAACF,MAAMZ,aAAa,UAAU;AAC9E,EAAE;AAEF,OAAO,MAAMe,iCAAiC,CAC5CC;IAEA,IAAIA,QAAQ;QACV,IAAIA,OAAOC,OAAO,CAACV,IAAI,KAAK,SAAS;YACnC,OAAO;QACT;QACA,IAAIS,OAAOC,OAAO,CAACV,IAAI,KAAK,OAAO;YACjC,OAAO;QACT;IACF;IACA,OAAO;AACT,EAAE;AAEF,MAAMW,aAAa;IACjB,cAAcC;IACd,kBAAkBA;IAClB,mBAAmBA;AACrB;AAEA,OAAO,MAAMC,2CAA2C,CACtDC;IAEA,MAAMC,YAAYD,SAAS,CAAC,aAAa;IACzC,MAAME,gBAAgBF,SAAS,CAAC,iBAAiB;IACjD,MAAMG,iBAAiBH,SAAS,CAAC,kBAAkB;IACnD,OAAO;QAAE,GAAGA,SAAS;QAAE,GAAGH,UAAU;QAAEI;QAAWC;QAAeC;IAAe;AACjF,EAAE"}
+{"version":3,"sources":["../../../../src/components/Slider/helpers.ts"],"sourcesContent":["import * as React from 'react';\nimport { rescale } from '../../helpers/math';\nimport type { InternalDraggingType, InternalValueState } from './types';\n\nexport const toPercent = (v: number, min: number, max: number) => ((v - min) / (max - min)) * 100;\n\nexport const offsetToValue = (\n  startX: number,\n  width: number,\n  min: number,\n  max: number,\n  step?: number,\n) => {\n  return rescale(startX, [0, width], [min, max], { step });\n};\n\nconst restrictValueByMinMax = (value: number, min: number, max: number) => {\n  if (value < min) {\n    return min;\n  }\n  if (value > max) {\n    return max;\n  }\n  return value;\n};\n\nexport const updateInternalStateValue = (\n  prevValue: InternalValueState,\n  nextValue: number,\n  min: number,\n  max: number,\n  dragging: InternalDraggingType | null,\n): InternalValueState => {\n  const [prevStartValue, prevEndValue] = prevValue;\n\n  if (prevEndValue === null) {\n    return [restrictValueByMinMax(nextValue, min, max), null];\n  }\n\n  switch (dragging) {\n    case 'start':\n      return nextValue > prevEndValue\n        ? [prevEndValue, prevEndValue]\n        : [restrictValueByMinMax(nextValue, min, max), prevEndValue];\n    case 'end':\n      return nextValue < prevStartValue\n        ? [prevStartValue, prevStartValue]\n        : [prevStartValue, restrictValueByMinMax(nextValue, min, max)];\n    case null:\n    default:\n      return prevValue;\n  }\n};\n\nexport const updateInternalStateValueByNativeChange = (\n  prevValue: InternalValueState,\n  nextValue: number,\n  dragging: InternalDraggingType | null,\n): InternalValueState => {\n  const [prevStartValue, prevEndValue] = prevValue;\n  switch (dragging) {\n    case 'start':\n      return [nextValue, prevEndValue];\n    case 'end':\n      return [prevStartValue, nextValue];\n    case null:\n    default:\n      return prevValue;\n  }\n};\n\nexport function isMultipleValues(value: InternalValueState): value is [number, number] {\n  return value[1] !== null;\n}\n\nexport const snapDirection = (\n  prevValue: InternalValueState,\n  nextValue: number,\n  type: InternalDraggingType | null,\n) => {\n  if (type === 'start') {\n    return 'start';\n  }\n  if (type === 'end') {\n    return 'end';\n  }\n\n  const [startRaw, endRaw] = prevValue;\n  /* startRaw и endRaw могут быть равны, поэтому насильно добавляем разницу. */\n  const FORCE_DIFF_VALUE = 0.1;\n  const start = endRaw !== null ? startRaw - FORCE_DIFF_VALUE : startRaw;\n  const end = endRaw !== null ? endRaw + FORCE_DIFF_VALUE : 0;\n  return Math.abs(start - nextValue) <= Math.abs(end - nextValue) ? 'start' : 'end';\n};\n\nexport const getDraggingTypeByTargetDataset = <T extends (EventTarget & HTMLElement) | null>(\n  target: T,\n) => {\n  if (target) {\n    if (target.dataset.type === 'start') {\n      return 'start';\n    }\n    if (target.dataset.type === 'end') {\n      return 'end';\n    }\n  }\n  return null;\n};\n\nconst resetProps = {\n  'aria-label': undefined,\n  'aria-valuetext': undefined,\n  'aria-labelledby': undefined,\n};\n\nexport const extractSliderAriaAttributesFromRestProps = <T extends React.AriaAttributes>(\n  restProps: T,\n) => {\n  const ariaLabel = restProps['aria-label'];\n  const ariaValueText = restProps['aria-valuetext'];\n  const ariaLabelledBy = restProps['aria-labelledby'];\n  return { ...restProps, ...resetProps, ariaLabel, ariaValueText, ariaLabelledBy };\n};\n"],"names":["React","rescale","toPercent","v","min","max","offsetToValue","startX","width","step","restrictValueByMinMax","value","updateInternalStateValue","prevValue","nextValue","dragging","prevStartValue","prevEndValue","updateInternalStateValueByNativeChange","isMultipleValues","snapDirection","type","startRaw","endRaw","FORCE_DIFF_VALUE","start","end","Math","abs","getDraggingTypeByTargetDataset","target","dataset","resetProps","undefined","extractSliderAriaAttributesFromRestProps","restProps","ariaLabel","ariaValueText","ariaLabelledBy"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,OAAO,QAAQ,qBAAqB;AAG7C,OAAO,MAAMC,YAAY,CAACC,GAAWC,KAAaC,MAAgB,AAAEF,CAAAA,IAAIC,GAAE,IAAMC,CAAAA,MAAMD,GAAE,IAAM,IAAI;AAElG,OAAO,MAAME,gBAAgB,CAC3BC,QACAC,OACAJ,KACAC,KACAI;IAEA,OAAOR,QAAQM,QAAQ;QAAC;QAAGC;KAAM,EAAE;QAACJ;QAAKC;KAAI,EAAE;QAAEI;IAAK;AACxD,EAAE;AAEF,MAAMC,wBAAwB,CAACC,OAAeP,KAAaC;IACzD,IAAIM,QAAQP,KAAK;QACf,OAAOA;IACT;IACA,IAAIO,QAAQN,KAAK;QACf,OAAOA;IACT;IACA,OAAOM;AACT;AAEA,OAAO,MAAMC,2BAA2B,CACtCC,WACAC,WACAV,KACAC,KACAU;IAEA,MAAM,CAACC,gBAAgBC,aAAa,GAAGJ;IAEvC,IAAII,iBAAiB,MAAM;QACzB,OAAO;YAACP,sBAAsBI,WAAWV,KAAKC;YAAM;SAAK;IAC3D;IAEA,OAAQU;QACN,KAAK;YACH,OAAOD,YAAYG,eACf;gBAACA;gBAAcA;aAAa,GAC5B;gBAACP,sBAAsBI,WAAWV,KAAKC;gBAAMY;aAAa;QAChE,KAAK;YACH,OAAOH,YAAYE,iBACf;gBAACA;gBAAgBA;aAAe,GAChC;gBAACA;gBAAgBN,sBAAsBI,WAAWV,KAAKC;aAAK;QAClE,KAAK;QACL;YACE,OAAOQ;IACX;AACF,EAAE;AAEF,OAAO,MAAMK,yCAAyC,CACpDL,WACAC,WACAC;IAEA,MAAM,CAACC,gBAAgBC,aAAa,GAAGJ;IACvC,OAAQE;QACN,KAAK;YACH,OAAO;gBAACD;gBAAWG;aAAa;QAClC,KAAK;YACH,OAAO;gBAACD;gBAAgBF;aAAU;QACpC,KAAK;QACL;YACE,OAAOD;IACX;AACF,EAAE;AAEF,OAAO,SAASM,iBAAiBR,KAAyB;IACxD,OAAOA,KAAK,CAAC,EAAE,KAAK;AACtB;AAEA,OAAO,MAAMS,gBAAgB,CAC3BP,WACAC,WACAO;IAEA,IAAIA,SAAS,SAAS;QACpB,OAAO;IACT;IACA,IAAIA,SAAS,OAAO;QAClB,OAAO;IACT;IAEA,MAAM,CAACC,UAAUC,OAAO,GAAGV;IAC3B,2EAA2E,GAC3E,MAAMW,mBAAmB;IACzB,MAAMC,QAAQF,WAAW,OAAOD,WAAWE,mBAAmBF;IAC9D,MAAMI,MAAMH,WAAW,OAAOA,SAASC,mBAAmB;IAC1D,OAAOG,KAAKC,GAAG,CAACH,QAAQX,cAAca,KAAKC,GAAG,CAACF,MAAMZ,aAAa,UAAU;AAC9E,EAAE;AAEF,OAAO,MAAMe,iCAAiC,CAC5CC;IAEA,IAAIA,QAAQ;QACV,IAAIA,OAAOC,OAAO,CAACV,IAAI,KAAK,SAAS;YACnC,OAAO;QACT;QACA,IAAIS,OAAOC,OAAO,CAACV,IAAI,KAAK,OAAO;YACjC,OAAO;QACT;IACF;IACA,OAAO;AACT,EAAE;AAEF,MAAMW,aAAa;IACjB,cAAcC;IACd,kBAAkBA;IAClB,mBAAmBA;AACrB;AAEA,OAAO,MAAMC,2CAA2C,CACtDC;IAEA,MAAMC,YAAYD,SAAS,CAAC,aAAa;IACzC,MAAME,gBAAgBF,SAAS,CAAC,iBAAiB;IACjD,MAAMG,iBAAiBH,SAAS,CAAC,kBAAkB;IACnD,OAAO;QAAE,GAAGA,SAAS;QAAE,GAAGH,UAAU;QAAEI;QAAWC;QAAeC;IAAe;AACjF,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Slider/types.ts"],"sourcesContent":["export type InternalValueState = [number, number | null];\n\nexport type InternalDraggingType = 'start' | 'end';\n\nexport interface InternalGestureRef {\n  dragging: InternalDraggingType | null;\n  startX: number;\n  containerWidth: number;\n}\n"],"names":[],"mappings":"AAIA,WAIC"}
+{"version":3,"sources":["../../../../src/components/Slider/types.ts"],"sourcesContent":["export type InternalValueState = [number, number | null];\n\nexport type InternalDraggingType = 'start' | 'end';\n\nexport interface InternalGestureRef {\n  dragging: InternalDraggingType | null;\n  startX: number;\n  containerWidth: number;\n}\n"],"names":[],"rangeMappings":"","mappings":"AAIA,WAIC"}

package/dist/cssm/components/Snackbar/Snackbar.d.ts

@@ -1,7 +1,12 @@
 import * as React from 'react';
 import { HTMLAttributesWithRootRef } from '../../types';
 import { Basic, BasicProps } from './subcomponents/Basic/Basic';
-export interface SnackbarProps extends HTMLAttributesWithRootRef<HTMLElement>, BasicProps {
+import type { SnackbarPlacement } from './types';
+export interface SnackbarProps extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'role'>, BasicProps {
+    /**
+     * Задаёт расположение компонента.
+     */
+    placement?: SnackbarPlacement;
     /**
      * Название кнопки действия в уведомлении
      * Не может использоваться одновременно с `subtitle`
@@ -10,7 +15,7 @@ export interface SnackbarProps extends HTMLAttributesWithRootRef<HTMLElement>, B
     /**
      * Будет вызвано при клике на кнопку действия
      */
-    onActionClick?: (e: React.MouseEvent) => void;
+    onActionClick?: (event: React.MouseEvent) => void;
     /**
      * Время в миллисекундах, через которое плашка скроется
      */
@@ -28,7 +33,7 @@ export interface SnackbarProps extends HTMLAttributesWithRootRef<HTMLElement>, B
  * @see https://vkcom.github.io/VKUI/#/Snackbar
  */
 export declare const Snackbar: {
-    ({ children, layout: layoutProps, action, before, after, duration, onActionClick, onClose, mode, subtitle, offsetY, style, ...restProps }: SnackbarProps): React.JSX.Element;
+    ({ placement, children, layout, action, before, after, duration, onActionClick, onClose, mode, subtitle, offsetY, style, getRootRef, ...restProps }: SnackbarProps): import("react/jsx-runtime").JSX.Element;
     Basic: typeof Basic;
 };
 //# sourceMappingURL=Snackbar.d.ts.map

package/dist/cssm/components/Snackbar/Snackbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Snackbar.d.ts","sourceRoot":"","sources":["../../../../src/components/Snackbar/Snackbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAKxD,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAGhE,MAAM,WAAW,aAAc,SAAQ,yBAAyB,CAAC,WAAW,CAAC,EAAE,UAAU;IACvF;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAE9C;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;CACzC;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ;+IAclB,aAAa;;CAiKf,CAAC"}
+{"version":3,"file":"Snackbar.d.ts","sourceRoot":"","sources":["../../../../src/components/Snackbar/Snackbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAGxD,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,KAAK,EAAa,iBAAiB,EAAE,MAAM,SAAS,CAAC;AA2B5D,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,MAAM,CAAC,EAC7D,UAAU;IACZ;;OAEG;IACH,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAClD;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;CACzC;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ;yJAgBlB,aAAa;;CAgMf,CAAC"}