@vkontakte/vkui 5.4.3 → 5.5.1

package/dist/components/Slider/Slider.js

@@ -1,49 +1,194 @@
-import _object_spread from "@swc/helpers/src/_object_spread.mjs";
-import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
-import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
-import _sliced_to_array from "@swc/helpers/src/_sliced_to_array.mjs";
+import { _ as _define_property } from "@swc/helpers/_/_define_property";
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
+import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
+import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import * as React from "react";
+import { classNames } from "@vkontakte/vkjs";
 import { clamp } from "../../helpers/math";
-import { UniversalSlider } from "../RangeSlider/UniversalSlider";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
+import { useExternRef } from "../../hooks/useExternRef";
+import { SizeType } from "../../lib/adaptivity";
+import { Touch } from "../Touch/Touch";
+import { SliderThumb } from "./SliderThumb/SliderThumb";
+import { extractSliderAriaAttributesFromRestProps, getDraggingTypeByTargetDataset, isMultipleValues, offsetToValue, snapDirection, toPercent, updateInternalStateValue, updateInternalStateValueByNativeChange } from "./helpers";
+var sizeYClassNames = _define_property({
+    none: "vkuiSlider--sizeY-none"
+}, SizeType.COMPACT, "vkuiSlider--sizeY-compact");
 /**
  * @see https://vkcom.github.io/VKUI/#/Slider
  */ export var Slider = function(_param) {
-    var onChange = _param.onChange, _param_min = _param.min, min = _param_min === void 0 ? 0 : _param_min, _param_max = _param.max, max = _param_max === void 0 ? 100 : _param_max, _param_defaultValue = _param.defaultValue, defaultValue = _param_defaultValue === void 0 ? min : _param_defaultValue, value = _param.value, props = _object_without_properties(_param, [
-        "onChange",
+    var // TODO [>=6]: Выставить 1 как значение по умолчанию, чтобы было как в браузерном <input type="range" />
+    step = _param.step, _param_min = _param.min, min = _param_min === void 0 ? 0 : _param_min, _param_max = _param.max, max = _param_max === void 0 ? 100 : _param_max, valueProp = _param.value, multipleProp = _param.multiple, _param_defaultValue = _param.defaultValue, defaultValue = _param_defaultValue === void 0 ? multipleProp ? [
+        min,
+        max
+    ] : min : _param_defaultValue, disabled = _param.disabled, className = _param.className, getRootRef = _param.getRootRef, getAriaLabel = _param.getAriaLabel, getAriaValueText = _param.getAriaValueText, onChange = _param.onChange, restProps = _object_without_properties(_param, [
+        "step",
         "min",
         "max",
+        "value",
+        "multiple",
         "defaultValue",
-        "value"
+        "disabled",
+        "className",
+        "getRootRef",
+        "getAriaLabel",
+        "getAriaValueText",
+        "onChange"
     ]);
-    var isControlled = value !== undefined;
+    var _useAdaptivity = useAdaptivity(), _useAdaptivity_sizeY = _useAdaptivity.sizeY, sizeY = _useAdaptivity_sizeY === void 0 ? "none" : _useAdaptivity_sizeY;
+    var isControlled = valueProp !== undefined;
     var _React_useState = _sliced_to_array(React.useState(defaultValue), 2), localValue = _React_useState[0], setValue = _React_useState[1];
-    var _value = clamp(isControlled ? value : localValue, min, max);
-    var handleChange = React.useCallback(function(nextValue, event) {
-        if (props.disabled || _value === nextValue[1]) {
-            return;
-        }
-        !isControlled && setValue(nextValue[1]);
-        onChange && onChange(nextValue[1], event);
+    var value = React.useMemo(function() {
+        var resolvedValue = isControlled ? valueProp : localValue;
+        return Array.isArray(resolvedValue) ? [
+            clamp(resolvedValue[0], min, max),
+            clamp(resolvedValue[1], min, max)
+        ] : [
+            clamp(resolvedValue, min, max),
+            null
+        ];
     }, [
-        props.disabled,
-        _value,
         isControlled,
-        onChange
+        valueProp,
+        localValue,
+        min,
+        max
     ]);
-    var rangeValue = React.useMemo(function() {
-        return [
-            null,
-            _value
-        ];
-    }, [
-        _value
+    var _value = _sliced_to_array(value, 2), startValue = _value[0], endValue = _value[1];
+    var multiple = multipleProp && endValue !== null;
+    var startValueInPercent = toPercent(startValue, min, max);
+    var endReversedValueInPercent = multiple ? toPercent(endValue, min, max) : 0;
+    var gesture = React.useRef({
+        dragging: null,
+        startX: 0,
+        containerWidth: 0
+    }).current;
+    var thumbsContainerRef = useExternRef(getRootRef);
+    var thumbStartInputRef = React.useRef(null);
+    var thumbEndInputRef = React.useRef(null);
+    var _extractSliderAriaAttributesFromRestProps = extractSliderAriaAttributesFromRestProps(restProps), ariaLabel = _extractSliderAriaAttributesFromRestProps.ariaLabel, ariaValueText = _extractSliderAriaAttributesFromRestProps.ariaValueText, ariaLabelledBy = _extractSliderAriaAttributesFromRestProps.ariaLabelledBy, restPropsWithoutAriaAttributes = _object_without_properties(_extractSliderAriaAttributesFromRestProps, [
+        "ariaLabel",
+        "ariaValueText",
+        "ariaLabelledBy"
     ]);
-    return /*#__PURE__*/ React.createElement(UniversalSlider, _object_spread_props(_object_spread({}, props), {
-        value: rangeValue,
-        onChange: handleChange,
-        min: min,
-        max: max
-    }));
+    var changeValue = function(nextValue, event) {
+        if (disabled || value[0] === nextValue[0] && value[1] === nextValue[1]) {
+            return;
+        }
+        if (multipleProp) {
+            if (isMultipleValues(nextValue)) {
+                !isControlled && setValue(nextValue);
+                onChange && onChange(nextValue, event);
+            }
+        } else {
+            !isControlled && setValue(nextValue[0]);
+            onChange && onChange(nextValue[0], event);
+        }
+    };
+    var handlePointerStart = function(event) {
+        if (!thumbsContainerRef.current) {
+            return;
+        }
+        var _thumbsContainerRef_current_getBoundingClientRect = thumbsContainerRef.current.getBoundingClientRect(), nextContainerX = _thumbsContainerRef_current_getBoundingClientRect.left, nextContainerWidth = _thumbsContainerRef_current_getBoundingClientRect.width;
+        // @ts-expect-error: TS2345 в VKUITouchEvent плохо описаны типы. `target` это просто `EventTarget`.
+        var foundDraggingType = getDraggingTypeByTargetDataset(event.originalEvent.target);
+        var nextStartX = event.startX - nextContainerX;
+        var nextValue = offsetToValue(nextStartX, nextContainerWidth, min, max, step);
+        var nextDragging = snapDirection(value, nextValue, foundDraggingType);
+        gesture.dragging = nextDragging;
+        gesture.containerWidth = nextContainerWidth;
+        gesture.startX = nextStartX;
+        var updatedInternalStateValue = updateInternalStateValue(value, nextValue, min, max, nextDragging);
+        var _updatedInternalStateValue = _sliced_to_array(updatedInternalStateValue, 2), nextStartValue = _updatedInternalStateValue[0], nextEndValue = _updatedInternalStateValue[1];
+        if (thumbStartInputRef.current && (foundDraggingType === "start" || nextStartValue !== startValue && nextEndValue === endValue)) {
+            thumbStartInputRef.current.focus();
+            event.originalEvent.preventDefault();
+        } else if (thumbEndInputRef.current && (foundDraggingType === "end" || nextEndValue !== endValue && nextStartValue === startValue)) {
+            thumbEndInputRef.current.focus();
+            event.originalEvent.preventDefault();
+        }
+        changeValue(updatedInternalStateValue, event);
+        event.originalEvent.stopPropagation();
+    };
+    var handlePointerMove = function(event) {
+        var startX = gesture.startX, containerWidth = gesture.containerWidth, dragging = gesture.dragging;
+        var _event_shiftX = event.shiftX, shiftX = _event_shiftX === void 0 ? 0 : _event_shiftX;
+        var nextStartX = startX + shiftX;
+        var nextValue = offsetToValue(nextStartX, containerWidth, min, max, step);
+        changeValue(updateInternalStateValue(value, nextValue, min, max, dragging), event);
+        event.originalEvent.stopPropagation();
+        event.originalEvent.preventDefault();
+    };
+    var handlePointerEnd = function(event) {
+        gesture.dragging = null;
+        event.originalEvent.stopPropagation();
+    };
+    var handleChangeByNativeInput = function(event) {
+        changeValue(updateInternalStateValueByNativeChange(value, Number(event.target.value), getDraggingTypeByTargetDataset(event.target)), // @ts-expect-error: TS2345 сейчас тип расширить не получится (см. TODO в описании `onChange`)
+        event);
+    };
+    return /*#__PURE__*/ React.createElement(Touch, _object_spread_props(_object_spread({
+        "data-value": multiple ? "".concat(startValue, ",").concat(endValue) : startValue
+    }, restPropsWithoutAriaAttributes), {
+        className: classNames("vkuiSlider", disabled && "vkuiSlider--disabled", sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], className),
+        onStart: disabled ? undefined : handlePointerStart,
+        onMove: disabled ? undefined : handlePointerMove,
+        onEnd: disabled ? undefined : handlePointerEnd
+    }), /*#__PURE__*/ React.createElement("div", {
+        className: "vkuiSlider__track"
+    }), /*#__PURE__*/ React.createElement("div", {
+        className: "vkuiSlider__track-fill",
+        style: multiple ? {
+            left: "".concat(startValueInPercent, "%"),
+            right: "".concat(100 - endReversedValueInPercent, "%")
+        } : {
+            width: "".concat(startValueInPercent, "%")
+        }
+    }), /*#__PURE__*/ React.createElement("div", {
+        ref: thumbsContainerRef,
+        className: "vkuiSlider__thumbs"
+    }, /*#__PURE__*/ React.createElement(SliderThumb, {
+        "data-type": "start",
+        className: "vkuiSlider__thumb",
+        style: {
+            left: "".concat(startValueInPercent, "%"),
+            // Меняем местами порядок слоёв, иначе, при достижении `start` и `end` 100%, `end` будет перекрывать `start`.
+            zIndex: multiple && startValueInPercent >= 50 ? 2 : undefined
+        },
+        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: "vkuiSlider__thumb",
+        style: {
+            left: "".concat(endReversedValueInPercent, "%")
+        },
+        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/components/Slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { clamp } from '../../helpers/math';\nimport {\n  UniversalSlider,\n  UniversalSliderProps,\n  UniversalValue,\n} from '../RangeSlider/UniversalSlider';\nimport { TouchEvent } from '../Touch/Touch';\n\nexport type SliderProps = UniversalSliderProps<number>;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Slider\n */\nexport const Slider = ({\n  onChange,\n  min = 0,\n  max = 100,\n  defaultValue = min,\n  value,\n  ...props\n}: SliderProps) => {\n  const isControlled = value !== undefined;\n\n  const [localValue, setValue] = React.useState(defaultValue);\n  const _value = clamp(isControlled ? value : localValue, min, max);\n\n  const handleChange: UniversalSliderProps<UniversalValue>['onChange'] = React.useCallback(\n    (nextValue: UniversalValue, event: TouchEvent) => {\n      if (props.disabled || _value === nextValue[1]) {\n        return;\n      }\n      !isControlled && setValue(nextValue[1]);\n      onChange && onChange(nextValue[1], event);\n    },\n    [props.disabled, _value, isControlled, onChange],\n  );\n\n  const rangeValue: [null, number] = React.useMemo(() => [null, _value], [_value]);\n  return (\n    <UniversalSlider {...props} value={rangeValue} onChange={handleChange} min={min} max={max} />\n  );\n};\n"],"names":["React","clamp","UniversalSlider","Slider","onChange","min","max","defaultValue","value","props","isControlled","undefined","useState","localValue","setValue","_value","handleChange","useCallback","nextValue","event","disabled","rangeValue","useMemo"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,KAAK,QAAQ,qBAAqB;AAC3C,SACEC,eAAe,QAGV,iCAAiC;AAKxC;;CAEC,GACD,OAAO,IAAMC,SAAS,iBAOH;QANjBC,kBAAAA,8BACAC,KAAAA,8BAAM,oCACNC,KAAAA,8BAAM,+CACNC,cAAAA,gDAAeF,2BACfG,eAAAA,OACGC;QALHL;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,eAAeF,UAAUG;IAE/B,IAA+BX,mCAAAA,MAAMY,QAAQ,CAACL,mBAAvCM,aAAwBb,oBAAZc,WAAYd;IAC/B,IAAMe,SAASd,MAAMS,eAAeF,QAAQK,UAAU,EAAER,KAAKC;IAE7D,IAAMU,eAAiEhB,MAAMiB,WAAW,CACtF,SAACC,WAA2BC,OAAsB;QAChD,IAAIV,MAAMW,QAAQ,IAAIL,WAAWG,SAAS,CAAC,EAAE,EAAE;YAC7C;QACF,CAAC;QACD,CAACR,gBAAgBI,SAASI,SAAS,CAAC,EAAE;QACtCd,YAAYA,SAASc,SAAS,CAAC,EAAE,EAAEC;IACrC,GACA;QAACV,MAAMW,QAAQ;QAAEL;QAAQL;QAAcN;KAAS;IAGlD,IAAMiB,aAA6BrB,MAAMsB,OAAO,CAAC;eAAM;YAAC,IAAI;YAAEP;SAAO;OAAE;QAACA;KAAO;IAC/E,qBACE,oBAACb,yDAAoBO;QAAOD,OAAOa;QAAYjB,UAAUY;QAAcX,KAAKA;QAAKC,KAAKA;;AAE1F,EAAE"}
+{"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 { SizeType } from '../../lib/adaptivity';\nimport { HasRootRef } 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  [SizeType.COMPACT]: styles['Slider--sizeY-compact'],\n};\n\nexport interface SliderBaseProps\n  extends HasRootRef<HTMLDivElement>,\n    Omit<React.HTMLAttributes<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}\n\nexport interface SliderProps extends SliderBaseProps {\n  multiple?: false;\n  value?: number;\n  defaultValue?: number;\n  /**\n   * TODO [>=6]: Расширить тип `event` с `React.ChangeEvent`.\n   */\n  onChange?(value: number, event: TouchEvent): void;\n}\n\nexport interface SliderMultipleProps extends SliderBaseProps {\n  multiple: true;\n  value?: [number, number];\n  defaultValue?: [number, number];\n  /**\n   * TODO [>=6]: Расширить тип `event` с `React.ChangeEvent`.\n   */\n  onChange?(value: [number, number], event: TouchEvent): void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Slider\n */\nexport const Slider = ({\n  // TODO [>=6]: Выставить 1 как значение по умолчанию, чтобы было как в браузерном <input type=\"range\" />\n  step,\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  ...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) => {\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      // @ts-expect-error: TS2345 сейчас тип расширить не получится (см. TODO в описании `onChange`)\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 !== SizeType.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          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            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","SizeType","Touch","SliderThumb","extractSliderAriaAttributesFromRestProps","getDraggingTypeByTargetDataset","isMultipleValues","offsetToValue","snapDirection","toPercent","updateInternalStateValue","updateInternalStateValueByNativeChange","sizeYClassNames","none","COMPACT","Slider","step","min","max","value","valueProp","multiple","multipleProp","defaultValue","disabled","className","getRootRef","getAriaLabel","getAriaValueText","onChange","restProps","sizeY","isControlled","undefined","useState","localValue","setValue","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","getBoundingClientRect","left","nextContainerX","width","nextContainerWidth","foundDraggingType","originalEvent","target","nextStartX","nextDragging","updatedInternalStateValue","nextStartValue","nextEndValue","focus","preventDefault","stopPropagation","handlePointerMove","shiftX","handlePointerEnd","handleChangeByNativeInput","Number","data-value","REGULAR","onStart","onMove","onEnd","div","style","right","ref","data-type","zIndex","inputProps"],"mappings":"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"}

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import type { HasDataAttribute, HasRootRef } from '../../../types';
+interface SliderThumbProps extends HasRootRef<HTMLSpanElement>, HasDataAttribute {
+    className?: string;
+    style?: React.CSSProperties;
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement> & HasDataAttribute;
+}
+export declare const SliderThumb: ({ className, getRootRef, inputProps, ...restProps }: SliderThumbProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,30 @@
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
+import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
+import * as React from "react";
+import { classNames } from "@vkontakte/vkjs";
+import { useFocusVisible } from "../../../hooks/useFocusVisible";
+import { FocusVisible } from "../../FocusVisible/FocusVisible";
+export var SliderThumb = function(_param) {
+    var className = _param.className, getRootRef = _param.getRootRef, inputProps = _param.inputProps, restProps = _object_without_properties(_param, [
+        "className",
+        "getRootRef",
+        "inputProps"
+    ]);
+    var _useFocusVisible = useFocusVisible(false), focusVisible = _useFocusVisible.focusVisible, onBlur = _useFocusVisible.onBlur, onFocus = _useFocusVisible.onFocus;
+    return /*#__PURE__*/ React.createElement("span", _object_spread({
+        ref: getRootRef,
+        className: classNames("vkuiSliderThumb", focusVisible && "vkuiSliderThumb--focused", className)
+    }, restProps), /*#__PURE__*/ React.createElement("input", _object_spread_props(_object_spread({}, inputProps), {
+        type: "range",
+        className: "vkuiSliderThumb__nativeInput",
+        "aria-orientation": "horizontal",
+        onBlur: onBlur,
+        onFocus: onFocus
+    })), /*#__PURE__*/ React.createElement(FocusVisible, {
+        visible: focusVisible,
+        mode: "outside"
+    }));
+};
+
+//# sourceMappingURL=SliderThumb.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Slider/SliderThumb/SliderThumb.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useFocusVisible } from '../../../hooks/useFocusVisible';\nimport type { HasDataAttribute, HasRootRef } from '../../../types';\nimport { FocusVisible } from '../../FocusVisible/FocusVisible';\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}\n\nexport const SliderThumb = ({\n  className,\n  getRootRef,\n  inputProps,\n  ...restProps\n}: SliderThumbProps) => {\n  const { focusVisible, onBlur, onFocus } = useFocusVisible(false);\n\n  return (\n    <span\n      ref={getRootRef}\n      className={classNames(\n        styles['SliderThumb'],\n        focusVisible && styles['SliderThumb--focused'],\n        className,\n      )}\n      {...restProps}\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      <FocusVisible visible={focusVisible} mode=\"outside\" />\n    </span>\n  );\n};\n"],"names":["React","classNames","useFocusVisible","FocusVisible","SliderThumb","className","getRootRef","inputProps","restProps","focusVisible","onBlur","onFocus","span","ref","input","type","aria-orientation","visible","mode"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,eAAe,QAAQ,iCAAiC;AAEjE,SAASC,YAAY,QAAQ,kCAAkC;AAW/D,OAAO,IAAMC,cAAc;QACzBC,mBAAAA,WACAC,oBAAAA,YACAC,oBAAAA,YACGC;QAHHH;QACAC;QACAC;;IAGA,IAA0CL,mBAAAA,gBAAgB,QAAlDO,eAAkCP,iBAAlCO,cAAcC,SAAoBR,iBAApBQ,QAAQC,UAAYT,iBAAZS;IAE9B,qBACE,oBAACC;QACCC,KAAKP;QACLD,WAAWJ,8BAETQ,4CACAJ;OAEEG,0BAEJ,oBAACM,iDACKP;QACJQ,MAAK;QACLV,SAAS;QACTW,oBAAiB;QACjBN,QAAQA;QACRC,SAASA;uBAEX,oBAACR;QAAac,SAASR;QAAcS,MAAK;;AAGhD,EAAE"}

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

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { InternalDraggingType, InternalValueState } from './types';
+export declare const toPercent: (v: number, min: number, max: number) => number;
+export declare const offsetToValue: (startX: number, width: number, min: number, max: number, step?: number) => number;
+export declare const updateInternalStateValue: (prevValue: InternalValueState, nextValue: number, min: number, max: number, dragging: InternalDraggingType | null) => InternalValueState;
+export declare const updateInternalStateValueByNativeChange: (prevValue: InternalValueState, nextValue: number, dragging: InternalDraggingType | null) => InternalValueState;
+export declare function isMultipleValues(value: InternalValueState): value is [number, number];
+export declare const snapDirection: (prevValue: InternalValueState, nextValue: number, type: InternalDraggingType | null) => "end" | "start";
+export declare const getDraggingTypeByTargetDataset: <T extends (EventTarget & HTMLElement) | null>(target: T) => "end" | "start" | null;
+export declare const extractSliderAriaAttributesFromRestProps: <T extends React.AriaAttributes>(restProps: T) => T & {
+    ariaLabel: string | undefined;
+    ariaValueText: string | undefined;
+    ariaLabelledBy: string | undefined;
+    'aria-label': undefined;
+    'aria-valuetext': undefined;
+    'aria-labelledby': undefined;
+};

package/dist/components/Slider/helpers.js

@@ -0,0 +1,120 @@
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
+import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
+import * as React from "react";
+import { rescale } from "../../helpers/math";
+export var toPercent = function(v, min, max) {
+    return (v - min) / (max - min) * 100;
+};
+export var offsetToValue = function(startX, width, min, max, step) {
+    return rescale(startX, [
+        0,
+        width
+    ], [
+        min,
+        max
+    ], {
+        step: step
+    });
+};
+var restrictValueByMinMax = function(value, min, max) {
+    if (value < min) {
+        return min;
+    }
+    if (value > max) {
+        return max;
+    }
+    return value;
+};
+export var updateInternalStateValue = function(prevValue, nextValue, min, max, dragging) {
+    var _prevValue = _sliced_to_array(prevValue, 2), prevStartValue = _prevValue[0], prevEndValue = _prevValue[1];
+    if (prevEndValue === null) {
+        return [
+            restrictValueByMinMax(nextValue, min, max),
+            null
+        ];
+    }
+    switch(dragging){
+        case "start":
+            return nextValue > prevEndValue ? [
+                prevEndValue,
+                prevEndValue
+            ] : [
+                restrictValueByMinMax(nextValue, min, max),
+                prevEndValue
+            ];
+        case "end":
+            return nextValue < prevStartValue ? [
+                prevStartValue,
+                prevStartValue
+            ] : [
+                prevStartValue,
+                restrictValueByMinMax(nextValue, min, max)
+            ];
+        case null:
+        default:
+            return prevValue;
+    }
+};
+export var updateInternalStateValueByNativeChange = function(prevValue, nextValue, dragging) {
+    var _prevValue = _sliced_to_array(prevValue, 2), prevStartValue = _prevValue[0], prevEndValue = _prevValue[1];
+    switch(dragging){
+        case "start":
+            return [
+                nextValue,
+                prevEndValue
+            ];
+        case "end":
+            return [
+                prevStartValue,
+                nextValue
+            ];
+        case null:
+        default:
+            return prevValue;
+    }
+};
+export function isMultipleValues(value) {
+    return value[1] !== null;
+}
+export var snapDirection = function(prevValue, nextValue, type) {
+    if (type === "start") {
+        return "start";
+    }
+    if (type === "end") {
+        return "end";
+    }
+    var _prevValue = _sliced_to_array(prevValue, 2), startRaw = _prevValue[0], endRaw = _prevValue[1];
+    /* startRaw и endRaw могут быть равны, поэтому насильно добавляем разницу. */ var FORCE_DIFF_VALUE = 0.1;
+    var start = endRaw !== null ? startRaw - FORCE_DIFF_VALUE : startRaw;
+    var end = endRaw !== null ? endRaw + FORCE_DIFF_VALUE : 0;
+    return Math.abs(start - nextValue) <= Math.abs(end - nextValue) ? "start" : "end";
+};
+export var getDraggingTypeByTargetDataset = function(target) {
+    if (target) {
+        if (target.dataset.type === "start") {
+            return "start";
+        }
+        if (target.dataset.type === "end") {
+            return "end";
+        }
+    }
+    return null;
+};
+var resetProps = {
+    "aria-label": undefined,
+    "aria-valuetext": undefined,
+    "aria-labelledby": undefined
+};
+export var extractSliderAriaAttributesFromRestProps = function(restProps) {
+    var ariaLabel = restProps["aria-label"];
+    var ariaValueText = restProps["aria-valuetext"];
+    var ariaLabelledBy = restProps["aria-labelledby"];
+    return _object_spread_props(_object_spread({}, restProps, resetProps), {
+        ariaLabel: ariaLabel,
+        ariaValueText: ariaValueText,
+        ariaLabelledBy: ariaLabelledBy
+    });
+};
+
+//# sourceMappingURL=helpers.js.map

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

@@ -0,0 +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,IAAMC,YAAY,SAACC,GAAWC,KAAaC;WAAgB,AAAEF,CAAAA,IAAIC,GAAE,IAAMC,CAAAA,MAAMD,GAAE,IAAM;EAAI;AAElG,OAAO,IAAME,gBAAgB,SAC3BC,QACAC,OACAJ,KACAC,KACAI;IAEA,OAAOR,QAAQM,QAAQ;QAAC;QAAGC;KAAM,EAAE;QAACJ;QAAKC;KAAI,EAAE;QAAEI,MAAAA;IAAK;AACxD,EAAE;AAEF,IAAMC,wBAAwB,SAACC,OAAeP,KAAaC;IACzD,IAAIM,QAAQP,KAAK;QACf,OAAOA;IACT;IACA,IAAIO,QAAQN,KAAK;QACf,OAAOA;IACT;IACA,OAAOM;AACT;AAEA,OAAO,IAAMC,2BAA2B,SACtCC,WACAC,WACAV,KACAC,KACAU;IAEA,IAAuCF,8BAAAA,eAAhCG,iBAAgCH,eAAhBI,eAAgBJ;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,IAAMK,yCAAyC,SACpDL,WACAC,WACAC;IAEA,IAAuCF,8BAAAA,eAAhCG,iBAAgCH,eAAhBI,eAAgBJ;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,IAAMS,gBAAgB,SAC3BP,WACAC,WACAO;IAEA,IAAIA,SAAS,SAAS;QACpB,OAAO;IACT;IACA,IAAIA,SAAS,OAAO;QAClB,OAAO;IACT;IAEA,IAA2BR,8BAAAA,eAApBS,WAAoBT,eAAVU,SAAUV;IAC3B,2EAA2E,GAC3E,IAAMW,mBAAmB;IACzB,IAAMC,QAAQF,WAAW,OAAOD,WAAWE,mBAAmBF;IAC9D,IAAMI,MAAMH,WAAW,OAAOA,SAASC,mBAAmB;IAC1D,OAAOG,KAAKC,IAAIH,QAAQX,cAAca,KAAKC,IAAIF,MAAMZ,aAAa,UAAU;AAC9E,EAAE;AAEF,OAAO,IAAMe,iCAAiC,SAC5CC;IAEA,IAAIA,QAAQ;QACV,IAAIA,OAAOC,QAAQV,SAAS,SAAS;YACnC,OAAO;QACT;QACA,IAAIS,OAAOC,QAAQV,SAAS,OAAO;YACjC,OAAO;QACT;IACF;IACA,OAAO;AACT,EAAE;AAEF,IAAMW,aAAa;IACjB,cAAcC;IACd,kBAAkBA;IAClB,mBAAmBA;AACrB;AAEA,OAAO,IAAMC,2CAA2C,SACtDC;IAEA,IAAMC,YAAYD,SAAS,CAAC,aAAa;IACzC,IAAME,gBAAgBF,SAAS,CAAC,iBAAiB;IACjD,IAAMG,iBAAiBH,SAAS,CAAC,kBAAkB;IACnD,OAAO,wCAAKA,WAAcH;QAAYI,WAAAA;QAAWC,eAAAA;QAAeC,gBAAAA;;AAClE,EAAE"}

package/dist/components/Slider/types.d.ts

@@ -0,0 +1,7 @@
+export type InternalValueState = [number, number | null];
+export type InternalDraggingType = 'start' | 'end';
+export interface InternalGestureRef {
+    dragging: InternalDraggingType | null;
+    startX: number;
+    containerWidth: number;
+}

package/dist/components/Slider/types.js

@@ -0,0 +1,3 @@
+export { };
+
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +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":"AAAA,WAQC"}

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

@@ -46,4 +46,4 @@ export interface SnackbarProps extends React.HTMLAttributes<HTMLElement> {
 /**
  * @see https://vkcom.github.io/VKUI/#/Snackbar
  */
-export declare const Snackbar: ({ children, layout: layoutProps, action, before, after, duration, onActionClick, onClose, mode, className, subtitle, ...restProps }: SnackbarProps) => JSX.Element;
+export declare const Snackbar: ({ children, layout: layoutProps, action, before, after, duration, onActionClick, onClose, mode, className, subtitle, ...restProps }: SnackbarProps) => React.JSX.Element;

package/dist/components/Snackbar/Snackbar.js

@@ -1,7 +1,7 @@
-import _object_spread from "@swc/helpers/src/_object_spread.mjs";
-import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
-import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
-import _sliced_to_array from "@swc/helpers/src/_sliced_to_array.mjs";
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
+import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
+import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
 import { useAdaptivityWithJSMediaQueries } from "../../hooks/useAdaptivityWithJSMediaQueries";

package/dist/components/Snackbar/Snackbar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Snackbar/Snackbar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';\nimport { ViewWidth } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { rubber } from '../../lib/touch';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { Button } from '../Button/Button';\nimport { Touch, TouchEvent } from '../Touch/Touch';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './Snackbar.module.css';\n\nexport interface SnackbarProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * Название кнопки действия в уведомлении\n   * Не может использоваться одновременно с `subtitle`\n   */\n  action?: React.ReactNode;\n\n  /**\n   * Будет вызвано при клике на кнопку действия\n   */\n  onActionClick?: (e: React.MouseEvent) => void;\n\n  /**\n   * Может быть следующими компонентами:\n   *  - цветная иконка 24x24 или 28x28 пикселя\n   *  - `<Avatar size={32} />`\n   *  - `<Image size={40} />`\n   */\n  before?: React.ReactNode;\n  /**\n   * Контент в правой части, может быть иконкой 24x24\n   */\n  after?: React.ReactNode;\n  /**\n   * Варианты расположения кнопки действия\n   * Игнорируется на десктопах и при наличии элементов `after` или `subtitle`\n   */\n  layout?: 'vertical' | 'horizontal';\n  /**\n   * Время в миллисекундах, через которое плашка скроется\n   */\n  duration?: number;\n  /**\n   * Обработчик закрытия уведомления\n   */\n  onClose: () => void;\n  /**\n   * Задает стиль снекбара\n   */\n  mode?: 'default' | 'dark';\n  /**\n   * Дополнительная строка текста под `children`.\n   * Не может использоваться одновременно с `action`\n   */\n  subtitle?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Snackbar\n */\nexport const Snackbar = ({\n  children,\n  layout: layoutProps = 'horizontal',\n  action,\n  before,\n  after,\n  duration = 4000,\n  onActionClick,\n  onClose,\n  mode = 'default',\n  className,\n  subtitle,\n  ...restProps\n}: SnackbarProps) => {\n  const platform = usePlatform();\n  const { viewWidth } = useAdaptivityWithJSMediaQueries();\n  const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET;\n  const { waitTransitionFinish } = useWaitTransitionFinish();\n\n  const [closing, setClosing] = React.useState(false);\n  const [touched, setTouched] = React.useState(false);\n\n  const shiftXPercentRef = React.useRef<number>(0);\n  const shiftXCurrentRef = React.useRef<number>(0);\n\n  const bodyElRef = React.useRef<HTMLDivElement | null>(null);\n  const innerElRef = React.useRef<HTMLDivElement | null>(null);\n\n  const animationFrameRef = React.useRef<ReturnType<typeof requestAnimationFrame> | null>(null);\n\n  const transitionFinishDurationFallback = platform === Platform.IOS ? 320 : 400;\n\n  const close = () => {\n    setClosing(true);\n    waitTransitionFinish(\n      innerElRef.current,\n      () => {\n        onClose();\n      },\n      transitionFinishDurationFallback,\n    );\n  };\n\n  const handleActionClick: React.MouseEventHandler<HTMLElement> = (e) => {\n    close();\n\n    if (action && typeof onActionClick === 'function') {\n      onActionClick(e);\n    }\n  };\n\n  const closeTimeout = useTimeout(close, duration);\n\n  const setBodyTransform = (percent: number) => {\n    if (animationFrameRef.current !== null) {\n      cancelAnimationFrame(animationFrameRef.current);\n    }\n    animationFrameRef.current = requestAnimationFrame(() => {\n      if (bodyElRef.current) {\n        bodyElRef.current.style.transform = `translate3d(${percent}%, 0, 0)`;\n      }\n    });\n  };\n\n  const onTouchStart = closeTimeout.clear;\n\n  const onTouchMoveX = (event: TouchEvent) => {\n    const { shiftX, originalEvent } = event;\n    originalEvent.preventDefault();\n\n    if (!touched) {\n      setTouched(true);\n    }\n\n    shiftXPercentRef.current = (shiftX / (bodyElRef.current?.offsetWidth ?? 0)) * 100;\n    shiftXCurrentRef.current = rubber(shiftXPercentRef.current, 72, 1.2, platform !== Platform.IOS);\n\n    setBodyTransform(shiftXCurrentRef.current);\n  };\n\n  const onTouchEnd = (e: TouchEvent) => {\n    let callback: VoidFunction | undefined;\n\n    if (touched) {\n      let shiftXCurrent = shiftXCurrentRef.current;\n      const expectTranslateY = (shiftXCurrent / e.duration) * 240 * 0.6;\n      shiftXCurrent = shiftXCurrent + expectTranslateY;\n\n      if (isDesktop && shiftXCurrent <= -50) {\n        closeTimeout.clear();\n        waitTransitionFinish(\n          bodyElRef.current,\n          () => {\n            onClose();\n          },\n          transitionFinishDurationFallback,\n        );\n        setBodyTransform(-120);\n      } else if (!isDesktop && shiftXCurrent >= 50) {\n        closeTimeout.clear();\n        waitTransitionFinish(\n          bodyElRef.current,\n          () => {\n            onClose();\n          },\n          transitionFinishDurationFallback,\n        );\n        setBodyTransform(120);\n      } else {\n        callback = () => {\n          closeTimeout.set();\n          setBodyTransform(0);\n        };\n      }\n    } else {\n      closeTimeout.set();\n    }\n\n    setTouched(false);\n    callback && requestAnimationFrame(callback);\n  };\n\n  React.useEffect(() => closeTimeout.set(), [closeTimeout]);\n\n  const layout = after || isDesktop || subtitle ? 'vertical' : layoutProps;\n\n  return (\n    <AppRootPortal>\n      <div\n        {...restProps}\n        className={classNames(\n          styles['Snackbar'],\n          platform === Platform.IOS && styles['Snackbar--ios'],\n          {\n            vertical: styles['Snackbar--layout-vertical'],\n            horizontal: styles['Snackbar--layout-horizontal'],\n          }[layout],\n          mode === 'dark' && styles['Snackbar--mode-dark'],\n          closing && styles['Snackbar--closing'],\n          touched && styles['Snackbar--touched'],\n          isDesktop && styles['Snackbar--desktop'],\n          className,\n        )}\n      >\n        <Touch\n          className={styles['Snackbar__in']}\n          getRootRef={innerElRef}\n          onStart={onTouchStart}\n          onMoveX={onTouchMoveX}\n          onEnd={onTouchEnd}\n        >\n          <div className={styles['Snackbar__body']} ref={bodyElRef}>\n            {before && <div className={styles['Snackbar__before']}>{before}</div>}\n\n            <div className={styles['Snackbar__content']}>\n              <Paragraph className={styles['Snackbar__content-text']}>{children}</Paragraph>\n              {subtitle && !action && (\n                <Subhead className={styles['Snackbar__content-subtitle']}>{subtitle}</Subhead>\n              )}\n\n              {action && !subtitle && (\n                <Button\n                  align=\"left\"\n                  mode=\"link\"\n                  appearance={mode === 'dark' ? 'overlay' : 'accent'}\n                  size=\"s\"\n                  className={styles['Snackbar__action']}\n                  onClick={handleActionClick}\n                >\n                  {action}\n                </Button>\n              )}\n            </div>\n\n            {after && <div className={styles['Snackbar__after']}>{after}</div>}\n          </div>\n        </Touch>\n      </div>\n    </AppRootPortal>\n  );\n};\n"],"names":["React","classNames","useAdaptivityWithJSMediaQueries","usePlatform","useTimeout","useWaitTransitionFinish","ViewWidth","Platform","rubber","AppRootPortal","Button","Touch","Paragraph","Subhead","Snackbar","children","layoutProps","layout","action","before","after","duration","onActionClick","onClose","mode","className","subtitle","restProps","platform","viewWidth","isDesktop","SMALL_TABLET","waitTransitionFinish","useState","closing","setClosing","touched","setTouched","shiftXPercentRef","useRef","shiftXCurrentRef","bodyElRef","innerElRef","animationFrameRef","transitionFinishDurationFallback","IOS","close","current","handleActionClick","e","closeTimeout","setBodyTransform","percent","cancelAnimationFrame","requestAnimationFrame","style","transform","onTouchStart","clear","onTouchMoveX","event","shiftX","originalEvent","preventDefault","offsetWidth","onTouchEnd","callback","shiftXCurrent","expectTranslateY","set","useEffect","div","vertical","horizontal","getRootRef","onStart","onMoveX","onEnd","ref","align","appearance","size","onClick"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Snackbar/Snackbar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';\nimport { ViewWidth } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { rubber } from '../../lib/touch';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { Button } from '../Button/Button';\nimport { Touch, TouchEvent } from '../Touch/Touch';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './Snackbar.module.css';\n\nexport interface SnackbarProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * Название кнопки действия в уведомлении\n   * Не может использоваться одновременно с `subtitle`\n   */\n  action?: React.ReactNode;\n\n  /**\n   * Будет вызвано при клике на кнопку действия\n   */\n  onActionClick?: (e: React.MouseEvent) => void;\n\n  /**\n   * Может быть следующими компонентами:\n   *  - цветная иконка 24x24 или 28x28 пикселя\n   *  - `<Avatar size={32} />`\n   *  - `<Image size={40} />`\n   */\n  before?: React.ReactNode;\n  /**\n   * Контент в правой части, может быть иконкой 24x24\n   */\n  after?: React.ReactNode;\n  /**\n   * Варианты расположения кнопки действия\n   * Игнорируется на десктопах и при наличии элементов `after` или `subtitle`\n   */\n  layout?: 'vertical' | 'horizontal';\n  /**\n   * Время в миллисекундах, через которое плашка скроется\n   */\n  duration?: number;\n  /**\n   * Обработчик закрытия уведомления\n   */\n  onClose: () => void;\n  /**\n   * Задает стиль снекбара\n   */\n  mode?: 'default' | 'dark';\n  /**\n   * Дополнительная строка текста под `children`.\n   * Не может использоваться одновременно с `action`\n   */\n  subtitle?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Snackbar\n */\nexport const Snackbar = ({\n  children,\n  layout: layoutProps = 'horizontal',\n  action,\n  before,\n  after,\n  duration = 4000,\n  onActionClick,\n  onClose,\n  mode = 'default',\n  className,\n  subtitle,\n  ...restProps\n}: SnackbarProps) => {\n  const platform = usePlatform();\n  const { viewWidth } = useAdaptivityWithJSMediaQueries();\n  const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET;\n  const { waitTransitionFinish } = useWaitTransitionFinish();\n\n  const [closing, setClosing] = React.useState(false);\n  const [touched, setTouched] = React.useState(false);\n\n  const shiftXPercentRef = React.useRef<number>(0);\n  const shiftXCurrentRef = React.useRef<number>(0);\n\n  const bodyElRef = React.useRef<HTMLDivElement | null>(null);\n  const innerElRef = React.useRef<HTMLDivElement | null>(null);\n\n  const animationFrameRef = React.useRef<ReturnType<typeof requestAnimationFrame> | null>(null);\n\n  const transitionFinishDurationFallback = platform === Platform.IOS ? 320 : 400;\n\n  const close = () => {\n    setClosing(true);\n    waitTransitionFinish(\n      innerElRef.current,\n      () => {\n        onClose();\n      },\n      transitionFinishDurationFallback,\n    );\n  };\n\n  const handleActionClick: React.MouseEventHandler<HTMLElement> = (e) => {\n    close();\n\n    if (action && typeof onActionClick === 'function') {\n      onActionClick(e);\n    }\n  };\n\n  const closeTimeout = useTimeout(close, duration);\n\n  const setBodyTransform = (percent: number) => {\n    if (animationFrameRef.current !== null) {\n      cancelAnimationFrame(animationFrameRef.current);\n    }\n    animationFrameRef.current = requestAnimationFrame(() => {\n      if (bodyElRef.current) {\n        bodyElRef.current.style.transform = `translate3d(${percent}%, 0, 0)`;\n      }\n    });\n  };\n\n  const onTouchStart = closeTimeout.clear;\n\n  const onTouchMoveX = (event: TouchEvent) => {\n    const { shiftX, originalEvent } = event;\n    originalEvent.preventDefault();\n\n    if (!touched) {\n      setTouched(true);\n    }\n\n    shiftXPercentRef.current = (shiftX / (bodyElRef.current?.offsetWidth ?? 0)) * 100;\n    shiftXCurrentRef.current = rubber(shiftXPercentRef.current, 72, 1.2, platform !== Platform.IOS);\n\n    setBodyTransform(shiftXCurrentRef.current);\n  };\n\n  const onTouchEnd = (e: TouchEvent) => {\n    let callback: VoidFunction | undefined;\n\n    if (touched) {\n      let shiftXCurrent = shiftXCurrentRef.current;\n      const expectTranslateY = (shiftXCurrent / e.duration) * 240 * 0.6;\n      shiftXCurrent = shiftXCurrent + expectTranslateY;\n\n      if (isDesktop && shiftXCurrent <= -50) {\n        closeTimeout.clear();\n        waitTransitionFinish(\n          bodyElRef.current,\n          () => {\n            onClose();\n          },\n          transitionFinishDurationFallback,\n        );\n        setBodyTransform(-120);\n      } else if (!isDesktop && shiftXCurrent >= 50) {\n        closeTimeout.clear();\n        waitTransitionFinish(\n          bodyElRef.current,\n          () => {\n            onClose();\n          },\n          transitionFinishDurationFallback,\n        );\n        setBodyTransform(120);\n      } else {\n        callback = () => {\n          closeTimeout.set();\n          setBodyTransform(0);\n        };\n      }\n    } else {\n      closeTimeout.set();\n    }\n\n    setTouched(false);\n    callback && requestAnimationFrame(callback);\n  };\n\n  React.useEffect(() => closeTimeout.set(), [closeTimeout]);\n\n  const layout = after || isDesktop || subtitle ? 'vertical' : layoutProps;\n\n  return (\n    <AppRootPortal>\n      <div\n        {...restProps}\n        className={classNames(\n          styles['Snackbar'],\n          platform === Platform.IOS && styles['Snackbar--ios'],\n          {\n            vertical: styles['Snackbar--layout-vertical'],\n            horizontal: styles['Snackbar--layout-horizontal'],\n          }[layout],\n          mode === 'dark' && styles['Snackbar--mode-dark'],\n          closing && styles['Snackbar--closing'],\n          touched && styles['Snackbar--touched'],\n          isDesktop && styles['Snackbar--desktop'],\n          className,\n        )}\n      >\n        <Touch\n          className={styles['Snackbar__in']}\n          getRootRef={innerElRef}\n          onStart={onTouchStart}\n          onMoveX={onTouchMoveX}\n          onEnd={onTouchEnd}\n        >\n          <div className={styles['Snackbar__body']} ref={bodyElRef}>\n            {before && <div className={styles['Snackbar__before']}>{before}</div>}\n\n            <div className={styles['Snackbar__content']}>\n              <Paragraph className={styles['Snackbar__content-text']}>{children}</Paragraph>\n              {subtitle && !action && (\n                <Subhead className={styles['Snackbar__content-subtitle']}>{subtitle}</Subhead>\n              )}\n\n              {action && !subtitle && (\n                <Button\n                  align=\"left\"\n                  mode=\"link\"\n                  appearance={mode === 'dark' ? 'overlay' : 'accent'}\n                  size=\"s\"\n                  className={styles['Snackbar__action']}\n                  onClick={handleActionClick}\n                >\n                  {action}\n                </Button>\n              )}\n            </div>\n\n            {after && <div className={styles['Snackbar__after']}>{after}</div>}\n          </div>\n        </Touch>\n      </div>\n    </AppRootPortal>\n  );\n};\n"],"names":["React","classNames","useAdaptivityWithJSMediaQueries","usePlatform","useTimeout","useWaitTransitionFinish","ViewWidth","Platform","rubber","AppRootPortal","Button","Touch","Paragraph","Subhead","Snackbar","children","layoutProps","layout","action","before","after","duration","onActionClick","onClose","mode","className","subtitle","restProps","platform","viewWidth","isDesktop","SMALL_TABLET","waitTransitionFinish","useState","closing","setClosing","touched","setTouched","shiftXPercentRef","useRef","shiftXCurrentRef","bodyElRef","innerElRef","animationFrameRef","transitionFinishDurationFallback","IOS","close","current","handleActionClick","e","closeTimeout","setBodyTransform","percent","cancelAnimationFrame","requestAnimationFrame","style","transform","onTouchStart","clear","onTouchMoveX","event","shiftX","originalEvent","preventDefault","offsetWidth","onTouchEnd","callback","shiftXCurrent","expectTranslateY","set","useEffect","div","vertical","horizontal","getRootRef","onStart","onMoveX","onEnd","ref","align","appearance","size","onClick"],"mappings":"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"}

package/dist/components/Spacing/Spacing.d.ts

@@ -9,4 +9,4 @@ export interface SpacingProps extends React.HTMLAttributes<HTMLDivElement>, HasC
 /**
  * @see https://vkcom.github.io/VKUI/#/Spacing
  */
-export declare const Spacing: ({ size, style: styleProp, className, ...restProps }: SpacingProps) => JSX.Element;
+export declare const Spacing: ({ size, style: styleProp, className, ...restProps }: SpacingProps) => React.JSX.Element;

package/dist/components/Spacing/Spacing.js

@@ -1,6 +1,6 @@
-import _object_spread from "@swc/helpers/src/_object_spread.mjs";
-import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
-import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
+import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
 /**

package/dist/components/Spacing/Spacing.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Spacing/Spacing.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasChildren } from '../../types';\nimport styles from './Spacing.module.css';\n\nexport interface SpacingProps extends React.HTMLAttributes<HTMLDivElement>, HasChildren {\n  /**\n   * Высота спэйсинга\n   */\n  size?: number;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Spacing\n */\nexport const Spacing = ({ size = 8, style: styleProp, className, ...restProps }: SpacingProps) => {\n  const style: React.CSSProperties = {\n    height: size,\n    padding: `${size / 2}px 0`,\n    ...styleProp,\n  };\n\n  return <div {...restProps} className={classNames(className, styles['Spacing'])} style={style} />;\n};\n"],"names":["React","classNames","Spacing","size","style","styleProp","className","restProps","height","padding","div"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAW7C;;CAEC,GACD,OAAO,IAAMC,UAAU,iBAA2E;6BAAxEC,MAAAA,gCAAO,iBAAGC,AAAOC,mBAAPD,OAAkBE,mBAAAA,WAAcC;QAA1CJ;QAAUC;QAAkBE;;IACpD,IAAMF,QAA6B;QACjCI,QAAQL;QACRM,SAAS,AAAC,GAAW,OAATN,OAAO,GAAE;OAClBE;IAGL,qBAAO,oBAACK,+CAAQH;QAAWD,WAAWL,WAAWK;QAA+BF,OAAOA;;AACzF,EAAE"}
+{"version":3,"sources":["../../../src/components/Spacing/Spacing.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasChildren } from '../../types';\nimport styles from './Spacing.module.css';\n\nexport interface SpacingProps extends React.HTMLAttributes<HTMLDivElement>, HasChildren {\n  /**\n   * Высота спэйсинга\n   */\n  size?: number;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Spacing\n */\nexport const Spacing = ({ size = 8, style: styleProp, className, ...restProps }: SpacingProps) => {\n  const style: React.CSSProperties = {\n    height: size,\n    padding: `${size / 2}px 0`,\n    ...styleProp,\n  };\n\n  return <div {...restProps} className={classNames(className, styles['Spacing'])} style={style} />;\n};\n"],"names":["React","classNames","Spacing","size","style","styleProp","className","restProps","height","padding","div"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAW7C;;CAEC,GACD,OAAO,IAAMC,UAAU;6BAAGC,MAAAA,gCAAO,iBAAGC,AAAOC,mBAAPD,OAAkBE,mBAAAA,WAAcC;QAA1CJ;QAAUC;QAAkBE;;IACpD,IAAMF,QAA6B;QACjCI,QAAQL;QACRM,SAAS,AAAC,GAAW,OAATN,OAAO,GAAE;OAClBE;IAGL,qBAAO,oBAACK,+CAAQH;QAAWD,WAAWL,WAAWK;QAA+BF,OAAOA;;AACzF,EAAE"}